From a3b2d94cbfb9bea819346a1b738237f72819a833 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期四, 12 六月 2025 13:35:33 +0800 Subject: [PATCH] 动态溯源(待完成) --- src/views/realtimemode/RealtimeMode.vue | 79 +++++++++++++++++++++++++++------------ 1 files changed, 55 insertions(+), 24 deletions(-) diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue index eb4cb1f..6935614 100644 --- a/src/views/realtimemode/RealtimeMode.vue +++ b/src/views/realtimemode/RealtimeMode.vue @@ -2,19 +2,22 @@ <div class="p-events-none m-t-2"> <el-row justify="center" align="middle" class="top-wrap"> <DeviceChange @change="onDeviceChange"></DeviceChange> + <el-button + type="primary" + class="p-events-auto el-button-custom" + @click="pauseTask" + > + {{ pause ? '缁х画' : '鏆傚仠' }} + </el-button> </el-row> <el-row class="m-t-2"> - <FactorRadio - :device-type="deviceType" - @change="(e) => (factorType = e)" - ></FactorRadio> + <FactorRadio :device-type="deviceType" v-model="factorType"></FactorRadio> </el-row> <el-row class="m-t-2"> - <FactorLegend - class="m-t-2" - :factor="factorDatas.factor[factorType]" - ></FactorLegend> - <SourceTrace></SourceTrace> + <el-col span="1"> + <FactorLegend :factor="factorDatas.factor[factorType]"></FactorLegend> + </el-col> + <el-col span="1"> </el-col> </el-row> <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard> <RealTimeTrend @@ -22,6 +25,11 @@ :factor-datas="factorDatas" :device-type="deviceType" ></RealTimeTrend> + <SourceTrace + class="source-trace" + v-model:factorType="factorType" + ></SourceTrace> + <!-- <PollutedClueItem></PollutedClueItem> --> </div> </template> @@ -36,11 +44,14 @@ import RealTimeTrend from './component/RealTimeTrend.vue'; import DeviceChange from './component/DeviceChange.vue'; import SourceTrace from '@/views/sourcetrace/SourceTrace.vue'; +import UnderwayAdvice from '@/views/sourcetrace/UnderwayAdvice.vue'; +import PollutedClueItem from '@/views/sourcetrace/component/PollutedClueItem.vue'; import { realTimeMapAnimation } from '@/utils/map/animation'; import { fetchHistoryData, startLoopFetchRealTimeData, - clearFetchingTask + clearFetchingTask, + pauseTask } from '@/utils/factor/data'; import thirdPartyDataApi from '@/api/thirdPartyDataApi'; import websocket from '@/api/websocket'; @@ -49,9 +60,17 @@ // 璋冭瘯妯″紡 const mode = 'debug'; +// const mode = 'product'; export default { - components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace }, + components: { + DashBoard, + RealTimeTrend, + DeviceChange, + SourceTrace, + UnderwayAdvice, + PollutedClueItem + }, setup() { const { loading, fetchData } = useFetchData(10000); return { loading, fetchData }; @@ -66,7 +85,8 @@ // 鏂拌幏鍙栫殑鐩戞祴鏁版嵁 factorDatas: new FactorDatas(), // 鍏ㄩ儴鐩戞祴鏁版嵁 - allFactorDatas: new FactorDatas() + allFactorDatas: new FactorDatas(), + pause: false }; }, watch: { @@ -117,10 +137,18 @@ mode == 'debug' ? { deviceCode: this.deviceCode, - startTime: '2025-01-16 11:34:00', - endTime: '2025-01-16 11:35:00', + // startTime: '2025-01-16 11:34:00', + // endTime: '2025-01-16 11:35:00', + // startTime: '2025-01-20 12:40:00', + // startTime: '2024-12-27 08:30:00', + // startTime: '2024-12-13 16:35:00', + // startTime: '2024-11-27 11:50:41', // Pm, 涓窛绂诲伐鍦� + // startTime: '2024-08-30 15:28:00', // voc 杩戣窛绂绘苯淇� + startTime: '2024-07-23 15:21:30', + // startTime: '2024-07-23 14:39:00', + endTime: '2025-01-16 11:51:41', page, - perPage: 100 + perPage: 10 } : { deviceCode: this.deviceCode, @@ -134,6 +162,9 @@ thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode); }); }); + }, + pauseTask() { + this.pause = pauseTask(); }, clearFetchingTask() { clearFetchingTask(); @@ -174,14 +205,9 @@ } }, mounted() { - // this.fetchRealTimeData(); - // startLoopFetchRealTimeData({ - // compUser: 'user1', - // compPassword: 'User1@jingan', - // mn: 'TX105', - // dtFrom: '2024-08-07 10:00:00', - // dtTo: '2024-08-07 10:00:59' - // }); + if (mode == 'debug') { + websocket.send('start'); + } }, unmounted() { this.clearFetchingTask(); @@ -194,11 +220,16 @@ .dash-board { position: absolute; left: 0; - bottom: 2px; + bottom: 0px; } .real-time-trend { position: absolute; right: 0; top: 0; } +.source-trace { + position: absolute; + right: 0; + bottom: 0px; +} </style> -- Gitblit v1.9.3