From 90671325090a58b0dfc91dac6a84b1c2a09eaac7 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 27 三月 2025 17:29:27 +0800
Subject: [PATCH] 修复绘制轨迹线时，上一组数据没有清除的问题
---
src/views/underwaymix/UnderwayMixMode.vue | 665 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 662 insertions(+), 3 deletions(-)
diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue
index a26096a..460355c 100644
--- a/src/views/underwaymix/UnderwayMixMode.vue
+++ b/src/views/underwaymix/UnderwayMixMode.vue
@@ -1,6 +1,665 @@
<template>
- <div class="p-events-none m-t-2"></div>
+ <!-- <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>
+ <div class="m-t-8">绛涢�夎緟鍔�</div>
+ <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>
+
+ <el-table
+ :data="showFusionDataList"
+ table-layout="fixed"
+ size="small"
+ :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 type="selection" width="40" />
+ <!-- <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="30"
+ /> -->
+ <el-table-column
+ prop="dataTime"
+ label="鏃堕棿"
+ align="center"
+ :formatter="timeFormatter"
+ width="100"
+ />
+ <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="50"
+ />
+ </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="寮�鍚瀺鍚�"
+ inactive-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"
+ ></GridStyleTool>
+ </el-row>
+ <!-- </div> -->
</template>
-<script setup></script>
-<style scoped></style>
+<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 gridDataDetailMap = new Map();
+
+const selectedTimeSection = ref([]);
+const selectedZone = ref([]);
+const selectedPollutionDegree = ref([]);
+
+const timeSectionList = computed(() => {
+ const res = [];
+ fusionDataList.value.forEach((e) => {
+ const t = moment(e.dataTime).format('YYYY-MM-DD');
+ if (res.indexOf(t) == -1) {
+ res.push(t);
+ }
+ });
+ return res;
+});
+
+const zoneList = computed(() => {
+ const res = [];
+ fusionDataList.value.forEach((e) => {
+ const t = e.zone;
+ if (res.indexOf(t) == -1) {
+ res.push(t);
+ }
+ });
+ return res;
+});
+
+const pollutionDegreeList = computed(() => {
+ const res = [];
+ fusionDataList.value.forEach((e) => {
+ const t = e.pollutionDegree;
+ if (res.indexOf(t) == -1) {
+ res.push(t);
+ }
+ });
+ return res;
+});
+
+const showFusionDataList = computed(() => {
+ return fusionDataList.value.filter((v) => {
+ const b1 =
+ selectedTimeSection.value.length == 0 ||
+ selectedTimeSection.value.indexOf(
+ moment(v.dataTime).format('YYYY-MM-DD')
+ ) != -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 = fusionDataList.value
+ .filter((v, i) => selectedfusionData.value.indexOf(i) != -1)
+ .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 handleSelectionChange(val) {
+ 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>
--
Gitblit v1.9.3