97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<el-select v-model="energyType" placeholder="请选择能源类型">
|
|||
|
|
<el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
|||
|
|
</el-select>
|
|||
|
|
|
|||
|
|
<!-- 区域选择，默认展开，最高高度为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">
|
|||
|
|
<el-tabs v-model="activeTab">
|
|||
|
|
<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 v-if="activeTab === '1'" />
|
|||
|
|
<RecentTrend v-if="activeTab === '2'" />
|
|||
|
|
<YearToYear v-if="activeTab === '3'" />
|
|||
|
|
<MonthToMonth v-if="activeTab === '4'" />
|
|||
|
|
</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/RecentTrend.vue";
|
|||
|
|
import YearToYear from "./panels/YearToYear.vue";
|
|||
|
|
import MonthToMonth from "./panels/MonthToMonth.vue";
|
|||
|
|
import Overview from "./panels/Overview.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "Dashboard",
|
|||
|
|
components: {
|
|||
|
|
Overview,
|
|||
|
|
RecentTrend,
|
|||
|
|
YearToYear,
|
|||
|
|
MonthToMonth
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
energyTypeList: [],
|
|||
|
|
energyType: '',
|
|||
|
|
locationId: '',
|
|||
|
|
locationList: [
|
|||
|
|
],
|
|||
|
|
defaultProps: {
|
|||
|
|
children: 'children',
|
|||
|
|
label: 'name'
|
|||
|
|
},
|
|||
|
|
activeTab: '1'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getEnergyTypeList();
|
|||
|
|
this.getLocationList();
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 当选择的区域变化时重新获取设备列表
|
|||
|
|
locationId: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getEnergyTypeList() {
|
|||
|
|
listEnergyType({ pageNum: 1, pageSize: 9999 }).then(response => {
|
|||
|
|
this.energyTypeList = response.rows;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getLocationList() {
|
|||
|
|
listLocation().then(response => {
|
|||
|
|
const data = { locationId: undefined, name: '顶级节点', children: [] };
|
|||
|
|
data.children = this.handleTree(response.data, "locationId", "parentId");
|
|||
|
|
this.locationList.push(data);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleNodeClick(data) {
|
|||
|
|
this.locationId = data.locationId;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|