From f16acb06ab278cdcb1d39a29680634010638326d Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 08 五月 2024 17:35:48 +0800
Subject: [PATCH] 1. 完成表格模块的功能迁移; 2. 完成表格、折线图、地图标记三者点击联动

---
 src/views/historymode/HistoryMode.vue |   85 +++++++++++++++++++++++++++++++++++-------
 1 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index 50dc1f0..817a150 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -1,25 +1,55 @@
 <template>
-  <div class="fy-container">
+  <div class="p-events-none m-t-2">
     <el-row justify="center">
-      <SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
+      <SearchBar
+        :search-time="searchTime"
+        @search="fetchHistroyData"
+      ></SearchBar>
     </el-row>
-    <FactorRadio
+    <el-row class="m-t-2">
+      <FactorRadio
+        :device-type="deviceType"
+        @change="(e) => (factorType = e)"
+      ></FactorRadio>
+    </el-row>
+    <el-row class="m-t-2">
+      <FactorLegend
+        class="m-t-2"
+        :factor="factorDatas.factor[factorType]"
+      ></FactorLegend>
+    </el-row>
+    <TrendAnalysis
+      class="trend-analysis"
+      :locate-index="locateIndex"
+      @chart-click="handelIndexChange"
+      :factor-datas="factorDatas"
       :device-type="deviceType"
-      @change="(e) => (factorType = e)"
-    ></FactorRadio>
+    ></TrendAnalysis>
+    <DataSheet
+      class="data-sheet"
+      :locate-index="locateIndex"
+      @table-click="handelIndexChange"
+      :factor-datas="factorDatas"
+      :device-type="deviceType"
+    ></DataSheet>
   </div>
 </template>
 
 <script>
 import Layer from '@/utils/map/3dLayer';
 import marks from '@/utils/map/marks';
+import sector from '@/utils/map/sector';
+import { DialogUtil } from '@/utils/map/dialog';
 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';
+import TrendAnalysis from './component/TrendAnalysis.vue';
+import DataSheet from './component/DataSheet.vue';
 
 export default {
+  components: { TrendAnalysis, DataSheet },
   setup() {
     const { loading, fetchData } = useFetchData(10000);
     return { loading, fetchData };
@@ -38,7 +68,9 @@
       setCenter: true,
       // 缁樺埗妯″紡锛�0锛氳嚜鍔ㄦā寮忥紝鑷姩璁$畻褰撳墠鏁版嵁鐨勮寖鍥达紝缁樺埗鍚堥�傜殑姣斾緥锛�1锛氭墜鍔ㄦā寮忥紝鏍规嵁椤甸潰璁剧疆鐨勭粯鍥捐寖鍥磋繘琛岀粯鍒�
       drawMode: 0,
-      searchTime: []
+      searchTime: [],
+      // 褰撳墠閫変腑楂樹寒鐨勬暟鎹偣绱㈠紩
+      locateIndex: undefined
     };
   },
   watch: {
@@ -49,6 +81,11 @@
     }
   },
   methods: {
+    // 鐩戝惉鎶樼嚎鍥惧拰琛ㄦ牸鐨勭偣鍑讳簨浠�
+    handelIndexChange(index) {
+      this.locateIndex = index;
+      this.drawSector(index);
+    },
     draw() {
       // todo 鍒锋柊鍥句緥
       const factor = this.factorDatas.factor[this.factorType];
@@ -60,8 +97,7 @@
       //   this.factorMode = factorMode;
       // this.factorType = factorType;
       // this.factorName = factorName;
-      // this.factorDatas.refreshHeight(this.factorType + 1 + '');
-      // this.refreshLegend(this.factorDatas);
+      this.factorDatas.refreshHeight(this.factorType);
       // this.mapMaker.setFactorType(factorType);
       // if (!this.mapMaker.runStatus()) {
 
@@ -69,13 +105,24 @@
       // }
     },
     drawMassMarks(e) {
-      marks.drawMassMarks(this.factorDatas, e, () => {
+      marks.drawMassMarks(this.factorDatas, e, (index) => {
         // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣
         // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
         // 3. 瓒嬪娍鍥捐烦杞畾浣�
         // const progress = FChart.locate(lineChart.chart, lineChart.option, i, _factor.factorName);
         // 4. 琛ㄦ牸鏁版嵁璺宠浆瀹氫綅
         // Table.locate(i);
+        this.drawSector(index);
+        this.locateIndex = index;
+      });
+    },
+    drawSector(index) {
+      // 1. 缁樺埗鎵囧舰鍖哄煙
+      sector.drawSector(this.factorDatas, index);
+      // 2. 缁樺埗瀵硅瘽妗�
+      DialogUtil.openNewWindow(this.factorDatas, index, () => {
+        // 绉婚櫎鎵囧舰鍖哄煙
+        // clearSector3();
       });
     },
     onFetchData(type, data) {
@@ -99,7 +146,6 @@
             deviceCode,
             startTime,
             endTime,
-            type,
             page,
             perPage: pageSize
           })
@@ -108,7 +154,7 @@
     },
     fetchRealTimeData() {
       // fixme 2024.5.3 姝ゅ鍒濆鑾峰彇鐨勬暟鎹紝鍙傛暟搴旇鐢眘earchbar鍐冲畾锛屽悗缁慨鏀�
-      this.fetchData((page, pageSize) => {
+      this.fetchData((page) => {
         return monitorDataApi
           .fetchHistroyData({
             deviceCode: '0a0000000001',
@@ -118,8 +164,10 @@
           })
           .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);
+              const s = new Date(res.data[0].time.replace(' ', 'T'));
+              const e = new Date(
+                res.data[res.data.length - 1].time.replace(' ', 'T')
+              );
               this.searchTime = [s, e];
             }
             this.onFetchData(TYPE0, res.data);
@@ -133,6 +181,15 @@
 };
 </script>
 <style scoped>
-.fy-container {
+.trend-analysis {
+  position: absolute;
+  left: 0;
+  bottom: 2px;
+}
+
+.data-sheet {
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 </style>

--
Gitblit v1.9.3