完成走航融合模块

riku

2025-04-17 9ca85dc3bd39864daf9528d746f4bc6a0963a4c0

 src/views/underwaymix/UnderwayMixMode.vue

@@ -57,7 +57,7 @@
                  v-model="selectedPollutionDegree"
                  multiple
                  clearable
                  placeholder="选择背景"
                  placeholder="选择污染背景"
                  size="small"
                  style="width: 300px"
                >
@@ -154,8 +154,17 @@
                class="el-button-custom"
                size="small"
                @click="handleMixClick"
                :disabled="selectedfusionData.length < 2"
              >
                {{ '融合分析' }}
              </el-button>
              <el-button
                type="primary"
                class="el-button-custom"
                size="small"
                @click="underwayMixDialogVisible = true"
              >
                {{ '融合管理' }}
              </el-button>
              <!-- <CheckButton
                active-text="融合分析"
@@ -179,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>

@@ -193,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();

@@ -209,7 +229,7 @@
const props = defineProps({
  groupId: {
    type: Number,
    default: 3
    default: 2
  }
});
const show = ref(true);
@@ -217,20 +237,26 @@
// 监测因子的类型编号
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);
// 走航融合数据
const fusionLoading = ref(false);
const fusionDataList = ref([]);

const lastSelectedfusionData = ref([]);
const selectedfusionData = ref([]);
const tableRef = ref();
const selectable = (row) => gridCellList.value;
@@ -390,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(
@@ -459,7 +455,7 @@
          tag: d.id,
          data: gdd,
          extData: {
            name: `走航网格 - ${d.mixDataId}`,
            name: `走航网格 - ${d.missionCode}`,
            type: 0
          }
        });
@@ -482,59 +478,17 @@

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) {
  gridApi.mixUnderwayGridData(props.groupId, tags).then((res) => {
    mixTag = satelliteGrid.mixGrid2({ tags, gridDataDetailList: res.data });
    satelliteGrid.setDefaultGridClickEvent([mixTag]);
    gridCtrls.value = [satelliteGrid];
  });

  // satelliteGrid.setGridEvent([mixTag], 'click', (gridCell, gridDataDetail) => {
  //   gridStore.selectedGridCellAndDataDetail = {
  //     gridCell,
  //     gridDataDetail
  //   };
  // });
  // gridCtrls.value = [satelliteGrid];
  // } else {
  // satelliteGrid.changeVisibility({
  //   tags,
  //   showGridViews: true
  // });
  // }
}

let heatTag;
const heatMapSearchLength = 4;
function handleHeatMapClick() {
  heatActive.value = !heatActive.value;
  satelliteGrid.changeVisibility({
    showGridViews: false,
    showDataTxt: false,
    showRankTxt: false
  });
  if (heatActive.value) {
    const data = satelliteGrid.gridDataDetailMap.get(mixTag);
    gridApi
      .buildUnderwayHeatmap(props.groupId, data, heatMapSearchLength)
      .then((res) => {
        heatTag = satelliteGrid.drawHeatGrid2(mixTag, res.data);
        satelliteGrid.setDefaultGridClickEvent([heatTag]);
        gridCtrls.value = [satelliteGrid];
      });
  } else {
    satelliteGrid.changeVisibility({
      tags: [mixTag],
      showGridViews: true
    });
  }
}

function handleHeatMapSearchClick() {
@@ -562,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();
@@ -571,21 +525,24 @@
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);
    const i = selectedfusionData.value.indexOf(f);
    selectedfusionData.value.splice(i, 1);
    lastSelectedfusionData.value = useCloned(
      selectedfusionData.value
    ).cloned.value;
    tableRef.value.toggleRowSelection(f, false);
  }
}

function handleSelectionChange(val) {
  console.log(val);
  // console.log(val);

  const deleted = selectedfusionData.value.filter((v) => {
  const deleted = lastSelectedfusionData.value.filter((v) => {
    return !val.find((t) => t.id == v.id);
  });
  const deletedIdList = deleted.map((d) => d.id);
  const added = val.filter((v) => {
    return !selectedfusionData.value.find((t) => t.id == v.id);
    return !lastSelectedfusionData.value.find((t) => t.id == v.id);
  });

  if (val.length > 4) {
@@ -614,7 +571,7 @@
        tag: d.id,
        data: gdd,
        extData: {
          name: `走航网格 - ${d.mixDataId}`,
          name: `走航网格 - ${d.missionCode}`,
          type: 0
        }
      });
@@ -638,7 +595,7 @@
          tag: d.id,
          data: gdd,
          extData: {
            name: `走航网格 - ${d.mixDataId}`,
            name: `走航网格 - ${d.missionCode}`,
            type: 0
          }
        });
@@ -658,7 +615,8 @@
    }
  });

  selectedfusionData.value = useCloned(val).cloned.value;
  lastSelectedfusionData.value = useCloned(val).cloned.value;
  selectedfusionData.value = val;
}

/**走航轨迹*******************************************************************/
@@ -714,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)) {
@@ -742,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);