klp-oa/klp-ui/src/views/ems/dashboard/index.vue

<template>
  <el-row>
    <el-col :span="4">
      <div style="padding: 10px;">
        <el-select v-model="energyType" placeholder="请选择能源类型" @change="refresh">
          <el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
        </el-select>
      </div>
      

      <!-- 区域选择，默认展开，最高高度为60%的屏幕尺寸 -->
      <el-tree @node-click="handleNodeClick" :data="locationList" :props="defaultProps" :default-expand-all="true" :style="{ height: 'calc(50vh - 50px)' }"></el-tree>

      <!-- 设备列表 -->
      <!-- <ul v-if="locationId">
        <li></li>
      </ul>
      <div v-else>
        <el-empty description="请选择区域"></el-empty>
      </div> -->
    </el-col>

    <el-col :span="20" v-if="showRight">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="环比概况" name="1"></el-tab-pane>
        <el-tab-pane label="近期趋势" name="2"></el-tab-pane>
        <el-tab-pane label="同比分析" name="3"></el-tab-pane>
        <el-tab-pane label="环比分析" name="4"></el-tab-pane>
      </el-tabs>

      <Overview ref="overview" v-if="activeTab === '1'" :unit="energyUnit" :energyName="energyName" :energyType="energyType" :locationId="locationId" :deviceId="deviceId" />
      <RecentTrend ref="recentTrend" v-if="activeTab === '2'" :unit="energyUnit" :energyName="energyName" :energyType="energyType" :locationId="locationId" :deviceId="deviceId" />
      <YearToYear ref="yearToYear" v-if="activeTab === '3'" :unit="energyUnit" :energyName="energyName" :energyType="energyType" :locationId="locationId" :deviceId="deviceId" />
      <MonthToMonth ref="monthToMonth" v-if="activeTab === '4'" :unit="energyUnit" :energyName="energyName" :energyType="energyType" :locationId="locationId" :deviceId="deviceId" />
    </el-col>
    <el-col :span="20" v-else>
      <el-empty description="请选择能源类型和区域"></el-empty>
    </el-col>
  </el-row>
</template>

<script>
import { listEnergyType } from "@/api/ems/energyType";
import { listLocation } from "@/api/ems/location";

import Overview from "./panels/Overview.vue";
import RecentTrend from "./panels/RecentTrends.vue";
import YearToYear from "./panels/YearOnYear.vue";
import MonthToMonth from "./panels/MonthToMonth.vue";

export default {
  name: "Dashboard",
  components: {
    Overview,
    RecentTrend,
    YearToYear,
    MonthToMonth
  },
  data() {
    return {
      energyTypeList: [],
      energyType: '',
      locationId: '',
      deviceId: '',
      locationList: [
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeTab: '1'
    }
  },
  created() {
    this.getEnergyTypeList();
    this.getLocationList();
  },
  computed: {
    showRight() {
      return this.energyType && (this.deviceId || this.locationId);
    },
    energyUnit() {
      return this.energyTypeList.find(item => item.energyTypeId === this.energyType)?.unit;
    },
    energyName() {
      return this.energyTypeList.find(item => item.energyTypeId === this.energyType)?.name;
    }
  },
  methods: {
    getEnergyTypeList() {
      listEnergyType({ pageNum: 1, pageSize: 9999 }).then(response => {
        this.energyTypeList = response.rows;
      });
    },
    getLocationList() {
      listLocation().then(response => {
        this.locationList = this.handleTree(response.data, "locationId", "parentId");
      });
    },
    handleNodeClick(data) {
      this.locationId = data.locationId;
      this.deviceId = undefined;
      this.refresh();
    },
    refresh() {
      if (this.$refs.overview) {
        this.$refs.overview.refresh();
      }
      if (this.$refs.recentTrend) {
        this.$refs.recentTrend.refresh();
      }
      if (this.$refs.yearToYear) {
        this.$refs.yearToYear.refresh();
      }
      if (this.$refs.monthToMonth) {
        this.$refs.monthToMonth.refresh();
      }
    }
  }
}
</script>