实现跨组件通信和按钮高亮功能
This commit is contained in:
parent
5909e24bf2
commit
1f1713b7e2
1201
package-lock.json
generated
1201
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -11,8 +11,11 @@
|
|||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.8.24",
|
||||
"axios": "^1.10.0",
|
||||
"echarts": "^5.6.0",
|
||||
"element-plus": "^2.10.1",
|
||||
"pinia": "^3.0.3",
|
||||
"tdesign-vue-next": "^1.13.2",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
|
|
|
|||
BIN
src/assets/images/logo/reload.png
Normal file
BIN
src/assets/images/logo/reload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/logo/定位.png
Normal file
BIN
src/assets/images/logo/定位.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 95 KiB |
|
|
@ -1,10 +1,13 @@
|
|||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import App from './App.vue';
|
||||
const pinia = createPinia();
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/dist/index.css';
|
||||
import router from './router';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(pinia);
|
||||
app.use(ElementPlus);
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
22
src/store/index.js
Normal file
22
src/store/index.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useActionStore = defineStore('action', {
|
||||
state: () => ({
|
||||
triggerCombineAction: false,
|
||||
targetNodeId: '840983' // 默认高亮节点ID
|
||||
}),
|
||||
actions: {
|
||||
// 触发定位并高亮操作
|
||||
triggerCombine() {
|
||||
this.triggerCombineAction = true;
|
||||
// 自动重置状态，避免重复触发
|
||||
setTimeout(() => {
|
||||
this.triggerCombineAction = false;
|
||||
}, 100);
|
||||
},
|
||||
// 设置目标节点ID
|
||||
setTargetNodeId(id) {
|
||||
this.targetNodeId = id;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,79 +1,285 @@
|
|||
<script setup>
|
||||
<!-- <script setup>
|
||||
// import { RouterView } from 'vue-router'
|
||||
// import HelloWorld from './components/HelloWorld.vue'
|
||||
import Visualize from '../views/visualize/index.vue'
|
||||
import graphData from "../views/visualize/data/graphData.ts"
|
||||
console.log(graphData);
|
||||
|
||||
</script>
|
||||
// import Visualize from '../views/visualize/index.vue'
|
||||
// import graphData from "../views/visualize/data/graphData.ts"
|
||||
</script> -->
|
||||
|
||||
<template>
|
||||
<div style="width: 800px; height: 800px">
|
||||
<!-- <RouterView :graphData="graphData" /> -->
|
||||
<visualize :graphData="graphData" />
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div class="graph-box" id="graph-container"></div>
|
||||
<div class="slider-box">
|
||||
<button @click="handleCombineAction">定位并高亮</button>
|
||||
<el-button
|
||||
@click="toggleAutoPlay"
|
||||
:loading="state.isProcessingAutoPlay"
|
||||
:disabled="!Object.keys(state.marks).length"
|
||||
:class="{'el-button--danger': state.isAutoPlaying}"
|
||||
>
|
||||
{{ state.isAutoPlaying ? '停止播放' : '开始自动播放' }}
|
||||
</el-button>
|
||||
<el-slider v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
import { onMounted,onUnmounted, reactive, watch } from "vue";
|
||||
import { Graph } from "@antv/g6";
|
||||
import { ElLoading } from 'element-plus';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useActionStore } from '@/store';
|
||||
const state = reactive({
|
||||
graph: null,
|
||||
marks: {
|
||||
'0': "2024-01-03",
|
||||
'10': "2024-01-04",
|
||||
'20': "2024-01-05",
|
||||
'30': "2024-03-14",
|
||||
'40': "2024-03-25",
|
||||
'60': "2024-04-01",
|
||||
'70': "2024-05-12",
|
||||
'90': "2024-06-23",
|
||||
'100': "2024-06-28"
|
||||
},
|
||||
sliderValue: 0,
|
||||
loadingInstance: null,
|
||||
isAutoPlaying: false,
|
||||
isProcessingAutoPlay: false, // 修正：防止重复点击的处理状态
|
||||
remainingTime: 0, // 新增：记录暂停时剩余时间
|
||||
})
|
||||
const actionStore = useActionStore();
|
||||
|
||||
watch(() => actionStore.triggerCombineAction, (value) => {
|
||||
if (value) {
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
setTimeout(() => {
|
||||
highlightNode(actionStore.targetNodeId);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
let loadingInstance = null;
|
||||
// 显示 Loading 组件
|
||||
const showLoading = () => {
|
||||
loadingInstance = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
};
|
||||
|
||||
// 隐藏 Loading 组件
|
||||
const hideLoading = () => {
|
||||
if (loadingInstance) {
|
||||
loadingInstance.close();
|
||||
}
|
||||
};
|
||||
|
||||
const sliderChange = (val) => {
|
||||
if (state.marks[val]) {
|
||||
getData(state.marks[val]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据日期获取图谱数据
|
||||
* @param dataTime 日期
|
||||
*/
|
||||
const getData = async (dataTime) => {
|
||||
showLoading()
|
||||
const res = await axios.get("http://10.7.1.52:1922/demo/edge/getEdgeData", {
|
||||
params:
|
||||
{ dataTime }
|
||||
|
||||
});
|
||||
if (res.data.code == 200) {
|
||||
createGraph(res.data.data)
|
||||
hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建图谱
|
||||
* @param data 图谱数据
|
||||
*/
|
||||
const createGraph = (data) => {
|
||||
if (state.graph) {
|
||||
state.graph.destroy();
|
||||
}
|
||||
const graph = new Graph({
|
||||
container: document.getElementById('graph-container'),
|
||||
width: 850,
|
||||
height: 850,
|
||||
autoResize: true,
|
||||
animation: true,
|
||||
modes: {
|
||||
default: ["drag-canvas", "drag-node", "zoom-canvas"],
|
||||
},
|
||||
layout: {
|
||||
type: 'force2',
|
||||
animate: true,
|
||||
damping: 0.1,
|
||||
interval: 0.05,
|
||||
minMovement: 0.3
|
||||
},
|
||||
defaultEdge: {
|
||||
size: 1,
|
||||
color: "skyblue",
|
||||
style: {
|
||||
endArrow: {
|
||||
path: "M 0,0 L 8,4 L 8,-4 Z",
|
||||
fill: "skyblue",
|
||||
},
|
||||
lineDash: [5, 5, 5],
|
||||
},
|
||||
}
|
||||
});
|
||||
graph.node((node) => {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.label,
|
||||
size: 50,
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: "#000",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: node.bgColor ? node.bgColor : "skyblue",
|
||||
stroke: node.bgColor ? node.bgColor : "skyblue",
|
||||
lineWidth: 4,
|
||||
},
|
||||
};
|
||||
});
|
||||
graph.data(data)
|
||||
graph.render();
|
||||
graph.on('afterlayout', () => {
|
||||
graph.fitView();
|
||||
});
|
||||
state.graph = graph
|
||||
}
|
||||
// 增强按钮点击处理逻辑
|
||||
const toggleAutoPlay = () => {
|
||||
// 防止重复点击
|
||||
if (state.isProcessingAutoPlay) return;
|
||||
state.isProcessingAutoPlay = true;
|
||||
|
||||
try {
|
||||
if (state.isAutoPlaying) {
|
||||
// 停止播放流程
|
||||
if (state.autoPlayTimer) {
|
||||
clearInterval(state.autoPlayTimer);
|
||||
state.autoPlayTimer = null;
|
||||
}
|
||||
state.isAutoPlaying = false;
|
||||
state.isPaused = false;
|
||||
// 停止图形库动画
|
||||
if (state.graph?.stop) state.graph.stop();
|
||||
ElMessage.success('自动播放已停止');
|
||||
} else {
|
||||
// 开始播放流程
|
||||
const markValues = Object.keys(state.marks).map(Number).sort((a, b) => a - b);
|
||||
if (markValues.length <= 1) {
|
||||
ElMessage.warning('标记点不足，无法启动自动播放');
|
||||
return;
|
||||
}
|
||||
|
||||
state.isAutoPlaying = true;
|
||||
state.autoPlayTimer = setInterval(() => {
|
||||
const currentIndex = markValues.indexOf(state.sliderValue);
|
||||
const nextIndex = currentIndex + 1;
|
||||
|
||||
if (nextIndex >= markValues.length) {
|
||||
// 播放完成自动停止
|
||||
clearInterval(state.autoPlayTimer);
|
||||
state.autoPlayTimer = null;
|
||||
state.isAutoPlaying = false;
|
||||
ElMessage.success('所有标记点已播放完成');
|
||||
return;
|
||||
}
|
||||
|
||||
state.sliderValue = markValues[nextIndex];
|
||||
sliderChange(state.sliderValue);
|
||||
}, 12000);
|
||||
ElMessage.success('自动播放已启动');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('自动播放控制错误:', error);
|
||||
ElMessage.error('操作失败，请重试');
|
||||
// 错误恢复
|
||||
if (state.autoPlayTimer) {
|
||||
clearInterval(state.autoPlayTimer);
|
||||
state.autoPlayTimer = null;
|
||||
}
|
||||
state.isAutoPlaying = false;
|
||||
state.isPaused = false;
|
||||
} finally {
|
||||
state.isProcessingAutoPlay = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocationClick = () => {
|
||||
// 根据marks数据，3.14对应的值是30
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
}
|
||||
|
||||
/**
|
||||
* 高亮节点
|
||||
* @param id 节点id
|
||||
*/
|
||||
const highlightNode = (id) => {
|
||||
state.graph.getNodes().forEach((node) => {
|
||||
state.graph.clearItemStates(node, "selected");
|
||||
});
|
||||
let node = state.graph.findById(id);
|
||||
state.graph.updateItem(node, {
|
||||
size: 80,
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: "red",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
stroke: "blue",
|
||||
fill: "yellow",
|
||||
shadowBlur: 10,
|
||||
}
|
||||
});
|
||||
}
|
||||
const handleCombineAction = () => {
|
||||
// 先执行定位操作
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
|
||||
// 延迟执行高亮操作，确保定位完成后再高亮
|
||||
setTimeout(() => {
|
||||
highlightNode('840983');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData('2024-01-03')
|
||||
})
|
||||
onUnmounted(() => {
|
||||
// 组件卸载时清除定时器
|
||||
if (state.autoPlayTimer) {
|
||||
clearInterval(state.autoPlayTimer);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
.graph-box {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
.slider-box {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: #041421;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,68 @@
|
|||
<template>
|
||||
|
||||
<div class="main">
|
||||
<div v-if="showTooltip" class="tooltip">
|
||||
<div class="tooltip-containner">
|
||||
<img src="../assets/images/mess/key.png" alt="">
|
||||
<div class="tooltip-containner-data">
|
||||
<li><img :src="currentItem.img" alt="" style="max-width: 100%; height: auto;"></li>
|
||||
<li><img src="../assets/images/logo/point.png" alt="">最初首发者： {{ currentItem.earler }} </li>
|
||||
<li><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter }}</li>
|
||||
<li><img src="../assets/images/logo/point.png" alt="">锚点用户{{ currentItem.keyuser }}</li>
|
||||
<li><img src="../assets/images/logo/point.png" alt="">积极转发者： {{ currentItem.switcher }}</li>
|
||||
<li><img :src="currentItem.img" alt="" style=""></li>
|
||||
<li><img :src="currentItem.imgdata" alt="" style="width: 500px;height: 400px;margin-left: 20px;"></li>
|
||||
<li style="margin-left: 10px; margin-top: 20px;"><img src="../assets/images/logo/point.png"
|
||||
alt="">最初首发者： {{ currentItem.earler }} </li>
|
||||
<li style="margin-left: 10px;"><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter
|
||||
}}</li>
|
||||
<li style="margin-left: 200px;margin-top: -57px;"><img src="../assets/images/logo/point.png" alt="">锚点用户{{
|
||||
currentItem.keyuser }}</li>
|
||||
<li style="margin-left: 200px;;"><img src="../assets/images/logo/point.png" alt="">积极转发者： {{
|
||||
currentItem.switcher }}</li>
|
||||
</div>
|
||||
<img src="../assets/images/logo/cancel.png" alt=""
|
||||
style="float: right;margin-right: 10px;margin-top: -160px;cursor: pointer;" @click="showTooltip = false">
|
||||
style="float: right;margin-right: 10px;margin-top: -520px;cursor: pointer;" @click="showTooltip = false">
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showDetailModal" class="detail-modal-overlay">
|
||||
<div class="detail-modal">
|
||||
<img src="../assets/images/logo/cancel.png" @click="closeDetailModal" style="float: right;margin-left: 300px;">
|
||||
</img>
|
||||
<img :src="currentDetailItem.avatar" class="large-avatar">
|
||||
<div style="color: #FFFFFF;font-size:large;margin-left: 150px;margin-top: -50px;">{{ currentDetailItem.name }}
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<!-- 第一列 -->
|
||||
<div class="info-column">
|
||||
<p><strong>粉丝数量:</strong> {{ currentDetailItem.number }}</p>
|
||||
<p><strong>贴文被转发总数:</strong> {{ currentDetailItem.transmit || '未设置' }}</p>
|
||||
<p><strong>首次活跃时间:</strong> {{ currentDetailItem.time || '未知' }}</p>
|
||||
</div>
|
||||
<!-- 第二列 -->
|
||||
<div class="info-column">
|
||||
<p><strong>发帖总数:</strong> {{ currentDetailItem.posts || '未知' }}</p>
|
||||
<p><strong>关注数量:</strong> {{ currentDetailItem.atten || '未知' }}</p>
|
||||
<p><strong>参与互动次数:</strong> {{ currentDetailItem.interaction || '未知' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-coment">精选贴文：
|
||||
<!-- 新增贴文列表容器 -->
|
||||
<div class="post-list-container">
|
||||
<div class="post-item" v-for="(post, index) in visibleData" :key="index">
|
||||
<p class="post-content">{{ post.commenter }}</p>
|
||||
<p class="post-content">{{ post.comment }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header class="header">
|
||||
<div class="time">
|
||||
<img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
|
||||
<div class="realtime-clock" style="position: absolute; top: 20px; right:100px; color: #1EA0FD; font-family: LCD2; font-size: 20px;">
|
||||
<button class="back-home-btn" @click="goToHome">返回主页面</button>
|
||||
<div class="timer">
|
||||
|
||||
<button class="reload-button" @click="handleReload" :disabled="isReloading" style="margin-top: -10px;">
|
||||
<img src="../assets/images/logo/reload.png">
|
||||
{{ buttonText }}
|
||||
</button>
|
||||
{{ currentTime }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="search">
|
||||
<!-- 使用 el-autocomplete 组件替换原输入框 -->
|
||||
|
|
@ -62,15 +104,20 @@
|
|||
</div>
|
||||
<div class="suggestion-containner">
|
||||
<ul>
|
||||
<li v-for="item in filteredData" :key="item.id">
|
||||
<!-- 显示用户头像 -->
|
||||
<li v-for="item in filteredData" :key="item.id" @click="openDetailModal(item)"
|
||||
@mouseenter="handleMouseEnter(item.id)" @mouseleave="handleMouseLeave()"
|
||||
:class="{ 'hover-item': hoverItemId === item.id }">
|
||||
<img :src="item.avatar">
|
||||
<!-- 显示其他信息 -->
|
||||
<div class="span-data">
|
||||
<span class="span-1">{{ item.name }}</span>
|
||||
<span class="span-2">粉丝数： {{ item.number }}</span>
|
||||
<span class="span-3">推荐监控频率</span>
|
||||
<span class="span-3">推荐监控频率{{ item.transmit }}</span>
|
||||
<button
|
||||
style="background-image: url('src/assets/images/logo/定位.png'); background-size: cover; background-repeat: no-repeat; background-position: center;width: 20px;height: 20px;margin-left: 240px;margin-top:-45px;border-radius: 0px;border: 0;cursor: pointer;"
|
||||
@click.stop="handleCombineAction"></button>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -116,14 +163,13 @@
|
|||
</div>
|
||||
<!-- 初始无数据时显示空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<!-- 可以添加空状态提示或留空 -->
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containner3-img">
|
||||
<div id="main" style="width: 100%;height:230px;"></div>
|
||||
<div id="main" style="width: 450px;height:230px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containner4">
|
||||
|
|
@ -160,16 +206,40 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { ref, computed, reactive, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import IndexView from './App.vue';
|
||||
import ScrollContainer from '@/components/ScrollContainer.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import axios from 'axios';
|
||||
import { useActionStore } from '@/store';
|
||||
// import { positionElement } from 'echarts/types/src/util/layout.js';
|
||||
|
||||
let myChart = null;
|
||||
const router = useRouter();
|
||||
const actionStore = useActionStore();
|
||||
const nodes = [{}, {}];
|
||||
const links = [];
|
||||
const graphData = { nodes, links }
|
||||
const graphData = { nodes, links };
|
||||
// 添加以下响应式变量声明
|
||||
const isReloading = ref(false);
|
||||
const buttonText = ref('');
|
||||
// 修改重新加载逻辑为页面刷新
|
||||
const handleReload = () => {
|
||||
// 设置加载状态
|
||||
isReloading.value = true;
|
||||
buttonText.value = '加载中...';
|
||||
|
||||
// 刷新当前页面
|
||||
window.location.reload();
|
||||
};
|
||||
const goToHome = () => {
|
||||
router.push('/'); // 假设主页面路由为根路径
|
||||
};
|
||||
|
||||
const handleCombineAction = () => {
|
||||
actionStore.triggerCombine();
|
||||
};
|
||||
|
||||
// 实时时钟实现
|
||||
const currentTime = ref('');
|
||||
|
|
@ -184,6 +254,45 @@ const formatTime = () => {
|
|||
hour12: false
|
||||
});
|
||||
};
|
||||
// 锚点悬浮
|
||||
// 悬浮状态
|
||||
const hoverItemId = ref(null);
|
||||
// 详情框状态
|
||||
const showDetailModal = ref(false);
|
||||
const currentDetailItem = ref(null);
|
||||
|
||||
// 处理鼠标悬浮
|
||||
const handleMouseEnter = (id) => {
|
||||
hoverItemId.value = id;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
hoverItemId.value = null;
|
||||
};
|
||||
|
||||
// 打开详情框
|
||||
const openDetailModal = (item) => {
|
||||
currentDetailItem.value = item;
|
||||
showDetailModal.value = true;
|
||||
// 阻止事件冒泡
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
// 关闭详情框
|
||||
const closeDetailModal = () => {
|
||||
showDetailModal.value = false;
|
||||
currentDetailItem.value = null;
|
||||
};
|
||||
|
||||
// 点击空白处关闭详情框
|
||||
const handleClickOutside = () => {
|
||||
if (showDetailModal.value) {
|
||||
closeDetailModal();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const handleSearch = () => {
|
||||
if (inputValue.value === '南海争端系列舆情事件') {
|
||||
|
|
@ -238,26 +347,26 @@ const handleInput = () => {
|
|||
};
|
||||
|
||||
const mediaData = [
|
||||
{ id: 1, type: '新闻媒体', name: '新浪军事', avatar: 'src/views/user/xinlang.png', number: '5005.8w' },
|
||||
{ id: 2, type: '新闻媒体', name: '环球时报', avatar: 'src/views/user/huanqiu.png', number: '3126.1w' },
|
||||
{ id: 3, type: '自媒体', name: '大侠啊啊啊啊', avatar: 'src/views/user/daxia.png', number: '288' },
|
||||
{ id: 4, type: '自媒体', name: '外贸发布BBS', avatar: 'src/views/user/bbs.png', number: '1.3w' },
|
||||
{ id: 5, type: '自媒体', name: '空天砺剑', avatar: 'src/views/user/kongtian.png', number: '516.5w' },
|
||||
{ id: 6, type: '自媒体', name: '爱锤盾海桃-霆恩启副', avatar: 'src/views/user/ai.png', number: '223' },
|
||||
{ id: 7, type: '自媒体', name: '苍龙飞天79', avatar: 'src/views/user/79.png', number: '516.6w' },
|
||||
{ id: 8, type: '自媒体', name: '盖世英雄玉椒龙', avatar: 'src/views/user/gaishi.png', number: '42w' },
|
||||
{ id: 9, type: '自媒体', name: '十八子91221', avatar: 'src/views/user/91221.png', number: '1947' },
|
||||
{ id: 10, type: '自媒体', name: '江夏云飞', avatar: 'src/views/user/jiang.png', number: '1629' },
|
||||
{ id: 11, type: '自媒体', name: '唐宁20150903', avatar: 'src/views/user/tang.png', number: '25' },
|
||||
{ id: 12, type: '自媒体', name: '钻石狗Boss', avatar: 'src/views/user/bbs.png', number: '1184' },
|
||||
{ id: 13, type: '自媒体', name: '乐之567', avatar: 'src/views/user/567.png', number: '266' },
|
||||
{ id: 14, type: '自媒体', name: '地瓜熊老六', avatar: 'src/views/user/lao.png', number: '667.5w' },
|
||||
{ id: 15, type: '自媒体', name: 'CGTN记者团', avatar: 'src/views/user/cgtn.png', number: '322.1w' },
|
||||
{ id: 16, type: '自媒体', name: '钱局长本人', avatar: 'src/views/user/qian.png', number: '40万' },
|
||||
{ id: 17, type: '自媒体', name: '肥_谍_gg', avatar: 'src/views/user/gg.png', number: '245' },
|
||||
{ id: 18, type: '自媒体', name: '深海一万米', avatar: 'src/views/user/shenhai.png', number: '126w' },
|
||||
{ id: 19, type: '政府官号', name: '中国海警', avatar: 'src/views/user/haijing.png', number: '80.9w' },
|
||||
{ id: 20, type: '政府官号', name: '平安泸县', avatar: 'src/views/user/luxian.png', number: '3.9w' },
|
||||
{ id: 1, type: '新闻媒体', name: '新浪军事', avatar: 'src/views/user/xinlang.png', number: '5005.8w', transmit: '425', time: '2024.1.5', posts: '2.1w', atten: '98', interaction: '16.1w' },
|
||||
{ id: 2, type: '新闻媒体', name: '环球时报', avatar: 'src/views/user/huanqiu.png', number: '3126.1w', transmit: '557', time: '2024.3.12', posts: '1.8w', atten: '76', interaction: '9.3w' },
|
||||
{ id: 3, type: '自媒体', name: '大侠啊啊啊啊', avatar: 'src/views/user/daxia.png', number: '288', transmit: '55', time: '2024.2.20', posts: '896', atten: '12', interaction: '3.2w' },
|
||||
{ id: 4, type: '自媒体', name: '外贸发布BBS', avatar: 'src/views/user/bbs.png', number: '1.3w', transmit: '68', time: '2024.4.5', posts: '562', atten: '8', interaction: '1.5w' },
|
||||
{ id: 5, type: '自媒体', name: '空天砺剑', avatar: 'src/views/user/kongtian.png', number: '516.5w', transmit: '55', time: '2024.1.28', posts: '3.2w', atten: '156', interaction: '22.7w' },
|
||||
{ id: 6, type: '自媒体', name: '爱锤盾海桃-霆恩启副', avatar: 'src/views/user/ai.png', number: '223', transmit: '76', time: '2024.3.18', posts: '432', atten: '5', interaction: '896' },
|
||||
{ id: 7, type: '自媒体', name: '苍龙飞天79', avatar: 'src/views/user/79.png', number: '516.6w', transmit: '76', time: '2024.2.10', posts: '2.9w', atten: '142', interaction: '19.5w' },
|
||||
{ id: 8, type: '自媒体', name: '盖世英雄玉椒龙', avatar: 'src/views/user/gaishi.png', number: '42w', transmit: '53', time: '2024.4.1', posts: '1.2w', atten: '67', interaction: '8.3w' },
|
||||
{ id: 9, type: '自媒体', name: '十八子91221', avatar: 'src/views/user/91221.png', number: '1947', transmit: '56', time: '2024.1.15', posts: '654', atten: '9', interaction: '2.1w' },
|
||||
{ id: 10, type: '自媒体', name: '江夏云飞', avatar: 'src/views/user/jiang.png', number: '1629', transmit: '33', time: '2024.3.25', posts: '321', atten: '4', interaction: '987' },
|
||||
{ id: 11, type: '自媒体', name: '唐宁20150903', avatar: 'src/views/user/tang.png', number: '25', transmit: '43', time: '2024.2.5', posts: '128', atten: '2', interaction: '456' },
|
||||
{ id: 12, type: '自媒体', name: '钻石狗Boss', avatar: 'src/views/user/bbs.png', number: '1184', transmit: '76', time: '2024.4.12', posts: '512', atten: '7', interaction: '1.8w' },
|
||||
{ id: 13, type: '自媒体', name: '乐之567', avatar: 'src/views/user/567.png', number: '266', transmit: '24', time: '2024.1.30', posts: '209', atten: '3', interaction: '654' },
|
||||
{ id: 14, type: '自媒体', name: '地瓜熊老六', avatar: 'src/views/user/lao.png', number: '667.5w', transmit: '33', time: '2024.3.8', posts: '4.7w', atten: '210', interaction: '33.2w' },
|
||||
{ id: 15, type: '自媒体', name: 'CGTN记者团', avatar: 'src/views/user/cgtn.png', number: '322.1w', transmit: '43', time: '2024.2.18', posts: '2.5w', atten: '105', interaction: '17.8w' },
|
||||
{ id: 16, type: '自媒体', name: '钱局长本人', avatar: 'src/views/user/qian.png', number: '40万', transmit: '56', time: '2024.4.20', posts: '1.3w', atten: '58', interaction: '9.4w' },
|
||||
{ id: 17, type: '自媒体', name: '肥_谍_gg', avatar: 'src/views/user/gg.png', number: '245', transmit: '56', time: '2024.1.22', posts: '317', atten: '6', interaction: '1.2w' },
|
||||
{ id: 18, type: '自媒体', name: '深海一万米', avatar: 'src/views/user/shenhai.png', number: '126w', transmit: '44', time: '2024.3.5', posts: '8906', atten: '42', interaction: '6.7w' },
|
||||
{ id: 19, type: '政府官号', name: '中国海警', avatar: 'src/views/user/haijing.png', number: '80.9w', transmit: '45', time: '2024.2.8', posts: '1.1w', atten: '35', interaction: '5.2w' },
|
||||
{ id: 20, type: '政府官号', name: '平安泸县', avatar: 'src/views/user/luxian.png', number: '3.9w', transmit: '45', time: '2024.4.15', posts: '4321', atten: '18', interaction: '2.9w' },
|
||||
];
|
||||
const categoryData = {
|
||||
'全部': {
|
||||
|
|
@ -505,6 +614,7 @@ const tooltipDdata1 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main1.png',
|
||||
imgdata: 'src/assets/images/mess/1top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank1.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
}
|
||||
|
|
@ -518,6 +628,7 @@ const tooltipDdata2 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main1.png',
|
||||
imgdata: 'src/assets/images/mess/1top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank1.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -529,6 +640,7 @@ const tooltipDdata2 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main2.png',
|
||||
imgdata: 'src/assets/images/mess/2top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank2.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -542,6 +654,7 @@ const tooltipDdata3 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main1.png',
|
||||
imgdata: 'src/assets/images/mess/1top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank1.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -553,6 +666,7 @@ const tooltipDdata3 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main2.png',
|
||||
imgdata: 'src/assets/images/mess/2top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank2.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -564,6 +678,7 @@ const tooltipDdata3 = [
|
|||
earler: '新浪军事',
|
||||
keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
|
||||
img: 'src/assets/images/mess/main3.png',
|
||||
imgdata: 'src/assets/images/mess/3top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank3.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -577,6 +692,7 @@ const tooltipDdata4 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main1.png',
|
||||
imgdata: 'src/assets/images/mess/1top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank1.png',
|
||||
backimg: 'src/assets/images/logo/high2.png'
|
||||
},
|
||||
|
|
@ -588,6 +704,7 @@ const tooltipDdata4 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main2.png',
|
||||
imgdata: 'src/assets/images/mess/2top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank2.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -599,6 +716,7 @@ const tooltipDdata4 = [
|
|||
earler: '新浪军事',
|
||||
keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
|
||||
img: 'src/assets/images/mess/main3.png',
|
||||
imgdata: 'src/assets/images/mess/3top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank3.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -610,8 +728,9 @@ const tooltipDdata4 = [
|
|||
earler: '白俄罗斯大宽',
|
||||
keyuser: '盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑',
|
||||
img: 'src/assets/images/mess/main4.png',
|
||||
imgdata: 'src/assets/images/mess/4top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank4.png',
|
||||
backimg: 'src/assets/images/logo/high4.png'
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
]
|
||||
const tooltipDdata5 = [
|
||||
|
|
@ -623,6 +742,7 @@ const tooltipDdata5 = [
|
|||
earler: '玉渊谭天',
|
||||
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
|
||||
img: 'src/assets/images/mess/main1.png',
|
||||
imgdata: 'src/assets/images/mess/1top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank1.png',
|
||||
backimg: 'src/assets/images/logo/high1.png'
|
||||
},
|
||||
|
|
@ -634,6 +754,7 @@ const tooltipDdata5 = [
|
|||
earler: '白俄罗斯大宽',
|
||||
keyuser: '苍龙飞天79,平安泸县,新浪军事',
|
||||
img: 'src/assets/images/mess/main2.png',
|
||||
imgdata: 'src/assets/images/mess/2top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank2.png',
|
||||
backimg: 'src/assets/images/logo/high2.png'
|
||||
},
|
||||
|
|
@ -645,6 +766,7 @@ const tooltipDdata5 = [
|
|||
earler: '新浪军事',
|
||||
keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
|
||||
img: 'src/assets/images/mess/main3.png',
|
||||
imgdata: 'src/assets/images/mess/3top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank3.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -656,6 +778,7 @@ const tooltipDdata5 = [
|
|||
earler: '白俄罗斯大宽',
|
||||
keyuser: '盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑',
|
||||
img: 'src/assets/images/mess/main4.png',
|
||||
imgdata: 'src/assets/images/mess/4top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank4.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -667,6 +790,7 @@ const tooltipDdata5 = [
|
|||
earler: '今日俄罗斯RT',
|
||||
keyuser: '新浪军事',
|
||||
img: 'src/assets/images/mess/main5.png',
|
||||
imgdata: 'src/assets/images/mess/5top.png',
|
||||
beforeimg: 'src/assets/images/logo/ruank5.png',
|
||||
backimg: 'src/assets/images/logo/high3.png'
|
||||
},
|
||||
|
|
@ -691,16 +815,7 @@ const selectItem = (item) => {
|
|||
// 数据切换方法
|
||||
const switchToNextDataSet = () => {
|
||||
currentDataSetIndex.value++;
|
||||
// 当数据索引超过最后一个数据集时重置
|
||||
if (currentDataSetIndex.value >= dataSets.value.length) {
|
||||
currentDataSetIndex.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 活跃预警事件计数器 (6秒加1，到5停止)
|
||||
const activeWarningCount = ref(0);
|
||||
// 高风险事件计数器 (24秒后加1，再6秒后加1停止)
|
||||
const highRiskCount = ref(0);
|
||||
// 提取常量便于维护
|
||||
const TIMER = {
|
||||
ACTIVE_WARNING_INTERVAL: 12000, // 活跃预警间隔(ms)
|
||||
|
|
@ -757,12 +872,27 @@ const startDataSwitchTimer = () => {
|
|||
timers.push(interval, timeout);
|
||||
};
|
||||
|
||||
// 添加组件引用
|
||||
const appRef = ref(null);
|
||||
|
||||
// 修改定位按钮点击事件
|
||||
const handleLocationClick = (itemId) => {
|
||||
// 设置slider值为30并触发定位
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
|
||||
// 使用传入的itemId进行高亮
|
||||
setTimeout(() => {
|
||||
highlightNode(itemId);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// ... 现有代码 ...
|
||||
startActiveWarningTimer();
|
||||
startHighRiskTimer();
|
||||
startDataSwitchTimer();
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
// 初始化时钟并每秒更新
|
||||
currentTime.value = formatTime();
|
||||
const clockTimer = setInterval(() => {
|
||||
|
|
@ -788,7 +918,6 @@ onMounted(() => {
|
|||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
|
|
@ -798,8 +927,15 @@ onMounted(() => {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,//坐标轴两边留白
|
||||
data: ['1-4', '2.8', '3-6', '4-7', '5-8', '5-29', '6-20'],
|
||||
boundaryGap: true,//坐标轴两边留白
|
||||
data: ['6.29', '6.30', '7-1', '7-2', '7-3', '7-4', '7-5'],
|
||||
name: '日期',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
color: '#606266',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLabel: { //坐标轴刻度标签的相关设置。
|
||||
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
|
||||
// margin:15,
|
||||
|
|
@ -844,7 +980,7 @@ onMounted(() => {
|
|||
}
|
||||
},
|
||||
splitLine: { //坐标轴在 grid 区域中的分隔线。
|
||||
show: true,
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#E5E9ED',
|
||||
// opacity:0.1
|
||||
|
|
@ -855,6 +991,7 @@ onMounted(() => {
|
|||
{
|
||||
type: 'value',
|
||||
splitNumber: 5,
|
||||
name: '事件数量',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#a8aab0',
|
||||
|
|
@ -933,7 +1070,11 @@ onMounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
// 定位事件（阻止冒泡）
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
// 统一清理所有定时器
|
||||
// 设置每6秒切换一次数据
|
||||
const dataSwitchTimer = setInterval(switchToNextDataSet, 6000);
|
||||
|
|
@ -988,7 +1129,7 @@ onUnmounted(() => {
|
|||
letter-spacing: 9.5%;
|
||||
color: #1EA0FD;
|
||||
float: right;
|
||||
margin-right: 90px;
|
||||
margin-right: 80px;
|
||||
margin-top: -148px;
|
||||
}
|
||||
|
||||
|
|
@ -1164,6 +1305,30 @@ onUnmounted(() => {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.reload-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background-color: #091f35;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-family: OPPOSans;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.reload-button img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.reload-button:hover {
|
||||
background-color: #236291;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
|
|
@ -1242,6 +1407,7 @@ onUnmounted(() => {
|
|||
color: #FFFFFF;
|
||||
margin-top: 15px;
|
||||
margin-left: 30px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.suggestion li img {
|
||||
|
|
@ -1251,10 +1417,14 @@ onUnmounted(() => {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.suggestion li:hover {
|
||||
background-image: linear-gradient(to bottom, #07293D, #050B23);
|
||||
}
|
||||
|
||||
.suggestion-containner {
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
width: 360px;
|
||||
width: 400px;
|
||||
height: 480px;
|
||||
max-height: 380px;
|
||||
/* 可根据需要调整最大高度 */
|
||||
|
|
@ -1462,6 +1632,10 @@ onUnmounted(() => {
|
|||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.containner3-img {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.focus-events {
|
||||
width: 440px;
|
||||
height: 200px;
|
||||
|
|
@ -1691,9 +1865,225 @@ onUnmounted(() => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #C6E3F5;
|
||||
width: 200px;
|
||||
width: 590px;
|
||||
list-style-type: none;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.timer {
|
||||
color: #C6E3F5;
|
||||
font-family: LCD2;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
float: right;
|
||||
margin-right: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 悬浮效果 */
|
||||
.hover-item {
|
||||
background-color: rgba(240, 245, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transform: scale(1.02);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 详情框样式 */
|
||||
.detail-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.detail-modal {
|
||||
background-image: linear-gradient(to bottom, #050B23, #07293D);
|
||||
color: #E1F4FF;
|
||||
width: 540px;
|
||||
height: 660px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px 20px;
|
||||
background-color: #f5f7fa;
|
||||
border-bottom: 1px solid #e5e9f2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 668px;
|
||||
height: 580px;
|
||||
border-image: linear-gradient(to bottom, #0090FF, #0090FF00)1;
|
||||
background-image: linear-gradient(to bottom, #050B23, #07293D);
|
||||
}
|
||||
|
||||
.large-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
margin-left: 20px;
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
.info-container p {
|
||||
color: #C6E3F5;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
padding: 8px 16px;
|
||||
background-color: #0066ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background-color: #0052cc;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.info-column {
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-column p {
|
||||
margin: 12px 0;
|
||||
color: #C6E3F5;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-coment {
|
||||
margin-top: 20px;
|
||||
color: #C6E3F5;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
line-height: 1.5;
|
||||
margin-left: 20px;
|
||||
padding: 15px;
|
||||
background-image: linear-gradient(to bottom, #0a1338, #07293D);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.post-list-container {
|
||||
max-height: 370px;
|
||||
/* 设置最大高度，超出部分将被隐藏 */
|
||||
overflow-y: auto;
|
||||
/* 垂直方向溢出时显示滚动条 */
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
/* 避免滚动条遮挡内容 */
|
||||
|
||||
}
|
||||
|
||||
/* 贴文项样式 */
|
||||
.post-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
background-image: linear-gradient(to bottom, #050B23, #07293D);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.post-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin: 0 0 8px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式（可选） */
|
||||
.post-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.post-list-container::-webkit-scrollbar-thumb {
|
||||
/* background-color: #ffffff; */
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.back-home-btn {
|
||||
padding: 8px 16px;
|
||||
background-color: #060427;
|
||||
/* Vue绿色主题 */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.back-home-btn:hover {
|
||||
background-color: #04142166;
|
||||
}
|
||||
|
||||
.back-home-btn:active {
|
||||
background-color: #0a1949;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
<img src="../assets/images/percent/1-1-1.png" alt="" style="margin-left: 45px;">
|
||||
<button
|
||||
class="mao-button"
|
||||
:class="{ active: route.path === '/Main' }"
|
||||
@click="goToPage('/Main')"
|
||||
>
|
||||
<img src="../assets/images/logo/mao.png" alt="" style="
|
||||
|
|
@ -102,6 +103,8 @@
|
|||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ref, onMounted,onUnmounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
const route = useRoute();
|
||||
import { ElLoading } from 'element-plus';
|
||||
// 实时时钟实现
|
||||
const currentTime = ref('');
|
||||
|
|
@ -220,6 +223,26 @@ onUnmounted(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mao-button {
|
||||
/* 保留原有样式 */
|
||||
transition: all 0.3s ease;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.mao-button.active {
|
||||
background-color: #409eff; /* 蓝色高亮 */
|
||||
color: rgb(252, 5, 5);
|
||||
box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
|
||||
border-color: #f80202;
|
||||
}
|
||||
|
||||
.mao-button:hover:not(.active) {
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
@ -329,5 +352,22 @@ margin-top: -148px;
|
|||
/* 添加 z-index 属性 */
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
animation: breathe 2s infinite ease-in-out;
|
||||
|
||||
}
|
||||
/* 定义呼吸效果关键帧 */
|
||||
@keyframes breathe {
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
4
src/views/visualize/data/32中国海警首次登检菲律宾运补船只.txt
Normal file
4
src/views/visualize/data/32中国海警首次登检菲律宾运补船只.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
选择时间步长: 1D
|
||||
|
||||
热度字典：
|
||||
{'2024-06-19 15:57': 2280, '2024-06-20 15:57': 612, '2024-06-21 15:57': 261, '2024-06-22 15:57': 258, '2024-06-23 15:57': 110, '2024-06-24 15:57': 80, '2024-06-25 15:57': 51, '2024-06-26 15:57': 18, '2024-06-27 15:57': 10, '2024-06-28 15:57': 10, '2024-06-29 15:57': 2, '2024-06-30 15:57': 2, '2024-07-01 15:57': 2}
|
||||
4
src/views/visualize/data/33中方回应菲称我海警挥舞刀具.txt
Normal file
4
src/views/visualize/data/33中方回应菲称我海警挥舞刀具.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
选择时间步长: 12H
|
||||
|
||||
热度字典：
|
||||
{'2024-06-19 21:36': 416, '2024-06-20 09:36': 796, '2024-06-20 21:36': 403, '2024-06-21 09:36': 236, '2024-06-21 21:36': 33, '2024-06-22 09:36': 29, '2024-06-22 21:36': 11, '2024-06-23 09:36': 10, '2024-06-23 21:36': 5, '2024-06-24 09:36': 10, '2024-06-24 21:36': 7, '2024-06-25 09:36': 1, '2024-06-25 21:36': 4, '2024-06-26 09:36': 6, '2024-06-26 21:36': 5, '2024-06-27 09:36': 5, '2024-06-27 21:36': 2, '2024-06-28 09:36': 1, '2024-06-28 21:36': 0, '2024-06-29 09:36': 1, '2024-06-29 21:36': 1}
|
||||
4
src/views/visualize/data/34中国海警夺回菲方盗窃赃物.txt
Normal file
4
src/views/visualize/data/34中国海警夺回菲方盗窃赃物.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
选择时间步长: 1D
|
||||
|
||||
热度字典：
|
||||
{'2024-06-20 13:08': 1711, '2024-06-21 13:08': 294, '2024-06-22 13:08': 49, '2024-06-23 13:08': 19, '2024-06-24 13:08': 6, '2024-06-25 13:08': 5, '2024-06-26 13:08': 1, '2024-06-27 13:08': 0, '2024-06-28 13:08': 0, '2024-06-29 13:08': 0, '2024-06-30 13:08': 1, '2024-07-01 13:08': 1}
|
||||
4
src/views/visualize/data/35菲自曝被中国海警缴枪的是顶级特种部队.txt
Normal file
4
src/views/visualize/data/35菲自曝被中国海警缴枪的是顶级特种部队.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
选择时间步长: 12H
|
||||
|
||||
热度字典：
|
||||
{'2024-06-22 17:10': 10, '2024-06-23 05:10': 1255, '2024-06-23 17:10': 801, '2024-06-24 05:10': 281, '2024-06-24 17:10': 48, '2024-06-25 05:10': 65, '2024-06-25 17:10': 30, '2024-06-26 05:10': 32, '2024-06-26 17:10': 16, '2024-06-27 05:10': 7, '2024-06-27 17:10': 5, '2024-06-28 05:10': 2, '2024-06-28 17:10': 1, '2024-06-29 05:10': 1, '2024-06-29 17:10': 1, '2024-06-30 05:10': 4, '2024-06-30 17:10': 1, '2024-07-01 05:10': 4}
|
||||
4
src/views/visualize/data/36菲律宾希望与中国就南海问题进行对话.txt
Normal file
4
src/views/visualize/data/36菲律宾希望与中国就南海问题进行对话.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
选择时间步长: 6H
|
||||
|
||||
热度字典：
|
||||
{'2024-06-25 15:05': 169, '2024-06-25 21:05': 186, '2024-06-26 03:05': 31, '2024-06-26 09:05': 8, '2024-06-26 15:05': 1, '2024-06-26 21:05': 2, '2024-06-27 03:05': 1, '2024-06-27 09:05': 0, '2024-06-27 15:05': 1, '2024-06-27 21:05': 0, '2024-06-28 03:05': 0, '2024-06-28 09:05': 0, '2024-06-28 15:05': 0, '2024-06-28 21:05': 0, '2024-06-29 03:05': 0, '2024-06-29 09:05': 0, '2024-06-29 15:05': 0, '2024-06-29 21:05': 0, '2024-06-30 03:05': 0, '2024-06-30 09:05': 1}
|
||||
Loading…
Reference in New Issue
Block a user