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 | 521 ++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 367 insertions(+), 154 deletions(-) diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue index c0dbe9b..2ed90d6 100644 --- a/src/views/underwaymix/UnderwayMixMode.vue +++ b/src/views/underwaymix/UnderwayMixMode.vue @@ -8,7 +8,7 @@ <template #content> <el-row> <el-form :inline="true"> - <el-form-item label="璧拌埅铻嶅悎"> + <!-- <el-form-item label="璧拌埅铻嶅悎"> <el-select v-model="selectedfusionData" multiple @@ -26,8 +26,8 @@ :value="i" /> </el-select> - </el-form-item> - <el-form-item> + </el-form-item> --> + <!-- <el-form-item> <el-button type="primary" class="el-button-custom" @@ -37,94 +37,148 @@ " @click="handleFusionClick" > - {{ '鍙犲姞铻嶅悎' }} + {{ '鍙犲姞璧拌埅' }} </el-button> - </el-form-item> + </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-row class="m-t-8"> + <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="闅愯棌铻嶅悎" + active-text="铻嶅悎鍒嗘瀽" :default-value="false" @change="handleMixClick" > </CheckButton> - <CheckButton - :disabled="!mixActive" - active-text="椋庨櫓鐑姏鍥�" - inactive-text="椋庨櫓鐑姏鍥�" - :default-value="false" - @change="handleHeatMapClick" - > - </CheckButton> - <!-- <CheckButton - active-text="鎼滅储缃戞牸" - inactive-text="鎼滅储缃戞牸" - :default-value="false" - @change="handleHeatMapSearchClick" - > - </CheckButton> --> - </el-row> - <!-- <div class="m-t-8">缃戞牸瑕佺礌</div> - <el-row class="m-t-8"> - <CheckButton - active-text="鏄剧ず缃戞牸" - inactive-text="闅愯棌缃戞牸" - :default-value="true" - @change="handleGridClick" - > - </CheckButton> - <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-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-button - type="primary" - class="el-button-custom" - size="small" - :loading="missionLoading || loading" - @click="handleUnderwayClick" - > - {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }} - </el-button> - </el-row> --> + </el-space> </template> <template #footer> </template> </BaseCard> @@ -143,6 +197,7 @@ <GridStyleTool :gridCtrls="gridCtrls" @show-underway="handleUnderwayClick" + @on-delete="handleFusionDelete" ></GridStyleTool> </el-row> <!-- </div> --> @@ -178,8 +233,131 @@ 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); @@ -190,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() { @@ -215,15 +393,6 @@ // } // }); // } - -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, (polygon) => { @@ -281,7 +450,8 @@ // 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)) { satelliteGrid.changeVisibility({ tags: [d.id], showGridViews: true }); // gridCtrls.value = Array.from(satelliteGrid.mapViewsMap); @@ -319,9 +489,7 @@ let mixTag; function handleMixClick() { mixActive.value = !mixActive.value; - const tags = fusionDataList.value - .filter((v, i) => selectedfusionData.value.indexOf(i) != -1) - .map((v) => v.id); + const tags = selectedfusionData.value.map((v) => v.id); satelliteGrid.changeVisibility({ showGridViews: false, showDataTxt: false, @@ -357,18 +525,34 @@ showRankTxt: false }); if (heatActive.value) { - heatTag = satelliteGrid.drawHeatGrid(mixTag); - satelliteGrid.setGridEvent( - [heatTag], - 'click', - (gridCell, gridDataDetail) => { - gridStore.selectedGridCellAndDataDetail = { - gridCell, - gridDataDetail - }; - } - ); - gridCtrls.value = [satelliteGrid]; + // 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], @@ -394,17 +578,6 @@ console.log(res); } -function handleGridClick() { - gridVisible.value = !gridVisible.value; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; - satelliteGrid.changeVisibility({ - tags: [d.id], - showGridViews: gridVisible.value - }); - }); -} - function handleUnderwayClick({ isShow, dataId }) { underwayVisible.value = !underwayVisible.value; @@ -418,47 +591,59 @@ mapLine.hideLine(mission.missionCode); } } - -function handleRankClick() { - rankVisible.value = !rankVisible.value; - selectedfusionData.value.forEach((i) => { - const d = fusionDataList.value[i]; - satelliteGrid.changeVisibility({ - tags: [d.id], - showRankTxt: rankVisible.value - }); - }); +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({ - tags: [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)) { - satelliteGrid.changeGridColor({ + 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, - 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; } /**璧拌埅杞ㄨ抗*******************************************************************/ @@ -565,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