package.json

@@ -5,9 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
    "dev:jingan": "vite --mode development.jingan",
    "build": "vite build",
    "build:jingan": "vite build --mode production.jingan",
    "preview": "vite preview",
    "test:unit": "vitest",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",

 src/api/gridApi.js

@@ -26,6 +26,9 @@
  },

  /**
   * 
   * 
   * 
   * èŽ·å–网格组下的遥测数据
   * @param {*} groupId
   * @param {*} dataTime

 src/components.d.ts

@@ -33,19 +33,14 @@
    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']
    ElText: typeof import('element-plus/es')['ElText']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default']
    FactorLegend: typeof import('./components/monitor/FactorLegend.vue')['default']
    FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']

 src/stores/satellite-grid.js

@@ -4,15 +4,40 @@
import { useFetchData } from '@/composables/fetchData';

// å«æ˜Ÿé¥æµ‹ç½‘æ ¼
export const usesatelliteGridStore = defineStore('satelliteGrid', () => {
  const gridGropiList = ref([]);
  const { loading, fetchData } = useFetchData();
export const useSatelliteGridStore = defineStore('satelliteGrid', () => {
  // ç½‘格信息
  const gridInfo = ref([]);
  // ç½‘格数据组
  const gridDataList = ref([]);

  function fetchGridGroup(area) {
    return fetchData((page, pageSize) => {
      return gridApi.fetchGridGroup(area, page, pageSize).then((res) => {
        return res;
      });
  // èŽ·å–网格信息
  function fetchGridCell(groupId) {
    return gridApi.fetchGridCell(groupId).then((res) => {
      gridInfo.value = res.data;
    });
  }

  // èŽ·å–遥测单日数据信息
  function fetchGridData(groupId) {
    return gridApi.fetchGridData(groupId).then((res) => {
      gridDataList.value = res.data;
    });
  }

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

  return {
    gridInfo,
    gridDataList,
    fetchGridCell,
    fetchGridData,
    fetchGridDataDetail
  };
});

 src/utils/map/grid-animation.js

@@ -6,7 +6,8 @@
function GridAnimation() {
  // å¸§åŠ¨ç”»æŽ§åˆ¶å·¥å…·
  this.frameAnimation = new FrameAnimation();
  this.frameAnimation.fps = 6;
  this.frameAnimation.fps = 4;
  this.frameAnimation.timeout = 1000;
  // åœ°å›¾ç»˜åˆ¶å›¾å½¢ç¼“å­˜
  this.mapViews = {};
  // ä¸¤å¤©ä¹‹é—´çš„卫星遥测动画播放时间

 src/utils/map/grid.js

@@ -185,6 +185,26 @@
  },

  drawGridColor(gridViews, texts, factorName) {
    // new Promise((resolve, reject) => {
    //   gridViews.forEach((g, i) => {
    //     const data = parseFloat(texts[i]);
    //     const { color, nextColor, range, nextRange } =
    //       Legend.getStandardColorAndNext(factorName, data);
    //     const ratio = (data - range) / (nextRange - range);
    //     const _color = getColorBetweenTwoColors(
    //       color.map((v) => v * 255),
    //       nextColor.map((v) => v * 255),
    //       ratio
    //     );
    //     resolve({ g, _color, color });
    //   });
    // }).then((res) => {
    //   const { g, _color, color } = res;
    //   g.setOptions({
    //     fillColor: _color,
    //     fillOpacity: color[3]
    //   });
    // });
    gridViews.forEach((g, i) => {
      const data = parseFloat(texts[i]);
      const { color, nextColor, range, nextRange } =

 src/views/satellitetelemetry/SatelliteTelemetry copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,149 @@
<template>
  <div>
    <!-- <el-button
      class="p-events-auto"
      type="info"
      icon="Memo"
      plain
      @click="draw"
    >
      ç»˜åˆ¶ç½‘æ ¼
    </el-button> -->
    <SatelliteManage
      class="satellite-manage"
      :gridDataList="gridDataList"
      :loading="loading"
      @search="onSearch"
      @row-click="handleRowClick"
    ></SatelliteManage>
    <el-row class="historical" justify="center">
      <SatelliteAnimation
        :loading="animaLoading"
        :grid-data="gridDataDetailList"
        :mapViews="mapViews"
      ></SatelliteAnimation>
    </el-row>
  </div>
</template>
<script setup>
import { map } from '@/utils/map/index_old';
import calculate from '@/utils/map/calculate';
import marks from '@/utils/map/marks';
import grid from '@/utils/map/grid';

import { ref } from 'vue';
import gridApi from '@/api/gridApi';
import SatelliteManage from './component/SatelliteManage.vue';
import SatelliteProxy from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
const animaLoading = ref(true);
// ç½‘格信息
let gridInfo = [];
// ç½‘格数据组
const gridDataList = ref([]);
let count = 0,
  max = 0;
// ç½‘格数据详情
const gridDataDetailMap = new Map();
const gridDataDetailList = ref([]);
// åœ°å›¾ç½‘格相关对象
let mapViews;

// æŸ¥è¯¢ç½‘格信息和遥感数据组
function onSearch(options) {
  fetchGridCell(options.id);
  fetchGridData(options.id);
}

// èŽ·å–网格信息
function fetchGridCell(groupId) {
  return fetchData(() => {
    return gridApi.fetchGridCell(groupId).then((res) => {
      gridInfo = res.data;
      drawGrid(gridInfo);
    });
  });
}

// èŽ·å–遥感数据组
function fetchGridData(groupId) {
  return gridApi.fetchGridData(groupId).then((res) => {
    gridDataList.value = res.data;
    count = 0;
    max = res.data.length;
    fetchGridDataDetail(res.data);
  });
}

function fetchGridDataDetail(dataList) {
  dataList.forEach((d) => {
    gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
      gridDataDetailMap.set(d.id, res.data);
      // const gridData = res.data;
      // drawTextAndColor(gridData);
      finish();
    });
  });
}

function finish() {
  count++;
  if (count == max) {
    animaLoading.value = false;
    const list = [];
    gridDataDetailMap.forEach((value, key) => {
      list.push(value);
    });

    gridDataDetailList.value = list.sort((a, b) => {
      return a.dataId - b.dataId;
    });
    console.log(gridDataDetailList.value);
  }
}

function drawGrid(gridInfo) {
  SatelliteProxy.clearAll(mapViews);
  mapViews = SatelliteProxy.drawPolyline(gridInfo);
}

// ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
function drawTextAndColor(gridData) {
  // SatelliteProxy.clearText(mapViews);
  // æ–‡æœ¬æ ‡è®°
  mapViews.textViews = SatelliteProxy.drawDataText(
    mapViews.points,
    gridData,
    mapViews.textViews
  );
  SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}

function handleRowClick(row) {
  if (gridDataDetailMap.has(row.id)) {
    const gridData = gridDataDetailMap.get(row.id);
    drawTextAndColor(gridData);
  } else {
    gridApi.fetchGridDataDetail(row.id, row.groupId).then((res) => {
      gridDataDetailMap.set(row.id, res.data);
      const gridData = res.data;
      drawTextAndColor(gridData);
    });
  }
}
</script>
<style scoped>
.satellite-manage {
}

.historical {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
</style>

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -11,7 +11,7 @@
    </el-button> -->
    <SatelliteManage
      class="satellite-manage"
      :gridDataList="gridDataList"
      :gridDataList="satelliteGridStore.gridDataList"
      :loading="loading"
      @search="onSearch"
      @row-click="handleRowClick"
@@ -36,13 +36,12 @@
import SatelliteManage from './component/SatelliteManage.vue';
import SatelliteProxy from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
const animaLoading = ref(true);
// ç½‘格信息
let gridInfo = [];
// ç½‘格数据组
const gridDataList = ref([]);

let count = 0,
  max = 0;
// ç½‘格数据详情
@@ -53,28 +52,10 @@

// æŸ¥è¯¢ç½‘格信息和遥感数据组
function onSearch(options) {
  fetchGridCell(options.id);
  fetchGridData(options.id);
}

// èŽ·å–网格信息
function fetchGridCell(groupId) {
  return fetchData(() => {
    return gridApi.fetchGridCell(groupId).then((res) => {
      gridInfo = res.data;
      drawGrid(gridInfo);
    });
  satelliteGridStore.fetchGridCell(options.id).then(() => {
    drawGrid(satelliteGridStore.gridInfo);
  });
}

// èŽ·å–遥感数据组
function fetchGridData(groupId) {
  return gridApi.fetchGridData(groupId).then((res) => {
    gridDataList.value = res.data;
    count = 0;
    max = res.data.length;
    fetchGridDataDetail(res.data);
  });
  satelliteGridStore.fetchGridData(options.id);
}

function fetchGridDataDetail(dataList) {