page.vue

<template>
  <div class="energy-page">
    <cardList cardListTitle="能耗数据分析">
      <div slot="right">
        <el-button size="mini" type="primary" @click="toPowerPage"
          >图形/列表</el-button
        >
      </div>
      <div slot="content" style="height: calc(100% - 70px)">
        <div>
          <el-tabs class="en-tabs" v-model="activetap" @tab-click="tabClick">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="(item, index) in energyTabList"
              :key="index"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <el-form :inline="true" size="mini" style="padding-top: 15px">
            <el-form-item label="时间范围：">
              <el-date-picker
                v-model="startTime"
                align="right"
                type="date"
                @change="startChangeHandle"
                :picker-options="startPickerOptions"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <span style="padding: 0 10px">至</span>
              <el-date-picker
                v-model="endTime"
                align="right"
                type="date"
                @change="endChangeHandle"
                :picker-options="endPickerOptions"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getDataList()"
              >查询</el-button
            >
            <!-- <el-form-item label="时间范围：">
              <el-button
                size="mini"
                type="primary"
                @click="handleDate(item.id)"
                v-for="(item, index) in typeList"
                :key="index"
                :class="[item.id == currentActive ? 'isActive' : '']"
              >
                {{ item.name }}
              </el-button>
            </el-form-item> -->
          </el-form>
        </div>
        <div style="height: calc(100% - 70px)">
          <!-- <chart yAxisName='单位：kwh'></chart> -->
          <chart id="111" :data="data" :title="title" color="#21ACFC"></chart>
        </div>
      </div>
    </cardList>
  </div>
</template>

<script>
import cardList from '../../components/cardList'
import enTabs from '../../components/enTabs'
import chart from '@/pages/components/chart.vue'

export default {
  name: 'energypage',
  components: {
    cardList,
    enTabs,
    chart
  },
  data() {
    return {
      startPickerOptions: {},
      endPickerOptions: {},
      startTime: '',
      endTime: '',
      activetap: '1',
      typeList: [
        { name: '当日', id: 1 },
        { name: '本周', id: 2 },
        { name: '当月', id: 3 },
        { name: '今年', id: 4 }
      ],
      currentActive: 1,
      // title: '今日能耗数据(kwh)',
      title: '能耗数据(kwh)',
      data: [],
      energyTabList: [
        {
          value: '1',
          label: '全部'
        },
        {
          value: 'b6af764f2a6e454490a6b1b3c9057e57',
          label: '排风机'
        },
        {
          value: 'ece0b8b2db27411886254e81134988a3',
          label: '机房空调'
        },
        {
          value: 'b45827c068254695864ee3c1d42573cb',
          label: '风冷热泵机组'
        },
        {
          value: '303310efddb34a2e9bf269bdff8a7dc5',
          label: '室内机风柜'
        },
        {
          value: '173466a2cf9a42a6a17b2bdfbeae36d5',
          label: '多联室外机'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    tabClick(tab, event) {
      // console.log(tab, event)
      this.startTime = ''
      this.endTime = ''
      this.getDataList()
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('/analysis/getEnergyFx'),
        method: 'get',
        params: this.$http.adornParams({
          resourceType: this.activetap, //资源点类型
          startTime: this.startTime,
          endTime: this.endTime
        })
      }).then((data) => {
        if (data && data.code === 0) {
          // console.log('数据', data)
          this.data = data.list
        }
      })
    },
    // 开始时间change事件
    startChangeHandle(val) {
      if (val) {
        this.endPickerOptions = {
          disabledDate(time) {
            return time.getTime() <= new Date(val) - 8.64e7
          }
        }
      } else {
        this.endPickerOptions = {}
      }
    },
    // 结束时间change事件
    endChangeHandle(val) {
      if (val) {
        this.startPickerOptions = {
          disabledDate(time) {
            return new Date(val) <= time.getTime()
          }
        }
      } else {
        this.startPickerOptions = {}
      }
    },
    // 当日 ，本周
    handleDate(i) {
      this.currentActive = i
      // switch (i) {
      //   case 1:
      //     this.title = '今日能耗数据(kwh)'
      //     break
      //   case 2:
      //     this.title = '本周能耗数据(kwh)'
      //     break
      //   case 3:
      //     this.title = '当月能耗数据(kwh)'
      //     break
      //   case 4:
      //     this.title = '今年能耗数据(kwh)'
      //     break
      // }
      this.getDataList()
    },
    toPowerPage() {
      this.$router.push({
        path: '/kb/power'
      })
    }
  }
}
</script>

<style lang="scss">
.energy-page {
  height: 100%;
}
// 选中
.isActive {
  background: #4cb527 !important;
  border: transparent 1px solid;
}
</style>