fix: 修改标题，信息弹窗，调整间距等等

src/assets/css/index.less

@@ -465,4 +465,16 @@ i {
 .leaflet-control-clegend-right {
   right: 20vw;
   bottom: 0;
+}
+
+&::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: rgba(0, 100, 200, 0.2);
+}
+
+&::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  // box-shadow: inset 0 0 6px rgba(234, 227, 216, 0.1);
+  background-color: rgba(0, 100, 210, 1);
 }
\ No newline at end of file

src/components/PartWrap/PartWrap.vue

 <template>
   <div class="part info">
     <label class="title" for="title">
-      <i class="el-icon-s-flag"></i>
+      <i v-if="isFlag" class="el-icon-s-flag"></i>
       {{ title }}
     </label>
     <div>
@@ -28,6 +28,10 @@ export default {
     value: {
       type: [String, Number],
     },
+    isFlag: {
+      type: Boolean,
+      default: true,
+    },
   },
 };
 </script>

src/pages/biomassEnergyWarm/components/biogasManureMap.vue

@@ -43,14 +43,23 @@ export default {
         const currentColor = this.getCurrentColor(item.properties[obj.key]);
         filterCon.push(item.properties.pcode, currentColor);
       });
-      filterCon.push("#f00");
-      return filterCon;
+      filterCon.push(color[0]);
+      return filterCon.length === 3 ? undefined : filterCon;
     },
     ...mapGetters(["getMsgOfProvince"]),
   },
   methods: {
     onload(map) {
       this.map = map;
+      this.map.fitBounds(
+        [
+          [73.487345, 17.397329],
+          [135.087387, 53.561602],
+        ],
+        {
+          padding: { bottom: 500, top: 120, left: 80, right: 470 },
+        }
+      );
       this.setPaintColor();
     },
     getCurrentColor(val) {

src/pages/biomassEnergyWarm/components/sortList.vue

@@ -5,8 +5,9 @@
       v-for="(item, index) in getItemOfType"
       :key="index"
       :title="item.value"
-      :style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }"
+      :style="{ width: '48%' }"
     >
+      <!-- :style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }" -->
       <div class="partItem">
         <Echart
           ref="echart3"
@@ -72,18 +73,15 @@ export default {
         const xData = data.map((item) => item.xAxis);
         const yData = data.map((item) => item.yAxis);
         const option = {
-          title: {
-            text: "各省入侵报告次数",
-            textStyle: {
-              color: "rgba(12,88,97,.8)",
-              fontSize: 16,
-            },
-          },
+          title: {},
           color: ["#d65108"],
+          tooltip: {
+            show: true,
+          },
           grid: {
             left: "3%",
-            right: "3%",
-            top: "10%",
+            right: "13%",
+            top: "3%",
             bottom: "3%",
             containLabel: true,
           },
@@ -122,7 +120,7 @@ export default {
             {
               name: "入侵报告次数",
               type: "bar",
-              barWidth: 12,
+              barWidth: `80%`,
               data: yData,
               label: {
                 show: true,

src/pages/biomassEnergyWarm/components/table.vue

@@ -20,7 +20,7 @@
           v-for="(item, index) in getItemOfType"
           :key="index"
           :label="item.value"
-          :width="450 / getItemOfType.length"
+          :width="`${1 / getItemOfType.length}%`"
           align="center"
         >
         </el-table-column>

src/pages/biomassEnergyWarm/index.vue

@@ -98,14 +98,11 @@ export default {
         const xData = data.map((item) => item.xAxis);
         const yData = data.map((item) => item.yAxis);
         const option = {
-          title: {
-            text: "各省入侵报告次数",
-            textStyle: {
-              color: "rgba(12,88,97,.8)",
-              fontSize: 16,
-            },
-          },
+          title: {},
           color: ["#d65108"],
+          tooltip: {
+            show: true,
+          },
           grid: {
             left: "3%",
             right: "3%",
@@ -148,11 +145,11 @@ export default {
             {
               name: "入侵报告次数",
               type: "bar",
-              barWidth: 12,
+              barWidth: `50%`,
               data: yData,
               label: {
                 show: true,
-                position: "right",
+                position: "top",
               },
               itemStyle: {
                 emphasis: {
@@ -198,7 +195,7 @@ export default {
     position: absolute;
     bottom: 1vw;
     right: 1vw;
-    left: calc(600px + 1vw);
+    left: calc(31vw + 2vw);
     height: 27vh;
 
     .left-part-item {

src/pages/renewableEnergyVillage/components/energyVillageMap.vue

@@ -38,6 +38,15 @@ export default {
   methods: {
     async onload(map) {
       this.map = map;
+      this.map.fitBounds(
+        [
+          [73.487345, 17.397329],
+          [135.087387, 53.561602],
+        ],
+        {
+          padding: { bottom: 80, top: 120, left: 80, right: 470 },
+        }
+      );
       await this.getData();
       this.addLayer();
     },

src/pages/renewableEnergyVillage/components/filterProvince.vue

 <template>
   <div class="filterProvince">
-    <div class="search">
-      <input type="text" v-model.lazy="search" />
-    </div>
-    <div class="content">
-      <ul>
-        <li
-          v-for="(item, index) in getData"
-          @click="onAddressChange(item)"
-          :key="index"
-        >
-          {{ item.province }}
-        </li>
-      </ul>
-    </div>
+    <PartWrap :isFlag="false">
+      <div class="search">
+        <input type="text" v-model="search" />
+      </div>
+      <div class="content">
+        <ul>
+          <li
+            v-for="(item, index) in getData"
+            @click="onAddressChange(item)"
+            :key="index"
+          >
+            {{ item.province }}
+          </li>
+        </ul>
+      </div>
+    </PartWrap>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+import PartWrap from "@/components/PartWrap/PartWrap.vue";
 export default {
   name: "filterProvince",
   data() {
@@ -26,16 +29,21 @@ export default {
       search: "",
     };
   },
+  components: {
+    PartWrap,
+  },
+  created() {},
   computed: {
     getData() {
       let data = [];
+      data = this.getAggregationProvince();
       if (this.search) {
         data = this.getAggregationProvince().filter(
           (item) => item.province === this.search
         );
       }
-      data = this.getAggregationProvince();
-      data.unshift({ province: "全国", provinceCode: "" });
+
+      !this.search && data.unshift({ province: "全国", provinceCode: "" });
       return data;
     },
     ...mapGetters("energyVillage", ["getAggregationProvince"]),
@@ -51,12 +59,12 @@ export default {
 <style scoped lang="less">
 .filterProvince {
   width: 300px;
-  padding: 10px;
 
   .search input {
     width: 90%;
     transform: translate(5%);
-    margin: 0 auto;
+    margin: 10px auto 20px;
+    padding-left: 5px;
     outline: none;
     border: none;
     height: 30px;
@@ -64,7 +72,7 @@ export default {
     border: 1px solid #eaeaee;
     color: #999;
     border-radius: 5px;
-    margin-bottom: 20px;
+    // margin-bottom: 20px;
   }
   ul {
     display: flex;
@@ -72,12 +80,12 @@ export default {
     align-items: center;
     text-align: center;
     li {
-      width: 100px;
+      width: 33%;
       cursor: pointer;
     }
 
     li:hover {
-      color: blue;
+      color: #5e8ed1;
     }
   }
 }

src/pages/renewableEnergyVillage/components/picPopup.vue

 <template>
   <div class="picPopup">
     <el-dialog
-      title="提示"
+      title=""
       :visible.sync="getVisible"
       width="70%"
       :before-close="handleClose"
@@ -21,10 +21,19 @@
             class="left el-icon-arrow-left"
             @click="listValue <= 0 || (listValue -= 1)"
           ></i>
-          <img
-            :src="`${BASE_URL}/images/14_${list[listValue].key}.jpg`"
-            alt=""
-          />
+          <div class="contain">
+            <div class="zero" v-if="listValue === 0">
+              <img :src="`${BASE_URL}/images/14_basic_info1.jpg`" alt="" />
+              <img :src="`${BASE_URL}/images/14_basic_info2.jpg`" alt="" />
+              <img :src="`${BASE_URL}/images/14_basic_info3.jpg`" alt="" />
+            </div>
+            <template v-else>
+              <img
+                :src="`${BASE_URL}/images/14_${list[listValue].key}.jpg`"
+                alt=""
+              />
+            </template>
+          </div>
           <i
             class="right el-icon-arrow-right"
             @click="listValue >= list.length - 1 || (listValue += 1)"
@@ -33,9 +42,9 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="medium" @click="getVisible = false">取 消</el-button>
-        <el-button size="medium" type="primary" @click="getVisible = false"
-          >确 定</el-button
-        >
+        <el-button size="medium" type="primary" @click="getVisible = false">
+          确 定
+        </el-button>
       </span>
     </el-dialog>
   </div>
@@ -55,9 +64,7 @@ export default {
     return {
       BASE_URL: process.env.VUE_APP_BASE_URL,
       list: [
-        { key: "basic_info1", value: "基本情况" },
-        { key: "basic_info2", value: "基本情况2" },
-        { key: "basic_info3", value: "基本情况3" },
+        { key: "basic_info", value: "基本情况" },
         { key: "technical_patterns", value: "技术模式" },
         { key: "goal_achievement", value: "目标实现情况" },
         { key: "eco_benefits", value: "效益分析" },
@@ -92,6 +99,9 @@ export default {
 
 <style scoped lang="less">
 .picPopup {
+  /deep/ .el-dialog {
+    margin-top: 10vh !important;
+  }
   .select {
     display: flex;
     justify-content: space-between;
@@ -118,10 +128,20 @@ export default {
       cursor: pointer;
     }
 
-    img {
+    .contain {
       flex: 1;
       height: 50vh;
-      object-fit: contain;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .zero {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
     }
   }
 

src/pages/renewableEnergyVillage/components/sortList.vue

 <template>
   <div class="sortList">
-    <PartWrap class="left-part-item" title="消耗量（万吨）" style="width: 100%">
+    <PartWrap class="left-part-item" title="数量（个）" style="width: 100%">
       <div class="partItem">
         <Echart
           ref="echart3"
@@ -52,21 +52,17 @@ export default {
       const xData = data.map((item) => item.province);
       const yData = data.map((item) => item.count);
       const option = {
-        title: {
-          text: "各省入侵报告次数",
-          textStyle: {
-            color: "rgba(12,88,97,.8)",
-            fontSize: 16,
-          },
-        },
         color: ["#d65108"],
         grid: {
           left: "3%",
-          right: "3%",
-          top: "10%",
+          right: "13%",
+          top: "3%",
           bottom: "3%",
           containLabel: true,
         },
+        tooltip: {
+          show: true,
+        },
         xAxis: [
           {
             position: "top",

src/pages/renewableEnergyVillage/index.vue

@@ -18,7 +18,7 @@
       @showPopup="isShowPopup"
     ></EnergyVillageMap>
     <StatusControl
-      :statusStyle="{ position: 'absolute', right: '600px', top: '100px' }"
+      class="statusControl"
       :list="statusControlList"
       :value="showFilter"
       @input="onStatusChange"
@@ -119,7 +119,9 @@ export default {
     },
     isShowPopup(id) {
       this.popupId = id;
-      this.showPopup = true;
+      if (id === "14") {
+        this.showPopup = true;
+      }
     },
     ...mapActions("energyVillage", ["getData"]),
   },
@@ -132,7 +134,7 @@ export default {
 
   .left-part-item {
     position: absolute;
-    top: 11vh;
+    top: calc(11vh + 45px + 2vh);
     left: 1vw;
     width: 250px;
 
@@ -152,16 +154,20 @@ export default {
 
   .filterProvince {
     position: absolute;
-    right: 600px;
-    top: 140px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 5px;
+    right: calc(3vh + 550px);
+    top: calc(11vh + 44px + 1vh);
   }
 
   .date-widget {
     position: absolute;
-    left: 280px;
-    top: 100px;
+    top: 11vh;
+    left: 1vw;
+  }
+
+  .statusControl {
+    position: absolute;
+    top: 11vh;
+    right: calc(3vh + 550px);
   }
 }
 </style>