diff --git a/ui/dasadmin/src/assets/energyManage/AGC.png b/ui/dasadmin/src/assets/energyManage/AGC.png
new file mode 100644
index 00000000..15ee6852
Binary files /dev/null and b/ui/dasadmin/src/assets/energyManage/AGC.png differ
diff --git a/ui/dasadmin/src/assets/energyManage/AVC.png b/ui/dasadmin/src/assets/energyManage/AVC.png
new file mode 100644
index 00000000..15ee6852
Binary files /dev/null and b/ui/dasadmin/src/assets/energyManage/AVC.png differ
diff --git a/ui/dasadmin/src/assets/energyManage/defaultSave.png b/ui/dasadmin/src/assets/energyManage/defaultSave.png
new file mode 100644
index 00000000..8e4f5630
Binary files /dev/null and b/ui/dasadmin/src/assets/energyManage/defaultSave.png differ
diff --git a/ui/dasadmin/src/assets/energyManage/noPower.png b/ui/dasadmin/src/assets/energyManage/noPower.png
new file mode 100644
index 00000000..29078a06
Binary files /dev/null and b/ui/dasadmin/src/assets/energyManage/noPower.png differ
diff --git a/ui/dasadmin/src/assets/energyManage/power.png b/ui/dasadmin/src/assets/energyManage/power.png
new file mode 100644
index 00000000..29078a06
Binary files /dev/null and b/ui/dasadmin/src/assets/energyManage/power.png differ
diff --git a/ui/dasadmin/src/views/backend/energyManage/index.vue b/ui/dasadmin/src/views/backend/energyManage/index.vue
new file mode 100644
index 00000000..b5d36d1e
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/energyManage/index.vue
@@ -0,0 +1,1072 @@
+<template>
+    <div class="energyManage">
+        <el-row :gutter="20">
+            <el-col :md="24" :lg="{ span: 14, push: 5 }">
+                <div class="centerContainer">
+                    <div class="airBlowerList">
+                        <div class="title">风机列表</div>
+                        <el-table class="table" :data="tableData">
+                            <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
+                                <template #default="scope">
+                                    <div v-if="item.prop === 'iturbineoperationmode'">
+                                        <el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731">已锁定</el-tag>
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 20" color="rgba(0,100,170,0.20)" style="color: #0064aa"
+                                            >并网</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 10" color="rgba(0,160,150,0.20)" style="color: #00a096"
+                                            >维护</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 8" color="rgba(255,126,0,0.20)" style="color: #ff7e00"
+                                            >限功率运行</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 0" color="rgba(153,153,153,0.20)" style="color: #666666"
+                                            >离线</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 16" color="rgba(6,180,41,0.20)" style="color: #06b429"
+                                            >启动</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 6" color="rgba(254,55,49,0.20)" style="color: #fe3731"
+                                            >正常停机</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
+                                            >外部因素导致停机</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 2" color="rgba(254,55,49,0.20)" style="color: #fe3731"
+                                            >停机</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 11" color="rgba(255,182,0,0.20)" style="color: #ffb600"
+                                            >待机</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 1110" color="rgba(153,153,153,0.20)" style="color: #666666"
+                                            >解缆状态</el-tag
+                                        >
+                                        <el-tag v-if="scope.row.iturbineoperationmode === 1111" color="rgba(254,55,49,0.20)" style="color: #fe3731"
+                                            >电网故障停机</el-tag
+                                        >
+                                    </div>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="chartPart">
+                        <div class="title">
+                            <span> 自动更新 </span>
+                            <el-switch v-model="autoUpdateChartSwitch" @change="changeUpdateChart"></el-switch>
+                        </div>
+                        <div class="lineChart">
+                            <div class="chart" ref="chartRef"></div>
+                        </div>
+                        <div class="info">
+                            <div class="infoItem" v-for="item in infoList" :key="item.label">
+                                <div class="label">{{ item.label }}</div>
+                                <div class="val">{{ item.value }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :md="12" :lg="{ span: 5, pull: 14 }">
+                <div class="leftContainer">
+                    <div class="overview">
+                        <div class="title">AGC总览</div>
+                        <div class="content">
+                            <div class="rect">
+                                <div class="left">
+                                    <div class="img img1"></div>
+                                    <div class="imgName">全场有功</div>
+                                </div>
+                                <div class="right">
+                                    <div class="num">33</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                            <div class="rect">
+                                <div class="left">
+                                    <div class="img img2"></div>
+                                    <div class="imgName">AGC目标值</div>
+                                </div>
+                                <div class="right">
+                                    <div class="num">6</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">
+                                    <div class="name">AGC投入/退出</div>
+                                    <div class="status">
+                                        <div class="smallDot" :class="agcOnOff ? 'successColor' : 'defaultColor'"></div>
+                                        <div class="smallDot" :class="agcOnOff ? 'defaultColor' : 'errorColor'"></div>
+                                    </div>
+                                </div>
+                                <div class="right">
+                                    <el-switch v-model="agcOnoffSwitch"></el-switch>
+                                </div>
+                            </div>
+                            <div class="checkInput">
+                                <div class="top">
+                                    <div class="left">AGC远程/就地</div>
+                                    <div class="right">
+                                        <el-switch v-model="agcLocalRemoteSwitch"></el-switch>
+                                    </div>
+                                </div>
+                                <div class="bottom">
+                                    <el-input placeholder="本地目标值设置MW        请输入">
+                                        <template #suffix>
+                                            <div class="saveBtn"></div>
+                                        </template>
+                                    </el-input>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AGC增闭锁</div>
+                                <div class="right">
+                                    <div class="dot" :class="agcAdd ? 'successColor' : 'errorColor'"></div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AGC减闭锁</div>
+                                <div class="right">
+                                    <div class="dot" :class="agcSub ? 'successColor' : 'errorColor'"></div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AGC可增有功</div>
+                                <div class="right">
+                                    <div class="num">5</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AGC可减有功</div>
+                                <div class="right">
+                                    <div class="num">5</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="record">
+                        <div class="title">AGC记录</div>
+                        <div class="recordList">
+                            <el-scrollbar>
+                                <div class="recordItem" v-for="item in agcRecordList" :key="item">{{ item }}</div>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :md="12" :lg="5">
+                <div class="rightContainer">
+                    <div class="overview">
+                        <div class="title">AVC总览</div>
+                        <div class="content">
+                            <div class="rect">
+                                <div class="left">
+                                    <div class="img img1"></div>
+                                    <div class="imgName">全场无功</div>
+                                </div>
+                                <div class="right">
+                                    <div class="num">33</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                            <div class="rect">
+                                <div class="left">
+                                    <div class="img img2"></div>
+                                    <div class="imgName">AVC目标值</div>
+                                </div>
+                                <div class="right">
+                                    <div class="num">6</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">
+                                    <div class="name">AVC投入/退出</div>
+                                    <div class="status">
+                                        <div class="smallDot" :class="avcOnOff ? 'successColor' : 'defaultColor'"></div>
+                                        <div class="smallDot" :class="avcOnOff ? 'defaultColor' : 'errorColor'"></div>
+                                    </div>
+                                </div>
+                                <div class="right">
+                                    <el-switch v-model="avcOnoffSwitch"></el-switch>
+                                </div>
+                            </div>
+                            <div class="checkInput">
+                                <div class="top">
+                                    <div class="left">AVC远程/就地</div>
+                                    <div class="right">
+                                        <el-switch v-model="avcLocalRemoteSwitch"></el-switch>
+                                    </div>
+                                </div>
+                                <div class="bottom">
+                                    <el-input placeholder="本地目标值设置MW        请输入">
+                                        <template #suffix>
+                                            <div class="saveBtn"></div>
+                                        </template>
+                                    </el-input>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AVC增闭锁</div>
+                                <div class="right">
+                                    <div class="dot" :class="avcAdd ? 'successColor' : 'errorColor'"></div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AVC减闭锁</div>
+                                <div class="right">
+                                    <div class="dot" :class="avcSub ? 'successColor' : 'errorColor'"></div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AVC可增有功</div>
+                                <div class="right">
+                                    <div class="num">5</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                            <div class="check">
+                                <div class="left">AVC可减有功</div>
+                                <div class="right">
+                                    <div class="num">5</div>
+                                    <div class="unit">MW</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="record">
+                        <div class="title">AVC记录</div>
+                        <div class="recordList">
+                            <el-scrollbar>
+                                <div class="recordItem" v-for="item in avcRecordList" :key="item">{{ item }}</div>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { getAirBlowerListReq } from '/@/api/backend/airBlower/request'
+import { getRealValueListReq, getRealValueRangeReq } from '/@/api/backend/deviceModel/request'
+import { getRealTimeState, getCutDecimalsValue, getEnumToValue } from '/@/views/backend/equipment/airBlower/utils'
+import { ElMessage, dayjs } from 'element-plus'
+import * as echarts from 'echarts'
+
+const agcOnoffSwitch = ref(true)
+const agcOnOff = ref(true)
+const agcLocalRemoteSwitch = ref(false)
+const agcAdd = ref(true)
+const agcSub = ref(false)
+const agcRecordList = ref([
+    '2023-12-26 22:07:25一次调频指令变更为：156212kW',
+    '2023-12-25 22:07:25进入一次调频模式',
+    '2023-12-24 22:07:25进入一次调频模式',
+    '2023-12-23 22:07:25进入一次调频模式',
+    '2023-12-22 22:07:25一次调频指令变更为：156212kW',
+])
+
+const avcOnoffSwitch = ref(true)
+const avcOnOff = ref(false)
+const avcLocalRemoteSwitch = ref(false)
+const avcAdd = ref(true)
+const avcSub = ref(false)
+const avcRecordList = ref([
+    '2023-12-26 22:07:25一次调频指令变更为：156212kW',
+    '2023-12-25 22:07:25进入一次调频模式',
+    '2023-12-24 22:07:25进入一次调频模式',
+    '2023-12-23 22:07:25进入一次调频模式',
+    '2023-12-22 22:07:25一次调频指令变更为：156212kW',
+])
+
+const tableColumn = [
+    {
+        label: '编号',
+        prop: 'name',
+    },
+    {
+        label: '风速m/s',
+        prop: 'iwindspeed',
+    },
+    {
+        label: '转速rmp',
+        prop: 'igenspeed',
+    },
+    {
+        label: '有功kW',
+        prop: 'igenpower',
+    },
+    {
+        label: '有功给定kW',
+        prop: 'iactivepowersetpointvalue',
+    },
+    {
+        label: '无功kVar',
+        prop: 'ireactivepower',
+    },
+    {
+        label: '无功给定kVar',
+        prop: 'ireactivepowersetpointvalue',
+    },
+    {
+        label: '状态',
+        prop: 'iturbineoperationmode',
+    },
+]
+
+const curDevice = ref('1846101273013739522')
+const tableData = ref<any[]>([])
+
+const createTableReqParams = (airblowerList: { irn: string; name: string }[]) => {
+    const curTableKey = tableColumn.map((item) => item.prop)
+    const airBlowerIds: any = []
+    const airBlowerInfo: any = {}
+    const params = airblowerList.map((item: any) => {
+        airBlowerInfo[item.irn] = {
+            name: item.name,
+            model: item.model,
+            belongLine: item.belongLine,
+            modelId: item.modelId,
+            deviceCode: item.deviceCode,
+        }
+        airBlowerIds.push(item.irn)
+        return {
+            deviceId: item.irn,
+            attributes: [...curTableKey, 'iturbineoperationmode', 'iyplevel', 'gridlostdetected', 'ibplevel'],
+        }
+    })
+    return { params, airBlowerInfo, airBlowerIds }
+}
+
+const getAirBlowerList = () => {
+    let airBlowerInfoObj: any = {}
+    let airBlowerIdList: any[] = []
+    getAirBlowerListReq()
+        .then((res) => {
+            if (res.success) {
+                return createTableReqParams(res.data)
+            } else {
+                throw '获取风机列表失败'
+            }
+        })
+        .then((data) => {
+            airBlowerInfoObj = data.airBlowerInfo
+            airBlowerIdList = data.airBlowerIds
+            return getRealValueListReq(data!.params)
+        })
+        .then((res) => {
+            if (res.success) {
+                const data = airBlowerIdList.map((id) => {
+                    const realData: any = {}
+                    Object.keys(res.data[id]).forEach((key) => {
+                        const cutVal = getCutDecimalsValue(res.data[id][key])
+                        realData[key] = getEnumToValue(key, cutVal)
+                    })
+                    const state = getRealTimeState(res.data[id])
+                    return {
+                        irn: id,
+                        name: airBlowerInfoObj[id].name,
+                        model: airBlowerInfoObj[id].model,
+                        iotModelId: airBlowerInfoObj[id].modelId,
+                        belongLine: airBlowerInfoObj[id].belongLine,
+                        deviceCode: airBlowerInfoObj[id].deviceCode,
+                        ...realData,
+                        iturbineoperationmode: state,
+                    }
+                })
+                tableData.value = data
+            } else {
+                throw '获取风机列表失败'
+            }
+        })
+        .catch((err) => {
+            ElMessage.error(err)
+        })
+}
+let timer: any = null
+const autoUpdateAirBlower = () => {
+    if (!timer) {
+        timer = setInterval(() => {
+            getAirBlowerList()
+        }, 2000)
+    }
+}
+
+const autoUpdateChartSwitch = ref(false)
+const changeUpdateChart = (val: boolean) => {
+    if (val) {
+        autoUpdateChart()
+    } else {
+        clearInterval(autoUpdateChartTimer)
+        autoUpdateChartTimer = null
+    }
+}
+
+const chartRef = ref()
+let chartInstance: any = null
+
+let realDataXAxis: any[] = [
+    '2024-12-06 16:53:37',
+    '2024-12-06 16:53:38',
+    '2024-12-06 16:53:39',
+    '2024-12-06 16:53:40',
+    '2024-12-06 16:53:41',
+    '2024-12-06 16:53:42',
+    '2024-12-06 16:53:43',
+    '2024-12-06 16:53:44',
+    '2024-12-06 16:53:45',
+    '2024-12-06 16:53:46',
+    '2024-12-06 16:53:47',
+    '2024-12-06 16:53:48',
+]
+let realDataSeries: any[] = [
+    {
+        id: 'iwindspeed',
+        name: '风速',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#096676',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [24.68, 24.68, 25.3, 24.09, 24.51, 24.51, 24.46, 23.87, 23.97, 23.87, 23.87, 24.61],
+    },
+    {
+        id: 'ireactivepowersetpointvalue',
+        name: '给定无功功率',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#8236aa',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    },
+    {
+        id: 'ireactivepower',
+        name: '无功功率',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#687068',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6],
+    },
+    {
+        id: 'iactivepowersetpointvalue',
+        name: '给定有功功率',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#164342',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    },
+    {
+        id: 'igenpower',
+        name: '有功功率',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#532457',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [1518.9, 1518.9, 1518.8, 1518.7, 1518.7, 1518.7, 1518.7, 1518.8, 1518.59, 1518.59, 1518.59, 1518.59],
+    },
+    {
+        id: 'igenspeed',
+        name: '转速',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#945810',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [1808.3, 1808.3, 1808.3, 1808.3, 1808.3, 1808.3, 1808.2, 1808.2, 1808.2, 1808, 1808, 1807.8],
+    },
+    {
+        id: 'iwinddirection',
+        name: '风向',
+        type: 'line',
+        barWidth: 20,
+        itemStyle: {
+            color: '#195658',
+            barBorderRadius: 2,
+        },
+        smooth: true,
+        symbol: 'none',
+        data: [0.8, 0.8, 6.9, -6.1, 0.6, 0.6, -0.5, -6.6, -5.41, -4.21, -4.21, 2.5],
+    },
+]
+const getRandomDarkColor = () => {
+    let r = Math.floor(Math.random() * 200) // 限制在0到127之间，以生成较深的颜色
+    let g = Math.floor(Math.random() * 200)
+    let b = Math.floor(Math.random() * 200)
+
+    let color = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+    return color
+}
+
+const createChartData = (data: { [k: string]: number }, time: string) => {
+    if (realDataXAxis.length > 300) {
+        realDataXAxis.shift()
+        realDataSeries.forEach((item: any) => {
+            item.data.shift()
+        })
+    }
+    const attrCode = Object.keys(data)
+    realDataXAxis.push(time)
+
+    const seriesData = attrCode.map((item) => {
+        const curVal = getCutDecimalsValue(data[item], 2)
+
+        if (realDataSeries.length) {
+            const seriesItem = realDataSeries.find((series) => series.id === item)
+            console.log(seriesItem, '------------------')
+            seriesItem.data.push(curVal)
+            return seriesItem
+        } else {
+            const color = getRandomDarkColor()
+            return {
+                id: item,
+                name: chartProps[item],
+                type: 'line',
+                barWidth: 20,
+                itemStyle: {
+                    color: color,
+                    barBorderRadius: 2,
+                },
+                smooth: true,
+                symbol: 'none',
+                data: [curVal],
+            }
+        }
+    })
+    realDataSeries = seriesData
+    createChart()
+}
+const createChart = () => {
+    const chart = chartInstance ?? echarts.init(chartRef.value)
+    let option = null
+    if (chartInstance && realDataXAxis.length > 1) {
+        option = {
+            xAxis: {
+                data: realDataXAxis,
+            },
+            series: realDataSeries,
+        }
+    } else {
+        const legendData = Object.values(chartProps).map((item) => {
+            return {
+                name: item,
+            }
+        })
+        option = {
+            grid: {
+                top: 50,
+                right: 23,
+                bottom: 50,
+                left: 18,
+                containLabel: true,
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow',
+                },
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#dadada',
+                        width: 1,
+                        type: 'solid',
+                    },
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    color: '#4E5969',
+                    interval: 'auto',
+                    formatter: function (value: any) {
+                        return value.slice(11)
+                    },
+                    //rotate: 45
+                },
+                splitLine: {
+                    //分割线配置
+                    show: false,
+                    lineStyle: {
+                        color: '#999999',
+                    },
+                },
+                data: realDataXAxis,
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '',
+                    nameTextStyle: {
+                        color: '#4E5969',
+                    },
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: '#dadada',
+                            width: 0,
+                            type: 'solid',
+                        },
+                    },
+                    axisLabel: {
+                        //x轴文字的配置
+                        show: true,
+                        color: '#4E5969',
+                    },
+                    axisTick: { show: false },
+                    splitLine: {
+                        interval: 50,
+                        lineStyle: {
+                            type: 'dashed',
+                            color: '#dadada',
+                        },
+                    },
+                },
+            ],
+            dataZoom: [
+                {
+                    type: 'inside',
+                    start: 0,
+                    end: 100,
+                },
+                {
+                    start: 0,
+                    end: 100,
+                },
+            ],
+            legend: {
+                data: legendData,
+                textStyle: {
+                    color: '#73767a',
+                },
+                icon: 'roundRect',
+            },
+            series: realDataSeries,
+        }
+    }
+    chart.setOption(option, { replaceMerge: 'series' })
+    chartInstance = chart
+}
+
+const chartProps: any = {
+    iwindspeed: '风速',
+    iwinddirection: '风向',
+    igenspeed: '转速',
+    igenpower: '有功功率',
+    iactivepowersetpointvalue: '给定有功功率',
+    ireactivepower: '无功功率',
+    ireactivepowersetpointvalue: '给定无功功率',
+}
+const getRangeValueList = () => {
+    const params = {
+        startTime: dayjs().startOf('day').valueOf(),
+        endTime: dayjs().valueOf(),
+        devices: [
+            {
+                deviceId: tableData.value[1].irn,
+                attributes: Object.keys(chartProps),
+            },
+        ],
+        interval: '1m',
+    }
+    getRealValueRangeReq(params).then((res) => {
+        if (res.data) {
+        }
+    })
+}
+const getRealData = () => {
+    const params = [
+        {
+            deviceId: tableData.value[0].irn,
+            attributes: Object.keys(chartProps),
+        },
+    ]
+    getRealValueListReq(params).then((res) => {
+        if (res.data) {
+            const time = dayjs().format('YYYY-MM-DD HH:mm:ss')
+            createChartData(res.data?.[tableData.value[0].irn], time)
+        }
+    })
+}
+
+let autoUpdateChartTimer: any = null
+
+const autoUpdateChart = () => {
+    if (!autoUpdateChartTimer) {
+        autoUpdateChartTimer = setInterval(() => {
+            getRealData()
+        }, 1000)
+    }
+}
+
+const infoList = ref([
+    {
+        label: '风机总功率kW',
+        value: 157646,
+    },
+    {
+        label: '当前有功指令kW',
+        value: 156212,
+    },
+    {
+        label: '电网有功指令kW',
+        value: 120000,
+    },
+    {
+        label: '调频有功指令kW',
+        value: 156212,
+    },
+    {
+        label: '电网电压kV',
+        value: 200,
+    },
+    {
+        label: '风机总无功kVar',
+        value: 1596.4,
+    },
+    {
+        label: '当前无功指令kW',
+        value: 0.0,
+    },
+    {
+        label: '线路损耗功率kW',
+        value: 3259,
+    },
+    {
+        label: '电网出口功率kW',
+        value: 156679,
+    },
+    {
+        label: '电网频率Hz',
+        value: 0.0,
+    },
+])
+
+const containerHeight = ref('900px')
+const getContainerHeight = () => {
+    const container = document.querySelector('.leftContainer')
+    if (container) {
+        const { height } = container.getBoundingClientRect()
+        containerHeight.value = `${height}px`
+    }
+}
+onMounted(() => {
+    getContainerHeight()
+    autoUpdateAirBlower()
+    nextTick(() => {
+        createChart()
+    })
+    window.addEventListener('resize', getContainerHeight)
+})
+onUnmounted(() => {
+    window.removeEventListener('resize', getContainerHeight)
+    timer && clearInterval(timer)
+})
+</script>
+
+<style lang="scss" scoped>
+@mixin defaultBoxStyle {
+    display: flex;
+    align-self: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    width: 100%;
+}
+@mixin borderstyle {
+    border-radius: 10px;
+    border: 1px solid #e1edf6;
+}
+@mixin overViewRight {
+    .right {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        .num {
+            font-size: 20px;
+            line-height: 20px;
+            color: #333333;
+            letter-spacing: 0;
+            font-weight: 700;
+        }
+        .unit {
+            margin-left: 5px;
+            height: 10%;
+            font-size: 14px;
+            color: #4e5969;
+            letter-spacing: 0;
+            line-height: 14px;
+            font-weight: 700;
+        }
+        .dot {
+            height: 45%;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+        }
+    }
+}
+@mixin overview {
+    .overview {
+        padding: 20px;
+        width: 100%;
+        background-color: #fff;
+        border-radius: 6px;
+        .title {
+            height: 28px;
+            font-size: 18px;
+            font-weight: 600;
+            color: #4e5969;
+        }
+        .content {
+            width: 100%;
+            height: calc(100% - 20px);
+            .rect {
+                @include defaultBoxStyle;
+                margin: 10px 0;
+                aspect-ratio: 310/70;
+                background-color: #f0f6ff;
+                @include borderstyle;
+                .left {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    .img {
+                        height: 51%;
+                        aspect-ratio: 1/1;
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                    }
+                    .imgName {
+                        margin-left: 5px;
+                        font-size: 14px;
+                        color: #4e5969;
+                        letter-spacing: 0;
+                        font-weight: 400;
+                    }
+                    .img1 {
+                        background-image: url('/@/assets/energyManage/power.png');
+                    }
+                    .img2 {
+                        background-image: url('/@/assets/energyManage/AGC.png');
+                    }
+                }
+                @include overViewRight;
+            }
+            .check {
+                @include defaultBoxStyle;
+                margin-bottom: 10px;
+                aspect-ratio: 310/50;
+                @include borderstyle;
+                .left {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    color: #4e5969;
+                    .status {
+                        display: flex;
+                        align-items: center;
+                        height: 100%;
+                        .smallDot {
+                            margin-left: 5px;
+                            height: 25%;
+                            aspect-ratio: 1/1;
+                            border-radius: 50%;
+                        }
+                    }
+                }
+                @include overViewRight;
+            }
+            .checkInput {
+                padding: 0 10px;
+                margin-bottom: 10px;
+                width: 100%;
+                aspect-ratio: 310/88;
+                color: #4e5969;
+                @include borderstyle;
+                .top {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-top: 5px;
+                    margin-bottom: 10px;
+                    height: 30%;
+                }
+                .bottom {
+                    .el-input {
+                        background-color: #f0f6ff;
+                        :deep(.el-input__wrapper) {
+                            .el-input__inner {
+                                width: 92%;
+                                flex-grow: 0;
+                            }
+                        }
+                    }
+                    .saveBtn {
+                        margin: 0;
+                        height: 60%;
+                        aspect-ratio: 1/1;
+                        background-image: url('/@/assets/energyManage/defaultSave.png');
+                        background-size: contain;
+                        background-repeat: no-repeat;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+}
+@mixin record {
+    .record {
+        margin: 20px 0;
+        padding: 20px;
+        width: 100%;
+        aspect-ratio: 350/270;
+        background-color: #fff;
+        border-radius: 6px;
+        color: #4e5969;
+        .title {
+            height: 30px;
+            font-size: 18px;
+            color: #4e5969;
+            font-weight: 600;
+        }
+        .recordList {
+            width: 100%;
+            height: calc(100% - 30px);
+            .recordItem {
+                width: 100%;
+                min-height: 32px;
+                line-height: 150%;
+                word-break: break-all;
+                background-color: #f0f6ff;
+                &:nth-child(2n) {
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+}
+.energyManage {
+    width: 100%;
+    // height: 100%;
+    min-height: 100%;
+    background-color: #f2f3f5;
+    .el-row {
+        width: 100%;
+        height: 100%;
+        .el-col {
+            width: 100%;
+            height: 100%;
+            .successColor {
+                background-color: #06b429;
+            }
+            .errorColor {
+                background-color: #fe3731;
+            }
+            .defaultColor {
+                background-color: #e1e6ed;
+            }
+            .leftContainer {
+                @include overview;
+                @include record;
+            }
+            .centerContainer {
+                height: v-bind('containerHeight');
+                color: #4e5969;
+                .airBlowerList {
+                    padding: 20px;
+                    width: 100%;
+                    height: calc(50% - 10px);
+                    background-color: #fff;
+                    border-radius: 6px;
+                    .title {
+                        height: 38px;
+                        font-size: 18px;
+                        font-weight: 600;
+                    }
+                    .table {
+                        height: calc(100% - 38px);
+                    }
+                }
+                .chartPart {
+                    margin: 20px 0;
+                    padding: 20px;
+                    width: 100%;
+                    height: calc(50% - 10px);
+                    background-color: #fff;
+                    border-radius: 6px;
+                    .title {
+                        width: 100%;
+                        height: 32px;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
+                    .lineChart {
+                        width: 100%;
+                        height: calc(100% - 132px);
+                        .chart {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                    .info {
+                        display: flex;
+                        flex-wrap: wrap;
+                        padding: 10px;
+                        width: 100%;
+                        height: 100px;
+                        background-color: #f0f6ff;
+                        .infoItem {
+                            display: flex;
+                            align-items: center;
+                            width: 20%;
+                            height: 50%;
+                            font-size: 12px;
+                            color: #333333;
+                            font-weight: 400;
+                            .label {
+                                margin-left: 10%;
+                            }
+                            .val {
+                                margin-left: 10px;
+                            }
+                        }
+                    }
+                }
+            }
+            .rightContainer {
+                @include overview;
+                @include record;
+            }
+        }
+    }
+}
+</style>