首页青山地图逻辑修改

src/views/Home/components/map.vue

@@ -187,11 +187,11 @@ export default {
   // 使用组件
   components: {
     SvgMapNX,
+    MHSFDC,
     XSFDC,
     NSSFDC,
     QSFDC,
     SBQFDC,
-    MHSFDC,
     SvgIcon,
   },
   props: {

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

@@ -571,7 +571,6 @@ export default {
   watch: {
     data(res) {
       this.sourceMap = res;
-      console.log(123, res);
     },
   },
 };

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

@@ -190,7 +190,11 @@
       </g>
 
       <g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS01_GC'"
+          @click.stop="clickFj('QS01_XL', '青山1#')"
+        >
           <use xlink:href="#nx-map-line" x="380" y="0" />
           <use xlink:href="#nx-map-circle" x="380" y="0" />
           <rect
@@ -204,10 +208,14 @@
           />
           <text x="410" y="17" fill="#919697" font-size="14">1#集电线</text>
           <text x="530" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS01_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS01_GC'"
+          @click.stop="clickFj('QS02_XL', '青山2#')"
+        >
           <use xlink:href="#nx-map-line" x="200" y="0" />
           <use xlink:href="#nx-map-circle" x="200" y="0" />
           <rect
@@ -221,10 +229,14 @@
           />
           <text x="230" y="17" fill="#919697" font-size="14">2#集电线</text>
           <text x="350" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS02_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS01_GC'"
+          @click.stop="clickFj('QS03_XL', '青山3#')"
+        >
           <use xlink:href="#nx-map-line" x="280" y="45" />
           <use xlink:href="#nx-map-circle" x="280" y="45" />
           <rect
@@ -238,10 +250,14 @@
           />
           <text x="310" y="57" fill="#919697" font-size="14">3#集电线</text>
           <text x="430" y="57" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS03_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS03_GC'"
+          @click.stop="clickFj('QS07_XL', '青山7#')"
+        >
           <use xlink:href="#nx-map-line" x="570" y="62" />
           <use xlink:href="#nx-map-circle" x="570" y="62" />
           <rect
@@ -255,10 +271,14 @@
           />
           <text x="560" y="75" fill="#919697" font-size="14">7#集电线</text>
           <text x="680" y="75" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS07_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS02_GC'"
+          @click.stop="clickFj('QS04_XL', '青山4#')"
+        >
           <use xlink:href="#nx-map-line" x="150" y="30" />
           <use xlink:href="#nx-map-circle" x="150" y="30" />
           <rect
@@ -272,10 +292,14 @@
           />
           <text x="180" y="47" fill="#919697" font-size="14">4#集电线</text>
           <text x="300" y="47" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS04_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS02_GC'"
+          @click.stop="clickFj('QS05_XL', '青山5#')"
+        >
           <use xlink:href="#nx-map-line" x="120" y="112" />
           <use xlink:href="#nx-map-circle" x="120" y="112" />
           <rect
@@ -289,10 +313,14 @@
           />
           <text x="150" y="134" fill="#919697" font-size="14">5#集电线</text>
           <text x="270" y="134" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS05_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS02_GC'"
+          @click.stop="clickFj('QS06_XL', '青山6#')"
+        >
           <use xlink:href="#nx-map-line" x="50" y="50" />
           <use xlink:href="#nx-map-circle" x="50" y="50" />
           <rect
@@ -306,10 +334,14 @@
           />
           <text x="80" y="77" fill="#919697" font-size="14">6#集电线</text>
           <text x="200" y="77" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS06_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS03_GC'"
+          @click.stop="clickFj('QS08_XL', '青山8#')"
+        >
           <use xlink:href="#nx-map-line" x="440" y="202" />
           <use xlink:href="#nx-map-circle" x="440" y="202" />
           <rect
@@ -323,7 +355,7 @@
           />
           <text x="470" y="214" fill="#919697" font-size="14">8#集电线</text>
           <text x="590" y="214" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS08_XL_fcgl }}万kw
           </text>
         </g>
 
@@ -336,7 +368,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="40" y="220" fill="#ffffff" font-size="14">二期</text>
+        <text
+          x="40"
+          y="220"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('QS02_GC', '青山二期')"
+        >
+          二期
+        </text>
 
         <line
           x1="60"
@@ -347,7 +388,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="60" y="40" fill="#ffffff" font-size="14">一期</text>
+        <text
+          x="60"
+          y="40"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('QS01_GC', '青山一期')"
+        >
+          一期
+        </text>
 
         <line
           x1="50"
@@ -358,7 +408,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="50" y="290" fill="#ffffff" font-size="14">三期</text>
+        <text
+          x="50"
+          y="290"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('QS03_GC', '青山三期')"
+        >
+          三期
+        </text>
       </g>
     </svg>
   </div>
@@ -371,7 +430,12 @@ export default {
   // 使用组件
   components: {},
   // 传入参数
-  props: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
   // 自定义事件
   emits: {
     changePeriod: null,
@@ -379,7 +443,8 @@ export default {
   // 数据
   data() {
     return {
-      activeId: "",
+      activeId: "all",
+      sourceMap: {},
       c1: false,
       c2: false,
       svgTop: 0,
@@ -390,6 +455,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;
     },
@@ -431,6 +503,7 @@ export default {
   },
   created() {
     // 创建后
+    this.sourceMap = this.data;
     setTimeout(() => {
       this.c1 = true;
       setTimeout(() => {
@@ -458,6 +531,11 @@ export default {
   updated() {
     // 数据更新后
   },
+  watch: {
+    data(res) {
+      this.sourceMap = res;
+    },
+  },
 };
 </script>
 
@@ -467,6 +545,14 @@ export default {
   width: 100%;
   height: 100%;
 
+  .curStyle {
+    cursor: pointer;
+  }
+
+  .item-label {
+    cursor: pointer;
+  }
+
   svg {
     position: absolute;
     left: 0;