From 5efcf83a4a67bf5cefbee480c58a697553f9f8de Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 01 八月 2025 17:32:51 +0800
Subject: [PATCH] 新增问题复发清清单界面

---
 src/components/map/SceneMap.vue |  150 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 139 insertions(+), 11 deletions(-)

diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 7994a7f..e301ec3 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,42 +1,170 @@
 <template>
   <BaseMap></BaseMap>
+  <el-row class="left-top-wrap">
+    <FYOptionScene
+      label=""
+      :allOption="true"
+      :type="2"
+      v-model:value="scenetype"
+    ></FYOptionScene>
+    <slot name="left-top"></slot>
+  </el-row>
+  <el-scrollbar class="right-wrap">
+    <div v-for="s in selectedSceneList" :key="s.guid">
+      <el-checkbox
+        v-model="s._checked"
+        :label="s.name"
+        @change="handleChange"
+      />
+      <!-- <el-text>{{ s.name }}</el-text> -->
+    </div>
+  </el-scrollbar>
 </template>
 <script setup>
-import { watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { map, onMapMounted } from '@/utils/map/index';
 import marks from '@/utils/map/marks';
+import mapUtil from '@/utils/map/util';
 import { sceneIcon } from '@/assets/scene-icon';
 const props = defineProps({
   // 鍦烘櫙鐐逛綅淇℃伅
   data: Array
 });
 
-var markViewList = [];
+let allMarkViews = [];
+let markViewList = [];
+
+const scenetype = ref();
+
+const selectedSceneList = computed(() => {
+  return props.data.filter((v) => {
+    v._checked = true;
+    return (
+      scenetype.value == undefined ||
+      scenetype.value.value == null ||
+      v.typeid + '' == scenetype.value.value
+    );
+  });
+});
 
 watch(
   () => props.data,
   (nV, oV) => {
     if (nV != oV) {
-      drawSceneMarks();
+      clearSceneMarks();
+      createSceneMarks();
+      filterMarkViews();
     }
   },
   { immediate: true }
 );
 
-function drawSceneMarks() {
+watch(scenetype, (nV, oV) => {
+  if (nV != oV) {
+    clearSceneMarks();
+    filterMarkViews();
+  }
+});
+
+function handleChange(value) {
+  console.log(value);
+
+  filterMarkViews();
+}
+
+function createSceneMarks() {
   onMapMounted(() => {
-    markViewList = [];
+    allMarkViews = [];
     props.data.forEach((d) => {
+      // 鍒涘缓鍦烘櫙鍦板浘鏍囨敞
       const mark = marks.createMarker({
         position: [d.longitude, d.latitude],
-        icon: sceneIcon(d.typeid),
-        label: d.name,
-        extData: d.guid
+        img: sceneIcon(d.typeid),
+        // label: d.name,
+        extData: d
       });
-      markViewList.push(mark);
+      // 娣诲姞鐐瑰嚮浜嬩欢
+      mark.on('click', (ev) => {
+        const _mark = ev.target;
+        const _extData = _mark.getExtData();
+        if (_extData._show) {
+          ev.target.setLabel({
+            content: ''
+            // direction: 'bottom'
+          });
+          _extData._show = false;
+          ev.target.setExtData(_extData);
+        } else {
+          ev.target.setLabel({
+            content: _extData.name
+            // direction: 'bottom'
+          });
+          _extData._show = true;
+          ev.target.setExtData(_extData);
+        }
+      });
+      allMarkViews.push(mark);
     });
-    map.setFitView(markViewList);
+  });
+}
+
+/**
+ * 绛涢�夋墍閫夌被鍨嬬殑鍦烘櫙
+ */
+function filterMarkViews() {
+  onMapMounted(() => {
+    if (scenetype.value == undefined) {
+      markViewList = allMarkViews;
+    } else {
+      markViewList = allMarkViews.filter((v) => {
+        return (
+          scenetype.value.value == null ||
+          v.getExtData().typeid + '' == scenetype.value.value
+        );
+      });
+    }
+    markViewList = markViewList.filter((v) => {
+      const _index = selectedSceneList.value.findIndex((s) => {
+        console.log(s.guid, v.getExtData().guid);
+
+        s.guid == v.getExtData().guid;
+      });
+      return _index != -1;
+    });
+    map.add(markViewList);
+    setTimeout(() => {
+      map.setFitView(markViewList);
+      // const list = markViewList.map((v) => {
+      //   const _extData = v.getExtData();
+      //   return [_extData.longitude, _extData.latitude];
+      // });
+      // mapUtil.setBound(list);
+    }, 1000);
+  });
+}
+
+function clearSceneMarks() {
+  onMapMounted(() => {
+    if (markViewList.length > 0) {
+      map.remove(markViewList);
+    }
   });
 }
 </script>
-<style scoped></style>
+<style scoped>
+.left-top-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.right-wrap {
+  position: absolute;
+  right: 0px;
+  bottom: 0;
+  height: 50%;
+  background-color: white;
+  border-radius: 4px;
+  padding: 2px 8px;
+  max-width: 300px;
+}
+</style>

--
Gitblit v1.9.3