重构page1页面框架，1分为6.
src/
└── views/
├── KeyNodeRecognition1.vue (主文件)
└── KeyNodeRecognition1/ (子组件文件夹)
├── OpinionLeaders.vue
├── PelosiGraph.vue
├── LeaderAnalysis.vue
├── EventHeatmap.vue
├── PostDynamics.vue
└── WordCloud.vue
Signed-off-by: changyunju <2743319061@qq.com>
This commit is contained in:
parent
05fc7809d2
commit
3c23a084a3
BIN
src/assets/images/chuanbofenxititle.png
Normal file
BIN
src/assets/images/chuanbofenxititle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
File diff suppressed because it is too large
Load Diff
20
src/views/KeyNodeRecognition1/EventHeatmap.vue
Normal file
20
src/views/KeyNodeRecognition1/EventHeatmap.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="event-hot">
|
||||
<img src="../../assets/images/evenhot.png" alt="" style="margin-top: -6px;">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 目前没有逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.event-hot {
|
||||
width: 352px;
|
||||
height: 296px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
21
src/views/KeyNodeRecognition1/LeaderAnalysis.vue
Normal file
21
src/views/KeyNodeRecognition1/LeaderAnalysis.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="leader-ansys">
|
||||
<img src="../../assets/images/chuanbofenxi.png" alt="" style="margin-top: -6px;">
|
||||
<!-- 未来这里将是 ECharts 图表 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 目前没有逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.leader-ansys {
|
||||
width: 372px;
|
||||
height: 542px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
80
src/views/KeyNodeRecognition1/OpinionLeaders.vue
Normal file
80
src/views/KeyNodeRecognition1/OpinionLeaders.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="leader-show">
|
||||
<img src="../../assets/images/leader-show.png" alt="" style="margin-top: -6px;">
|
||||
<div class="all-leader">
|
||||
<button v-for="(item, index) in props.buttonList" :key="index" :class="{ active: activeButton === index }"
|
||||
@click="changeData(index)">
|
||||
{{ item }}
|
||||
</button>
|
||||
<div class="leader-data">
|
||||
<!-- 这里是根据按钮和时间点切换内容的逻辑 -->
|
||||
<div v-if="timePointDataIndex === 0">
|
||||
<div v-if="activeButton === 0">全部种类的数据信息</div>
|
||||
<div v-if="activeButton === 1"><el-avatar shape="square" :size="50" :src="squareUrl" /></div>
|
||||
<div v-if="activeButton === 2">自媒体的数据信息</div>
|
||||
<div v-if="activeButton === 3">中国海警</div>
|
||||
</div>
|
||||
<div v-if="timePointDataIndex === 1">时间点 2 的数据信息</div>
|
||||
<!-- ... 其他时间点 ... -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
buttonList: Array
|
||||
});
|
||||
|
||||
const activeButton = ref(0);
|
||||
const timePointDataIndex = ref(0); // 这个状态也属于本组件
|
||||
|
||||
const changeData = (index) => {
|
||||
activeButton.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 粘贴所有与 .leader-show 和 .all-leader 相关的样式 */
|
||||
.leader-show {
|
||||
width: 352px;
|
||||
height: 540px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.all-leader {
|
||||
width: 305px;
|
||||
height: 450px;
|
||||
margin-left: 24px;
|
||||
font-size: 0;
|
||||
}
|
||||
.all-leader button {
|
||||
height: 24px;
|
||||
font-family: OPPOSans;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
background-color: #04142166;
|
||||
color: #E1F4FF;
|
||||
border: 1px solid #1C588F;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.all-leader button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.all-leader button:nth-child(4) {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
.all-leader button.active {
|
||||
background-color: #236291;
|
||||
}
|
||||
.leader-data {
|
||||
color: white; /* 示例文字颜色 */
|
||||
}
|
||||
</style>
|
||||
88
src/views/KeyNodeRecognition1/PelosiGraph.vue
Normal file
88
src/views/KeyNodeRecognition1/PelosiGraph.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div class="leader-radio">
|
||||
<div>
|
||||
<img src="../../assets/images/peiluoxi.png" alt="" style="margin-left: 125px;">
|
||||
</div>
|
||||
<div class="graph-container">
|
||||
<!-- 这里将来放关系图 -->
|
||||
</div>
|
||||
<div class="leader-time">
|
||||
<p>2022.07.31 00:00:00</p>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
|
||||
<div v-for="(breakpoint, index) in breakpoints" :key="index" class="breakpoint"
|
||||
:style="{ left: breakpoint + '%' }" @click="pauseProgress(index)"></div>
|
||||
<div class="drag-button" :style="{ left: progress + '%' }" @mousedown="startDrag"></div>
|
||||
</div>
|
||||
<p>2022.08.01 00:00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
// 时间轴相关逻辑
|
||||
const progress = ref(0);
|
||||
let progressInterval = null;
|
||||
const breakpoints = [4, 12.5, 25, 37.5, 50, 62.5, 75, 87.5];
|
||||
const isPaused = ref(false);
|
||||
const isDragging = ref(false);
|
||||
|
||||
const startDrag = () => { isDragging.value = true; isPaused.value = true; };
|
||||
const startProgress = () => {
|
||||
progressInterval = setInterval(() => {
|
||||
if (!isPaused.value) {
|
||||
progress.value += 0.1;
|
||||
if (progress.value >= 100) clearInterval(progressInterval);
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
const pauseProgress = (index) => {
|
||||
const breakpointValue = breakpoints[index];
|
||||
if (Math.abs(progress.value - breakpointValue) < 1) {
|
||||
isPaused.value = !isPaused.value;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => startProgress());
|
||||
onUnmounted(() => { if (progressInterval) clearInterval(progressInterval); });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 粘贴所有与 .leader-radio 和 .leader-time 相关的样式 */
|
||||
.leader-radio {
|
||||
width: 800px;
|
||||
height: 540px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.graph-container {
|
||||
flex-grow: 1; /* 占据中间的空白区域 */
|
||||
}
|
||||
.leader-time {
|
||||
width: calc(100% - 14px);
|
||||
height: 42px;
|
||||
margin: 0 7px 7px 7px;
|
||||
border-radius: 4px;
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
background-image: linear-gradient(to right, #00527D, #97E3F87A);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.progress-bar-container {
|
||||
position: relative; /* 改为相对定位 */
|
||||
width: 400px;
|
||||
height: 6px;
|
||||
border-radius: 20px;
|
||||
background-color: #3B7699;
|
||||
}
|
||||
/* ... 其他时间轴样式 ... */
|
||||
</style>
|
||||
51
src/views/KeyNodeRecognition1/PostDynamics.vue
Normal file
51
src/views/KeyNodeRecognition1/PostDynamics.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="leader-post" ref="leaderPost">
|
||||
<div ref="originalContent">
|
||||
<img src="../../assets/images/tiewen.png" alt="">
|
||||
</div>
|
||||
<div ref="clonedContent"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
|
||||
const leaderPost = ref(null);
|
||||
const originalContent = ref(null);
|
||||
const clonedContent = ref(null);
|
||||
let scrollInterval = null;
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
if (leaderPost.value && originalContent.value && clonedContent.value) {
|
||||
clonedContent.value.innerHTML = originalContent.value.innerHTML;
|
||||
scrollInterval = setInterval(() => {
|
||||
const container = leaderPost.value;
|
||||
container.scrollTop += 1;
|
||||
if (container.scrollTop >= originalContent.value.offsetHeight) {
|
||||
container.scrollTop = 0;
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (scrollInterval) clearInterval(scrollInterval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.leader-post {
|
||||
width: 800px;
|
||||
height: 296px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.leader-post::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, and Opera */
|
||||
}
|
||||
</style>
|
||||
1463
src/views/KeyNodeRecognition1/Untitled-1.md
Normal file
1463
src/views/KeyNodeRecognition1/Untitled-1.md
Normal file
File diff suppressed because it is too large
Load Diff
21
src/views/KeyNodeRecognition1/WordCloud.vue
Normal file
21
src/views/KeyNodeRecognition1/WordCloud.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="words">
|
||||
<img src="../../assets/images/words.png" alt="" style="margin-top: -6px;">
|
||||
<img src="../../assets/images/wordsimg.png" alt="" style="margin-top: 10px;margin-left: 20px;">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 目前没有逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.words {
|
||||
width: 372px;
|
||||
height: 296px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user