From 5e059c9c17a6d63b6c017d2d2beb25ae227071d1 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 11 四月 2025 17:33:59 +0800
Subject: [PATCH] 走航融合优化中
---
src/views/underwaymix/component/GridStyleTool.vue | 305 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 247 insertions(+), 58 deletions(-)
diff --git a/src/views/underwaymix/component/GridStyleTool.vue b/src/views/underwaymix/component/GridStyleTool.vue
index 0b06203..0c5b79d 100644
--- a/src/views/underwaymix/component/GridStyleTool.vue
+++ b/src/views/underwaymix/component/GridStyleTool.vue
@@ -12,53 +12,133 @@
<el-col span="2">
<BaseCard v-show="show" direction="right" borderless="r">
<template #content>
- <div class="content-wrap">
+ <el-scrollbar class="content-wrap">
<div v-for="(g, i) in gridCtrlList" :key="i">
- {{ g.name }}
+ <span>{{ g.name }}</span>
<div v-for="(value, t) in g.views" :key="t">
- <!-- {{ value[0] }} -->
- {{ value[1].extData.name }}
+ <el-row justify="space-between" align="middle">
+ <div>
+ <span v-if="value.extData.type == 0">{{
+ value.tag + '.'
+ }}</span>
+ {{ value.extData.name }}
+ </div>
+ <el-button
+ class="el-button-custom"
+ type="primary"
+ icon="Close"
+ circle
+ size="small"
+ @click="handleCloseClick(i, t, value)"
+ />
+ <!-- <el-icon><Close /></el-icon> -->
+ </el-row>
+
<!-- {{ key }} -->
<!-- <el-text>{{ g.name }}</el-text> -->
<!-- <div class="m-t-8">缃戞牸瑕佺礌</div> -->
- <el-row class="m-t-8">
+ <el-row class="m-t-8" justify="space-between">
+ <!-- <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="gridLoading = !gridLoading"
+ >
+ {{ '铻嶅悎鍒嗘瀽' }}
+ </el-button> -->
<CheckButton
+ :loading="gridLoading"
+ v-model="value.show"
active-text="鏄剧ず缃戞牸"
inactive-text="闅愯棌缃戞牸"
- :default-value="true"
- @change="handleGridClick"
+ @change="(e) => handleGridClick(e, i, value)"
>
</CheckButton>
<CheckButton
+ :loading="rankLoading"
+ v-model="value.showRank"
active-text="鏄剧ず鎺掑悕"
inactive-text="闅愯棌鎺掑悕"
:default-value="false"
- @change="handleGridClick"
+ @change="(e) => handleRankClick(e, i, value)"
>
</CheckButton>
<CheckButton
+ :loading="dataLoading"
+ v-model="value.showData"
active-text="鏄剧ず鏁版嵁"
inactive-text="闅愯棌鏁版嵁"
:default-value="false"
- @change="handleGridClick"
+ @change="(e) => handleDataClick(e, i, value)"
>
</CheckButton>
</el-row>
- <el-row class="m-b-8" gap="2">
- <div class="m-t-8">缃戞牸閫忔槑搴�</div>
+ <el-row class="m-t-8" justify="space-between">
+ <CheckButton
+ :loading="colorLoading"
+ v-model="value.showCustomColor"
+ active-text="缁樺埗瀵规瘮鑹�"
+ inactive-text="缁樺埗鏍囧噯鑹�"
+ :default-value="false"
+ @change="(e) => handleColorClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="heatMapLoading"
+ v-model="value.showHeatMap"
+ active-text="椋庨櫓鐑姏鍥�"
+ inactive-text="椋庨櫓鐑姏鍥�"
+ :default-value="false"
+ @change="(e) => handleHeatMapClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="underwayLoading"
+ v-if="value.extData.type == 0"
+ v-model="value.showUnderway"
+ active-text="鏄剧ず璧拌埅杞ㄨ抗"
+ inactive-text="闅愯棌璧拌埅杞ㄨ抗"
+ :default-value="false"
+ @change="(e) => handleUnderwayClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="highlightLoading"
+ v-if="value.extData.type == 1"
+ v-model="value.highlightFusionGrid"
+ active-text="楂樹寒铻嶅悎缃戞牸"
+ :default-value="true"
+ @change="(e) => handleHighlightGridClick(e, i, value)"
+ >
+ </CheckButton>
+ </el-row>
+ <!-- <el-row class="m-b-8" align="middle"> -->
+ <el-form-item label="閫忔槑搴�">
+ <!-- <div class="m-t-8">缃戞牸閫忔槑搴�</div> -->
<el-slider
- v-model="opacityValue"
+ v-model="value.opacityValue"
:min="0"
:max="1"
:step="0.1"
show-stops
- @change="handleOpacityChange"
- style="width: 200px"
+ @change="(e) => handleOpacityChange(e, i, value)"
+ style="width: 150px"
/>
- </el-row>
+ <el-input-number
+ class="m-l-16"
+ size="small"
+ v-model="value.opacityValue"
+ :min="0"
+ :max="1"
+ :step="0.1"
+ @change="(e) => handleOpacityChange(e, i, value)"
+ />
+ </el-form-item>
+ <!-- </el-row> -->
+ <el-divider />
</div>
</div>
- </div>
+ </el-scrollbar>
</template>
</BaseCard>
</el-col>
@@ -68,7 +148,11 @@
/**
* 缃戞牸鏍峰紡鎺у埗宸ュ叿
*/
-import { ref, watch, computed } from 'vue';
+import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';
+import gridApi from '@/api/gridApi';
+import { useGridStore } from '@/stores/grid-info';
+
+const gridStore = useGridStore();
const props = defineProps({
// 缃戞牸绠＄悊瀵硅薄[SatelliteGrid]鏁扮粍
@@ -78,68 +162,173 @@
}
});
+const gridLoading = ref(false);
+const rankLoading = ref(false);
+const dataLoading = ref(false);
+const colorLoading = ref(false);
+const heatMapLoading = ref(false);
+const underwayLoading = ref(false);
+const highlightLoading = ref(false);
+
+const emits = defineEmits(['showUnderway', 'onDelete']);
+
const gridCtrlList = computed(() => {
return props.gridCtrls.map((g) => {
- return {
+ return reactive({
name: g.name,
- views: Array.from(g.mapViewsMap)
- };
+ views: Array.from(g.mapViewsMap).map((v) => {
+ return {
+ tag: v[0],
+ extData: v[1].extData,
+ show: v[1].show,
+ showRank: v[1].showRank,
+ showData: v[1].showData,
+ showCustomColor: v[1].showCustomColor,
+ showHeatMap: v[1].showHeatMap,
+ highlightFusionGrid: true,
+ // ...v[1],
+ opacityValue: 1
+ };
+ })
+ });
});
});
-// 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 handleCloseClick(index, t, value) {
+ const key = value.tag;
+ toRaw(props.gridCtrls[index]).deleteTagGrid([key]);
+ gridCtrlList.value[index].views.splice(t, 1);
+ emits('onDelete', index, key);
}
-function handleDataClick() {
- dataVisible.value = !dataVisible.value;
- emits('showData', dataVisible.value);
+function handleGridClick(e, index, value) {
+ gridLoading.value = true;
+ const key = value.tag;
+ toRaw(props.gridCtrls[index]).changeVisibility({
+ tags: [key],
+ showGridViews: e
+ });
+ gridLoading.value = false;
}
-function handleColorClick() {
- isStandardColor.value = !isStandardColor.value;
- emits('changeColor', isStandardColor.value);
+function handleRankClick(e, index, value) {
+ rankLoading.value = true;
+ const key = value.tag;
+ toRaw(props.gridCtrls[index]).changeVisibility({
+ tags: [key],
+ showRankTxt: e
+ });
+ rankLoading.value = false;
}
-function handleOpacityClick() {
- // isOpacity.value = !isOpacity.value;
- // emits('changeOpacity', isOpacity.value);
+function handleDataClick(e, index, value) {
+ dataLoading.value = true;
+ const key = value.tag;
+ toRaw(props.gridCtrls[index]).changeVisibility({
+ tags: [key],
+ showDataTxt: e
+ });
+ dataLoading.value = false;
}
-function handleOpacityChange(value) {
- emits('changeOpacity', value);
+function handleColorClick(e, index, value) {
+ colorLoading.value = true;
+ const key = value.tag;
+ toRaw(props.gridCtrls[index]).changeGridColor({
+ tags: [key],
+ useCustomColor: e
+ });
+ colorLoading.value = false;
+}
+
+function handleOpacityChange(e, index, value) {
+ const key = value.tag;
+ // value.opacityValue = e;
+ toRaw(props.gridCtrls[index]).changeGridOpacity({
+ tag: key,
+ opacityValue: toRaw(value.opacityValue)
+ });
+}
+
+function handleUnderwayClick(e, index, value) {
+ underwayLoading.value = true;
+ emits('showUnderway', {
+ isShow: e,
+ dataId: value.tag,
+ done: () => (underwayLoading.value = false)
+ });
+}
+
+function handleHighlightGridClick(e, index, value) {
+ highlightLoading.value = true;
+ toRaw(props.gridCtrls[index]).mixGrid({
+ tags: value.tag.split('-'),
+ isMixGridHighlight: e
+ });
+ highlightLoading.value = false;
+}
+
+let heatTag;
+const heatMapSearchLength = 4;
+function handleHeatMapClick(e, index, value) {
+ heatMapLoading.value = true;
+ const _satelliteGrid = toRaw(props.gridCtrls[index]);
+ _satelliteGrid.changeVisibility({
+ showGridViews: false,
+ showDataTxt: false,
+ showRankTxt: false
+ });
+ // gridCtrlList.value.forEach((v) => {
+ // v.views.forEach((view) => {
+ // view.show = false;
+ // view.showData = false;
+ // view.showRank = false;
+ // });
+ // });
+ if (e) {
+ const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
+ gridApi
+ .buildUnderwayHeatmap(
+ _satelliteGrid.gridGroupId,
+ data,
+ heatMapSearchLength
+ )
+ .then((res) => {
+ heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
+ _satelliteGrid.setDefaultGridClickEvent([heatTag]);
+ // _satelliteGrid.setGridEvent(
+ // [heatTag],
+ // 'click',
+ // (gridCell, gridDataDetail) => {
+ // gridStore.selectedGridCellAndDataDetail = {
+ // gridCell,
+ // gridDataDetail
+ // };
+ // }
+ // );
+ })
+ .finally(() => (heatMapLoading.value = false));
+ } else {
+ _satelliteGrid.changeVisibility({
+ tags: [value.tag],
+ showGridViews: true
+ });
+ heatMapLoading.value = false;
+ }
}
</script>
<style scoped>
.content-wrap {
min-width: 300px;
min-height: 600px;
+ max-height: 80vh;
+ height: 80vh;
+ padding: 4px 16px;
+}
+
+:deep(.el-input-number) {
+ width: 80px;
}
</style>
--
Gitblit v1.9.3