From b2392458ebf42594b9fc5390fda40d7a0a12f923 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 03 九月 2025 17:40:52 +0800
Subject: [PATCH] 调试自动生成网格融合图片功能(待完成)

---
 src/views/underwaymix/component/GridStyleTool.vue |  450 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 357 insertions(+), 93 deletions(-)

diff --git a/src/views/underwaymix/component/GridStyleTool.vue b/src/views/underwaymix/component/GridStyleTool.vue
index 0b06203..bfa9951 100644
--- a/src/views/underwaymix/component/GridStyleTool.vue
+++ b/src/views/underwaymix/component/GridStyleTool.vue
@@ -9,56 +9,143 @@
         ></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"
+          <el-scrollbar class="content-wrap">
+            <el-tabs
+              class="grid-ctrl-card"
+              v-model="activeGridCtrl"
+              type="border-card"
+            >
+              <el-tab-pane
+                v-for="(g, i) in gridCtrlList"
+                :key="g.name"
+                :label="g.name"
+                :name="i"
+              >
+                <el-tabs v-model="activeGrid">
+                  <el-tab-pane
+                    v-for="(grid, y) in g.views"
+                    :key="y"
+                    :label="grid.name"
+                    :name="y"
                   >
-                  </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>
+                    <div v-for="(value, t) in grid.views" :key="t">
+                      <el-row justify="space-between" align="middle">
+                        <div>
+                          <span v-if="value.type == 0">{{
+                            value.tag + '.'
+                          }}</span>
+                          {{ value.name }}
+                        </div>
+                        <el-button
+                          class="el-button-custom"
+                          type="primary"
+                          icon="Close"
+                          circle
+                          size="small"
+                          @click="handleCloseClick(i, y, t, value)"
+                        />
+                      </el-row>
+
+                      <el-row class="m-t-8" justify="space-between">
+                        <CheckButton
+                          :loading="gridLoading"
+                          v-model="value.showGrid"
+                          active-text="鏄剧ず缃戞牸"
+                          inactive-text="闅愯棌缃戞牸"
+                          @change="(e) => handleGridClick(e, i, value)"
+                        >
+                        </CheckButton>
+                        <CheckButton
+                          :loading="rankLoading"
+                          v-if="value.type != 2"
+                          v-model="value.showRank"
+                          active-text="鏄剧ず鎺掑悕"
+                          inactive-text="闅愯棌鎺掑悕"
+                          :default-value="false"
+                          @change="(e) => handleRankClick(e, i, value)"
+                        >
+                        </CheckButton>
+                        <CheckButton
+                          :loading="dataLoading"
+                          v-model="value.showData"
+                          active-text="鏄剧ず鏁版嵁"
+                          inactive-text="闅愯棌鏁版嵁"
+                          :default-value="false"
+                          @change="(e) => handleDataClick(e, i, value)"
+                        >
+                        </CheckButton>
+                      </el-row>
+                      <el-row class="m-t-8" justify="space-between">
+                        <CheckButton
+                          :loading="colorLoading"
+                          v-model="value.showGridCustomColor"
+                          active-text="缁樺埗瀵规瘮鑹�"
+                          inactive-text="缁樺埗鏍囧噯鑹�"
+                          :default-value="false"
+                          @change="(e) => handleColorClick(e, i, value)"
+                        >
+                        </CheckButton>
+                        <CheckButton
+                          :loading="heatMapLoading"
+                          v-if="value.type != 2"
+                          v-model="value.showHeatMap"
+                          active-text="椋庨櫓鐑姏鍥�"
+                          inactive-text="椋庨櫓鐑姏鍥�"
+                          :default-value="false"
+                          @change="(e) => handleHeatMapClick(e, i, value)"
+                        >
+                        </CheckButton>
+                        <CheckButton
+                          :loading="underwayLoading"
+                          v-if="value.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.type == 1"
+                          v-model="value.highlightFusionGrid"
+                          active-text="楂樹寒铻嶅悎缃戞牸"
+                          :default-value="true"
+                          @change="(e) => handleHighlightGridClick(e, i, value)"
+                        >
+                        </CheckButton>
+                      </el-row>
+                      <el-form-item label="閫忔槑搴�">
+                        <el-slider
+                          v-model="value.gridOpacityValue"
+                          :min="0"
+                          :max="1"
+                          :step="0.1"
+                          show-stops
+                          @change="(e) => handleOpacityChange(e, i, value)"
+                          style="width: 150px"
+                        />
+                        <el-input-number
+                          class="m-l-16"
+                          size="small"
+                          v-model="value.gridOpacityValue"
+                          :min="0"
+                          :max="1"
+                          :step="0.1"
+                          @change="(e) => handleOpacityChange(e, i, value)"
+                        />
+                      </el-form-item>
+                      <el-divider />
+                    </div>
+                  </el-tab-pane>
+                </el-tabs>
+              </el-tab-pane>
+            </el-tabs>
+          </el-scrollbar>
         </template>
       </BaseCard>
     </el-col>
@@ -68,7 +155,19 @@
 /**
  * 缃戞牸鏍峰紡鎺у埗宸ュ叿
  */
-import { ref, watch, computed } from 'vue';
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  watch,
+  computed,
+  toRaw
+} from 'vue';
+import gridApi from '@/api/gridApi';
+import { useGridStore } from '@/stores/grid-info';
+
+const gridStore = useGridStore();
 
 const props = defineProps({
   // 缃戞牸绠$悊瀵硅薄[SatelliteGrid]鏁扮粍
@@ -78,68 +177,233 @@
   }
 });
 
-const gridCtrlList = computed(() => {
-  return props.gridCtrls.map((g) => {
-    return {
+const activeGridCtrl = ref(0);
+const activeGrid = ref(0);
+
+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 = ref([]);
+
+const show = ref(false);
+
+watch(
+  () => props.gridCtrls,
+  (nV, oV) => {
+    if (nV) {
+      show.value = true;
+      refreshValue();
+    }
+  }
+);
+
+function refreshValue() {
+  gridCtrlList.value = props.gridCtrls.map((g) => {
+    const _tempMap = new Map();
+    if (g.gridState) {
+      _tempMap.set('鍗槦缃戞牸', [g.gridState]);
+    }
+    Array.from(g.gridStateMap).map((v) => {
+      const key = girdTypeToName(v[1].type);
+      if (!_tempMap.has(key)) {
+        _tempMap.set(key, []);
+      }
+      _tempMap.get(key).push({
+        tag: v[0],
+        ...v[1]
+      });
+    });
+    const res = {
       name: g.name,
-      views: Array.from(g.mapViewsMap)
+      views: Array.from(_tempMap).map((v) => {
+        return {
+          name: v[0],
+          views: reactive(v[1])
+        };
+      })
     };
+    console.log(res);
+
+    return res;
   });
-});
-
-// 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 girdTypeToName(type) {
+  switch (type) {
+    case 0:
+      return '璧拌埅缃戞牸';
+    case 1:
+      return '铻嶅悎缃戞牸';
+    case 2:
+      return '鐑姏鍥�';
+  }
 }
 
-function handleColorClick() {
-  isStandardColor.value = !isStandardColor.value;
-  emits('changeColor', isStandardColor.value);
+function handleCloseClick(index, y, t, value) {
+  const key = value.tag;
+  toRaw(props.gridCtrls[index]).deleteTagGrid([key]);
+  gridCtrlList.value[index].views[y].views.splice(t, 1);
+  emits('onDelete', index, key);
 }
 
-function handleOpacityClick() {
-  // isOpacity.value = !isOpacity.value;
-  // emits('changeOpacity', isOpacity.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 handleOpacityChange(value) {
-  emits('changeOpacity', 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 handleDataClick(e, index, value) {
+  dataLoading.value = true;
+  const key = value.tag;
+  toRaw(props.gridCtrls[index]).changeVisibility({
+    tags: [key],
+    showDataTxt: e
+  });
+  dataLoading.value = false;
+}
+
+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.gridOpacityValue)
+  });
+}
+
+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]).mixGrid2({
+    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
+  });
+  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]);
+        refreshValue();
+      })
+      .finally(() => (heatMapLoading.value = false));
+  } else {
+    _satelliteGrid.changeVisibility({
+      tags: [value.tag],
+      showGridViews: true
+    });
+    heatMapLoading.value = false;
+    refreshValue();
+  }
 }
 </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;
+}
+
+:deep(.el-tabs__item) {
+  color: rgba(221, 221, 221, 0.806);
+}
+:deep(.el-tabs__nav > .is-active) {
+  color: #f0ff1d;
+}
+:deep(.el-tabs--border-card) {
+  background: transparent;
+  border: 0px;
+}
+
+:deep(.grid-ctrl-card > .el-tabs__content) {
+  padding: 0;
+}
+:deep(.grid-ctrl-card > .el-tabs__header) {
+  background: transparent;
+  border-bottom: 0px solid var(--el-border-color-light);
+}
+:deep(
+    .grid-ctrl-card
+      > .el-tabs__header
+      .el-tabs__nav-wrap
+      .el-tabs__nav-scroll
+      .el-tabs__nav
+  ) {
+  border: 1px solid var(--el-border-color-light);
+}
+:deep(.grid-ctrl-card > .el-tabs__header .el-tabs__item.is-active) {
+  color: var(--font-color);
+  background-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
+  margin-top: 0px;
+}
+:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child) {
+  margin-left: 0px;
 }
 </style>

--
Gitblit v1.9.3