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

src/components/Echart/Echarts.vue

@@ -58,7 +58,6 @@ 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,19 +65,17 @@ export default {
           { seriesIndex: 0 },
           pointInPixel
         );
-        //X轴序号
-        console.log(pointInGrid)
-        const xIndex = pointInGrid[1];
 
         //获取当前图表的option
         const op = that.chart.getOption();
         let name = "";
         //获得图表中我们想要的数据 判断数据在x轴还是y轴
+        // console.log(op.xAxis, xIndex);
         if (op.xAxis[0].type === "category") {
-          name = op.xAxis[0].data[xIndex];
+          // x轴为数据，选择pointInGrid第零位
+          name = op.xAxis[0].data[pointInGrid[0]];
         } else {
-          console.log(xIndex)
-          name = op.yAxis[0].data[xIndex];
+          name = op.yAxis[0].data[pointInGrid[1]];
         }
 
         that.$emit("barClick", { name, data: params });

src/components/Map/Map.vue

@@ -3,32 +3,32 @@
 </template>
 
 <script>
-import mapboxgl from 'mapbox-gl'
-import { register } from './config/map.js'
-import style from './config/index.js'
+import mapboxgl from "mapbox-gl";
+import { register } from "./config/map.js";
+import style from "./config/index.js";
 export default {
   props: {
     center: {
       type: Array,
-      default: () => [110, 30]
+      default: () => [110, 30],
     },
     zoom: {
       type: Number,
-      default: 2
+      default: 2,
     },
     mapId: {
       // 接收图层容器的ID
       type: String || undefined,
-      default: 'map'
-    }
+      default: "map",
+    },
   },
   data() {
     return {
-      map: null
-    }
+      map: null,
+    };
   },
   mounted() {
-    this.initMap()
+    this.initMap();
   },
   methods: {
     initMap() {
@@ -43,7 +43,7 @@ export default {
           zoom: 3,
           sources: {},
           layers: [],
-          glyphs: './fonts/{fontstack}/{range}.pbf'
+          glyphs: "./fonts/{fontstack}/{range}.pbf",
         },
         maxZoom: 19.9,
         minZoom: 0.1,
@@ -51,75 +51,75 @@ export default {
         trackResize: true,
         attributionControl: false,
         preserveDrawingBuffer: true,
-        renderWorldCopies: false // 地图不重复
+        renderWorldCopies: false, // 地图不重复
         // style
-      })
-      this.map.on('load', async () => {
-        let map = this.map
-        window.map = this.map
+      });
+      this.map.on("load", async () => {
+        let map = this.map;
+        window.map = this.map;
 
         // 添加新的地图实例方法, 初始化相关状态
-        register(mapboxgl.Map.prototype)
-        // map._initMapState({
-        //   center: this.center,
-        //   zoom: this.zoom
-        // })
+        register(mapboxgl.Map.prototype);
+        map._initMapState({
+          center: [110, 30],
+          zoom: this.zoom,
+        });
         // console.log()
-        map.setBaseMap({ sources: style.sources, layers: style.layers })
+        map.setBaseMap({ sources: style.sources, layers: style.layers });
         // 添加source
-        Object.entries(style.sources).forEach(item => {
-          map.addSource(item[0], item[1])
-        })
+        Object.entries(style.sources).forEach((item) => {
+          map.addSource(item[0], item[1]);
+        });
 
         // 添加layers
-        style.layers.forEach(item => {
-          map.addLayer(item)
-        })
-        await this.addProvinceLayer()
-        this.$emit('onload', map)
-      })
+        style.layers.forEach((item) => {
+          map.addLayer(item);
+        });
+        await this.addProvinceLayer();
+        this.$emit("onload", map);
+      });
     },
     addProvinceLayer() {
       // this.$api.data.getProvinceData().then(res => {
-      this.map.addSource('province', {
+      this.map.addSource("province", {
         tiles: [
-          'http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf'
+          "http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf",
         ],
-        type: 'vector'
-      })
+        type: "vector",
+      });
       this.map.addLayer({
-        id: 'province',
-        source: 'province',
-        type: 'fill',
-        'source-layer': 'province',
+        id: "province",
+        source: "province",
+        type: "fill",
+        "source-layer": "province",
         layout: {},
         paint: {
-          'fill-outline-color': '#fff',
-          'fill-color': 'rgba(0, 0, 0, 0)'
-        }
-      })
+          "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',
+        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
+          "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
-        }
-      })
-    }
-  }
-}
+          "text-color": "#fff",
+          "text-halo-color": "#000",
+          "text-halo-width": 1,
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>

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:'新疆',},
-  ]
-}
+// export default
+const data = {
+  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
+};
+
+export default data;
+
+export function getCodeOfName(name) {
+  const obj = data.province.find((item) => item.name === name);
+  console.log(obj);
+  if (!obj) return null;
+  return obj.code;
+}

src/pages/biomassEnergyWarm/components/biogasManureMap.vue

@@ -8,6 +8,7 @@
 import Map from "@/components/Map/Map.vue";
 import { BiomassData } from "../config/biomass.config.js";
 import { color, colorLabel } from "../config/legend.config";
+import { mapGetters } from "vuex";
 export default {
   name: "biogasManure",
   props: {
@@ -19,6 +20,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    provinceCode: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -41,6 +46,7 @@ export default {
       filterCon.push("#f00");
       return filterCon;
     },
+    ...mapGetters(["getMsgOfProvince"]),
   },
   methods: {
     onload(map) {
@@ -71,6 +77,18 @@ export default {
           );
       }
     },
+    setProvinceView() {
+      if (this.provinceCode) {
+        const detail = this.getMsgOfProvince(this.provinceCode);
+        if (this.map && detail) {
+          this.map.fitBounds(detail.bbox, {
+            padding: { top: 50, bottom: 200, left: 50, right: 200 },
+          });
+        }
+      } else {
+        this.map.recover();
+      }
+    },
   },
   watch: {
     type() {
@@ -79,6 +97,9 @@ export default {
     data() {
       this.setPaintColor();
     },
+    provinceCode() {
+      this.setProvinceView();
+    },
   },
 };
 </script>

src/pages/biomassEnergyWarm/components/sortList.vue

@@ -8,7 +8,11 @@
       :style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }"
     >
       <div class="partItem">
-        <Echart ref="echart3" :options="setOptionOfEchart(item.key)"></Echart>
+        <Echart
+          ref="echart3"
+          :options="setOptionOfEchart(item.key)"
+          @barClick="barClick"
+        ></Echart>
       </div>
     </PartWrap>
   </div>
@@ -43,12 +47,7 @@ export default {
     },
     getValOfdata() {
       const keys = this.getItemOfType;
-      const res = {
-        // gn_local: [],
-        // ghcx_local: [],
-        // rj_local: [],
-        // th_local: [],
-      };
+      const res = {};
 
       keys.forEach((item) => {
         res[item.key] = [];
@@ -61,10 +60,6 @@ export default {
             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 });
       });
       return res;
     },
@@ -158,6 +153,9 @@ export default {
         this.getValOfdata;
       });
     },
+    barClick(name) {
+      this.$emit("barClick", name);
+    },
   },
 };
 </script>

src/pages/biomassEnergyWarm/index.vue

 <template>
   <div class="BiomassEnergyWarm">
     <LeftPart :type="statusValue.key"></LeftPart>
-    <BiogasManureMap :type="statusValue.key" :data="data"></BiogasManureMap>
+    <BiogasManureMap
+      :type="statusValue.key"
+      :data="data"
+      :provinceCode="provinceCode"
+    ></BiogasManureMap>
     <StatusControl
       :statusStyle="{ position: 'absolute', right: '600px', top: '100px' }"
       :list="statusControlList"
       v-model="statusValue"
     ></StatusControl>
-    <SortList :type="statusValue.key"></SortList>
+    <SortList :type="statusValue.key" @barClick="barClick"></SortList>
     <!-- 表格数据展示 -->
     <Table :type="statusValue.key" :data="data"></Table>
     <!-- 底部总数 -->
@@ -17,6 +21,7 @@
           <Echart
             ref="echart3"
             :options="setOptionOfEchart(getItemOfType.key)"
+            @barClick="barClick"
           ></Echart>
         </div>
       </PartWrap>
@@ -29,17 +34,15 @@
 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 Legend from "@/components/Lengend/Lengend.vue";
+import { getCodeOfName } from "@/config/city.config";
 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";
 import { color, colorLabel } from "./config/legend.config";
+import { mapGetters } from "vuex";
 export default {
   name: "BiomassEnergyWarm",
   data() {
@@ -55,6 +58,7 @@ export default {
       data: [],
       color,
       colorLabel,
+      provinceCode: "",
     };
   },
   components: {
@@ -161,9 +165,11 @@ export default {
         return option;
       };
     },
+    ...mapGetters(["getMsgOfProvince"]),
   },
   created() {
     this.getEnergyWarm();
+    console.log(this.getMsgOfProvince("14"));
   },
   methods: {
     getEnergyWarm() {
@@ -175,6 +181,11 @@ export default {
         this.getValOfdata;
       });
     },
+    barClick(name) {
+      console.log(name);
+      const code = getCodeOfName(name.name);
+      code && (this.provinceCode = code);
+    },
   },
 };
 </script>