<template>
|
<CardDialog
|
v-model="dialogVisible"
|
title="走航融合"
|
draggable
|
:modal="false"
|
width="400px"
|
>
|
<template #default>
|
<el-row>
|
<OptionMission v-model="mission"></OptionMission>
|
<el-text size="small" :type="fusionData ? 'success' : 'warning'">{{
|
fusionData ? '走航数据已融合' : '走航数据未融合'
|
}}</el-text>
|
</el-row>
|
<el-row>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
:disabled="!gridCellList || !fusionData"
|
@click="handleFusionClick"
|
>
|
{{ '叠加融合' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleGridClick"
|
>
|
{{ gridVisible ? '隐藏融合' : '显示融合' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
:loading="loading"
|
@click="handleUnderwayClick"
|
>
|
{{ underwayVisible ? '隐藏走航路线' : '显示走航路线' }}
|
</el-button>
|
</el-row>
|
<el-row class="m-t-8">
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleRankClick"
|
>
|
{{ rankVisible ? '隐藏排名' : '显示排名' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleDataClick"
|
>
|
{{ dataVisible ? '隐藏数据' : '显示数据' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleColorClick"
|
>
|
{{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleOpacityClick"
|
>
|
{{ !isOpacity ? '透明化' : '取消透明化' }}
|
</el-button>
|
</el-row>
|
</template>
|
<template #footer>
|
<el-row justify="start" align="middle" class="p-b-2 one-row">
|
<!-- <el-text size="small" type="warning">搜索范围</el-text> -->
|
</el-row>
|
</template>
|
</CardDialog>
|
</template>
|
<script setup>
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
import moment from 'moment';
|
import { map, onMapMounted } from '@/utils/map/index_old';
|
import gridApi from '@/api/gridApi';
|
import SatelliteProxy from '../SatelliteProxy';
|
|
const props = defineProps({
|
groupId: {
|
type: Number,
|
default: 3
|
}
|
});
|
|
const dialogVisible = ref(true);
|
const mission = ref(undefined);
|
|
const gridCellList = ref(undefined);
|
const fusionData = ref(undefined);
|
const gridDataDetailMap = new Map();
|
|
const gridVisible = ref(true);
|
const underwayVisible = ref(false);
|
const rankVisible = ref(false);
|
const dataVisible = ref(false);
|
const isStandardColor = ref(true);
|
const isOpacity = ref(false);
|
|
// 地图网格相关对象
|
let mapViews;
|
|
// 检查走航数据是否和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 drawGrid(gridInfo) {
|
SatelliteProxy.clearAll(mapViews);
|
mapViews = SatelliteProxy.drawPolyline(gridInfo);
|
}
|
|
// 绘制网格遥感数据值和网格颜色
|
function drawTextAndColor(gridData) {
|
const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
|
gridViews: mapViews.gridViews,
|
points: mapViews.points,
|
gridDataDetail: gridData,
|
lastGridViews: mapViews.lastGridViews,
|
opacity: 1,
|
zIndex: 11
|
});
|
mapViews.lastGridViews = resGridViews;
|
mapViews.lastPoints = pointsRes;
|
// 文本标记
|
const { textViews: dataTxt, labelsLayer: dataLayer } =
|
SatelliteProxy.drawDataText(
|
mapViews.lastPoints,
|
gridData,
|
mapViews.dataTxt,
|
mapViews.dataLayer
|
);
|
mapViews.dataTxt = dataTxt;
|
mapViews.dataLayer = dataLayer;
|
const { textViews: rankTxt, labelsLayer: rankLayer } =
|
SatelliteProxy.drawRankText(
|
mapViews.lastPoints,
|
gridData,
|
mapViews.rankTxt,
|
mapViews.rankLayer
|
);
|
mapViews.rankTxt = rankTxt;
|
mapViews.rankLayer = rankLayer;
|
}
|
|
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;
|
drawGrid(gridCellList.value);
|
});
|
}
|
},
|
{
|
immediate: true
|
}
|
);
|
|
let selectedGridData;
|
// 叠加融合
|
function handleFusionClick() {
|
const d = fusionData.value;
|
if (gridDataDetailMap.has(d.id)) {
|
const gridData = gridDataDetailMap.get(d.id);
|
selectedGridData = gridData;
|
drawTextAndColor(gridData);
|
} else {
|
gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
|
gridDataDetailMap.set(d.id, res.data);
|
const gridData = res.data;
|
selectedGridData = gridData;
|
drawTextAndColor(gridData);
|
});
|
}
|
}
|
|
function handleGridClick() {
|
gridVisible.value = !gridVisible.value;
|
gridVisible.value
|
? map.add(mapViews.lastGridViews)
|
: map.remove(mapViews.lastGridViews);
|
}
|
|
function handleUnderwayClick() {
|
underwayVisible.value = !underwayVisible.value;
|
underwayVisible.value ? draw() : mapLine.hideLine();
|
}
|
|
function handleRankClick() {
|
rankVisible.value = !rankVisible.value;
|
rankVisible.value ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
|
}
|
|
function handleDataClick() {
|
dataVisible.value = !dataVisible.value;
|
dataVisible.value ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
|
}
|
|
function handleColorClick() {
|
isStandardColor.value = !isStandardColor.value;
|
const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
|
gridViews: mapViews.gridViews,
|
points: mapViews.points,
|
gridDataDetail: selectedGridData,
|
lastGridViews: mapViews.lastGridViews,
|
customColor: !isStandardColor.value,
|
opacity: 1,
|
zIndex: 11
|
});
|
mapViews.lastGridViews = resGridViews;
|
mapViews.lastPoints = pointsRes;
|
}
|
|
function handleOpacityClick() {
|
isOpacity.value = !isOpacity.value;
|
mapViews.lastGridViews.forEach((e) => {
|
e.setOptions({
|
fillOpacity: isOpacity.value ? 0.1 : 1
|
});
|
});
|
}
|
|
/**走航轨迹*******************************************************************/
|
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';
|
|
onMounted(() => (isUnmounted.value = false));
|
onUnmounted(() => {
|
mapUtil.clearMap();
|
isUnmounted.value = true;
|
});
|
|
const { loading, fetchData } = useFetchData(10000);
|
|
const isUnmounted = ref(false);
|
const deviceType = ref(undefined);
|
const drawMode = ref(0);
|
// 监测数据
|
const factorDatas = ref(new FactorDatas());
|
// pm2.5
|
const factorType = 6;
|
|
function onFetchData(dType, data) {
|
if (isUnmounted.value) return;
|
// todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
|
deviceType.value = dType;
|
factorDatas.value.setData(data, drawMode.value, () => {
|
factorDatas.value.refreshHeight(factorType.value);
|
});
|
}
|
|
function search(option) {
|
const { deviceType, deviceCode, startTime, endTime } = option;
|
// deviceType.value = deviceType;
|
// deviceCode.value = deviceCode;
|
const _startTime = moment(startTime).format('YYYY-MM-DD HH:mm:ss');
|
const _endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss');
|
fetchData((page, pageSize) => {
|
return fetchHistoryData({
|
deviceType,
|
deviceCode,
|
startTime: _startTime,
|
endTime: _endTime,
|
page,
|
perPage: pageSize
|
}).then((res) => onFetchData(deviceType, res.data));
|
});
|
}
|
|
function draw() {
|
// 刷新图例
|
const factor = factorDatas.value.factor[factorType];
|
sector.clearSector();
|
factorDatas.value.refreshHeight(factorType);
|
mapLine.drawLine(factorDatas.value, factor);
|
}
|
</script>
|
