From c7a16ca1b6fbcb0b82a4a09c2e75014624082e37 Mon Sep 17 00:00:00 2001 From: Riku <risaku@163.com> Date: 星期四, 27 三月 2025 22:45:48 +0800 Subject: [PATCH] 修复走航融合功能bug --- src/views/underwaymix/UnderwayMixMode.vue | 793 +++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 587 insertions(+), 206 deletions(-) diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue index bad7c78..2ed90d6 100644 --- a/src/views/underwaymix/UnderwayMixMode.vue +++ b/src/views/underwaymix/UnderwayMixMode.vue @@ -1,133 +1,220 @@ <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" - class="w-250" - :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-row class="m-t-8"> - <el-button - type="primary" - class="el-button-custom" + <!-- <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" - @click="handleGridClick" + style="width: 300px" > - {{ gridVisible ? '闅愯棌铻嶅悎' : '鏄剧ず铻嶅悎' }} - </el-button> - <el-button - type="primary" - class="el-button-custom" + <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" - @click="handleRankClick" + style="width: 300px" > - {{ rankVisible ? '闅愯棌鎺掑悕' : '鏄剧ず鎺掑悕' }} - </el-button> - <el-button - type="primary" - class="el-button-custom" + <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" - @click="handleDataClick" + style="width: 300px" > - {{ dataVisible ? '闅愯棌鏁版嵁' : '鏄剧ず鏁版嵁' }} - </el-button> - </el-row> - <div class="m-t-8">缃戞牸鏍峰紡</div> - <el-row class="m-t-8"> - <el-button - type="primary" - class="el-button-custom" - size="small" - @click="handleOpacityClick" - > - {{ !isOpacity ? '閫忔槑鍖�' : '鍙栨秷閫忔槑鍖�' }} - </el-button> - <el-button - type="primary" - class="el-button-custom" - size="small" - @click="handleColorClick" - > - {{ isStandardColor ? '缁樺埗瀵规瘮鑹�' : '缁樺埗鏍囧噯鑹�' }} - </el-button> - </el-row> - <div class="m-t-8">璧拌埅瑕佺礌</div> - <el-row class="m-t-8"> - <!-- <el-divider content-position="left"></el-divider> --> + <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> - <el-button - type="primary" - class="el-button-custom" - size="small" - :loading="missionLoading || loading" - @click="handleUnderwayClick" - > - {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }} - </el-button> - </el-row> - </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> + <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> - </div> + <GridStyleTool + :gridCtrls="gridCtrls" + @show-underway="handleUnderwayClick" + @on-delete="handleFusionDelete" + ></GridStyleTool> + </el-row> + <!-- </div> --> </template> <script setup> -import { ref, onMounted, onUnmounted, watch } from 'vue'; +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 satelliteGrid = new SatelliteGrid(); +const gridStore = useGridStore(); + +const satelliteGrid = new SatelliteGrid('璧拌埅铻嶅悎'); +const gridCtrls = ref([satelliteGrid]); // 鍊熺敤鍗槦閬ユ祴妯″潡涓殑100绫崇綉鏍� const props = defineProps({ @@ -146,9 +233,134 @@ 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); @@ -156,8 +368,8 @@ const isStandardColor = ref(true); const isOpacity = ref(false); -function timeFormatter(value) { - return moment(value).format('YYYY-MM-DD'); +function timeFormatter(row, col, cellValue, index) { + return moment(cellValue).format('YYYY-MM-DD'); } function fetchFusionData() { @@ -182,22 +394,33 @@ // }); // } -function resetButton() { - gridVisible.value = true; - underwayVisible.value = false; - rankVisible.value = false; - dataVisible.value = false; - isStandardColor.value = true; - isOpacity.value = false; -} - function prepareGrid(gridInfo) { - satelliteGrid.gridPrepare(gridInfo); -} - -// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊 -function drawGrid(gridDataDetail) { - satelliteGrid.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 }); + 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) => { @@ -227,89 +450,200 @@ // resetButton(); satelliteGrid.changeVisibility({ showGridViews: false }); selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; + // const d = fusionDataList.value[i]; + const d = i; if (gridDataDetailMap.has(d.id)) { - // const gdd = gridDataDetailMap.get(d.id); - // satelliteGrid.drawTagGrid({ - // tag: d.id, - // gridDataDetail: gdd, - // opacity: 1, - // zIndex: 11 - // }); - satelliteGrid.changeVisibility({ tag: d.id, showGridViews: true }); + 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, - gridDataDetail: gdd, - opacity: 1, - zIndex: 11 + 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); }); } }); } -function handleGridClick() { - gridVisible.value = !gridVisible.value; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; - satelliteGrid.changeVisibility({ - tag: d.id, - showGridViews: gridVisible.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 + }); + } } -function handleUnderwayClick() { +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; - underwayVisible.value ? draw() : mapLine.hideLine(); -} -function handleRankClick() { - rankVisible.value = !rankVisible.value; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; - satelliteGrid.changeVisibility({ - tag: d.id, - showRankTxt: rankVisible.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 handleDataClick() { - dataVisible.value = !dataVisible.value; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; - satelliteGrid.changeVisibility({ - tag: d.id, - showDataTxt: dataVisible.value - }); +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) -function handleColorClick() { - isStandardColor.value = !isStandardColor.value; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; - if (gridDataDetailMap.has(d.id)) { - const gdd = gridDataDetailMap.get(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, - gridDataDetail: gdd, - useCustomColor: !isStandardColor.value, - opacity: 1, - zIndex: 11 + data: gdd, + extData: { + name: `璧拌埅缃戞牸 - ${d.mixDataId}`, + type: 0 + } }); - } + satelliteGrid.setGridEvent( + [d.id], + 'click', + (gridCell, gridDataDetail) => { + gridStore.selectedGridCellAndDataDetail = { + gridCell, + gridDataDetail + }; + } + ); + gridCtrls.value = [satelliteGrid]; + }); }); -} -function handleOpacityClick() { - isOpacity.value = !isOpacity.value; - satelliteGrid.changeGridOpacity({ opacityValue: isOpacity.value ? 0.1 : 1 }); + selectedfusionData.value = val; } /**璧拌埅杞ㄨ抗*******************************************************************/ @@ -363,30 +697,49 @@ }); } -function draw() { +function draw(dataId) { if (isUnmounted.value) return; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; + // selectedfusionData.value.forEach((i) => { + // const d = fusionDataList.value[i]; - const mission = missionStore.missionList.find((v) => { - return v.missionCode == d.mixDataId; - }); + // 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); - }); - }); - } + // 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) { @@ -397,4 +750,32 @@ mapLine.drawTagLine(missionCode, fd, factor); } </script> -<style scoped></style> +<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