From 7b1293cec33b47680f08756bd1f8518d3cb1a729 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期三, 01 一月 2025 22:33:32 +0800
Subject: [PATCH] 新增对比色
---
src/views/satellitetelemetry/component/SatelliteManage.vue | 16 +++++
src/model/Legend.js | 41 +++++++++++++
src/views/satellitetelemetry/SatelliteTelemetry.vue | 37 +++++++++---
src/api/index.js | 2
src/utils/map/grid.js | 50 +++++++++-------
src/views/satellitetelemetry/SatelliteProxy.js | 8 ++
6 files changed, 117 insertions(+), 37 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index e90dd06..59ed7cd 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -10,7 +10,7 @@
}
if (debug) {
- ip1 = 'http://192.168.0.138:8084/';
+ ip1 = 'http://192.168.1.7:8084/';
}
const $http = axios.create({
diff --git a/src/model/Legend.js b/src/model/Legend.js
index 5021b16..e92ebd1 100644
--- a/src/model/Legend.js
+++ b/src/model/Legend.js
@@ -148,7 +148,7 @@
[0.87, 0.92, 0.03, 0.75],
[0.8, 0.67, 0.04, 0.75],
[0.92, 0.28, 0.07, 0.75],
- [0.6, 0.05, 0.05, 0.75]
+ [0.96, 0.05, 0.05, 0.75]
],
getStandardRange: function (name) {
@@ -297,7 +297,44 @@
i = this._custom.length - 1;
}
return this._custom[i];
- }
+ },
+
+ getCustomColorAndNext: function (data, min, max) {
+ if (!data) {
+ return {
+ color: [0, 0, 0, 0],
+ nextColor: [0, 0, 0, 0],
+ range: 0,
+ nextRange: 0
+ };
+ }
+
+ // if (data == min) {
+ // console.log(data);
+ // }
+
+ var per = (max - min) / this._custom.length;
+ var i = parseInt((data - min) / per);
+ var range = min + i * per
+ if (i >= this._custom.length - 1) {
+ i = this._custom.length - 2;
+ range = min + i * per
+ }
+
+ let nextIndex = i + 1;
+ let nextRange = min + nextIndex * per
+ if (nextIndex > this._custom.length - 1) {
+ nextIndex = this._custom.length - 1;
+ nextRange = min + nextIndex * per
+ }
+
+ return {
+ color: this._custom[i],
+ nextColor: this._custom[nextIndex],
+ range,
+ nextRange
+ };
+ },
};
export { Legend };
diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js
index df44cf7..7fec60a 100644
--- a/src/utils/map/grid.js
+++ b/src/utils/map/grid.js
@@ -259,26 +259,6 @@
},
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 } =
@@ -294,5 +274,33 @@
fillOpacity: color[3]
});
});
- }
+ },
+
+ drawGridColorCustom(gridViews, texts) {
+ var max,min
+ texts.forEach(t => {
+ if (!max || t > max) {
+ max = t
+ }
+ if (!min || t < min) {
+ min = t
+ }
+ });
+ gridViews.forEach((g, i) => {
+ const data = parseFloat(texts[i]);
+ const { color, nextColor, range, nextRange } =
+ Legend.getCustomColorAndNext(data, min, max);
+ const ratio = (data - range) / (nextRange - range);
+
+ const _color = getColorBetweenTwoColors(
+ color.map((v) => v * 255),
+ nextColor.map((v) => v * 255),
+ ratio
+ );
+ g.setOptions({
+ fillColor: _color,
+ fillOpacity: color[3]
+ });
+ });
+ },
};
diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js
index f11cabe..72b2cb2 100644
--- a/src/views/satellitetelemetry/SatelliteProxy.js
+++ b/src/views/satellitetelemetry/SatelliteProxy.js
@@ -53,11 +53,15 @@
}
// 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹�
-function drawColor(gridViews, gridData) {
+function drawColor(gridViews, gridData, customColor) {
const pm25Data = gridData.map((v) => {
return v.pm25;
});
- gridMapUtil.drawGridColor(gridViews, pm25Data, 'PM25');
+ if (customColor) {
+ gridMapUtil.drawGridColorCustom(gridViews, pm25Data);
+ } else {
+ gridMapUtil.drawGridColor(gridViews, pm25Data, 'PM25');
+ }
}
export default {
diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue
index d5a43cd..0f0698f 100644
--- a/src/views/satellitetelemetry/SatelliteTelemetry.vue
+++ b/src/views/satellitetelemetry/SatelliteTelemetry.vue
@@ -20,6 +20,7 @@
@row-click="handleRowClick"
@show-rank="handleRankClick"
@show-data="handleDataClick"
+ @change-color="handleColorClick"
></SatelliteManage>
</el-row>
</el-col>
@@ -32,13 +33,13 @@
></CardButton>
</el-row>
</el-col>
- <!-- <el-row class="historical" justify="center">
- <SatelliteAnimation
- :loading="animaLoading"
- :grid-data="gridDataDetailList"
- :mapViews="mapViews"
- ></SatelliteAnimation>
- </el-row> -->
+ </el-row>
+ <el-row class="historical" justify="center">
+ <SatelliteAnimation
+ :loading="animaLoading"
+ :grid-data="gridDataDetailList"
+ :mapViews="mapViews"
+ ></SatelliteAnimation>
</el-row>
</template>
<script setup>
@@ -53,7 +54,6 @@
import SatelliteProxy from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';
-
const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
@@ -113,24 +113,37 @@
// SatelliteProxy.clearText(mapViews);
// 鏂囨湰鏍囪
const { textViews: dataTxt, labelsLayer: dataLayer } =
- SatelliteProxy.drawDataText(mapViews.points, gridData, mapViews.dataTxt, mapViews.dataLayer);
+ SatelliteProxy.drawDataText(
+ mapViews.points,
+ gridData,
+ mapViews.dataTxt,
+ mapViews.dataLayer
+ );
mapViews.dataTxt = dataTxt;
mapViews.dataLayer = dataLayer;
const { textViews: rankTxt, labelsLayer: rankLayer } =
- SatelliteProxy.drawRankText(mapViews.points, gridData, mapViews.rankTxt, mapViews.rankLayer);
+ SatelliteProxy.drawRankText(
+ mapViews.points,
+ gridData,
+ mapViews.rankTxt,
+ mapViews.rankLayer
+ );
mapViews.rankTxt = rankTxt;
mapViews.rankLayer = rankLayer;
SatelliteProxy.drawColor(mapViews.gridViews, 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);
});
}
@@ -143,6 +156,10 @@
function handleDataClick(dataVisible) {
dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
}
+
+function handleColorClick(isStandardColor) {
+ SatelliteProxy.drawColor(mapViews.gridViews, selectedGridData, !isStandardColor);
+}
</script>
<style scoped>
.satellite-manage {
diff --git a/src/views/satellitetelemetry/component/SatelliteManage.vue b/src/views/satellitetelemetry/component/SatelliteManage.vue
index 75ba069..35f74ce 100644
--- a/src/views/satellitetelemetry/component/SatelliteManage.vue
+++ b/src/views/satellitetelemetry/component/SatelliteManage.vue
@@ -22,6 +22,14 @@
>
{{ dataVisible ? '闅愯棌鏁版嵁' : '鏄剧ず鏁版嵁' }}
</el-button>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleColorClick"
+ >
+ {{ isStandardColor ? '缁樺埗瀵规瘮鑹�' : '缁樺埗鏍囧噯鑹�' }}
+ </el-button>
<el-table
:data="gridDataList"
table-layout="fixed"
@@ -98,8 +106,9 @@
const rankVisible = ref(true);
const dataVisible = ref(true);
+const isStandardColor = ref(true)
-const emits = defineEmits(['search', 'rowClick', 'showRank', 'showData']);
+const emits = defineEmits(['search', 'rowClick', 'showRank', 'showData', 'changeColor']);
// 鏌ヨ缃戞牸淇℃伅鍜岄仴鎰熸暟鎹粍
function onSearch(options) {
@@ -116,6 +125,11 @@
emits('showData', dataVisible.value);
}
+function handleColorClick() {
+ isStandardColor.value = !isStandardColor.value
+ emits('changeColor', isStandardColor.value);
+}
+
function handleRowClick(row, col, event) {
emits('rowClick', row);
}
--
Gitblit v1.9.3