From 4f1fb28dad6a4df83752dc9b60f504764f8e3dcb Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期五, 03 一月 2025 10:08:54 +0800
Subject: [PATCH] 完善数据融合功能（未完成）
---
src/stores/satellite-grid.js | 22 +++
src/views/satellitetelemetry/component/SatelliteManage.vue | 5 +
src/views/satellitetelemetry/component/SatelliteDataMix.vue | 123 ++++++++++++++++++++++-
src/views/satellitetelemetry/SatelliteTelemetry.vue | 74 +++++++++++---
src/api/index.js | 2
src/utils/map/grid.js | 5
index.html | 4
src/api/gridApi.js | 8 +
src/components.d.ts | 1
src/components/core/CoreHeader.vue | 2
src/views/satellitetelemetry/SatelliteProxy.js | 9 +
11 files changed, 215 insertions(+), 40 deletions(-)
diff --git a/index.html b/index.html
index e0dca80..4c947e8 100644
--- a/index.html
+++ b/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>
diff --git a/src/api/gridApi.js b/src/api/gridApi.js
index 8ced630..76945ad 100644
--- a/src/api/gridApi.js
+++ b/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);
+ },
};
\ No newline at end of file
diff --git a/src/api/index.js b/src/api/index.js
index 59ed7cd..9443b4c 100644
--- a/src/api/index.js
+++ b/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({
diff --git a/src/components.d.ts b/src/components.d.ts
index f0ccb89..fe15cfb 100644
--- a/src/components.d.ts
+++ b/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']
diff --git a/src/components/core/CoreHeader.vue b/src/components/core/CoreHeader.vue
index ba15b20..32bd786 100644
--- a/src/components/core/CoreHeader.vue
+++ b/src/components/core/CoreHeader.vue
@@ -16,7 +16,7 @@
props: {
title: {
type: String,
- default: '鍗槦閬ユ祴绯荤粺'
+ default: '鍗槦閬ユ祴PM2.5鏅鸿兘鍒嗘瀽涓庣簿缁嗙綉鏍兼薄鏌撻闄╄瘎浼扮郴缁�'
}
},
data() {
diff --git a/src/stores/satellite-grid.js b/src/stores/satellite-grid.js
index d88a13f..6f73012 100644
--- a/src/stores/satellite-grid.js
+++ b/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
diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js
index 7fec60a..2a45509 100644
--- a/src/utils/map/grid.js
+++ b/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
});
});
},
diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js
index 72b2cb2..34657a1 100644
--- a/src/views/satellitetelemetry/SatelliteProxy.js
+++ b/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');
diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue
index 0f0698f..fc74865 100644
--- a/src/views/satellitetelemetry/SatelliteTelemetry.vue
+++ b/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>
diff --git a/src/views/satellitetelemetry/component/SatelliteDataMix.vue b/src/views/satellitetelemetry/component/SatelliteDataMix.vue
index b096d53..8aa13eb 100644
--- a/src/views/satellitetelemetry/component/SatelliteDataMix.vue
+++ b/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>
\ No newline at end of file
+ <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>
diff --git a/src/views/satellitetelemetry/component/SatelliteManage.vue b/src/views/satellitetelemetry/component/SatelliteManage.vue
index 35f74ce..cfa584a 100644
--- a/src/views/satellitetelemetry/component/SatelliteManage.vue
+++ b/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="鏃堕棿"
--
Gitblit v1.9.3