名称

src/api/modules/layer.js

 import ajax from "./base";
 
+// 行政区获取
+export async function query(dataSetCode, params = {}) {
+  const defaultParams = {};
+  return ajax(
+    `${dataSetCode}/query`,
+    Object.assign({}, defaultParams, params),
+    "POST"
+  );
+}
 
-  // 行政区获取
- export async function query(dataSetCode, params = {}) {
-    const defaultParams = {};
-    return ajax(
-      `${dataSetCode}/query`,
-      Object.assign({}, defaultParams, params),
-      "POST"
-    );
-  }
-  export async function aggregation(dataSetCode, params = {}) {
-    const defaultParams = {};
-    return ajax(
-      `${dataSetCode}/aggregation`,
-      Object.assign({}, defaultParams, params),
-      "POST"
-    );
-  }
\ No newline at end of file
+export async function aggregation(dataSetCode, params = {}) {
+  const defaultParams = {};
+  return ajax(
+    `${dataSetCode}/aggregation`,
+    Object.assign({}, defaultParams, params),
+    "POST"
+  );
+}

src/components/Map/Map.vue

@@ -80,28 +80,42 @@ export default {
       })
     },
     addProvinceLayer() {
-      this.$api.data.getProvinceData().then(res => {
-        this.map.addSource('province', {
-          // type: 'geojson',
-          // data: res.data
-          tiles: [
-            'http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf'
-          ],
-          type: 'vector'
-          // "http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf"
-        })
-        this.map.addLayer({
-          id: 'province',
-          source: 'province',
-          type: 'fill',
-          'source-layer': 'province',
-          layout: {},
-          paint: {
-            'fill-outline-color': '#fff',
-            'fill-color': 'rgba(0, 0, 0, 0)'
-          }
-        })
-        console.log(res)
+      // this.$api.data.getProvinceData().then(res => {
+      this.map.addSource('province', {
+        tiles: [
+          'http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf'
+        ],
+        type: 'vector'
+      })
+      this.map.addLayer({
+        id: 'province',
+        source: 'province',
+        type: 'fill',
+        'source-layer': 'province',
+        layout: {},
+        paint: {
+          'fill-outline-color': '#fff',
+          'fill-color': 'rgba(0, 0, 0, 0)'
+        }
+      })
+      this.map.addLayer({
+        id: '__province_title',
+        type: 'symbol',
+        source: 'area_title',
+        'source-layer': 'province',
+        layout: {
+          'text-font': ['open-sans'],
+          'text-field': '{PXZQMC}',
+          'text-size': 17,
+          'text-max-width': 5
+        },
+        // maxzoom: 7,
+        // minzoom: 1,
+        paint: {
+          'text-color': '#fff',
+          'text-halo-color': '#000',
+          'text-halo-width': 1
+        }
       })
     }
   }

src/components/Map/config/index.js

@@ -38,25 +38,7 @@ export default {
         "line-color": "rgba(252, 249, 242, 1)",
       },
     },
-    {
-      id: "__province_title",
-      type: "symbol",
-      source: "area_title",
-      "source-layer": "province",
-      layout: {
-        "text-font": ["open-sans"],
-        "text-field": "{PXZQMC}",
-        "text-size": 17,
-        "text-max-width": 5,
-      },
-      maxzoom: 7,
-      minzoom: 1,
-      paint: {
-        "text-color": "#fff",
-        "text-halo-color": "#000",
-        "text-halo-width": 1,
-      },
-    },
+
     {
       id: "__province_outline",
       type: "line",
@@ -65,7 +47,7 @@ export default {
       layout: {},
       paint: {
         "line-color": "#fff",
-        "line-width": 2,
+        "line-width": 1,
         "line-blur": 1,
       },
     },

src/components/PartWrap/PartWrap.vue

@@ -20,16 +20,16 @@
 
 <script>
 export default {
-  name: 'PartWrap',
+  name: "PartWrap",
   props: {
     title: {
-      type: String
+      type: String,
     },
     value: {
-      type: String
-    }
-  }
-}
+      type: [String, Number],
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -97,7 +97,7 @@ export default {
   padding: 1vh 0.5vh;
   position: relative;
   // width: 15vw;
-  margin-bottom: 1vh;
+  // margin-bottom: 1vh;
   label {
     text-align: center;
     line-height: 5vh;

src/pages/biogasManureEcoAgriculture/index.vue

 <template>
-  <div>BiogasManureEcoAgriculture</div>
+  <div class="BiogasManureEcoAgriculture"></div>
 </template>
 
 <script>
 export default {
-  name: 'BiogasManureEcoAgriculture'
-}
+  name: "BiogasManureEcoAgriculture",
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {},
+  methods: {},
+};
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style scoped lang="less"></style>

src/pages/biomassEnergyWarm/components/biogasManureMap.vue

+<template>
+  <div class="biogasManure">
+    <Map mapId="methane" @onload="onload"></Map>
+    {{ getFilterColor }}
+  </div>
+</template>
+
+<script>
+import Map from "@/components/Map/Map.vue";
+import { BiomassData } from "../config/biomass.config.js";
+import { color, colorLabel } from "../config/legend.config";
+export default {
+  name: "biogasManure",
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      map: null,
+    };
+  },
+  components: {
+    Map,
+  },
+  computed: {
+    getFilterColor() {
+      const obj = BiomassData[this.type].find(
+        (item) => item.type === "aggregation"
+      );
+      const filterCon = ["match", ["get", "province_c"]];
+      this.data.forEach((item) => {
+        const currentColor = this.getCurrentColor(item.properties[obj.key]);
+        filterCon.push(Number(item.properties.pcode), currentColor);
+      });
+      filterCon.push("#f00");
+      return filterCon;
+    },
+  },
+  methods: {
+    onload(map) {
+      this.map = map;
+      console.log(this.map.getStyle());
+      this.setPaintColor();
+      console.log("地图加载完成");
+    },
+    getCurrentColor(val) {
+      if (val > colorLabel[colorLabel.length - 1]) {
+        return color[color.length - 1];
+      } else {
+        let idx = -1;
+        colorLabel.find((item, index) => {
+          idx = index;
+          return item >= val;
+        });
+        if (idx !== -1) {
+          return color[idx];
+        }
+      }
+    },
+    setPaintColor() {
+      if (this.map) {
+        this.map.getLayer("province") &&
+          this.map.setPaintProperty(
+            "province",
+            "fill-color",
+            this.getFilterColor
+          );
+      }
+    },
+  },
+  watch: {
+    type() {
+      this.setPaintColor();
+    },
+    data() {
+      this.setPaintColor();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.biogasManure {
+  height: inherit;
+}
+</style>

src/pages/biomassEnergyWarm/components/leftPart.vue

+<template>
+  <div class="leftPart">
+    <PartWrap
+      v-for="(item, index) in data"
+      :key="index"
+      class="left-part-item"
+      :title="item.value"
+      :value="item.count"
+    ></PartWrap>
+    <!-- <PartWrap
+      class="left-part-item"
+      :title="'固化成型(处)'"
+      :value="count.ghcx_local_max"
+    ></PartWrap>
+    <PartWrap
+      class="left-part-item"
+      :title="'热解气化(处)'"
+      :value="count.rj_local_max"
+    ></PartWrap>
+    <PartWrap
+      class="left-part-item"
+      :title="'碳化(处)'"
+      :value="count.th_local_max"
+    ></PartWrap> -->
+  </div>
+</template>
+
+<script>
+import PartWrap from "@/components/PartWrap/PartWrap.vue";
+import { BiomassData } from "../config/biomass.config.js";
+export default {
+  name: "leftPart",
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      dataSetCode: "ra_energy_heating",
+      data: [],
+    };
+  },
+  components: {
+    PartWrap,
+  },
+  created() {
+    this.getEnergyWarm();
+  },
+  methods: {
+    getEnergyWarm() {
+      this.data = [];
+      const data = BiomassData[this.type];
+
+      let methods = "max";
+      const param = {
+        aggregates: [],
+        filter: ["=", "pcode", 10],
+      };
+
+      data.forEach((item) => {
+        this.data.push({ count: 0, value: item.value, key: item.key });
+        param.aggregates.push([item.key, methods]);
+      });
+
+      this.$api.layer.aggregation(this.dataSetCode, param).then((res) => {
+        if (res.data.length) {
+          Object.entries(res.data[0]).forEach((item) => {
+            const key = item[0].replace("_max", "");
+            const obj = this.data.find((item) => item.key === key);
+            if (obj) {
+              obj.count = item[1];
+            }
+          });
+        }
+      });
+    },
+  },
+  watch: {
+    type() {
+      this.getEnergyWarm();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.leftPart {
+  display: flex;
+  flex-direction: column;
+  height: 50vh;
+  width: 250px;
+  position: absolute;
+  top: 11vh;
+  left: 1vw;
+  .date-widget {
+    position: absolute;
+    left: 280px;
+  }
+  .left-part-item {
+    margin-bottom: 2vh;
+  }
+}
+</style>

src/pages/biomassEnergyWarm/components/sortList.vue

+<template>
+  <div class="sortList">
+    <PartWrap
+      class="left-part-item"
+      v-for="(item, index) in getItemOfType"
+      :key="index"
+      :title="item.value"
+      :style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }"
+    >
+      <div class="partItem">
+        <Echart ref="echart3" :options="setOptionOfEchart(item.key)"></Echart>
+      </div>
+    </PartWrap>
+  </div>
+</template>
+
+<script>
+import PartWrap from "@/components/PartWrap/PartWrap.vue";
+import Echart from "@/components/Echart/Echarts.vue";
+import { BiomassData } from "../config/biomass.config.js";
+export default {
+  name: "sortList",
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      dataSetCode: "ra_energy_heating",
+      data: [],
+    };
+  },
+  components: {
+    PartWrap,
+    Echart,
+  },
+  computed: {
+    // 返回当前类型除了总数的信息
+    getItemOfType() {
+      return BiomassData[this.type].filter((item) => !/_local$/.test(item.key));
+    },
+    getValOfdata() {
+      const keys = this.getItemOfType;
+      const res = {
+        // gn_local: [],
+        // ghcx_local: [],
+        // rj_local: [],
+        // th_local: [],
+      };
+
+      keys.forEach((item) => {
+        res[item.key] = [];
+      });
+
+      this.data.forEach((item) => {
+        Object.entries(res).forEach((i) => {
+          res[i[0]].push({
+            xAxis: item.properties.pname,
+            yAxis: item.properties[i[0]],
+          });
+        });
+        // res.gn_local.push({ xAxis: pname, yAxis: gn_local });
+        // res.ghcx_local.push({ xAxis: pname, yAxis: ghcx_local });
+        // res.rj_local.push({ xAxis: pname, yAxis: rj_local });
+        // res.th_local.push({ xAxis: pname, yAxis: th_local });
+      });
+      console.log(res);
+      return res;
+    },
+    setOptionOfEchart() {
+      return function (type) {
+        const data = this.getValOfdata[type]
+          .filter((item) => item.yAxis)
+          .sort((a, b) => b.yAxis - a.yAxis)
+          .reverse();
+        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,
+            },
+          },
+          color: ["#d65108"],
+          grid: {
+            left: "3%",
+            right: "3%",
+            top: "10%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              position: "top",
+              type: "value",
+              splitLine: {
+                lineStyle: {
+                  color: "rgba(255,255,255,.15)",
+                },
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: "category",
+              data: xData,
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#fff",
+              },
+            },
+          ],
+          series: [
+            {
+              name: "入侵报告次数",
+              type: "bar",
+              barWidth: 12,
+              data: yData,
+              label: {
+                show: true,
+                position: "right",
+              },
+              itemStyle: {
+                emphasis: {
+                  color: "rgba(201,59,60)",
+                },
+              },
+            },
+          ],
+        };
+        return option;
+      };
+    },
+  },
+  created() {
+    this.getEnergyWarm();
+  },
+  methods: {
+    getEnergyWarm() {
+      const param = {
+        filter: ["!=", "pcode", 10],
+      };
+      this.$api.layer.query(this.dataSetCode, param).then((res) => {
+        console.log(res);
+        this.data = res.data.features;
+        this.getValOfdata;
+      });
+    },
+  },
+  watch: {
+    getItemOfType(val) {
+      console.log(val);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.sortList {
+  position: absolute;
+  top: 100px;
+  right: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 550px;
+  height: calc(100vh - 100px - 37vh - 2vw);
+  .left-part-item {
+    height: 100%;
+    margin-bottom: 15px;
+    > div:nth-of-child(1) {
+      height: 100%;
+    }
+
+    .partItem {
+      width: 100%;
+      height: calc(100vh - 150px - 37vh - 2vw);
+      overflow-y: auto;
+    }
+  }
+  .left-part-item:nth-child(odd) {
+    margin-right: 15px;
+  }
+}
+</style>

src/pages/biomassEnergyWarm/components/table.vue

+<template>
+  <div class="biogasTable">
+    <PartWrap title="总数（处）">
+      <el-table
+        class="table"
+        ref="table"
+        height="33vh"
+        :data="getDataOfType"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="pname"
+          label="省"
+          width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :prop="item.key"
+          v-for="(item, index) in getItemOfType"
+          :key="index"
+          :label="item.value"
+          :width="450 / getItemOfType.length"
+          align="center"
+        >
+        </el-table-column>
+      </el-table>
+    </PartWrap>
+  </div>
+</template>
+
+<script>
+import PartWrap from "@/components/PartWrap/PartWrap.vue";
+import { BiomassData } from "../config/biomass.config.js";
+export default {
+  name: "biogasTable",
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    PartWrap,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    getItemOfType() {
+      return BiomassData[this.type];
+    },
+    getDataOfType() {
+      const data = [];
+      const keys = this.getItemOfType.map((item) => item.key);
+
+      this.data.forEach((item) => {
+        let obj = {};
+        keys.forEach((key) => {
+          obj[key] = item.properties[key];
+        });
+        obj.pname = item.properties.pname;
+        data.push(obj);
+      });
+      return data;
+    },
+  },
+  beforeUpdate() {
+    this.$nextTick(() => {
+      //在数据加载完，重新渲染表格
+      this.$refs["table"].doLayout();
+    });
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="less">
+.biogasTable {
+  position: absolute;
+  left: 1vw;
+  bottom: 1vw;
+  width: 31vw;
+  height: 37vh;
+  // height: 400px;
+}
+</style>

src/pages/biomassEnergyWarm/config/biomass.config.js

+export const BiomassData = {
+  gn: [
+    { key: "gn_local", value: "数量（处）", type: "aggregation" },
+    { key: "gn_family", value: "供暖户数（万户）" },
+    { key: "gn_area", value: "供暖面积（万平米）" },
+  ],
+  ghcx: [
+    { key: "ghcx_local", value: "数量（处）", type: "aggregation" },
+    { key: "ghcx_output", value: "年产量（万吨）" },
+  ],
+  rj: [
+    { key: "rj_num", value: "数量（处）", type: "aggregation" },
+    { key: "rj_local", value: "运行数量（处）" },
+    { key: "rj_family", value: "供气户数（万户）" },
+  ],
+  th: [
+    { key: "th_local", value: "数量（处）", type: "aggregation" },
+    { key: "th_output", value: "年产量（万吨）" },
+  ],
+};

src/pages/biomassEnergyWarm/config/legend.config.js

+export const color = [
+  "#7e82d0",
+  "#818bd4",
+  "#8492d7",
+  "#869adb",
+  "#89a1de",
+  "#8dabe2",
+  "#95c1e2",
+  "#9bcfe2",
+  "#a3e4e3",
+];
+export const colorLabel = [1, 3, 5, 10, 30, 50, 100, 500];

src/pages/biomassEnergyWarm/index.vue

 <template>
-  <div>BiomassEnergyWarm</div>
+  <div class="BiomassEnergyWarm">
+    <LeftPart :type="statusValue.key"></LeftPart>
+    <BiogasManureMap :type="statusValue.key" :data="data"></BiogasManureMap>
+    <StatusControl
+      :statusStyle="{ position: 'absolute', right: '600px', top: '100px' }"
+      :list="statusControlList"
+      v-model="statusValue"
+    ></StatusControl>
+    <SortList :type="statusValue.key"></SortList>
+    <!-- 表格数据展示 -->
+    <Table :type="statusValue.key" :data="data"></Table>
+    <!-- 底部总数 -->
+    <div class="buttomAll">
+      <PartWrap class="left-part-item" :title="getItemOfType.value">
+        <div class="partItem">
+          <Echart
+            ref="echart3"
+            :options="setOptionOfEchart(getItemOfType.key)"
+          ></Echart>
+        </div>
+      </PartWrap>
+    </div>
+  </div>
 </template>
 
 <script>
+import PartWrap from "@/components/PartWrap/PartWrap.vue";
+import Echart from "@/components/Echart/Echarts.vue";
+import BiogasManureMap from "./components/biogasManureMap.vue";
+// import DateWidget from "@/components/DateWidget/DateWidget.vue";
+// // import PartInfo from '../../components/PartInfo/PartInfo.vue'
+// import Echart from "@/components/Echart/Echarts.vue";
+// import PartWrap from "@/components/PartWrap/PartWrap.vue";
+import StatusControl from "@/components/statusControl/index.vue";
+import LeftPart from "./components/leftPart.vue";
+import SortList from "./components/sortList.vue";
+import Table from "./components/table.vue";
+import { BiomassData } from "./config/biomass.config.js";
 export default {
-  name: 'BiomassEnergyWarm'
-}
+  name: "BiomassEnergyWarm",
+  data() {
+    return {
+      statusControlList: [
+        { key: "gn", value: "打捆直燃集中供暖" },
+        { key: "ghcx", value: "固化成型" },
+        { key: "rj", value: "热解气化" },
+        { key: "th", value: "碳化" },
+      ],
+      statusValue: { key: "gn", value: "打捆直燃集中供暖" },
+      dataSetCode: "ra_energy_heating",
+      data: [],
+    };
+  },
+  components: {
+    PartWrap,
+    Echart,
+    BiogasManureMap,
+    LeftPart,
+    StatusControl,
+    SortList,
+    Table,
+  },
+  computed: {
+    getItemOfType() {
+      return BiomassData[this.statusValue.key].find((item) =>
+        /_local$/.test(item.key)
+      );
+    },
+    getValOfdata() {
+      const res = {
+        [this.getItemOfType.key]: [],
+      };
+
+      this.data.forEach((item) => {
+        res[this.getItemOfType.key].push({
+          xAxis: item.properties.pname,
+          yAxis: item.properties[this.getItemOfType.key],
+        });
+      });
+      return res;
+    },
+    setOptionOfEchart() {
+      return function (type) {
+        const data = this.getValOfdata[type]
+          .filter((item) => item.yAxis)
+          .sort((a, b) => b.xAxis - a.xAxis);
+        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,
+            },
+          },
+          color: ["#d65108"],
+          grid: {
+            left: "3%",
+            right: "3%",
+            top: "10%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          yAxis: [
+            {
+              type: "value",
+              splitLine: {
+                lineStyle: {
+                  color: "rgba(255,255,255,.15)",
+                },
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+          ],
+          xAxis: [
+            {
+              position: "bottom",
+              type: "category",
+              data: xData,
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#fff",
+              },
+            },
+          ],
+          series: [
+            {
+              name: "入侵报告次数",
+              type: "bar",
+              barWidth: 12,
+              data: yData,
+              label: {
+                show: true,
+                position: "right",
+              },
+              itemStyle: {
+                emphasis: {
+                  color: "rgba(201,59,60)",
+                },
+              },
+            },
+          ],
+        };
+        console.log(option);
+        return option;
+      };
+    },
+  },
+  created() {
+    this.getEnergyWarm();
+  },
+  methods: {
+    getEnergyWarm() {
+      const param = {
+        filter: ["!=", "pcode", 10],
+      };
+      this.$api.layer.query(this.dataSetCode, param).then((res) => {
+        console.log(res);
+        this.data = res.data.features;
+        this.getValOfdata;
+      });
+    },
+  },
+};
 </script>
 
-<style>
+<style scoped lang="less">
+.BiomassEnergyWarm {
+  height: inherit;
 
-</style>
\ No newline at end of file
+  .buttomAll {
+    position: absolute;
+    bottom: 1vw;
+    right: 1vw;
+    left: calc(600px + 1vw);
+    height: 37vh;
+
+    .left-part-item {
+      width: 100%;
+      height: inherit;
+    }
+    .partItem {
+      height: 300px;
+    }
+  }
+}
+</style>

src/pages/methaneUpgrade/index.vue

@@ -424,6 +424,7 @@ export default {
     },
     statusValue1() {
       this.getlineChartData(this.statusValue1.key)
+      this.getTableData()
     }
   },
   components: {
@@ -503,10 +504,7 @@ export default {
       ]
       console.log(range)
       this.colorLabel = range
-      let a = [
-        'match',
-        ['get', 'code']
-      ]
+      let a = ['match', ['get', 'code']]
       data.forEach(item => {
         a.push(item.pcode)
         a.push(this.getColorOfProvince(Number(item[this.statusValue1.key])))
@@ -772,11 +770,13 @@ export default {
     position: absolute;
     right: 29vw;
     top: 12vh;
+    z-index: 99;
   }
   .status-control1 {
     position: absolute;
     right: 29vw;
     bottom: 33vh;
+    z-index: 99;
   }
 }
 </style>