沼肥

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/biogasManureEcoAgriculture/index.vue

 <template>
-  <div class="BiogasManureEcoAgriculture"></div>
+  <!-- 农村沼气转型升级 -->
+  <div class="biogasManureEcoAgriculture">
+    <div class="left-part">
+      <PartWrap
+        class="left-part-item"
+        :title="'原料消耗量合计(万吨)'"
+        :value="leftObj.yl_num"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'畜禽粪污(万吨)'"
+        :value="leftObj.cqwf_num"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'农作物秸秆(万吨)'"
+        :value="leftObj.nzwjg_num"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'其他有机废弃物(万吨)'"
+        :value="leftObj.qt_num"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'沼肥用量(万吨)'"
+        :value="leftObj.sf_num"
+      ></PartWrap>
+    </div>
+    <div class="bottom-part">
+      <PartWrap class="bottom-part-table" :title="'统计表'">
+        <div
+          class="bottom-part-table-cont"
+          style="width: 100%,height:100%; padding-top:10px"
+        >
+          <el-table :data="tableData" border style="width: 100%" height="22vh">
+            <el-table-column
+              type="index"
+              label="序号"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="pname"
+              label="地区"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="yl_num"
+              label="原料消耗合计(万吨)"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="cqwf_num"
+              align="center"
+              label="畜禽粪污(万吨)"
+            ></el-table-column>
+            <el-table-column
+              prop="nzwjg_num"
+              align="center"
+              label="农作物秸秆(万吨)"
+            ></el-table-column>
+            <el-table-column
+              prop="qt_num"
+              align="center"
+              label="其他有机废弃物(万亩)"
+            ></el-table-column>
+            <el-table-column
+              prop="sf_num"
+              align="center"
+              label="沼肥用量(万亩)"
+            ></el-table-column>
+          </el-table>
+        </div>
+      </PartWrap>
+      <PartWrap
+        class="bottom-part-echart"
+        :title="statusValue.value + '(万吨)'"
+      >
+        <div style="width: 100%; height: 23vh">
+          <Echart ref="echart3" :options="bottom_option" @barClick="echartBarClick"/>
+        </div>
+      </PartWrap>
+    </div>
+    <Lengend class="legend-part" :colors="colors" :range="colorLabel" />
+    <MethaneMap @onload="load" ref="map"></MethaneMap>
+    <div class="this-city" v-if="thisCity">
+      {{ thisCity.name }}
+      <i
+        class="el-icon-close"
+        style="color: #fff; margin-left: 10px"
+        @click="cityChange(false)"
+      ></i>
+    </div>
+    <StatusControl
+      class="status-control"
+      :list="statusControlList"
+      v-model="statusValue"
+    ></StatusControl>
+  </div>
 </template>
 
 <script>
+import Lengend from '../../components/Lengend/Lengend.vue'
+import cityConfig from '../../config/city.config'
+import Echart from '../../components/Echart/Echarts.vue'
+import PartWrap from '../../components/PartWrap/PartWrap.vue'
+import StatusControl from '@/components/statusControl/index.vue'
+import MethaneMap from './components/methaneMap'
 export default {
-  name: "BiogasManureEcoAgriculture",
+  name: 'BiogasManureEcoAgriculture',
   data() {
-    return {};
+    return {
+      map: '',
+      // legendRange:[],
+      colors: [
+        'rgb(67, 134, 78)',
+        'rgb(178, 222, 145)',
+        'rgb(223, 238, 175)',
+        'rgb(245, 255, 163)',
+        'rgb(240, 145, 98)',
+        'rgb(245,1,0)'
+      ],
+      colorLabel: [],
+      cityConfig: cityConfig.province,
+      thisCity: '',
+      leftObj: {
+        all_local_num: '',
+        all_capacity: '',
+        family_num: '',
+        zj_capacity: ''
+      },
+      statusControlList: [
+        { key: 'yl_num', value: '原料消耗量' },
+        { key: 'cqwf_num', value: '畜禽粪污' },
+        { key: 'nzwjg_num', value: '农作物秸秆' },
+        { key: 'qt_num', value: '其他有机废弃物' },
+        { key: 'sf_num', value: '沼肥用量' }
+      ],
+      statusValue: { key: 'yl_num', value: '原料消耗量' },
+      thisTable: '供气户数',
+      bottom_option: {
+        textStyle: {
+          color: '#fff'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        // legend: {
+        //   data: [
+        //     '汇总',
+        //     '小型沼气工程',
+        //     '中性沼气工程',
+        //     '大性沼气工程',
+        //     '特大性沼气工程'
+        //   ],
+        //   textStyle: {
+        //     color: '#fff'
+        //   }
+        // },
+        xAxis: {
+          type: 'category',
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        grid: { bottom: '10%' },
+        series: [
+          {
+            barWidth: 40,
+            data: [],
+            type: 'bar',
+            itemStyle: {
+              color: '#d8ee2c'
+            }
+          }
+        ]
+      },
+      tableData: ''
+    }
   },
-  components: {},
-  computed: {},
-  methods: {},
-};
+  watch: {
+    thisCity() {
+      this.getLeftData()
+      // this.getlineChartData(this.statusValue1.key)
+    },
+    statusValue() {
+      this.getlineChartData(this.tableData)
+    }
+  },
+  components: {
+    Echart,
+    PartWrap,
+    Lengend,
+    MethaneMap,
+    StatusControl
+  },
+  async mounted() {
+    // await this.getYearRange()
+    // await this.getLeftData()
+    // await this.getTableData()
+    // await this.getlineChartData(this.statusValue1.key)
+  },
+  methods: {
+    async load(map) {
+      this.map = map
+      await this.getLeftData()
+      await this.getTableData()
+      await this.getlineChartData(this.tableData)
+
+      this.map.fitBounds(
+        [
+          [73.487345, 17.397329],
+          [135.087387, 53.561602]
+        ],
+        {
+          padding: { bottom: 500, top: 20, left: 200, right: 200 }
+        }
+      )
+    },
+    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: 20, left: 100, right: 400 }
+          }
+        )
+      }
+    },
+    async getLeftData() {
+      let res = await this.$api.layer.query('ra_biogas_manure', {
+        filter: ['=', 'pcode', this.thisCity ? this.thisCity.code : '10']
+      })
+      this.leftObj = res.data.features[0].properties
+    },
+    async setBackgroundColor(data) {
+      console.log(data[0], data[data.length - 1])
+      let cha =
+        Number(data[data.length - 1][this.statusValue.key]) -
+        Number(data[0][this.statusValue.key])
+      let range = [
+        Number(data[0][this.statusValue.key]),
+        Number(data[0][this.statusValue.key]) + cha / 4,
+        Number(data[0][this.statusValue.key]) + cha / 2,
+        Number(data[0][this.statusValue.key]) + (cha / 4) * 3,
+        Number(data[0][this.statusValue.key]) + cha
+      ]
+      range.reverse()
+      console.log(range)
+      this.colorLabel = range
+      let a = ['match', ['get', 'code']]
+      data.forEach(item => {
+        a.push(item.pcode)
+        a.push(this.getColorOfProvince(Number(item[this.statusValue.key])))
+      })
+      console.log(a)
+      a.push('#ccc')
+      this.$refs.map.setBackground(a)
+    },
+    getColorOfProvince(count) {
+      if (count > this.colorLabel[this.colorLabel.length - 1]) {
+        return this.colors[this.colors.length - 1]
+      } else {
+        let idx = -1
+        this.colorLabel.find((item, index) => {
+          idx = index
+          return item >= count
+        })
+        if (idx !== -1) {
+          return this.colors[idx]
+        }
+      }
+    },
+    async getTableData() {
+      let res = await this.$api.layer.query('ra_biogas_manure', {
+        filter: ['!=', 'pcode', '10']
+      })
+      console.log(res)
+      let data = res.data.features.map(item => {
+        return item.properties
+      })
+      this.tableData = data
+    },
+    async getlineChartData(param) {
+      let data = param.sort((a, b) => {
+        return b[this.statusValue.key] - a[this.statusValue.key]
+      })
+      this.setBackgroundColor(data)
+      let titles = data.map(item => {
+        return item.pname
+      })
+      let datas = data.map(item => {
+        return item[this.statusValue.key]
+      })
+
+      this.$set(this.bottom_option.xAxis, 'data', titles)
+      this.$set(this.bottom_option.series[0], 'data', datas)
+    }
+  }
+}
 </script>
 
-<style scoped lang="less"></style>
+<style lang="less" scoped>
+// @import url('../../assets/css/public.less');
+.biogasManureEcoAgriculture {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .this-city {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    z-index: 99;
+    color: #fff;
+    border: 1px solid #5ab4ff;
+    padding-left: 1.5vh;
+    padding-right: 1.5vh;
+    line-height: 4vh;
+    margin-right: 2vh;
+    margin-top: 0.3vh;
+    height: 4vh;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #16ceaf !important;
+    bottom: 35vh;
+    left: 40vw;
+    border-radius: 25px;
+  }
+  .left-part {
+    z-index: 99;
+    // display: flex;
+    // flex-direction: column;
+    height: 55vh;
+    // width: 250px;
+    position: absolute;
+    top: 11vh;
+    left: 1vw;
+    z-index: 100;
+    .left-part-item {
+      height: 5vh;
+      margin-bottom: 2vh;
+    }
+  }
+  .bottom-part {
+    z-index: 99;
+    width: 97vw;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    height: 27vh;
+    bottom: 2vh;
+    left: 2vh;
+    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: 300px;
+    bottom: 33vh;
+  }
+
+  .status-control {
+    position: absolute;
+    right: 2vw;
+    top: 12vh;
+    z-index: 99;
+  }
+}
+</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;
     }
   }