修改界面数据类型切换

src/views/board/index.vue

@@ -8,6 +8,46 @@
       <div class="subTitle" style="top: 71.2%;left: 30.5%">能耗统计</div>
       <div class="subTitle" style="top: 71.2%;left: 78%">实时预警</div>
       <div class="subTitle" style="top: 13.5%;left: 78%">近7天尖峰平谷统计</div>
+      <div class="select">
+        <div class="selectItem" style="left: 57%" :class="{'active': selectData === 'day'}"
+             @click="selectChange('day')">
+          本 日
+        </div>
+        <div class="selectItem" style="left: calc(57% + 4vw)" :class="{'active': selectData === 'month'}"
+             @click="selectChange('month')">
+          本 月
+        </div>
+        <!--        <div class="selectItem" style="left: calc(57% + 8vw)" :class="{'active': selectData === '3'}"-->
+        <!--             @click="selectChange('3')">-->
+        <!--          本季度-->
+        <!--        </div>-->
+        <div class="selectItem" style="left: calc(57% + 8vw)" :class="{'active': selectData === 'year'}"
+             @click="selectChange('year')">
+          本年度
+        </div>
+      </div>
+      <div class="typeSelect">
+        <div class="selectItem" style="width:2.4vw;left: calc(57%)" :class="{'active': typeData === '2'}"
+             @click="typeChange('2')">
+          电
+        </div>
+        <div class="selectItem" style="width:2.4vw;left: calc(57% + 2.4vw)" :class="{'active': typeData === '3'}"
+             @click="typeChange('3')">
+          水
+        </div>
+        <div class="selectItem" style="width:3.8vw;left: calc(57% + 4.8vw)" :class="{'active': typeData === '4'}"
+             @click="typeChange('4')">
+          压缩空气
+        </div>
+        <div class="selectItem" style="width:3vw;left: calc(57% + 8.6vw)" :class="{'active': typeData === '5'}"
+             @click="typeChange('5')">
+          蒸汽
+        </div>
+        <div class="selectItem" style="width:3vw;left: calc(57% + 11.6vw)" :class="{'active': typeData === '6'}"
+             @click="typeChange('6')">
+          氮气
+        </div>
+      </div>
       <div class="sbzl">
         <div class="num" style="top: 22%;left: 7%;">{{ deviceOverviewData.deviceSum }}</div>
         <div class="num" style="top: 22%;left: 14.3%">{{ deviceOverviewData.waterSum }}</div>
@@ -204,7 +244,6 @@ import {
   fiveConsumptionStatistics,
   monthConsumptionRanking,
   peaksValleysConsumption, realTimeAlarm,
-  realTimeData
 } from "@/api/board";
 export default {
   name: 'Board',
@@ -214,6 +253,8 @@ export default {
   },
   data() {
     return {
+      selectData: 'year',
+      typeData: "2",
       colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
       chart1TableOption: {
         step: 0.5, // 数值越大速度滚动越快
@@ -246,10 +287,14 @@ export default {
     }
   },
   async mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
       deviceOverview().then(res => {
         this.deviceOverviewData = res.data
       })
-    monthConsumptionRanking({monitorType: 2}).then(res => {
+      monthConsumptionRanking({monitorType: this.typeData}).then(res => {
         this.rankingData = res.data.ranking
         this.statisticsData = res.data.statistics
         this.$refs.ydfxtjPie.setData({
@@ -519,7 +564,7 @@ export default {
       fiveConsumptionStatistics().then(res => {
         this.fiveConsumptionStatisticsData = res.data
       })
-    energyConsumptionStatistics({monitorType: 2, dateType: 'year'}).then(res => {
+      energyConsumptionStatistics({monitorType: this.typeData, dateType: this.selectData}).then(res => {
         this.$refs.nhtjBar.setData({
           tooltip: {
             trigger: 'axis',
@@ -611,7 +656,14 @@ export default {
         this.scrollKey2 = new Date().getTime()
       })
     },
-  methods: {
+    selectChange(data) {
+      this.selectData = data
+      this.getData()
+    },
+    typeChange(data) {
+      this.typeData = data
+      this.getData()
+    }
   }
 }
 </script>
@@ -966,4 +1018,46 @@ export default {
   top: 62%;
   left: 6.5%;
 }
+
+.select {
+  .selectItem {
+    position: absolute;
+    font-size: 0.7vw;
+    color: #fff9;
+    top: 11%;
+    width: 3.7vw;
+    height: 1.58vw;
+    line-height: 1.58vw;
+    text-align: center;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-image: url("~@/assets/board/未选中按钮.png");
+
+    &.active {
+      color: #fff;
+      background-image: url("~@/assets/board/选中按钮.png");
+    }
+  }
+}
+
+.typeSelect {
+  .selectItem {
+    position: absolute;
+    font-size: 0.7vw;
+    color: #fff9;
+    top: 69.5%;
+    height: 2.1vw;
+    line-height: 2.1vw;
+    text-align: center;
+    cursor: pointer;
+    background-color: #0000;
+
+    &.active {
+      background-color: #0F2E51;
+      color: #4096D7;
+      border-bottom: 2px solid #4096D7;
+    }
+  }
+}
 </style>