Merge remote-tracking branch 'origin/van_branch' into lc_branch

src/components/Lengend/Lengend.vue

@@ -24,43 +24,43 @@
 <script>
 export default {
   data() {
-    return {};
+    return {}
   },
   props: {
     title: {
-      type: String,
+      type: String
     },
     colors: {
-      type: Array,
+      type: Array
     },
     range: {
-      type: Array,
-    },
+      type: Array
+    }
   },
   computed: {
     getCode() {
       return function (index) {
         if (index === 0) {
-          return "<";
+          return '<'
         }
         if (index === this.colors.length - 1) {
-          return ">";
+          return '>'
         }
-        return "-";
-      };
-    },
-  },
-};
+        return '-'
+      }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .legend {
-  position: absolute;
-  right: 1vh;
-  bottom: 1vh;
+  padding: 10px;
+  background-color: rgba(1, 1, 1, 0.3);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  border-radius: 3px;
 
   .title {
     width: 100%;
@@ -73,19 +73,17 @@ export default {
   .item {
     display: flex;
     align-items: center;
+    margin-bottom: .3vh;
     .circle {
       border-radius: 2px;
-      width: 17px;
-      height: 10px;
-      margin-right: 0.5vh;
+      width: 30px;
+      height: 15px;
+      margin-right: 14px;
     }
     label {
       color: @main-color;
       font-size: 1.2vh;
     }
   }
-  .item + .item {
-    margin-top: 0.3vh;
-  }
 }
 </style>

src/components/Map/Map.vue

@@ -106,7 +106,7 @@ export default {
         layout: {
           "text-font": ["open-sans"],
           "text-field": "{PXZQMC}",
-          "text-size": 17,
+          "text-size": 16,
           "text-max-width": 5,
         },
         // maxzoom: 7,

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"
@@ -10,7 +37,7 @@
           class="bottom-part-table-cont"
           style="width: 100%,height:100%; padding-top:10px"
         >
-          <el-table :data="tableData" border style="width: 100%" height="25vh">
+          <el-table :data="tableData" border style="width: 100%" height="22vh">
             <el-table-column
               type="index"
               label="序号"
@@ -48,42 +75,15 @@
         class="bottom-part-echart"
         :title="thisCity ? thisCity.name : '全国' + statusValue1.value"
       >
-        <div style="width: 100%; height: 25vh">
+        <div style="width: 100%; height: 23vh">
           <Echart ref="echart3" :options="bottom_option" />
         </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="bottom-part-echart" :title="'年末累计(处)'">
-        <div style="width: 13vw; height: 38vh">
+      <PartWrap class="right-part-echart" :title="'年末累计(处)'">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart1_option"
@@ -91,8 +91,8 @@
           />
         </div>
       </PartWrap>
-      <PartWrap class="bottom-part-echart" :title="'总池容(万立方米)'">
-        <div style="width: 13vw; height: 38vh">
+      <PartWrap class="right-part-echart" :title="'总池容(万立方米)'">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart2_option"
@@ -100,8 +100,8 @@
           />
         </div>
       </PartWrap>
-      <PartWrap class="bottom-part-echart" :title="'供气户数(万户)'">
-        <div style="width: 13vw; height: 38vh">
+      <PartWrap class="right-part-echart" :title="'供气户数(万户)'">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart3_option"
@@ -109,8 +109,8 @@
           />
         </div>
       </PartWrap>
-      <PartWrap class="bottom-part-echart" :title="'装机容量(千瓦)'">
-        <div style="width: 13vw; height: 38vh">
+      <PartWrap class="right-part-echart" :title="'装机容量(千瓦)'">
+        <div style="width: 12vw; height: 38vh">
           <Echart
             ref="echart3"
             :options="echart4_option"
@@ -450,20 +450,53 @@ 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: 120, left: 80, right: 470 }
+        }
+      )
     },
-    echartBarClick(e) {
+    async echartBarClick(e) {
       console.log(e)
       this.thisCity = this.cityConfig.find(item => {
         return item.name == e.name
       })
+      let res = await this.$api.layer.query('land_region_province', {
+        filter: ['=', 'PXZQDM', this.thisCity.code]
+      })
+      let param = res.data.features[0].properties
+      this.map.fitBounds(
+        [
+          [param.x_min, param.y_min],
+          [param.x_max, param.y_max]
+        ],
+        {
+          padding: { bottom: 500, top: 20, left: 100, right: 400 }
+        }
+      )
+      this.map.setFilter('province', ['==', 'code', this.thisCity.code])
     },
     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: 120, left: 80, right: 450 }
+          }
+        )
       }
     },
     dateChange(e) {
-      console.log(e)
       this.thisYear = e
       this.getLeftData()
       this.getTableData()
@@ -510,7 +543,7 @@ export default {
         a.push(this.getColorOfProvince(Number(item[this.statusValue1.key])))
       })
       console.log(a)
-      a.push('#ccc')
+      a.push('rgba(0,0,0,0)')
       this.$refs.map.setBackground(a)
     },
     getColorOfProvince(count) {
@@ -712,31 +745,30 @@ export default {
   }
   .left-part {
     z-index: 99;
-    display: flex;
-    flex-direction: column;
     height: 55vh;
-    width: 250px;
     position: absolute;
     top: 11vh;
     left: 1vw;
     z-index: 100;
     .date-widget {
-      position: absolute;
-      left: 280px;
+      position: relative;
+      // right: calc(-100% - 1vw);
+      margin-bottom: 3vh;
     }
     .left-part-item {
-      margin-bottom: 2vh;
+      height: 5vh;
+      margin-bottom: 1vh;
     }
   }
   .bottom-part {
     z-index: 99;
-    width: 70vw;
+    width: 71vw;
     display: flex;
     justify-content: space-between;
     position: absolute;
-    height: 30vh;
-    bottom: 2vh;
-    left: 2vh;
+    height: 27vh;
+    bottom: 1vh;
+    left: 1vw;
     z-index: 21;
     display: flex;
     .bottom-part-table {
@@ -754,28 +786,32 @@ export default {
     position: absolute;
     z-index: 11;
     left: 300px;
-    bottom: 33vh;
+    bottom: 29vh;
   }
   .right-part {
+    margin-right: 1vw;
     z-index: 99;
     position: absolute;
     right: 0;
-    top: 12vh;
+    bottom: 1vh;
     display: flex;
-    width: 28vw;
+    width: 26vw;
     flex-wrap: wrap;
     justify-content: space-around;
+    .right-part-echart {
+      margin-top: 1vh;
+    }
   }
   .status-control {
     position: absolute;
-    right: 29vw;
-    top: 12vh;
+    right: 28vw;
+    top: 13vh;
     z-index: 99;
   }
   .status-control1 {
     position: absolute;
-    right: 29vw;
-    bottom: 33vh;
+    right: 28vw;
+    bottom: 29vh;
     z-index: 99;
   }
 }

src/router/index.js

@@ -5,6 +5,7 @@ import Home from "../views/Home.vue";
 Vue.use(VueRouter);
 
 const routes = [
+  { path: "/", redirect: "/methane_upgrade" },
   {
     path: "/",
     name: "Home",

src/views/Home.vue

@@ -7,23 +7,41 @@
           <h3>农村农业生态建设</h3>
         </div>
         <div class="menu">
-          <div class="a-menu" @click="$router.push('/methane_upgrade')">
-            沼气
+          <div
+            :class="[
+              'a-menu',
+              $route.path == '/methane_upgrade' ? 'active' : ''
+            ]"
+            @click="$router.push('/methane_upgrade')"
+          >
+            农村沼气转型升级
           </div>
-          <div class="a-menu" @click="$router.push('/biomass_energy_warm')">
-            生物
+          <div
+            :class="[
+              'a-menu',
+              $route.path == '/biomass_energy_warm' ? 'active' : ''
+            ]"
+            @click="$router.push('/biomass_energy_warm')"
+          >
+            生物质能清洁取暖
           </div>
           <div
-            class="a-menu"
+            :class="[
+              'a-menu',
+              $route.path == '/biogas_manure_eco_agriculture' ? 'active' : ''
+            ]"
             @click="$router.push('/biogas_manure_eco_agriculture')"
           >
-            沼肥
+            沼肥生态农业
           </div>
           <div
-            class="a-menu"
+            :class="[
+              'a-menu',
+              $route.path == '/renewable_energy_village' ? 'active' : ''
+            ]"
             @click="$router.push('/renewable_energy_village')"
           >
-            示范村
+            可再生能源示范村
           </div>
         </div>
       </div>
@@ -40,16 +58,16 @@
 
 <script>
 export default {
-  name: "Home",
+  name: 'Home',
   data() {
     return {
       // baseUrl: process.env.BASE_URL
-    };
+    }
   },
   components: {
     // HelloWorld,
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="less">
@@ -91,26 +109,42 @@ export default {
         }
         h3 {
           font-size: 4.7vh;
-          line-height: 10vh;
+          line-height: 8vh;
           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 {
         display: flex;
         align-items: center;
         margin-right: 40px;
+
         .a-menu {
-          width: 50px;
-          height: 50px;
-          background-color: @main-color;
-          margin-right: 20px;
-          border-radius: 50%;
-          line-height: 50px;
+          // width: 50px;
+          height: 8vh;
+          // background-color: @main-color;
+          // margin-right: 20px;
+          // border-radius: 50%;
+          line-height: 7vh;
+          font-size: 2vh;
+          font-weight: 600;
+          padding: 10px;
+          box-sizing: border-box;
           text-align: center;
-          color: aliceblue;
+          color: @main-color;
+          &:hover {
+            // background-color: rgb(206, 206, 206);
+          }
+        }
+        .active {
+          color: #fff;
+          background: linear-gradient(
+            to bottom,
+            rgba(0, 100, 200, 0.4),
+            rgba(0, 200, 100, 0)
+          );
         }
       }
     }