卫星遥测数据分析系统
上一版本: 7b1293ce | 补丁 | 提交 | 忽略空白
feiyu02
2025-01-03 4f1fb28dad6a4df83752dc9b60f504764f8e3dcb 
完善数据融合功能（未完成）
已修改11个文件
255 ■■■■■ 文件已修改
index.html 4 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/gridApi.js 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/index.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components.d.ts 1 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/core/CoreHeader.vue 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/stores/satellite-grid.js 22 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/map/grid.js 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/satellitetelemetry/SatelliteProxy.js 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/satellitetelemetry/SatelliteTelemetry.vue 74 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/satellitetelemetry/component/SatelliteDataMix.vue 123 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/satellitetelemetry/component/SatelliteManage.vue 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 index.html


@@ -4,7 +4,7 @@


    <meta charset="UTF-8" />


    <link rel="icon" href="/favicon.ico" />


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <title>卫星遥测系统</title>


    <title>卫星遥测PM2.5智能分析与精细网格污染风险评估系统</title>


  </head>


  <body>


    <div id="app"></div>


@@ -16,7 +16,7 @@


    </script>


    <script


      type="text/javascript"


      src="https://webapi.amap.com/maps?v=1.4.5&key=520c5e5cf44c7793104e500cbf0ed711&plugin=Map3D,ElasticMarker,AMap.ControlBar,AMap.Geocoder"


      src="https://webapi.amap.com/maps?v=1.4.5&key=520c5e5cf44c7793104e500cbf0ed711&plugin=Map3D,ElasticMarker,AMap.ControlBar,AMap.Geocoder,AMap.DistrictSearch"


    ></script>


    <!-- <script src="/src/lib/jquery-3.5.1.min.js"></script> -->


    <script type="module" src="/src/main.js"></script>




 src/api/gridApi.js


@@ -125,5 +125,11 @@


    return $http


      .post(`air/satellite/import/grid/aod`, dataForm)


      .then((res) => res.data);


  }


  },




  mixGridData(dataIdList) {


    return $http


      .post(`air/satellite/grid/data/mix`, dataIdList)


      .then((res) => res.data);


  },


};




 src/api/index.js


@@ -10,7 +10,7 @@


}




if (debug) {


  ip1 = 'http://192.168.1.7:8084/';


  ip1 = 'http://localhost:8084/';


}




const $http = axios.create({




 src/components.d.ts


@@ -36,6 +36,7 @@


    ElOption: typeof import('element-plus/es')['ElOption']


    ElPopover: typeof import('element-plus/es')['ElPopover']


    ElRow: typeof import('element-plus/es')['ElRow']


    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']


    ElSelect: typeof import('element-plus/es')['ElSelect']


    ElTable: typeof import('element-plus/es')['ElTable']


    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']




 src/components/core/CoreHeader.vue


@@ -16,7 +16,7 @@


  props: {


    title: {


      type: String,


      default: '卫星遥测系统'


      default: '卫星遥测PM2.5智能分析与精细网格污染风险评估系统'


    }


  },


  data() {




 src/stores/satellite-grid.js


@@ -1,4 +1,4 @@


import { ref } from 'vue';


import { ref, computed } from 'vue';


import { defineStore } from 'pinia';


import gridApi from '@/api/gridApi';


import { useFetchData } from '@/composables/fetchData';


@@ -7,8 +7,20 @@


export const useSatelliteGridStore = defineStore('satelliteGrid', () => {


  // 网格信息


  const gridInfo = ref([]);


  // 网格数据组


  const gridDataList = ref([]);


  // 所有网格数据组


  const allGridDataList = ref([]);


  // 原始网格数据组


  const gridDataList = computed(() => {


    return allGridDataList.value.filter((v) => {


      return v.type == 0;


    });


  });


  // 融合网格数据组


  const mixGridDataList = computed(() => {


    return allGridDataList.value.filter((v) => {


      return v.type == 1;


    });


  });




  // 获取网格信息


  function fetchGridCell(groupId) {


@@ -20,7 +32,7 @@


  // 获取遥测单日数据信息


  function fetchGridData(groupId) {


    return gridApi.fetchGridData(groupId).then((res) => {


      gridDataList.value = res.data;


      allGridDataList.value = res.data;


    });


  }




@@ -35,7 +47,9 @@




  return {


    gridInfo,


    allGridDataList,


    gridDataList,


    mixGridDataList,


    fetchGridCell,


    fetchGridData,


    fetchGridDataDetail




 src/utils/map/grid.js


@@ -271,7 +271,7 @@


      );


      g.setOptions({


        fillColor: _color,


        fillOpacity: color[3]


        fillOpacity: color[3] == 0 ? 0 : 0.7


      });


    });


  },


@@ -299,7 +299,8 @@


      );


      g.setOptions({


        fillColor: _color,


        fillOpacity: color[3]


        // fillOpacity: color[3]


        fillOpacity: color[3] == 0 ? 0 : 0.7


      });


    });


  },




 src/views/satellitetelemetry/SatelliteProxy.js


@@ -23,7 +23,8 @@


function drawPolyline(gridInfo) {


  // 绘制网格


  const points = gridInfo.map((v) => {


    return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);


    // return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);


    return [v.longitude, v.latitude]


  });


  const gridPoints = gridMapUtil.parseGridPoint(points);


  const gridViews = gridMapUtil.drawPolylines(gridPoints);


@@ -35,7 +36,8 @@


  const data = gridData.map((v, i) => {


    return {


      lnglat_GD: points[i],


      data: v.pm25 ? (v.pm25 + 'μg/m³') : ''


      // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''


      data: v.pm25 ? (v.pm25) : ''


    };


  });


  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');


@@ -46,7 +48,8 @@


  const data = gridData.map((v, i) => {


    return {


      lnglat_GD: points[i],


      data: v.pm25 ? ('排名: ' + v.rank) : ''


      // data: v.pm25 ? ('排名: ' + v.rank) : ''


      data: v.pm25 ? (v.rank) : ''


    };


  });


  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');




 src/views/satellitetelemetry/SatelliteTelemetry.vue


@@ -1,15 +1,6 @@


<template>


  <el-row class="wrap">


    <el-col span="2">


      <!-- <el-button


      class="p-events-auto"


      type="info"


      icon="Memo"


      plain


      @click="draw"


    >


      绘制网格


    </el-button> -->


      <el-row>


        <SatelliteManage


          v-show="show"


@@ -34,16 +25,18 @@


      </el-row>


    </el-col>


  </el-row>


  <el-row class="historical" justify="center">


  <SatelliteDataMix class="data-mix" @mix-data="handleMixDataClick">


  </SatelliteDataMix>


  <!-- <el-row class="historical" justify="center">


    <SatelliteAnimation


      :loading="animaLoading"


      :grid-data="gridDataDetailList"


      :mapViews="mapViews"


    ></SatelliteAnimation>


  </el-row>


  </el-row> -->


</template>


<script setup>


import { map } from '@/utils/map/index_old';


import { map, onMapMounted } from '@/utils/map/index_old';


import calculate from '@/utils/map/calculate';


import marks from '@/utils/map/marks';


import grid from '@/utils/map/grid';


@@ -51,9 +44,38 @@


import { ref } from 'vue';


import gridApi from '@/api/gridApi';


import SatelliteManage from './component/SatelliteManage.vue';


import SatelliteDataMix from './component/SatelliteDataMix.vue';


import SatelliteProxy from './SatelliteProxy';


import { useFetchData } from '@/composables/fetchData';


import { useSatelliteGridStore } from '@/stores/satellite-grid';




// 查询长宁区行政区划


onMapMounted(()=>{


  // eslint-disable-next-line no-undef


  var district = new AMap.DistrictSearch({


    extensions: "all", //返回行政区边界坐标等具体信息


    level: "district", //设置查询行政区级别为区


  });


  district.search("长宁区", 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


        var polygon = new AMap.Polygon({


          map: map, //显示该覆盖物的地图对象


          strokeWeight: 3, //轮廓线宽度


          path: bounds[i], //多边形轮廓线的节点坐标数组


          fillOpacity: 0.1, //多边形填充透明度


          fillColor: "#CCF3FF", //多边形填充颜色


          // strokeColor: "#CC66CC", //线条颜色


          strokeColor: "#0066ff", //线条颜色      


        });


      }


      map.setFitView(); //将覆盖物调整到合适视野


    }


  });


})




const satelliteGridStore = useSatelliteGridStore();


const { loading, fetchData } = useFetchData(10000);


@@ -73,7 +95,10 @@


  satelliteGridStore.fetchGridCell(options.id).then(() => {


    drawGrid(satelliteGridStore.gridInfo);


  });


  satelliteGridStore.fetchGridData(options.id);


  satelliteGridStore.fetchGridData(options.id).then(()=>{


    max = satelliteGridStore.gridDataList.length


    fetchGridDataDetail(satelliteGridStore.gridDataList)


  });


}




function fetchGridDataDetail(dataList) {


@@ -133,17 +158,17 @@


  SatelliteProxy.drawColor(mapViews.gridViews, gridData);


}




let selectedGridData


let selectedGridData;


function handleRowClick(row) {


  if (gridDataDetailMap.has(row.id)) {


    const gridData = gridDataDetailMap.get(row.id);


    selectedGridData = gridData


    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


      selectedGridData = gridData;


      drawTextAndColor(gridData);


    });


  }


@@ -158,7 +183,15 @@


}




function handleColorClick(isStandardColor) {


  SatelliteProxy.drawColor(mapViews.gridViews, selectedGridData, !isStandardColor);


  SatelliteProxy.drawColor(


    mapViews.gridViews,


    selectedGridData,


    !isStandardColor


  );


}




function handleMixDataClick(gridData) {


  handleRowClick(gridData);


}


</script>


<style scoped>


@@ -170,5 +203,12 @@


  bottom: 10px;


  left: 0;


  right: 0;


  color: #0066ff;


}




.data-mix {


  position: absolute;


  right: 0;


  top: 60px;


}


</style>




 src/views/satellitetelemetry/component/SatelliteDataMix.vue


@@ -1,10 +1,115 @@


<template>


    <el-row class="wrap">


      <BaseCard size="medium" direction="left">


        <template #content>


          


        </template>


        <template #footer> </template>


      </BaseCard>


    </el-row>


  </template>


  <el-row class="wrap">


    <el-col span="2">


      <el-row>


        <CardButton


          name="数据融合"


          direction="left"


          @click="() => (show = !show)"


        ></CardButton>


      </el-row>


    </el-col>


    <el-col span="2">


      <el-row>


        <BaseCard


          style="width: 300px"


          v-show="show"


          size="medium"


          direction="left"


        >


          <template #content>


            <div>原始数据</div>


            <el-checkbox


              :indeterminate="isIndeterminate"


              v-model="checkAll"


              @change="handelCheckAllChange"


              >全选</el-checkbox


            >


            <el-checkbox-group v-model="checkList" @change="handleChange">


              <el-scrollbar height="30vh">


                <el-checkbox


                  v-for="(item, index) in satelliteGridStore.gridDataList"


                  :key="index"


                  :label="timeFormatter(item.dataTime)"


                  :value="item.id"


                />


              </el-scrollbar>


            </el-checkbox-group>




            <div>已选：{{ checkList.length }}个</div>


            <!-- <div v-for="item in checkList">{{item}}</div> -->


            <el-button


              :loading="loading"


              type="primary"


              class="el-button-custom"


              size="small"


              @click="mixData"


            >


              融合数据


            </el-button>


          </template>


          <template #footer> </template>


        </BaseCard>


      </el-row>


    </el-col>


  </el-row>


</template>


<script setup>


import { ref } from 'vue';


import moment from 'moment';


import gridApi from '@/api/gridApi';


import { useSatelliteGridStore } from '@/stores/satellite-grid';




const satelliteGridStore = useSatelliteGridStore();


const checkList = ref([]);


const isIndeterminate = ref(false);


const checkAll = ref(false);


const selectType = ref([]);


const show = ref(true);


const loading = ref(false);




const emits = defineEmits(['mixData']);




function timeFormatter(time) {


  return moment(time).format('YYYY-MM-DD');


}




function mixData() {


  gridApi.mixGridData(checkList.value).then((res) => {


    if (res.data.length > 0) {


      emits('mixData', res.data[0]);


    }


  });


}




function handelCheckAllChange(val) {


  checkList.value = val ? satelliteGridStore.gridDataList.map((v) => v.id) : [];


  isIndeterminate.value = false;


  handleChange(checkList.value);


}


function handleChange(types) {


  const options = satelliteGridStore.gridDataList;


  let checkedCount = types.length;


  checkAll.value = checkedCount === options.length;


  isIndeterminate.value = checkedCount > 0 && checkedCount < options.length;


}


</script>


<style scoped>


:deep(.el-checkbox) {


  --el-checkbox-text-color: white;


  --main-color: #23dad1;


  --el-checkbox-checked-text-color: var(--main-color);


  --el-checkbox-checked-input-border-color: var(--main-color);


  --el-checkbox-checked-bg-color: var(--main-color);


  --el-checkbox-input-border-color-hover: var(--main-color);




  --el-checkbox-disabled-checked-input-fill: var(--main-color);


  --el-checkbox-disabled-checked-input-border-color: var(--main-color);


  --el-checkbox-disabled-checked-icon-color: white;


  /* height: initial; */


}




:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {


  color: var(--el-color-primary);


}


</style>




 src/views/satellitetelemetry/component/SatelliteManage.vue


@@ -50,6 +50,11 @@


            align="center"


            width="50"


          />


          <!-- <el-table-column type="expand">


            <template #default="props">


              


            </template>


          </el-table-column> -->


          <el-table-column


            prop="dataTime"


            label="时间"