沼肥

src/components/PartWrap/PartWrap.vue

@@ -37,7 +37,7 @@ export default {
 .part {
   height: 100%;
   padding: 1.2vh;
-  min-height: 12vh;
+  min-height: 9vh;
   box-sizing: border-box;
   position: relative;
   background: @linear-color;
@@ -101,8 +101,8 @@ export default {
   // margin-bottom: 1vh;
   label {
     text-align: center;
-    line-height: 5vh;
-    height: 5vh;
+    // line-height: 5vh;
+    // height: 5vh;
     .sub {
       font-size: 14px;
     }
@@ -111,7 +111,7 @@ export default {
     // width: 100%;
     // font-size: 1.4vh;
     padding-left: 10px;
-    height: 2vh;
+    // height: 2vh;
     line-height: 1.8vh;
     color: @main-color;
     text-align: left;
@@ -125,7 +125,7 @@ export default {
     margin-left: 32px;
     color: @font-light-color;
     font-family: timeFont;
-    font-size: 3vh;
+    font-size: 2.6vh;
   }
 }
 </style>

src/components/statusControl/index.vue

@@ -50,17 +50,19 @@ export default {
 .statusControl {
   ul li {
     margin-bottom: 10px;
-    border-radius: 5px;
+    border-radius: 15px;
     padding: 5px 10px;
-    width: 150px;
-    color: #333;
-    background-color: #fff;
+    width: 130px;
+    color: #84c6ff;
+    // background-color: #fff;
     box-shadow: 0 0 5px #fff9;
     text-align: center;
     cursor: pointer;
+    border: 1px solid #84c6ff;
     &.acitive {
+
       color: #fff;
-      background-color: #144683;
+      background-color: #16ceaf;
     }
   }
 }

src/pages/biogasManureEcoAgriculture/components/methaneMap.vue

+<template>
+  <div class="methane">
+    <Map mapId="methane" @onload="onload"></Map>
+  </div>
+</template>
+
+<script>
+import Map from "@/components/Map/Map.vue";
+export default {
+  name: "methane",
+  data() {
+    return {
+      map: "",
+    };
+  },
+  components: {
+    Map,
+  },
+  computed: {},
+  methods: {
+    async onload(map) {
+      this.map = map;
+      this.map.addLayer({
+        id: "province",
+        source: "province",
+        type: "fill",
+        layout: {},
+        paint: {
+          "fill-outline-color": "#fff",
+          "fill-color": "rgba(0, 0, 0, 0)",
+        },
+      });
+      await this.$emit("onload", map);
+    },
+    async setBackground(data) {
+      await this.map.setPaintProperty("province", "fill-color", data);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.methane {
+  height: inherit;
+}
+</style>

src/pages/methaneUpgrade/index.vue

 <template>
   <!-- 农村沼气转型升级 -->
   <div class="methaneUpgrade">
+    <div class="left-part">
+      <DateWidget
+        class="date-widget"
+        :range="yearRange"
+        @dateChange="dateChange"
+      />
+      <PartWrap
+        class="left-part-item"
+        :title="'年末累积(处)'"
+        :value="leftObj.all_local_num"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'总池容(万立方米)'"
+        :value="leftObj.all_capacity"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'供气户数(万户)'"
+        :value="leftObj.family_num"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'装机容量(千瓦)'"
+        :value="leftObj.zj_capacity"
+      ></PartWrap>
+    </div>
     <div class="bottom-part">
       <PartWrap
         class="bottom-part-table"
@@ -53,33 +80,6 @@
         </div>
       </PartWrap>
     </div>
-    <div class="left-part">
-      <DateWidget
-        class="date-widget"
-        :range="yearRange"
-        @dateChange="dateChange"
-      />
-      <PartWrap
-        class="left-part-item"
-        :title="'年末累积(处)'"
-        :value="leftObj.all_local_num"
-      ></PartWrap>
-      <PartWrap
-        class="left-part-item"
-        :title="'总池容(万立方米)'"
-        :value="leftObj.all_capacity"
-      ></PartWrap>
-      <PartWrap
-        class="left-part-item"
-        :title="'供气户数(万户)'"
-        :value="leftObj.family_num"
-      ></PartWrap>
-      <PartWrap
-        class="left-part-item"
-        :title="'装机容量(千瓦)'"
-        :value="leftObj.zj_capacity"
-      ></PartWrap>
-    </div>
     <Lengend class="legend-part" :colors="colors" :range="colorLabel" />
     <div class="right-part">
       <PartWrap class="right-part-echart" :title="'年末累计(处)'">
@@ -450,6 +450,16 @@ export default {
       await this.getLeftData()
       await this.getTableData()
       await this.getlineChartData(this.statusValue1.key)
+
+      this.map.fitBounds(
+        [
+          [73.487345, 17.397329],
+          [135.087387, 53.561602]
+        ],
+        {
+          padding: { bottom: 500, top: 20, left: 100, right: 400 }
+        }
+      )
     },
     async echartBarClick(e) {
       console.log(e)
@@ -474,6 +484,16 @@ export default {
     cityChange(e) {
       if (!e) {
         this.thisCity = ''
+        this.map.setFilter('province', null)
+        this.map.fitBounds(
+          [
+            [73.487345, 17.397329],
+            [135.087387, 53.561602]
+          ],
+          {
+            padding: { bottom: 500, top: 20, left: 100, right: 400 }
+          }
+        )
       }
     },
     dateChange(e) {
@@ -725,10 +745,10 @@ export default {
   }
   .left-part {
     z-index: 99;
-    display: flex;
-    flex-direction: column;
+    // display: flex;
+    // flex-direction: column;
     height: 55vh;
-    width: 250px;
+    // width: 250px;
     position: absolute;
     top: 11vh;
     left: 1vw;
@@ -738,6 +758,7 @@ export default {
       left: 280px;
     }
     .left-part-item {
+      height: 5vh;
       margin-bottom: 2vh;
     }
   }
@@ -778,7 +799,7 @@ export default {
     width: 28vw;
     flex-wrap: wrap;
     justify-content: space-around;
-    .right-part-echart{
+    .right-part-echart {
       margin-bottom: 1vh;
     }
   }