走航融合（待完成）

feiyu02

2025-03-20 419fe50acad4674f50c6639b3ec7ccbcaf2cbf44

走航融合（待完成）

 src/components.d.ts

@@ -27,6 +27,7 @@
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -34,15 +35,16 @@
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSlider: typeof import('element-plus/es')['ElSlider']
    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

 src/model/SatelliteGrid.js

@@ -503,6 +503,9 @@
          style: {
            isMixGridHighlight: true
          }
        },
        extData: {
          name: `走航融合 - ${mixTag}`
        }
      });
    }

 src/router/index.js

@@ -6,7 +6,7 @@
  routes: [
    {
      path: '/',
      redirect: '/login'
      redirect: '/index/underwaymix'
    },
    // 登陆页面
    {

 src/utils/map/grid.js

@@ -426,7 +426,7 @@
        grid.setOptions({
          ...style,
          fillColor: _color, //多边形填充颜色
          fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 0.7
          fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 1
        });

        res.push(grid);

 src/views/underwaymix/UnderwayMixMode.vue

@@ -51,8 +51,16 @@
                  @change="handleMixClick"
                >
                </CheckButton>
                <CheckButton
                  :disabled="!mixActive"
                  active-text="风险热力图"
                  inactive-text="风险热力图"
                  :default-value="false"
                  @change="handleHeatMapClick"
                >
                </CheckButton>
              </el-row>
              <div class="m-t-8">网格要素</div>
              <!-- <div class="m-t-8">网格要素</div>
              <el-row class="m-t-8">
                <CheckButton
                  active-text="显示网格"
@@ -99,7 +107,6 @@
              </el-row>
              <div class="m-t-8">走航要素</div>
              <el-row class="m-t-8">
                <!-- <el-divider content-position="left"></el-divider> -->

                <el-button
                  type="primary"
@@ -110,7 +117,7 @@
                >
                  {{ underwayVisible ? '隐藏走航路线' : '显示走航路线' }}
                </el-button>
              </el-row>
              </el-row> -->
            </template>
            <template #footer> </template>
          </BaseCard>
@@ -126,7 +133,10 @@
        </el-row>
      </el-col>
    </el-row>
    <GridStyleTool :gridCtrls="gridCtrls"></GridStyleTool>
    <GridStyleTool
      :gridCtrls="gridCtrls"
      @show-underway="handleUnderwayClick"
    ></GridStyleTool>
  </el-row>
  <!-- </div> -->
</template>
@@ -272,12 +282,19 @@
  });
  if (mixActive.value) {
    satelliteGrid.mixGrid(tags);
    gridCtrls.value = [satelliteGrid];
  } else {
    satelliteGrid.changeVisibility({
      tags,
      showGridViews: true
    });
  }
}

function handleHeatMapClick() {
  const tags = fusionDataList.value
    .filter((v, i) => selectedfusionData.value.indexOf(i) != -1)
    .map((v) => v.id);
}

function handleGridClick() {
@@ -291,9 +308,18 @@
  });
}

function handleUnderwayClick() {
function handleUnderwayClick({ isShow, dataId }) {
  underwayVisible.value = !underwayVisible.value;
  underwayVisible.value ? draw() : mapLine.hideLine();

  if (isShow) {
    draw(dataId);
  } else {
    const d = fusionDataList.value.find((v) => v.id == dataId);
    const mission = missionStore.missionList.find((v) => {
      return v.missionCode == d.mixDataId;
    });
    mapLine.hideLine(mission.missionCode);
  }
}

function handleRankClick() {
@@ -389,30 +415,49 @@
  });
}

function draw() {
function draw(dataId) {
  if (isUnmounted.value) return;

  selectedfusionData.value.forEach((i) => {
    const d = fusionDataList.value[i];
  // selectedfusionData.value.forEach((i) => {
  //   const d = fusionDataList.value[i];

    const mission = missionStore.missionList.find((v) => {
      return v.missionCode == d.mixDataId;
    });
  //   const mission = missionStore.missionList.find((v) => {
  //     return v.missionCode == d.mixDataId;
  //   });

    if (factorDataMap.has(mission.missionCode)) {
      const fd = factorDataMap.get(mission.missionCode);
      drawLine(mission.missionCode, fd);
    } else {
      search(mission).then((res) => {
        const fd = new FactorDatas();
        fd.setData(res.data, drawMode.value, () => {
          fd.refreshHeight(factorType.value);
          factorDataMap.set(mission.missionCode, fd);
          drawLine(mission.missionCode, fd);
        });
      });
    }
  //   if (factorDataMap.has(mission.missionCode)) {
  //     const fd = factorDataMap.get(mission.missionCode);
  //     drawLine(mission.missionCode, fd);
  //   } else {
  //     search(mission).then((res) => {
  //       const fd = new FactorDatas();
  //       fd.setData(res.data, drawMode.value, () => {
  //         fd.refreshHeight(factorType.value);
  //         factorDataMap.set(mission.missionCode, fd);
  //         drawLine(mission.missionCode, fd);
  //       });
  //     });
  //   }
  // });

  const d = fusionDataList.value.find((v) => v.id == dataId);
  const mission = missionStore.missionList.find((v) => {
    return v.missionCode == d.mixDataId;
  });

  if (factorDataMap.has(mission.missionCode)) {
    const fd = factorDataMap.get(mission.missionCode);
    drawLine(mission.missionCode, fd);
  } else {
    search(mission).then((res) => {
      const fd = new FactorDatas();
      fd.setData(res.data, drawMode.value, () => {
        fd.refreshHeight(factorType.value);
        factorDataMap.set(mission.missionCode, fd);
        drawLine(mission.missionCode, fd);
      });
    });
  }
}

function drawLine(missionCode, fd) {

 src/views/underwaymix/component/GridStyleTool.vue

@@ -12,53 +12,81 @@
    <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 }}
              <div v-for="(value, t) in g.views" :key="t">
                <!-- {{ value[0] }} -->
                {{ value[1].extData.name }}
                {{ value.extData.name }}
                <!-- {{ 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">
                  <CheckButton
                    active-text="显示网格"
                    inactive-text="隐藏网格"
                    :default-value="true"
                    @change="handleGridClick"
                    @change="(e) => handleGridClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    active-text="显示排名"
                    inactive-text="隐藏排名"
                    :default-value="false"
                    @change="handleGridClick"
                    @change="(e) => handleRankClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    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
                    active-text="绘制对比色"
                    inactive-text="绘制标准色"
                    :default-value="false"
                    @change="(e) => handleColorClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    active-text="显示走航轨迹"
                    inactive-text="隐藏走航轨迹"
                    :default-value="false"
                    @change="(e) => handleUnderwayClick(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 +96,7 @@
/**
 * 网格样式控制工具
 */
import { ref, watch, computed } from 'vue';
import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';

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

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

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,
          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 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'
]);
// const emits = defineEmits([
//   'showRank',
//   'showData',
//   'changeColor',
//   'changeOpacity'
// ]);

function handleRankClick() {
  rankVisible.value = !rankVisible.value;
  emits('showRank', rankVisible.value);
function handleGridClick(e, index, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showGridViews: e
  });
}

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

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

function handleOpacityClick() {
  // isOpacity.value = !isOpacity.value;
  // emits('changeOpacity', isOpacity.value);
function handleColorClick(e, index, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeGridColor({
    tag: key,
    useCustomColor: e
  });
}

function handleOpacityChange(value) {
  emits('changeOpacity', value);
function handleOpacityChange(e, index, value) {
  console.log(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) {
  emits('showUnderway', {
    isShow: e,
    dataId: value.tag
  });
}
</script>
<style scoped>
@@ -142,4 +194,8 @@
  min-width: 300px;
  min-height: 600px;
}

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