首页逻辑修改

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

@@ -394,6 +394,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  
   .curStyle {
     cursor: pointer;
   }

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

@@ -160,9 +160,12 @@
           />
         </g>
       </g>
-
       <g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'XS02_GC'"
+          @click.stop="clickFj('XS03_XL', '香山3#')"
+        >
           <use xlink:href="#nx-map-line" x="220" y="45" />
           <use xlink:href="#nx-map-circle" x="220" y="45" />
           <rect
@@ -176,10 +179,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.XS03_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'XS01_GC'"
+          @click.stop="clickFj('XS01_XL', '香山1#')"
+        >
           <use xlink:href="#nx-map-line" x="480" y="82" />
           <use xlink:href="#nx-map-circle" x="480" y="82" />
           <rect
@@ -193,10 +200,14 @@
           />
           <text x="510" y="95" fill="#919697" font-size="14">1#集电线</text>
           <text x="630" y="95" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.XS01_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'XS02_GC'"
+          @click.stop="clickFj('XS04_XL', '香山4#')"
+        >
           <use xlink:href="#nx-map-line" x="160" y="232" />
           <use xlink:href="#nx-map-circle" x="160" y="232" />
           <rect
@@ -210,10 +221,14 @@
           />
           <text x="190" y="244" fill="#919697" font-size="14">4#集电线</text>
           <text x="310" y="244" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.XS04_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'XS01_GC'"
+          @click.stop="clickFj('XS02_XL', '香山2#')"
+        >
           <use xlink:href="#nx-map-line" x="340" y="202" />
           <use xlink:href="#nx-map-circle" x="340" y="202" />
           <rect
@@ -227,7 +242,7 @@
           />
           <text x="370" y="214" fill="#919697" font-size="14">2#集电线</text>
           <text x="490" y="214" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.XS02_XL_fcgl }}万kw
           </text>
         </g>
 
@@ -240,7 +255,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="70" y="140" fill="#ffffff" font-size="14">二期</text>
+        <text
+          x="70"
+          y="140"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('XS02_GC', '香山二期')"
+        >
+          二期
+        </text>
 
         <line
           x1="580"
@@ -251,7 +275,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="650" y="320" fill="#ffffff" font-size="14">一期</text>
+        <text
+          x="650"
+          y="320"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('XS01_GC', '香山一期')"
+        >
+          一期
+        </text>
       </g>
     </svg>
   </div>
@@ -264,7 +297,12 @@ export default {
   // 使用组件
   components: {},
   // 传入参数
-  props: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
   // 自定义事件
   emits: {
     changePeriod: null,
@@ -272,7 +310,7 @@ export default {
   // 数据
   data() {
     return {
-      activeId: "",
+      activeId: "all",
       c1: false,
       c2: false,
       svgTop: 0,
@@ -283,6 +321,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;
     },
@@ -324,6 +369,7 @@ export default {
   },
   created() {
     // 创建后
+    this.sourceMap = this.data;
     setTimeout(() => {
       this.c1 = true;
       setTimeout(() => {
@@ -351,6 +397,12 @@ export default {
   updated() {
     // 数据更新后
   },
+  watch: {
+    data(res) {
+      this.sourceMap = res;
+      console.log(123, res);
+    },
+  },
 };
 </script>
 
@@ -360,6 +412,14 @@ export default {
   width: 100%;
   height: 100%;
 
+  .curStyle {
+    cursor: pointer;
+  }
+
+  .item-label {
+    cursor: pointer;
+  }
+
   svg {
     position: absolute;
     left: 0;