负载分析页面完成/接口对接

src/api/realMonitored/index.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+/**
+ * 负载分析接口集合
+ * @method rawData 原始数据
+ */
+export function loadAnalysisApi() {
+    return {
+        rawData: (params) => {
+            return request({
+                url: `/site/siteLoadAnalysis`,
+                method: 'GET',
+                params,
+            });
+        },
+    };
+}

src/views/realMonitored/loadAnalysis/components/loadChart.vue

@@ -28,50 +28,6 @@ const props = defineProps({
 let lineChartBanlance = ref(null)
 
 function initEcharts() {
-    const data = {
-        name: '盛齐充电站',
-        capacity: 2500,
-        power: 155.46,
-        progress: 24.7,
-        children: [
-            {
-                name: 'D4KXG_C1',
-                capacity: 152,
-                power: '--',
-                progress: 36,
-            },
-            {
-                name: 'D4KXG_C2',
-                capacity: 152,
-                power: '--',
-                progress: 36.8,
-            },
-            {
-                name: 'D4KXG_C5',
-                capacity: 38,
-                power: '--',
-                progress: 0,
-            },
-            {
-                name: 'D5KXG_C1',
-                capacity: 152,
-                power: '--',
-                progress: 20.5,
-            },
-            {
-                name: 'D5KXG_C1',
-                capacity: 152,
-                power: '--',
-                progress: 20.5,
-            },
-            {
-                name: 'D5KXG_C1',
-                capacity: 152,
-                power: '--',
-                progress: 20.5,
-            },
-        ],
-    }
 
     let myChart = echarts.init(lineChartBanlance.value)
     // 绘制图表
@@ -94,7 +50,7 @@ function initEcharts() {
                         <div style="font-weight:bold;">${item.name}</div>
                         <div>功率：${item.power}kW</div>
                         <div>负载率：${item.progress}%</div>
-                        <div>额定电压：${1}kV</div>
+                        <div>额定电压：${item.voltage}kV</div>
                         <div>额定容量：${item.capacity}kVA</div>
                     `
                 }
@@ -103,7 +59,7 @@ function initEcharts() {
         series: [
             {
                 type: 'tree',
-                data: [data],
+                data: [props.chartData],
                 top: '1%',
                 left: '30%',
                 bottom: '1%',

src/views/realMonitored/loadAnalysis/components/powerChart.vue

@@ -48,7 +48,7 @@ function initEcharts() {
                     formatter: function (params) {
                         const node = params.data
                         var res =
-                            `{name|${node.name}} / {capacity|${node.capacity}kVA} / {power|${node.power}kW} / {progress|${node.progress}%}`
+                            `{name|${node.name}} / {capacity|${node.value}kVA} / {power|${node.power}kW} / {progress|${node.progress}%}`
                         return res
                     },
                     rich: {

src/views/realMonitored/loadAnalysis/components/tableChart.vue

@@ -3,11 +3,11 @@
         <el-table class="table" :data="props.tableData" border stripe>
             <el-table-column prop="date" label="设备目录" />
             <el-table-column prop="name" label="设备名称" />
-            <el-table-column prop="address" label="设备sn" />
-            <el-table-column prop="name" label="额定电压（kV）" />
-            <el-table-column prop="address" label="额定容量（kVA）" />
-            <el-table-column prop="name" label="有功功率（kW）" />
-            <el-table-column prop="name" label="负载率（%）" />
+            <el-table-column prop="code" label="设备编号" />
+            <el-table-column prop="ratedVoltage" label="额定电压（kV）" align="center" />
+            <el-table-column prop="ratedCapacity" label="额定容量（kVA）" align="center" />
+            <el-table-column prop="p" label="有功功率（kW）" align="center" />
+            <el-table-column prop="loadRate" label="负载率（%）" align="center" />
         </el-table>
     </div>
 </template>
@@ -26,8 +26,6 @@ const props = defineProps({
     tableData: Object
 }) //数据双向绑定
 /*----------------------------------变量声明-----------------------------------*/
-
-
 // 暴露变量
 defineExpose({
 });

src/views/realMonitored/loadAnalysis/index.vue

@@ -2,16 +2,25 @@
     <div class="app-container page-nesting loadAnalysis">
         <!-- 筛选start -->
         <div class="filter-container mb-20" style="justify-content: left">
-            <el-radio-group v-model="timeRangeRadio.value" style="margin-right: 20px" @change="handleTimeRangeChange">
+            <el-radio-group v-model="timeRangeRadioValue" style="margin-right: 20px" @change="handleTimeRangeChange">
                 <el-radio-button value="realTime">实时</el-radio-button>
                 <el-radio-button value="history">历史</el-radio-button>
             </el-radio-group>
 
-            <div style="margin:auto 20px auto 0">数据刷新时间：2025-07-24 16:01:26</div>
-            <el-button type="primary" icon="RefreshRight"> 刷新 </el-button>
+            <div class="flex mr-20" style="margin:auto 0" v-if="timeRangeRadioValue == 'realTime'">
+                <span class="mr-10" style="margin:auto 0">数据刷新时间：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</span>
+                <el-button type="primary" icon="RefreshRight" @click="handleViewChange(viewTypeRadioValue)" link> 刷新
+                </el-button>
+            </div>
+            <div class="mr-20" v-else>
+                <el-date-picker class="mr-20" v-model="dateTime" type="datetimerange" range-separator="至"
+                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                <el-button type="primary" icon="Search" @click="handleViewChange(viewTypeRadioValue)"> 查询 </el-button>
+            </div>
+
             <el-button type="primary" icon="Upload"> 导出 </el-button>
 
-            <el-radio-group v-model="viewTypeRadio.value" style="margin-left:auto" @change="handleViewChange">
+            <el-radio-group v-model="viewTypeRadioValue" style="margin-left:auto" @change="handleViewChange">
                 <el-radio :value="1">功率流图</el-radio>
                 <el-radio :value="2">负载情况</el-radio>
                 <el-radio :value="3">原始数据</el-radio>
@@ -20,14 +29,14 @@
         <!-- 筛选end -->
 
         <!-- 功率流图 -->
-        <powerChart ref="powerChartRef" class="bg-white" v-if="viewTypeRadio.value == 1" :chartData="powerChartData"
-            style="width: 100%;height:calc(100% - 52px) ;" />
+        <powerChart ref="powerChartRef" class="bg-white" v-if="viewTypeRadioValue == 1" v-loading="domLoading"
+            :chartData="powerChartData" style="width: 100%;height:calc(100% - 52px) ;" />
         <!-- 负载情况 -->
-        <loadChart ref="loadChartRef" class="bg-white" v-if="viewTypeRadio.value == 2" :chartData="powerChartData"
-            style="width: 100%;height:calc(100% - 52px) ;" />
+        <loadChart ref="loadChartRef" class="bg-white" v-if="viewTypeRadioValue == 2" v-loading="domLoading"
+            :chartData="loadChartData" style="width: 100%;height:calc(100% - 52px) ;" />
         <!-- 原始数据 -->
-        <tableChart ref="tableChartRef" class="bg-white" v-if="viewTypeRadio.value == 3" :tableData="tableData"
-            style="width: 100%;height:calc(100% - 52px) ;" />
+        <tableChart ref="tableRef" class="bg-white" v-if="viewTypeRadioValue == 3" v-loading="domLoading"
+            :tableData="tableData" style="width: 100%;height:calc(100% - 52px) ;" />
     </div>
 </template>
 
@@ -36,144 +45,147 @@
 import { ElMessage, ElNotification } from 'element-plus'
 import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
 /*----------------------------------接口引入-----------------------------------*/
+import { loadAnalysisApi } from '@/api/realMonitored/index.js'
 /*----------------------------------组件引入-----------------------------------*/
 import powerChart from './components/powerChart.vue'
 import loadChart from './components/loadChart.vue'
 import tableChart from './components/tableChart.vue'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
+import dayjs from 'dayjs';
 /*----------------------------------公共变量-----------------------------------*/
 const props = defineProps({}) //数据双向绑定
 const emit = defineEmits([])
 const { proxy } = getCurrentInstance()
 /*----------------------------------变量声明-----------------------------------*/
 const state = reactive({
-    timeRangeRadio: {
-        value: 'realTime',
-    },
-    viewTypeRadio: {
-        value: 1,
-    },
-
+    dateTime: null,
+    timeRangeRadioValue: 'realTime',
+    viewTypeRadioValue: 1,
 
+    domLoading: false,
     powerChartData: {
-        seriesData: [
-            {
-                depth: 0,
-                name: '盛齐充电站',
-                value: 2500,
-                capacity: 2500,
-                power: 36,
-                progress: 1.4,
-                itemStyle: {
-                    color: '#5ba33b',
-                }
-            },
-            {
-                name: 'D4KXG_C1',
-                value: 30,
-                capacity: 2500,
-                power: "--",
-                progress: 1.4,
-                itemStyle: {
-                    color: '#333333',
-                }
-            },
-            {
-                name: 'D4KXG_C2',
-                value: 30,
-                capacity: 2500,
-                power: "--",
-                progress: 1.4,
-                itemStyle: {
-                    color: '#333333',
-                }
-            },
-            {
-                name: 'D4KXG_C5',
-                value: 30,
-                capacity: 2500,
-                power: "--",
-                progress: 1.4,
-                itemStyle: {
-                    color: '#5ba33b',
-                }
-            },
-            {
-                name: 'D5KXG_C1',
-                value: 30,
-                capacity: 2500,
-                power: "--",
-                progress: 1.4,
-                itemStyle: {
-                    color: '#5ba33b',
-                }
-            },
-        ],
-        seriesLinks: [
-            {
-                source: '盛齐充电站',
-                target: 'D4KXG_C1',
-                value: 0,
-            },
-            {
-                source: '盛齐充电站',
-                target: 'D4KXG_C2',
-                value: 0
-            },
-            {
-                source: '盛齐充电站',
-                target: "D4KXG_C5",
-                value: 0
-            },
-            {
-                source: '盛齐充电站',
-                target: 'D5KXG_C1',
-                value: 0
-            },
-        ]
+        seriesData: [],
+        seriesLinks: []
     },
     loadChartData: {
-
+        name: '',
+        capacity: 0,
+        power: 0,
+        progress: 0,
+        children: [],
     },
     tableData: [],
-})
-const { timeRangeRadio, viewTypeRadio, powerChartData, loadChartData, tableData } = toRefs(state)
-
 
-
-function powerChartInit() {
-    proxy.$refs['powerChartRef'].initEcharts();
+    rawData: [],//接口原始数据
+})
+const { dateTime, timeRangeRadioValue, viewTypeRadioValue, domLoading, powerChartData, loadChartData, tableData, rawData } = toRefs(state)
+
+
+// 获取负载分析接口数据
+function getLoadAnalysisData() {
+    state.domLoading = true
+
+    loadAnalysisApi()
+        .rawData({
+            siteId: 395,
+            startTime: state.dateTime && state.timeRangeRadioValue == 'history' ? dayjs(state.dateTime[0]).format('YYYY-MM-DD HH:mm:ss') : undefined,
+            endTime: state.dateTime && state.timeRangeRadioValue == 'history' ? dayjs(state.dateTime[1]).format('YYYY-MM-DD HH:mm:ss') : undefined,
+        })
+        .then((requset) => {
+            const data = requset.data
+            if (data.length <= 0) return;
+
+            state.rawData = data
+            handleViewChange(state.viewTypeRadioValue)
+            state.domLoading = false
+        })
+        .catch((err) => {
+            state.domLoading = false
+        });
 }
 
+// 视图切换change事件
 function handleViewChange(val) {
     switch (val) {
         case 1:
-            powerChartInit()
+            state.powerChartData.seriesData = []
+            state.powerChartData.seriesLinks = []
+
+            state.rawData.forEach((item) => {
+                state.powerChartData.seriesData.push({
+                    depth: 0,
+                    name: item.name,
+                    value: item.ratedCapacity,
+                    power: item.p,
+                    progress: item.loadRate,
+                    itemStyle: {
+                        color: item.loadRate > 0 ? '#5ba33b' : '#333333',
+                    }
+                })
+
+                item.children.forEach((itemChild) => {
+                    state.powerChartData.seriesData.push({
+                        name: itemChild.name,
+                        value: itemChild.ratedCapacity,
+                        power: itemChild.p,
+                        progress: itemChild.loadRate,
+                        itemStyle: {
+                            color: itemChild.loadRate > 0 ? '#5ba33b' : '#333333',
+                        }
+                    })
+
+                    state.powerChartData.seriesLinks.push({
+                        source: item.name,
+                        target: itemChild.name,
+                        value: 0,
+                    })
+                })
+            });
+
+            proxy.$refs['powerChartRef'].initEcharts();
             break
         case 2:
-            proxy.$refs['loadChartRef'].initEcharts();
+            state.loadChartData = {
+                name: state.rawData[0].name,
+                capacity: state.rawData[0].ratedCapacity,
+                power: state.rawData[0].p,
+                progress: state.rawData[0].loadRate,
+                voltage: state.rawData[0].ratedVoltage,
+                children: []
+            }
+
+            state.rawData[0].children.forEach((itemChild) => {
+                state.loadChartData.children.push({
+                    name: itemChild.name,
+                    capacity: itemChild.ratedCapacity,
+                    power: itemChild.p || '--',
+                    progress: itemChild.loadRate,
+                    voltage: state.rawData[0].ratedVoltage,
+                })
+            })
+
+            setTimeout(() => {
+                proxy.$refs['loadChartRef'].initEcharts();
+            }, 100);
+
             break
         case 3:
+            state.tableData = []
+            state.rawData.forEach((item) => {
+                state.tableData.push(item, ...item.children)
+            });
             break
     }
-
-    console.log(val)
 }
 
+// 时间类型切换change事件
 function handleTimeRangeChange(val) {
-    switch (val) {
-        case "realTime":
-
-            break
-        case "history":
-
-            break
-    }
+    getLoadAnalysisData()
 }
 
 onMounted(() => {
-    proxy.$refs['powerChartRef'].initEcharts();
+    getLoadAnalysisData()
 })
 </script>