样式调整

src/App.vue

@@ -7,18 +7,18 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions } from 'vuex'
 export default {
   data() {
-    return {};
+    return {}
   },
   created() {
-    this.getRegionProvince();
+    this.getRegionProvince()
   },
   methods: {
-    ...mapActions(["getRegionProvince"]),
-  },
-};
+    ...mapActions(['getRegionProvince'])
+  }
+}
 </script>
 
 <style lang="less">
@@ -29,12 +29,15 @@ body {
   height: 100%;
 }
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
+    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-weight: 700;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   // text-align: center;
   color: #fff;
-  background: url("./assets/img/bg.png") no-repeat;
+  background: url('./assets/img/bg.png') no-repeat;
   background-size: 100% 100%;
   background-position: center;
   background-attachment: fixed;

src/components/PartWrap/PartWrap.vue

@@ -39,7 +39,7 @@ export default {
 <style lang="less" scoped>
 // 各模块简单基本样式
 .part {
-  height: 100%;
+  // height: 100%;
   padding: 1.2vh;
   min-height: 9vh;
   box-sizing: border-box;

src/components/statusControl/index.vue

 <template>
-  <div class="statusControl" :style="statusStyle">
-    <ul>
-      <li
-        v-for="(item, index) in list"
-        :key="index"
-        :class="{ acitive: value.key === item.key }"
-        @click="onStatusChange(item)"
-      >
-        {{ item.value }}
-      </li>
-    </ul>
+  <div :class="['wrap', isShow ? 'isShowWrap' : 'noShowWrap']">
+    <div class="this_active" @click="() => (isShow = !isShow)">
+      <span>{{ value.value }} </span>
+      <i
+        :class="isShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
+        style="color: #fff"
+      ></i>
+    </div>
+    <div class="statusControl" v-show="isShow" :style="statusStyle">
+      <ul>
+        <li
+          v-for="(item, index) in list"
+          :key="index"
+          :class="{ acitive: value.key === item.key }"
+          @click="onStatusChange(item)"
+        >
+          {{ item.value }}
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <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 {
+      isShow: false
+    }
   },
   methods: {
     onStatusChange(item) {
-      this.$emit("input", item);
-    },
-  },
-};
+      this.$emit('input', item)
+      this.isShow = false
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">
+.wrap {
+  overflow: hidden;
+  width: auto;
+}
+
+.isShowWrap {
+  // border-radius: 30px;
+  .this_active {
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+  }
+}
+.noShowWrap {
+  .this_active {
+    width: 200px;
+    border-radius: 22.5px;
+  }
+}
+.this_active {
+  // width: 100%;
+  line-height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px 0 25px;
+  box-sizing: border-box;
+  background-color: #16ceaf;
+}
 .statusControl {
-  ul li {
-    margin-bottom: 10px;
-    border-radius: 15px;
-    padding: 5px 10px;
-    width: 170px;
-    color: #84c6ff;
-    // background-color: #fff;
-    box-shadow: 0 0 5px #fff9;
-    text-align: center;
-    cursor: pointer;
-    border: 1px solid #84c6ff;
-    &.acitive {
-      color: #fff;
-      background-color: #16ceaf;
+  background-color: hsla(0, 0%, 100%, 0.5);
+  width: 340px;
+  padding: 15px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    li {
+      margin-bottom: 10px;
+      margin-top: 10px;
+      border-radius: 15px;
+      padding: 5px 10px;
+      width: 160px;
+      box-sizing: border-box;
+      color: #84c6ff;
+      // background-color: #fff;
+      box-shadow: 0 0 2px #fff9;
+      text-align: center;
+      cursor: pointer;
+      border: 1px solid #84c6ff;
+      background-color: #fff;
+      &.acitive {
+        color: #fff;
+        background-color: #16ceaf;
+      }
     }
   }
 }

src/pages/biogasManureEcoAgriculture/index.vue

@@ -360,7 +360,7 @@ export default {
   }
   .left-part {
     z-index: 99;
-    // display: flex;
+    display: flex;
     // flex-direction: column;
     height: 55vh;
     // width: 250px;
@@ -370,7 +370,7 @@ export default {
     z-index: 100;
     .left-part-item {
       height: 5vh;
-      margin-bottom: 1vh;
+      margin-right: 1vh;
     }
   }
   .bottom-part {
@@ -403,9 +403,9 @@ export default {
   }
   .status-control {
     position: absolute;
-    right: 1vw;
-    top: 12vh;
-    z-index: 99;
+    left: 1vw;
+    top: 21vh;
+    z-index: 999;
   }
 }
 </style>

src/pages/biomassEnergyWarm/components/leftPart.vue

@@ -88,8 +88,8 @@ export default {
 <style scoped lang="less">
 .leftPart {
   display: flex;
-  flex-direction: column;
-  width: 250px;
+  // flex-direction: column;
+  // width: 250px;
   position: absolute;
   top: 11vh;
   left: 1vw;
@@ -98,7 +98,7 @@ export default {
     left: 280px;
   }
   .left-part-item {
-    margin-bottom: 2vh;
+    margin-right: 2vw;
   }
 }
 </style>

src/pages/biomassEnergyWarm/index.vue

@@ -8,11 +8,7 @@
       :data="data"
       :provinceCode="provinceCode"
     ></BiogasManureMap>
-    <StatusControl
-      :statusStyle="{ position: 'absolute', right: '27.7vw', top: '100px' }"
-      :list="statusControlList"
-      v-model="statusValue"
-    ></StatusControl>
+
     <SortList :type="statusValue.key" @barClick="barClick"></SortList>
     <!-- 表格数据展示 -->
     <Table :type="statusValue.key" :data="data"></Table>
@@ -28,15 +24,17 @@
         </div>
       </PartWrap>
     </div>
-    <StatusControl
-      :statusStyle="{
-        position: 'absolute',
-        right: '27.7vw',
-        bottom: '30.5vh',
-      }"
-      :list="getAllItemOfType"
-      v-model="allItemValue"
-    ></StatusControl>
+    <div class="status_control_wrap">
+      <StatusControl
+        :list="statusControlList"
+        v-model="statusValue"
+      ></StatusControl>
+      <StatusControl
+        class="StatusControl"
+        :list="getAllItemOfType"
+        v-model="allItemValue"
+      ></StatusControl>
+    </div>
     <Legend
       class="legendPart"
       :colors="color"
@@ -46,36 +44,36 @@
 </template>
 
 <script>
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
-import Echart from "@/components/Echart/Echarts.vue";
-import StatusControl from "@/components/statusControl/index.vue";
-import Legend from "@/components/Lengend/Lengend.vue";
-import { getCodeOfName } from "@/config/city.config";
-import BiogasManureMap from "./components/biogasManureMap.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";
-import { mapGetters } from "vuex";
+import PartWrap from '@/components/PartWrap/PartWrap.vue'
+import Echart from '@/components/Echart/Echarts.vue'
+import StatusControl from '@/components/statusControl/index.vue'
+import Legend from '@/components/Lengend/Lengend.vue'
+import { getCodeOfName } from '@/config/city.config'
+import BiogasManureMap from './components/biogasManureMap.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'
+import { mapGetters } from 'vuex'
 export default {
-  name: "BiomassEnergyWarm",
+  name: 'BiomassEnergyWarm',
   data() {
     return {
       statusControlList: [
-        { key: "gn", value: "打捆直燃集中供暖" },
-        { key: "ghcx", value: "固化成型" },
-        { key: "rj", value: "热解气化" },
-        { key: "th", value: "碳化" },
+        { key: 'gn', value: '打捆直燃集中供暖' },
+        { key: 'ghcx', value: '固化成型' },
+        { key: 'rj', value: '热解气化' },
+        { key: 'th', value: '碳化' }
       ],
-      statusValue: { key: "gn", value: "打捆直燃集中供暖" },
-      dataSetCode: "ra_energy_heating",
+      statusValue: { key: 'gn', value: '打捆直燃集中供暖' },
+      dataSetCode: 'ra_energy_heating',
       data: [],
       color,
       colorLabel,
-      provinceCode: "",
-      allItemValue: { key: "gn_local", value: "数量（处）" },
-    };
+      provinceCode: '',
+      allItemValue: { key: 'gn_local', value: '数量（处）' }
+    }
   },
   components: {
     PartWrap,
@@ -85,53 +83,53 @@ export default {
     StatusControl,
     SortList,
     Table,
-    Legend,
+    Legend
   },
   computed: {
     getItemOfType() {
       return BiomassData[this.statusValue.key].find(
-        (item) => item.type === "aggregation"
-      );
+        item => item.type === 'aggregation'
+      )
     },
     getAllItemOfType() {
-      return BiomassData[this.statusValue.key];
+      return BiomassData[this.statusValue.key]
     },
     getValOfdata() {
       const res = {
-        [this.getItemOfType.key]: [],
-      };
+        [this.getItemOfType.key]: []
+      }
 
-      this.data.forEach((item) => {
+      this.data.forEach(item => {
         res[this.getItemOfType.key].push({
           xAxis: item.properties.pname,
-          yAxis: item.properties[this.getItemOfType.key],
-        });
-      });
-      return res;
+          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.yAxis - a.yAxis);
-        const xData = data.map((item) => item.xAxis);
-        const yData = data.map((item) => item.yAxis);
+          .filter(item => item.yAxis)
+          .sort((a, b) => b.yAxis - a.yAxis)
+        const xData = data.map(item => item.xAxis)
+        const yData = data.map(item => item.yAxis)
         const option = {
           title: {},
-          color: ["#d65108"],
+          color: ['#d65108'],
           tooltip: {
-            show: true,
+            show: true
           },
           grid: {
-            left: "3%",
-            right: "3%",
-            top: "10%",
-            bottom: "3%",
-            containLabel: true,
+            left: '3%',
+            right: '3%',
+            top: '10%',
+            bottom: '3%',
+            containLabel: true
           },
           yAxis: [
             {
-              type: "value",
+              type: 'value',
               // splitLine: {
               //   lineStyle: {
               //     color: "rgba(255,255,255,.15)",
@@ -139,101 +137,101 @@ export default {
               // },
               axisLine: {
                 lineStyle: {
-                  color: "#fff",
-                },
-              },
-            },
+                  color: '#fff'
+                }
+              }
+            }
           ],
           xAxis: [
             {
-              position: "bottom",
-              type: "category",
+              position: 'bottom',
+              type: 'category',
               data: xData,
               axisTick: {
-                show: false,
+                show: false
               },
               axisLine: {
-                show: false,
+                show: false
               },
               axisLabel: {
-                color: "#fff",
-              },
-            },
+                color: '#fff'
+              }
+            }
           ],
           series: [
             {
-              name: "",
-              type: "bar",
+              name: '',
+              type: 'bar',
               barWidth: `50%`,
               data: yData,
               label: {
                 show: true,
-                position: "top",
+                position: 'top'
               },
               itemStyle: {
                 // emphasis: {
                 //   color: "rgba(201,59,60)",
                 // },
-              },
-            },
-          ],
-        };
-        return option;
-      };
+              }
+            }
+          ]
+        }
+        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);
+        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;
+      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)));
+        colorLabels.push(Number((part * i - 1).toFixed(4)))
       }
-      return colorLabels;
+      return colorLabels
     },
-    ...mapGetters(["getMsgOfProvince"]),
+    ...mapGetters(['getMsgOfProvince'])
   },
   created() {
-    this.getEnergyWarm();
+    this.getEnergyWarm()
   },
   methods: {
     getEnergyWarm() {
       const param = {
-        filter: ["!=", "pcode", 10],
-      };
-      this.$api.layer.query(this.dataSetCode, param).then((res) => {
-        this.data = res.data.features;
-        this.getValOfdata;
-      });
+        filter: ['!=', 'pcode', 10]
+      }
+      this.$api.layer.query(this.dataSetCode, param).then(res => {
+        this.data = res.data.features
+        this.getValOfdata
+      })
     },
     barClick(name) {
-      console.log(name);
-      const code = getCodeOfName(name.name);
-      code && (this.provinceCode = code);
-    },
+      console.log(name)
+      const code = getCodeOfName(name.name)
+      code && (this.provinceCode = code)
+    }
   },
   watch: {
     statusValue: {
       handler(val) {
-        this.allItemValue = BiomassData[val.key][0];
+        this.allItemValue = BiomassData[val.key][0]
       },
-      deep: true,
-    },
-  },
-};
+      deep: true
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">
@@ -259,8 +257,16 @@ export default {
   .legendPart {
     position: absolute;
     z-index: 11;
-    left: 300px;
+    left: 1vw;
     bottom: 30.5vh;
   }
+  .status_control_wrap {
+    position: absolute;
+    left: 1vw;
+    top: 21vh;
+    .StatusControl{
+      margin-top: 1vh;
+    }
+  }
 }
 </style>

src/pages/renewableEnergyVillage/index.vue

@@ -17,12 +17,9 @@
       :yearValue="yearValue"
       @showPopup="isShowPopup"
     ></EnergyVillageMap>
-    <StatusControl
-      class="statusControl"
-      :list="statusControlList"
-      :value="showFilter"
-      @input="onStatusChange"
-    ></StatusControl>
+    <div class="statusControl" @click="onStatusChange">
+      {{ statusValue.value }}
+    </div>
     <!-- <Table class="table"></Table> -->
     <SortList
       :provinceCode="statusValue.key"
@@ -30,7 +27,7 @@
       :yearValue="yearValue"
     ></SortList>
     <FilterProvince
-      v-if="showFilter.key"
+      v-if="showFilter"
       class="filterProvince"
       @onAddressChange="onAddressChange"
     ></FilterProvince>
@@ -39,93 +36,94 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
-import StatusControl from "@/components/statusControl/index.vue";
-import { getCodeOfName } from "@/config/city.config";
-import DateWidget from "@/components/DateWidget/DateWidget.vue";
-import EnergyVillageMap from "./components/energyVillageMap.vue";
+import { mapActions, mapState } from 'vuex'
+import PartWrap from '@/components/PartWrap/PartWrap.vue'
+// import StatusControl from '@/components/statusControl/index.vue'
+import { getCodeOfName } from '@/config/city.config'
+import DateWidget from '@/components/DateWidget/DateWidget.vue'
+import EnergyVillageMap from './components/energyVillageMap.vue'
 // import Table from "./components/table.vue";
-import FilterProvince from "./components/filterProvince.vue";
-import SortList from "./components/sortList.vue";
-import PicPopup from "./components/picPopup.vue";
+import FilterProvince from './components/filterProvince.vue'
+import SortList from './components/sortList.vue'
+import PicPopup from './components/picPopup.vue'
 export default {
-  name: "RenewableEnergyVillage",
+  name: 'RenewableEnergyVillage',
   components: {
     PartWrap,
     EnergyVillageMap,
     // Table,
-    StatusControl,
+    // StatusControl,
     SortList,
     FilterProvince,
     DateWidget,
-    PicPopup,
+    PicPopup
   },
   created() {
-    this.getData();
+    this.getData()
   },
   data() {
     return {
-      statusControlList: [{ key: "province", value: "省份筛选" }],
-      showFilter: {},
-      statusValue: {},
+      statusControlList: [{ key: 'province', value: '省份筛选' }],
+      showFilter: '',
+      statusValue: { value: '全国' },
       yearRange: [],
-      yearValue: "",
+      yearValue: '',
       showPopup: false,
-      popupId: "",
-    };
+      popupId: ''
+    }
   },
   computed: {
     getYearRange() {
-      let yearRange = [];
-      this.data.features.forEach((item) => {
-        let year = item.properties.vliiage_year;
-        if (!yearRange.find((item) => item === year)) {
-          yearRange.push(year);
+      let yearRange = []
+      this.data.features.forEach(item => {
+        let year = item.properties.vliiage_year
+        if (!yearRange.find(item => item === year)) {
+          yearRange.push(year)
         }
-      });
+      })
 
-      let max = Math.max(...yearRange);
-      let min = Math.min(...yearRange);
-      return [String(min), String(max)];
+      let max = Math.max(...yearRange)
+      let min = Math.min(...yearRange)
+      return [String(min), String(max)]
     },
     getCount() {
       return this.data.features.filter(
-        (item) => item.properties.vliiage_year === this.yearValue
-      );
+        item => item.properties.vliiage_year === this.yearValue
+      )
     },
-    ...mapState("energyVillage", ["data"]),
+    ...mapState('energyVillage', ['data'])
   },
   methods: {
-    onStatusChange(e) {
-      if (e.key === this.showFilter.key) {
-        this.showFilter = {};
-      } else {
-        this.showFilter = e;
-      }
+    onStatusChange() {
+      // if (e.key === this.showFilter.key) {
+      //   this.showFilter = {}
+      // } else {
+      this.showFilter = true
+      // }
     },
     barClick(name) {
-      const code = getCodeOfName(name.name);
-      code && (this.statusValue = { key: code, value: name });
+      const code = getCodeOfName(name.name)
+      code && (this.statusValue = { key: code, value: name })
     },
     onAddressChange(item) {
       this.statusValue = {
         key: item.province_code,
-        value: item.province,
-      };
+        value: item.province
+      }
+      this.showFilter = false
     },
     dateChange(e) {
-      this.yearValue = e;
+      this.yearValue = e
     },
     isShowPopup(id) {
-      this.popupId = id;
-      if (id === "14") {
-        this.showPopup = true;
+      this.popupId = id
+      if (id === '14') {
+        this.showPopup = true
       }
     },
-    ...mapActions("energyVillage", ["getData"]),
-  },
-};
+    ...mapActions('energyVillage', ['getData'])
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -168,6 +166,16 @@ export default {
     position: absolute;
     top: 11vh;
     right: calc(3vh + 13vw);
+    border-radius: 15px;
+    padding: 5px 10px;
+    width: 130px;
+    box-sizing: border-box;
+    color: #fff;
+    background-color: #16ceaf;
+    box-shadow: 0 0 5px #fff9;
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid #84c6ff;
   }
 }
 </style>