✨ feat: 图表

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

@@ -1,9 +1,12 @@
 <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>
+      <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>
@@ -17,19 +20,21 @@
       </div>
     </el-col>
 
-    <el-col :span="20">
-      <el-tabs v-model="activeTab">
-        <el-tab-pane label="环比概况" name="1">
-        </el-tab-pane>
+    <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 v-if="activeTab === '1'" />
-      <RecentTrend v-if="activeTab === '2'" />
-      <YearToYear v-if="activeTab === '3'" />
-      <MonthToMonth v-if="activeTab === '4'" />
+      <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>
@@ -39,10 +44,9 @@ 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 RecentTrend from "./panels/RecentTrends.vue";
+import YearToYear from "./panels/YearOnYear.vue";
 import MonthToMonth from "./panels/MonthToMonth.vue";
-import Overview from "./panels/Overview.vue";
 
 export default {
   name: "Dashboard",
@@ -57,6 +61,7 @@ export default {
       energyTypeList: [],
       energyType: '',
       locationId: '',
+      deviceId: '',
       locationList: [
       ],
       defaultProps: {
@@ -70,11 +75,16 @@ export default {
     this.getEnergyTypeList();
     this.getLocationList();
   },
-  watch: {
-    // 当选择的区域变化时重新获取设备列表
-    locationId: {
-
+  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() {
@@ -84,13 +94,27 @@ export default {
     },
     getLocationList() {
       listLocation().then(response => {
-        const data = { locationId: undefined, name: '顶级节点', children: [] };
-        data.children = this.handleTree(response.data, "locationId", "parentId");
-        this.locationList.push(data);
+        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();
+      }
     }
   }
 }