<template>
|
<!-- <div class="p-events-none m-t-2"> -->
|
<el-row justify="space-between">
|
<el-row class="wrap">
|
<el-col span="2">
|
<el-row>
|
<BaseCard v-show="show" size="medium" direction="left">
|
<template #content>
|
<el-row>
|
<el-form :inline="true">
|
<!-- <el-form-item label="走航融合">
|
<el-select
|
v-model="selectedfusionData"
|
multiple
|
clearable
|
@change="handleChange"
|
placeholder="选择任务"
|
size="small"
|
style="width: 160px"
|
:loading="fusionLoading"
|
>
|
<el-option
|
v-for="(s, i) in fusionDataList"
|
:key="i"
|
:label="s.mixDataId"
|
:value="i"
|
/>
|
</el-select>
|
</el-form-item> -->
|
<!-- <el-form-item>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
:disabled="
|
!gridCellList || selectedfusionData.length == 0
|
"
|
@click="handleFusionClick"
|
>
|
{{ '叠加走航' }}
|
</el-button>
|
</el-form-item> -->
|
</el-form>
|
</el-row>
|
<el-row class="m-t-8" justify="space-between">
|
<span>融合分析</span>
|
</el-row>
|
<el-form :inline="false">
|
<el-form-item label="时段筛选">
|
<el-select
|
v-model="selectedTimeSection"
|
multiple
|
clearable
|
placeholder="选择时段"
|
size="small"
|
style="width: 300px"
|
>
|
<el-option
|
v-for="(v, i) in timeSectionList"
|
:key="i"
|
:label="v"
|
:value="v"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="区域筛选">
|
<el-select
|
v-model="selectedZone"
|
multiple
|
clearable
|
placeholder="选择区域"
|
size="small"
|
style="width: 300px"
|
>
|
<el-option
|
v-for="(v, i) in zoneList"
|
:key="i"
|
:label="v"
|
:value="v"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="背景筛选">
|
<el-select
|
v-model="selectedPollutionDegree"
|
multiple
|
clearable
|
placeholder="选择背景"
|
size="small"
|
style="width: 300px"
|
>
|
<el-option
|
v-for="(v, i) in pollutionDegreeList"
|
:key="i"
|
:label="v"
|
:value="v"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div v-if="!gridCellList">
|
<el-icon class="is-loading"><Loading /></el-icon>
|
网格信息加载中...
|
</div>
|
<el-table
|
ref="tableRef"
|
:data="showFusionDataList"
|
table-layout="fixed"
|
size="default"
|
:show-overflow-tooltip="true"
|
border
|
height="50vh"
|
row-class-name="t-row-normal"
|
cell-class-name="t-cell"
|
header-row-class-name="t-header-row"
|
header-cell-class-name="t-header-cell"
|
:highlight-current-row="false"
|
@row-click="handleRowClick"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column width="40" v-if="!gridCellList">
|
<template #default>
|
<el-icon class="is-loading"><Loading /></el-icon>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-else
|
type="selection"
|
:selectable="selectable"
|
width="40"
|
/>
|
<!-- <el-table-column
|
type="index"
|
label="序号"
|
width="30"
|
/> -->
|
<el-table-column
|
prop="dataTime"
|
label="时间"
|
align="center"
|
:formatter="timeFormatter"
|
width="120"
|
/>
|
<el-table-column
|
prop="missionCode"
|
label="任务编号"
|
align="center"
|
width="150"
|
/>
|
<el-table-column
|
prop="zone"
|
label="区域"
|
align="center"
|
width="50"
|
/>
|
<el-table-column
|
prop="pollutionDegree"
|
label="污染背景"
|
align="center"
|
width="70"
|
/>
|
</el-table>
|
|
<div class="m-t-8">操作</div>
|
<el-space class="m-t-8 m-b-8">
|
<!-- <el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
:disabled="!gridCellList || selectedfusionData.length == 0"
|
@click="handleFusionClick"
|
>
|
{{ '叠加走航' }}
|
</el-button> -->
|
<CheckButton
|
active-text="融合分析"
|
:default-value="false"
|
@change="handleMixClick"
|
>
|
</CheckButton>
|
</el-space>
|
</template>
|
<template #footer> </template>
|
</BaseCard>
|
</el-row>
|
</el-col>
|
<el-col span="2">
|
<el-row>
|
<CardButton
|
name="走航融合"
|
direction="right"
|
@click="() => (show = !show)"
|
></CardButton>
|
</el-row>
|
</el-col>
|
</el-row>
|
<GridStyleTool
|
:gridCtrls="gridCtrls"
|
@show-underway="handleUnderwayClick"
|
@on-delete="handleFusionDelete"
|
></GridStyleTool>
|
</el-row>
|
<!-- </div> -->
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
|
import moment from 'moment';
|
import gridApi from '@/api/gridApi';
|
import { SatelliteGrid } from '@/model/SatelliteGrid';
|
import GridStyleTool from './component/GridStyleTool.vue';
|
import { useGridStore } from '@/stores/grid-info';
|
|
const gridStore = useGridStore();
|
|
const satelliteGrid = new SatelliteGrid('走航融合');
|
const gridCtrls = ref([satelliteGrid]);
|
|
// 借用卫星遥测模块中的100米网格
|
const props = defineProps({
|
groupId: {
|
type: Number,
|
default: 3
|
}
|
});
|
const show = ref(true);
|
|
const mission = ref(undefined);
|
|
const gridCellList = ref(undefined);
|
const fusionData = ref(undefined);
|
// 走航融合数据
|
const fusionLoading = ref(false);
|
const fusionDataList = ref([]);
|
const selectedfusionData = ref([]);
|
const tableRef = ref()
|
const selectable = (row) => gridCellList.value;
|
|
const gridDataDetailMap = new Map();
|
|
const selectedTimeSection = ref([]);
|
const selectedZone = ref([]);
|
const selectedPollutionDegree = ref([]);
|
|
const timeSectionList = computed(() => {
|
let res = [];
|
fusionDataList.value.forEach((e) => {
|
const hour = moment(e.dayTimePeriodStart).hour();
|
const t = e.dayTimePeriod;
|
const option = {
|
value: t,
|
index: hour
|
};
|
if (res.indexOf(option) == -1) {
|
res.push(option);
|
}
|
});
|
res.sort((a, b) => {
|
return a.index - b.index;
|
});
|
|
const rMap = new Map();
|
showFusionDataList.value.forEach((d) => {
|
if (!rMap.has(d.dayTimePeriod)) {
|
rMap.set(d.dayTimePeriod, 0);
|
}
|
rMap.set(d.dayTimePeriod, rMap.get(d.dayTimePeriod) + 1);
|
});
|
|
res = res.map((v) => {
|
const count = rMap.get(v.value);
|
return `${v.value} (${count})`;
|
});
|
return res;
|
});
|
|
const zoneList = computed(() => {
|
let res = [];
|
fusionDataList.value.forEach((e) => {
|
const t = e.zone;
|
if (res.indexOf(t) == -1) {
|
res.push(t);
|
}
|
});
|
const rMap = new Map();
|
showFusionDataList.value.forEach((d) => {
|
if (!rMap.has(d.zone)) {
|
rMap.set(d.zone, 0);
|
}
|
rMap.set(d.zone, rMap.get(d.zone) + 1);
|
});
|
|
res = res.map((v) => {
|
const count = rMap.get(v);
|
return `${v} (${count})`;
|
});
|
return res;
|
});
|
|
const pollutionDegreeList = computed(() => {
|
let res = [];
|
fusionDataList.value.forEach((e) => {
|
const t = e.pollutionDegree;
|
const option = {
|
value: t,
|
index: e.pollutionDegreeIndex
|
};
|
if (res.indexOf(option) == -1) {
|
res.push(option);
|
}
|
});
|
res.sort((a, b) => {
|
return a.index - b.index;
|
});
|
const rMap = new Map();
|
showFusionDataList.value.forEach((d) => {
|
if (!rMap.has(d.pollutionDegree)) {
|
rMap.set(d.pollutionDegree, 0);
|
}
|
rMap.set(d.pollutionDegree, rMap.get(d.pollutionDegree) + 1);
|
});
|
|
res = res.map((v) => {
|
const count = rMap.get(v.value);
|
return `${v.value} (${count})`;
|
});
|
return res;
|
});
|
|
const showFusionDataList = computed(() => {
|
return fusionDataList.value.filter((v) => {
|
const b1 =
|
selectedTimeSection.value.length == 0 ||
|
selectedTimeSection.value.indexOf(v.dayTimePeriod) != -1;
|
const b2 =
|
selectedZone.value.length == 0 ||
|
selectedZone.value.indexOf(v.zone) != -1;
|
const b3 =
|
selectedPollutionDegree.value.length == 0 ||
|
selectedPollutionDegree.value.indexOf(v.pollutionDegree) != -1;
|
|
return b1 && b2 && b3;
|
});
|
});
|
// if (
|
// selectedTimeSection.value.length == 0 &&
|
// selectedZone.value.length == 0 &&
|
// selectedPollutionDegree.value.length == 0
|
// ) {
|
// return true;
|
// } else {
|
// const b1 =
|
// selectedTimeSection.value.indexOf(
|
// moment(v.dataTime).format('YYYY-MM-DD')
|
// ) != -1;
|
// const b2 = selectedZone.value.indexOf(v.zone) != -1;
|
// const b3 = selectedPollutionDegree.value.indexOf(v.pollutionDegree) != -1;
|
|
// return b1 && b2 || b3;
|
// }
|
|
const mixActive = ref(false);
|
const heatActive = ref(false);
|
const gridVisible = ref(true);
|
const underwayVisible = ref(false);
|
const rankVisible = ref(false);
|
const dataVisible = ref(false);
|
const isStandardColor = ref(true);
|
const isOpacity = ref(false);
|
|
function timeFormatter(row, col, cellValue, index) {
|
return moment(cellValue).format('YYYY-MM-DD');
|
}
|
|
function fetchFusionData() {
|
fusionLoading.value = true;
|
gridApi
|
.fetchGridData(props.groupId, undefined, 3)
|
.then((res) => {
|
fusionDataList.value = res.data;
|
})
|
.finally(() => (fusionLoading.value = false));
|
}
|
|
// 检查走航数据是否和100米网格已融合
|
// function checkUnderwayFusionResult() {
|
// const time = moment(mission.value.startTime).format('YYYY-MM-DD HH:mm:ss');
|
// gridApi.fetchGridData(props.groupId, time, 3).then((res) => {
|
// if (res.data.length > 0) {
|
// fusionData.value = res.data[0];
|
// } else {
|
// fusionData.value = undefined;
|
// }
|
// });
|
// }
|
|
function prepareGrid(gridInfo) {
|
satelliteGrid.gridPrepare(gridInfo, (polygon) => {
|
//鼠标移入事件
|
polygon.on('mouseover', () => {
|
polygon.setOptions({
|
//修改多边形属性的方法
|
strokeWeight: 2,
|
strokeColor: 'red'
|
});
|
});
|
//鼠标移出事件
|
polygon.on('mouseout', () => {
|
polygon.setOptions({
|
strokeWeight: 1,
|
strokeColor: 'white'
|
});
|
});
|
});
|
// satelliteGrid.setGridEvent('click', (gridCell, gridDataDetail) => {
|
// // const polygon = e.target
|
// // const { gridCell } = polygon.getExtData();
|
// // const cellIndex = gridCell.cellIndex;
|
// gridStore.selectedGridCellAndDataDetail = {
|
// gridCell,
|
// gridDataDetail
|
// };
|
// });
|
}
|
|
// watch(mission, (nV, oV) => {
|
// if (nV != oV) {
|
// checkUnderwayFusionResult();
|
// search(nV);
|
// }
|
// });
|
|
watch(
|
() => props.groupId,
|
(nV, oV) => {
|
if (nV != oV) {
|
gridApi.fetchGridCell(nV).then((res) => {
|
gridCellList.value = res.data;
|
prepareGrid(gridCellList.value);
|
});
|
fetchFusionData();
|
}
|
},
|
{
|
immediate: true
|
}
|
);
|
|
function handleFusionClick() {
|
// resetButton();
|
satelliteGrid.changeVisibility({ showGridViews: false });
|
selectedfusionData.value.forEach((i) => {
|
// const d = fusionDataList.value[i];
|
const d = i;
|
if (gridDataDetailMap.has(d.id)) {
|
satelliteGrid.changeVisibility({ tags: [d.id], showGridViews: true });
|
// gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
|
gridCtrls.value = [satelliteGrid];
|
} else {
|
gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
|
gridDataDetailMap.set(d.id, res.data);
|
const gdd = res.data;
|
satelliteGrid.drawTagGrid({
|
tag: d.id,
|
data: gdd,
|
extData: {
|
name: `走航网格 - ${d.mixDataId}`,
|
type: 0
|
}
|
});
|
satelliteGrid.setGridEvent(
|
[d.id],
|
'click',
|
(gridCell, gridDataDetail) => {
|
gridStore.selectedGridCellAndDataDetail = {
|
gridCell,
|
gridDataDetail
|
};
|
}
|
);
|
gridCtrls.value = [satelliteGrid];
|
// gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
|
// console.log(gridCtrls.value);
|
});
|
}
|
});
|
}
|
|
let mixTag;
|
function handleMixClick() {
|
mixActive.value = !mixActive.value;
|
const tags = selectedfusionData.value.map((v) => v.id);
|
satelliteGrid.changeVisibility({
|
showGridViews: false,
|
showDataTxt: false,
|
showRankTxt: false
|
});
|
if (mixActive.value) {
|
mixTag = satelliteGrid.mixGrid(tags);
|
satelliteGrid.setGridEvent(
|
[mixTag],
|
'click',
|
(gridCell, gridDataDetail) => {
|
gridStore.selectedGridCellAndDataDetail = {
|
gridCell,
|
gridDataDetail
|
};
|
}
|
);
|
gridCtrls.value = [satelliteGrid];
|
} else {
|
satelliteGrid.changeVisibility({
|
tags,
|
showGridViews: true
|
});
|
}
|
}
|
|
let heatTag;
|
function handleHeatMapClick() {
|
heatActive.value = !heatActive.value;
|
satelliteGrid.changeVisibility({
|
showGridViews: false,
|
showDataTxt: false,
|
showRankTxt: false
|
});
|
if (heatActive.value) {
|
// heatTag = satelliteGrid.drawHeatGrid(mixTag);
|
// satelliteGrid.setGridEvent(
|
// [heatTag],
|
// 'click',
|
// (gridCell, gridDataDetail) => {
|
// gridStore.selectedGridCellAndDataDetail = {
|
// gridCell,
|
// gridDataDetail
|
// };
|
// }
|
// );
|
// gridCtrls.value = [satelliteGrid];
|
|
const data = satelliteGrid.gridDataDetailMap.get(mixTag);
|
gridApi.buildUnderwayHeatmap(3, data, 10).then((res) => {
|
heatTag = satelliteGrid.drawHeatGrid2(mixTag, res.data);
|
satelliteGrid.setGridEvent(
|
[heatTag],
|
'click',
|
(gridCell, gridDataDetail) => {
|
gridStore.selectedGridCellAndDataDetail = {
|
gridCell,
|
gridDataDetail
|
};
|
}
|
);
|
gridCtrls.value = [satelliteGrid];
|
});
|
} else {
|
satelliteGrid.changeVisibility({
|
tags: [mixTag],
|
showGridViews: true
|
});
|
}
|
}
|
|
function handleHeatMapSearchClick() {
|
const res = satelliteGrid.search(
|
{
|
groupId: 1,
|
cellId: 2893,
|
pm25: 50
|
},
|
120,
|
90,
|
10,
|
10,
|
3
|
);
|
|
console.log(res);
|
}
|
|
function handleUnderwayClick({ isShow, dataId }) {
|
underwayVisible.value = !underwayVisible.value;
|
|
if (isShow) {
|
draw(dataId);
|
} else {
|
const d = fusionDataList.value.find((v) => v.id == dataId);
|
const mission = missionStore.missionList.find((v) => {
|
return v.missionCode == d.mixDataId;
|
});
|
mapLine.hideLine(mission.missionCode);
|
}
|
}
|
function handleFusionDelete(index, tag) {
|
const f = selectedfusionData.value.find((v) => v.id == tag);
|
if (f) {
|
// const i = selectedfusionData.value.indexOf(f);
|
// selectedfusionData.value.splice(i, 1);
|
tableRef.value.toggleRowSelection(f, false)
|
}
|
}
|
|
function handleSelectionChange(val) {
|
const deleted = selectedfusionData.value.filter((v) => {
|
return val.indexOf(v) == -1;
|
});
|
const deletedIdList = deleted.map((d) => d.id);
|
const added = val.filter((v) => {
|
return selectedfusionData.value.indexOf(v) == -1;
|
});
|
// const addedIdList = added.map(d=>d.id)
|
|
if (deletedIdList.length > 0) {
|
satelliteGrid.deleteTagGrid(deletedIdList);
|
gridCtrls.value = [satelliteGrid];
|
// satelliteGrid.changeVisibility({ tags: deletedIdList, showGridViews: false });
|
}
|
|
added.forEach((i) => {
|
const d = i;
|
gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
|
gridDataDetailMap.set(d.id, res.data);
|
const gdd = res.data;
|
satelliteGrid.drawTagGrid({
|
tag: d.id,
|
data: gdd,
|
extData: {
|
name: `走航网格 - ${d.mixDataId}`,
|
type: 0
|
}
|
});
|
satelliteGrid.setGridEvent(
|
[d.id],
|
'click',
|
(gridCell, gridDataDetail) => {
|
gridStore.selectedGridCellAndDataDetail = {
|
gridCell,
|
gridDataDetail
|
};
|
}
|
);
|
gridCtrls.value = [satelliteGrid];
|
});
|
});
|
|
selectedfusionData.value = val;
|
}
|
|
/**走航轨迹*******************************************************************/
|
import { FactorDatas } from '@/model/FactorDatas';
|
import sector from '@/utils/map/sector';
|
import mapLine from '@/utils/map/line';
|
import mapUtil from '@/utils/map/util';
|
import { fetchHistoryData } from '@/utils/factor/data';
|
import { useFetchData } from '@/composables/fetchData';
|
import { useMissionStore } from '@/stores/mission';
|
|
onMounted(() => {
|
isUnmounted.value = false;
|
fetchMission();
|
});
|
onUnmounted(() => {
|
mapUtil.clearMap();
|
isUnmounted.value = true;
|
});
|
const { loading, fetchData } = useFetchData(10000);
|
|
const missionStore = useMissionStore();
|
const missionLoading = ref(false);
|
|
const isUnmounted = ref(false);
|
|
const drawMode = ref(0);
|
// 监测数据
|
const factorDataMap = new Map();
|
// pm2.5
|
const factorType = 6;
|
|
function fetchMission() {
|
missionLoading.value = true;
|
missionStore.fetchMission().finally(() => (missionLoading.value = false));
|
}
|
|
function search(option) {
|
const { deviceType, deviceCode, startTime, endTime } = option;
|
const _startTime = moment(startTime).format('YYYY-MM-DD HH:mm:ss');
|
const _endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss');
|
return fetchData((page, pageSize) => {
|
return fetchHistoryData({
|
deviceType,
|
deviceCode,
|
startTime: _startTime,
|
endTime: _endTime,
|
page,
|
perPage: pageSize
|
});
|
});
|
}
|
|
function draw(dataId) {
|
if (isUnmounted.value) return;
|
|
// selectedfusionData.value.forEach((i) => {
|
// const d = fusionDataList.value[i];
|
|
// const mission = missionStore.missionList.find((v) => {
|
// return v.missionCode == d.mixDataId;
|
// });
|
|
// if (factorDataMap.has(mission.missionCode)) {
|
// const fd = factorDataMap.get(mission.missionCode);
|
// drawLine(mission.missionCode, fd);
|
// } else {
|
// search(mission).then((res) => {
|
// const fd = new FactorDatas();
|
// fd.setData(res.data, drawMode.value, () => {
|
// fd.refreshHeight(factorType.value);
|
// factorDataMap.set(mission.missionCode, fd);
|
// drawLine(mission.missionCode, fd);
|
// });
|
// });
|
// }
|
// });
|
|
const d = fusionDataList.value.find((v) => v.id == dataId);
|
const mission = missionStore.missionList.find((v) => {
|
return v.missionCode == d.mixDataId;
|
});
|
|
if (factorDataMap.has(mission.missionCode)) {
|
const fd = factorDataMap.get(mission.missionCode);
|
drawLine(mission.missionCode, fd);
|
} else {
|
search(mission).then((res) => {
|
const fd = new FactorDatas();
|
fd.setData(res.data, drawMode.value, () => {
|
fd.refreshHeight(factorType.value);
|
factorDataMap.set(mission.missionCode, fd);
|
drawLine(mission.missionCode, fd);
|
});
|
});
|
}
|
}
|
|
function drawLine(missionCode, fd) {
|
// 刷新图例
|
const factor = fd.factor[factorType];
|
sector.clearSector();
|
fd.refreshHeight(factorType);
|
mapLine.drawTagLine(missionCode, fd, factor);
|
}
|
</script>
|
<style scoped>
|
:deep(.el-table) {
|
--el-table-bg-color: transparent;
|
--el-table-row-hover-bg-color: var(--select_color);
|
--el-table-current-row-bg-color: var(--select_color);
|
/* --el-table-current-row-bg-color: #7dff5d96; */
|
--el-table-text-color: var(--font-color);
|
}
|
|
:deep(.t-row-normal) {
|
cursor: pointer;
|
background-color: transparent !important;
|
}
|
|
:deep(.t-cell) {
|
/* background: red !important; */
|
/* height: 40px;
|
border: 1px solid black; */
|
}
|
|
:deep(.t-header-row) {
|
}
|
|
:deep(.t-header-cell) {
|
background-color: var(--bg-color-2) !important;
|
/* text-align: center !important; */
|
color: white !important;
|
}
|
</style>
|
