feat: 模块二添加子类选择，动态生成颜色段

src/components/Lengend/Lengend.vue

@@ -10,10 +10,9 @@
           </div> -->
           <div class="item">
             <div class="circle" :style="{ 'background-color': item }"></div>
-            <label
-              >{{ range[index - 1] }} {{ getCode(index) }}
-              {{ range[index] }}</label
-            >
+            <label>
+              {{ showLabel(range[index - 1], range[index]) }}
+            </label>
           </div>
         </div>
       </template>
@@ -24,33 +23,35 @@
 <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 '<'
-        }
-        if (index === this.colors.length - 1) {
-          return '>'
-        }
-        return '-'
+    showLabel() {
+      return function (min, max) {
+        if (max && min) {
+          return `${min} - ${max}`;
         }
+        if (max && !min) {
+          return `< ${max}`;
         }
+        if (!max && min) {
+          return `${min} <`;
         }
-}
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -73,7 +74,7 @@ export default {
   .item {
     display: flex;
     align-items: center;
-    margin-bottom: .3vh;
+    margin-bottom: 0.3vh;
     .circle {
       border-radius: 2px;
       width: 30px;

src/components/statusControl/index.vue

@@ -16,34 +16,34 @@
 <script>
 // #144683
 export default {
-  name: 'statusControl',
+  name: "statusControl",
   props: {
     list: {
       type: Array,
       default: function () {
-        return []
-      }
+        return [];
+      },
     },
     statusStyle: {
       type: [Object, String],
-      default: ''
+      default: "",
     },
     value: {
       type: Object,
       default: function () {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
-    return {}
+    return {};
   },
   methods: {
     onStatusChange(item) {
-      this.$emit('input', item)
-    }
-  }
-}
+      this.$emit("input", item);
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
@@ -52,7 +52,7 @@ export default {
     margin-bottom: 10px;
     border-radius: 15px;
     padding: 5px 10px;
-    width: 130px;
+    width: 170px;
     color: #84c6ff;
     // background-color: #fff;
     box-shadow: 0 0 5px #fff9;
@@ -60,7 +60,6 @@ export default {
     cursor: pointer;
     border: 1px solid #84c6ff;
     &.acitive {
-
       color: #fff;
       background-color: #16ceaf;
     }

src/pages/biomassEnergyWarm/components/biogasManureMap.vue

@@ -7,7 +7,7 @@
 <script>
 import Map from "@/components/Map/Map.vue";
 import { BiomassData } from "../config/biomass.config.js";
-import { color, colorLabel } from "../config/legend.config";
+import { color } from "../config/legend.config";
 import { mapGetters } from "vuex";
 export default {
   name: "biogasManure",
@@ -16,6 +16,14 @@ export default {
       type: String,
       default: "",
     },
+    itemType: {
+      type: String,
+      default: "",
+    },
+    colorLabels: {
+      type: Array,
+      default: () => [],
+    },
     data: {
       type: Array,
       default: () => [],
@@ -36,7 +44,7 @@ export default {
   computed: {
     getFilterColor() {
       const obj = BiomassData[this.type].find(
-        (item) => item.type === "aggregation"
+        (item) => item.key === this.itemType
       );
       const filterCon = ["match", ["get", "code"]];
       this.data.forEach((item) => {
@@ -63,11 +71,11 @@ export default {
       this.setPaintColor();
     },
     getCurrentColor(val) {
-      if (val > colorLabel[colorLabel.length - 1]) {
+      if (val > this.colorLabels[this.colorLabels.length - 1]) {
         return color[color.length - 1];
       } else {
         let idx = -1;
-        colorLabel.find((item, index) => {
+        this.colorLabels.find((item, index) => {
           idx = index;
           return item >= val;
         });
@@ -103,6 +111,9 @@ export default {
     type() {
       this.setPaintColor();
     },
+    itemType() {
+      this.setPaintColor();
+    },
     data() {
       this.setPaintColor();
     },

src/pages/biomassEnergyWarm/components/sortList.vue

@@ -44,7 +44,7 @@ export default {
   computed: {
     // 返回当前类型除了总数的信息
     getItemOfType() {
-      return BiomassData[this.type].filter((item) => !/_local$/.test(item.key));
+      return BiomassData[this.type].filter((item) => !item.type);
     },
     getValOfdata() {
       const keys = this.getItemOfType;

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

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

src/pages/biomassEnergyWarm/index.vue

@@ -3,6 +3,8 @@
     <LeftPart :type="statusValue.key"></LeftPart>
     <BiogasManureMap
       :type="statusValue.key"
+      :itemType="allItemValue.key"
+      :colorLabels="getRandomColorLabel"
       :data="data"
       :provinceCode="provinceCode"
     ></BiogasManureMap>
@@ -26,7 +28,20 @@
         </div>
       </PartWrap>
     </div>
-    <Legend class="legendPart" :colors="color" :range="colorLabel"></Legend>
+    <StatusControl
+      :statusStyle="{
+        position: 'absolute',
+        right: '27.7vw',
+        bottom: '30.5vh',
+      }"
+      :list="getAllItemOfType"
+      v-model="allItemValue"
+    ></StatusControl>
+    <Legend
+      class="legendPart"
+      :colors="color"
+      :range="getRandomColorLabel"
+    ></Legend>
   </div>
 </template>
 
@@ -59,6 +74,7 @@ export default {
       color,
       colorLabel,
       provinceCode: "",
+      allItemValue: { key: "gn_local", value: "数量（处）" },
     };
   },
   components: {
@@ -73,10 +89,13 @@ export default {
   },
   computed: {
     getItemOfType() {
-      return BiomassData[this.statusValue.key].find((item) =>
-        /_local$/.test(item.key)
+      return BiomassData[this.statusValue.key].find(
+        (item) => item.type === "aggregation"
       );
     },
+    getAllItemOfType() {
+      return BiomassData[this.statusValue.key];
+    },
     getValOfdata() {
       const res = {
         [this.getItemOfType.key]: [],
@@ -94,7 +113,7 @@ export default {
       return function (type) {
         const data = this.getValOfdata[type]
           .filter((item) => item.yAxis)
-          .sort((a, b) => b.xAxis - a.xAxis);
+          .sort((a, b) => b.yAxis - a.yAxis);
         const xData = data.map((item) => item.xAxis);
         const yData = data.map((item) => item.yAxis);
         const option = {
@@ -113,11 +132,11 @@ export default {
           yAxis: [
             {
               type: "value",
-              splitLine: {
-                lineStyle: {
-                  color: "rgba(255,255,255,.15)",
-                },
-              },
+              // splitLine: {
+              //   lineStyle: {
+              //     color: "rgba(255,255,255,.15)",
+              //   },
+              // },
               axisLine: {
                 lineStyle: {
                   color: "#fff",
@@ -143,7 +162,7 @@ export default {
           ],
           series: [
             {
-              name: "入侵报告次数",
+              name: "",
               type: "bar",
               barWidth: `50%`,
               data: yData,
@@ -152,9 +171,9 @@ export default {
                 position: "top",
               },
               itemStyle: {
-                emphasis: {
-                  color: "rgba(201,59,60)",
-                },
+                // emphasis: {
+                //   color: "rgba(201,59,60)",
+                // },
               },
             },
           ],
@@ -162,11 +181,33 @@ export default {
         return option;
       };
     },
+    // 获取所有值
+    getRandomLabel() {
+      const obj = BiomassData[this.statusValue.key].find(
+        (item) => item.key === this.allItemValue.key
+      );
+      const res = [];
+      this.data.forEach((item) => {
+        res.push(item.properties[obj.key]);
+      });
+      return [...new Set(res)].filter((item) => item).sort((a, b) => a - b);
+    },
+    // 根据值生产颜色段
+    getRandomColorLabel() {
+      const labels = this.getRandomLabel;
+      const min = labels[0];
+      const max = labels[labels.length - 1];
+      const colorLabels = [];
+      const part = (max - min) / 4;
+      for (let i = 1; i <= 4; i++) {
+        colorLabels.push(Number((part * i - 1).toFixed(4)));
+      }
+      return colorLabels;
+    },
     ...mapGetters(["getMsgOfProvince"]),
   },
   created() {
     this.getEnergyWarm();
-    console.log(this.getMsgOfProvince("14"));
   },
   methods: {
     getEnergyWarm() {
@@ -184,6 +225,14 @@ export default {
       code && (this.provinceCode = code);
     },
   },
+  watch: {
+    statusValue: {
+      handler(val) {
+        this.allItemValue = BiomassData[val.key][0];
+      },
+      deep: true,
+    },
+  },
 };
 </script>
 

src/pages/renewableEnergyVillage/components/energyVillageMap.vue

@@ -44,7 +44,7 @@ export default {
           [135.087387, 53.561602],
         ],
         {
-          padding: { bottom: 80, top: 120, left: 80, right: 470 },
+          padding: { bottom: 80, top: 120, left: 80, right: 270 },
         }
       );
       await this.getData();

src/pages/renewableEnergyVillage/components/sortList.vue

@@ -128,11 +128,11 @@ export default {
 <style scoped lang="less">
 .sortList {
   position: absolute;
-  top: 100px;
-  right: 10px;
+  top: 11vh;
+  right: 1vh;
   display: flex;
   flex-wrap: wrap;
-  width: 550px;
+  width: 13vw;
   height: calc(100vh - 100px - 37vh - 2vw);
   .left-part-item {
     height: 100%;

src/pages/renewableEnergyVillage/index.vue

@@ -154,7 +154,7 @@ export default {
 
   .filterProvince {
     position: absolute;
-    right: calc(3vh + 550px);
+    right: calc(3vh + 13vw);
     top: calc(11vh + 44px + 1vh);
   }
 
@@ -167,7 +167,7 @@ export default {
   .statusControl {
     position: absolute;
     top: 11vh;
-    right: calc(3vh + 550px);
+    right: calc(3vh + 13vw);
   }
 }
 </style>