| | |
|---|
| | | 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 { useFetchData } from '@/composables/fetchData'; |
|---|
| | | import moment from 'moment'; |
|---|
| | | import { TYPE0 } from '@/constant/device-type'; |
|---|
| | | import { radioOptions } from '@/constant/radio-options'; |
|---|
| | | 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 }; |
|---|
| | | }, |
|---|
| | |
|---|
| | | // 监测设备编号 |
|---|
| | | deviceCode: '', |
|---|
| | | // 监测因子的类型编号 |
|---|
| | | factorType: radioOptions(TYPE0)[0].value, |
|---|
| | | factorType: defaultOptions(TYPE0), |
|---|
| | | // 监测数据 |
|---|
| | | factorDatas: new FactorDatas(), |
|---|
| | | // 决定绘制3D图形时是否与原图像合并 |
|---|
| | |
|---|
| | | // 当前选中高亮的数据点索引 |
|---|
| | | locateIndex: undefined, |
|---|
| | | // 轨迹动画状态 |
|---|
| | | status: 0 |
|---|
| | | status: 0, |
|---|
| | | // 是否页面已跳转 |
|---|
| | | isUnmounted: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | |
|---|
| | | this.draw(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapStores(useSceneStore) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // 检查数据经纬度是否合法 |
|---|
| | |
|---|
| | | // 监听折线图和表格的点击事件 |
|---|
| | | handelIndexChange(index) { |
|---|
| | | if (this.checkDataIsValid(index)) { |
|---|
| | | // 绘制溯源扇形 |
|---|
| | | this.drawSector(index); |
|---|
| | | // 查询范围内的监测站点 |
|---|
| | | const [lng, lat] = this.factorDatas.lnglats_GD[index]; |
|---|
| | | this.sceneStore.searchScene(lng, lat); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | draw() { |
|---|
| | |
|---|
| | | }, |
|---|
| | | drawMassMarks(e) { |
|---|
| | | marks.drawMassMarks(this.factorDatas, e, (index) => { |
|---|
| | | // 查询范围内的监测站点 |
|---|
| | | // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); |
|---|
| | | if (this.checkDataIsValid(index)) { |
|---|
| | | this.drawSector(index); |
|---|
| | | } |
|---|
| | | this.handelIndexChange(index); |
|---|
| | | }); |
|---|
| | | // 调整地图视角 |
|---|
| | | mapUtil.setBound(this.factorDatas.lnglats_GD); |
|---|
| | |
|---|
| | | mapUtil.setCenter(pr.p); |
|---|
| | | // mapUtil.setFitSector(pr); |
|---|
| | | // 2. 绘制对话框 |
|---|
| | | DialogUtil.openNewWindow(this.deviceCode, this.factorDatas, index, () => { |
|---|
| | | // 移除扇形区域 |
|---|
| | | sector.clearSector(); |
|---|
| | | }); |
|---|
| | | DialogUtil.openNewWindow( |
|---|
| | | this.deviceType, |
|---|
| | | this.deviceCode, |
|---|
| | | this.factorDatas, |
|---|
| | | index, |
|---|
| | | () => { |
|---|
| | | // 移除扇形区域 |
|---|
| | | sector.clearSector(); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | }, |
|---|
| | | onFetchData(deviceType, data) { |
|---|
| | | if (this.isUnmounted) return; |
|---|
| | | // todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型 |
|---|
| | | this.deviceType = deviceType; |
|---|
| | | this.factorDatas.setData(data, this.drawMode, () => { |
|---|
| | |
|---|
| | | this.draw(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | fetchHistroyData(option) { |
|---|
| | | onSearch(option) { |
|---|
| | | const { deviceType, deviceCode, timeArray } = option; |
|---|
| | | this.deviceType = deviceType; |
|---|
| | | this.deviceCode = deviceCode; |
|---|
| | |
|---|
| | | }).then((res) => this.onFetchData(deviceType, res.data)); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // fetchRealTimeData() { |
|---|
| | | // // fixme 2024.5.3 此处初始获取的数据，参数应该由searchbar决定，后续修改 |
|---|
| | | // this.fetchData((page) => { |
|---|
| | | // return fetchHistoryData({ |
|---|
| | | // 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); |
|---|
| | | // }); |
|---|
| | | // }); |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // this.fetchRealTimeData(); |
|---|
| | | this.isUnmounted = false; |
|---|
| | | }, |
|---|
| | | unmounted() { |
|---|
| | | mapUtil.clearMap(); |
|---|
| | | this.isUnmounted = true; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
