fix: map

JX3BOX · Mar 4, 2024 · 094311b · 094311b
1 parent e961dc5
commit 094311b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 26 deletions.
diff --git a/src/assets/css/design/map.less b/src/assets/css/design/map.less
@@ -60,13 +60,13 @@
         }
     }
     .m-maps-pic {
-        .flex; 
+        .flex;
+        .clip;
         .size(1024px,896px);
         height: calc(100vh - 160px);
         flex-direction: column;
         align-items: center;
         cursor: move;
-        overflow: auto
     }
     .m-maps__title {
         .fz(24px,24px);
@@ -142,3 +142,14 @@
         }
     }
 }
+
+.m-maps-dialog {
+    .m-city {
+        .flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        span {
+            .pointer;
+        }
+    }
+}
diff --git a/src/components/design/dragWrap.vue b/src/components/design/dragWrap.vue
@@ -21,14 +21,20 @@
 <script>
 export default {
     name: "dragWrap",
+    props: {
+        data: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
     data() {
         return {
-            scale: 0.2,
+            scale: 1,
 
             isDragging: false,
             startPosition: { x: 0, y: 0 },
             offset: { x: 0, y: 0 },
-            position: { x: 0, y: -1400 },
+            position: { x: 0, y: 0 },
             velocity: { x: 0, y: 0 },
             lastPosition: { x: 0, y: 0 },
             lastTime: 0,
@@ -37,7 +43,19 @@ export default {
             containerBounds: null,
         };
     },
-    computed: {},
+    watch: {
+        data: {
+            handler({ x, y, scale }) {
+                if (x) {
+                    this.position.x = x;
+                    this.position.y = y;
+                    this.scale = scale;
+                }
+            },
+            deep: true,
+            immediate: true,
+        },
+    },
     mounted() {
         this.$nextTick(() => {
             const map = this.$refs.map;

diff --git a/src/components/design/map.vue b/src/components/design/map.vue
@@ -2,13 +2,14 @@
     <div class="m-maps">
         <div class="m-maps-pic">
             <template v-if="!mapId">
-                <dragWrap>
+                <dragWrap :data="scale">
                     <div class="m-map__world">
                         <span
                             class="u-map"
                             v-for="(item, id) in maps"
                             :key="id"
                             :style="`left:${item.Left || 0}px;top:${item.Top || 0}px`"
+                            @click="showChild(item)"
                         >
                             {{ item.szDisplayName }}
                         </span>
@@ -35,7 +36,7 @@
                     <i class="el-icon-arrow-right el-icon--right"></i>
                 </el-button>
             </el-button-group>
-            <div class="u-world-map" @click="changeMap(0)">世界地图</div>
+            <div class="u-world-map" @click="changeWorldMap">世界地图</div>
             <div :class="[{ mapId }, 'm-mapList']">
                 <div
                     v-for="item in mapsList"
@@ -49,20 +50,32 @@
                 </div>
             </div>
         </div>
+
+        <el-dialog custom-class="m-maps-dialog" title="提示" :visible.sync="visible" width="600">
+            <div class="m-city">
+                <span v-for="(item, i) in children" :key="i" @click="showMap(item)">{{ item.szComment }}</span>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="visible = false">关 闭</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import { getWorldMap, getMaps } from "@/service/maps.js";
 import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
 import dragWrap from "./dragWrap.vue";
+import { uniqBy } from "lodash";
 export default {
     name: "Map",
     components: { dragWrap },
     data() {
         return {
             loading: false,
             mapId: 0,
+            city: [],
+            fb: [],
             maps: [],
             mapsList: [],
             search: "",
@@ -71,30 +84,20 @@ export default {
             count: 0,
             title: "世界地图",
 
-            scale: {
-                initWidth: 0, // 父元素的宽-自适应值
-                initHeight: 0, // 父元素的高-自适应值
-                elWidth: 0, // 元素宽
-                elHeight: 0, // 元素高
-                meter_zoom: 0.28, // 子元素缩放比例
-                isDragging: false,
-                dragStartX: 0,
-                dragStartY: 0,
-                zoomOriginX: 0,
-                zoomOriginY: 0,
-                click: false,
-            },
+            children: [],
+            visible: false,
+            scale: { x: -122, y: -1400, scale: 0.35 },
         };
     },
     computed: {
         currentMap() {
             return `${__imgPath}map/maps/map_${this.mapId}_0.png`;
         },
         map() {
-            return `${__imgPath}topic/pic/map.jpg?123`;
+            return `${__imgPath}topic/pic/map.jpg`;
         },
         traffic() {
-            return `${__imgPath}topic/pic/traffic.png?123`;
+            return `${__imgPath}topic/pic/traffic.png`;
         },
         client() {
             return this.$store.state.client;
@@ -120,7 +123,7 @@ export default {
             if (val === null || val === "" || val === undefined) this.mapId = 0;
             const map_1 = this.maps.filter((item) => item.ID == val)[0];
             const map_2 = this.mapsList.filter((item) => item.ID == val)[0];
-            this.title = map_1?.szDisplayName || map_2?.DisplayName || "世界地图";
+            this.title = map_1?.szDisplayName || map_2?.DisplayName || this.title;
         },
     },
     mounted() {
@@ -129,7 +132,16 @@ export default {
     methods: {
         changeMap(mapId) {
             this.mapId = mapId || 0;
-            this.scale = this.$options.data().scale;
+        },
+        showMap({ dwMapID, szComment }) {
+            this.changeMap(dwMapID);
+            this.title = szComment;
+            this.visible = false;
+        },
+        changeWorldMap() {
+            this.mapId = 0;
+            this.title = "世界地图";
+            this.scale = { ...this.$options.data().scale, map: Math.random() };
         },
         changePage(key) {
             let page = this.page;
@@ -144,8 +156,10 @@ export default {
             this.loading = true;
             getWorldMap()
                 .then((res) => {
-                    const list = res.data.data.zoning || [];
-                    this.maps = list.filter((item) => item.szDisplayName);
+                    const { zoning, city, copy } = res.data.data || [];
+                    this.city = city || [];
+                    this.fb = copy || [];
+                    this.maps = zoning.filter((item) => item.szDisplayName);
                 })
                 .finally(() => {
                     this.loading = true;
@@ -155,6 +169,24 @@ export default {
                 this.count = res.data.data.count;
             });
         },
+        showChild({ szChildCityMaps, szChildCopyMaps }) {
+            let city = [];
+            let fb = [];
+            if (szChildCityMaps && szChildCityMaps.length) {
+                city = this.city.filter((item) => szChildCityMaps.includes(item.dwMapID));
+            }
+            if (szChildCopyMaps && szChildCopyMaps.length) {
+                fb = this.fb.filter((item) => szChildCopyMaps.includes(item.dwMapID));
+            }
+            const children = city.concat(fb).filter((item) => item.szComment) || [];
+            if (children.length) {
+                this.children = uniqBy(children, "dwMapID");
+                this.visible = true;
+            }
+        },
+        mapLink() {
+            return;
+        },
     },
 };
 </script>