feat: 实现能耗效率动态折线图与数据表格

重构能耗效率模块，替换原静态SVG为Canvas动态折线图，新增时/日/月查询与设备筛选，支持折线图与表格视图切换及交互式图例悬浮提示

@@ -186,55 +186,104 @@
       </div>
     </div>
 
-    <!-- ========== 能耗效率：折线图 ========== -->
-    <div v-else-if="currentStatus === 'efficiency'" class="tab-content eff-view">
+    <!-- ========== 能耗效率：折线图 / 表格 ========== -->
+    <div v-else-if="currentStatus === 'efficiency'" class="tab-content eff-view" ref="effWrapRef">
       <div class="eff-toolbar">
         <span class="eff-label">查询方式：</span>
-        <el-radio-group v-model="effQueryMode" size="small">
+        <el-radio-group v-model="effQueryMode" size="small" @change="onEffModeChange">
+          <el-radio-button value="hour">时查询</el-radio-button>
           <el-radio-button value="day">日查询</el-radio-button>
-          <el-radio-button value="week">周查询</el-radio-button>
           <el-radio-button value="month">月查询</el-radio-button>
         </el-radio-group>
-        <el-date-picker v-model="effDate" type="date" placeholder="2026-04-28" size="small" style="width:160px;margin-left:8px;" />
-        <el-select v-model="effDeviceFilter" size="small" style="width:140px;margin-left:8px;">
-          <el-option label="磨粉设备1 +1" value="dev1" />
+        <el-date-picker v-if="effQueryMode === 'hour'" v-model="effHourDate" type="date"
+          placeholder="" size="small" style="width:160px;margin-left:8px;"
+          value-format="YYYY-MM-DD" :disabled-date="disabledDateFuture" @change="() => nextTick(fetchEffData)" />
+        <el-date-picker v-if="effQueryMode === 'day'" v-model="effDayDate" type="month"
+          placeholder="" size="small" style="width:160px;margin-left:8px;"
+          value-format="YYYY-MM" :disabled-date="disabledMonthFuture" @change="() => nextTick(fetchEffData)" />
+        <el-date-picker v-if="effQueryMode === 'month'" v-model="effMonthDate" type="year"
+          placeholder="" size="small" style="width:120px;margin-left:8px;"
+          value-format="YYYY" :disabled-date="disabledYearFuture" @change="() => nextTick(fetchEffData)" />
+        <el-select v-model="effDeviceFilter" size="small" style="width:140px;margin-left:8px;" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2">
+          <el-option v-for="dev in effAllDevices" :key="dev.dtuSn" :label="dev.deviceName || dev.dtuSn" :value="dev.dtuSn" />
         </el-select>
-        <div style="flex:1"></div>
-        <el-button size="small" circle><el-icon><Histogram /></el-icon></el-button>
-        <el-button size="small" circle><el-icon><Document /></el-icon></el-button>
+        <el-button type="primary" size="small" @click="fetchEffData" style="margin-left:4px;">查询</el-button>
+        <!-- 视图切换图标按钮 -->
+        <el-tooltip content="历史数据表格" placement="bottom" :show-after="300">
+          <button size="small" :class="['action-btn', 'view-btn', { 'active': effViewMode === 'table' }]"
+            @click="toggleEffView('table')" style="border:1px solid #dcdfe6;">
+            <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+              <rect x="1.5" y="2.5" width="5" height="4" rx="0.5"/><rect x="9.5" y="2.5" width="5" height="4" rx="0.5"/>
+              <rect x="1.5" y="8.5" width="5" height="5" rx="0.5"/><rect x="9.5" y="8.5" width="5" height="5" rx="0.5"/>
+            </svg>
+          </button>
+        </el-tooltip>
+        <el-tooltip content="历史数据折线图" placement="bottom" :show-after="300">
+          <button size="small" :class="['action-btn', 'view-btn', { 'active': effViewMode === 'chart' }]"
+            @click="toggleEffView('chart')" style="border:1px solid #dcdfe6;">
+            <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="1,13 4,7 8,10 12,3 15,6"/>
+            </svg>
+          </button>
+        </el-tooltip>
+      </div>
+
+      <!-- ========== 折线图视图 ========== -->
+      <template v-if="effViewMode === 'chart'">
+      <!-- 动态图例（可点击筛选） -->
+      <div class="eff-legend" v-if="effDeviceList.length > 0">
+        <span v-for="(dev, idx) in effDeviceList" :key="dev.dtuSn"
+          class="leg-line"
+          :class="{ 'leg-dimmed': effHiddenDevices.has(dev.dtuSn) }"
+          :style="'--lc:' + EFF_LINE_COLORS[idx % EFF_LINE_COLORS.length]"
+          @click="toggleEffDevice(dev.dtuSn)">
+          <i></i>{{ dev.deviceName || dev.dtuSn }}
+        </span>
+      </div>
+
+      <!-- Canvas 折线图 -->
+      <div class="eff-chart canvas-eff-chart" style="position:relative;" v-loading="effLoading">
+        <canvas ref="effChartCanvasRef" @mousemove="onEffChartHover" @mouseleave="onEffChartLeave"></canvas>
+        <div v-if="effHover.show" class="eff-tooltip" :style="{ left: effHover.x + 'px', top: effHover.y + 'px' }">
+          <div class="eft-title">{{ effHover.timeLabel }}</div>
+          <div v-for="(item, idx) in effHover.devices" :key="idx" class="eft-row">
+            <i class="dot" :style="{ background: item.color }"></i>
+            <span class="eft-name">{{ item.name }}</span>
+            <span class="eft-val">{{ item.value }} kw·h</span>
+          </div>
+        </div>
       </div>
-      <div class="eff-legend">
-        <span class="leg-line" style="--lc:#5470c6;"><i></i>磨粉设备1</span>
-        <span class="leg-line" style="--lc:#91cc75;"><i></i>磨粉设备2</span>
+
+      <!-- 总用电量统计 -->
+      <div class="eff-summary" v-if="effTotalKwh !== null">
+        <span class="eff-sum-label">总用电量:</span>
+        <span class="eff-sum-val">{{ effTotalKwh.toFixed(2) }} kw·h</span>
+        <span class="eff-sum-count">({{ effDeviceList.length }} 台设备)</span>
       </div>
-      <div class="eff-chart">
-        <svg viewBox="0 0 1400 400">
-          <!-- Y轴刻度 -->
-          <g font-size="11" fill="#999" text-anchor="end">
-            <text x="35" y="24">1</text><text x="35" y="96">0.8</text>
-            <text x="35" y="168">0.6</text><text x="35" y="240">0.4</text>
-            <text x="35" y="312">0.2</text><text x="35" y="380">0</text>
-          </g>
-          <!-- 网格线 -->
-          <g stroke="#eee" stroke-width="1">
-            <line x1="46" y1="20" x2="1370" y2="20"/><line x1="46" y1="92" x2="1370" y2="92"/>
-            <line x1="46" y1="164" x2="1370" y2="164"/><line x1="46" y1="236" x2="1370" y2="236"/>
-            <line x1="46" y1="308" x2="1370" y2="308"/><line x1="46" y1="380" x2="1370" y2="380"/>
-          </g>
-          <!-- X轴标签 -->
-          <g font-size="10" fill="#666" text-anchor="middle">
-            <template v-for="i in 24" :key="i">
-              <text :x="46+(i-1)*55" y="398">{{ i }}</text>
-            </template>
-          </g>
-          <!-- 折线1 -->
-          <polyline :points="effLine1Points" fill="none" stroke="#5470c6" stroke-width="2"/>
-          <!-- 折线2 -->
-          <polyline :points="effLine2Points" fill="none" stroke="#91cc75" stroke-width="2"/>
-          <!-- X轴线 -->
-          <line x1="46" y1="380" x2="1370" y2="380" stroke="#ccc" stroke-width="1.5"/>
-        </svg>
+      </template>
+
+      <!-- ========== 表格视图 ========== -->
+      <template v-else>
+      <div class="eff-table-wrap" v-loading="effLoading">
+        <table class="eff-history-table" v-if="effTableColumns.length > 0 && effTableRows.length > 0">
+          <thead>
+            <tr>
+              <th class="col-name">设备名称</th>
+              <th v-for="(col, ci) in effTableColumns" :key="ci">{{ col.label }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, ri) in effTableRows" :key="ri">
+              <td class="td-name">{{ row.deviceName }}</td>
+              <td v-for="(col, ci) in effTableColumns" :key="ci">{{ row.values[ci] != null ? row.values[ci] : '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-else class="eff-table-empty">
+          暂无数据
+        </div>
       </div>
+      </template>
     </div>
 
     <!-- 能耗报表弹窗 -->
@@ -1202,24 +1251,433 @@ function initUtilObserver() {
 function destroyUtilObserver() { if (utilResizeObs) { utilResizeObs.disconnect(); utilResizeObs = null } }
 onBeforeUnmount(() => destroyUtilObserver())
 
-// ========== 能耗效率数据 ==========
-const effQueryMode = ref('day')
-const effDate = ref('2026-04-28')
-const effDeviceFilter = ref('dev1')
-const effLine1Points = computed(() => {
-  const pts = []
-  for (let i = 0; i < 24; i++) {
-    pts.push(`${46 + i * 55},${380 - 0}`)
+// ========== 能耗效率：Canvas折线图 / 表格 ==========
+const EFF_LINE_COLORS = [
+  '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
+  '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
+]
+
+// 视图模式：chart（折线图） / table（表格）
+const effViewMode = ref('chart')
+function toggleEffView(mode) {
+  if (effViewMode.value === mode) return
+  effViewMode.value = mode
+  if (mode === 'chart') nextTick(drawEffChart)
+}
+
+const effQueryMode = ref('hour')
+const effHourDate = ref(new Date().toISOString().slice(0, 10))
+const effDayDate = ref(new Date().toISOString().slice(0, 7))
+const effMonthDate = ref(new Date().getFullYear().toString())
+const effDeviceFilter = ref([])
+const effLoading = ref(false)
+const effTotalKwh = ref(null)
+
+// Canvas ref
+const effChartCanvasRef = ref(null)
+const effWrapRef = ref(null)
+let effResizeObs = null
+
+// 接口数据
+const effDataList = ref([]) // 原始设备列表
+const effAllDevices = computed(() => effDataList.value.map(d => ({ dtuSn: d.dtuSn, deviceName: d.deviceName || d.dtuSn })))
+const effDeviceList = computed(() => {
+  if (!effDeviceFilter.value.length) return effDataList.value
+  return effDataList.value.filter(d => effDeviceFilter.value.includes(d.dtuSn))
+})
+const effVisibleDevices = computed(() =>
+  effDeviceList.value.filter(d => !effHiddenDevices.has(d.dtuSn))
+)
+
+// 图例点击筛选：隐藏/显示设备
+const effHiddenDevices = reactive(new Set())
+function toggleEffDevice(dtuSn) {
+  if (effHiddenDevices.has(dtuSn)) {
+    effHiddenDevices.delete(dtuSn)
+  } else {
+    effHiddenDevices.add(dtuSn)
+  }
+  drawEffChart()
+}
+
+// 表格视图：根据查询模式动态生成列和行数据
+const effTableColumns = computed(() => {
+  const list = effDeviceList.value
+  if (!list.length) return []
+  if (effQueryMode.value === 'hour') {
+    // 时：X轴 = kwhList[].date (如 "1时" ~ "24时")
+    if (!list[0].kwhList || !list[0].kwhList.length) return []
+    return list[0].kwhList.map((k, i) => ({ label: k.date || '', key: i }))
+  } else if (effQueryMode.value === 'day') {
+    // 日：X轴 = dailyData[].date → MM-DD
+    if (!list[0].dailyData || !list[0].dailyData.length) return []
+    return list[0].dailyData.map((d, i) => ({ label: d.date ? d.date.slice(5) : '', key: i }))
+  } else {
+    // 月：X轴 = monthlyData[].label (如 "1月" ~ "12月")
+    if (!list[0].monthlyData || !list[0].monthlyData.length) return []
+    return list[0].monthlyData.map((m, i) => ({ label: m.label || '', key: i }))
   }
-  return pts.join(' ')
 })
-const effLine2Points = computed(() => {
-  const pts = []
-  for (let i = 0; i < 24; i++) {
-    pts.push(`${46 + i * 55},${380 - 0}`)
+
+const effTableRows = computed(() => {
+  const list = effDeviceList.value
+  if (!list.length) return []
+  return list.map(dev => {
+    let values = []
+    if (effQueryMode.value === 'hour') {
+      values = (dev.kwhList || []).map(k => Number(k.value) || 0)
+    } else if (effQueryMode.value === 'day') {
+      values = (dev.dailyData || []).map(d => Number(d.totalKwh) || 0)
+    } else {
+      values = (dev.monthlyData || []).map(m => Number(m.totalKwh) || 0)
+    }
+    // 补齐到列数（某些设备可能缺少部分时段/日期的数据）
+    while (values.length < effTableColumns.value.length) values.push(null)
+    return { deviceName: dev.deviceName || dev.dtuSn, values }
+  })
+})
+
+// Hover
+const effHover = reactive({ show: false, x: 0, y: 0, timeLabel: '', devices: [] })
+let effHitAreas = [] // 每个X位置的hover区域
+
+function disabledYearFuture(time) {
+  return time.getFullYear() > new Date().getFullYear()
+}
+
+function onEffModeChange() { fetchEffData() }
+
+async function fetchEffData() {
+  effLoading.value = true
+  let startDate, endDate, type
+
+  if (effQueryMode.value === 'hour') {
+    type = 1
+    startDate = effHourDate.value
+    endDate = effHourDate.value
+  } else if (effQueryMode.value === 'day') {
+    type = 2
+    const [y, m] = effDayDate.value.split('-')
+    startDate = effDayDate.value + '-01'
+    const lastDay = new Date(parseInt(y), parseInt(m), 0).getDate()
+    endDate = effDayDate.value + '-' + String(lastDay).padStart(2, '0')
+  } else {
+    type = 3
+    const year = effMonthDate.value
+    startDate = year + '-01-01'
+    endDate = year + '-12-31'
+  }
+
+  try {
+    const res = await fetch(`/api/energy/eqKwhByType?startDate=${startDate}&endDate=${endDate}&type=${type}`)
+    const data = await res.json()
+    if (data.code === 200) {
+      effDataList.value = data.list || []
+      effTotalKwh.value = data.grandTotalKwh ?? data.totalKwh ?? null
+      if (effDeviceFilter.value.length) {
+        // 如果有筛选，检查是否还在列表中
+        effDeviceFilter.value = effDeviceFilter.value.filter(sn =>
+          effDataList.value.some(d => d.dtuSn === sn)
+        )
+      }
+      await nextTick()
+      drawEffChart()
+    }
+  } catch (err) {
+    console.error('获取能耗效率数据失败:', err)
+  } finally {
+    effLoading.value = false
+  }
+}
+
+function drawEffChart() {
+  const canvas = effChartCanvasRef.value; if (!canvas) return
+  const wrap = canvas.parentElement; if (!wrap) return
+  const w = wrap.clientWidth || 1200
+  const h = wrap.clientHeight || 400
+  canvas.width = w * getDpr(); canvas.height = h * getDpr()
+  canvas.style.width = w + 'px'; canvas.style.height = h + 'px'
+  const ctx = canvas.getContext('2d'); ctx.scale(getDpr(), getDpr())
+  ctx.clearRect(0, 0, w, h)
+  effHitAreas = []
+
+  const list = effDeviceList.value
+  if (!list.length) {
+    ctx.fillStyle = '#c0c4cc'; ctx.font = '14px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', w / 2, h / 2); return
+  }
+
+  // 布局参数
+  const padL = 50, padR = 20, padT = 24, padB = 36
+  const chartW = w - padL - padR
+  const chartH = h - padT - padB
+
+  // 获取X轴标签和数据点
+  let xLabels = [], xDataMap = {} // deviceName -> [values]
+
+  if (effQueryMode.value === 'hour') {
+    // 时查询: kwhList 的 date 字段作为X轴标签
+    if (list[0].kwhList && list[0].kwhList.length) {
+      xLabels = list[0].kwhList.map(k => k.date || '')
+    }
+    list.forEach(dev => {
+      const vals = (dev.kwhList || []).map(k => Number(k.value) || 0)
+      xDataMap[dev.dtuSn] = vals
+    })
+  } else if (effQueryMode.value === 'day') {
+    // 日查询: dailyData 的 date 字段
+    if (list[0].dailyData && list[0].dailyData.length) {
+      xLabels = list[0].dailyData.map(d => d.date ? d.date.slice(5) : '') // MM-DD
+    }
+    list.forEach(dev => {
+      const vals = (dev.dailyData || []).map(d => Number(d.totalKwh) || 0)
+      xDataMap[dev.dtuSn] = vals
+    })
+  } else {
+    // 月查询(monthlyData): label作为X轴标签(如"1月","2月")
+    if (list[0].monthlyData && list[0].monthlyData.length) {
+      xLabels = list[0].monthlyData.map(m => m.label || '')
+    }
+    list.forEach(dev => {
+      const vals = (dev.monthlyData || []).map(m => Number(m.totalKwh) || 0)
+      xDataMap[dev.dtuSn] = vals
+    })
+  }
+
+  const pointCount = xLabels.length
+  if (pointCount === 0) {
+    ctx.fillStyle = '#c0c4cc'; ctx.font = '14px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', w / 2, h / 2); return
+  }
+
+  // Y轴最大值计算
+  let maxYVal = 1
+  list.forEach(dev => {
+    const vals = xDataMap[dev.dtuSn] || []
+    vals.forEach(v => { if (v > maxYVal) maxYVal = v })
+  })
+  const yMax = niceEffYMax(maxYVal)
+  const yTicks = 5
+
+  // 绘制Y轴网格线和刻度
+  ctx.strokeStyle = '#ebeef5'; ctx.lineWidth = 1; ctx.font = '11px sans-serif'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle'
+  for (let i = 0; i <= yTicks; i++) {
+    const vy = padT + chartH - (i / yTicks) * chartH
+    const val = (i / yTicks) * yMax
+    ctx.beginPath(); ctx.moveTo(padL, vy); ctx.lineTo(w - padR, vy); ctx.stroke()
+    ctx.fillStyle = '#999'
+    ctx.fillText(val >= 1 ? val.toFixed(0) : val.toFixed(1), padL - 8, vy)
+  }
+
+  // X轴线
+  ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1.5
+  ctx.beginPath(); ctx.moveTo(padL, padT + chartH); ctx.lineTo(w - padR, padT + chartH); ctx.stroke()
+
+  // Y轴线
+  ctx.beginPath(); ctx.moveTo(padL, padT); ctx.lineTo(padL, padT + chartH); ctx.stroke()
+
+  // 计算X轴间距
+  const stepX = chartW / Math.max(pointCount - 1, 1)
+
+  // 绘制X轴标签（根据点数量动态调整显示间隔）
+  ctx.fillStyle = '#666'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'
+  const xLabelStep = pointCount > 20 ? Math.ceil(pointCount / 12) : 1
+  xLabels.forEach((lbl, i) => {
+    if (i % xLabelStep === 0 || i === pointCount - 1) {
+      const px = padL + i * stepX
+      ctx.fillText(lbl, px, padT + chartH + 10)
+    }
+  })
+
+  // 存储每个X位置用于hover检测
+  for (let i = 0; i < pointCount; i++) {
+    effHitAreas.push({ x: padL + i * stepX - stepX / 2, w: stepX, index: i, label: xLabels[i] })
+  }
+
+  // 绘制每条折线（平滑曲线）
+  const yScale = chartH / yMax
+  // 用于存储每个设备的点坐标，供hover垂直线绘制圆点
+  const devPointsMap = {} // dtuSn -> [{x, y}]
+
+  list.forEach((dev, devIdx) => {
+    const color = EFF_LINE_COLORS[devIdx % EFF_LINE_COLORS.length]
+    const vals = xDataMap[dev.dtuSn] || []
+    const points = []
+    vals.forEach((v, i) => {
+      points.push({
+        x: padL + i * stepX,
+        y: padT + chartH - (Number(v) || 0) * yScale
+      })
+    })
+    devPointsMap[dev.dtuSn] = points
+
+    // 初始化该设备在各X位置的hover数据
+    for (let i = 0; i < pointCount; i++) {
+      if (!effHitAreas[i].devs) effHitAreas[i].devs = []
+      effHitAreas[i].devs.push({
+        name: dev.deviceName || dev.dtuSn,
+        value: i < vals.length ? (Number(vals[i]) || 0) : 0,
+        color
+      })
+    }
+
+    if (points.length === 0) return
+
+    // 绘制单调三次样条曲线（Monotone Cubic，不会过冲）
+    ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.lineJoin = 'round'
+    ctx.moveTo(points[0].x, points[0].y)
+
+    if (points.length === 2) {
+      // 两点：直接连线
+      ctx.lineTo(points[1].x, points[1].y)
+    } else if (points.length > 2) {
+      const n = points.length
+      // 计算各点斜率（中心差分 + 边界单侧差分）
+      const slopes = new Array(n)
+      for (let i = 1; i < n - 1; i++) {
+        slopes[i] = (points[i + 1].y - points[i - 1].y) / (points[i + 1].x - points[i - 1].x)
+      }
+      slopes[0] = (points[1].y - points[0].y) / (points[1].x - points[0].x)
+      slopes[n - 1] = (points[n - 1].y - points[n - 2].y) / (points[n - 1].x - points[n - 2].x)
+
+      // Fritsch-Carlson 单调性修正：确保斜率不导致过冲
+      for (let i = 0; i < n - 1; i++) {
+        const dx = points[i + 1].x - points[i].x
+        const dy = points[i + 1].y - points[i].y
+        if (Math.abs(dy) < 1e-8) {
+          // 相邻两点Y相同 → 斜率归零（直线）
+          slopes[i] = 0; slopes[i + 1] = 0
+        } else {
+          const s = dy / dx
+          // α, β: 斜率与割线的比值
+          const alpha = Math.abs(slopes[i] / s)
+          const beta = Math.abs(slopes[i + 1] / s)
+          const ab = alpha * beta
+          if (ab > 3) { // 会过冲 → 缩小斜率
+            const tau = 3.0 / Math.sqrt(ab)
+            slopes[i] *= Math.min(tau, 1)
+            slopes[i + 1] *= Math.min(tau, 1)
+          }
+        }
+      }
+
+      // 用 Hermite 形式绘制每段 Bezier 曲线（控制点 Y 钳位防过冲）
+      for (let i = 0; i < n - 1; i++) {
+        const dx = points[i + 1].x - points[i].x
+        const y0 = points[i].y, y1 = points[i + 1].y
+        const cp1x = points[i].x + dx / 3
+        let cp1y = points[i].y + slopes[i] * (dx / 3)
+        const cp2x = points[i + 1].x - dx / 3
+        let cp2y = points[i + 1].y - slopes[i + 1] * (dx / 3)
+        // 将控制点 Y 钳位到两端点之间，彻底杜绝过冲/下冲
+        const lo = Math.min(y0, y1), hi = Math.max(y0, y1)
+        cp1y = Math.max(lo, Math.min(hi, cp1y))
+        cp2y = Math.max(lo, Math.min(hi, cp2y))
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, points[i + 1].x, points[i + 1].y)
+      }
+    }
+    ctx.stroke()
+
+    // 绘制数据点圆圈
+    points.forEach(p => {
+      ctx.fillStyle = '#fff'
+      ctx.beginPath(); ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2); ctx.fill()
+      ctx.strokeStyle = color; ctx.lineWidth = 1.5
+      ctx.beginPath(); ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2); ctx.stroke()
+    })
+  })
+
+  // Hover 垂直虚线 + 高亮圆点
+  if (effHover.show && effHover.hoverPx !== undefined && !isNaN(effHover.hoverPx)) {
+    const hx = effHover.hoverPx
+    ctx.strokeStyle = '#c0c4cc'; ctx.lineWidth = 1; ctx.setLineDash([4, 3])
+    ctx.beginPath(); ctx.moveTo(hx, padT); ctx.lineTo(hx, padT + chartH); ctx.stroke()
+    ctx.setLineDash([])
+
+    // 在垂直线位置重绘高亮圆点（略大）
+    list.forEach((dev, devIdx) => {
+      const color = EFF_LINE_COLORS[devIdx % EFF_LINE_COLORS.length]
+      const pts = devPointsMap[dev.dtuSn] || []
+      // 找最近的点
+      let bestP = null, bestD = Infinity
+      pts.forEach(p => { const d = Math.abs(p.x - hx); if (d < bestD) { bestD = d; bestP = p } })
+      if (bestP && bestD < stepX / 2 + 2) {
+        ctx.fillStyle = '#fff'
+        ctx.beginPath(); ctx.arc(bestP.x, bestP.y, 5, 0, Math.PI * 2); ctx.fill()
+        ctx.strokeStyle = color; ctx.lineWidth = 2
+        ctx.beginPath(); ctx.arc(bestP.x, bestP.y, 5, 0, Math.PI * 2); ctx.stroke()
+      }
+    })
+  }
+}
+
+// Y轴取整函数
+function niceEffYMax(val) {
+  if (val <= 0) return 10
+  if (val <= 5) return 5
+  if (val <= 10) return 10
+  if (val <= 20) return 20
+  if (val <= 30) return 30
+  if (val <= 50) return 50
+  if (val <= 70) return 70
+  if (val <= 100) return 100
+  if (val <= 200) return 200
+  if (val <= 500) return 500
+  return Math.ceil(val / 100) * 100
+}
+
+function onEffChartHover(e) {
+  const canvas = effChartCanvasRef.value; if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left, my = e.clientY - rect.top
+
+  // 始终更新hoverPx和tooltip位置，用于垂直虚线定位
+  effHover.hoverPx = mx
+
+  let hit = null
+  for (const area of effHitAreas) {
+    if (mx >= area.x && mx <= area.x + area.w) { hit = area; break }
+  }
+
+  if (hit && hit.devs && hit.devs.length > 0) {
+    effHover.timeLabel = hit.label || ''
+    effHover.devices = [...hit.devs]
+    effHover.show = true
+    const tipW = 180, tipH = 40 + hit.devs.length * 28
+    let tx = mx + 12, ty = my - tipH - 8
+    if (tx + tipW > rect.width - 4) tx = mx - tipW - 6
+    if (ty < 4) ty = my + 14
+    effHover.x = Math.max(4, tx)
+    effHover.y = Math.max(4, ty)
+  } else {
+    effHover.show = false
+  }
+
+  // 重绘以更新垂直虚线和高亮圆点
+  drawEffChart()
+}
+
+function onEffChartLeave() { effHover.show = false; effHover.hoverPx = undefined; drawEffChart() }
+
+// 能耗效率 tab 初始化
+watch(currentStatus, async (val) => {
+  if (val === 'efficiency') {
+    await nextTick()
+    initEffObserver()
+    fetchEffData()
+  } else {
+    destroyEffObserver()
   }
-  return pts.join(' ')
 })
+
+function initEffObserver() {
+  destroyEffObserver()
+  effResizeObs = new ResizeObserver(() => { if (currentStatus.value === 'efficiency') drawEffChart() })
+  const el = document.querySelector('.eff-view')
+  if (el) effResizeObs.observe(el)
+}
+function destroyEffObserver() { if (effResizeObs) { effResizeObs.disconnect(); effResizeObs = null } }
+onBeforeUnmount(() => destroyEffObserver())
 </script>
 
 <style scoped>
@@ -1810,6 +2268,10 @@ const effLine2Points = computed(() => {
 /* ========== 能耗效率 ========== */
 .eff-view {
   background: #f5f7fa;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   overflow-y: auto;
 }
 .eff-toolbar {
@@ -1819,23 +2281,32 @@ const effLine2Points = computed(() => {
   align-items: center;
   gap: 10px;
   border-bottom: 1px solid #e8e8e8;
+  flex-shrink: 0;
 }
 .eff-label {
   font-size: 13px; color: #666; font-weight: bold;
 }
 .eff-legend {
-  padding: 10px 24px;
-  font-size: 13px;
+  padding: 8px 24px;
+  font-size: 12px;
   color: #666;
   display: flex;
   align-items: center;
   gap: 20px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  background: #fff;
+  border-bottom: 1px solid #ebeef5;
 }
 .leg-line {
   display: inline-flex;
   align-items: center;
   gap: 5px;
+  cursor: pointer;
+  transition: opacity 0.2s;
 }
+.leg-line:hover { opacity: 0.7; }
+.leg-line.leg-dimmed { opacity: 0.35; }
 .leg-line i {
   display: inline-block;
   width: 16px;
@@ -1843,13 +2314,128 @@ const effLine2Points = computed(() => {
   border-radius: 2px;
   background: var(--lc);
 }
-.eff-chart {
-  margin: 0 20px 20px;
+.eff-chart.canvas-eff-chart {
+  margin: 0 20px 14px;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.06);
-  padding: 14px;
-  overflow-x: auto;
+  padding: 16px 14px 14px;
+  flex: 1;
+  min-height: 380px;
+  overflow: visible;
+  position: relative;
+}
+.eff-chart canvas {
+  display: block;
+  width: 100%;
+}
+
+/* 能耗效率 tooltip */
+.eff-tooltip {
+  position: absolute;
+  background: rgba(30,40,55,0.95);
+  border-radius: 6px;
+  padding: 10px 14px;
+  min-width: 160px;
+  z-index: 200;
+  pointer-events: none;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+}
+.eft-title {
+  font-size: 12px; font-weight:bold; color:#eef1f7; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.12);
+}
+.eft-row {
+  display:flex; align-items:center; justify-content:space-between; gap:12px; line-height:2.2; font-size:12px;
+}
+.eft-row .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+.eft-name { color:#aab2c0; }
+.eft-val { color:#eef1f7; font-weight:500; }
+
+/* 总用电量统计 */
+.eff-summary {
+  padding: 8px 24px 14px;
+  font-size: 13px;
+  color: #666;
+  background: #fff;
+  border-top: 1px solid #ebeef5;
+  text-align: center;
+  flex-shrink: 0;
+}
+.eff-sum-label { color: #909399; margin-right: 4px; }
+.eff-sum-val { color: #409eff; font-weight:bold; font-size:15px; margin-right: 6px; }
+.eff-sum-count { color: #999; font-size:12px; }
+
+/* 视图切换图标按钮 */
+.view-btn {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #606266;
+  background: #fff;
+}
+.view-btn:hover { color: #409eff; border-color: #409eff !important; }
+.view-btn.active { color: #409eff; border-color: #409eff !important; }
+
+/* 历史数据表格（简洁风格） */
+.eff-table-wrap {
+  flex: 1;
+  overflow: auto;
+  background: #fff;
+  margin: 8px 20px 14px;
+  border: 1px solid #ebeef5;
+}
+.eff-history-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+.eff-history-table th,
+.eff-history-table td {
+  padding: 8px 12px;
+  text-align: center;
+  font-size: 13px;
+  border-right: 1px solid #ebeef5;
+  white-space: nowrap;
+  line-height: 1.8;
+}
+.eff-history-table th {
+  background: #fff;
+  font-weight: 600;
+  color: #333;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-bottom: 1px solid #ddd;
+}
+.eff-history-table td {
+  color: #555;
+  border-bottom: 1px solid #ebeef5;
+}
+.eff-history-table tbody tr:last-child td { border-bottom: 1px solid #ebeef5; }
+.eff-history-table .col-name,
+.eff-history-table .td-name {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  text-align: left !important;
+  font-weight: 500;
+  width: 120px;
+  border-left: none !important;
+}
+.eff-history-table .td-name { background: #fff; }
+.eff-history-table tbody tr:hover .td-name,
+.eff-history-table tbody tr:hover { background: #fafafa; }
+.eff-table-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  font-size: 13px;
+  color: #909399;
 }
-.eff-chart svg { min-width: 1200px; }
 </style>