走航融合优化中

riku

2025-04-11 5e059c9c17a6d63b6c017d2d2beb25ae227071d1

走航融合优化中

 src/components/CardDialog copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@
<template>
  <el-dialog
    :model-value="modelValue"
    @opened="handleChange(true)"
    @closed="handleChange(false)"
    :show-close="false"
    :destroy-on-close="true"
    :width="width"
    :draggable="draggable"
    :modal="modal"
    :close-on-click-modal="modal"
    :modal-class="modal ? 'p-events-auto' : ''"
  >
    <template #header="{ close, titleId, titleClass }">
      <BaseCard direction="top-left" borderless="t">
        <template #content>
          <el-row justify="space-between" align="middle">
            <el-row align="middle">
              <font-awesome-icon icon="fa fa-list" class="m-r-4" />
              <span :id="titleId" :class="titleClass">{{ title }}</span>
            </el-row>
            <font-awesome-icon
              icon="fa fa-times"
              class="cursor-p m-r-4"
              @click="close"
            />
          </el-row>
        </template>
      </BaseCard>
    </template>
    <BaseCard size="medium">
      <template #content>
        <slot></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </BaseCard>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // æ˜¾éšæŽ§åˆ¶
    modelValue: Boolean,
    // æ ‡é¢˜
    title: String,
    // å®½åº¦
    width: {
      type: [String, Number],
      default: '50%'
    },
    // å¯æ‹–拽
    draggable: Boolean,
    // é®ç½©å±‚
    modal: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'changed'],
  methods: {
    handleChange(value) {
      this.$emit('update:modelValue', value);
      this.$emit('changed', value);
    }
  }
};
</script>
<style></style>

 src/components/CardDialog.vue

@@ -1,8 +1,5 @@
<template>
  <el-dialog
    :model-value="modelValue"
    @opened="handleChange(true)"
    @closed="handleChange(false)"
    :show-close="false"
    :destroy-on-close="true"
    :width="width"
@@ -42,7 +39,7 @@
export default {
  props: {
    // æ˜¾éšæŽ§åˆ¶
    modelValue: Boolean,
    // modelValue: Boolean,
    // æ ‡é¢˜
    title: String,
    // å®½åº¦
@@ -58,12 +55,12 @@
      default: true
    }
  },
  emits: ['update:modelValue', 'changed'],
  // emits: ['update:modelValue', 'changed'],
  methods: {
    handleChange(value) {
      this.$emit('update:modelValue', value);
      this.$emit('changed', value);
    }
    // handleChange(value) {
    //   this.$emit('update:modelValue', value);
    //   this.$emit('changed', value);
    // }
  }
};
</script>

 src/components/MessageBox.vue

@@ -2,8 +2,8 @@
  <CardDialog
    :title="title"
    :model-value="modelValue"
    @update:modelValue="handleChange"
    :width="400"
    @handleChange="handleChange"
  >
    <el-row justify="center">
      <div class="m-v-16">{{ msg }}</div>

 src/components/mission/MissionEdit.vue

@@ -1,5 +1,9 @@
<template>
  <CardDialog v-model="visible" title="新建走航任务">
  <CardDialog
    :title="dialogTitle"
    :model-value="modelValue"
    @update:modelValue="(e) => $emit('update:modelValue', e)"
  >
    <el-form
      :inline="false"
      :model="formObj"
@@ -43,26 +47,10 @@
      </el-form-item>
    </el-form>
  </CardDialog>
  <el-button
    v-if="mode == 'create'"
    type="primary"
    class="el-button-custom"
    @click="visible = !visible"
  >
    æ–°å»ºä»»åŠ¡
  </el-button>
  <el-button
    v-else
    type="primary"
    size="small"
    icon="EditPen"
    class="el-button-custom"
    @click="visible = !visible"
  ></el-button>
</template>
<script setup>
import moment from 'moment';
import { ref, reactive, computed } from 'vue';
import { ref, onMounted, reactive, computed, watch } from 'vue';
import missionApi from '@/api/missionApi';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
import { useFormConfirm } from '@/composables/formConfirm';
@@ -74,15 +62,19 @@
  mode: {
    type: String,
    default: 'create'
  },
  modelValue: Boolean,
  mission: {
    type: Object
  }
  // visible: {
  //   type: String,
  //   default: 'create'
  // }
});
const dialogTitle = computed(() => {
  return `${props.mode == 'create' ? '新建' : '修改'}走航任务`;
});

const emits = defineEmits(['update:modelValue']);

const missionStore = useMissionStore();
const visible = ref(false);
const { loading, fetchData } = useFetchData();
const rules = reactive({
  location: [
@@ -130,15 +122,22 @@
    endTime: formObj.value.timeArray[1]
  };
});

function submitMission() {
  const newMission = { ...param.value };
}

// åˆ›å»ºä»»åŠ¡
function createMission() {
  fetchData((page, pageSize) => {
    return missionApi.putNewMission(param.value).then((res) => {
      visible.value = false;
    return missionApi
      .putNewMission(param.value)
      .then((res) => {
      missionStore.fetchMission();
      // é€šçŸ¥æœåŠ¡ç«¯å¯åŠ¨ä»»åŠ¡èŒƒå›´å†…的第三方数据获取任务
      thirdPartyDataApi.fetchMissionData(param.value.missionCode);
    });
      })
      .finally(() => emits('update:modelValue', false));
  });
}
const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
@@ -147,11 +146,37 @@
  },
  cancel: {
    do: () => {
      visible.value = false;
      emits('update:modelValue', false);
    }
  }
});

// ç›‘听传入的任务信息，在更新模式下，将任务信息映射到表单上
watch(
  () => [props.modelValue, props.mission],
  (nV, oV) => {
    if (nV != oV) {
      const [v, m] = nV;
      if (v) {
        initFormObj();
      }
      if (m && props.mode == 'update') {
        formObj.value.location = { dName: m.districtName };
        formObj.value.missionCode = m.missionCode;
        formObj.value.deviceType = m.deviceType;
        formObj.value.deviceCode = m.deviceCode;
        formObj.value.timeArray = [m.startTime, m.endTime];
      }
    }
  },
  { immediate: true }
);

onMounted(() => {
  initFormObj();
});

function initFormObj() {
if (import.meta.env.VITE_DATA_MODE == 'jingan') {
  formObj.value.location = {
    pCode: '31',
@@ -161,6 +186,9 @@
    dCode: '310106',
    dName: '静安区'
  };
  } else {
    formObj.value = {};
  }
}
</script>
<style scoped>

 src/components/mission/MissionManage.vue

@@ -7,11 +7,7 @@
  >
    ä»»åŠ¡ç®¡ç†
  </el-button> -->
  <CardDialog
    :model-value="modelValue"
    @changed="handleChange"
    title="走航任务管理"
  >
  <CardDialog v-bind="$attrs" title="走航任务管理">
    <el-row class="mission-table">
      <el-col :span="20">
        <el-table
@@ -49,7 +45,14 @@
          />
          <el-table-column label="管理" width="160" align="center">
            <template #default="{ row }">
              <MissionEdit mode="update"></MissionEdit>
              <!-- <MissionEdit mode="update"></MissionEdit> -->
              <!-- <el-button
                type="primary"
                size="small"
                icon="EditPen"
                class="el-button-custom"
                @click="updateMission(row)"
              ></el-button> -->
              <el-button
                type="primary"
                size="small"
@@ -57,14 +60,14 @@
                class="el-button-custom"
                @click="deleteMission(row)"
              ></el-button>
              <el-button
              <!-- <el-button
                :loading="row.downloadLoading"
                type="primary"
                size="small"
                icon="Document"
                class="el-button-custom"
                @click="downloadReport(row)"
              ></el-button>
              ></el-button> -->
            </template>
          </el-table-column>
        </el-table>
@@ -74,7 +77,13 @@
        <!-- <el-button type="primary" class="el-button-custom">
                æ–°å»ºä»»åŠ¡
              </el-button> -->
        <MissionEdit></MissionEdit>
        <el-button
          type="primary"
          class="el-button-custom"
          @click="createMission"
        >
          æ–°å»ºä»»åŠ¡
        </el-button>
        <!-- </div> -->
        <!-- <div>
          <el-button type="primary" class="el-button-custom">
@@ -96,6 +105,12 @@
    msg="确认是否删除该走航任务"
    confirmText="删除"
  ></MessageBox>
  <MissionEdit
    v-model="dialogVisible"
    width="30%"
    :mode="editMode"
    :mission="selectedMission"
  ></MissionEdit>
</template>
<script>
import moment from 'moment';
@@ -110,22 +125,35 @@
    return { loading, fetchData };
  },
  props: {
    modelValue: Boolean
    // modelValue: Boolean
  },
  emits: ['update:modelValue'],
  // emits: ['update:modelValue'],
  data() {
    return {
      dialogVisible: false,
      msgBoxVisible: false,
      onConfirm: undefined
      onConfirm: undefined,
      // ä»»åŠ¡ç¼–辑模式，create：创建新任务，update：编辑已有任务
      editMode: 'create',
      // é€‰ä¸­çš„待编辑任务
      selectedMission: undefined
    };
  },
  computed: {
    ...mapStores(useMissionStore)
  },
  methods: {
    handleChange(value) {
      this.$emit('update:modelValue', value);
    // handleChange(value) {
    //   this.$emit('update:modelValue', value);
    // },
    createMission() {
      this.editMode = 'create';
      this.dialogVisible = true;
    },
    updateMission(row) {
      this.editMode = 'update';
      this.selectedMission = row;
      this.dialogVisible = true;
    },
    deleteMission(row) {
      this.onConfirm = () => {

 src/model/SatelliteGrid.js

@@ -21,10 +21,10 @@

  gridDataDetail;

  infoMap = new Map();

  // åœ°å›¾ç½‘格对象Map结构，存储对应key下的网格对象、网格坐标信息
  mapViewsMap = new Map();

  gridStateMap = new Map();

  // ç½‘格数据Map结构，存储对应key下的网格监测数据信息
  gridDataDetailMap = new Map();
@@ -349,7 +349,8 @@
  drawTagGrid({ tag, data, grid, dataTxt, rankTxt, extData }) {
    if (!this.mapViewsMap.has(tag)) {
      const newMapViews = this._createNewMapViews({ extData });
      this.infoMap.set(tag, extData);
      const newGridState = this._createNewGridState({ extData });
      this.gridStateMap.set(tag, newGridState);
      this.mapViewsMap.set(tag, newMapViews);
      this.gridDataDetailMap.set(tag, data);
    }
@@ -373,6 +374,7 @@
    tags.forEach((t) => {
      this.mapViewsMap.delete(t);
      this.gridDataDetailMap.delete(t);
      this.gridStateMap.delete(t);
    });
  }

@@ -405,7 +407,7 @@
        _mapViewsList.forEach((v) => {
          if (v.dataTxt) {
            map.add(v.dataTxt);
            v.show = true;
            v.showData = true;
          }
        });
      } else {
@@ -413,7 +415,7 @@
        _mapViewsList.forEach((v) => {
          if (v.dataTxt) {
            map.remove(v.dataTxt);
            v.show = false;
            v.showData = false;
          }
        });
      }
@@ -424,7 +426,7 @@
        _mapViewsList.forEach((v) => {
          if (v.rankTxt) {
            map.add(v.rankTxt);
            v.show = true;
            v.showRank = true;
          }
        });
      } else {
@@ -432,7 +434,7 @@
        _mapViewsList.forEach((v) => {
          if (v.rankTxt) {
            map.remove(v.rankTxt);
            v.show = false;
            v.showRank = false;
          }
        });
      }
@@ -470,9 +472,9 @@
    if (_mapViewsList.length == _gridDataDetailList.length) {
      _mapViewsList.forEach((v, i) => {
        if (v.lastGridViews) {
          if (useCustomColor != undefined) v.useCustomColor = useCustomColor;
          if (useCustomColor != undefined) v.showCustomColor = useCustomColor;
          const lastGridDataDetail = _gridDataDetailList[i];
          if (v.useCustomColor) {
          if (v.showCustomColor) {
            gridMapUtil.drawGridColorCustom(
              v.lastGridViews,
              lastGridDataDetail,
@@ -588,7 +590,6 @@
      });
      this.changeGridColor({ tags: [mixTag], isMixGridHighlight });
    } else {
      // const mixMapViews = this._createNewMapViews();
      // æ ¹æ®æ ‡ç­¾tag，获取对应多组网格数据
      let { _gridDataDetailList } = this._getMapViews(...tags);
      const _dataMap = new Map();
@@ -691,108 +692,6 @@
    }

    return mixTag;
  }

  /**
   * ç»˜åˆ¶çƒ­åŠ›å›¾ç½‘æ ¼
   * @param {string} tag
   */
  drawHeatGrid(tag) {
    if (!this.mapViewsMap.has(tag) || !this.gridDataDetailMap.has(tag)) {
      return;
    }

    const heatTag = `heat-${tag}`;
    if (this.mapViewsMap.has(heatTag)) {
      this.changeVisibility({
        tags: [heatTag],
        showGridViews: true
      });
    } else {
      const _mapViews = this.mapViewsMap.get(tag);
      const _gridDataDetail = this.gridDataDetailMap.get(tag);
      // const groupId = _gridDataDetail[0].groupId;
      // const cellId = _gridDataDetail.cellId;

      const originCellIdList = _gridDataDetail.map((v) => v.cellId);
      let headGridDataDetailList = [];

      const width = 120;
      const height = 90;
      const eachwidth = 10;
      const eachheight = 10;

      const searchLength = 3;

      const _dataMap = new Map();

      _gridDataDetail.forEach((gdd) => {
        const searchRes = this.search(
          gdd,
          width,
          height,
          eachwidth,
          eachheight,
          searchLength
        );
        if (searchRes.find((v) => v.cellId == 1670)) {
          console.log();
        }
        searchRes.forEach((e) => {
          if (originCellIdList.indexOf(e.cellId) == -1) {
            if (!_dataMap.has(e.cellId)) {
              _dataMap.set(e.cellId, {
                source: [],
                res: {}
              });
            }
            _dataMap.get(e.cellId).source.push(e);
          }
        });
      });

      _dataMap.forEach((v, k) => {
        let total = 0,
          count = v.source.length;
        v.source.forEach((s) => {
          total += s.pm25;
        });
        v.res = {
          isHeatData: true,
          groupId: v.source[0].groupId,
          cellId: v.source[0].cellId,
          pm25: count == 0 ? null : Math.round((total / count) * 10) / 10,
          originData: v.source
        };
        headGridDataDetailList.push(v.res);
      });
      headGridDataDetailList = headGridDataDetailList.concat(_gridDataDetail);

      // é‡æ–°æŒ‰ç…§ç›‘测数据排序并标记排名
      headGridDataDetailList.sort((a, b) => {
        return b.pm25 - a.pm25;
      });
      headGridDataDetailList.forEach((gdd, i) => {
        gdd.rank = i + 1;
      });

      this.drawTagGrid({
        tag: heatTag,
        data: headGridDataDetailList,
        // grid: {
        //   style: {
        //     isMixGridHighlight:
        //       isMixGridHighlight == undefined ? true : isMixGridHighlight
        //   }
        // },
        extData: {
          name: `走航热力图 - ${heatTag}`,
          type: 2
        }
      });
    }

    return heatTag;
  }

  drawHeatGrid2(tag, headGridDataDetailList) {
@@ -971,4 +870,19 @@
      show: true
    };
  }

  _createNewGridState({ extData }) {
    return {
      type: undefined,
      name: '',
      showGrid: true,
      showRank: false,
      showData: false,
      showCustomColor: false,
      showHeatMap: false,
      highlightFusionGrid: false,
      showUnderway: false,
      opacityValue: 1
    };
  }
}

 src/views/underwaymix/UnderwayMixMode.vue

@@ -57,7 +57,7 @@
                  v-model="selectedPollutionDegree"
                  multiple
                  clearable
                  placeholder="选择背景"
                  placeholder="选择污染背景"
                  size="small"
                  style="width: 300px"
                >
@@ -154,6 +154,7 @@
                class="el-button-custom"
                size="small"
                @click="handleMixClick"
                :disabled="selectedfusionData.length < 2"
              >
                {{ '融合分析' }}
              </el-button>
@@ -484,59 +485,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() {
@@ -573,14 +532,17 @@
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 = lastSelectedfusionData.value.filter((v) => {
    return !val.find((t) => t.id == v.id);
@@ -660,7 +622,7 @@
    }
  });

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


 src/views/underwaymix/component/GridStyleTool.vue

@@ -181,6 +181,12 @@
          tag: v[0],
          extData: v[1].extData,
          show: v[1].show,
          showRank: v[1].showRank,
          showData: v[1].showData,
          showCustomColor: v[1].showCustomColor,
          showHeatMap: v[1].showHeatMap,
          highlightFusionGrid: true,
          // ...v[1],
          opacityValue: 1
        };
      })
@@ -274,10 +280,21 @@
    showDataTxt: false,
    showRankTxt: false
  });
  // gridCtrlList.value.forEach((v) => {
  //   v.views.forEach((view) => {
  //     view.show = false;
  //     view.showData = false;
  //     view.showRank = false;
  //   });
  // });
  if (e) {
    const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
    gridApi
      .buildUnderwayHeatmap(_satelliteGrid.gridGroupId, data, heatMapSearchLength)
      .buildUnderwayHeatmap(
        _satelliteGrid.gridGroupId,
        data,
        heatMapSearchLength
      )
      .then((res) => {
        heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
        _satelliteGrid.setDefaultGridClickEvent([heatTag]);

 src/views/underwaymix/component/ItemGridStyleCtrl.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,114 @@
<template>
  <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-row>
  <el-row class="m-t-8" justify="space-between">
    <CheckButton
      :loading="gridLoading"
      v-model="value.show"
      active-text="显示网格"
      inactive-text="隐藏网格"
      @change="(e) => handleGridClick(e, i, value)"
    >
    </CheckButton>
    <CheckButton
      :loading="rankLoading"
      v-model="value.showRank"
      active-text="显示排名"
      inactive-text="隐藏排名"
      :default-value="false"
      @change="(e) => handleRankClick(e, i, value)"
    >
    </CheckButton>
    <CheckButton
      :loading="dataLoading"
      v-model="value.showData"
      active-text="显示数据"
      inactive-text="隐藏数据"
      :default-value="false"
      @change="(e) => handleDataClick(e, i, value)"
    >
    </CheckButton>
  </el-row>
  <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-form-item label="透明度">
    <el-slider
      v-model="value.opacityValue"
      :min="0"
      :max="1"
      :step="0.1"
      show-stops
      @change="(e) => handleOpacityChange(e, i, value)"
      style="width: 150px"
    />
    <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-divider />
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  }
});
</script>