| | |
| | | import Layer from '@/utils/map/3dLayer'; |
| | | 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 { FactorDatas } from '@/model/FactorDatas'; |
| | | import TrendAnalysis from './component/TrendAnalysis.vue'; |
| | | import DataSheet from './component/DataSheet.vue'; |
| | | import { ElMessageBox, ElNotification, ElMessage } from 'element-plus'; |
| | | |
| | | export default { |
| | | components: { TrendAnalysis, DataSheet }, |
| | |
| | | } |
| | | }, |
| | | 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); |
| | | } |
| | | }, |
| | | draw() { |
| | | // todo 刷新图例 |
| | | // 刷新图例 |
| | | const factor = this.factorDatas.factor[this.factorType]; |
| | | sector.clearSector(); |
| | | this.drawRoadMap(factor); |
| | | this.drawMassMarks(factor); |
| | | }, |
| | |
| | | marks.drawMassMarks(this.factorDatas, e, (index) => { |
| | | // 查询范围内的监测站点 |
| | | // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); |
| | | this.drawSector(index); |
| | | this.locateIndex = index; |
| | | if (this.checkDataIsValid(index)) { |
| | | this.drawSector(index); |
| | | } |
| | | }); |
| | | // 调整地图视角 |
| | | mapUtil.setBound(this.factorDatas.lnglats_GD); |
| | | }, |
| | | drawSector(index) { |
| | | // 1. 绘制新扇形区域 |
| | | sector.drawSector(this.factorDatas, index); |
| | | const pr = sector.drawSector(this.factorDatas, index); |
| | | // 调整视角居中显示 |
| | | mapUtil.setFitSector(pr); |
| | | // 2. 绘制对话框 |
| | | DialogUtil.openNewWindow(this.factorDatas, index, () => { |
| | | // 移除扇形区域 |
| | |
| | | }, |
| | | mounted() { |
| | | this.fetchRealTimeData(); |
| | | }, |
| | | unmounted() { |
| | | mapUtil.clearMap(); |
| | | } |
| | | }; |
| | | </script> |