merge合并，第二模块添加颜色绘制

src/components/DateWidget/DateWidget.vue

@@ -22,25 +22,37 @@
 
 <script>
 export default {
+  props: {
+    range: {
+      type: Array
+    }
+  },
   data() {
     return {
       curTime: '2009',
       play: false,
-      range: ['2008', '2013'],
       pickerOptions: {
-        disabledDate(time) {
+        disabledDate: time => {
           return (
-            new Date('2008').getTime() > time.getTime() ||
-            new Date('2015').getTime() < time.getTime()
+            new Date(this.ranges[0]).getTime() > time.getTime() ||
+            new Date(this.ranges[1]).getTime() < time.getTime()
           )
         }
       }
     }
   },
+  computed: {
+    ranges() {
+      return this.range
+    }
+  },
+  watch: {
+    curTime(val) {
+      this.$emit('dateChange', val)
+    }
+  },
   methods: {
     showDatePicker() {
-      console.log('asdfsadf')
-
       console.log(this.$refs.datePicker.focus)
       this.$refs.datePicker.focus()
     },
@@ -59,11 +71,16 @@ export default {
           } else {
             this.clearPlay()
           }
-        }, 1000)
+        }, 2000)
       } else {
         this.clearPlay()
       }
     }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.curTime = this.ranges[0]
+    }, 1000)
   }
 }
 </script>

src/components/Echart/Echarts.vue

@@ -58,6 +58,7 @@ export default {
 
     // 扩大echarts点击面的大小，即点击灰色面也可以触发
     that.chart.getZr().on("click", function (params) {
+      console.log(params)
       const pointInPixel = [params.offsetX, params.offsetY];
       if (that.chart.containPixel("grid", pointInPixel)) {
         /*此处添加具体执行代码*/
@@ -66,7 +67,8 @@ export default {
           pointInPixel
         );
         //X轴序号
-        const xIndex = pointInGrid[0];
+        console.log(pointInGrid)
+        const xIndex = pointInGrid[1];
 
         //获取当前图表的option
         const op = that.chart.getOption();
@@ -75,6 +77,7 @@ export default {
         if (op.xAxis[0].type === "category") {
           name = op.xAxis[0].data[xIndex];
         } else {
+          console.log(xIndex)
           name = op.yAxis[0].data[xIndex];
         }
 

src/components/Lengend/Lengend.vue

+<template>
+  <div class="legend">
+    <div class="title">{{ title }}</div>
+    <div class="main">
+      <template v-for="(item, index) in colors">
+        <div :key="index">
+          <div class="item" v-if="index == 0">
+            <div class="circle" :style="{ 'background-color': item }"></div>
+            <label>- {{ range[index] }}</label>
+          </div>
+          <div class="item" v-else>
+            <div class="circle" :style="{ 'background-color': item }"></div>
+            <label>{{ range[index - 1] }} - {{ range[index] }}</label>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    title: {
+      type: String
+    },
+    colors: {
+      type: Array
+    },
+    range: {
+      type: Array
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.legend {
+  position: absolute;
+  right: 1vh;
+  bottom: 1vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .title {
+    width: 100%;
+    text-align: left;
+    padding-left: 0;
+    margin-bottom: 5px;
+    color: @main-color;
+    font-size: 1.3vh;
+  }
+  .item {
+    display: flex;
+    align-items: center;
+    .circle {
+      border-radius: 2px;
+      width: 17px;
+      height: 10px;
+      margin-right: 0.5vh;
+    }
+    label {
+      color: @main-color;
+      font-size: 1.2vh;
+    }
+  }
+  .item + .item {
+    margin-top: 0.3vh;
+  }
+}
+</style>
\ No newline at end of file

src/components/Map/Map.vue

@@ -54,7 +54,7 @@ export default {
         renderWorldCopies: false, // 地图不重复
         // style
       });
-      this.map.on("load", () => {
+      this.map.on("load", async () => {
         let map = this.map;
         window.map = this.map;
 
@@ -75,12 +75,13 @@ export default {
         style.layers.forEach((item) => {
           map.addLayer(item);
         });
-        this.addProvinceLayer();
+        await this.addProvinceLayer();
         this.$emit("onload", map);
       });
     },
-    addProvinceLayer() {
-      this.$api.data.getProvinceData().then((res) => {
+    async addProvinceLayer() {
+      const res = await this.$api.data.getProvinceData();
+      if (res) {
         this.map.addSource("province", {
           type: "geojson",
           data: res.data,
@@ -91,11 +92,11 @@ export default {
           type: "fill",
           layout: {},
           paint: {
+            "fill-outline-color": "#fff",
             "fill-color": "rgba(0, 0, 0, 0)",
           },
         });
-        console.log(res);
-      });
+      }
     },
   },
 };
@@ -103,7 +104,7 @@ export default {
 
 <style lang="less" scoped>
 .__map {
-  position: absolute;
+  // position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;

src/config/city.config.js

+export default{
+  province:[
+    { code:'10',	name:'全国',},
+    { code:'11',	name:'北京',},
+    { code:'12',	name:'天津',},
+    { code:'13',	name:'河北',},
+    { code:'14',	name:'山西',},
+    { code:'15',	name:'内蒙',},
+    { code:'21',	name:'辽宁',},
+    { code:'22',	name:'吉林',},
+    { code:'23',	name:'黑龙江',},
+    { code:'31',	name:'上海',},
+    { code:'32',	name:'江苏',},
+    { code:'33',	name:'浙江',},
+    { code:'34',	name:'安徽',},
+    { code:'35',	name:'福建',},
+    { code:'36',	name:'江西',},
+    { code:'37',	name:'山东',},
+    { code:'41',	name:'河南',},
+    { code:'42',	name:'湖北',},
+    { code:'43',	name:'湖南',},
+    { code:'44',	name:'广东',},
+    { code:'45',	name:'广西',},
+    { code:'46',	name:'海南',},
+    { code:'50',	name:'重庆',},
+    { code:'51',	name:'四川',},
+    { code:'52',	name:'贵州',},
+    { code:'53',	name:'云南',},
+    { code:'54',	name:'西藏',},
+    { code:'61',	name:'陕西',},
+    { code:'62',	name:'甘肃',},
+    { code:'63',	name:'青海',},
+    { code:'64',	name:'宁夏',},
+    { code:'65',	name:'新疆',},
+  ]
+}
\ No newline at end of file

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 {};
+    return {
+      map: null,
+    };
   },
   components: {
     Map,
   },
-  computed: {},
+  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() {
+    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>

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

 export const BiomassData = {
   gn: [
-    { key: "gn_local", value: "数量（处）" },
+    { key: "gn_local", value: "数量（处）", type: "aggregation" },
     { key: "gn_family", value: "供暖户数（万户）" },
     { key: "gn_area", value: "供暖面积（万平米）" },
   ],
   ghcx: [
-    { key: "ghcx_local", value: "数量（处）" },
+    { key: "ghcx_local", value: "数量（处）", type: "aggregation" },
     { key: "ghcx_output", value: "年产量（万吨）" },
   ],
   rj: [
-    { key: "rj_num", value: "数量（处）" },
+    { key: "rj_num", value: "数量（处）", type: "aggregation" },
     { key: "rj_local", value: "运行数量（处）" },
     { key: "rj_family", value: "供气户数（万户）" },
   ],
   th: [
-    { key: "th_local", value: "数量（处）" },
+    { 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 class="BiomassEnergyWarm">
     <LeftPart :type="statusValue.key"></LeftPart>
-    <BiogasManureMap></BiogasManureMap>
+    <BiogasManureMap :type="statusValue.key" :data="data"></BiogasManureMap>
     <StatusControl
       :statusStyle="{ position: 'absolute', right: '600px', top: '100px' }"
       :list="statusControlList"

src/pages/methaneUpgrade/components/methaneMap.vue

@@ -5,22 +5,39 @@
 </template>
 
 <script>
-import Map from "@/components/Map/Map.vue";
+import Map from '@/components/Map/Map.vue'
 export default {
-  name: "methane",
+  name: 'methane',
   data() {
-    return {};
+    return {
+      map: ''
+    }
   },
   components: {
-    Map,
+    Map
   },
   computed: {},
   methods: {
-    onload() {
-      console.log("地图加载完成");
+    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) {
+      console.log(this.map.getStyle())
+      await this.map.setPaintProperty('province', 'fill-color', data)
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">