<template>
|
<div class="fy-container">
|
<el-row justify="center">
|
<SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
|
</el-row>
|
<FactorRadio
|
:device-type="deviceType"
|
@change="(e) => (factorType = e)"
|
></FactorRadio>
|
</div>
|
</template>
|
|
<script>
|
import Layer from '@/utils/map/3dLayer';
|
import marks from '@/utils/map/marks';
|
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';
|
|
export default {
|
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: []
|
};
|
},
|
watch: {
|
factorType(nValue, oValue) {
|
if (nValue != oValue) {
|
this.draw();
|
}
|
}
|
},
|
methods: {
|
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 + 1 + '');
|
// this.refreshLegend(this.factorDatas);
|
// this.mapMaker.setFactorType(factorType);
|
// if (!this.mapMaker.runStatus()) {
|
|
Layer.drawRoadMap(this.factorDatas, e, this.merge, this.setCenter);
|
// }
|
},
|
drawMassMarks(e) {
|
marks.drawMassMarks(this.factorDatas, e, () => {
|
// 查询范围内的监测站点
|
// SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
|
// 3. 趋势图跳转定位
|
// const progress = FChart.locate(lineChart.chart, lineChart.option, i, _factor.factorName);
|
// 4. 表格数据跳转定位
|
// Table.locate(i);
|
});
|
},
|
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,
|
type,
|
page,
|
perPage: pageSize
|
})
|
.then((res) => this.onFetchData(type, res.data));
|
});
|
},
|
fetchRealTimeData() {
|
// fixme 2024.5.3 此处初始获取的数据，参数应该由searchbar决定，后续修改
|
this.fetchData((page, pageSize) => {
|
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);
|
const e = new Date(res.data[res.data.length - 1].time);
|
this.searchTime = [s, e];
|
}
|
this.onFetchData(TYPE0, res.data);
|
});
|
});
|
}
|
},
|
mounted() {
|
this.fetchRealTimeData();
|
}
|
};
|
</script>
|
<style scoped>
|
.fy-container {
|
}
|
</style>
|
