REDEME文件，补充技术栈
This commit is contained in:
parent
fe08137ea1
commit
3784fc87f4
68
README.md
68
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)
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
return;
|
||||
currentIndex = 0; // 滑到最后重置
|
||||
}
|
||||
const nextValue = markKeys[currentIndex];
|
||||
state.sliderValue = nextValue;
|
||||
sliderChange(nextValue);
|
||||
}, 3000); // 3秒切换一次
|
||||
sliderChange(nextValue, true); // 传入isAuto参数标记为自动触发
|
||||
}, 6000); // 6秒切换一次
|
||||
};
|
||||
|
||||
const stopAutoPlay = () => {
|
||||
|
|
@ -101,16 +82,17 @@ const stopAutoPlay = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const sliderChange = (val) => {
|
||||
const sliderChange = (val, isAuto = false) => {
|
||||
// 拖动时暂停自动播放
|
||||
if (isPlaying.value) {
|
||||
stopAutoPlay();
|
||||
}
|
||||
if (state.marks[val]) {
|
||||
// 只有手动操作时才暂停自动播放
|
||||
if (!isAuto && isPlaying.value) {
|
||||
stopAutoPlay();
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@
|
|||
alt="" style="margin-bottom: -7px;">最初首发者： {{ 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;">锚点用户{{
|
||||
currentItem.keyuser }}</li>
|
||||
<li style="margin-left: 200px;;"><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.switcher }}</li>
|
||||
<li style="margin-left: 220px;;"><img src="../assets/images/logo/point.png" alt="" style="margin-bottom: -7px;">锚点用户： {{
|
||||
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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user