完成图表组件动态加载及样式优化

package.json

@@ -15,6 +15,7 @@
     "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"

src/main.js

@@ -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');

src/store/index.js

@@ -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;
+    }
+  }
+});

src/views/App.vue

@@ -1,9 +1,3 @@
-<!-- <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"
-</script> -->
 
 <template>
   <div style="width: 100%; height: 100%;">
@@ -173,6 +167,6 @@ onMounted(() => {
 }
 
 .slider-box {
-  margin-top: 10px;
+  margin-top: -230px;
 }
 </style>

src/views/Main.vue

@@ -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="currentItem.img" alt="" style=""></li>
-          <li><img src="../assets/images/logo/point.png" alt="">最初首发者：&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
+          <li><img :src="currentItem.imgdata" alt="" style="width: 500px;height: 400px;margin-left: 20px;"></li>
-          <li><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter }}</li>
+          <li style="margin-left: 10px; margin-top:   20px;"><img src="../assets/images/logo/point.png"
-          <li><img src="../assets/images/logo/point.png" alt="">锚点用户{{ currentItem.keyuser }}</li>
+              alt="">最初首发者：&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
-          <li><img src="../assets/images/logo/point.png" alt="">积极转发者：&nbsp;&nbsp;&nbsp;{{ currentItem.switcher }}</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="">积极转发者：&nbsp;&nbsp;&nbsp;{{
+            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">
+      <button class="back-home-btn" @click="goToHome">返回主页面</button>
-        <img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
+      <div class="timer">
-        <div class="realtime-clock" style="position: absolute; top: 20px; right:100px; color: #1EA0FD; font-family: LCD2; font-size: 20px;">
+
+        <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">粉丝数：&nbsp;{{ 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: 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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万' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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' },
+  { 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)
@@ -756,19 +871,34 @@ const startDataSwitchTimer = () => {
   }, TIMER.DATA_SWITCH_DURATION);
   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();
+  currentTime.value = formatTime();
   const clockTimer = setInterval(() => {
     currentTime.value = formatTime();
   }, 1000);
-  
+
   // 将时钟定时器添加到现有定时器管理数组
   timers.push(clockTimer);
 
@@ -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,//坐标轴两边留白
+        boundaryGap: true,//坐标轴两边留白
-        data: ['1-4', '2.8', '3-6', '4-7', '5-8', '5-29', '6-20'],
+        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;
 }
 
@@ -1132,7 +1273,7 @@ onUnmounted(() => {
   height: 682px;
   margin-left: 530px;
   margin-top: -900px;
-  margin-bottom: 200px;
+  margin-bottom: 30px;
 }
 
 .hiden {
@@ -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>

src/views/Navigation.vue

@@ -58,7 +58,8 @@
             style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
           <img src="../assets/images/percent/1-1-1.png" alt="" style="margin-left: 45px;">
           <button 
-        class="mao-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>

src/views/visualize/data/32中国海警首次登检菲律宾运补船只.txt

@@ -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}

src/views/visualize/data/33中方回应菲称我海警挥舞刀具.txt

@@ -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}

src/views/visualize/data/34中国海警夺回菲方盗窃赃物.txt

@@ -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}

src/views/visualize/data/35菲自曝被中国海警缴枪的是顶级特种部队.txt

@@ -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}

src/views/visualize/data/36菲律宾希望与中国就南海问题进行对话.txt

@@ -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}