up

code/src/components/maps/index.vue

@@ -1,15 +1,33 @@
 <template>
   <div>
-    <svg id="map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-      y="0px" viewBox="0 0 1920 1000" style="enable-background: new 0 0 1920 1000" xml:space="preserve">
+    <svg
+      id="map"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 1920 1000"
+      style="enable-background: new 0 0 1920 1000"
+      xml:space="preserve"
+    >
       <font horiz-adv-x="1000">
         <!-- Copyright 2014 Adobe Systems Incorporated. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. -->
-        <font-face font-family="SourceHanSansCN-Bold-GBpc-EUC-H" units-per-em="1000" underline-position="-150"
-          underline-thickness="50" />
-        <missing-glyph horiz-adv-x="1000"
-          d="M100,-120l800,0l0,1000l-800,0M500,421l-318,409l636,0M532,380l318,409l0,-818M182,-70l318,409l318,-409M150,789l318,-409l-318,-409z" />
-        <glyph unicode="4" horiz-adv-x="589"
-          d="M164,304l115,184C300,528 320,569 338,608l4,0C340,565 336,498 336,455l0,-151M561,304l-88,0l0,436l-176,0l-276,-448l0,-100l315,0l0,-192l137,0l0,192l88,0z" />
+        <font-face
+          font-family="SourceHanSansCN-Bold-GBpc-EUC-H"
+          units-per-em="1000"
+          underline-position="-150"
+          underline-thickness="50"
+        />
+        <missing-glyph
+          horiz-adv-x="1000"
+          d="M100,-120l800,0l0,1000l-800,0M500,421l-318,409l636,0M532,380l318,409l0,-818M182,-70l318,409l318,-409M150,789l318,-409l-318,-409z"
+        />
+        <glyph
+          unicode="4"
+          horiz-adv-x="589"
+          d="M164,304l115,184C300,528 320,569 338,608l4,0C340,565 336,498 336,455l0,-151M561,304l-88,0l0,436l-176,0l-276,-448l0,-100l315,0l0,-192l137,0l0,192l88,0z"
+        />
       </font>
 
       <vmap />
@@ -21,94 +39,116 @@
 <script setup>
 import state from "./state.vue";
 import vmap from "./map.vue";
-import { ref, defineEmits, onMounted, watch, computed, nextTick } from "vue";
-import { map } from '@/data/map.js'
+import {
+  ref,
+  defineEmits,
+  onMounted,
+  watch,
+  computed,
+  nextTick,
+  defineExpose,
+} from "vue";
+import { map } from "@/data/map.js";
 
 import { getCityList } from "@/config/api";
 
+const hammer = ref("");
 
-const hammer = ref('')
-
-
+// 给父组件调用的改变地图数据的方法
+const changeMap = (id) => {
+  console.log("pppppppppppp", id);
+};
+defineExpose({
+  changeMap,
+});
 
 onMounted(() => {
   nextTick(async () => {
-    getCityList(data => {
-      data.data.forEach(item => {
-        let idx = map.findIndex(sub => item.name == sub.name)
+    getCityList((data) => {
+      data.data.forEach((item) => {
+        let idx = map.findIndex((sub) => item.name == sub.name);
         map[idx] = {
           ...map[idx],
-          num: item.sum >= 10 ? item.sum : ('&nbsp;' + item.sum),
+          num: item.sum >= 10 ? item.sum : "&nbsp;" + item.sum,
           sum: item.sum,
-          rowid: item.id
-        }
+          rowid: item.id,
+        };
       });
 
-      map.forEach(item => {
-
+      // -----------
+      map.forEach((item) => {
         if (item.sum == 0) {
-          $('#state').find(`g[id="${item.id}"] rect`).css({
-            'fill': '#999'
-          })
-
-          $('#state').find(`g[id="${item.id}"] .st0`).css({
-            'fill': '#fff'
-          })
-
-          $('#state').find(`g[id="${item.id}"] .st19`).css({
-            'fill': '#D9D9D9'
-          })
-
-          $('#state').find(`g[id="${item.id}"] .st28`).css({
-            'fill': '#fff'
-          })
+          $("#state").find(`g[id="${item.id}"] rect`).css({
+            fill: "#999",
+          });
 
-          $('#state').find(`g[id="${item.id}"] text`).css({
-            'fill': '#5A5A5A'
-          })
+          $("#state").find(`g[id="${item.id}"] .st0`).css({
+            fill: "#fff",
+          });
 
+          $("#state").find(`g[id="${item.id}"] .st19`).css({
+            fill: "#D9D9D9",
+          });
 
-          $('#state').find(`g[id="${item.id}"]`).attr('data-rowId', item.rowid)
-          $('#state').find(`g[id="${item.id}"] text`).html(item.num)
+          $("#state").find(`g[id="${item.id}"] .st28`).css({
+            fill: "#fff",
+          });
 
+          $("#state").find(`g[id="${item.id}"] text`).css({
+            fill: "#5A5A5A",
+          });
 
+          $("#state").find(`g[id="${item.id}"]`).attr("data-rowId", item.rowid);
 
           //map
-          $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] rect`).css({
-            'fill': '#999'
-          })
-
-          $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] .st0`).css({
-            'fill': '#fff'
-          })
+          $("#map_1_")
+            .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
+            .css({
+              fill: "#999",
+            });
 
-          $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] .st19`).css({
-            'fill': '#D9D9D9'
-          })
+          $("#map_1_")
+            .find(`g[id="${item.id.replace("id", "tag")}"] .st0`)
+            .css({
+              fill: "#fff",
+            });
 
-          $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] .st28`).css({
-            'fill': '#fff'
-          })
+          $("#map_1_")
+            .find(`g[id="${item.id.replace("id", "tag")}"] .st19`)
+            .css({
+              fill: "#D9D9D9",
+            });
 
-          $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] text`).css({
-            'fill': '#5A5A5A'
-          })
+          $("#map_1_")
+            .find(`g[id="${item.id.replace("id", "tag")}"] .st28`)
+            .css({
+              fill: "#fff",
+            });
 
+          $("#map_1_")
+            .find(`g[id="${item.id.replace("id", "tag")}"] text`)
+            .css({
+              fill: "#5A5A5A",
+            });
 
-          $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] rect`).css({
-            'fill': '#999'
-          })
+          $("#map_1_")
+            .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
+            .css({
+              fill: "#999",
+            });
         }
 
-        $('#map_1_').find(`g[id="${item.id.replace('id', 'tag')}"] text`).html(item.num)
-      })
-
+        $("#map_1_")
+          .find(`g[id="${item.id.replace("id", "tag")}"] text`)
+          .html(item.num);
+        $("#state").find(`g[id="${item.id}"] text`).html(item.num);
+      });
 
+      // --------------
       if (!window.Hammer) {
-        return
+        return;
       }
 
-
       var eventsHandler;
 
       eventsHandler = {
@@ -124,7 +164,7 @@ onMounted(() => {
             pannedX = 0,
             pannedY = 0;
           instance.zoom(4.3);
-          instance.pan({ x: -450, y: 0 })
+          instance.pan({ x: -450, y: 0 });
 
           // Init Hammer
           // Listen only for pointer and touch events
@@ -192,11 +232,9 @@ onMounted(() => {
         center: 1,
         customEventsHandler: eventsHandler,
       });
-    })
-
-
-  })
-})
+    });
+  });
+});
 </script>
 
 <style lang="scss" scoped>

code/src/config/api.js

@@ -56,7 +56,15 @@ export function getCityList(cb) {
     cb(res);
   });
 }
-
+// 获取虚拟场景数量
+export function getExhibitionListNum(cb) {
+  axios({
+    method: "get",
+    url: `show/exhibition/cityList`,
+  }).then((res) => {
+    cb(res);
+  });
+}
 
 
 // 获取年代

code/src/config/http.js

@@ -4,7 +4,7 @@ import { Loading } from "@/components/UI";
 
 var isProduction = process.env.NODE_ENV === "production";
 
-const serverName = isProduction ? "/api/" : "http://192.168.20.55:8035/api/";
+const serverName = isProduction ? "/api/" : "http://gdbwg.4dage.com/api/";
 
 const serverLocation = window.location.hostname;
 

code/src/views/home/aside.vue

@@ -61,7 +61,12 @@ const charStrs = ref('')
 
 const list = ref([]);
 
+const emit = defineEmits(["changeMap"]);
+
 const onClickSelect = (data) => {
+
+  emit('changeMap',data.id)
+
   isShow.value = true
   currentId.value = data.id
 }
@@ -298,6 +303,7 @@ onMounted(() => {
     }
 
     >img {
+      cursor: pointer;
       position: absolute;
       right: 10px;
       top: 50%;

code/src/views/home/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="home">
     <div class="map">
-      <maps />
+      <maps ref="mapsRef"/>
     </div>
     <div class="cityname" v-if="currentCity">
       <p>{{currentCity.name}}</p>
       <p>{{currentCity.pingyin}}</p>
     </div>
-    <vaside class="vaside" />
+    <vaside class="vaside" @changeMap='changeMap'/>
   </div>
 </template>
 
@@ -19,6 +19,17 @@ import { ref, defineEmits, onMounted, watch, computed, nextTick } from "vue";
 import { Loading } from "@/components/UI";
 import { useRouter, useRoute } from "vue-router";
 
+
+// 得到子组件的切换列表信息
+
+const mapsRef =ref(null);
+const changeMap =(id)=>{
+  // 把id传给子组件地图
+  console.log(mapsRef.value);
+  mapsRef.value.changeMap(id)
+  // console.log('------------',id);
+}
+
 const router = useRouter();
 const route = useRoute();
 

code/src/views/layout/header.vue

@@ -75,7 +75,7 @@ onMounted(() => {
   align-items: center;
 
   .logo {
-    width: 200px;
+    min-width: 200px;
     flex-shrink: 0;
     font-size: 30px;
     font-weight: bold;