REDEME文件，补充技术栈

README.md

@@ -1,5 +1,67 @@
-# Vue 3 + Vite
+# 预警系统 (pre-warning-system)
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+基于Vue 3 + Vite构建的仓库预警管理系统，提供实时监控、数据可视化和异常预警功能。
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 功能特点
+- 实时数据监控仪表盘
+- 多维度数据可视化图表
+- 异常事件预警与通知
+- 历史数据查询与分析
+- 用户权限管理
+
+## 技术栈
+- **前端框架**: Vue 3 (Composition API + <script setup>)
+- **构建工具**: Vite
+- **路由管理**: Vue Router
+- **状态管理**: Vuex
+- **UI组件**: element-plus (v2.10.1) 和 tdesign-vue-next (v1.13.2)
+- **图表可视化**: echarts (v5.6.0) 和 @antv/g6 (v4.8.24)
+
+## 项目结构
+```
+/src
+  /views        # 页面组件
+  /components   # 通用组件
+  /router       # 路由配置
+  /store        # 状态管理
+  /assets       # 静态资源
+/escel          # 数据文件
+```
+
+## 安装与启动
+
+### 环境要求
+- Node.js 14.0.0+ 
+- npm 6.0.0+ 或 yarn 1.22.0+
+
+### 安装依赖
+```bash
+npm install
+# 或
+yarn install
+```
+
+### 开发环境启动
+```bash
+npm run dev
+# 或
+yarn dev
+```
+
+### 生产环境构建
+```bash
+npm run build
+# 或
+yarn build
+```
+
+## 配置说明
+系统配置文件位于 `src/config` 目录下，可根据实际需求修改API地址、预警阈值等参数。
+
+## 数据导入
+1. 将数据文件放入 `/escel` 目录
+2. 在系统设置中选择导入对应文件
+3. 系统将自动解析并更新数据库
+
+## 许可证
+[MIT](LICENSE)

src/views/App.vue

@@ -2,23 +2,15 @@
 <template>
   <div style="width: 100%; height: 100%;">
     <div class="graph-box" id="graph-container"></div>
-
-  
-
-
   <div class="slider-box">
  <div class="slider-container">
   <div class="play-controls">
-    <button @click="togglePlay" class="play-button">
-      {{ isPlaying ? '暂停' : '播放' }}
-    </button>
   </div>
       <el-slider style="" v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
      </div>
     </div>
   </div>
 </template>
-
 <script setup>
 import axios from "axios";
 import { onMounted,onUnmounted, reactive,ref } from "vue";
@@ -27,7 +19,6 @@ import { ElLoading } from 'element-plus';
 
 const isPlaying = ref(false);
 const playTimer = ref(null);
-
 const state = reactive({
   graph: null,
   marks: {
@@ -65,15 +56,6 @@ const setStateSliderValue = (value) => {
   sliderChange(value);
 };
 
-// 自动播放相关方法
-const togglePlay = () => {
-  if (isPlaying.value) {
-    stopAutoPlay();
-  } else {
-    startAutoPlay();
-  }
-};
-
 const startAutoPlay = () => {
   isPlaying.value = true;
   // 获取排序后的mark键
@@ -84,13 +66,12 @@ const startAutoPlay = () => {
     if (currentIndex < markKeys.length - 1) {
         currentIndex++;
       } else {
-        stopAutoPlay();
+        currentIndex = 0; // 滑到最后重置
-        return;
       }
     const nextValue = markKeys[currentIndex];
     state.sliderValue = nextValue;
-    sliderChange(nextValue);
+    sliderChange(nextValue, true); // 传入isAuto参数标记为自动触发
-  }, 3000); // 3秒切换一次
+  }, 6000); // 6秒切换一次
 };
 
 const stopAutoPlay = () => {
@@ -101,16 +82,17 @@ const stopAutoPlay = () => {
   }
 };
 
-const sliderChange = (val) => {
+const sliderChange = (val, isAuto = false) => {
   // 拖动时暂停自动播放
-  if (isPlaying.value) {
+  // 只有手动操作时才暂停自动播放
-    stopAutoPlay();
+    if (!isAuto && isPlaying.value) {
-  }
+      stopAutoPlay();
-  if (state.marks[val]) {
+    }
+  
   if (state.marks[val]) {
     getData(state.marks[val]);
   }
-}
+
 }
 /**
  * 根据日期获取图谱数据
@@ -222,6 +204,7 @@ onUnmounted(() => {
 });
 
 onMounted(() => {
+  startAutoPlay(); // 页面加载时自动开始滑动
   getData('2024-01-03')
 })
 </script>
@@ -260,9 +243,11 @@ onMounted(() => {
 .slider-box {
   flex: 1;
   margin-top: 0;
-  width: 90%;
+  width: 95%;
   margin-top: -230px;
   margin-left: 10px;
   flex-direction: column;
+color: #fff;
+  font-size: 16px;
 }
 </style>

src/views/Main.vue

@@ -16,10 +16,10 @@
               alt="" style="margin-bottom: -7px;">最初首发者：&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
           <li style="margin-left: 10px;"><img src="../assets/images/logo/point.png" alt="" style="margin-bottom: -7px;">积极评论者：{{ currentItem.comenter
           }}</li>
-          <li style="margin-left: 200px;margin-top: -45px;"><img src="../assets/images/logo/point.png" alt="" style="margin-bottom: -7px;">锚点用户{{
+          <li style="margin-left: 220px;margin-top: -45px;"><img src="../assets/images/logo/point.png" alt="" style="margin-bottom: -7px;">积极转发者：{{
-            currentItem.keyuser }}</li>
-          <li style="margin-left: 200px;;"><img src="../assets/images/logo/point.png" alt="" style="margin-bottom: -7px;">积极转发者：&nbsp;&nbsp;&nbsp;{{
             currentItem.switcher }}</li>
+          <li style="margin-left: 220px;;"><img src="../assets/images/logo/point.png" alt="" style="margin-bottom: -7px;">锚点用户：&nbsp;&nbsp;&nbsp;{{
+             currentItem.keyuser}}</li>
         </div>
         <img src="../assets/images/logo/cancel.png" alt=""
           style="float: right;margin-right: 10px;margin-top: -520px;cursor: pointer;" @click="showTooltip = false">