修复网格样式中删除一组数据后，表格没有联动的问题

feiyu02

2025-03-28 25570a9ecd9b10a865fd7ce2614410814aaf52eb

 src/views/underwaymix/component/GridStyleTool.vue

@@ -12,53 +12,133 @@
    <el-col span="2">
      <BaseCard v-show="show" direction="right" borderless="r">
        <template #content>
          <div class="content-wrap">
          <el-scrollbar class="content-wrap">
            <div v-for="(g, i) in gridCtrlList" :key="i">
              {{ g.name }}
              <span>{{ g.name }}</span>
              <div v-for="(value, t) in g.views" :key="t">
                <!-- {{ value[0] }} -->
                {{ value[1].extData.name }}
                <el-row justify="space-between" align="middle">
                  <div>
                    <span v-if="value.extData.type == 0">{{
                      value.tag + '.'
                    }}</span>
                    {{ value.extData.name }}
                  </div>
                  <el-button
                    class="el-button-custom"
                    type="primary"
                    icon="Close"
                    circle
                    size="small"
                    @click="handleCloseClick(i, t, value)"
                  />
                  <!-- <el-icon><Close /></el-icon> -->
                </el-row>

                <!-- {{ key }} -->
                <!-- <el-text>{{ g.name }}</el-text> -->
                <!-- <div class="m-t-8">网格要素</div> -->
                <el-row class="m-t-8">
                <el-row class="m-t-8" justify="space-between">
                  <!-- <el-button
                    type="primary"
                    class="el-button-custom"
                    size="small"
                    @click="gridLoading = !gridLoading"
                  >
                    {{ '融合分析' }}
                  </el-button> -->
                  <CheckButton
                    :loading="gridLoading"
                    v-model="value.show"
                    active-text="显示网格"
                    inactive-text="隐藏网格"
                    :default-value="true"
                    @change="handleGridClick"
                    @change="(e) => handleGridClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    :loading="rankLoading"
                    v-model="value.showRank"
                    active-text="显示排名"
                    inactive-text="隐藏排名"
                    :default-value="false"
                    @change="handleGridClick"
                    @change="(e) => handleRankClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    :loading="dataLoading"
                    v-model="value.showData"
                    active-text="显示数据"
                    inactive-text="隐藏数据"
                    :default-value="false"
                    @change="handleGridClick"
                    @change="(e) => handleDataClick(e, i, value)"
                  >
                  </CheckButton>
                </el-row>
                <el-row class="m-b-8" gap="2">
                  <div class="m-t-8">网格透明度</div>
                <el-row class="m-t-8" justify="space-between">
                  <CheckButton
                    :loading="colorLoading"
                    v-model="value.showCustomColor"
                    active-text="绘制对比色"
                    inactive-text="绘制标准色"
                    :default-value="false"
                    @change="(e) => handleColorClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    :loading="heatMapLoading"
                    v-model="value.showHeatMap"
                    active-text="风险热力图"
                    inactive-text="风险热力图"
                    :default-value="false"
                    @change="(e) => handleHeatMapClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    :loading="underwayLoading"
                    v-if="value.extData.type == 0"
                    v-model="value.showUnderway"
                    active-text="显示走航轨迹"
                    inactive-text="隐藏走航轨迹"
                    :default-value="false"
                    @change="(e) => handleUnderwayClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    :loading="highlightLoading"
                    v-if="value.extData.type == 1"
                    v-model="value.highlightFusionGrid"
                    active-text="高亮融合网格"
                    :default-value="true"
                    @change="(e) => handleHighlightGridClick(e, i, value)"
                  >
                  </CheckButton>
                </el-row>
                <!-- <el-row class="m-b-8" align="middle"> -->
                <el-form-item label="透明度">
                  <!-- <div class="m-t-8">网格透明度</div> -->
                  <el-slider
                    v-model="opacityValue"
                    v-model="value.opacityValue"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    show-stops
                    @change="handleOpacityChange"
                    style="width: 200px"
                    @change="(e) => handleOpacityChange(e, i, value)"
                    style="width: 150px"
                  />
                </el-row>
                  <el-input-number
                    class="m-l-16"
                    size="small"
                    v-model="value.opacityValue"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    @change="(e) => handleOpacityChange(e, i, value)"
                  />
                </el-form-item>
                <!-- </el-row> -->
                <el-divider />
              </div>
            </div>
          </div>
          </el-scrollbar>
        </template>
      </BaseCard>
    </el-col>
@@ -68,7 +148,11 @@
/**
 * 网格样式控制工具
 */
import { ref, watch, computed } from 'vue';
import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';
import gridApi from '@/api/gridApi';
import { useGridStore } from '@/stores/grid-info';

const gridStore = useGridStore();

const props = defineProps({
  // 网格管理对象[SatelliteGrid]数组
@@ -78,68 +162,156 @@
  }
});

const gridLoading = ref(false);
const rankLoading = ref(false);
const dataLoading = ref(false);
const colorLoading = ref(false);
const heatMapLoading = ref(false);
const underwayLoading = ref(false);
const highlightLoading = ref(false);

const emits = defineEmits(['showUnderway', 'onDelete']);

const gridCtrlList = computed(() => {
  return props.gridCtrls.map((g) => {
    return {
    return reactive({
      name: g.name,
      views: Array.from(g.mapViewsMap)
    };
      views: Array.from(g.mapViewsMap).map((v) => {
        return {
          tag: v[0],
          extData: v[1].extData,
          show: v[1].show,
          opacityValue: 1
        };
      })
    });
  });
});

// watch(
//   () => props.gridCtrls,
//   (nV, oV) => {
//     gridCtrlList.value = nV.map((v) => {
//       return Array.from(v.infoMap);
//     });
//   },
//   { deep: true }
// );

const show = ref(true);

const gridVisible = ref(false);
const rankVisible = ref(false);
const dataVisible = ref(false);
const isStandardColor = ref(true);
const isOpacity = ref(false);
const opacityValue = ref(0.7);

const emits = defineEmits([
  'showRank',
  'showData',
  'changeColor',
  'changeOpacity'
]);

function handleRankClick() {
  rankVisible.value = !rankVisible.value;
  emits('showRank', rankVisible.value);
function handleCloseClick(index, t, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).deleteTagGrid([key]);
  gridCtrlList.value[index].views.splice(t, 1);
  emits('onDelete', index, key);
}

function handleDataClick() {
  dataVisible.value = !dataVisible.value;
  emits('showData', dataVisible.value);
function handleGridClick(e, index, value) {
  gridLoading.value = true;
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showGridViews: e
  });
  gridLoading.value = false;
}

function handleColorClick() {
  isStandardColor.value = !isStandardColor.value;
  emits('changeColor', isStandardColor.value);
function handleRankClick(e, index, value) {
  rankLoading.value = true;
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showRankTxt: e
  });
  rankLoading.value = false;
}

function handleOpacityClick() {
  // isOpacity.value = !isOpacity.value;
  // emits('changeOpacity', isOpacity.value);
function handleDataClick(e, index, value) {
  dataLoading.value = true;
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showDataTxt: e
  });
  dataLoading.value = false;
}

function handleOpacityChange(value) {
  emits('changeOpacity', value);
function handleColorClick(e, index, value) {
  colorLoading.value = true;
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeGridColor({
    tags: [key],
    useCustomColor: e
  });
  colorLoading.value = false;
}

function handleOpacityChange(e, index, value) {
  const key = value.tag;
  // value.opacityValue = e;
  toRaw(props.gridCtrls[index]).changeGridOpacity({
    tag: key,
    opacityValue: toRaw(value.opacityValue)
  });
}

function handleUnderwayClick(e, index, value) {
  underwayLoading.value = true;
  emits('showUnderway', {
    isShow: e,
    dataId: value.tag,
    done: () => (underwayLoading.value = false)
  });
}

function handleHighlightGridClick(e, index, value) {
  highlightLoading.value = true;
  toRaw(props.gridCtrls[index]).mixGrid({
    tags: value.tag.split('-'),
    isMixGridHighlight: e
  });
  highlightLoading.value = false;
}

let heatTag;
const heatMapSearchLength = 4;
function handleHeatMapClick(e, index, value) {
  heatMapLoading.value = true;
  const _satelliteGrid = toRaw(props.gridCtrls[index]);
  _satelliteGrid.changeVisibility({
    showGridViews: false,
    showDataTxt: false,
    showRankTxt: false
  });
  if (e) {
    const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
    gridApi
      .buildUnderwayHeatmap(_satelliteGrid.gridGroupId, data, heatMapSearchLength)
      .then((res) => {
        heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
        _satelliteGrid.setDefaultGridClickEvent([heatTag]);
        // _satelliteGrid.setGridEvent(
        //   [heatTag],
        //   'click',
        //   (gridCell, gridDataDetail) => {
        //     gridStore.selectedGridCellAndDataDetail = {
        //       gridCell,
        //       gridDataDetail
        //     };
        //   }
        // );
      })
      .finally(() => (heatMapLoading.value = false));
  } else {
    _satelliteGrid.changeVisibility({
      tags: [value.tag],
      showGridViews: true
    });
    heatMapLoading.value = false;
  }
}
</script>
<style scoped>
.content-wrap {
  min-width: 300px;
  min-height: 600px;
  max-height: 80vh;
  height: 80vh;
  padding: 4px 16px;
}

:deep(.el-input-number) {
  width: 80px;
}
</style>