fix: 示范村图片预览

src/assets/css/index.less

@@ -478,3 +478,11 @@ i {
   // box-shadow: inset 0 0 6px rgba(234, 227, 216, 0.1);
   background-color: rgba(0, 100, 210, 1);
 }
+.el-image-viewer__wrapper{
+  .el-image-viewer__canvas {
+    img {
+      max-height: 80%!important;
+      max-width: 80%!important;
+    }
+  }
+}

src/pages/biomassEnergyWarm/components/sortList.vue

@@ -77,6 +77,7 @@ export default {
           color: ["#d65108"],
           tooltip: {
             show: true,
+            trigger: 'axis'
           },
           grid: {
             left: "3%",
@@ -118,7 +119,6 @@ export default {
           ],
           series: [
             {
-              name: "入侵报告次数",
               type: "bar",
               barWidth: `80%`,
               data: yData,

src/pages/biomassEnergyWarm/index.vue

@@ -118,7 +118,8 @@ export default {
           title: {},
           color: ['#d65108'],
           tooltip: {
-            show: true
+            show: true,
+            trigger: 'axis'
           },
           grid: {
             left: '3%',
@@ -264,7 +265,7 @@ export default {
     position: absolute;
     left: 1vw;
     top: 21vh;
-    .StatusControl{
+    .StatusControl {
       margin-top: 1vh;
     }
   }

src/pages/methaneUpgrade/index.vue

@@ -397,7 +397,7 @@ export default {
           [135.087387, 53.561602]
         ],
         {
-          padding: { bottom: 400, top: 120, left: 100, right: 400}
+          padding: { bottom: 400, top: 120, left: 100, right: 400 }
         }
       )
     },
@@ -619,7 +619,7 @@ export default {
     .left-part-item {
       height: 5vh;
       margin-bottom: 1vh;
-      margin-left: 1vw;
+      margin-right: 1vw;
     }
   }
   .bottom-part {
@@ -633,21 +633,14 @@ export default {
     left: 1vw;
     z-index: 21;
     display: flex;
-    .bottom-part-table {
-      width: 40vw;
-      .bottom-part-table-cont {
-        width: 100%;
-      }
-    }
     .bottom-part-echart {
-      margin-left: 1vw;
       flex: 1;
     }
   }
   .legend-part {
     position: absolute;
     z-index: 11;
-    left: 2vw;
+    left: 1vw;
     bottom: 29vh;
   }
   .right-part {
@@ -667,7 +660,7 @@ export default {
   }
   .status-control-wrap {
     position: absolute;
-    left: 2vw;
+    left: 1vw;
     top: 21vh;
     z-index: 995;
   }

src/pages/renewableEnergyVillage/components/sortList.vue

@@ -62,6 +62,7 @@ export default {
         },
         tooltip: {
           show: true,
+          trigger: 'axis'
         },
         xAxis: [
           {
@@ -96,7 +97,6 @@ export default {
         ],
         series: [
           {
-            name: "入侵报告次数",
             type: "bar",
             barWidth: 12,
             data: yData,

src/pages/renewableEnergyVillage/index.vue

@@ -31,7 +31,15 @@
       class="filterProvince"
       @onAddressChange="onAddressChange"
     ></FilterProvince>
-    <PicPopup v-model="showPopup" :id="popupId"></PicPopup>
+    <el-image
+      class="my-img"
+      v-if="imageUrl"
+      ref="myImg"
+      :src="imageUrl"
+      :preview-src-list="srcList"
+    >
+    </el-image>
+    <!-- <PicPopup v-model="showPopup" :id="popupId"></PicPopup> -->
   </div>
 </template>
 
@@ -45,7 +53,7 @@ import EnergyVillageMap from './components/energyVillageMap.vue'
 // import Table from "./components/table.vue";
 import FilterProvince from './components/filterProvince.vue'
 import SortList from './components/sortList.vue'
-import PicPopup from './components/picPopup.vue'
+// import PicPopup from './components/picPopup.vue'
 export default {
   name: 'RenewableEnergyVillage',
   components: {
@@ -55,8 +63,8 @@ export default {
     // StatusControl,
     SortList,
     FilterProvince,
-    DateWidget,
-    PicPopup
+    DateWidget
+    // PicPopup
   },
   created() {
     this.getData()
@@ -69,7 +77,16 @@ export default {
       yearRange: [],
       yearValue: '',
       showPopup: false,
-      popupId: ''
+      popupId: '',
+      imageUrl: `${process.env.VUE_APP_BASE_URL}/images/14_basic_info1.jpg`,
+      srcList: [
+        `${process.env.VUE_APP_BASE_URL}/images/14_basic_info1.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_basic_info2.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_basic_info3.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_technical_patterns.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_goal_achievement.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_eco_benefits.jpg`
+      ]
     }
   },
   computed: {
@@ -115,11 +132,13 @@ export default {
     dateChange(e) {
       this.yearValue = e
     },
-    isShowPopup(id) {
-      this.popupId = id
-      if (id === '14') {
-        this.showPopup = true
-      }
+    isShowPopup() {
+      this.$refs.myImg.showViewer = true
+      console.log(this.$refs.myImg)
+      // this.popupId = id
+      // if (id === '14') {
+      //   this.showPopup = true
+      // }
     },
     ...mapActions('energyVillage', ['getData'])
   }
@@ -127,9 +146,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/.el-image-viewer__canvas {
+  img {
+    max-height: 80%;
+    max-width: 80%;
+  }
+}
 .enetgyVillage {
   height: inherit;
 
+  .my-img {
+    .el-image__inner {
+      visibility: hidden;
+    }
+    .my-pre {
+      position: absolute;
+      margin-left: 111px;
+      margin-top: -156px;
+    }
+  }
   .left-part-item {
     position: absolute;
     top: calc(11vh + 45px + 2vh);

src/views/Home.vue

@@ -4,13 +4,13 @@
       <div class="header">
         <div class="header-left">
           <img src="../assets/img/logo.png" alt />
-          <h3>农村农业生态建设</h3>
+          <img src="../assets/img/title.png" alt />
         </div>
         <div class="menu">
           <div
             :class="[
               'a-menu',
-              $route.path == '/methane_upgrade' ? 'active' : '',
+              $route.path == '/methane_upgrade' ? 'active' : ''
             ]"
             @click="$router.push('/methane_upgrade')"
           >
@@ -19,7 +19,7 @@
           <div
             :class="[
               'a-menu',
-              $route.path == '/biomass_energy_warm' ? 'active' : '',
+              $route.path == '/biomass_energy_warm' ? 'active' : ''
             ]"
             @click="$router.push('/biomass_energy_warm')"
           >
@@ -28,7 +28,7 @@
           <div
             :class="[
               'a-menu',
-              $route.path == '/biogas_manure_eco_agriculture' ? 'active' : '',
+              $route.path == '/biogas_manure_eco_agriculture' ? 'active' : ''
             ]"
             @click="$router.push('/biogas_manure_eco_agriculture')"
           >
@@ -37,7 +37,7 @@
           <div
             :class="[
               'a-menu',
-              $route.path == '/renewable_energy_village' ? 'active' : '',
+              $route.path == '/renewable_energy_village' ? 'active' : ''
             ]"
             @click="$router.push('/renewable_energy_village')"
           >
@@ -58,16 +58,16 @@
 
 <script>
 export default {
-  name: "Home",
+  name: 'Home',
   data() {
     return {
       // baseUrl: process.env.BASE_URL
-    };
+    }
   },
   components: {
     // HelloWorld,
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="less">
@@ -113,7 +113,7 @@ export default {
           font-weight: 700;
           letter-spacing: 0.1vh;
           color: @main-color;
-          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
       }
       .menu {