首页地图返回键BUG修复

src/views/Home/components/map.vue

@@ -4,26 +4,37 @@
     <div class="security-days">
       <div class="text">安全天数:</div>
       <div class="num">
-        <span class="font-num">{{safeDay}}</span>
+        <span class="font-num">{{ safeDay }}</span>
         <span class="unit">天</span>
       </div>
     </div>
     <div class="tab-box" v-if="currentMode == 'NX'">
-      <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click.stop="selectTab(index, tab.show)">
-        <span class="svg-icon svg-icon-sm" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
+      <div
+        class="tab-item"
+        v-for="(tab, index) of tabs"
+        :key="index"
+        :class="{ active: activeTab == index }"
+        @click.stop="selectTab(index, tab.show)"
+      >
+        <span
+          class="svg-icon svg-icon-sm"
+          :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'"
+        >
           <SvgIcon :svgid="tab.icon"></SvgIcon>
         </span>
         <span>{{ tab.text }}</span>
       </div>
     </div>
     <div class="name-box" v-if="currentMode != 'NX'">
-      <div class="name-box-title">{{currentTitle}}</div>
+      <div class="name-box-title">{{ currentTitle }}</div>
       <div class="name-box-period" v-show="currentPeriod != 'ZERO'">
         <span class="name-box-period-label">期次：</span>
-        <span class="name-box-period-value" >{{currentName}}{{currentPeriod}}</span>
+        <span class="name-box-period-value"
+          >{{ currentName }}{{ currentPeriod }}</span
+        >
       </div>
     </div>
-    <div class="return" @click="backMap" v-show="mapIndex != -1">
+    <div class="return" @click="backMap('0')" v-show="mapIndex != -1">
       <span class="svg-icon svg-icon-sm">
         <svg-icon :svgid="'svg-arrow-dpwn-1'" />
       </span>
@@ -31,7 +42,18 @@
     </div>
     <!-- 指南针 -->
     <div class="compass">
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        width="200px"
+        height="200px"
+        viewBox="0 0 200 200"
+        enable-background="new 0 0 200 200"
+        xml:space="preserve"
+      >
         <g id="渐变">
           <path
             fill-rule="evenodd"
@@ -81,22 +103,51 @@
           </g>
         </g>
         <g id="图层_1">
-          <polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663" />
+          <polyline
+            fill="#606769"
+            points="59.177,142.682 113.678,116.092 84.673,87.663"
+          />
         </g>
         <g id="图层_7">
-          <polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745" />
+          <polygon
+            fill="#BD3338"
+            points="139.496,60.156 114.004,115.172 85.004,86.745"
+          />
         </g>
       </svg>
     </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>
-      <SvgMapXS v-if="mapName === 'XS_FDC'" @changePeriod="changePeriod"></SvgMapXS>
-      <SvgMapNSS v-if="mapName === 'NSS_FDC'" @changePeriod="changePeriod"></SvgMapNSS>
-      <SvgMapQS v-if="mapName === 'QS_FDC'" @changePeriod="changePeriod"></SvgMapQS>
-      <SvgMapSBQ v-if="mapName === 'SBQ_FDC'" @changePeriod="changePeriod"></SvgMapSBQ>
+      <MHSFDC
+        v-if="mapName === 'MHS_FDC'"
+        :data="sourceMap"
+        @clickFj="clickFj"
+        @changePeriod="changePeriod"
+      ></MHSFDC>
+      <SvgMapXS
+        v-if="mapName === 'XS_FDC'"
+        @changePeriod="changePeriod"
+      ></SvgMapXS>
+      <SvgMapNSS
+        v-if="mapName === 'NSS_FDC'"
+        @changePeriod="changePeriod"
+      ></SvgMapNSS>
+      <SvgMapQS
+        v-if="mapName === 'QS_FDC'"
+        @changePeriod="changePeriod"
+      ></SvgMapQS>
+      <SvgMapSBQ
+        v-if="mapName === 'SBQ_FDC'"
+        @changePeriod="changePeriod"
+      ></SvgMapSBQ>
     </div>
   </div>
 </template>
@@ -127,26 +178,26 @@ export default {
     MHSFDC,
     SvgIcon,
   },
-  props:{
-    wpId:{
-      type:String,
-      default:"0"
+  props: {
+    wpId: {
+      type: String,
+      default: "0",
     },
-    day:{
-      type:String,
-      default:"---"
+    day: {
+      type: String,
+      default: "---",
     },
-    data:{
-      type:Object,
-      default:() => {}
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    xtData: {
+      type: Object,
+      default: () => {},
     },
-    xtData:{
-      type:Object,
-      default:() => {}
-    }
   },
 
-  mounted(){
+  mounted() {
     this.fcId = this.wpId;
     this.safeDay = this.day;
     this.sourceMap = this.data;
@@ -155,25 +206,26 @@ export default {
   // 数据
   data() {
     return {
-      fcId:"",
-      safeDay:"",
+      fcId: "",
+      safeDay: "",
       showType: "all",
-      sourceMap:{},
+      sourceMap: {},
+      mapIndex: -1,
       tabs: [
         {
           icon: "svg-all",
           text: "全部",
-          show: "all"
+          show: "all",
         },
         {
           icon: "svg-wind-site",
           text: "风场",
-          show: "fc"
+          show: "fc",
         },
         {
           icon: "svg-photovoltaic",
           text: "电站",
-          show: "gf"
+          show: "gf",
         },
       ],
       compassIcon: compassIcon,
@@ -182,10 +234,10 @@ export default {
       nxSvgFile: require("@assets/map/map-nx.svg"),
       nxmap: true,
       mapName: "nx",
-      currentMode: 'NX',
-      currentTitle: '青山风电场',
-      currentName: '麻黄山',
-      currentPeriod: '一期',
+      currentMode: "NX",
+      currentTitle: "青山风电场",
+      currentName: "麻黄山",
+      currentPeriod: "一期",
     };
   },
   emits: {
@@ -197,22 +249,24 @@ export default {
     selectTab(index, showType) {
       this.activeTab = index;
       this.showType = showType;
-      let wpId = (showType === "all" ? "0" : showType === "fc" ? "-1" : "-2");
+      let wpId = showType === "all" ? "0" : showType === "fc" ? "-1" : "-2";
       this.safeDay = "---";
       this.mapName = "nx";
       this.$emit("mapClick", wpId, this.tabs[index].text);
     },
-    backMap() {
+    backMap(wpId) {
       this.currentMode = "NX";
-      this.mapName = "nx";      
+      this.mapName = "nx";
+      this.mapIndex = -1;
       this.$emit("mapClick", wpId);
     },
     clickLabel(wpId, planBtnName) {
       this.mapName = wpId;
       this.currentTitle = planBtnName;
+      this.mapIndex = 1;
       this.$emit("mapClick", wpId, planBtnName);
     },
-    clickFj(wpId, planBtnName){
+    clickFj(wpId, planBtnName) {
       this.$emit("mapClick", wpId, planBtnName);
     },
     changePeriod: function (name, period) {
@@ -221,20 +275,20 @@ export default {
       this.currentMode = "SUB";
     },
   },
-  watch:{
-    wpId(res){
+  watch: {
+    wpId(res) {
       this.fcId = res;
     },
-    day(res){
+    day(res) {
       this.safeDay = res;
     },
-    data(res){
+    data(res) {
       this.sourceMap = res;
     },
-    xtData(res){
+    xtData(res) {
       this.xtMap = res;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -285,13 +339,13 @@ export default {
     .name-box-title {
       font-size: 2.222vh;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 1;
     }
 
     .name-box-period {
       margin-top: 2.222vh;
-      .name-box-period-label, 
+      .name-box-period-label,
       .name-box-period-value {
         font-size: 1.481vh;
         font-weight: 400;
@@ -299,11 +353,11 @@ export default {
       }
 
       .name-box-period-label {
-        color: #FEFEFE;
+        color: #fefefe;
       }
 
       .name-box-period-value {
-        color: #05BB4C;
+        color: #05bb4c;
       }
     }
   }
@@ -366,12 +420,12 @@ export default {
       svg {
         transform: rotate(90deg);
         use {
-          transition: all .3s;
+          transition: all 0.3s;
         }
       }
     }
 
-    transition: all .3s;
+    transition: all 0.3s;
 
     &:hover {
       color: @green;