up

code/src/components/maps/index.vue

@@ -56,182 +56,244 @@ const hammer = ref("");
 
 // 给父组件调用的改变地图数据的方法
 const changeMap = (id) => {
-  console.log("pppppppppppp", id);
+  if (id === "scene") mapNumChane("exhibition");
+  else mapNumChane("museum");
 };
 defineExpose({
   changeMap,
 });
 
-onMounted(() => {
-  nextTick(async () => {
-    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 : " " + item.sum,
-          sum: item.sum,
-          rowid: item.id,
-        };
-      });
-
-      // -----------
-      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",
-          });
+const mapNumChane = async (type) => {
+  let res = await getCityList(type);
+  res.data.forEach((item) => {
+    let idx = map.findIndex((sub) => item.name == sub.name);
+    map[idx] = {
+      ...map[idx],
+      num: item.sum >= 10 ? item.sum : " " + item.sum,
+      sum: item.sum,
+      rowid: item.id,
+    };
+  });
 
-          $("#state").find(`g[id="${item.id}"] text`).css({
-            fill: "#5A5A5A",
-          });
+  map.forEach((item) => {
+    if (item.sum == 0) {
+      $("#state").find(`g[id="${item.id}"] rect`).css({
+        fill: "#999",
+      });
 
-          $("#state").find(`g[id="${item.id}"]`).attr("data-rowId", item.rowid);
+      $("#state").find(`g[id="${item.id}"] .st0`).css({
+        fill: "#fff",
+      });
 
-          //map
-          $("#map_1_")
-            .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
-            .css({
-              fill: "#999",
-            });
+      $("#state").find(`g[id="${item.id}"] .st19`).css({
+        fill: "#D9D9D9",
+      });
 
-          $("#map_1_")
-            .find(`g[id="${item.id.replace("id", "tag")}"] .st0`)
-            .css({
-              fill: "#fff",
-            });
+      $("#state").find(`g[id="${item.id}"] .st28`).css({
+        fill: "#fff",
+      });
 
-          $("#map_1_")
-            .find(`g[id="${item.id.replace("id", "tag")}"] .st19`)
-            .css({
-              fill: "#D9D9D9",
-            });
+      $("#state").find(`g[id="${item.id}"] text`).css({
+        fill: "#5A5A5A",
+      });
 
-          $("#map_1_")
-            .find(`g[id="${item.id.replace("id", "tag")}"] .st28`)
-            .css({
-              fill: "#fff",
-            });
+      $("#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")}"] .st19`)
+        .css({
+          fill: "#D9D9D9",
+        });
+
+      $("#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",
+        });
+    } else {
+      $("#state").find(`g[id="${item.id}"] rect`).css({
+        fill: "#999",
+      });
 
-          $("#map_1_")
-            .find(`g[id="${item.id.replace("id", "tag")}"] text`)
-            .css({
-              fill: "#5A5A5A",
-            });
+      $("#state").find(`g[id="${item.id}"] .st0`).css({
+        fill: "#b61e22",
+      });
 
-          $("#map_1_")
-            .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
-            .css({
-              fill: "#999",
-            });
-        }
+      $("#state").find(`g[id="${item.id}"] .st19`).css({
+        fill: "#eecc63",
+      });
 
-        $("#map_1_")
-          .find(`g[id="${item.id.replace("id", "tag")}"] text`)
-          .html(item.num);
-        $("#state").find(`g[id="${item.id}"] text`).html(item.num);
+      $("#state").find(`g[id="${item.id}"] .st28`).css({
+        fill: "#333333",
       });
 
-      // --------------
-      if (!window.Hammer) {
-        return;
-      }
-
-      var eventsHandler;
-
-      eventsHandler = {
-        haltEventListeners: [
-          "touchstart",
-          "touchend",
-          "touchmove",
-          "touchleave",
-          "touchcancel",
-        ],
-        init: function (options) {
-          var instance = options.instance,
-            pannedX = 0,
+      // $("#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")}"] .st19`)
+      //   .css({
+      //     fill: "#D9D9D9",
+      //   });
+
+      // $("#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")}"] text`)
+      .html(item.num);
+    $("#state").find(`g[id="${item.id}"] text`).html(item.num);
+  });
+};
+// museum|exhibition
+onMounted(() => {
+  nextTick(async () => {
+    mapNumChane("museum");
+
+    // --------------
+    if (!window.Hammer) {
+      return;
+    }
+
+    var eventsHandler;
+
+    eventsHandler = {
+      haltEventListeners: [
+        "touchstart",
+        "touchend",
+        "touchmove",
+        "touchleave",
+        "touchcancel",
+      ],
+      init: function (options) {
+        var instance = options.instance,
+          pannedX = 0,
+          pannedY = 0;
+        instance.zoom(4.3);
+        instance.pan({ x: -450, y: 0 });
+
+        // Init Hammer
+        // Listen only for pointer and touch events
+        hammer.value = window.Hammer(options.svgElement, {
+          inputClass: window.Hammer.SUPPORT_POINTER_EVENTS
+            ? window.Hammer.PointerEventInput
+            : window.Hammer.TouchInput,
+        });
+
+        // Enable pinch
+        hammer.value.get("pinch").set({ enable: true });
+
+        // Handle double tap
+        hammer.value.on("doubletap", function () {
+          instance.zoomIn();
+        });
+
+        // Handle pan
+        hammer.value.on("panstart panmove", function (ev) {
+          // On pan start reset panned variables
+          if (ev.type === "panstart") {
+            pannedX = 0;
             pannedY = 0;
-          instance.zoom(4.3);
-          instance.pan({ x: -450, y: 0 });
-
-          // Init Hammer
-          // Listen only for pointer and touch events
-          hammer.value = window.Hammer(options.svgElement, {
-            inputClass: window.Hammer.SUPPORT_POINTER_EVENTS
-              ? window.Hammer.PointerEventInput
-              : window.Hammer.TouchInput,
-          });
-
-          // Enable pinch
-          hammer.value.get("pinch").set({ enable: true });
-
-          // Handle double tap
-          hammer.value.on("doubletap", function () {
-            instance.zoomIn();
-          });
-
-          // Handle pan
-          hammer.value.on("panstart panmove", function (ev) {
-            // On pan start reset panned variables
-            if (ev.type === "panstart") {
-              pannedX = 0;
-              pannedY = 0;
-            }
-
-            // Pan only the difference
-            instance.panBy({ x: ev.deltaX - pannedX, y: ev.deltaY - pannedY });
-            pannedX = ev.deltaX;
-            pannedY = ev.deltaY;
-          });
-
-          // Handle pinch
-          hammer.value.on("pinchstart pinchmove", function (ev) {
-            // On pinch start remember initial zoom
-            if (ev.type === "pinchstart") {
-              initialScale = instance.getZoom();
-              instance.zoomAtPoint(initialScale * ev.scale, {
-                x: ev.center.x,
-                y: ev.center.y,
-              });
-            }
-
+          }
+
+          // Pan only the difference
+          instance.panBy({ x: ev.deltaX - pannedX, y: ev.deltaY - pannedY });
+          pannedX = ev.deltaX;
+          pannedY = ev.deltaY;
+        });
+
+        // Handle pinch
+        hammer.value.on("pinchstart pinchmove", function (ev) {
+          // On pinch start remember initial zoom
+          if (ev.type === "pinchstart") {
+            initialScale = instance.getZoom();
             instance.zoomAtPoint(initialScale * ev.scale, {
               x: ev.center.x,
               y: ev.center.y,
             });
-          });
+          }
 
-          // Prevent moving the page on some devices when panning over SVG
-          options.svgElement.addEventListener("touchmove", function (e) {
-            e.preventDefault();
+          instance.zoomAtPoint(initialScale * ev.scale, {
+            x: ev.center.x,
+            y: ev.center.y,
           });
-        },
-
-        destroy: function () {
-          hammer.value.destroy();
-        },
-      };
-
-      // Expose to window namespace for testing purposes
-      window.panZoom = window.svgPanZoom("#map", {
-        zoomEnabled: true,
-        controlIconsEnabled: false,
-        fit: 1,
-        center: 1,
-        customEventsHandler: eventsHandler,
-      });
+        });
+
+        // Prevent moving the page on some devices when panning over SVG
+        options.svgElement.addEventListener("touchmove", function (e) {
+          e.preventDefault();
+        });
+      },
+
+      destroy: function () {
+        hammer.value.destroy();
+      },
+    };
+
+    // Expose to window namespace for testing purposes
+    window.panZoom = window.svgPanZoom("#map", {
+      zoomEnabled: true,
+      controlIconsEnabled: false,
+      fit: 1,
+      center: 1,
+      customEventsHandler: eventsHandler,
     });
   });
 });

code/src/config/api.js

@@ -47,25 +47,14 @@ export function getCollectionList(data, cb) {
   });
 }
 
-// 获取城市数量
-export function getCityList(cb) {
-  axios({
-    method: "get",
-    url: `show/museum/cityList`,
-  }).then((res) => {
-    cb(res);
-  });
-}
-// 获取虚拟场景数量
-export function getExhibitionListNum(cb) {
-  axios({
-    method: "get",
-    url: `show/exhibition/cityList`,
-  }).then((res) => {
-    cb(res);
-  });
-}
+// 获取城市数量和虚拟虚拟场景数量
 
+export const getCityList = (type) => {
+  return axios({
+    method: 'get',
+    url: `show/${type}/cityList`,
+  })
+}
 
 // 获取年代
 export function getAge(cb) {