Riku
2025-03-27 c7a16ca1b6fbcb0b82a4a09c2e75014624082e37
src/views/underwaymix/UnderwayMixMode.vue
@@ -42,7 +42,9 @@
                  </el-form-item> -->
                </el-form>
              </el-row>
              <div class="m-t-8">筛选辅助</div>
              <el-row class="m-t-8" justify="space-between">
                <span>融合分析</span>
              </el-row>
              <el-form :inline="false">
                <el-form-item label="时段筛选">
                  <el-select
@@ -96,11 +98,15 @@
                  </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="small"
                size="default"
                :show-overflow-tooltip="true"
                border
                height="50vh"
@@ -112,7 +118,17 @@
                @row-click="handleRowClick"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="40" />
                <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="序号"
@@ -123,7 +139,7 @@
                  label="时间"
                  align="center"
                  :formatter="timeFormatter"
                  width="100"
                  width="120"
                />
                <el-table-column
                  prop="missionCode"
@@ -141,13 +157,13 @@
                  prop="pollutionDegree"
                  label="污染背景"
                  align="center"
                  width="50"
                  width="70"
                />
              </el-table>
              <div class="m-t-8">操作</div>
              <el-space class="m-t-8 m-b-8">
                <el-button
                <!-- <el-button
                  type="primary"
                  class="el-button-custom"
                  size="small"
@@ -155,10 +171,9 @@
                  @click="handleFusionClick"
                >
                  {{ '叠加走航' }}
                </el-button>
                </el-button> -->
                <CheckButton
                  active-text="开启融合"
                  inactive-text="隐藏融合"
                  active-text="融合分析"
                  :default-value="false"
                  @change="handleMixClick"
                >
@@ -182,6 +197,7 @@
    <GridStyleTool
      :gridCtrls="gridCtrls"
      @show-underway="handleUnderwayClick"
      @on-delete="handleFusionDelete"
    ></GridStyleTool>
  </el-row>
  <!-- </div> -->
@@ -217,6 +233,8 @@
const fusionLoading = ref(false);
const fusionDataList = ref([]);
const selectedfusionData = ref([]);
const tableRef = ref()
const selectable = (row) => gridCellList.value;
const gridDataDetailMap = new Map();
@@ -225,34 +243,86 @@
const selectedPollutionDegree = ref([]);
const timeSectionList = computed(() => {
  const res = [];
  let res = [];
  fusionDataList.value.forEach((e) => {
    const t = moment(e.dataTime).format('YYYY-MM-DD');
    if (res.indexOf(t) == -1) {
      res.push(t);
    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(() => {
  const res = [];
  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(() => {
  const res = [];
  let res = [];
  fusionDataList.value.forEach((e) => {
    const t = e.pollutionDegree;
    if (res.indexOf(t) == -1) {
      res.push(t);
    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;
});
@@ -261,9 +331,7 @@
  return fusionDataList.value.filter((v) => {
    const b1 =
      selectedTimeSection.value.length == 0 ||
      selectedTimeSection.value.indexOf(
        moment(v.dataTime).format('YYYY-MM-DD')
      ) != -1;
      selectedTimeSection.value.indexOf(v.dayTimePeriod) != -1;
    const b2 =
      selectedZone.value.length == 0 ||
      selectedZone.value.indexOf(v.zone) != -1;
@@ -421,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,
@@ -525,8 +591,58 @@
    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 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)
  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,
        data: gdd,
        extData: {
          name: `走航网格 - ${d.mixDataId}`,
          type: 0
        }
      });
      satelliteGrid.setGridEvent(
        [d.id],
        'click',
        (gridCell, gridDataDetail) => {
          gridStore.selectedGridCellAndDataDetail = {
            gridCell,
            gridDataDetail
          };
        }
      );
      gridCtrls.value = [satelliteGrid];
    });
  });
  selectedfusionData.value = val;
}