From 9e0df95ffda0ef9f2339f7caf413b357640aea28 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期一, 06 五月 2024 08:45:14 +0800
Subject: [PATCH] 完成历史轨迹展示

---
 src/views/historymode/HistoryMode.vue |   87 ++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index 1c71387..50dc1f0 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -1,22 +1,44 @@
 <template>
   <div class="fy-container">
-    <FactorRadio @change="(e) => (factorType = e)"></FactorRadio>
-    <SearchBar></SearchBar>
+    <el-row justify="center">
+      <SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
+    </el-row>
+    <FactorRadio
+      :device-type="deviceType"
+      @change="(e) => (factorType = e)"
+    ></FactorRadio>
   </div>
 </template>
 
 <script>
 import Layer from '@/utils/map/3dLayer';
 import marks from '@/utils/map/marks';
+import monitorDataApi from '@/api/monitorDataApi';
+import { useFetchData } from '@/composables/fetchData';
+import moment from 'moment';
+import { TYPE0 } from '@/constant/device-type';
+import { FactorDatas } from '@/model/FactorDatas';
 
 export default {
-  name: 'HistoryPage',
+  setup() {
+    const { loading, fetchData } = useFetchData(10000);
+    return { loading, fetchData };
+  },
   data() {
     return {
-      factorType: '',
-      factorDatas: [],
+      // 鐩戞祴璁惧绫诲瀷
+      deviceType: TYPE0,
+      // 鐩戞祴鍥犲瓙鐨勭被鍨嬬紪鍙�
+      factorType: '1',
+      // 鐩戞祴鏁版嵁
+      factorDatas: new FactorDatas(),
+      // 鍐冲畾缁樺埗3D鍥惧舰鏃舵槸鍚︿笌鍘熷浘鍍忓悎骞�
       merge: false,
-      setCenter: true
+      // 鍐冲畾缁樺埗瀹�3D鍥惧舰鍚庡湴鍥捐瑙掓槸鍚﹁嚜鍔ㄥ洖涓�
+      setCenter: true,
+      // 缁樺埗妯″紡锛�0锛氳嚜鍔ㄦā寮忥紝鑷姩璁＄畻褰撳墠鏁版嵁鐨勮寖鍥达紝缁樺埗鍚堥�傜殑姣斾緥锛�1锛氭墜鍔ㄦā寮忥紝鏍规嵁椤甸潰璁剧疆鐨勭粯鍥捐寖鍥磋繘琛岀粯鍒�
+      drawMode: 0,
+      searchTime: []
     };
   },
   watch: {
@@ -28,6 +50,7 @@
   },
   methods: {
     draw() {
+      // todo 鍒锋柊鍥句緥
       const factor = this.factorDatas.factor[this.factorType];
       this.drawRoadMap(factor);
       this.drawMassMarks(factor);
@@ -54,12 +77,62 @@
         // 4. 琛ㄦ牸鏁版嵁璺宠浆瀹氫綅
         // Table.locate(i);
       });
+    },
+    onFetchData(type, data) {
+      // todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘鐩戞祴鍥犲瓙灞曠ず鍗曢�夋銆佹姌绾垮浘澶嶉�夋銆佹暟鎹〃鏍煎閫夋鐨勫洜瀛愮被鍨�
+      this.deviceType = type;
+      this.factorDatas.setData(data, this.drawMode, () => {
+        this.factorDatas.refreshHeight(this.factorType);
+        this.draw();
+      });
+    },
+    fetchHistroyData(option) {
+      const { deviceCode, type, timeArray } = option;
+      let startTime, endTime;
+      if (timeArray && timeArray.length == 2) {
+        startTime = moment(timeArray[0]).format('YYYY-MM-DD HH:mm:ss');
+        endTime = moment(timeArray[1]).format('YYYY-MM-DD HH:mm:ss');
+      }
+      this.fetchData((page, pageSize) => {
+        return monitorDataApi
+          .fetchHistroyData({
+            deviceCode,
+            startTime,
+            endTime,
+            type,
+            page,
+            perPage: pageSize
+          })
+          .then((res) => this.onFetchData(type, res.data));
+      });
+    },
+    fetchRealTimeData() {
+      // fixme 2024.5.3 姝ゅ鍒濆鑾峰彇鐨勬暟鎹紝鍙傛暟搴旇鐢眘earchbar鍐冲畾锛屽悗缁慨鏀�
+      this.fetchData((page, pageSize) => {
+        return monitorDataApi
+          .fetchHistroyData({
+            deviceCode: '0a0000000001',
+            // type: TYPE0,
+            page,
+            perPage: 100
+          })
+          .then((res) => {
+            if (res.data.length > 0) {
+              const s = new Date(res.data[0].time);
+              const e = new Date(res.data[res.data.length - 1].time);
+              this.searchTime = [s, e];
+            }
+            this.onFetchData(TYPE0, res.data);
+          });
+      });
     }
+  },
+  mounted() {
+    this.fetchRealTimeData();
   }
 };
 </script>
 <style scoped>
 .fy-container {
-  background-color: antiquewhite;
 }
 </style>

--
Gitblit v1.9.3