首页地图布局修改

src/views/Home/components/map.vue

@@ -26,9 +26,11 @@
       </div>
     </div>
     <div class="name-box" v-if="currentMode != 'NX'">
-      <div class="name-box-title" @click="onBackStation">{{ currentTitle }}</div>
+      <div class="name-box-title" @click="onBackStation">
+        {{ currentTitle }}
+      </div>
       <div class="name-box-period" v-show="currentPeriod != 'ZERO'">
-        <span class="name-box-period-label">{{textType}}：</span>
+        <span class="name-box-period-label">{{ textType }}：</span>
         <span class="name-box-period-value"
           >{{ currentName }}{{ currentPeriod }}</span
         >
@@ -118,34 +120,85 @@
     </div>
     <div class="map-img">
       <!-- 宁夏地图总览 -->
-      <SvgMapNX v-if="mapName === 'nx'" :show="showType" :data="sourceMap" :xtData="xtMap" @clickLabel="clickLabel" ></SvgMapNX>
-	  
+      <SvgMapNX
+        v-if="mapName === 'nx'"
+        :show="showType"
+        :data="sourceMap"
+        :xtData="xtMap"
+        @clickLabel="clickLabel"
+      ></SvgMapNX>
+
       <!-- 麻黄山风电场 -->
-      <MHSFDC v-if="mapName === 'MHS_FDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></MHSFDC>
-	  
+      <MHSFDC
+        v-if="mapName === 'MHS_FDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></MHSFDC>
+
       <!-- 香山风电场 -->
-      <XSFDC v-if="mapName === 'XS_FDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></XSFDC>
-	  
+      <XSFDC
+        v-if="mapName === 'XS_FDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></XSFDC>
+
       <!-- 牛首山风电场 -->
-      <NSSFDC v-if="mapName === 'NSS_FDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></NSSFDC>
-	  
+      <NSSFDC
+        v-if="mapName === 'NSS_FDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></NSSFDC>
+
       <!-- 青山风电场 -->
-      <QSFDC v-if="mapName === 'QS_FDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></QSFDC>
-	  
+      <QSFDC
+        v-if="mapName === 'QS_FDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></QSFDC>
+
       <!-- 石板泉风电场 -->
-      <SBQFDC v-if="mapName === 'SBQ_FDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></SBQFDC>
-	  
-	  <!-- 马场湖 -->
-	  <MCHGDC v-if="mapName === 'MCH_GDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></MCHGDC>
-	  
-	  <!-- 大武口 -->
-	  <DWKGDC v-if="mapName === 'DWK_GDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></DWKGDC>
-	  
-	  <!-- 平罗 -->
-	  <PLGDC v-if="mapName === 'PL_GDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></PLGDC>
-	  
-	  <!-- 宣和 -->
-	  <XHGDC v-if="mapName === 'XH_GDC'" :data="sourceMap" @clickFj="clickFj" @changePeriod="changePeriod" ></XHGDC>
+      <SBQFDC
+        v-if="mapName === 'SBQ_FDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></SBQFDC>
+
+      <!-- 马场湖 -->
+      <MCHGDC
+        v-if="mapName === 'MCH_GDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></MCHGDC>
+
+      <!-- 大武口 -->
+      <DWKGDC
+        v-if="mapName === 'DWK_GDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></DWKGDC>
+
+      <!-- 平罗 -->
+      <PLGDC
+        v-if="mapName === 'PL_GDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></PLGDC>
+
+      <!-- 宣和 -->
+      <XHGDC
+        v-if="mapName === 'XH_GDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></XHGDC>
     </div>
   </div>
 </template>
@@ -171,7 +224,7 @@ import MCHGDC from "./map/MCH_GDC.vue";
 import DWKGDC from "./map/DWK_GDC.vue";
 // 平罗
 import PLGDC from "./map/PL_GDC.vue";
-// 马场湖
+// 宣和
 import XHGDC from "./map/XH_GDC.vue";
 
 import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
@@ -187,10 +240,10 @@ export default {
     NSSFDC,
     QSFDC,
     SBQFDC,
-	MCHGDC,
-	DWKGDC,
-	PLGDC,
-	XHGDC,
+    MCHGDC,
+    DWKGDC,
+    PLGDC,
+    XHGDC,
     SvgIcon,
   },
   props: {
@@ -221,7 +274,7 @@ export default {
   // 数据
   data() {
     return {
-		textType:'期次',
+      textType: "期次",
       fcId: "",
       safeDay: "",
       showType: "all",
@@ -271,7 +324,7 @@ export default {
       this.$emit("mapClicks", wpId, this.tabs[index].text);
     },
     backMap(wpId, planBtnName) {
-		this.activeTab = 0;
+      this.activeTab = 0;
       this.currentMode = "NX";
       this.mapName = "nx";
       this.mapIndex = -1;
@@ -283,24 +336,24 @@ export default {
       this.mapIndex = 1;
       this.$emit("mapClick", wpId, planBtnName);
     },
-    clickFj(wpId, planBtnName,textType) {
+    clickFj(wpId, planBtnName, textType) {
       this.$emit("mapClick", wpId, planBtnName);
     },
-    changePeriod: function (name, period,textType) {
-		if(textType){
-			this.textType = '期次'
-		}else{
-			this.textType = '线路'
-		}
+    changePeriod: function (name, period, textType) {
+      if (textType) {
+        this.textType = "期次";
+      } else {
+        this.textType = "线路";
+      }
       this.currentName = name;
       this.currentPeriod = period;
       this.currentMode = "SUB";
     },
     // 返回当前场站
-    onBackStation(){
-      this.currentPeriod = "ZERO"
+    onBackStation() {
+      this.currentPeriod = "ZERO";
       this.$emit("backStation");
-    }
+    },
   },
   watch: {
     wpId(res) {