<template>
|
<div class="p-events-none m-t-2">
|
<el-row justify="center">
|
<SearchBar
|
:search-time="searchTime"
|
@search="fetchHistroyData"
|
></SearchBar>
|
</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>
|
<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(),
|
// 决定绘制3D图形时是否与原图像合并
|
merge: false,
|
// 决定绘制完3D图形后地图视角是否自动回中
|
setCenter: true,
|
// 绘制模式，0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
|
drawMode: 0,
|
searchTime: [],
|
// 当前选中高亮的数据点索引
|
locateIndex: undefined
|
};
|
},
|
watch: {
|
factorType(nValue, oValue) {
|
if (nValue != oValue) {
|
this.draw();
|
}
|
}
|
},
|
methods: {
|
// 监听折线图和表格的点击事件
|
handelIndexChange(index) {
|
this.locateIndex = index;
|
this.drawSector(index);
|
},
|
draw() {
|
// todo 刷新图例
|
const factor = this.factorDatas.factor[this.factorType];
|
this.drawRoadMap(factor);
|
this.drawMassMarks(factor);
|
},
|
// 绘制3D走行路线图
|
drawRoadMap(e) {
|
// this.factorMode = factorMode;
|
// this.factorType = factorType;
|
// this.factorName = factorName;
|
this.factorDatas.refreshHeight(this.factorType);
|
// this.mapMaker.setFactorType(factorType);
|
// if (!this.mapMaker.runStatus()) {
|
|
Layer.drawRoadMap(this.factorDatas, e, this.merge, this.setCenter);
|
// }
|
},
|
drawMassMarks(e) {
|
marks.drawMassMarks(this.factorDatas, e, (index) => {
|
// 查询范围内的监测站点
|
// SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
|
// 3. 趋势图跳转定位
|
// const progress = FChart.locate(lineChart.chart, lineChart.option, i, _factor.factorName);
|
// 4. 表格数据跳转定位
|
// Table.locate(i);
|
this.drawSector(index);
|
this.locateIndex = index;
|
});
|
},
|
drawSector(index) {
|
// 1. 绘制扇形区域
|
sector.drawSector(this.factorDatas, index);
|
// 2. 绘制对话框
|
DialogUtil.openNewWindow(this.factorDatas, index, () => {
|
// 移除扇形区域
|
// clearSector3();
|
});
|
},
|
onFetchData(type, data) {
|
// todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
|
this.deviceType = type;
|
this.factorDatas.setData(data, this.drawMode, () => {
|
this.factorDatas.refreshHeight(this.factorType);
|
this.draw();
|
});
|
},
|
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);
|
});
|
});
|
}
|
},
|
mounted() {
|
this.fetchRealTimeData();
|
}
|
};
|
</script>
|
<style scoped>
|
.trend-analysis {
|
position: absolute;
|
left: 0;
|
bottom: 2px;
|
}
|
|
.data-sheet {
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
</style>
|
