From b36c27f91183e2f8ffbbb70e1b705d1fff1a9ad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E7=A3=8A=E5=A5=87?= <1181277366@qq.com>
Date: Thu, 19 Jun 2025 09:14:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E8=BD=BDecharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/logo/mainmao.png           | Bin 0 -> 3041 bytes
 src/components/Chart32_Inspection(1).vue     |  58 ++++++
 src/components/Chart33_WavingBlades(1).vue   |  60 +++++++
 src/components/Chart34_RecoveredGoods(1).vue |  55 ++++++
 src/components/Chart35_SpecialForces(1).vue  |  58 ++++++
 src/components/Chart36_Dialogue(1).vue       |  59 +++++++
 src/views/App.vue                            | 177 +------------------
 src/views/Main.vue                           |  18 +-
 src/views/Navigation.vue                     |   3 +-
 9 files changed, 302 insertions(+), 186 deletions(-)
 create mode 100644 src/assets/images/logo/mainmao.png
 create mode 100644 src/components/Chart32_Inspection(1).vue
 create mode 100644 src/components/Chart33_WavingBlades(1).vue
 create mode 100644 src/components/Chart34_RecoveredGoods(1).vue
 create mode 100644 src/components/Chart35_SpecialForces(1).vue
 create mode 100644 src/components/Chart36_Dialogue(1).vue

diff --git a/src/assets/images/logo/mainmao.png b/src/assets/images/logo/mainmao.png
new file mode 100644
index 0000000000000000000000000000000000000000..c00b7d59f16d336537dcbeff58a6226066b8c236
GIT binary patch
literal 3041
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

literal 0
HcmV?d00001

diff --git a/src/components/Chart32_Inspection(1).vue b/src/components/Chart32_Inspection(1).vue
new file mode 100644
index 0000000..3ffced2
--- /dev/null
+++ b/src/components/Chart32_Inspection(1).vue
@@ -0,0 +1,58 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '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
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+// 关键：将Y轴数据数组反转
+const yAxisMirroredData = Object.values(originalData).reverse(); 
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '中国海警首次登检菲律宾运补船只 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    smooth: true,
+    areaStyle: {} // 添加面积图样式
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>
\ No newline at end of file
diff --git a/src/components/Chart33_WavingBlades(1).vue b/src/components/Chart33_WavingBlades(1).vue
new file mode 100644
index 0000000..f1c59cb
--- /dev/null
+++ b/src/components/Chart33_WavingBlades(1).vue
@@ -0,0 +1,60 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '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
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '中方回应菲称我海警挥舞刀具 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    smooth: true,
+    itemStyle: { color: '#5470c6' },
+    areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(84, 112, 198, 0.4)' }, { offset: 1, color: 'rgba(84, 112, 198, 0)' }])}
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>
\ No newline at end of file
diff --git a/src/components/Chart34_RecoveredGoods(1).vue b/src/components/Chart34_RecoveredGoods(1).vue
new file mode 100644
index 0000000..bf24d52
--- /dev/null
+++ b/src/components/Chart34_RecoveredGoods(1).vue
@@ -0,0 +1,55 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '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
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '中国海警夺回菲方盗窃赃物 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'bar', // 使用柱状图
+    itemStyle: { color: '#91cc75' }
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>
\ No newline at end of file
diff --git a/src/components/Chart35_SpecialForces(1).vue b/src/components/Chart35_SpecialForces(1).vue
new file mode 100644
index 0000000..7c4210c
--- /dev/null
+++ b/src/components/Chart35_SpecialForces(1).vue
@@ -0,0 +1,58 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '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
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '菲自曝被缴枪的是顶级特种部队 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    smooth: true,
+    itemStyle: { color: '#fac858' }
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>
\ No newline at end of file
diff --git a/src/components/Chart36_Dialogue(1).vue b/src/components/Chart36_Dialogue(1).vue
new file mode 100644
index 0000000..f42afbf
--- /dev/null
+++ b/src/components/Chart36_Dialogue(1).vue
@@ -0,0 +1,59 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '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
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '菲希望与中国就南海问题对话 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    step: 'start', // 使用阶梯线图
+    itemStyle: { color: '#ee6666' }
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>
\ No newline at end of file
diff --git a/src/views/App.vue b/src/views/App.vue
index c9251d1..9f6ca25 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1,31 +1,8 @@
-<<<<<<< HEAD
 
 <template>
   <div style="width: 100%; height: 100%;">
     <div class="graph-box" id="graph-container"></div>
     <div class="slider-box">
-=======
-<!-- <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%">
-    <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>
->>>>>>> main
       <el-slider v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
     </div>
   </div>
@@ -33,63 +10,25 @@
 
 <script setup>
 import axios from "axios";
-<<<<<<< HEAD
 import { onMounted, reactive } from "vue";
 import { Graph } from "@antv/g6";
 import { ElLoading } from 'element-plus';
 
-=======
-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';
->>>>>>> main
 const state = reactive({
   graph: null,
   marks: {
     '0': "2024-01-03",
     '10': "2024-01-04",
     '20': "2024-01-05",
-<<<<<<< HEAD
-    '30': "2024-03-16",
-    '40': "2024-03-17",
-    '50': "2024-04-08",
+    '30': "2024-03-14",
+    '40': "2024-03-16",
     '60': "2024-05-26",
     '70': "2024-06-21",
-    '80': "2024-06-24",
-    '90': "2024-06-27",
     '100': "2024-06-28"
   },
   sliderValue: 0,
   loadingInstance: null
 })
-=======
-    '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);
-  }
-});
->>>>>>> main
 let loadingInstance = null;
 // 显示 Loading 组件
 const showLoading = () => {
@@ -120,13 +59,7 @@ const sliderChange = (val) => {
 const getData = async (dataTime) => {
   showLoading()
   const res = await axios.get("http://10.7.1.52:1922/demo/edge/getEdgeData", {
-<<<<<<< HEAD
     params: { dataTime }
-=======
-    params: 
-    { dataTime }
-
->>>>>>> main
   });
   if (res.data.code == 200) {
     createGraph(res.data.data)
@@ -194,84 +127,12 @@ const createGraph = (data) => {
   });
   state.graph = graph
 }
-<<<<<<< HEAD
-=======
-// 增强按钮点击处理逻辑
-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);
-}
->>>>>>> main
 
 /**
  * 高亮节点
  * @param id 节点id
  */
-<<<<<<< HEAD
 const highlightNode = (id) => {
-=======
- const highlightNode = (id) => {
->>>>>>> main
   state.graph.getNodes().forEach((node) => {
     state.graph.clearItemStates(node, "selected");
   });
@@ -290,37 +151,14 @@ const highlightNode = (id) => {
     }
   });
 }
-<<<<<<< HEAD
-=======
-const handleCombineAction = () => {
-  // 先执行定位操作
-  state.sliderValue = 30;
-  sliderChange(30);
-  
-  // 延迟执行高亮操作，确保定位完成后再高亮
-  setTimeout(() => {
-    highlightNode('840983');
-  }, 500);
-}
->>>>>>> main
 
 onMounted(() => {
   getData('2024-01-03')
 })
-<<<<<<< HEAD
-=======
-onUnmounted(() => {
-  // 组件卸载时清除定时器
-  if (state.autoPlayTimer) {
-    clearInterval(state.autoPlayTimer);
-  }
-})
->>>>>>> main
 </script>
 
 <style scoped>
 .graph-box {
-<<<<<<< HEAD
   width: 100%;
   height: 100%;
 }
@@ -328,15 +166,4 @@ onUnmounted(() => {
 .slider-box {
   margin-top: -230px;
 }
-=======
-  width: 80%;
-  height: 80%;
-  margin-top: -10px;
-}
-
-.slider-box {
-margin-top: 65px;
-}
-
->>>>>>> main
 </style>
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 203e78c..dc15e71 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -1,12 +1,12 @@
 <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=""></li>
-          <li><img :src="currentItem.imgdata" alt="" style="width: 500px;height: 400px;margin-left: 20px;"></li>
+          <li><chart32_-inspection /></li>
           <li style="margin-left: 10px; margin-top:   20px;"><img src="../assets/images/logo/point.png"
               alt="">最初首发者：&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
           <li style="margin-left: 10px;"><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter
@@ -104,6 +104,9 @@
             </div>
             <div class="suggestion-containner">
               <ul>
+                <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: 370px;margin-bottom: -60px;border-radius: 0px;border: 0;cursor: pointer;"
+                  @click.stop="handleCombineAction"></button>
                 <li v-for="item in filteredData" :key="item.id" @click="openDetailModal(item)"
                   @mouseenter="handleMouseEnter(item.id)" @mouseleave="handleMouseLeave()"
                   :class="{ 'hover-item': hoverItemId === item.id }">
@@ -113,11 +116,7 @@
                     <span class="span-1">{{ item.name }}</span>
                     <span class="span-2">粉丝数：&nbsp;{{ item.number }}</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>
@@ -213,7 +212,8 @@ 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';
+import Chart32_Inspection from '@/components/Chart32_Inspection(1).vue';
+
 
 let myChart = null;
 const router = useRouter();
@@ -871,7 +871,7 @@ const startDataSwitchTimer = () => {
   }, TIMER.DATA_SWITCH_DURATION);
   timers.push(interval, timeout);
 };
- 
+
 // 添加组件引用
 const appRef = ref(null);
 
@@ -880,7 +880,7 @@ const handleLocationClick = (itemId) => {
   // 设置slider值为30并触发定位
   state.sliderValue = 30;
   sliderChange(30);
-  
+
   // 使用传入的itemId进行高亮
   setTimeout(() => {
     highlightNode(itemId);
diff --git a/src/views/Navigation.vue b/src/views/Navigation.vue
index d4d8fa2..0392288 100644
--- a/src/views/Navigation.vue
+++ b/src/views/Navigation.vue
@@ -62,7 +62,7 @@
         :class="{ active: route.path === '/Main' }"
         @click="goToPage('/Main')"
       >
-        <img src="../assets/images/logo/mao.png" alt="" style="
+        <img src="../assets/images/logo/mainmao.png" alt="" style="
           display: block;
           width: 100%;
           height: 100%;
@@ -352,7 +352,6 @@ margin-top: -148px;
   /* 添加 z-index 属性 */
   position: relative; 
   z-index: 1001; 
-  animation: breathe 2s infinite ease-in-out;
   
 }
 /* 定义呼吸效果关键帧 */