调试自动生成网格融合图片功能（待完成）

riku

2025-09-03 b2392458ebf42594b9fc5390fda40d7a0a12f923

 src/views/underwaymix/UnderwayMixMode.vue

@@ -128,13 +128,13 @@
                prop="zone"
                label="区域"
                align="center"
                width="50"
                width="60"
              />
              <el-table-column
                prop="pollutionDegree"
                label="污染背景"
                align="center"
                width="70"
                width="66"
              />
            </el-table>

@@ -158,6 +158,14 @@
              >
                {{ '融合分析' }}
              </el-button>
              <el-button
                type="primary"
                class="el-button-custom"
                size="small"
                @click="underwayMixDialogVisible = true"
              >
                {{ '融合管理' }}
              </el-button>
              <!-- <CheckButton
                active-text="融合分析"
                :default-value="false"
@@ -180,12 +188,21 @@
        <!-- </el-row> -->
      </el-col>
    </el-row>
    <GridStyleTool
      :gridCtrls="gridCtrls"
      @show-underway="handleUnderwayClick"
      @on-delete="handleFusionDelete"
    ></GridStyleTool>
  </el-row>
  <GridStyleTool
    class="style-tool"
    :gridCtrls="gridCtrls"
    @show-underway="handleUnderwayClick"
    @on-delete="handleFusionDelete"
  ></GridStyleTool>
  <!-- <el-row class="m-t-2">
    <FactorLegend class="m-t-2" @change="handleLegendTypeChange"></FactorLegend>
  </el-row> -->
  <UnderwayMixManage
    :groupId="groupId"
    v-model="underwayMixDialogVisible"
    @onUpdated="fetchFusionData"
  ></UnderwayMixManage>
  <!-- </div> -->
</template>

@@ -194,12 +211,14 @@
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';
import { TYPE0 } from '@/constant/device-type';
import { defaultOptions } from '@/constant/radio-options';
import { useMessageBox } from '@/composables/messageBox';
import { useCloned } from '@vueuse/core';

import GridStyleTool from './component/GridStyleTool.vue';
import UnderwayMixManage from './component/UnderwayMixManage.vue';

const gridStore = useGridStore();

@@ -210,7 +229,7 @@
const props = defineProps({
  groupId: {
    type: Number,
    default: 3
    default: import.meta.env.VITE_DATA_MODE == 'jingan' ? 2 : 3
  }
});
const show = ref(true);
@@ -218,14 +237,18 @@
// 监测因子的类型编号
const factorType = ref(defaultOptions(TYPE0));
satelliteGrid.setShowFactorType(toRaw(factorType.value));
// const factor = computed(()=>{

// })

function handleFactorTypeChange(e, item) {
  factorType.value = item;
  console.log(toRaw(factorType.value));
  // console.log(toRaw(factorType.value));
  satelliteGrid.setShowFactorType(toRaw(factorType.value));
}

const mission = ref(undefined);
const underwayMixDialogVisible = ref(false);

const gridCellList = ref(undefined);
const fusionData = ref(undefined);
@@ -393,38 +416,8 @@
    .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, function (polygon) {
    // const originOption = polygon.getOptions();
    // //鼠标移入事件
    // polygon.on('mouseover', () => {
    //   polygon.setOptions({
    //     //修改多边形属性的方法
    //     strokeWeight: 2,
    //     strokeColor: 'red'
    //   });
    // });
    // //鼠标移出事件
    // polygon.on('mouseout', () => {
    //   // polygon.setOptions({
    //   //   strokeWeight: originOption.strokeWeight,
    //   //   strokeColor: originOption.strokeColor
    //   // });
    //   polygon.setOptions(originOption);
    // });
  });
  satelliteGrid.gridPrepare(gridInfo);
}

watch(
@@ -462,7 +455,7 @@
          tag: d.id,
          data: gdd,
          extData: {
            name: `走航网格 - ${d.mixDataId}`,
            name: `走航网格 - ${d.missionCode}`,
            type: 0
          }
        });
@@ -523,7 +516,7 @@
  } else {
    const d = fusionDataList.value.find((v) => v.id == dataId);
    const mission = missionStore.missionList.find((v) => {
      return v.missionCode == d.mixDataId;
      return v.missionCode == d.missionCode;
    });
    mapLine.hideLine(mission.missionCode);
    done();
@@ -578,7 +571,7 @@
        tag: d.id,
        data: gdd,
        extData: {
          name: `走航网格 - ${d.mixDataId}`,
          name: `走航网格 - ${d.missionCode}`,
          type: 0
        }
      });
@@ -602,7 +595,7 @@
          tag: d.id,
          data: gdd,
          extData: {
            name: `走航网格 - ${d.mixDataId}`,
            name: `走航网格 - ${d.missionCode}`,
            type: 0
          }
        });
@@ -679,7 +672,7 @@
  if (isUnmounted.value) return Promise.resolve();
  const d = fusionDataList.value.find((v) => v.id == dataId);
  const mission = missionStore.missionList.find((v) => {
    return v.missionCode == d.mixDataId;
    return v.missionCode == d.missionCode;
  });

  if (factorDataMap.has(mission.missionCode)) {
@@ -707,6 +700,12 @@
}
</script>
<style scoped>
.style-tool {
  position: absolute;
  top: 0;
  right: 0;
}

:deep(.el-table) {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: var(--select_color);