From 264880703c677d63b7e35b5eb085e6bc3214e3ed Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 17 七月 2024 18:29:31 +0800
Subject: [PATCH] 2024.7.17
---
src/views/realtimemode/RealtimeMode.vue | 61 ++++++++++++++++++++++--------
1 files changed, 44 insertions(+), 17 deletions(-)
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index 6cc8bfd..c4de517 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,17 @@
},
unmounted() {
this.clearFetchingTask();
- mapAnimation.stop();
+ realTimeMapAnimation.stop();
+ console.log('clear');
}
};
</script>
<style scoped>
+.dash-board {
+ position: absolute;
+ left: 0;
+ bottom: 2px;
+}
.real-time-trend {
position: absolute;
right: 0;
--
Gitblit v1.9.3