| | |
|---|
| | | v-show="status == 0" |
|---|
| | | :search-time="searchTime" |
|---|
| | | :loading="loading" |
|---|
| | | @search="fetchHistroyData" |
|---|
| | | @search="onSearch" |
|---|
| | | ></SearchBar> |
|---|
| | | <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState> |
|---|
| | | </el-row> |
|---|
| | |
|---|
| | | @table-click="handelIndexChange" |
|---|
| | | :factor-datas="factorDatas" |
|---|
| | | :device-type="deviceType" |
|---|
| | | :device-code="deviceCode" |
|---|
| | | ></DataSheet> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | 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 moment from 'moment'; |
|---|
| | | import { TYPE0 } from '@/constant/device-type'; |
|---|
| | | import { radioOptions } 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 }; |
|---|
| | | }, |
|---|
| | |
|---|
| | | return { |
|---|
| | | // 监测设备类型 |
|---|
| | | deviceType: TYPE0, |
|---|
| | | // 监测设备编号 |
|---|
| | | deviceCode: '', |
|---|
| | | // 监测因子的类型编号 |
|---|
| | | factorType: '1', |
|---|
| | | factorType: radioOptions(TYPE0)[0].value, |
|---|
| | | // 监测数据 |
|---|
| | | factorDatas: new FactorDatas(), |
|---|
| | | // 决定绘制3D图形时是否与原图像合并 |
|---|
| | |
|---|
| | | // 当前选中高亮的数据点索引 |
|---|
| | | locateIndex: undefined, |
|---|
| | | // 轨迹动画状态 |
|---|
| | | status: 0 |
|---|
| | | status: 0, |
|---|
| | | // 是否页面已跳转 |
|---|
| | | isUnmounted: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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]; |
|---|
| | | sector.clearSector(); |
|---|
| | | this.drawRoadMap(factor); |
|---|
| | | this.drawMassMarks(factor); |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | 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 此处初始获取的数据，参数应该由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); |
|---|
| | | }); |
|---|
| | | 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> |
|---|
