首页地图逻辑修改

src/views/Home/components/map/NSS_FDC.vue

@@ -206,7 +206,11 @@
       </g>
 
       <g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS01_GC'"
+          @click.stop="clickFj('NSS03_XL', '牛首山3#')"
+        >
           <use xlink:href="#nx-map-line" x="220" y="45" />
           <use xlink:href="#nx-map-circle" x="220" y="45" />
           <rect
@@ -220,10 +224,14 @@
           />
           <text x="250" y="57" fill="#919697" font-size="14">3#集电线</text>
           <text x="370" y="57" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS03_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS01_GC'"
+          @click.stop="clickFj('NSS02_XL', '牛首山2#')"
+        >
           <use xlink:href="#nx-map-line" x="320" y="5" />
           <use xlink:href="#nx-map-circle" x="320" y="5" />
           <rect
@@ -237,10 +245,14 @@
           />
           <text x="350" y="17" fill="#919697" font-size="14">2#集电线</text>
           <text x="470" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS02_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS01_GC'"
+          @click.stop="clickFj('NSS01_XL', '牛首山1#')"
+        >
           <use xlink:href="#nx-map-line" x="380" y="5" />
           <use xlink:href="#nx-map-circle" x="380" y="5" />
           <rect
@@ -254,10 +266,14 @@
           />
           <text x="415" y="47" fill="#919697" font-size="14">1#集电线</text>
           <text x="535" y="47" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS01_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS03_GC'"
+          @click.stop="clickFj('NSS08_XL', '牛首山8#')"
+        >
           <use xlink:href="#nx-map-line" x="600" y="5" />
           <use xlink:href="#nx-map-circle" x="600" y="5" />
           <rect
@@ -271,10 +287,14 @@
           />
           <text x="630" y="17" fill="#919697" font-size="14">8#集电线</text>
           <text x="750" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS08_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS03_GC'"
+          @click.stop="clickFj('NSS09_XL', '牛首山9#')"
+        >
           <use xlink:href="#nx-map-line" x="650" y="55" />
           <use xlink:href="#nx-map-circle" x="650" y="55" />
           <rect
@@ -288,10 +308,14 @@
           />
           <text x="680" y="67" fill="#919697" font-size="14">9#集电线</text>
           <text x="800" y="67" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS09_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS02_GC'"
+          @click.stop="clickFj('NSS04_XL', '牛首山4#')"
+        >
           <use xlink:href="#nx-map-line" x="20" y="112" />
           <use xlink:href="#nx-map-circle" x="20" y="112" />
           <rect
@@ -305,10 +329,14 @@
           />
           <text x="50" y="124" fill="#919697" font-size="14">4#集电线</text>
           <text x="170" y="124" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS04_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS02_GC'"
+          @click.stop="clickFj('NSS05_XL', '牛首山5#')"
+        >
           <use xlink:href="#nx-map-line" x="40" y="162" />
           <use xlink:href="#nx-map-circle" x="40" y="162" />
           <rect
@@ -322,10 +350,14 @@
           />
           <text x="70" y="174" fill="#919697" font-size="14">5#集电线</text>
           <text x="190" y="174" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS05_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS03_GC'"
+          @click.stop="clickFj('NSS07_XL', '牛首山7#')"
+        >
           <use xlink:href="#nx-map-line" x="400" y="202" />
           <use xlink:href="#nx-map-circle" x="400" y="202" />
           <rect
@@ -339,10 +371,14 @@
           />
           <text x="430" y="214" fill="#919697" font-size="14">7#集电线</text>
           <text x="550" y="214" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS07_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS02_GC'"
+          @click.stop="clickFj('NSS06_XL', '牛首山6#')"
+        >
           <use xlink:href="#nx-map-line" x="370" y="122" />
           <use xlink:href="#nx-map-circle" x="370" y="122" />
           <rect
@@ -356,7 +392,7 @@
           />
           <text x="400" y="134" fill="#919697" font-size="14">6#集电线</text>
           <text x="520" y="134" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS06_XL_fcgl }}万kw
           </text>
         </g>
 
@@ -369,7 +405,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="240" y="270" fill="#ffffff" font-size="14">二期</text>
+        <text
+          x="240"
+          y="270"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('NSS02_GC', '牛首山二期')"
+        >
+          二期
+        </text>
 
         <line
           x1="480"
@@ -380,7 +425,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="550" y="40" fill="#ffffff" font-size="14">一期</text>
+        <text
+          x="550"
+          y="40"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('NSS01_GC', '牛首山一期')"
+        >
+          一期
+        </text>
 
         <line
           x1="500"
@@ -391,7 +445,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="610" y="290" fill="#ffffff" font-size="14">三期</text>
+        <text
+          x="610"
+          y="290"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('NSS03_GC', '牛首山三期')"
+        >
+          三期
+        </text>
       </g>
     </svg>
   </div>
@@ -404,7 +467,12 @@ export default {
   // 使用组件
   components: {},
   // 传入参数
-  props: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
   // 自定义事件
   emits: {
     changePeriod: null,
@@ -412,7 +480,8 @@ export default {
   // 数据
   data() {
     return {
-      activeId: "",
+      activeId: "all",
+      sourceMap: {},
       c1: false,
       c2: false,
       svgTop: 0,
@@ -423,6 +492,13 @@ export default {
   },
   // 函数
   methods: {
+    changeshowType(id, planBtnName) {
+      this.activeId = id;
+      this.$emit("clickFj", id, planBtnName);
+    },
+    clickFj(id, planBtnName) {
+      this.$emit("clickFj", id, planBtnName);
+    },
     click: function (id) {
       this.activeId = id;
     },
@@ -464,6 +540,7 @@ export default {
   },
   created() {
     // 创建后
+    this.sourceMap = this.data;
     setTimeout(() => {
       this.c1 = true;
       setTimeout(() => {
@@ -491,6 +568,12 @@ export default {
   updated() {
     // 数据更新后
   },
+  watch: {
+    data(res) {
+      this.sourceMap = res;
+      console.log(123, res);
+    },
+  },
 };
 </script>
 
@@ -500,6 +583,14 @@ export default {
   width: 100%;
   height: 100%;
 
+  .curStyle {
+    cursor: pointer;
+  }
+
+  .item-label {
+    cursor: pointer;
+  }
+
   svg {
     position: absolute;
     left: 0;

src/views/Home/components/map/XS_FDC.vue

@@ -311,6 +311,7 @@ export default {
   data() {
     return {
       activeId: "all",
+      sourceMap:{},
       c1: false,
       c2: false,
       svgTop: 0,