能源管理初版

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

@@ -0,0 +1,97 @@
+<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>