From fb876cbc3b21035125668f2db6ee84e47efb544f Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期日, 12 五月 2024 22:42:22 +0800 Subject: [PATCH] 实时走航模式完成 --- src/views/realtimemode/RealtimeMode.vue | 60 +++++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue index 6cc8bfd..1ecbd0a 100644 --- a/src/views/realtimemode/RealtimeMode.vue +++ b/src/views/realtimemode/RealtimeMode.vue @@ -1,6 +1,8 @@ <template> <div class="p-events-none m-t-2"> - <el-row justify="center" align="middle" class="top-wrap"> </el-row> + <el-row justify="center" align="middle" class="top-wrap"> + <DeviceChange @change="onDeviceChange"></DeviceChange> + </el-row> <el-row class="m-t-2"> <FactorRadio :device-type="deviceType" @@ -13,9 +15,7 @@ :factor="factorDatas.factor[factorType]" ></FactorLegend> </el-row> - <el-row class="m-t-2" justify="start"> - <DashBoard :factor-datas="factorDatas"></DashBoard> - </el-row> + <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard> <RealTimeTrend class="real-time-trend" :factor-datas="factorDatas" @@ -31,12 +31,13 @@ import monitorDataApi from '@/api/monitorDataApi'; import DashBoard from './component/DashBoard.vue'; import RealTimeTrend from './component/RealTimeTrend.vue'; -import { MapAnimation } from '@/utils/map/animation'; +import DeviceChange from './component/DeviceChange.vue'; +import { realTimeMapAnimation } from '@/utils/map/animation'; -const mapAnimation = new MapAnimation(); +// const mapAnimation = new MapAnimation(); export default { - components: { DashBoard, RealTimeTrend }, + components: { DashBoard, RealTimeTrend, DeviceChange }, setup() { const { loading, fetchData } = useFetchData(10000); return { loading, fetchData }; @@ -54,16 +55,33 @@ allFactorDatas: new FactorDatas() }; }, + watch: { + factorType(nV, oV) { + if (nV != oV) { + realTimeMapAnimation.setFactorType(nV); + } + } + }, computed: { latestTime() { if (this.factorDatas.times.length == 0) { - return '----/--/-- --:--:--'; + return ''; } else { return this.factorDatas.times[this.factorDatas.times.length - 1]; } } }, methods: { + onDeviceChange({ type, deviceCode }) { + this.deviceType = type; + this.deviceCode = deviceCode; + this.clearFetchingTask(); + realTimeMapAnimation.stop(); + this.allFactorDatas.clearData(); + this.factorDatas.clearData(); + this.notFirstFetch = false; + this.fetchRealTimeData(); + }, onFetchData(data) { // todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘鐩戞祴鍥犲瓙灞曠ず鍗曢�夋銆佹姌绾垮浘澶嶉�夋銆佹暟鎹〃鏍煎閫夋鐨勫洜瀛愮被鍨� // this.deviceType = type; @@ -80,7 +98,7 @@ return monitorDataApi .fetchHistroyData({ deviceCode: this.deviceCode, - startTime: '2021-11-04 09:53:35', + // startTime: '2021-11-04 09:53:35', page, perPage: 100 }) @@ -94,6 +112,7 @@ clearFetchingTask() { if (this.fetchingTask) { clearInterval(this.fetchingTask); + this.fetchingTask = undefined; } }, fetchNextData() { @@ -109,7 +128,7 @@ .fetchNextData({ deviceCode: this.deviceCode, updateTime: this.latestTime, - perPage: 2 + perPage: 10 }) .then((res) => { this.onFetchData(res.data); @@ -126,12 +145,14 @@ this.notFirstFetch = true; } startIndex = startIndex < 0 ? 0 : startIndex; - this.allFactorDatas.addData(dataList, this.drawMode, () => { - mapAnimation.moveAnimation( - this.allFactorDatas, - this.factorType, - startIndex - ); + return new Promise((resolve, reject) => { + this.allFactorDatas.addData(dataList, this.drawMode, () => { + realTimeMapAnimation.moveAnimation( + this.allFactorDatas, + this.factorType, + startIndex + ); + }); }); } }, @@ -140,11 +161,16 @@ }, unmounted() { this.clearFetchingTask(); - mapAnimation.stop(); + realTimeMapAnimation.stop(); } }; </script> <style scoped> +.dash-board { + position: absolute; + left: 0; + bottom: 2px; +} .real-time-trend { position: absolute; right: 0; -- Gitblit v1.9.3