feat: 生物清洁建设添加图例组件

src/components/Lengend/Lengend.vue

@@ -4,13 +4,16 @@
     <div class="main">
       <template v-for="(item, index) in colors">
         <div :key="index">
-          <div class="item" v-if="index == 0">
+          <!-- <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> -->
+          <div class="item">
             <div class="circle" :style="{ 'background-color': item }"></div>
-            <label>{{ range[index - 1] }} - {{ range[index] }}</label>
+            <label
+              >{{ range[index - 1] }} {{ getCode(index) }}
+              {{ range[index] }}</label
+            >
           </div>
         </div>
       </template>
@@ -21,20 +24,33 @@
 <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 "-";
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -72,4 +88,4 @@ export default {
     margin-top: 0.3vh;
   }
 }
-</style>
\ No newline at end of file
+</style>

src/components/PartWrap/PartWrap.vue

@@ -37,6 +37,7 @@ export default {
 .part {
   height: 100%;
   padding: 1.2vh;
+  min-height: 12vh;
   box-sizing: border-box;
   position: relative;
   background: @linear-color;

src/pages/biomassEnergyWarm/components/biogasManureMap.vue

 <template>
   <div class="biogasManure">
     <Map mapId="methane" @onload="onload"></Map>
-    {{ getFilterColor }}
   </div>
 </template>
 

src/pages/biomassEnergyWarm/components/leftPart.vue

@@ -89,7 +89,6 @@ export default {
 .leftPart {
   display: flex;
   flex-direction: column;
-  height: 50vh;
   width: 250px;
   position: absolute;
   top: 11vh;

src/pages/biomassEnergyWarm/index.vue

@@ -21,6 +21,7 @@
         </div>
       </PartWrap>
     </div>
+    <Legend class="legendPart" :colors="color" :range="colorLabel"></Legend>
   </div>
 </template>
 
@@ -33,10 +34,12 @@ import BiogasManureMap from "./components/biogasManureMap.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 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";
 export default {
   name: "BiomassEnergyWarm",
   data() {
@@ -50,6 +53,8 @@ export default {
       statusValue: { key: "gn", value: "打捆直燃集中供暖" },
       dataSetCode: "ra_energy_heating",
       data: [],
+      color,
+      colorLabel,
     };
   },
   components: {
@@ -60,6 +65,7 @@ export default {
     StatusControl,
     SortList,
     Table,
+    Legend,
   },
   computed: {
     getItemOfType() {
@@ -166,7 +172,6 @@ export default {
         filter: ["!=", "pcode", 10],
       };
       this.$api.layer.query(this.dataSetCode, param).then((res) => {
-        console.log(res);
         this.data = res.data.features;
         this.getValOfdata;
       });
@@ -194,5 +199,12 @@ export default {
       height: 300px;
     }
   }
+
+  .legendPart {
+    position: absolute;
+    z-index: 11;
+    left: 300px;
+    bottom: 40.5vh;
+  }
 }
 </style>