feat: 接入能耗设备列表接口并实现筛选分页

- 对接 /api/energy/list 和 /api/energy/stats 接口，替换本地硬编码数据
- 新增设备名称搜索及运行状态筛选功能，筛选标签支持动态计数与高亮
- 分页改为服务端分页，翻页及搜索时重新请求接口
- 设备卡片根据运行状态展示不同背景色与状态时长
- 移除未使用的 ParamSettingDialog 组件及相关入口

-<template>
-  <el-dialog
-    :model-value="visible"
-    @update:model-value="$emit('update:visible', $event)"
-    title=""
-    width="calc(100vw - 40px)"
-    :style="{ maxWidth: '1400px' }"
-    top="3vh"
-    destroy-on-close
-    class="param-dialog"
-  >
-    <template #header>
-      <div class="dialog-header">
-        <span class="title-text">{{ device?.name || '能耗设备1' }}</span>
-        <div class="header-right">
-          <el-icon :size="16" style="cursor:pointer;color:#409eff;"><Refresh /></el-icon>
-          <el-icon :size="16" style="cursor:pointer;color:#409eff;margin-left:6px;"><Grid /></el-icon>
-          <el-icon :size="16" style="cursor:pointer;color:#409eff;margin-left:6px;"><List /></el-icon>
-          <el-icon :size="16" style="cursor:pointer;color:#409eff;margin-left:6px;" @click="$emit('update:visible', false)"><Close /></el-icon>
-        </div>
-      </div>
-    </template>
-
-    <div class="param-body">
-      <!-- 相位标签 -->
-      <div class="phase-tabs">
-        <div v-for="p in phases" :key="p" :class="['phase-tab', { active: activePhase === p }]"
-             @click="activePhase = p">{{ p }}:0</div>
-      </div>
-
-      <!-- 主内容区：左侧数据表 + 右侧统计 -->
-      <div class="main-grid">
-        <!-- 左侧：电压电流功率温度表格 + 曲线 -->
-        <div class="left-panel">
-          <div class="data-table-area">
-            <table class="param-table">
-              <thead>
-                <tr><th></th><th>电压</th><th>电流</th><th>功率</th><th>温度</th></tr>
-              </thead>
-              <tbody>
-                <tr v-for="row in tableRows" :key="row.label">
-                  <td class="row-label">{{ row.label }}</td>
-                  <td>{{ row.voltage }}</td>
-                  <td>{{ row.current }}</td>
-                  <td>{{ row.power }}</td>
-                  <td>{{ row.temp }}</td>
-                </tr>
-              </tbody>
-            </table>
-            <!-- 右侧额外信息 -->
-            <div class="extra-info">
-              <div v-for="(info, i) in extraInfos" :key="i" class="ei-item">{{ info }}:0</div>
-            </div>
-          </div>
-
-          <!-- 电流均值/峰值曲线 -->
-          <div class="curve-section">
-            <div class="curve-header">
-              <span class="curve-title">电流均值/峰值曲线 ▼</span>
-              <el-date-picker v-model="curveDate" type="date" size="small" placeholder="2026-04-28" />
-            </div>
-            <div class="curve-chart">
-              <svg viewBox="0 0 700 180">
-                <g font-size="10" fill="#999" text-anchor="end">
-                  <text x="24" y="18">5</text><text x="24" y="53">4</text><text x="24" y="88">3</text>
-                  <text x="24" y="123">2</text><text x="24" y="158">1</text>
-                </g>
-                <line x1="30" y1="154" x2="680" y2="154" stroke="#ddd"/>
-                <polyline points="36,154 56,154 76,154 ... 660,154" fill="none" stroke="#f5a623" stroke-width="1.2"/>
-                <g font-size="8" fill="#666" text-anchor="middle">
-                  <text x="46" y="168">00:00</text><text x="130" y="168">04:00</text>
-                  <text x="220" y="168">08:00</text><text x="310" y="168">12:00</text>
-                  <text x="400" y="168">16:00</text><text x="490" y="168">20:00</text><text x="580" y="168">24:00</text>
-                </g>
-              </svg>
-            </div>
-            <div class="curve-legend">
-              <span class="leg"><i class="dot y"/>电流最大值</span>
-              <span class="leg"><i class="dot g"/>电流最小值</span>
-              <span class="leg"><i class="dot r"/>电流瞬时平均值</span>
-            </div>
-          </div>
-
-          <!-- 电能 & 相位角 -->
-          <div class="bottom-row">
-            <div class="power-card">
-              <div class="pc-title">电能</div>
-              <div class="pc-list">
-                <div v-for="(p, i) in powerItems" :key="i" :class="['pc-item', p.color]">
-                  <span class="pc-dot"></span> {{ p.label }}
-                  <span class="pc-val">{{ p.val }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="angle-card">
-              <div class="ac-title">相位角</div>
-              <div class="ac-charts">
-                <div class="ac-pie-wrap">
-                  <svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="48" fill="#e8f4fd"/><text x="60" y="55" text-anchor="middle" font-size="11" fill="#333">电压相位角</text>
-                    <g font-size="10" fill="#666"><text x="45" y="72">A相 0</text><text x="75" y="72">B相 0</text><text x="60" y="86">C相 0</text></g>
-                    <circle cx="35" cy="90" r="3" fill="#e74c3c"/><circle cx="60" cy="93" r="3" fill="#67c23a"/><circle cx="85" cy="90" r="3" fill="#409eff"/>
-                  </svg>
-                </div>
-                <div class="ac-pie-wrap">
-                  <svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="48" fill="#e8f4fd"/><text x="60" y="55" text-anchor="middle" font-size="11" fill="#333">电流相位角</text>
-                    <g font-size="10" fill="#666"><text x="42" y="70">A相 0</text><text x="78" y="70">B相 0</text><text x="60" y="84">C相 0</text></g>
-                    <circle cx="32" cy="92" r="3" fill="#e74c3c"/><circle cx="58" cy="95" r="3" fill="#67c23a"/><circle cx="84" cy="92" r="3" fill="#409eff"/>
-                  </svg>
-                </div>
-              </div>
-              <div class="ac-ref">参考值： A相 120 &nbsp; B相 120 &nbsp; C相 240</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 右侧：功率统计 -->
-        <div class="right-panel">
-          <div class="rp-title">功率</div>
-          <div class="power-stats">
-            <div v-for="(ps, i) in powerStats" :key="i" :class="['ps-item', 'ps-'+ps.color]">
-              <div class="ps-circle">
-                <svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="#eee" stroke-width="5"/>
-                  <text x="25" y="28" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">{{ ps.val }}</text>
-                </svg>
-              </div>
-              <div class="ps-info">
-                <div class="ps-bars">
-                  <span :class="'ps-bar '+pb.color" v-for="(pb, j) in ps.bars" :key="j">
-                    {{ pb.label }}{{ pb.val }}
-                  </span>
-                </div>
-                <div class="ps-result">视在功率 &nbsp;&nbsp; {{ ps.result }}</div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 温度图表 -->
-          <div class="temp-card">
-            <div class="temp-header">温度 <b>▼</b></div>
-            <div class="temp-chart">
-              <svg viewBox="0 0 280 140">
-                <g font-size="9" fill="#999" text-anchor="end">
-                  <text x="22" y="15">1</text><text x="22" y="43">0.8</text><text x="22" y="71">0.6</text>
-                  <text x="22" y="99">0.4</text><text x="22" y="127">0.2</text>
-                </g>
-                <line x1="28" y1="124" x2="268" y2="124" stroke="#ddd"/>
-                <g font-size="7" fill="#666" text-anchor="middle">
-                  <text x="38" y="136">温度TA</text><text x="68" y="136">温度TB</text>
-                  <text x="98" y="136">温度TC</text><text x="128" y="136">温度TN</text>
-                  <text x="158" y="136">温度TE</text>
-                </g>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Refresh, Grid, List, Close } from '@element-plus/icons-vue'
-
-defineProps({ visible: Boolean, device: Object })
-defineEmits(['update:visible'])
-
-const phases = ['UA', 'UB', 'UC', 'UAB', 'UBC', 'UAC', 'UF']
-const activePhase = ref('UA')
-const curveDate = ref('')
-
-const tableRows = [
-  { label: '极大值', voltage: 0, current: 0, power: 0, temp: 0 },
-  { label: '平均值', voltage: 0, current: 0, power: 0, temp: 0 },
-  { label: '极小值', voltage: 0, current: 0, power: 0, temp: 0 }
-]
-const extraInfos = ['IA', 'IB', 'IC']
-const powerItems = [
-  { label: 'A相', val: 0, color: 'o' },
-  { label: 'B相', val: 0, color: 'g' },
-  { label: 'C相', val: 0, color: 'r' },
-  { label: '合相', val: 0, color: 'b' }
-]
-const powerStats = [
-  {
-    color: 'o', val: 0,
-    bars: [
-      { label: '有功功率', val: 0, color: '' },
-      { label: 'A相 ', val: '', color: 'o' }, { label: '无功功率', val: 0, color: '' }
-    ],
-    result: 0
-  },
-  {
-    color: 'g', val: 0,
-    bars: [
-      { label: '有功功率', val: 0, color: '' },
-      { label: 'B相 ', val: '', color: 'g' }, { label: '无功功率', val: 0, color: '' }
-    ],
-    result: 0
-  },
-  {
-    color: 'r', val: 0,
-    bars: [
-      { label: '有功功率', val: 0, color: '' },
-      { label: 'C相 ', val: '', color: 'r' }, { label: '无功功率', val: 0, color: '' }
-    ],
-    result: 0
-  },
-  {
-    color: 'b', val: 0,
-    bars: [
-      { label: '有功功率', val: 0, color: '' },
-      { label: '合相 ', val: '', color: 'b' }, { label: '无功功率', val: 0, color: '' }
-    ],
-    result: 0
-  }
-]
-</script>
-
-<style scoped>
-.param-dialog :deep(.el-dialog){max-height:92vh;display:flex;flex-direction:column;}
-.param-dialog :deep(.el-dialog__header){padding:10px 20px;border-bottom:1px solid #e8e8e8;margin:0;flex-shrink:0;}
-.param-dialog :deep(.el-dialog__body){overflow-y:auto;flex:1;padding:12px;}
-.dialog-header{display:flex;align-items:center;justify-content:space-between;}
-.title-text{font-size:15px;font-weight:bold;color:#333;}
-.header-right{display:flex;align-items:center;}
-
-.phase-tabs{display:flex;gap:4px;background:#fff;border:1px solid #eee;border-radius:6px 6px 0 0;padding:8px 14px;}
-.phase-tab{padding:6px 14px;font-size:12px;cursor:pointer;color:#666;border-radius:4px;}
-.phase-tab.active{background:#409eff;color:#fff;font-weight:bold;}
-
-.main-grid{display:flex;gap:14px;background:#fff;border:1px solid #eee;border-top:none;border-radius:0 0 6px 6px;padding:14px;}
-
-.left-panel{flex:1;min-width:0;}
-.data-table-area{background:#408aff;border-radius:6px;padding:14px;display:flex;gap:16px;margin-bottom:12px;color:#fff;}
-.param-table{border-collapse:collapse;font-size:13px;}
-.param-table th{padding:6px 16px;text-align:center;font-weight:normal;opacity:0.85;border-bottom:1px solid rgba(255,255,255,0.2);}
-.param-table td{padding:6px 16px;text-align:center;}
-.row-label{text-align:left!important;font-weight:bold;}
-.extra-info{font-size:12px;opacity:0.85;line-height:2;}
-
-.curve-section{border:1px solid #eee;border-radius:6px;padding:12px;margin-bottom:12px;}
-.curve-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
-.curve-title{font-size:13px;font-weight:bold;color:#333;}
-.curve-legend{display:flex;gap:14px;font-size:11px;color:#666;margin-top:6px;}
-.curve-chart svg{width:100%;height:auto;}
-
-.bottom-row{display:flex;gap:12px;}
-.power-card,.angle-card{flex:1;border:1px solid #eee;border-radius:6px;padding:12px;}
-.pc-title,.ac-title{font-size:13px;font-weight:bold;color:#333;margin-bottom:8px;}
-.pc-list{display:flex;flex-direction:column;gap:6px;}
-.pc-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;}
-.pc-dot{width:10px;height:10px;border-radius:2px;}
-.pc-dot.o{background:#f56c6c;}.pc-dot.g{background:#67c23a;}
-.pc-dot.r{background:#e74c3c;}.pc-dot.b{background:#409eff;}
-.pc-val{margin-left:auto;font-weight:bold;color:#333;}
-
-.ac-charts{display:flex;gap:12px;justify-content:center;}
-.ac-pie-wrap svg{width:110px;height:110px;}
-.ac-ref{text-align:center;font-size:11px;color:#999;margin-top:6px;}
-
-.right-panel{width:260px;flex-shrink:0;}
-.rp-title{font-size:14px;font-weight:bold;color:#333;margin-bottom:10px;}
-.power-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
-.ps-item{display:flex;align-items:center;gap:8px;}
-.ps-circle svg{width:44px;height:44px;flex-shrink:0;}
-.ps-info{flex:1;font-size:10px;color:#666;}
-.ps-bar{display:inline-block;padding:2px 4px;border-radius:2px;margin-right:4px;}
-.ps-bar.o{background:#fff3e0;color:#e65100;}.ps-bar.g{background:#e8f5e9;color:#2e7d32;}
-.ps-bar.r{background:#ffebee;color:#c62828;}.ps-bar.b{background:#e3f2fd;color:#1565c0;}
-.ps-result{margin-top:2px;}
-
-.temp-card{border:1px solid #eee;border-radius:6px;padding:12px;}
-.temp-header{font-size:13px;font-weight:bold;color:#333;margin-bottom:8px;}
-.temp-chart svg{width:100%;height:auto;}
-
-.leg{display:flex;align-items:center;gap:3px;}
-.dot{display:inline-block;width:10px;height:10px;border-radius:2px;}
-.dot.y{background:#f5a623;}.dot.g{background:#67c23a;}.dot.r{background:#f56c6c;}
-</style>

@@ -16,76 +16,74 @@
 
 
     <!-- 筛选栏（仅实时状态显示） -->
     <!-- 筛选栏（仅实时状态显示） -->
     <div v-if="currentStatus === 'realtime'" class="filter-bar">
     <div v-if="currentStatus === 'realtime'" class="filter-bar">
-      <span class="filter-label">请输入设备:</span>
+      <el-input
+        v-model="searchKeyword"
+        placeholder="输入设备名称搜索"
+        clearable
+        size="default"
+        style="width: 220px; margin-right: 16px;"
+        @keyup.enter="doSearch"
+        @clear="doSearch"
+      />
       <div class="filter-tags">
       <div class="filter-tags">
-        <span class="tag-item black"><i></i>全量2台</span>
-        <span class="tag-item red"><i></i>停机:0台</span>
-        <span class="tag-item green"><i></i>待机:0台</span>
-        <span class="tag-item blue"><i></i>运行:0台</span>
-        <span class="tag-item gray"><i></i>离线:2台</span>
+        <span :class="['tag-item', 'black', { active: !runStatusFilter }]" @click="filterByRunStatus('')"><i></i>全部{{ totalCounts.all }}台</span>
+        <span :class="['tag-item', 'red', { active: runStatusFilter === '1' }]" @click="filterByRunStatus('1')"><i></i>停机:{{ totalCounts.stop }}台</span>
+        <span :class="['tag-item', 'green', { active: runStatusFilter === '2' }]" @click="filterByRunStatus('2')"><i></i>待机:{{ totalCounts.standby }}台</span>
+        <span :class="['tag-item', 'blue', { active: runStatusFilter === '3' }]" @click="filterByRunStatus('3')"><i></i>运行:{{ totalCounts.run }}台</span>
+        <span :class="['tag-item', 'gray', { active: runStatusFilter === '0' }]" @click="filterByRunStatus('0')"><i></i>离线:{{ totalCounts.offline }}台</span>
       </div>
       </div>
     </div>
     </div>
 
 
     <!-- ========== 实时状态：设备卡片 ========== -->
     <!-- ========== 实时状态：设备卡片 ========== -->
     <div v-if="currentStatus === 'realtime'" class="tab-content">
     <div v-if="currentStatus === 'realtime'" class="tab-content">
     <!-- 设备卡片网格 -->
     <!-- 设备卡片网格 -->
-    <div class="device-grid" :class="{ 'grid-full': totalDevices > PAGE_SIZE || (pagedDevices.length >= PAGE_SIZE && totalDevices > PAGE_SIZE), 'grid-normal': pagedDevices.length <= 6 }">
-      <div v-for="device in pagedDevices" :key="device.id" class="energy-card">
+    <div class="device-grid">
+      <div class="grid-inner">
+      <div v-for="device in pagedDevices" :key="device.id" :class="['energy-card', 'status-' + device.runStatus]">
         <div class="card-header">
         <div class="card-header">
           <span class="device-name">{{ device.name }}</span>
           <span class="device-name">{{ device.name }}</span>
-          <el-icon class="menu-icon"><Menu /></el-icon>
         </div>
         </div>
         
         
         <div class="card-body">
         <div class="card-body">
-          <div class="energy-icon">
-            <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-              <path d="M32 8 L38 28 L48 20 L42 38 L58 38 L38 52 L44 62 L32 54 L20 62 L26 52 L6 38 L22 38 L16 20 L26 28 Z" 
-                    fill="#f5a623" stroke="#d48806" stroke-width="2"/>
+          <div class="energy-icon lightning-icon">
+            <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2003/2000/svg">
+              <path d="M35.5 4 L17 36 h14 l-6 24 22 -32 H33 l8 -24 Z"
+                    fill="#f5a623" stroke="#d48806" stroke-width="1.5" stroke-linejoin="round"/>
             </svg>
             </svg>
           </div>
           </div>
           
           
           <div class="info-list">
           <div class="info-list">
-            <div class="info-item">电压: <span>{{ device.voltage }}V</span></div>
-            <div class="info-item">电流: <span>{{ device.current }}A</span></div>
-            <div class="info-item">昨日能耗: <span class="value-highlight">{{ device.yesterdayEnergy }}</span></div>
+            <div class="info-item">用电量:<span>{{ device.evalue }} kw·h</span></div>
+            <div class="info-item">{{ getRunStatusLabel(device.runStatus) }}:<span>{{ device.duration }}</span></div>
           </div>
           </div>
         </div>
         </div>
 
 
         <div class="card-footer">
         <div class="card-footer">
           <button class="action-btn primary" @click="openDetail('report', device)">
           <button class="action-btn primary" @click="openDetail('report', device)">
-            <el-icon><Document /></el-icon>能耗报表
+            <el-icon><Document /></el-icon>运行状态
           </button>
           </button>
           <button class="action-btn danger" @click="openDetail('safety', device)">
           <button class="action-btn danger" @click="openDetail('safety', device)">
-            <el-icon><Lock /></el-icon>用电安全
-          </button>
-          <button class="action-btn warning" @click="openDetail('param', device)">
-            <el-icon><Setting /></el-icon>参数设置
-          </button>
-          <button v-if="false" class="action-btn info" @click="openDetail('warning', device)">
-            <el-icon><Warning /></el-icon>预警设置
+            <el-icon><Lock /></el-icon>用时用电
           </button>
           </button>
         </div>
         </div>
       </div>
       </div>
+      </div><!-- /grid-inner -->
     </div>
     </div>
 
 
     <!-- 分页 -->
     <!-- 分页 -->
     <div v-if="totalDevices > 0" class="pagination-wrapper">
     <div v-if="totalDevices > 0" class="pagination-wrapper">
-      <!-- 分页控件 -->
       <div class="pagination-controls">
       <div class="pagination-controls">
-        <!-- 每页条数选择 -->
         <select class="page-size-select" :value="PAGE_SIZE">
         <select class="page-size-select" :value="PAGE_SIZE">
           <option value="12">12 条/页</option>
           <option value="12">12 条/页</option>
         </select>
         </select>
-
-        <!-- 导航按钮组 -->
-        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage = 1">«</button>
-        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--"><</button>
+        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage = 1; fetchDeviceList()">«</button>
+        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--; fetchDeviceList()"><</button>
         <template v-for="(p, i) in visiblePages" :key="i">
         <template v-for="(p, i) in visiblePages" :key="i">
-          <button v-if="typeof p === 'number'" :class="['page-btn', { active: currentPage === p }]" @click="currentPage = p">{{ p }}</button>
+          <button v-if="typeof p === 'number'" :class="['page-btn', { active: currentPage === p }]" @click="currentPage = p; fetchDeviceList()">{{ p }}</button>
           <span v-else class="page-dots">{{ p }}</span>
           <span v-else class="page-dots">{{ p }}</span>
         </template>
         </template>
-        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">></button>
-        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage = totalPages">»</button>
+        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++; fetchDeviceList()">></button>
+        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage = totalPages; fetchDeviceList()">»</button>
       </div>
       </div>
     </div>
     </div>
     </div><!-- /tab-content realtime -->
     </div><!-- /tab-content realtime -->
@@ -287,11 +285,6 @@
       v-model:visible="dialogVisible.safety"
       v-model:visible="dialogVisible.safety"
       :device="currentDevice"
       :device="currentDevice"
     />
     />
-    <!-- 参数设置弹窗 -->
-    <ParamSettingDialog
-      v-model:visible="dialogVisible.param"
-      :device="currentDevice"
-    />
     <!-- 预警设置弹窗 -->
     <!-- 预警设置弹窗 -->
     <WarningSettingDialog
     <WarningSettingDialog
       v-model:visible="dialogVisible.warning"
       v-model:visible="dialogVisible.warning"
@@ -301,16 +294,33 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Search, Menu, Document, Lock, Setting, Warning, Histogram } from '@element-plus/icons-vue'
 import { Search, Menu, Document, Lock, Setting, Warning, Histogram } from '@element-plus/icons-vue'
 import EnergyReportDialog from '../components/EnergyReportDialog.vue'
 import EnergyReportDialog from '../components/EnergyReportDialog.vue'
 import SafetyDialog from '../components/SafetyDialog.vue'
 import SafetyDialog from '../components/SafetyDialog.vue'
-import ParamSettingDialog from '../components/ParamSettingDialog.vue'
 import WarningSettingDialog from '../components/WarningSettingDialog.vue'
 import WarningSettingDialog from '../components/WarningSettingDialog.vue'
 
 
 const selectedFactory = ref('新建')
 const selectedFactory = ref('新建')
 const searchKeyword = ref('')
 const searchKeyword = ref('')
 const currentStatus = ref('realtime')
 const currentStatus = ref('realtime')
+const runStatusFilter = ref('') // runStatus 筛选: ''=全部, '0'=离线, '1'=停机, '2'=待机, '3'=运行
+
+// 各状态数量（接口返回后更新）
+const totalCounts = reactive({ all: 0, stop: 0, standby: 0, run: 0, offline: 0 })
+
+// 点击状态筛选
+function filterByRunStatus(runStatus) {
+  if (runStatusFilter.value === runStatus) return
+  runStatusFilter.value = runStatus
+  currentPage.value = 1
+  fetchDeviceList()
+}
+
+// 搜索
+function doSearch() {
+  currentPage.value = 1
+  fetchDeviceList()
+}
 
 
 // 能耗页面4个Tab（第4个是能耗效率，与智能灯不同）
 // 能耗页面4个Tab（第4个是能耗效率，与智能灯不同）
 const statusTabs = [
 const statusTabs = [
@@ -320,14 +330,11 @@ const statusTabs = [
   { key: 'efficiency', label: '能耗效率' }
   { key: 'efficiency', label: '能耗效率' }
 ]
 ]
 
 
-const deviceList = ref([
-  { id: 1, name: '磨粉设备1', voltage: 0, current: 0, yesterdayEnergy: 0 },
-  { id: 2, name: '磨粉设备2', voltage: 0, current: 0, yesterdayEnergy: 0 }
-])
+const deviceList = ref([])
+const totalDevices = ref(0)
 
 
 const PAGE_SIZE = 12
 const PAGE_SIZE = 12
 const currentPage = ref(1)
 const currentPage = ref(1)
-const totalDevices = computed(() => deviceList.value.length)
 const totalPages = computed(() => Math.ceil(totalDevices.value / PAGE_SIZE) || 1)
 const totalPages = computed(() => Math.ceil(totalDevices.value / PAGE_SIZE) || 1)
 const visiblePages = computed(() => {
 const visiblePages = computed(() => {
   const pages = []
   const pages = []
@@ -342,16 +349,71 @@ const visiblePages = computed(() => {
   if (end < tp) { if (end < tp - 1) pages.push('...'); pages.push(tp) }
   if (end < tp) { if (end < tp - 1) pages.push('...'); pages.push(tp) }
   return pages
   return pages
 })
 })
-const pagedDevices = computed(() => {
-  const start = (currentPage.value - 1) * PAGE_SIZE
-  return deviceList.value.slice(start, start + PAGE_SIZE)
+// 服务端分页，pagedDevices 直接使用接口返回的 list
+const pagedDevices = computed(() => deviceList.value)
+
+// 获取能耗设备列表
+async function fetchDeviceList() {
+  try {
+    const params = new URLSearchParams({
+      pageNo: currentPage.value,
+      pageSize: PAGE_SIZE,
+      projectState: '1',
+    })
+    if (searchKeyword.value) params.append('deviceName', searchKeyword.value)
+    if (runStatusFilter.value !== '') params.append('runStatus', runStatusFilter.value)
+
+    const res = await fetch(`/api/energy/list?${params}`)
+    const data = await res.json()
+    deviceList.value = (data.list || []).map(item => ({
+      id: item.id,
+      name: item.deviceName || item.dtuSn,
+      evalue: parseFloat(item.evalue) || 0,
+      runStatus: String(item.runStatus ?? '0'),
+      duration: item.duration || '0秒',
+      _raw: item,
+    }))
+    totalDevices.value = data.total || 0
+
+    // 刷新统计数据
+    await fetchStats()
+  } catch (err) {
+    console.error('获取能耗设备列表失败:', err)
+  }
+}
+
+// 获取运行状态统计
+async function fetchStats() {
+  try {
+    const res = await fetch('/api/energy/stats')
+    const data = await res.json()
+    totalCounts.all = data.total || 0
+    totalCounts.offline = parseInt(data['0']) || 0  // runStatus=0 离线
+    totalCounts.stop = parseInt(data['1']) || 0      // runStatus=1 停机
+    totalCounts.standby = parseInt(data['2']) || 0   // runStatus=2 待机
+    totalCounts.run = parseInt(data['3']) || 0       // runStatus=3 运行
+  } catch (err) {
+    console.error('获取能耗统计失败:', err)
+  }
+}
+
+// 页面挂载时加载设备列表
+onMounted(() => {
+  fetchDeviceList()
 })
 })
 
 
+// runStatus 状态文字映射
+const RUN_STATUS_LABELS = { '0': '离线', '1': '停机', '2': '待机', '3': '运行' }
+function getRunStatusLabel(runStatus) {
+  return RUN_STATUS_LABELS[String(runStatus)] || '未知'
+}
+
 const dialogVisible = reactive({
 const dialogVisible = reactive({
   report: false,
   report: false,
   safety: false,
   safety: false,
   param: false,
   param: false,
-  warning: false
+  warning: false,
+  setting: false
 })
 })
 const currentDevice = ref(null)
 const currentDevice = ref(null)
 
 
@@ -408,17 +470,14 @@ const effLine2Points = computed(() => {
 }
 }
 .device-grid {
 .device-grid {
   flex: 1;
   flex: 1;
+  overflow-x: auto;
+  overflow-y: auto;
   padding: 16px 20px;
   padding: 16px 20px;
+}
+.device-grid .grid-inner {
   display: grid;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(6, 270px);
   gap: 16px;
   gap: 16px;
-  align-content: start;
-}
-.device-grid.grid-full {
-  align-content: stretch;
-}
-.device-grid.grid-normal {
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 }
 }
 .top-toolbar {
 .top-toolbar {
   background: #fff;
   background: #fff;
@@ -483,6 +542,14 @@ const effLine2Points = computed(() => {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 4px;
   gap: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.tag-item:hover {
+  opacity: 0.8;
+}
+.tag-item.active {
+  font-weight: bold;
 }
 }
 .tag-item i {
 .tag-item i {
   width: 10px;
   width: 10px;
@@ -497,15 +564,20 @@ const effLine2Points = computed(() => {
 .tag-item.gray i { background: #909399; }
 .tag-item.gray i { background: #909399; }
 
 
 .energy-card {
 .energy-card {
+  min-width: 270px;
   height: 340px;
   height: 340px;
-  background: linear-gradient(145deg, #3d3a4d 0%, #2d2a3a 100%);
   border-radius: 12px;
   border-radius: 12px;
   overflow: hidden;
   overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
   transition: transform 0.2s;
   transition: transform 0.2s;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
 }
 }
+/* runStatus 状态背景色 */
+.energy-card.status-0 { background: linear-gradient(145deg, #b8b8b8 0%, #999 100%); }
+.energy-card.status-1 { background: linear-gradient(145deg, #f56c6c 0%, #e74c3c 100%); }
+.energy-card.status-2 { background: linear-gradient(145deg, #7ec87e 0%, #5cb85c 100%); }
+.energy-card.status-3 { background: linear-gradient(145deg, #32a756 0%, #289048 100%); }
 .energy-card:hover {
 .energy-card:hover {
   transform: translateY(-2px);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0,0,0,0.25);
   box-shadow: 0 6px 20px rgba(0,0,0,0.25);
@@ -525,23 +597,27 @@ const effLine2Points = computed(() => {
   color: #aaa;
   color: #aaa;
 }
 }
 .card-body {
 .card-body {
-  padding: 14px 16px 10px;
+  padding: 10px 16px;
   text-align: center;
   text-align: center;
   flex: 1;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 }
 .energy-icon {
 .energy-icon {
-  width: 64px;
-  height: 64px;
-  margin: 0 auto 12px;
+  width: 56px;
+  height: 56px;
+  margin-bottom: 12px;
 }
 }
-.energy-icon svg {
+.lightning-icon svg {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
-  filter: drop-shadow(0 0 14px rgba(245,166,35,0.4));
+  filter: drop-shadow(0 0 12px rgba(255,200,0,0.5));
 }
 }
 .info-list {
 .info-list {
-  text-align: left;
-  color: #ccc;
+  text-align: center;
+  color: #fff;
   font-size: 13px;
   font-size: 13px;
   line-height: 2;
   line-height: 2;
 }
 }
@@ -554,11 +630,11 @@ const effLine2Points = computed(() => {
   font-weight: bold;
   font-weight: bold;
 }
 }
 .card-footer {
 .card-footer {
-  padding: 10px 14px 12px;
+  padding: 8px 12px;
   display: grid;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  border-top: 1px solid rgba(255,255,255,0.08);
+  gap: 6px;
+  border-top: 1px solid rgba(255,255,255,0.15);
   flex-shrink: 0;
   flex-shrink: 0;
 }
 }
 .action-btn {
 .action-btn {
@@ -566,38 +642,23 @@ const effLine2Points = computed(() => {
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
   gap: 4px;
   gap: 4px;
-  padding: 7px 8px;
-  border: none;
-  border-radius: 6px;
-  font-size: 13px;
+  padding: 6px 6px;
+  border: 1px solid rgba(255,255,255,0.35);
+  border-radius: 5px;
+  font-size: 12px;
   cursor: pointer;
   cursor: pointer;
   transition: all 0.2s;
   transition: all 0.2s;
   color: #fff;
   color: #fff;
+  background: rgba(0,0,0,0.15);
 }
 }
 .action-btn:hover {
 .action-btn:hover {
-  opacity: 0.85;
+  opacity: 0.8;
   transform: scale(1.02);
   transform: scale(1.02);
 }
 }
-.action-btn.primary {
-  background: rgba(64,158,255,0.25);
-  color: #409eff;
-  border: 1px solid rgba(64,158,255,0.3);
-}
-.action-btn.danger {
-  background: rgba(245,108,108,0.25);
-  color: #f56c6c;
-  border: 1px solid rgba(245,108,108,0.3);
-}
-.action-btn.warning {
-  background: rgba(230,162,60,0.25);
-  color: #e6a23c;
-  border: 1px solid rgba(230,162,60,0.3);
-}
-.action-btn.info {
-  background: rgba(144,147,153,0.25);
-  color: #909399;
-  border: 1px solid rgba(144,147,153,0.3);
-}
+.action-btn.primary { border-color: rgba(64,158,255,0.5); }
+.action-btn.danger { border-color: rgba(245,108,108,0.5); }
+.action-btn.info { border-color: rgba(144,147,153,0.45); }
+.action-btn.setting { border-color: rgba(144,147,153,0.45); }
 /* ========== 自定义分页 ========== */
 /* ========== 自定义分页 ========== */
 .pagination-wrapper {
 .pagination-wrapper {
   display: flex;
   display: flex;

@@ -43,7 +43,6 @@
         <!-- 标题栏 -->
         <!-- 标题栏 -->
         <div class="card-header">
         <div class="card-header">
           <span class="device-name">{{ device.name }}</span>
           <span class="device-name">{{ device.name }}</span>
-          <el-icon class="menu-icon"><Menu /></el-icon>
         </div>
         </div>
         
         
         <!-- 内容区：左侧状态灯 + 右侧信息 -->
         <!-- 内容区：左侧状态灯 + 右侧信息 -->