From c35074e0e33054bb6c5ada22f8104422ae953b17 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 21 二月 2025 17:19:04 +0800 Subject: [PATCH] 1. 新增默认加载时先判断各选项是否获取完成逻辑 --- src/views/historymode/HistoryMode.vue | 141 ++++++++++++++++++++++++++++------------------ 1 files changed, 86 insertions(+), 55 deletions(-) diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue index 1b21f51..e7978dd 100644 --- a/src/views/historymode/HistoryMode.vue +++ b/src/views/historymode/HistoryMode.vue @@ -5,7 +5,7 @@ v-show="status == 0" :search-time="searchTime" :loading="loading" - @search="fetchHistroyData" + @search="onSearch" ></SearchBar> <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState> </el-row> @@ -42,26 +42,34 @@ @table-click="handelIndexChange" :factor-datas="factorDatas" :device-type="deviceType" + :device-code="deviceCode" ></DataSheet> </div> </template> <script> import Layer from '@/utils/map/3dLayer'; +import mapLine from '@/utils/map/line'; import marks from '@/utils/map/marks'; import sector from '@/utils/map/sector'; +import mapUtil from '@/utils/map/util'; 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 { defaultOptions } from '@/constant/radio-options'; import { FactorDatas } from '@/model/FactorDatas'; import TrendAnalysis from './component/TrendAnalysis.vue'; import DataSheet from './component/DataSheet.vue'; +import { ElMessage } from 'element-plus'; +import { fetchHistoryData } from '@/utils/factor/data'; +import { mapStores } from 'pinia'; +import { useSceneStore } from '@/stores/scene'; export default { components: { TrendAnalysis, DataSheet }, setup() { + // 闄愬畾鍒嗛〉鏁版嵁閲忎负10000 const { loading, fetchData } = useFetchData(10000); return { loading, fetchData }; }, @@ -69,8 +77,10 @@ return { // 鐩戞祴璁惧绫诲瀷 deviceType: TYPE0, + // 鐩戞祴璁惧缂栧彿 + deviceCode: '', // 鐩戞祴鍥犲瓙鐨勭被鍨嬬紪鍙� - factorType: '1', + factorType: defaultOptions(TYPE0), // 鐩戞祴鏁版嵁 factorDatas: new FactorDatas(), // 鍐冲畾缁樺埗3D鍥惧舰鏃舵槸鍚︿笌鍘熷浘鍍忓悎骞� @@ -83,7 +93,9 @@ // 褰撳墠閫変腑楂樹寒鐨勬暟鎹偣绱㈠紩 locateIndex: undefined, // 杞ㄨ抗鍔ㄧ敾鐘舵�� - status: 0 + status: 0, + // 鏄惁椤甸潰宸茶烦杞� + isUnmounted: false }; }, watch: { @@ -93,94 +105,113 @@ } } }, + computed: { + ...mapStores(useSceneStore) + }, methods: { + // 妫�鏌ユ暟鎹粡绾害鏄惁鍚堟硶 + checkDataIsValid(index) { + const lnglats_GD = this.factorDatas.lnglats_GD[index]; + const time = this.factorDatas.times[index]; + if (lnglats_GD[0] == 0 && lnglats_GD[1] == 0) { + ElMessage({ + message: `${time}鐨勬暟鎹粡绾害鏃犳晥`, + type: 'warning' + }); + return false; + } else { + this.locateIndex = index; + return true; + } + }, // 鐩戝惉鎶樼嚎鍥惧拰琛ㄦ牸鐨勭偣鍑讳簨浠� handelIndexChange(index) { - this.locateIndex = index; - this.drawSector(index); + if (this.checkDataIsValid(index)) { + // 缁樺埗婧簮鎵囧舰 + this.drawSector(index); + // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣 + const [lng, lat] = this.factorDatas.lnglats_GD[index]; + this.sceneStore.searchScene(lng, lat); + } }, draw() { - // todo 鍒锋柊鍥句緥 + // 鍒锋柊鍥句緥 const factor = this.factorDatas.factor[this.factorType]; - this.drawRoadMap(factor); + sector.clearSector(); + this.drawRoadLine(factor); + // this.drawRoadMap(factor); this.drawMassMarks(factor); }, // 缁樺埗3D璧拌璺嚎鍥� drawRoadMap(e) { this.factorDatas.refreshHeight(this.factorType); - Layer.drawRoadMap(this.factorDatas, e, this.merge, this.setCenter); - // } + }, + drawRoadLine(e) { + this.factorDatas.refreshHeight(this.factorType); + mapLine.drawLine(this.factorDatas, e); }, drawMassMarks(e) { marks.drawMassMarks(this.factorDatas, e, (index) => { - // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣 - // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); - this.drawSector(index); - this.locateIndex = index; + this.handelIndexChange(index); }); + // 璋冩暣鍦板浘瑙嗚 + mapUtil.setBound(this.factorDatas.lnglats_GD); }, drawSector(index) { // 1. 缁樺埗鏂版墖褰㈠尯鍩� - sector.drawSector(this.factorDatas, index); + const pr = sector.drawSector(this.factorDatas, index); + // 璋冩暣瑙嗚灞呬腑鏄剧ず + mapUtil.setCenter(pr.p); + // mapUtil.setFitSector(pr); // 2. 缁樺埗瀵硅瘽妗� - DialogUtil.openNewWindow(this.factorDatas, index, () => { - // 绉婚櫎鎵囧舰鍖哄煙 - sector.clearSector(); - }); + DialogUtil.openNewWindow( + this.deviceType, + this.deviceCode, + this.factorDatas, + index, + () => { + // 绉婚櫎鎵囧舰鍖哄煙 + sector.clearSector(); + } + ); }, - onFetchData(type, data) { + onFetchData(deviceType, data) { + if (this.isUnmounted) return; // todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘鐩戞祴鍥犲瓙灞曠ず鍗曢�夋銆佹姌绾垮浘澶嶉�夋銆佹暟鎹〃鏍煎閫夋鐨勫洜瀛愮被鍨� - this.deviceType = type; + this.deviceType = deviceType; this.factorDatas.setData(data, this.drawMode, () => { this.factorDatas.refreshHeight(this.factorType); this.draw(); }); }, - fetchHistroyData(option) { - const { deviceCode, type, timeArray } = option; + onSearch(option) { + const { deviceType, deviceCode, timeArray } = option; + this.deviceType = deviceType; + this.deviceCode = deviceCode; 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, - page, - perPage: pageSize - }) - .then((res) => this.onFetchData(type, res.data)); - }); - }, - fetchRealTimeData() { - // fixme 2024.5.3 姝ゅ鍒濆鑾峰彇鐨勬暟鎹紝鍙傛暟搴旇鐢眘earchbar鍐冲畾锛屽悗缁慨鏀� - this.fetchData((page) => { - 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.replace(' ', 'T')); - const e = new Date( - res.data[res.data.length - 1].time.replace(' ', 'T') - ); - this.searchTime = [s, e]; - } - this.onFetchData(TYPE0, res.data); - }); + return fetchHistoryData({ + deviceType, + deviceCode, + startTime, + endTime, + page, + perPage: pageSize + }).then((res) => this.onFetchData(deviceType, res.data)); }); } }, mounted() { - this.fetchRealTimeData(); + this.isUnmounted = false; + }, + unmounted() { + mapUtil.clearMap(); + this.isUnmounted = true; } }; </script> -- Gitblit v1.9.3