From 3970cefa60ea7e5d899b7475345b65646c19c110 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 20 三月 2025 15:17:05 +0800
Subject: [PATCH] 走航融合（待完成）
---
src/model/SatelliteGrid.js | 362 ++++++++++++++----------
src/views/underwaymix/UnderwayMixMode.vue | 335 +++++++++++-----------
src/utils/map/grid.js | 32 +
src/components.d.ts | 3
src/views/underwaymix/component/GridStyleTool.vue | 145 +++++++++
5 files changed, 550 insertions(+), 327 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 6255bc1..f0bc47d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -34,16 +34,15 @@
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']
+ ElSpace: typeof import('element-plus/es')['ElSpace']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
diff --git a/src/model/SatelliteGrid.js b/src/model/SatelliteGrid.js
index 4bc2504..ddf731f 100644
--- a/src/model/SatelliteGrid.js
+++ b/src/model/SatelliteGrid.js
@@ -10,15 +10,22 @@
constructor(name) {
this.name = name;
}
-
- // 鍦板浘缃戞牸鐩稿叧瀵硅薄
+ // 榛樿鍦板浘缃戞牸鐩稿叧瀵硅薄
mapViews;
- mapViewsList = [];
+ gridDataDetail;
+ infoMap = new Map();
+
+ // 鍦板浘缃戞牸瀵硅薄Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸瀵硅薄銆佺綉鏍煎潗鏍囦俊鎭�
mapViewsMap = new Map();
+ // 缃戞牸鏁版嵁Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸鐩戞祴鏁版嵁淇℃伅
+ gridDataDetailMap = new Map();
+
districtPolygon;
+
+ firstEvent;
events = new Map();
@@ -83,8 +90,6 @@
}
}
}
-
- firstEvent;
// 缁樺埗缃戞牸绾�
drawPolyline(gridInfo, event) {
@@ -166,14 +171,16 @@
points,
gridDataDetail,
lastGridViews,
- opacity,
- zIndex,
- customColor
+ customColor,
+ style
}) {
// 鏍规嵁鏁版嵁绛涢�夋湁鏁版嵁鐨勭綉鏍�
const res = [];
// 浠ュ強瀵瑰簲鐨勪腑蹇冪偣鍧愭爣
const pointsRes = [];
+ // 缃戞牸鎸夌収鍏剁紪鍙峰崌搴忔帓鍒楋紝鐒跺悗璁＄畻缂栧彿鍜屼笅琛ㄧ殑鍋忓樊鍊�
+ const offset = gridViews[0].getExtData().gridCell.cellIndex - 0;
+
gridDataDetail.forEach((d) => {
// 鏍规嵁鏁版嵁鍏宠仈鐨勭綉鏍肩紪鍙凤紝鎵惧埌瀵瑰簲缃戞牸
const cellId = d.cellId;
@@ -182,8 +189,8 @@
'閬ユ祴鏁版嵁鐨勭綉鏍肩储寮曠紪鍙疯秴鍑虹綉鏍肩粍鑼冨洿锛屾暟鎹拰缃戞牸缁勫彲鑳戒笉瀵瑰簲'
);
}
- res.push(gridViews[cellId - 1]);
- pointsRes.push(points[cellId - 1]);
+ res.push(gridViews[cellId - offset]);
+ pointsRes.push(points[cellId - offset]);
});
// 鏍规嵁缁樺埗棰滆壊鏂瑰紡缁樺埗缃戞牸
@@ -192,16 +199,14 @@
resGridViews = gridMapUtil.drawGridColorCustom(
res,
gridDataDetail,
- opacity,
- zIndex
+ style.opacity
);
} else {
resGridViews = gridMapUtil.drawGridColor(
res,
gridDataDetail,
'PM25',
- opacity,
- zIndex
+ style
);
}
@@ -223,167 +228,86 @@
// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
drawGrid({
- gridDataDetail,
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt,
- useDataTxtColor,
- mapViews
+ mapViews,
+ data,
+ grid = { useCustomColor: false, style: { opacity: 1, zIndex: 11 } },
+ dataTxt = { isShow: false, useCustomColor: false, useColor: false },
+ rankTxt = { isShow: false }
}) {
const _mapViews = mapViews ? mapViews : this.mapViews;
- // SatelliteProxy.clearText(mapViews);
+ this.gridDataDetail = data;
const { resGridViews, pointsRes } = this.drawColor({
gridViews: _mapViews.gridViews,
points: _mapViews.points,
- gridDataDetail: gridDataDetail,
+ gridDataDetail: data,
lastGridViews: _mapViews.lastGridViews,
- customColor: useCustomColor,
- opacity: opacity,
- zIndex: zIndex
+ customColor: grid.useCustomColor,
+ style: grid.style
});
_mapViews.lastGridViews = resGridViews;
_mapViews.lastPoints = pointsRes;
// 鏁版嵁鏍囪
- const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
+ const { textViews: dtv } = this.drawDataText(
_mapViews.lastPoints,
- gridDataDetail,
+ data,
_mapViews.dataTxt,
- useCustomColor,
- useDataTxtColor
+ dataTxt.useCustomColor,
+ dataTxt.useColor
);
- _mapViews.dataTxt = dataTxt;
- _mapViews.dataLayer = dataLayer;
+ _mapViews.dataTxt = dtv;
- const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
+ const { textViews: rtv } = this.drawRankText(
_mapViews.lastPoints,
- gridDataDetail,
+ data,
_mapViews.rankTxt,
_mapViews.rankLayer
);
- _mapViews.rankTxt = rankTxt;
- _mapViews.rankLayer = rankLayer;
+ _mapViews.rankTxt = rtv;
- if (showDataTxt) {
+ if (dataTxt.isShow) {
map.add(_mapViews.dataTxt);
}
- if (showRankTxt) {
+ if (rankTxt.isShow) {
map.add(_mapViews.rankTxt);
}
}
- //
- drawGrids({
- gridDataDetailList,
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt
- }) {
- if (this.mapViewsList.length < gridDataDetailList.length) {
- let index = this.mapViewsList.length;
- while (index < gridDataDetailList.length) {
- const newMapViews = {
- gridViews: gridMapUtil.drawPolylines({
- points: this.mapViews.gridPoints,
- event: this.firstEvent
- }),
- gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
- points: JSON.parse(JSON.stringify(this.mapViews.points))
- };
- this.mapViewsList.push(newMapViews);
- }
- }
-
- this.mapViewsList.forEach((m, i) => {
- this.drawGrid({
- gridDataDetail: gridDataDetailList[i],
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt,
- mapViews: m
- });
- });
- }
-
- drawNewGrid({
- gridDataDetail,
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt
- }) {
- const newMapViews = {
- gridViews: gridMapUtil.drawPolylines({
- points: this.mapViews.gridPoints,
- event: this.firstEvent
- }),
- gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
- points: JSON.parse(JSON.stringify(this.mapViews.points))
- };
- this.mapViewsList.push(newMapViews);
- this.drawGrid({
- gridDataDetail,
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt,
- mapViews: newMapViews
- });
- }
- drawTagGrid({
- tag,
- gridDataDetail,
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt
- }) {
+ /**
+ * 鏍规嵁tag鏍囩锛屽睍绀哄凡鏈夌殑缃戞牸鎴栫粯鍒朵竴缁勬柊鐨勭綉鏍�
+ * @param {Object} param0 {
+ * tag, 鏍囩
+ * gridDataDetail, 缃戞牸鏁版嵁鏁扮粍
+ * useCustomColor, 鏄惁浣跨敤瀵规瘮鑹�
+ * opacity, 閫忔槑搴︼紝鍙栧�糩0, 1]
+ * zIndex, 鍦板浘鏄剧ず灞傜骇
+ * showDataTxt, 鏄惁鏄剧ず鏁版嵁鏂囨湰
+ * showRankTxt, 鏄惁鏄剧ず鎺掑悕鏂囨湰
+ * extData, 鑷畾涔夐澶栦俊鎭璞�
+ * }
+ */
+ drawTagGrid({ tag, data, grid, dataTxt, rankTxt, extData }) {
if (!this.mapViewsMap.has(tag)) {
- const newMapViews = {
- gridViews: gridMapUtil.drawPolylines({
- points: this.mapViews.gridPoints,
- event: this.firstEvent
- }),
- gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
- points: JSON.parse(JSON.stringify(this.mapViews.points))
- };
+ const newMapViews = this._createNewMapViews({ extData });
+ this.infoMap.set(tag, extData);
this.mapViewsMap.set(tag, newMapViews);
+ this.gridDataDetailMap.set(tag, data);
}
const _mapViews = this.mapViewsMap.get(tag);
this.drawGrid({
- gridDataDetail,
- useCustomColor,
- opacity,
- zIndex,
- showDataTxt,
- showRankTxt,
- mapViews: _mapViews
+ mapViews: _mapViews,
+ data,
+ grid,
+ dataTxt,
+ rankTxt
});
}
// 璋冩暣鍚勭被鍦板浘瑕嗙洊鐗╃殑鍙鎬�
- changeVisibility({ tag, showGridViews, showDataTxt, showRankTxt }) {
- let _mapViewsList = [];
- if (this.mapViews) {
- _mapViewsList.push(this.mapViews);
- }
- if (tag && this.mapViewsMap.has(tag)) {
- _mapViewsList.push(this.mapViewsMap.get(tag));
- } else {
- this.mapViewsMap.forEach((v) => {
- _mapViewsList.push(v);
- });
- }
+ changeVisibility({ tags = [], showGridViews, showDataTxt, showRankTxt }) {
+ let { _mapViewsList } = this._getMapViews(...tags);
+
if (showGridViews != undefined) {
if (showGridViews) {
// map.add(this.mapViews.lastGridViews);
@@ -426,17 +350,8 @@
}
changeGridOpacity({ tag, isOpacity, opacityValue }) {
- let _mapViewsList = [];
- if (this.mapViews) {
- _mapViewsList.push(this.mapViews);
- }
- if (tag && this.mapViewsMap.has(tag)) {
- _mapViewsList.push(this.mapViewsMap.get(tag));
- } else {
- this.mapViewsMap.forEach((v) => {
- _mapViewsList.push(v);
- });
- }
+ let { _mapViewsList } = tag ? this._getMapViews(tag) : this._getMapViews();
+
_mapViewsList.forEach((v) => {
if (v.lastGridViews) {
v.lastGridViews.forEach((e) => {
@@ -451,6 +366,37 @@
});
}
});
+ }
+
+ changeGridColor({
+ tag,
+ useCustomColor,
+ opacity,
+ zIndex,
+ isMixGridHighlight
+ }) {
+ let { _mapViewsList, _gridDataDetailList } = this._getMapViews(tag);
+ if (_mapViewsList.length == _gridDataDetailList.length) {
+ _mapViewsList.forEach((v, i) => {
+ if (v.lastGridViews) {
+ const lastGridDataDetail = _gridDataDetailList[i];
+ if (useCustomColor) {
+ gridMapUtil.drawGridColorCustom(
+ v.lastGridViews,
+ lastGridDataDetail,
+ { opacity, zIndex }
+ );
+ } else {
+ gridMapUtil.drawGridColor(
+ v.lastGridViews,
+ lastGridDataDetail,
+ 'PM25',
+ { opacity, zIndex, isMixGridHighlight }
+ );
+ }
+ }
+ });
+ }
}
setGridEvent(name, event) {
@@ -485,4 +431,120 @@
});
}
}
+
+ /**
+ * 灏嗗缁勭綉鏍艰繘琛岃瀺鍚�
+ * 閲嶅彔鐨勭綉鏍艰繘琛岀洃娴嬫暟鎹潎鍊艰绠楀苟閲嶆柊璁＄畻瀵瑰簲棰滆壊锛屽舰鎴愭柊鐨勪竴缁勮瀺鍚堢綉鏍�
+ * @param {...String} tags 闇�瑕佽瀺鍚堢殑缃戞牸鏍囩锛屽綋涓虹┖鏃讹紝榛樿铻嶅悎鎵�鏈夌綉鏍�
+ */
+ mixGrid(tags) {
+ tags.sort((a, b) => {
+ return a < b ? -1 : 1;
+ });
+ const mixTag = tags.join('-');
+ if (this.mapViewsMap.has(mixTag)) {
+ this.changeVisibility({
+ tag: mixTag,
+ showGridViews: true
+ });
+ } else {
+ // const mixMapViews = this._createNewMapViews();
+ // 鏍规嵁鏍囩tag锛岃幏鍙栧搴斿缁勭綉鏍兼暟鎹�
+ let { _gridDataDetailList } = this._getMapViews(...tags);
+ const _dataMap = new Map();
+ // 灏嗘瘡缁勬瘡涓綉鏍兼暟鎹寜鐓х綉鏍肩紪鍙疯繘琛屽垎绫伙紝鐩稿悓缃戞牸鐨勬暟缁勫綊闆嗚嚦涓�璧�
+ _gridDataDetailList.forEach((list) => {
+ list.forEach((gdd) => {
+ if (!_dataMap.has(gdd.cellId)) {
+ _dataMap.set(gdd.cellId, {
+ source: [],
+ res: {}
+ });
+ }
+ _dataMap.get(gdd.cellId).source.push(gdd);
+ });
+ });
+ // 璁＄畻姣忎釜缃戞牸涓嬬殑鏁版嵁鍧囧��
+ const resGridDataDetail = [];
+ _dataMap.forEach((v, k) => {
+ let total = 0,
+ count = v.source.length;
+ v.source.forEach((s) => {
+ total += s.pm25;
+ });
+ v.res = {
+ isMixData: true,
+ groupId: v.source[0].groupId,
+ cellId: v.source[0].cellId,
+ pm25: count == 0 ? null : Math.round((total / count) * 10) / 10,
+ originData: v.source
+ };
+ // 鏁版嵁閲忚秴杩�1涓椂锛岃〃鏄庤缃戞牸鏁版嵁鏄瀺鍚堢殑锛屽睍绀洪珮浜殑鏍峰紡
+ if (count > 1) {
+ v.res.gridStyle = {
+ strokeWeight: 2,
+ strokeColor: 'blue'
+ };
+ }
+ resGridDataDetail.push(v.res);
+ });
+ // 閲嶆柊鎸夌収鐩戞祴鏁版嵁鎺掑簭骞舵爣璁版帓鍚�
+ resGridDataDetail.sort((a, b) => {
+ return b.pm25 - a.pm25;
+ });
+ resGridDataDetail.forEach((gdd, i) => {
+ gdd.rank = i + 1;
+ });
+
+ this.drawTagGrid({
+ tag: mixTag,
+ data: resGridDataDetail,
+ grid: {
+ style: {
+ isMixGridHighlight: true
+ }
+ }
+ });
+ }
+
+ return mixTag;
+ }
+
+ _getMapViews(...tags) {
+ let _mapViewsList = [],
+ _gridDataDetailList = [];
+ if (tags.length > 0) {
+ tags.forEach((tag) => {
+ if (this.mapViewsMap.has(tag) && this.gridDataDetailMap.has(tag)) {
+ _mapViewsList.push(this.mapViewsMap.get(tag));
+ _gridDataDetailList.push(this.gridDataDetailMap.get(tag));
+ }
+ });
+ } else {
+ this.mapViewsMap.forEach((v) => {
+ _mapViewsList.push(v);
+ });
+ this.gridDataDetailMap.forEach((v) => {
+ _gridDataDetailList.push(v);
+ });
+ if (this.mapViews && this.gridDataDetail) {
+ _mapViewsList.push(this.mapViews);
+ _gridDataDetailList.push(this.gridDataDetail);
+ }
+ }
+
+ return { _mapViewsList, _gridDataDetailList };
+ }
+
+ _createNewMapViews({ extData }) {
+ return {
+ gridViews: gridMapUtil.drawPolylines({
+ points: this.mapViews.gridPoints,
+ event: this.firstEvent
+ }),
+ gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
+ points: JSON.parse(JSON.stringify(this.mapViews.points)),
+ extData
+ };
+ }
}
diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js
index cbd6e1c..64a4cdf 100644
--- a/src/utils/map/grid.js
+++ b/src/utils/map/grid.js
@@ -348,7 +348,8 @@
* @param {string} factorName 鐩戞祴鍥犲瓙鍚嶇О
* @param {number} opacity 閫忔槑搴�
*/
- drawGridColor(gridViews, gridDataDetail, factorName, opacity, zIndex) {
+ drawGridColor(gridViews, gridDataDetail, factorName, style) {
+ let { strokeWeight, strokeColor, opacity, zIndex } = style;
const res = [];
// 閬嶅巻鍗槦閬ユ祴鏁版嵁鏁扮粍
gridDataDetail.forEach((d, i) => {
@@ -365,11 +366,25 @@
nextColor.map((v) => v * 255),
ratio
);
+
+ const _extData = grid.getExtData();
grid.setOptions({
- zIndex: zIndex ? zIndex : 10,
- fillColor: _color,
- fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
+ ...style,
+ fillColor: _color, //澶氳竟褰㈠～鍏呴鑹�
+ fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 1,
+ extData: {
+ ..._extData,
+ gridData: d
+ }
});
+ if (d.gridStyle && style.isMixGridHighlight) {
+ const _strokeWeight = d.gridStyle.strokeWeight;
+ const _strokeColor = d.gridStyle.strokeColor;
+ grid.setOptions({
+ strokeWeight: _strokeWeight, //绾挎潯瀹藉害锛岄粯璁や负 1
+ strokeColor: _strokeColor //绾挎潯棰滆壊
+ });
+ }
res.push(grid);
}
@@ -378,7 +393,9 @@
return res;
},
- drawGridColorCustom(gridViews, gridDataDetail, opacity) {
+ drawGridColorCustom(gridViews, gridDataDetail, style) {
+ const { strokeWeight, strokeColor, opacity, zIndex } = style;
+
var max, min;
gridDataDetail.forEach((t) => {
if (!t.pm25) return;
@@ -407,8 +424,9 @@
ratio
);
grid.setOptions({
- fillColor: _color,
- fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
+ ...style,
+ fillColor: _color, //澶氳竟褰㈠～鍏呴鑹�
+ fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 0.7
});
res.push(grid);
diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue
index 7ed2e43..3d690d3 100644
--- a/src/views/underwaymix/UnderwayMixMode.vue
+++ b/src/views/underwaymix/UnderwayMixMode.vue
@@ -1,158 +1,146 @@
<template>
- <div class="p-events-none m-t-2">
- <el-row justify="space-between">
- <el-row class="wrap">
- <el-col span="2">
- <el-row>
- <BaseCard v-show="show" size="medium" direction="left">
- <template #content>
- <el-row>
- <el-form :inline="true">
- <el-form-item label="璧拌埅铻嶅悎">
- <el-select
- v-model="selectedfusionData"
- multiple
- clearable
- @change="handleChange"
- placeholder="閫夋嫨浠诲姟"
- size="small"
- style="width: 160px"
- :loading="fusionLoading"
- >
- <el-option
- v-for="(s, i) in fusionDataList"
- :key="i"
- :label="s.mixDataId"
- :value="i"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- :disabled="
- !gridCellList || selectedfusionData.length == 0
- "
- @click="handleFusionClick"
- >
- {{ '鍙犲姞铻嶅悎' }}
- </el-button>
- </el-form-item>
- </el-form>
- </el-row>
- <div class="m-t-8">鎿嶄綔</div>
- <el-row class="m-t-8">
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleRankClick"
- >
- {{ mixActive ? '鍙栨秷' : '鏄剧ず鎺掑悕' }}
- </el-button>
- <CheckButton
- active-text="鍙栨秷铻嶅悎"
- inactive-text="闅愯棌铻嶅悎"
- :default-value="false"
- @change="handleMixClick"
- >
- </CheckButton>
- </el-row>
- <div class="m-t-8">缃戞牸瑕佺礌</div>
- <el-row class="m-t-8">
- <CheckButton
- active-text="鏄剧ず缃戞牸"
- inactive-text="闅愯棌缃戞牸"
- :default-value="true"
- @change="handleGridClick"
- >
- </CheckButton>
- <!-- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleGridClick"
- >
- {{ gridVisible ? '闅愯棌铻嶅悎' : '鏄剧ず铻嶅悎' }}
- </el-button> -->
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleRankClick"
- >
- {{ rankVisible ? '闅愯棌鎺掑悕' : '鏄剧ず鎺掑悕' }}
- </el-button>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleDataClick"
- >
- {{ dataVisible ? '闅愯棌鏁版嵁' : '鏄剧ず鏁版嵁' }}
- </el-button>
- </el-row>
- <div class="m-t-8">缃戞牸鏍峰紡</div>
- <el-row class="m-t-8">
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleOpacityClick"
- >
- {{ !isOpacity ? '閫忔槑鍖�' : '鍙栨秷閫忔槑鍖�' }}
- </el-button>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleColorClick"
- >
- {{ isStandardColor ? '缁樺埗瀵规瘮鑹�' : '缁樺埗鏍囧噯鑹�' }}
- </el-button>
- </el-row>
- <div class="m-t-8">璧拌埅瑕佺礌</div>
- <el-row class="m-t-8">
- <!-- <el-divider content-position="left"></el-divider> -->
+ <!-- <div class="p-events-none m-t-2"> -->
+ <el-row justify="space-between">
+ <el-row class="wrap">
+ <el-col span="2">
+ <el-row>
+ <BaseCard v-show="show" size="medium" direction="left">
+ <template #content>
+ <el-row>
+ <el-form :inline="true">
+ <el-form-item label="璧拌埅铻嶅悎">
+ <el-select
+ v-model="selectedfusionData"
+ multiple
+ clearable
+ @change="handleChange"
+ placeholder="閫夋嫨浠诲姟"
+ size="small"
+ style="width: 160px"
+ :loading="fusionLoading"
+ >
+ <el-option
+ v-for="(s, i) in fusionDataList"
+ :key="i"
+ :label="s.mixDataId"
+ :value="i"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ :disabled="
+ !gridCellList || selectedfusionData.length == 0
+ "
+ @click="handleFusionClick"
+ >
+ {{ '鍙犲姞铻嶅悎' }}
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-row>
+ <div class="m-t-8">鎿嶄綔</div>
+ <el-row class="m-t-8">
+ <CheckButton
+ active-text="寮�鍚瀺鍚�"
+ inactive-text="闅愯棌铻嶅悎"
+ :default-value="false"
+ @change="handleMixClick"
+ >
+ </CheckButton>
+ </el-row>
+ <div class="m-t-8">缃戞牸瑕佺礌</div>
+ <el-row class="m-t-8">
+ <CheckButton
+ active-text="鏄剧ず缃戞牸"
+ inactive-text="闅愯棌缃戞牸"
+ :default-value="true"
+ @change="handleGridClick"
+ >
+ </CheckButton>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleRankClick"
+ >
+ {{ rankVisible ? '闅愯棌鎺掑悕' : '鏄剧ず鎺掑悕' }}
+ </el-button>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleDataClick"
+ >
+ {{ dataVisible ? '闅愯棌鏁版嵁' : '鏄剧ず鏁版嵁' }}
+ </el-button>
+ </el-row>
+ <div class="m-t-8">缃戞牸鏍峰紡</div>
+ <el-row class="m-t-8">
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleOpacityClick"
+ >
+ {{ !isOpacity ? '閫忔槑鍖�' : '鍙栨秷閫忔槑鍖�' }}
+ </el-button>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleColorClick"
+ >
+ {{ isStandardColor ? '缁樺埗瀵规瘮鑹�' : '缁樺埗鏍囧噯鑹�' }}
+ </el-button>
+ </el-row>
+ <div class="m-t-8">璧拌埅瑕佺礌</div>
+ <el-row class="m-t-8">
+ <!-- <el-divider content-position="left"></el-divider> -->
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- :loading="missionLoading || loading"
- @click="handleUnderwayClick"
- >
- {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }}
- </el-button>
- </el-row>
- </template>
- <template #footer> </template>
- </BaseCard>
- </el-row>
- </el-col>
- <el-col span="2">
- <el-row>
- <CardButton
- name="璧拌埅铻嶅悎"
- direction="right"
- @click="() => (show = !show)"
- ></CardButton>
- </el-row>
- </el-col>
- </el-row>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ :loading="missionLoading || loading"
+ @click="handleUnderwayClick"
+ >
+ {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }}
+ </el-button>
+ </el-row>
+ </template>
+ <template #footer> </template>
+ </BaseCard>
+ </el-row>
+ </el-col>
+ <el-col span="2">
+ <el-row>
+ <CardButton
+ name="璧拌埅铻嶅悎"
+ direction="right"
+ @click="() => (show = !show)"
+ ></CardButton>
+ </el-row>
+ </el-col>
</el-row>
- </div>
+ <GridStyleTool :gridCtrls="gridCtrls"></GridStyleTool>
+ </el-row>
+ <!-- </div> -->
</template>
<script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
import moment from 'moment';
import gridApi from '@/api/gridApi';
import { SatelliteGrid } from '@/model/SatelliteGrid';
+import GridStyleTool from './component/GridStyleTool.vue';
-const satelliteGrid = new SatelliteGrid();
+const satelliteGrid = new SatelliteGrid('璧拌埅铻嶅悎');
+
+const gridCtrls = ref([satelliteGrid]);
// 鍊熺敤鍗槦閬ユ祴妯″潡涓殑100绫崇綉鏍�
const props = defineProps({
@@ -174,6 +162,7 @@
const gridDataDetailMap = new Map();
+const mixActive = ref(false);
const gridVisible = ref(true);
const underwayVisible = ref(false);
const rankVisible = ref(false);
@@ -220,11 +209,6 @@
satelliteGrid.gridPrepare(gridInfo);
}
-// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
-function drawGrid(gridDataDetail) {
- satelliteGrid.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 });
-}
-
// watch(mission, (nV, oV) => {
// if (nV != oV) {
// checkUnderwayFusionResult();
@@ -254,37 +238,54 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
if (gridDataDetailMap.has(d.id)) {
- // const gdd = gridDataDetailMap.get(d.id);
- // satelliteGrid.drawTagGrid({
- // tag: d.id,
- // gridDataDetail: gdd,
- // opacity: 1,
- // zIndex: 11
- // });
- satelliteGrid.changeVisibility({ tag: d.id, showGridViews: true });
+ satelliteGrid.changeVisibility({ tags: [d.id], showGridViews: true });
+ // gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
+ gridCtrls.value = [satelliteGrid];
} else {
gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
gridDataDetailMap.set(d.id, res.data);
const gdd = res.data;
satelliteGrid.drawTagGrid({
tag: d.id,
- gridDataDetail: gdd,
- opacity: 1,
- zIndex: 11
+ data: gdd,
+ extData: {
+ name: `璧拌埅缃戞牸 - ${d.mixDataId}`
+ }
});
+ gridCtrls.value = [satelliteGrid];
+ // gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
+ // console.log(gridCtrls.value);
});
}
});
}
-function handleMixClick(params) {}
+function handleMixClick() {
+ mixActive.value = !mixActive.value;
+ const tags = fusionDataList.value
+ .filter((v, i) => selectedfusionData.value.indexOf(i) != -1)
+ .map((v) => v.id);
+ satelliteGrid.changeVisibility({
+ showGridViews: false,
+ showDataTxt: false,
+ showRankTxt: false
+ });
+ if (mixActive.value) {
+ satelliteGrid.mixGrid(tags);
+ } else {
+ satelliteGrid.changeVisibility({
+ tags,
+ showGridViews: true
+ });
+ }
+}
function handleGridClick() {
gridVisible.value = !gridVisible.value;
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
satelliteGrid.changeVisibility({
- tag: d.id,
+ tags: [d.id],
showGridViews: gridVisible.value
});
});
@@ -300,7 +301,7 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
satelliteGrid.changeVisibility({
- tag: d.id,
+ tags: [d.id],
showRankTxt: rankVisible.value
});
});
@@ -311,7 +312,7 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
satelliteGrid.changeVisibility({
- tag: d.id,
+ tags: [d.id],
showDataTxt: dataVisible.value
});
});
@@ -322,10 +323,8 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
if (gridDataDetailMap.has(d.id)) {
- const gdd = gridDataDetailMap.get(d.id);
- satelliteGrid.drawTagGrid({
+ satelliteGrid.changeGridColor({
tag: d.id,
- gridDataDetail: gdd,
useCustomColor: !isStandardColor.value,
opacity: 1,
zIndex: 11
diff --git a/src/views/underwaymix/component/GridStyleTool.vue b/src/views/underwaymix/component/GridStyleTool.vue
new file mode 100644
index 0000000..0b06203
--- /dev/null
+++ b/src/views/underwaymix/component/GridStyleTool.vue
@@ -0,0 +1,145 @@
+<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">
+ <BaseCard v-show="show" direction="right" borderless="r">
+ <template #content>
+ <div class="content-wrap">
+ <div v-for="(g, i) in gridCtrlList" :key="i">
+ {{ g.name }}
+ <div v-for="(value, t) in g.views" :key="t">
+ <!-- {{ value[0] }} -->
+ {{ value[1].extData.name }}
+ <!-- {{ key }} -->
+ <!-- <el-text>{{ g.name }}</el-text> -->
+ <!-- <div class="m-t-8">缃戞牸瑕佺礌</div> -->
+ <el-row class="m-t-8">
+ <CheckButton
+ active-text="鏄剧ず缃戞牸"
+ inactive-text="闅愯棌缃戞牸"
+ :default-value="true"
+ @change="handleGridClick"
+ >
+ </CheckButton>
+ <CheckButton
+ active-text="鏄剧ず鎺掑悕"
+ inactive-text="闅愯棌鎺掑悕"
+ :default-value="false"
+ @change="handleGridClick"
+ >
+ </CheckButton>
+ <CheckButton
+ active-text="鏄剧ず鏁版嵁"
+ inactive-text="闅愯棌鏁版嵁"
+ :default-value="false"
+ @change="handleGridClick"
+ >
+ </CheckButton>
+ </el-row>
+ <el-row class="m-b-8" gap="2">
+ <div class="m-t-8">缃戞牸閫忔槑搴�</div>
+ <el-slider
+ v-model="opacityValue"
+ :min="0"
+ :max="1"
+ :step="0.1"
+ show-stops
+ @change="handleOpacityChange"
+ style="width: 200px"
+ />
+ </el-row>
+ </div>
+ </div>
+ </div>
+ </template>
+ </BaseCard>
+ </el-col>
+ </el-row>
+</template>
+<script setup>
+/**
+ * 缃戞牸鏍峰紡鎺у埗宸ュ叿
+ */
+import { ref, watch, computed } from 'vue';
+
+const props = defineProps({
+ // 缃戞牸绠＄悊瀵硅薄[SatelliteGrid]鏁扮粍
+ gridCtrls: {
+ type: Array,
+ default: () => []
+ }
+});
+
+const gridCtrlList = computed(() => {
+ return props.gridCtrls.map((g) => {
+ return {
+ name: g.name,
+ views: Array.from(g.mapViewsMap)
+ };
+ });
+});
+
+// watch(
+// () => props.gridCtrls,
+// (nV, oV) => {
+// gridCtrlList.value = nV.map((v) => {
+// return Array.from(v.infoMap);
+// });
+// },
+// { deep: true }
+// );
+
+const show = ref(true);
+
+const gridVisible = ref(false);
+const rankVisible = ref(false);
+const dataVisible = ref(false);
+const isStandardColor = ref(true);
+const isOpacity = ref(false);
+const opacityValue = ref(0.7);
+
+const emits = defineEmits([
+ 'showRank',
+ 'showData',
+ 'changeColor',
+ 'changeOpacity'
+]);
+
+function handleRankClick() {
+ rankVisible.value = !rankVisible.value;
+ emits('showRank', rankVisible.value);
+}
+
+function handleDataClick() {
+ dataVisible.value = !dataVisible.value;
+ emits('showData', dataVisible.value);
+}
+
+function handleColorClick() {
+ isStandardColor.value = !isStandardColor.value;
+ emits('changeColor', isStandardColor.value);
+}
+
+function handleOpacityClick() {
+ // isOpacity.value = !isOpacity.value;
+ // emits('changeOpacity', isOpacity.value);
+}
+
+function handleOpacityChange(value) {
+ emits('changeOpacity', value);
+}
+</script>
+<style scoped>
+.content-wrap {
+ min-width: 300px;
+ min-height: 600px;
+}
+</style>
--
Gitblit v1.9.3