污染溯源模块编写中

feiyu02

2025-03-03 7eb2abf43167d9db3fca2e7958b90ff1bea0cead

污染溯源模块编写中

 src/components.d.ts

@@ -12,7 +12,6 @@
    CardButton: typeof import('./components/CardButton.vue')['default']
    CardDialog: typeof import('./components/CardDialog.vue')['default']
    ConfigManage: typeof import('./components/map/ConfigManage.vue')['default']
    copy: typeof import('./components/search/OptionAOD.vue')['default']
    CoreHeader: typeof import('./components/core/CoreHeader.vue')['default']
    CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
    DataSummary: typeof import('./components/monitor/DataSummary.vue')['default']
@@ -51,6 +50,7 @@
    FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
    FactorTrend: typeof import('./components/monitor/FactorTrend.vue')['default']
    GaugeChart: typeof import('./components/chart/GaugeChart.vue')['default']
    GridSearch: typeof import('./components/grid/GridSearch.vue')['default']
    HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default']
    MapLocation: typeof import('./components/map/MapLocation.vue')['default']
    MapScene: typeof import('./components/map/MapScene.vue')['default']

 src/components/grid/GridSearch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
<template>
  <CardDialog
    v-model="dialogVisible"
    title="网格信息"
    draggable
    :modal="false"
    width="300px"
  >
    <template #default>
      <el-form
        :inline="false"
        ref="formRef"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="网格编号：">
          <div>
            {{ data.cellIndex }}
          </div>
        </el-form-item>
        <el-form-item label="经纬度：">
          <div>
            {{ data.longitude + ', ' + data.latitude }}
          </div>
        </el-form-item>
        <el-form-item label="PM2.5：">
          <div>
            {{ data.pm25 + ' Î¼g/m³' }}
          </div>
        </el-form-item>
        <el-form-item label="四至范围：">
          <div>/</div>
        </el-form-item>
      </el-form>
    </template>
    <template #footer> </template>
  </CardDialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { useGridStore } from '@/stores/grid-info';

const gridStore = useGridStore();

const dialogVisible = ref(false);

const data = computed(() => {
  if (gridStore.selectedGridCellAndDataDetail) {
    return {
      cellIndex: gridStore.selectedGridCellAndDataDetail.gridCell.cellIndex,
      longitude: gridStore.selectedGridCellAndDataDetail.gridCell.longitude,
      latitude: gridStore.selectedGridCellAndDataDetail.gridCell.latitude,
      pm25: gridStore.selectedGridCellAndDataDetail.gridDataDetail.pm25
    };
  } else {
    return {
      cellIndex: '/',
      longitude: '/',
      latitude: '/',
      pm25: '/'
    };
  }
});

watch(
  () => gridStore.selectedGridCellAndDataDetail,
  (nv, ov) => {
    if (nv != ov) {
      dialogVisible.value = true;
    }
  },
  { deep: true }
);
</script>

 src/stores/grid-info.js

@@ -1,29 +1,11 @@
// import { ref } from 'vue';
// import { defineStore } from 'pinia';
// import { useFetchData } from '@/composables/fetchData';
// import sceneInfoApi from '@/api/sceneInfoApi';
// import { useToolboxStore } from '@/stores/toolbox';
import { ref } from 'vue';
import { defineStore } from 'pinia';

// const toolboxStore = useToolboxStore();
// èµ°èˆªè®¾å¤‡
export const useGridStore = defineStore('grid', () => {
  const selectedSatelliteProxy = undefined;

// // èµ°èˆªè®¾å¤‡
// export const useGridStore = defineStore('grid', () => {
//   const selectedGrid = ref(undefined);
  const selectedGridCellAndDataDetail = ref(undefined);

//   function searchScene(lng, lat) {
//     // if (toolboxStore.sceneSearchStatus) {
//       return fetchData(() => {
//         return sceneInfoApi
//           .searchByCoordinate(lng, lat, radius.value * 1000)
//           .then((res) => {
//             sceneList.value = res.data.filter((v) => {
//               return v.typeId != 19 && v.typeId != 20;
//             });
//             return res;
//           });
//       });
//     // }
//   }

//   return { radius, sceneList, loading, searchScene };
// });
  return { selectedSatelliteProxy, selectedGridCellAndDataDetail };
});

 src/stores/satellite-grid.js

@@ -24,9 +24,9 @@
  });
  // ç½‘格数据详情
  const gridDataDetailMap = new Map();
  const selectedGridData = ref(undefined)
  const selectedGridData = ref(undefined);

  const selectedGridDataDetail = ref(undefined)
  const selectedGridDataDetail = ref(undefined);

  // èŽ·å–网格信息
  function fetchGridCell(groupId) {
@@ -44,14 +44,15 @@

  // èŽ·å–遥测单日具体网格监测数据
  function fetchGridDataDetail(gridData, callback) {
    selectedGridData.value = gridData;
    if (gridDataDetailMap.has(gridData.id)) {
      selectedGridData.value = gridDataDetailMap.get(gridData.id);
      callback(selectedGridData.value);
      selectedGridDataDetail.value = gridDataDetailMap.get(gridData.id);
      callback(selectedGridDataDetail.value);
    } else {
      gridApi.fetchGridDataDetail(gridData.id, gridData.groupId).then((res) => {
        gridDataDetailMap.set(gridData.id, res.data);
        selectedGridData.value = res.data;
        callback(selectedGridData.value);
        selectedGridDataDetail.value = res.data;
        callback(selectedGridDataDetail.value);
      });
    }
  }
@@ -62,6 +63,7 @@
    gridDataList,
    mixGridDataList,
    selectedGridData,
    selectedGridDataDetail,
    fetchGridCell,
    fetchGridData,
    fetchGridDataDetail

 src/views/HomePage.vue

@@ -8,8 +8,9 @@
      <!-- <MissionManage></MissionManage> -->
      <ConfigManage></ConfigManage>
      <!-- <MapLocation></MapLocation> -->
      <SceneSearch></SceneSearch>
      <MapScene></MapScene>
      <SceneSearch></SceneSearch>
      <GridSearch></GridSearch>
      <!-- <el-button
        @click="satelliteImportVisible = !satelliteImportVisible"
        type="primary"
@@ -22,13 +23,14 @@
        class="el-button-custom aod-right-top p-events-auto"
        >AOD数据导入</el-button
      > -->
      <PollutionTrace class="aod-right-top"></PollutionTrace>
      <ProductManage class="satellite-right-top"></ProductManage>
    </el-row>
    <!-- <CoreMenu></CoreMenu> -->
    <router-view></router-view>
  </div>
  <SatelliteImport v-model="satelliteImportVisible"></SatelliteImport>
  <AODImport v-model="aodImportVisible"></AODImport>
  <!-- <SatelliteImport v-model="satelliteImportVisible"></SatelliteImport>
  <AODImport v-model="aodImportVisible"></AODImport> -->
</template>

<script setup>
@@ -37,6 +39,7 @@
import SatelliteImport from './satellitetelemetry/component/SatelliteImport.vue';
import AODImport from './satellitetelemetry/component/AODImport.vue';
import ProductManage from './dataproduct/ProductManage.vue';
import PollutionTrace from './satellitetelemetry/PollutionTrace.vue';
const satelliteImportVisible = ref(false);
const aodImportVisible = ref(false);
</script>
@@ -64,13 +67,13 @@
  gap: 4px;
}
.satellite-right-top {
  width: 120px;
  /*width: 120px;*/
  position: absolute;
  right: 0px;
}

.aod-right-top {
  position: absolute;
  right: 124px;
  right: 100px;
}
</style>

 src/views/dataproduct/component/ProductMake.vue

@@ -123,7 +123,7 @@
    };
  });
  satelliteProxy.drawGrid({
    gridData: _aod,
    gridDataDetail: _aod,
    showDataTxt: true,
    showRankTxt: true
  });
@@ -142,7 +142,7 @@
    return b.pm25 - a.pm25;
  });
  satelliteProxy.drawGrid({
    gridData: tempGridDataDetailList.value,
    gridDataDetail: tempGridDataDetailList.value,
    showDataTxt: true,
    showRankTxt: true
  });

 src/views/satellitetelemetry/PollutionTrace.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,35 @@
<template>
  <div>
    <el-button
      @click="handleChange"
      type="primary"
      class="el-button-custom p-events-auto"
      >污染溯源：{{ disable ? '关' : '开' }}</el-button
    >
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useGridStore } from '@/stores/grid-info';
import { useSceneStore } from '@/stores/scene';

const gridStore = useGridStore();
const sceneStore = useSceneStore();

const disable = ref(true);

function handleChange() {
  disable.value = !disable.value;
  if (disable.value) {
    gridStore.selectedSatelliteProxy.goBackGridEvent('click');
  } else {
    gridStore.selectedSatelliteProxy.setGridEvent('click', (e) => {
      const polygon = e.target;
      const { centerPoint } = polygon.getExtData();
      const [lng, lat] = centerPoint;
      sceneStore.radius = 0.5;
      sceneStore.searchScene(lng, lat);
    });
  }
}
</script>

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -7,6 +7,9 @@
  mapViews;

  districtPolygon;

  events = new Map();

  // ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
  drawDistrict(districtName, isNew) {
    onMapMounted(() => {
@@ -93,7 +96,11 @@
        ]
          // eslint-disable-next-line no-undef
          .map((d) => new AMap.LngLat(d[0], d[1])),
        extData: points[i]
        extData: {
          centerPoint: points[i],
          // gridPoints,
          gridCell: v
        }
      };
    });
    const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
@@ -189,7 +196,7 @@

  // ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
  drawGrid({
    gridData,
    gridDataDetail,
    useCustomColor,
    opacity,
    zIndex,
@@ -200,7 +207,7 @@
    const { resGridViews, pointsRes } = this.drawColor({
      gridViews: this.mapViews.gridViews,
      points: this.mapViews.points,
      gridDataDetail: gridData,
      gridDataDetail: gridDataDetail,
      lastGridViews: this.mapViews.lastGridViews,
      customColor: useCustomColor,
      opacity: opacity,
@@ -212,7 +219,7 @@
    // æ•°æ®æ ‡è®°
    const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
      this.mapViews.lastPoints,
      gridData,
      gridDataDetail,
      this.mapViews.dataTxt,
      this.mapViews.dataLayer
    );
@@ -221,7 +228,7 @@

    const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
      this.mapViews.lastPoints,
      gridData,
      gridDataDetail,
      this.mapViews.rankTxt,
      this.mapViews.rankLayer
    );
@@ -264,13 +271,38 @@
    });
  }

  setGridEvent(event) {
  setGridEvent(name, event) {
    if (!this.events.has(name)) {
      this.events.set(name, []);
    }
    const list = this.events.get(name);
    if (list.length > 0) {
      const lastEvent = list[list.length - 1];
      this.mapViews.gridViews.forEach((polygon) => {
        polygon.off(name, lastEvent);
      });
    }
    this.events.get(name).push(event);
    this.mapViews.gridViews.forEach((polygon) => {
      event(polygon);
      polygon.on(name, event);
    });
  }

  
  goBackGridEvent(name) {
    if (this.events.has(name)) {
      const eventList = this.events.get(name);
      //先移除原有的事件
      const lastEvent = eventList.pop();
      this.mapViews.gridViews.forEach((polygon) => {
        polygon.off(name, lastEvent);
      });
      //获取上一个事件
      const event = eventList.pop();
      this.mapViews.gridViews.forEach((polygon) => {
        polygon.on(name, event);
      });
    }
  }
}

// // åœ°å›¾ç½‘格相关对象

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -72,12 +72,16 @@
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';
import { useSceneStore } from '@/stores/scene';
import { useGridStore } from '@/stores/grid-info';

const satelliteProxy = new SatelliteProxy();

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
const gridStore = useGridStore();
gridStore.selectedSatelliteProxy = satelliteProxy;
const sceneStore = useSceneStore();
const satelliteGridStore = useSatelliteGridStore();

const { loading, fetchData } = useFetchData(10000);
const animaLoading = ref(true);
const show = ref(true);

@@ -144,16 +148,27 @@
      });
    });
    //鼠标点击事件
    polygon.on('click', () => {
      const [lng, lat] = polygon.getExtData();
      sceneStore.radius = 0.5;
      sceneStore.searchScene(lng, lat);
    });
    // polygon.on('click', () => {
    //   const [lng, lat] = polygon.getExtData();
    //   sceneStore.radius = 0.5;
    //   sceneStore.searchScene(lng, lat);
    // });
  });
  satelliteProxy.setGridEvent('click', (e) => {
    const polygon = e.target
    const { gridCell } = polygon.getExtData();
    const cellIndex = gridCell.cellIndex;
    const gridDataDetail =
      satelliteGridStore.selectedGridDataDetail[cellIndex - 1];
    gridStore.selectedGridCellAndDataDetail = {
      gridCell,
      gridDataDetail
    };
  });
}

function drawGrid(gridData) {
  satelliteProxy.drawGrid({ gridData });
function drawGrid(gridDataDetail) {
  satelliteProxy.drawGrid({ gridDataDetail: gridDataDetail });
}

function handleRowClick(row) {
@@ -170,7 +185,7 @@

function handleColorClick(isStandardColor) {
  satelliteProxy.drawGrid({
    gridData: satelliteGridStore.selectedGridData,
    gridDataDetail: satelliteGridStore.selectedGridDataDetail,
    useCustomColor: !isStandardColor
  });
}

 src/views/satellitetelemetry/component/SatelliteMixTool.vue

@@ -147,8 +147,8 @@
}

// ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
function drawGrid(gridData) {
  satelliteProxy.drawGrid({ gridData, opacity: 1, zIndex: 11 });
function drawGrid(gridDataDetail) {
  satelliteProxy.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 });
}

watch(mission, (nV, oV) => {
@@ -182,21 +182,21 @@
  }
});

let selectedGridData;
let selectedGridDataDetail;
// å åŠ èžåˆ
function handleFusionClick() {
  // resetButton();
  const d = fusionData.value;
  if (gridDataDetailMap.has(d.id)) {
    const gridData = gridDataDetailMap.get(d.id);
    selectedGridData = gridData;
    drawGrid(gridData);
    selectedGridDataDetail = gridDataDetailMap.get(d.id);
    // selectedGridData = gridData;
    drawGrid(selectedGridDataDetail);
  } else {
    gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
      gridDataDetailMap.set(d.id, res.data);
      const gridData = res.data;
      selectedGridData = gridData;
      drawGrid(gridData);
      selectedGridDataDetail = res.data;
      // selectedGridData = gridData;
      drawGrid(selectedGridDataDetail);
    });
  }
}
@@ -224,7 +224,7 @@
function handleColorClick() {
  isStandardColor.value = !isStandardColor.value;
  satelliteProxy.drawGrid({
    gridData: selectedGridData,
    gridDataDetail: selectedGridData,
    useCustomColor: !isStandardColor.value,
    opacity: 1,
    zIndex: 11