数据获取逻辑迁移至stores

riku

2024-12-25 234c83d83c8835667c97c962d201ab4a3ce868b8

数据获取逻辑迁移至stores

 src/stores/satellite-grid.js

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

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

 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) {