121 lines
3.9 KiB
Vue
121 lines
3.9 KiB
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> |