¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="p-events-none m-t-2"> |
| | | <el-row justify="center" align="middle" class="top-wrap"> |
| | | <SearchBar |
| | | v-show="status == 0" |
| | | :search-time="searchTime" |
| | | :loading="loading" |
| | | @search="fetchSegmentData" |
| | | ></SearchBar> |
| | | <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState> |
| | | <el-input-number |
| | | class="p-events-auto" |
| | | v-model="num" |
| | | :min="0" |
| | | @change="handleChange" |
| | | /> |
| | | </el-row> |
| | | <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> |
| | | <el-row class="historical" justify="center"> |
| | | <HistoricalTrajectory |
| | | :factor-datas="factorDatas" |
| | | :factor-type="factorType" |
| | | @change="(e) => (status = e)" |
| | | @stop="draw" |
| | | ></HistoricalTrajectory> |
| | | </el-row> |
| | | <TrendAnalysis |
| | | class="trend-analysis" |
| | | :locate-index="locateIndex" |
| | | @chart-click="handelIndexChange" |
| | | :factor-datas="factorDatas" |
| | | :device-type="deviceType" |
| | | ></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 }; |
| | | }, |
| | | data() { |
| | | return { |
| | | // çæµè®¾å¤ç±»å |
| | | deviceType: TYPE0, |
| | | // çæµå åçç±»åç¼å· |
| | | factorType: '1', |
| | | // çæµæ°æ® |
| | | factorDatas: new FactorDatas(), |
| | | segmentFactorDatas: [], |
| | | num: 0, |
| | | // å³å®ç»å¶3Då¾å½¢æ¶æ¯å¦ä¸åå¾ååå¹¶ |
| | | merge: false, |
| | | // å³å®ç»å¶å®3Då¾å½¢åå°å¾è§è§æ¯å¦èªå¨åä¸ |
| | | setCenter: true, |
| | | // ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶ |
| | | drawMode: 0, |
| | | searchTime: [], |
| | | // å½åéä¸é«äº®çæ°æ®ç¹ç´¢å¼ |
| | | locateIndex: undefined, |
| | | // 轨迹å¨ç»ç¶æ |
| | | status: 0 |
| | | }; |
| | | }, |
| | | watch: { |
| | | factorType(nValue, oValue) { |
| | | if (nValue != oValue && this.status == 0) { |
| | | this.draw(); |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | // çå¬æçº¿å¾åè¡¨æ ¼çç¹å»äºä»¶ |
| | | handelIndexChange(index) { |
| | | this.locateIndex = index; |
| | | this.drawSector(index); |
| | | }, |
| | | handleChange(value) { |
| | | if (value >= this.segmentFactorDatas.length) { |
| | | this.num = this.segmentFactorDatas.length - 1; |
| | | } else { |
| | | const factorDatas = this.segmentFactorDatas[value]; |
| | | this.drawRoadMap(factorDatas); |
| | | this.drawMassMarks(factorDatas); |
| | | } |
| | | }, |
| | | draw(factorDatas) { |
| | | // todo å·æ°å¾ä¾ |
| | | const f = factorDatas ? factorDatas : this.factorDatas; |
| | | this.drawRoadMap(f); |
| | | this.drawMassMarks(f); |
| | | }, |
| | | // ç»å¶3Dèµ°è¡è·¯çº¿å¾ |
| | | drawRoadMap(factorDatas) { |
| | | const factor = factorDatas.factor[this.factorType]; |
| | | factorDatas.refreshHeight(this.factorType); |
| | | |
| | | Layer.drawRoadMap(factorDatas, factor, this.merge, this.setCenter); |
| | | // } |
| | | }, |
| | | drawMassMarks(factorDatas) { |
| | | const factor = factorDatas.factor[this.factorType]; |
| | | marks.drawMassMarks(factorDatas, factor, (index) => { |
| | | // æ¥è¯¢èå´å
ççæµç«ç¹ |
| | | // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); |
| | | this.drawSector(index); |
| | | this.locateIndex = index; |
| | | }); |
| | | }, |
| | | drawSector(index) { |
| | | // 1. ç»å¶æ°æå½¢åºå |
| | | sector.drawSector(this.factorDatas, index); |
| | | // 2. ç»å¶å¯¹è¯æ¡ |
| | | DialogUtil.openNewWindow(this.factorDatas, index, () => { |
| | | // ç§»é¤æå½¢åºå |
| | | sector.clearSector(); |
| | | }); |
| | | }, |
| | | onFetchData(type, data) { |
| | | // todo æ ¹æ®è®¾å¤ç±»å忢å°å¾çæµå åå±ç¤ºåéæ¡ãæçº¿å¾å¤éæ¡ãæ°æ®è¡¨æ ¼å¤éæ¡çå åç±»å |
| | | this.deviceType = type; |
| | | this.factorDatas.setData(data, this.drawMode, () => { |
| | | this.factorDatas.refreshHeight(this.factorType); |
| | | this.draw(); |
| | | }); |
| | | }, |
| | | onFetchSegmentData(type, data) { |
| | | this.deviceType = type; |
| | | const list = []; |
| | | data.forEach((d) => { |
| | | const factorDatas = new FactorDatas(); |
| | | factorDatas.setData(d, this.drawMode, () => { |
| | | factorDatas.refreshHeight(this.factorType); |
| | | // this.draw(factorDatas); |
| | | }); |
| | | list.push(factorDatas); |
| | | }); |
| | | this.segmentFactorDatas = list; |
| | | }, |
| | | 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, |
| | | page, |
| | | perPage: pageSize |
| | | }) |
| | | .then((res) => this.onFetchData(type, res.data)); |
| | | }); |
| | | }, |
| | | fetchRealTimeData() { |
| | | // fixme 2024.5.3 æ¤å¤åå§è·åçæ°æ®ï¼åæ°åºè¯¥ç±searchbarå³å®ï¼åç»ä¿®æ¹ |
| | | 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); |
| | | }); |
| | | }); |
| | | }, |
| | | fetchSegmentData(option) { |
| | | const { type, mission } = option; |
| | | this.fetchData((page, pageSize) => { |
| | | return monitorDataApi |
| | | .fetchSegmentData(mission.missionCode) |
| | | .then((res) => this.onFetchSegmentData(type, res.data)); |
| | | }); |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.fetchRealTimeData(); |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | .top-wrap { |
| | | height: 40px; |
| | | } |
| | | |
| | | .trend-analysis { |
| | | position: absolute; |
| | | left: 0; |
| | | bottom: 2px; |
| | | } |
| | | |
| | | .data-sheet { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 0; |
| | | } |
| | | |
| | | .historical { |
| | | position: absolute; |
| | | bottom: 10px; |
| | | left: 0; |
| | | right: 0; |
| | | } |
| | | </style> |