AOD数据产品

Riku

2025-03-02 de6fd089b37613808e5a3bef38ecc0761f7456e0

AOD数据产品

 src/api/aodApi.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,27 @@
import { $http } from './index';
import moment from 'moment';

export default {
  fetchAOD(groupId, dataTime) {
    return $http
      .get(`air/satellite/grid/aod`, {
        params: {
          groupId,
          dataTime
        }
      })
      .then((res) => res.data);
  },

  fetchAODDetail(aodId, groupId, cellId) {
    return $http
      .get(`air/satellite/aod/data/detail`, {
        params: {
          aodId,
          groupId,
          cellId
        }
      })
      .then((res) => res.data);
  },
};

 src/api/gridApi.js

@@ -45,22 +45,22 @@
      .then((res) => res.data);
  },

  /**
   * èŽ·å–网格组下的遥测aod
   * @param {*} groupId
   * @param {*} dataTime
   * @returns
   */
  fetchGridAod(groupId, dataTime) {
    return $http
      .get(`air/satellite/grid/aod`, {
        params: {
          groupId,
          dataTime
        }
      })
      .then((res) => res.data);
  },
  // /**
  //  * èŽ·å–网格组下的遥测aod
  //  * @param {*} groupId
  //  * @param {*} dataTime
  //  * @returns
  //  */
  // fetchGridAod(groupId, dataTime) {
  //   return $http
  //     .get(`air/satellite/grid/aod`, {
  //       params: {
  //         groupId,
  //         dataTime
  //       }
  //     })
  //     .then((res) => res.data);
  // },

  fetchGridDataDetail(dataId, groupId, cellId) {
    return $http
@@ -73,6 +73,19 @@
      })
      .then((res) => res.data);
  },

  createGridDataAndDataDetail(groupId, dataTime, dataDetailList) {
    return $http
      .post(`air/satellite/grid/data/create`, {
        params: {
          groupId,
          dataTime
        },
        data: dataDetailList
      })
      .then((res) => res.data);
  },

  downloadTemplate() {
    return $http
      .get(`air/satellite/import/grid/data/download/template`, {

 src/api/index.js

@@ -10,7 +10,8 @@
}

if (debug) {
  ip1 = 'http://192.168.0.110:8084/';
  // ip1 = 'http://192.168.0.110:8084/';
  ip1 = 'http://192.168.1.8:8084/';
}

const $http = axios.create({

 src/components.d.ts

@@ -12,6 +12,7 @@
    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']
@@ -33,17 +34,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']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElText: typeof import('element-plus/es')['ElText']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default']
@@ -59,6 +59,7 @@
    MissionEdit: typeof import('./components/mission/MissionEdit.vue')['default']
    MissionImport: typeof import('./components/mission/MissionImport.vue')['default']
    MissionManage: typeof import('./components/mission/MissionManage.vue')['default']
    OptionAOD: typeof import('./components/search/OptionAOD.vue')['default']
    OptionDevice: typeof import('./components/search/OptionDevice.vue')['default']
    OptionGridGroup: typeof import('./components/search/OptionGridGroup.vue')['default']
    OptionLocation: typeof import('./components/search/OptionLocation.vue')['default']

 src/components/search/OptionAOD.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
<template>
  <el-form-item label="AOD数据">
    <el-select
      :loading="loading"
      v-model="index"
      @change="handleChange"
      placeholder="选择AOD数据"
      size="small"
      class="w-150"
    >
      <el-option
        v-for="(s, i) in aodList"
        :key="i"
        :label="timeFormatter(s.dataTime)"
        :value="i"
      />
    </el-select>
  </el-form-item>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import moment from 'moment';
import aodApi from '@/api/aodApi';
import { useFetchData } from '@/composables/fetchData';

defineProps({
  modelValue: Object
});

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

const { loading, fetchData } = useFetchData();
const aodList = ref([]);
const index = ref(null);

function fetchAOD(groupId, dataTime) {
  return fetchData(() => {
    return aodApi.fetchAOD(groupId, dataTime).then((res) => {
      aodList.value = res.data;
      if (res.data.length > 0) {
        index.value = 0;
        handleChange(0);
      } else {
        index.value = null;
        handleChange(null);
      }
    });
  });
}

function timeFormatter(value) {
  return moment(value).format('YYYY-MM-DD');
}

function handleChange(value) {
  emits('update:modelValue', value != null ? aodList.value[value] : null);
}

// onMounted(() => {
//   fetchAOD();
// });

defineExpose({ fetchAOD });
</script>

 src/stores/grid-info.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,29 @@
// import { ref } from 'vue';
// import { defineStore } from 'pinia';
// import { useFetchData } from '@/composables/fetchData';
// import sceneInfoApi from '@/api/sceneInfoApi';
// import { useToolboxStore } from '@/stores/toolbox';

// const toolboxStore = useToolboxStore();

// // èµ°èˆªè®¾å¤‡
// export const useGridStore = defineStore('grid', () => {
//   const selectedGrid = 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 };
// });

 src/stores/satellite-grid.js

@@ -22,6 +22,11 @@
      return v.type == 1;
    });
  });
  // ç½‘格数据详情
  const gridDataDetailMap = new Map();
  const selectedGridData = ref(undefined)

  const selectedGridDataDetail = ref(undefined)

  // èŽ·å–网格信息
  function fetchGridCell(groupId) {
@@ -38,12 +43,17 @@
  }

  // èŽ·å–遥测单日具体网格监测数据
  function fetchGridDataDetail(gridData) {
    return gridApi
      .fetchGridDataDetail(gridData.id, gridData.groupId)
      .then((res) => {
        gridData.dataDetail = res.data;
  function fetchGridDataDetail(gridData, callback) {
    if (gridDataDetailMap.has(gridData.id)) {
      selectedGridData.value = gridDataDetailMap.get(gridData.id);
      callback(selectedGridData.value);
    } else {
      gridApi.fetchGridDataDetail(gridData.id, gridData.groupId).then((res) => {
        gridDataDetailMap.set(gridData.id, res.data);
        selectedGridData.value = res.data;
        callback(selectedGridData.value);
      });
    }
  }

  return {
@@ -51,6 +61,7 @@
    allGridDataList,
    gridDataList,
    mixGridDataList,
    selectedGridData,
    fetchGridCell,
    fetchGridData,
    fetchGridDataDetail

 src/utils/grid/map-grid.js

 src/views/HomePage.vue

@@ -10,7 +10,7 @@
      <!-- <MapLocation></MapLocation> -->
      <SceneSearch></SceneSearch>
      <MapScene></MapScene>
      <el-button
      <!-- <el-button
        @click="satelliteImportVisible = !satelliteImportVisible"
        type="primary"
        class="el-button-custom satellite-right-top p-events-auto"
@@ -21,7 +21,8 @@
        type="primary"
        class="el-button-custom aod-right-top p-events-auto"
        >AOD数据导入</el-button
      >
      > -->
      <ProductManage class="satellite-right-top"></ProductManage>
    </el-row>
    <!-- <CoreMenu></CoreMenu> -->
    <router-view></router-view>
@@ -35,6 +36,7 @@
import { ref } from 'vue';
import SatelliteImport from './satellitetelemetry/component/SatelliteImport.vue';
import AODImport from './satellitetelemetry/component/AODImport.vue';
import ProductManage from './dataproduct/ProductManage.vue';
const satelliteImportVisible = ref(false);
const aodImportVisible = ref(false);
</script>

 src/views/dataproduct/ProductManage.vue

@@ -1,46 +1,46 @@
<template>
  <div>
    <el-button
      @click="satelliteImportVisible = !satelliteImportVisible"
      @click="dialogVisible = !dialogVisible"
      type="primary"
      class="el-button-custom satellite-right-top p-events-auto"
      >AOD数据导入</el-button
      class="el-button-custom p-events-auto"
      >数据产品</el-button
    >
  </div>

  <el-table
    :data="gridDataList"
    table-layout="fixed"
    size="small"
    :show-overflow-tooltip="true"
    border
    height="50vh"
    row-class-name="t-row-normal"
    cell-class-name="t-cell"
    header-row-class-name="t-header-row"
    header-cell-class-name="t-header-cell"
    :highlight-current-row="true"
    @row-click="handleRowClick"
  >
    <el-table-column type="index" label="序号" align="center" width="50" />
    <el-table-column
      prop="dataTime"
      label="时间"
      align="center"
      :formatter="timeFormatter"
      width="150"
    />
    <el-table-column
      prop="type"
      label="数据类型"
      align="center"
      :formatter="dataTypeFormatter"
      width="150"
    />
  </el-table>
    <CardDialog
      draggable
      :modal="false"
      title="数据产品管理"
      v-model="dialogVisible"
      width="600px"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="初级产品制作" name="first">
          <ProductMake></ProductMake>
        </el-tab-pane>
        <el-tab-pane label="AOD数据导入" name="second">
          <AODImport></AODImport>
        </el-tab-pane>
        <el-tab-pane label="初级产品导入" name="third">
          <SatelliteImport></SatelliteImport>
        </el-tab-pane>
        <el-tab-pane label="二级产品制作" name="fourth">
          
        </el-tab-pane>
      </el-tabs>
    </CardDialog>
  </div>
</template>
<script setup>
import SatelliteImport from "@/views/satellitetelemetry/component/SatelliteImport.vue";
import AODImport from "@/views/satellitetelemetry/component/AODImport.vue";
import ProductMake from "@/views/dataproduct/component/ProductMake.vue";
import { ref, onMounted } from 'vue';

const dialogVisible = ref(false);
const activeName = ref('first');



// AOD数据拟合，生成初级数据产品
// 1. å¯è‡ªåŠ¨é€šè¿‡å…¬å¼æ‹Ÿåˆä¸ºPM2.5数据，用户可修改相关参数；
@@ -50,3 +50,11 @@
// 1. AOD数据导入
// 2. AOD数据拟合，选择AOD数据组、展示已有结果、调整参数、显示对应时间的背景数据、提供结果生成二次确认允许调整参数重复生成、存储或更新结果
</script>
<style scoped>
::v-deep .el-tabs__item {
  color: white;
}
::v-deep .is-active {
  color: #23dad0a2;
}
</style>

 src/views/dataproduct/component/ProductMake.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,199 @@
<template>
  <el-form
    :inline="true"
    :model="formObj"
    :rules="rules"
    ref="formRef"
    label-position="right"
    label-width="80px"
  >
    <SatelliteSearchBar
      label-width="80px"
      :loading="loading"
      @search="onSearchAOD"
    ></SatelliteSearchBar>
    <OptionAOD ref="optionAODRef" v-model="aodData"></OptionAOD>
    <el-form-item label="产品记录">
      <el-text :type="historyGridData ? 'warning' : 'success'">{{
        historyGridData ? '已生成' : '未生成'
      }}</el-text>
    </el-form-item>
    <el-form-item label="拟合公式">
      <div>
        y =
        <el-input-number
          v-model="a"
          :precision="2"
          controls-position="right"
          :controls="false"
          placeholder="请输入系数a"
          size="small"
        />
        x +
        <el-input-number
          v-model="b"
          :precision="2"
          controls-position="right"
          :controls="false"
          placeholder="请输入系数b"
          size="small"
        />
      </div>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        class="el-button-custom"
        size="small"
        @click="handleShowAODClick"
      >
        {{ '显示AOD数据' }}
      </el-button>
      <el-button
        type="primary"
        class="el-button-custom"
        size="small"
        @click="handlePreviewClick"
      >
        {{ '拟合预览' }}
      </el-button>
      <el-button
        type="primary"
        class="el-button-custom"
        size="small"
        @click="handleSaveClick"
      >
        {{ '保存拟合结果' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, watch } from 'vue';
import gridApi from '@/api/gridApi';
import aodApi from '@/api/aodApi';
import moment from 'moment';
import SatelliteSearchBar from '@/views/satellitetelemetry/component/SatelliteSearchBar.vue';
import { SatelliteProxy } from '@/views/satellitetelemetry/SatelliteProxy';

const satelliteProxy = new SatelliteProxy();

const optionAODRef = ref(null);

const gridGroup = ref(null);
const aodData = ref(null);
const aodDataDetail = ref(null);
const historyGridData = ref(null);
const a = ref(null);
const b = ref(null);
const tempGridDataDetailList = ref(null);

function handleShowAODClick() {
  if (aodDataDetail.value) {
    showAOD(aodDataDetail.value);
  } else {
    _fetchAODDetail().then((res) => {
      showAOD(res);
    });
  }
}

// è®¡ç®—PM2.5结果，后续应该在后端实现
function calculatePM25(aod) {
  return Math.round((a.value * aod + b.value) * 100) / 100;
}

function handlePreviewClick() {
  if (aodDataDetail.value) {
    showPreview(aodDataDetail.value);
  } else {
    _fetchAODDetail().then((res) => {
      showPreview(res);
    });
  }
}

function showAOD(data) {
  const _aod = data.map((v, i) => {
    return {
      groupId: v.groupId,
      cellId: v.cellId,
      pm25: v.aod,
      rank: i + 1
    };
  });
  satelliteProxy.drawGrid({
    gridData: _aod,
    showDataTxt: true,
    showRankTxt: true
  });
}

function showPreview(data) {
  tempGridDataDetailList.value = data.map((v, i) => {
    return {
      groupId: v.groupId,
      cellId: v.cellId,
      pm25: calculatePM25(v.aod),
      rank: i + 1
    };
  });
  tempGridDataDetailList.value.sort((a, b) => {
    return b.pm25 - a.pm25;
  });
  satelliteProxy.drawGrid({
    gridData: tempGridDataDetailList.value,
    showDataTxt: true,
    showRankTxt: true
  });
}

function handleSaveClick() {}

function _fetchAODDetail() {
  return aodApi
    .fetchAODDetail(aodData.value.id, gridGroup.value.id)
    .then((res) => {
      res.data.sort((a, b) => {
        return b.aod - a.aod;
      });
      aodDataDetail.value = res.data;
      return res.data;
    });
}

function onSearchAOD(options) {
  gridGroup.value = options;
  gridApi.fetchGridCell(options.id).then((res) => {
    satelliteProxy.gridPrepare(res.data);
  });
  optionAODRef.value.fetchAOD(options.id);
}

function checkHistoryGridData() {
  if (aodData.value) {
    const groupId = gridGroup.value.id;
    const dataTime = moment(aodData.value.dataTime).format(
      'YYYY-MM-DD HH:mm:ss'
    );
    // åŽŸå§‹å«æ˜Ÿæ•°æ®
    const type = 0;
    return gridApi.fetchGridData(groupId, dataTime, type).then((res) => {
      if (res.data.length > 0) {
        historyGridData.value = res.data[0];
      } else {
        historyGridData.value = null;
      }
    });
  } else {
    historyGridData.value = null;
  }
}

watch(aodData, (nv, ov) => {
  if (nv != ov) {
    aodDataDetail.value = null;
    checkHistoryGridData();
  }
});
</script>

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -2,188 +2,542 @@
import gridMapUtil from '@/utils/map/grid';
import { map, onMapMounted } from '@/utils/map/index_old';

let districtPolygon;
// ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
function drawDistrict(districtName, isNew) {
  onMapMounted(() => {
    if (districtPolygon && !isNew) {
      map.remove(districtPolygon);
      map.add(districtPolygon);
    } else {
      // eslint-disable-next-line no-undef
      var district = new AMap.DistrictSearch({
        extensions: 'all', //返回行政区边界坐标等具体信息
        level: 'district' //设置查询行政区级别为区
      });
      district.search(districtName, function (status, result) {
        var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
        if (bounds) {
          for (var i = 0; i < bounds.length; i++) {
            //生成行政区划 polygon
            // eslint-disable-next-line no-undef
            districtPolygon = new AMap.Polygon({
              map: map, //显示该覆盖物的地图对象
              strokeWeight: 2, //轮廓线宽度
              path: bounds[i], //多边形轮廓线的节点坐标数组
              fillOpacity: 0, //多边形填充透明度
              fillColor: '#CCF3FF', //多边形填充颜色
              // strokeColor: '#ffffff' //线条颜色
              strokeColor: '#0552f7', //线条颜色
              zIndex: 9
            });
          }
          map.setFitView(); //将覆盖物调整到合适视野
        }
      });
    }
  });
}
export class SatelliteProxy {
  // åœ°å›¾ç½‘格相关对象
  mapViews;

function clearAll(mapViews) {
  if (mapViews) {
    if (typeof mapViews.textViews === 'object') {
      map.remove(mapViews.textViews);
    }
    if (typeof mapViews.gridViews === 'object') {
      map.remove(mapViews.gridViews);
    }
  }
}

function clearText(mapViews) {
  if (mapViews) {
    if (typeof mapViews.dataTxt === 'object') {
      map.remove(mapViews.dataTxt);      
    }
    if (typeof mapViews.dataLayer === 'object') {
      map.remove(mapViews.dataLayer);      
    }
    if (typeof mapViews.rankTxt === 'object') {
      map.remove(mapViews.rankTxt);      
    }
    if (typeof mapViews.rankLayer === 'object') {
      map.remove(mapViews.rankLayer);      
    }
  }
}

// ç»˜åˆ¶ç½‘格线
function drawPolyline(gridInfo, event) {
  // ç»˜åˆ¶ç½‘æ ¼
  const points = gridInfo.map((v) => {
    return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
    // return [v.longitude, v.latitude];
  });
  // const gridPoints = gridMapUtil.parseGridPoint(points);
  // console.log('gridPoints:', gridPoints);

  const gridPoints = gridInfo.map((v, i) => {
    return {
      path: [
        calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
        calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
        calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
        calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
        // [v.point1Lon, v.point1Lat],
        // [v.point2Lon, v.point2Lat],
        // [v.point3Lon, v.point3Lat],
        // [v.point4Lon, v.point4Lat]
      ]
  districtPolygon;
  // ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
  drawDistrict(districtName, isNew) {
    onMapMounted(() => {
      if (this.districtPolygon && !isNew) {
        map.remove(this.districtPolygon);
        map.add(this.districtPolygon);
      } else {
        // eslint-disable-next-line no-undef
        .map((d) => new AMap.LngLat(d[0], d[1])),
      extData: points[i]
    };
  });
  const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
  return { gridViews, gridPoints, points };
}
        var district = new AMap.DistrictSearch({
          extensions: 'all', //返回行政区边界坐标等具体信息
          level: 'district' //设置查询行政区级别为区
        });
        district.search(districtName, (status, result) => {
          var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
          if (bounds) {
            for (var i = 0; i < bounds.length; i++) {
              //生成行政区划 polygon
              // eslint-disable-next-line no-undef
              this.districtPolygon = new AMap.Polygon({
                map: map, //显示该覆盖物的地图对象
                strokeWeight: 2, //轮廓线宽度
                path: bounds[i], //多边形轮廓线的节点坐标数组
                fillOpacity: 0, //多边形填充透明度
                fillColor: '#CCF3FF', //多边形填充颜色
                // strokeColor: '#ffffff' //线条颜色
                strokeColor: '#0552f7', //线条颜色
                zIndex: 9
              });
            }
            map.setFitView(); //将覆盖物调整到合适视野
          }
        });
      }
    });
  }

// ç»˜åˆ¶ç›‘测数据值
function drawDataText(points, gridDataDetail, textViews, labelsLayer) {
  const data = gridDataDetail.map((v, i) => {
    return {
      lnglat_GD: points[i],
      // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
      data: v.pm25 ? v.pm25 : ''
    };
  });
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
  return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
}
  clearAll(mapViews) {
    if (mapViews) {
      if (typeof mapViews.gridViews === 'object') {
        map.remove(mapViews.gridViews);
      }
    }
    this.clearText(mapViews);
  }

// ç»˜åˆ¶ç›‘测数据排名文本
function drawRankText(points, gridDataDetail, textViews, labelsLayer) {
  const data = gridDataDetail.map((v, i) => {
    return {
      lnglat_GD: points[i],
      // data: v.pm25 ? ('排名: ' + v.rank) : ''
      data: v.pm25 ? v.rank : ''
    };
  });
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
  return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
}
  clearText(mapViews) {
    if (mapViews) {
      if (typeof mapViews.dataTxt === 'object') {
        map.remove(mapViews.dataTxt);
      }
      if (typeof mapViews.dataLayer === 'object') {
        map.remove(mapViews.dataLayer);
      }
      if (typeof mapViews.rankTxt === 'object') {
        map.remove(mapViews.rankTxt);
      }
      if (typeof mapViews.rankLayer === 'object') {
        map.remove(mapViews.rankLayer);
      }
    }
  }

// ç»˜åˆ¶ç›‘测数据值对应网格颜色
function drawColor({
  gridViews,
  points,
  gridDataDetail,
  lastGridViews,
  opacity,
  zIndex,
  customColor
}) {
  // æ ¹æ®æ•°æ®ç­›é€‰æœ‰æ•°æ®çš„网格
  const res = [];
  // ä»¥åŠå¯¹åº”的中心点坐标
  const pointsRes = [];
  gridDataDetail.forEach((d) => {
    // æ ¹æ®æ•°æ®å…³è”的网格编号，找到对应网格
    const cellId = d.cellId;
    if (cellId > gridViews.length) {
      throw Error(
        '遥测数据的网格索引编号超出网格组范围，数据和网格组可能不对应'
  // ç»˜åˆ¶ç½‘格线
  drawPolyline(gridInfo, event) {
    // ç»˜åˆ¶ç½‘æ ¼
    const points = gridInfo.map((v) => {
      return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
      // return [v.longitude, v.latitude];
    });
    // const gridPoints = gridMapUtil.parseGridPoint(points);
    // console.log('gridPoints:', gridPoints);

    const gridPoints = gridInfo.map((v, i) => {
      return {
        path: [
          calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
          calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
          calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
          calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
          // [v.point1Lon, v.point1Lat],
          // [v.point2Lon, v.point2Lat],
          // [v.point3Lon, v.point3Lat],
          // [v.point4Lon, v.point4Lat]
        ]
          // eslint-disable-next-line no-undef
          .map((d) => new AMap.LngLat(d[0], d[1])),
        extData: points[i]
      };
    });
    const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
    return { gridViews, gridPoints, points };
  }

  // ç»˜åˆ¶ç›‘测数据值
  drawDataText(points, gridDataDetail, textViews, labelsLayer) {
    const data = gridDataDetail.map((v, i) => {
      return {
        lnglat_GD: points[i],
        // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
        data: v.pm25 ? v.pm25 : ''
      };
    });
    // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
    return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
  }

  // ç»˜åˆ¶ç›‘测数据排名文本
  drawRankText(points, gridDataDetail, textViews, labelsLayer) {
    const data = gridDataDetail.map((v, i) => {
      return {
        lnglat_GD: points[i],
        // data: v.pm25 ? ('排名: ' + v.rank) : ''
        data: v.pm25 ? v.rank : ''
      };
    });
    // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
    return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
  }

  // ç»˜åˆ¶ç›‘测数据值对应网格颜色
  drawColor({
    gridViews,
    points,
    gridDataDetail,
    lastGridViews,
    opacity,
    zIndex,
    customColor
  }) {
    // æ ¹æ®æ•°æ®ç­›é€‰æœ‰æ•°æ®çš„网格
    const res = [];
    // ä»¥åŠå¯¹åº”的中心点坐标
    const pointsRes = [];
    gridDataDetail.forEach((d) => {
      // æ ¹æ®æ•°æ®å…³è”的网格编号，找到对应网格
      const cellId = d.cellId;
      if (cellId > gridViews.length) {
        throw Error(
          '遥测数据的网格索引编号超出网格组范围，数据和网格组可能不对应'
        );
      }
      res.push(gridViews[cellId - 1]);
      pointsRes.push(points[cellId - 1]);
    });

    // æ ¹æ®ç»˜åˆ¶é¢œè‰²æ–¹å¼ç»˜åˆ¶ç½‘æ ¼
    let resGridViews;
    if (customColor) {
      resGridViews = gridMapUtil.drawGridColorCustom(
        res,
        gridDataDetail,
        opacity,
        zIndex
      );
    } else {
      resGridViews = gridMapUtil.drawGridColor(
        res,
        gridDataDetail,
        'PM25',
        opacity,
        zIndex
      );
    }
    res.push(gridViews[cellId - 1]);
    pointsRes.push(points[cellId - 1]);
  });

  // æ ¹æ®ç»˜åˆ¶é¢œè‰²æ–¹å¼ç»˜åˆ¶ç½‘æ ¼
  let resGridViews;
  if (customColor) {
    resGridViews = gridMapUtil.drawGridColorCustom(
      res,
      gridDataDetail,
      opacity,
      zIndex
    );
  } else {
    resGridViews = gridMapUtil.drawGridColor(
      res,
      gridDataDetail,
      'PM25',
      opacity,
      zIndex
    );
    if (lastGridViews) {
      map.remove(lastGridViews);
    }
    map.add(resGridViews);
    map.setFitView(resGridViews);

    return { resGridViews, pointsRes };
  }

  if (lastGridViews) {
    map.remove(lastGridViews);
  // å«æ˜Ÿç½‘格配置准备
  gridPrepare(gridInfo, event) {
    // clearText(mapViews);
    this.clearAll(this.mapViews);
    this.mapViews = this.drawPolyline(gridInfo, event);
  }
  map.add(resGridViews);
  map.setFitView(resGridViews);

  return { resGridViews, pointsRes };
  // ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
  drawGrid({
    gridData,
    useCustomColor,
    opacity,
    zIndex,
    showDataTxt,
    showRankTxt
  }) {
    // SatelliteProxy.clearText(mapViews);
    const { resGridViews, pointsRes } = this.drawColor({
      gridViews: this.mapViews.gridViews,
      points: this.mapViews.points,
      gridDataDetail: gridData,
      lastGridViews: this.mapViews.lastGridViews,
      customColor: useCustomColor,
      opacity: opacity,
      zIndex: zIndex
    });
    this.mapViews.lastGridViews = resGridViews;
    this.mapViews.lastPoints = pointsRes;

    // æ•°æ®æ ‡è®°
    const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
      this.mapViews.lastPoints,
      gridData,
      this.mapViews.dataTxt,
      this.mapViews.dataLayer
    );
    this.mapViews.dataTxt = dataTxt;
    this.mapViews.dataLayer = dataLayer;

    const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
      this.mapViews.lastPoints,
      gridData,
      this.mapViews.rankTxt,
      this.mapViews.rankLayer
    );
    this.mapViews.rankTxt = rankTxt;
    this.mapViews.rankLayer = rankLayer;

    if (showDataTxt) {
      map.add(this.mapViews.dataTxt);
    }

    if (showRankTxt) {
      map.add(this.mapViews.rankTxt);
    }
  }

  // è°ƒæ•´å„类地图覆盖物的可见性
  changeVisibility({ showGridViews, showDataTxt, showRankTxt }) {
    if (showGridViews != undefined) {
      showGridViews
        ? map.add(this.mapViews.lastGridViews)
        : map.remove(this.mapViews.lastGridViews);
    }
    if (showDataTxt != undefined) {
      showDataTxt
        ? map.add(this.mapViews.dataTxt)
        : map.remove(this.mapViews.dataTxt);
    }
    if (showRankTxt != undefined) {
      showRankTxt
        ? map.add(this.mapViews.rankTxt)
        : map.remove(this.mapViews.rankTxt);
    }
  }

  changeGridOpacity({ isOpacity, opacityValue }) {
    this.mapViews.lastGridViews.forEach((e) => {
      e.setOptions({
        fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7
      });
    });
  }

  setGridEvent(event) {
    this.mapViews.gridViews.forEach((polygon) => {
      event(polygon);
    });
  }

  
}

export default {
  drawDistrict,
  drawPolyline,
  drawDataText,
  drawRankText,
  drawColor,
  clearText,
  clearAll
};
// // åœ°å›¾ç½‘格相关对象
// let mapViews;

// let districtPolygon;
// // ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
// function drawDistrict(districtName, isNew) {
//   onMapMounted(() => {
//     if (districtPolygon && !isNew) {
//       map.remove(districtPolygon);
//       map.add(districtPolygon);
//     } else {
//       // eslint-disable-next-line no-undef
//       var district = new AMap.DistrictSearch({
//         extensions: 'all', //返回行政区边界坐标等具体信息
//         level: 'district' //设置查询行政区级别为区
//       });
//       district.search(districtName, function (status, result) {
//         var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
//         if (bounds) {
//           for (var i = 0; i < bounds.length; i++) {
//             //生成行政区划 polygon
//             // eslint-disable-next-line no-undef
//             districtPolygon = new AMap.Polygon({
//               map: map, //显示该覆盖物的地图对象
//               strokeWeight: 2, //轮廓线宽度
//               path: bounds[i], //多边形轮廓线的节点坐标数组
//               fillOpacity: 0, //多边形填充透明度
//               fillColor: '#CCF3FF', //多边形填充颜色
//               // strokeColor: '#ffffff' //线条颜色
//               strokeColor: '#0552f7', //线条颜色
//               zIndex: 9
//             });
//           }
//           map.setFitView(); //将覆盖物调整到合适视野
//         }
//       });
//     }
//   });
// }

// function clearAll(mapViews) {
//   if (mapViews) {
//     if (typeof mapViews.gridViews === 'object') {
//       map.remove(mapViews.gridViews);
//     }
//   }
//   clearText(mapViews);
// }

// function clearText(mapViews) {
//   if (mapViews) {
//     if (typeof mapViews.dataTxt === 'object') {
//       map.remove(mapViews.dataTxt);
//     }
//     if (typeof mapViews.dataLayer === 'object') {
//       map.remove(mapViews.dataLayer);
//     }
//     if (typeof mapViews.rankTxt === 'object') {
//       map.remove(mapViews.rankTxt);
//     }
//     if (typeof mapViews.rankLayer === 'object') {
//       map.remove(mapViews.rankLayer);
//     }
//   }
// }

// // ç»˜åˆ¶ç½‘格线
// function drawPolyline(gridInfo, event) {
//   // ç»˜åˆ¶ç½‘æ ¼
//   const points = gridInfo.map((v) => {
//     return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
//     // return [v.longitude, v.latitude];
//   });
//   // const gridPoints = gridMapUtil.parseGridPoint(points);
//   // console.log('gridPoints:', gridPoints);

//   const gridPoints = gridInfo.map((v, i) => {
//     return {
//       path: [
//         calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
//         calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
//         calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
//         calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
//         // [v.point1Lon, v.point1Lat],
//         // [v.point2Lon, v.point2Lat],
//         // [v.point3Lon, v.point3Lat],
//         // [v.point4Lon, v.point4Lat]
//       ]
//         // eslint-disable-next-line no-undef
//         .map((d) => new AMap.LngLat(d[0], d[1])),
//       extData: points[i]
//     };
//   });
//   const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
//   return { gridViews, gridPoints, points };
// }

// // ç»˜åˆ¶ç›‘测数据值
// function drawDataText(points, gridDataDetail, textViews, labelsLayer) {
//   const data = gridDataDetail.map((v, i) => {
//     return {
//       lnglat_GD: points[i],
//       // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
//       data: v.pm25 ? v.pm25 : ''
//     };
//   });
//   // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
//   return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
// }

// // ç»˜åˆ¶ç›‘测数据排名文本
// function drawRankText(points, gridDataDetail, textViews, labelsLayer) {
//   const data = gridDataDetail.map((v, i) => {
//     return {
//       lnglat_GD: points[i],
//       // data: v.pm25 ? ('排名: ' + v.rank) : ''
//       data: v.pm25 ? v.rank : ''
//     };
//   });
//   // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
//   return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
// }

// // ç»˜åˆ¶ç›‘测数据值对应网格颜色
// function drawColor({
//   gridViews,
//   points,
//   gridDataDetail,
//   lastGridViews,
//   opacity,
//   zIndex,
//   customColor
// }) {
//   // æ ¹æ®æ•°æ®ç­›é€‰æœ‰æ•°æ®çš„网格
//   const res = [];
//   // ä»¥åŠå¯¹åº”的中心点坐标
//   const pointsRes = [];
//   gridDataDetail.forEach((d) => {
//     // æ ¹æ®æ•°æ®å…³è”的网格编号，找到对应网格
//     const cellId = d.cellId;
//     if (cellId > gridViews.length) {
//       throw Error(
//         '遥测数据的网格索引编号超出网格组范围，数据和网格组可能不对应'
//       );
//     }
//     res.push(gridViews[cellId - 1]);
//     pointsRes.push(points[cellId - 1]);
//   });

//   // æ ¹æ®ç»˜åˆ¶é¢œè‰²æ–¹å¼ç»˜åˆ¶ç½‘æ ¼
//   let resGridViews;
//   if (customColor) {
//     resGridViews = gridMapUtil.drawGridColorCustom(
//       res,
//       gridDataDetail,
//       opacity,
//       zIndex
//     );
//   } else {
//     resGridViews = gridMapUtil.drawGridColor(
//       res,
//       gridDataDetail,
//       'PM25',
//       opacity,
//       zIndex
//     );
//   }

//   if (lastGridViews) {
//     map.remove(lastGridViews);
//   }
//   map.add(resGridViews);
//   map.setFitView(resGridViews);

//   return { resGridViews, pointsRes };
// }

// // å«æ˜Ÿç½‘格配置准备
// function gridPrepare(gridInfo, event) {
//   // clearText(mapViews);
//   clearAll(mapViews);
//   mapViews = drawPolyline(gridInfo, event);
// }

// // ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
// function drawGrid({
//   gridData,
//   useCustomColor,
//   opacity,
//   zIndex,
//   showDataTxt,
//   showRankTxt
// }) {
//   // SatelliteProxy.clearText(mapViews);
//   const { resGridViews, pointsRes } = drawColor({
//     gridViews: mapViews.gridViews,
//     points: mapViews.points,
//     gridDataDetail: gridData,
//     lastGridViews: mapViews.lastGridViews,
//     customColor: useCustomColor,
//     opacity: opacity,
//     zIndex: zIndex
//   });
//   mapViews.lastGridViews = resGridViews;
//   mapViews.lastPoints = pointsRes;

//   // æ•°æ®æ ‡è®°
//   const { textViews: dataTxt, labelsLayer: dataLayer } = drawDataText(
//     mapViews.lastPoints,
//     gridData,
//     mapViews.dataTxt,
//     mapViews.dataLayer
//   );
//   mapViews.dataTxt = dataTxt;
//   mapViews.dataLayer = dataLayer;

//   const { textViews: rankTxt, labelsLayer: rankLayer } = drawRankText(
//     mapViews.lastPoints,
//     gridData,
//     mapViews.rankTxt,
//     mapViews.rankLayer
//   );
//   mapViews.rankTxt = rankTxt;
//   mapViews.rankLayer = rankLayer;

//   if (showDataTxt) {
//     map.add(mapViews.dataTxt);
//   }

//   if (showRankTxt) {
//     map.add(mapViews.rankTxt);
//   }
// }

// // è°ƒæ•´å„类地图覆盖物的可见性
// function changeVisibility({ showGridViews, showDataTxt, showRankTxt }) {
//   if (showGridViews != undefined) {
//     showGridViews ? map.add(mapViews.lastGridViews) : map.remove(mapViews.lastGridViews);
//   }
//   if (showDataTxt != undefined) {
//     showDataTxt ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
//   }
//   if (showRankTxt != undefined) {
//     showRankTxt ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
//   }
// }

// function changeGridOpacity({ isOpacity, opacityValue }) {
//   mapViews.lastGridViews.forEach((e) => {
//     e.setOptions({
//       fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7
//     });
//   });
// }

// export default {
//   drawDistrict,
//   drawPolyline,
//   drawDataText,
//   drawRankText,
//   drawColor,
//   gridPrepare,
//   drawGrid,
//   changeVisibility,
//   changeGridOpacity,
//   clearText,
//   clearAll
// };

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -1,4 +1,6 @@
<template>
  <SatelliteMixTool :group-id="3"></SatelliteMixTool>

  <el-row class="wrap">
    <el-col span="2">
      <!-- <div class="p-events-auto">
@@ -46,7 +48,6 @@
  </el-row>
  <SatelliteDataMix class="data-mix" @mix-data="handleMixDataClick">
  </SatelliteDataMix>
  <SatelliteMixTool :group-id="3"></SatelliteMixTool>

  <!-- <el-row class="historical" justify="center">
    <SatelliteAnimation
@@ -67,10 +68,12 @@
import SatelliteManage from './component/SatelliteManage.vue';
import SatelliteDataMix from './component/SatelliteDataMix.vue';
import SatelliteMixTool from './component/SatelliteMixTool.vue';
import SatelliteProxy from './SatelliteProxy';
import { SatelliteProxy } from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';
import { useSceneStore } from '@/stores/scene';

const satelliteProxy = new SatelliteProxy();

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
@@ -83,16 +86,12 @@
// ç½‘格数据详情
const gridDataDetailMap = new Map();
const gridDataDetailList = ref([]);
// åœ°å›¾ç½‘格相关对象
let mapViews;

// æŸ¥è¯¢ç½‘格信息和遥感数据组
function onSearch(options) {
  satelliteGridStore.fetchGridCell(options.id).then(() => {
    SatelliteProxy.clearText(mapViews);
    drawGrid(satelliteGridStore.gridInfo);
    // initDistrict();
    SatelliteProxy.drawDistrict('长宁区');
    prepareGrid(satelliteGridStore.gridInfo);
    satelliteProxy.drawDistrict('长宁区');
  });
  satelliteGridStore.fetchGridData(options.id).then(() => {
    max = satelliteGridStore.gridDataList.length;
@@ -127,9 +126,8 @@
  }
}

function drawGrid(gridInfo) {
  SatelliteProxy.clearAll(mapViews);
  mapViews = SatelliteProxy.drawPolyline(gridInfo, (polygon) => {
function prepareGrid(gridInfo) {
  satelliteProxy.gridPrepare(gridInfo, (polygon) => {
    //鼠标移入事件
    polygon.on('mouseover', () => {
      polygon.setOptions({
@@ -154,82 +152,31 @@
  });
}

// ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
function drawTextAndColor(gridData) {
  // SatelliteProxy.clearText(mapViews);
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: gridData,
    lastGridViews: mapViews.lastGridViews
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
  // æ–‡æœ¬æ ‡è®°
  const { textViews: dataTxt, labelsLayer: dataLayer } =
    SatelliteProxy.drawDataText(
      mapViews.lastPoints,
      gridData,
      mapViews.dataTxt,
      mapViews.dataLayer
    );
  mapViews.dataTxt = dataTxt;
  mapViews.dataLayer = dataLayer;
  const { textViews: rankTxt, labelsLayer: rankLayer } =
    SatelliteProxy.drawRankText(
      mapViews.lastPoints,
      gridData,
      mapViews.rankTxt,
      mapViews.rankLayer
    );
  mapViews.rankTxt = rankTxt;
  mapViews.rankLayer = rankLayer;
function drawGrid(gridData) {
  satelliteProxy.drawGrid({ gridData });
}

let selectedGridData;
function handleRowClick(row) {
  if (gridDataDetailMap.has(row.id)) {
    const gridData = gridDataDetailMap.get(row.id);
    selectedGridData = gridData;
    drawTextAndColor(gridData);
  } else {
    gridApi.fetchGridDataDetail(row.id, row.groupId).then((res) => {
      gridDataDetailMap.set(row.id, res.data);
      const gridData = res.data;
      selectedGridData = gridData;
      drawTextAndColor(gridData);
    });
  }
  satelliteGridStore.fetchGridDataDetail(row, drawGrid);
}

function handleRankClick(rankVisible) {
  // rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer);
  rankVisible ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
  satelliteProxy.changeVisibility({ showRankTxt: rankVisible });
}

function handleDataClick(dataVisible) {
  // dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
  dataVisible ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
  satelliteProxy.changeVisibility({ showDataTxt: dataVisible });
}

function handleColorClick(isStandardColor) {
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: selectedGridData,
    lastGridViews: mapViews.lastGridViews,
    customColor: !isStandardColor
  satelliteProxy.drawGrid({
    gridData: satelliteGridStore.selectedGridData,
    useCustomColor: !isStandardColor
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
}

function handleOpacityClick(isOpacity) {
  mapViews.lastGridViews.forEach((e) => {
    e.setOptions({
      fillOpacity: isOpacity ? 0.1 : 0.7
    });
  });
  satelliteProxy.changeGridOpacity({ isOpacity });
}

function handleMixDataClick(gridData) {

 src/views/satellitetelemetry/component/AODImport.vue

@@ -1,5 +1,5 @@
<template>
  <CardDialog title="AOD数据导入" :model-value="modelValue" :width="420" @changed="handleChange">
  <!-- <CardDialog title="AOD数据导入" :model-value="modelValue" :width="420" @changed="handleChange"> -->
    <div class="download">
      <el-button @click="downloadTemplate" type="primary" class="el-button-custom" size="small"
        v-loading="downloadLoading">下载模板</el-button>
@@ -44,11 +44,12 @@
        <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text>
      </el-form-item>
    </el-form>
  </CardDialog>
  <!-- </CardDialog> -->
</template>
<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
import gridApi from '@/api/gridApi';
import aodApi from '@/api/aodApi';
import { dayjs, ElMessage } from 'element-plus';
import { useFormConfirm } from '@/composables/formConfirm';

@@ -90,7 +91,7 @@

// é€šè¿‡ç½‘格组和时间 æŸ¥è¯¢ åœ¨è¿™ä¸¤ä¸ªå‚数条件下是否有网格数据，并提示在界面中有或者没有
const checkEmpty = () => {
  gridApi.fetchGridAod(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => {
  aodApi.fetchAOD(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => {
    if (res.data && res.data.length > 0) {
      hasGridAod.value = true;
    } else {

 src/views/satellitetelemetry/component/SatelliteImport.vue

@@ -1,5 +1,5 @@
<template>
  <CardDialog title="监测数据导入" :model-value="modelValue" :width="420" @changed="handleChange">
  <!-- <CardDialog title="监测数据导入" :model-value="modelValue" :width="420" @changed="handleChange"> -->
    <div class="download">
      <el-button @click="downloadTemplate" type="primary" class="el-button-custom" size="small"
        v-loading="downloadLoading">下载模板</el-button>
@@ -44,7 +44,7 @@
        <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text>
      </el-form-item>
    </el-form>
  </CardDialog>
  <!-- </CardDialog> -->
</template>
<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

 src/views/satellitetelemetry/component/SatelliteManage.vue

@@ -92,7 +92,6 @@
import SatelliteSearchBar from './SatelliteSearchBar.vue';
// import { useFetchData } from '@/composables/fetchData';
// import gridApi from '@/api/gridApi';
// import SatelliteProxy from '../SatelliteProxy';

// eslint-disable-next-line no-unused-vars
function timeFormatter(row, col, cellValue, index) {

 src/views/satellitetelemetry/component/SatelliteMixTool.vue

@@ -1,94 +1,104 @@
<template>
  <CardDialog
    v-model="dialogVisible"
    title="走航融合"
    draggable
    :modal="false"
    width="400px"
  >
    <template #default>
      <el-row>
        <OptionMission v-model="mission"></OptionMission>
        <el-text size="small" :type="fusionData ? 'success' : 'warning'">{{
          fusionData ? '走航数据已融合' : '走航数据未融合'
        }}</el-text>
      </el-row>
      <el-row>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          :disabled="!gridCellList || !fusionData"
          @click="handleFusionClick"
        >
          {{ '叠加融合' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleGridClick"
        >
          {{ gridVisible ? '隐藏融合' : '显示融合' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          :loading="loading"
          @click="handleUnderwayClick"
        >
          {{ underwayVisible ? '隐藏走航路线' : '显示走航路线' }}
        </el-button>
      </el-row>
      <el-row class="m-t-8">
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleRankClick"
        >
          {{ rankVisible ? '隐藏排名' : '显示排名' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleDataClick"
        >
          {{ dataVisible ? '隐藏数据' : '显示数据' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleColorClick"
        >
          {{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleOpacityClick"
        >
          {{ !isOpacity ? '透明化' : '取消透明化' }}
        </el-button>
      </el-row>
    </template>
    <template #footer>
      <el-row justify="start" align="middle" class="p-b-2 one-row">
        <!-- <el-text size="small" type="warning">搜索范围</el-text> -->
      </el-row>
    </template>
  </CardDialog>
  <div>
    <el-button
      @click="dialogVisible = !dialogVisible"
      type="primary"
      class="el-button-custom p-events-auto"
      >走航融合</el-button
    >
    <CardDialog
      v-model="dialogVisible"
      title="走航融合"
      draggable
      :modal="false"
      width="400px"
    >
      <template #default>
        <el-row>
          <OptionMission v-model="mission"></OptionMission>
          <el-text size="small" :type="fusionData ? 'success' : 'warning'">{{
            fusionData ? '走航数据已融合' : '走航数据未融合'
          }}</el-text>
        </el-row>
        <el-row>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            :disabled="!gridCellList || !fusionData"
            @click="handleFusionClick"
          >
            {{ '叠加融合' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleGridClick"
          >
            {{ gridVisible ? '隐藏融合' : '显示融合' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            :loading="loading"
            @click="handleUnderwayClick"
          >
            {{ underwayVisible ? '隐藏走航路线' : '显示走航路线' }}
          </el-button>
        </el-row>
        <el-row class="m-t-8">
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleRankClick"
          >
            {{ rankVisible ? '隐藏排名' : '显示排名' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleDataClick"
          >
            {{ dataVisible ? '隐藏数据' : '显示数据' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleColorClick"
          >
            {{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleOpacityClick"
          >
            {{ !isOpacity ? '透明化' : '取消透明化' }}
          </el-button>
        </el-row>
      </template>
      <template #footer>
        <el-row justify="start" align="middle" class="p-b-2 one-row">
          <!-- <el-text size="small" type="warning">搜索范围</el-text> -->
        </el-row>
      </template>
    </CardDialog>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from 'moment';
import { map, onMapMounted } from '@/utils/map/index_old';
import gridApi from '@/api/gridApi';
import SatelliteProxy from '../SatelliteProxy';
import { SatelliteProxy } from '../SatelliteProxy';

const satelliteProxy = new SatelliteProxy();

const props = defineProps({
  groupId: {
@@ -97,7 +107,7 @@
  }
});

const dialogVisible = ref(true);
const dialogVisible = ref(false);
const mission = ref(undefined);

const gridCellList = ref(undefined);
@@ -111,9 +121,6 @@
const isStandardColor = ref(true);
const isOpacity = ref(false);

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

// æ£€æŸ¥èµ°èˆªæ•°æ®æ˜¯å¦å’Œ100米网格已融合
function checkUnderwayFusionResult() {
  const time = moment(mission.value.startTime).format('YYYY-MM-DD HH:mm:ss');
@@ -126,42 +133,22 @@
  });
}

function drawGrid(gridInfo) {
  SatelliteProxy.clearAll(mapViews);
  mapViews = SatelliteProxy.drawPolyline(gridInfo);
function resetButton() {
  gridVisible.value = true;
  underwayVisible.value = false;
  rankVisible.value = false;
  dataVisible.value = false;
  isStandardColor.value = true;
  isOpacity.value = false;
}

function prepareGrid(gridInfo) {
  satelliteProxy.gridPrepare(gridInfo);
}

// ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
function drawTextAndColor(gridData) {
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: gridData,
    lastGridViews: mapViews.lastGridViews,
    opacity: 1,
    zIndex: 11
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
  // æ–‡æœ¬æ ‡è®°
  const { textViews: dataTxt, labelsLayer: dataLayer } =
    SatelliteProxy.drawDataText(
      mapViews.lastPoints,
      gridData,
      mapViews.dataTxt,
      mapViews.dataLayer
    );
  mapViews.dataTxt = dataTxt;
  mapViews.dataLayer = dataLayer;
  const { textViews: rankTxt, labelsLayer: rankLayer } =
    SatelliteProxy.drawRankText(
      mapViews.lastPoints,
      gridData,
      mapViews.rankTxt,
      mapViews.rankLayer
    );
  mapViews.rankTxt = rankTxt;
  mapViews.rankLayer = rankLayer;
function drawGrid(gridData) {
  satelliteProxy.drawGrid({ gridData, opacity: 1, zIndex: 11 });
}

watch(mission, (nV, oV) => {
@@ -174,10 +161,10 @@
watch(
  () => props.groupId,
  (nV, oV) => {
    if (nV != oV) {
    if (dialogVisible.value && nV != oV) {
      gridApi.fetchGridCell(nV).then((res) => {
        gridCellList.value = res.data;
        drawGrid(gridCellList.value);
        prepareGrid(gridCellList.value);
      });
    }
  },
@@ -186,29 +173,37 @@
  }
);

watch(dialogVisible, (nV, oV) => {
  if (nV != oV) {
    gridApi.fetchGridCell(props.groupId).then((res) => {
      gridCellList.value = res.data;
      prepareGrid(gridCellList.value);
    });
  }
});

let selectedGridData;
// å åŠ èžåˆ
function handleFusionClick() {
  // resetButton();
  const d = fusionData.value;
  if (gridDataDetailMap.has(d.id)) {
    const gridData = gridDataDetailMap.get(d.id);
    selectedGridData = gridData;
    drawTextAndColor(gridData);
    drawGrid(gridData);
  } else {
    gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
      gridDataDetailMap.set(d.id, res.data);
      const gridData = res.data;
      selectedGridData = gridData;
      drawTextAndColor(gridData);
      drawGrid(gridData);
    });
  }
}

function handleGridClick() {
  gridVisible.value = !gridVisible.value;
  gridVisible.value
    ? map.add(mapViews.lastGridViews)
    : map.remove(mapViews.lastGridViews);
  satelliteProxy.changeVisibility({ showGridViews: gridVisible.value });
}

function handleUnderwayClick() {
@@ -218,36 +213,27 @@

function handleRankClick() {
  rankVisible.value = !rankVisible.value;
  rankVisible.value ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
  satelliteProxy.changeVisibility({ showRankTxt: rankVisible.value });
}

function handleDataClick() {
  dataVisible.value = !dataVisible.value;
  dataVisible.value ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
  satelliteProxy.changeVisibility({ showDataTxt: dataVisible.value });
}

function handleColorClick() {
  isStandardColor.value = !isStandardColor.value;
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: selectedGridData,
    lastGridViews: mapViews.lastGridViews,
    customColor: !isStandardColor.value,
  satelliteProxy.drawGrid({
    gridData: selectedGridData,
    useCustomColor: !isStandardColor.value,
    opacity: 1,
    zIndex: 11
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
}

function handleOpacityClick() {
  isOpacity.value = !isOpacity.value;
  mapViews.lastGridViews.forEach((e) => {
    e.setOptions({
      fillOpacity: isOpacity.value ? 0.1 : 1
    });
  });
  satelliteProxy.changeGridOpacity({ opacityValue: isOpacity.value ? 0.1 : 1 });
}

/**走航轨迹*******************************************************************/

 src/views/satellitetelemetry/component/SatelliteSearchBar.vue

@@ -1,6 +1,6 @@
<template>
  <el-row>
    <el-col :span="20">
  <!-- <el-row> -->
    <!-- <el-col :span="20"> -->
      <el-form label-position="right" label-width="60px" :inline="false">
        <el-form-item label="区域">
          <OptionLocation2
@@ -16,9 +16,9 @@
          v-model="gridGroup"
        ></OptionGridGroup>
      </el-form>
    </el-col>
    <el-col :span="4">
      <el-form-item>
    <!-- </el-col> -->
    <!-- <el-col :span="4"> -->
      <!-- <el-form-item>
        <el-button
          :loading="loading"
          :disabled="!gridGroup"
@@ -29,15 +29,15 @@
        >
          æŸ¥è¯¢
        </el-button>
      </el-form-item>
    </el-col>
  </el-row>
      </el-form-item> -->
    <!-- </el-col> -->
  <!-- </el-row> -->
</template>
<script setup>
import { ref, watch } from 'vue';

defineProps({
  loading: Boolean
  loading: Boolean,
});

const location = ref(undefined);
@@ -63,8 +63,9 @@
});

watch(gridGroup, (nv, ov) => {
  // é¦–次进入自动触发一次查询事件
  if (ov == undefined && nv != ov) {
  // è‡ªåŠ¨è§¦å‘一次查询事件
  // if (ov == undefined && nv != ov) {
  if (nv != ov) {
    handleClick();
  }
});