feat: 实现稼动率Canvas图表及数据对接

杨鸣坤
1 parent e9265335
Showing 1 changed file with 651 additions and 88 deletions
src/views/Energy.vue
--- a/src/views/Energy.vue
View file @9782fb4
+++ b/src/views/Energy.vue
View file @9782fb4
@@ -123,77 +123,65 @@
       </div>
     </div>
-    <!-- ========== 稼动率：多图表视图 ========== -->
-    <div v-else-if="currentStatus === 'utilization'" class="tab-content util-view">
+    <!-- ========== 稼动率：Canvas多图表视图 ========== -->
+    <div v-else-if="currentStatus === 'utilization'" class="tab-content util-view" ref="utilWrapRef">
       <div class="util-toolbar">
         <span class="util-label">查询方式：</span>
         <el-radio-group v-model="utilQueryMode" size="small">
           <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="utilDate" type="date" placeholder="2026-04-28" size="small" style="width:160px;margin-left:8px;" />
+        <el-date-picker v-if="utilQueryMode === 'day'" v-model="utilDayDate" type="date"
+          placeholder="" size="small" style="width:160px;margin-left:8px;"
+          value-format="YYYY-MM-DD" :disabled-date="disabledDateFuture" @change="fetchUtilData" />
+        <el-date-picker v-if="utilQueryMode === 'week'" v-model="utilWeekDate" type="date"
+          placeholder="" size="small" style="width:160px;margin-left:8px;"
+          value-format="YYYY-MM-DD" :disabled-date="disabledDateFuture" @change="fetchUtilData" />
+        <el-date-picker v-if="utilQueryMode === 'month'" v-model="utilMonthDate" type="month"
+          placeholder="" size="small" style="width:160px;margin-left:8px;"
+          value-format="YYYY-MM" :disabled-date="disabledMonthFuture" @change="fetchUtilData" />
         <div style="flex:1"></div>
-        <el-button type="primary" size="small">查询</el-button>
+        <el-button type="primary" size="small" @click="fetchUtilData">查询</el-button>
       </div>
       <div class="util-top-charts">
         <div class="pie-card">
           <div class="pie-title">总稼动率：</div>
-          <div class="pie-chart-svg">
-            <svg viewBox="0 0 200 180"><circle cx="90" cy="90" r="70" fill="none" stroke="#ddd" stroke-width="35"/></svg>
-            <div class="pie-empty-text">暂无数据</div>
-          </div>
+          <div class="pie-canvas-wrap"><canvas ref="utilTotalPieCanvasRef"></canvas></div>
         </div>
         <div class="pie-card">
           <div class="pie-title">当前机台运行状态：</div>
-          <div class="pie-chart-svg">
-            <svg viewBox="0 0 200 180"><circle cx="90" cy="90" r="70" fill="none" stroke="#909399" stroke-width="35" stroke-dasharray="440 440" transform="rotate(-90 90 90)"/>
-              <text x="130" y="85" text-anchor="middle" font-size="12" fill="#333"><tspan>x</tspan> 离线</text>
-            </svg>
-            <div class="pie-legend center-leg">
-              <span class="leg-item"><i class="dot g"></i>绿灯</span>
-              <span class="leg-item"><i class="dot r"></i>红灯</span>
-              <span class="leg-item"><i class="dot gy"></i>离线</span>
-            </div>
-          </div>
+          <div class="pie-canvas-wrap"><canvas ref="utilStatusPieCanvasRef"></canvas></div>
         </div>
         <div class="bar-card">
           <div class="pie-title">异常机台排名：</div>
-          <div class="abnormal-list"></div>
-          <div class="abn-legend" style="margin-top:auto;"><i class="dot y"></i>待机 &nbsp; <i class="dot r"></i>停机</div>
+          <div class="bar-canvas-wrap" style="position:relative;">
+            <canvas ref="utilRankCanvasRef" @mousemove="onUtilRankHover" @mouseleave="onUtilRankLeave"></canvas>
+            <div v-if="utilRankHover.show" class="rank-tooltip" :style="{ left: utilRankHover.x + 'px', top: utilRankHover.y + 'px' }">
+              <div class="rtt-name">{{ utilRankHover.deviceName }}</div>
+              <div class="rtt-row"><i class="dot y"></i>待机<span>{{ utilRankHover.s2Label }}</span></div>
+              <div class="rtt-row"><i class="dot r"></i>停机<span>{{ utilRankHover.s1Label }}</span></div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="util-bottom-chart">
-        <div class="stack-bar-toolbar">
-          <span>排序：</span>
-          <el-radio-group v-model="sortMode" size="small">
-            <el-radio-button value="duration">绿灯时长</el-radio-button>
-            <el-radio-button value="rate" checked>稼动率</el-radio-button>
-          </el-radio-group>
-        </div>
         <div class="stack-bar-legend">
           <span class="leg-item"><i class="dot g"></i>运行</span>
           <span class="leg-item"><i class="dot y"></i>待机</span>
           <span class="leg-item"><i class="dot r"></i>停机</span>
           <span class="leg-item"><i class="dot gy"></i>离线</span>
         </div>
-        <div class="stack-bar-chart">
-          <svg viewBox="0 0 1400 280">
-            <g font-size="10" fill="#999" text-anchor="end">
-              <text x="28" y="18">3时</text><text x="28" y="73">3时</text>
-              <text x="28" y="128">2时</text><text x="28" y="183">1时</text><text x="28" y="238">0时</text>
-            </g>
-            <line x1="36" y1="240" x2="1380" y2="240" stroke="#ddd" stroke-width="1"/>
-            <template v-for="(col, ci) in energyStackBarData" :key="ci">
-              <rect :x="200+ci*80" :y="240-col.g*60" width="40" :height="col.g*60" fill="#67c23a" rx="1"/>
-              <rect :x="200+ci*80" :y="240-(col.g+col.y)*60" width="40" :height="col.y*60" fill="#e6a23c" rx="1"/>
-              <rect :x="200+ci*80" :y="240-(col.g+col.y+col.r)*60" width="40" :height="col.r*60" fill="#f56c6c" rx="1"/>
-              <rect :x="200+ci*80" :y="240-(col.g+col.y+col.r+col.gy)*60" width="40" :height="col.gy*60" fill="#909399" rx="1"/>
-              <text :x="220+ci*80" y="258" text-anchor="middle" font-size="9" fill="#666">{{ col.name }}</text>
-            </template>
-          </svg>
+        <div class="stack-bar-chart canvas-stack-bar" style="position:relative;">
+          <canvas ref="utilStackBarCanvasRef" @mousemove="onUtilStackHover" @mouseleave="onUtilStackLeave"></canvas>
+          <div v-if="utilStackHover.show" class="stack-tooltip" :style="{ left: utilStackHover.x + 'px', top: utilStackHover.y + 'px' }">
+            <div class="stt-name">{{ utilStackHover.deviceName }}</div>
+            <div class="stt-row"><i class="dot g"></i>运行<span>{{ utilStackHover.s3Label }}</span></div>
+            <div class="stt-row"><i class="dot y"></i>待机<span>{{ utilStackHover.s2Label }}</span></div>
+            <div class="stt-row"><i class="dot r"></i>停机<span>{{ utilStackHover.s1Label }}</span></div>
+            <div class="stt-row"><i class="dot gy"></i>离线<span>{{ utilStackHover.s0Label }}</span></div>
+          </div>
         </div>
       </div>
     </div>
@@ -695,14 +683,524 @@ function initTsObserver() {
 function destroyTsObserver() { if (tsResizeObs) { tsResizeObs.disconnect(); tsResizeObs = null } }
 onBeforeUnmount(() => destroyTsObserver())
-// ========== 稼动率数据 ==========
+// ========== 稼动率：Canvas多图表 ==========
+const UTIL_COLORS = { 0: '#909399', 1: '#f56c6c', 2: '#e6a23c', 3: '#67c23a' }
+const UTIL_STATUS_LABEL = { 0: '离线', 1: '停机', 2: '待机', 3: '运行' }
+
 const utilQueryMode = ref('day')
-const utilDate = ref('2026-04-28')
+const utilDayDate = ref(new Date().toISOString().slice(0, 10))
+const utilWeekDate = ref(new Date().toISOString().slice(0, 10))
+const utilMonthDate = ref(new Date().toISOString().slice(0, 7))
 const sortMode = ref('rate')
-const energyStackBarData = computed(() => [
-  { name: '磨粉设备1', g: 3.5, y: 0, r: 0, gy: 1 },
-  { name: '磨粉设备2', g: 3.5, y: 0, r: 0, gy: 1 }
-])
+
+// Canvas refs
+const utilTotalPieCanvasRef = ref(null)
+const utilStatusPieCanvasRef = ref(null)
+const utilRankCanvasRef = ref(null)
+const utilStackBarCanvasRef = ref(null)
+let utilResizeObs = null
+
+// 堆积柱状图 hover
+const utilStackHover = reactive({ show: false, x: 0, y: 0, deviceName: '', s3Label: '', s2Label: '', s1Label: '', s0Label: '' })
+let stackHitRects = []
+
+// 接口数据
+const utilData = reactive({
+  currentStatus: {},
+  deviceList: [],
+  summary: {},
+  abnormalRanking: []
+})
+
+// 异常机台排名 hover 状态
+const utilRankHover = reactive({ show: false, x: 0, y: 0, deviceName: '', s1Label: '', s2Label: '' })
+let rankHitRects = []
+
+function disabledMonthFuture(time) {
+  const now = new Date()
+  return time.getFullYear() > now.getFullYear() || (time.getFullYear() === now.getFullYear() && time.getMonth() > now.getMonth())
+}
+
+async function fetchUtilData() {
+  let startDate, endDate
+  if (utilQueryMode.value === 'day') {
+    startDate = utilDayDate.value
+    endDate = utilDayDate.value
+  } else if (utilQueryMode.value === 'week') {
+    const d = new Date(utilWeekDate.value)
+    const day = d.getDay() || 7
+    const mon = new Date(d)
+    mon.setDate(d.getDate() - day + 1)
+    const sun = new Date(mon)
+    sun.setDate(mon.getDate() + 6)
+    startDate = mon.toISOString().slice(0, 10)
+    endDate = sun.toISOString().slice(0, 10)
+  } else {
+    startDate = utilMonthDate.value + '-01'
+    const [y, m] = utilMonthDate.value.split('-')
+    const lastDay = new Date(parseInt(y), parseInt(m), 0).getDate()
+    endDate = utilMonthDate.value + '-' + String(lastDay).padStart(2, '0')
+  }
+  try {
+    const res = await fetch(`/api/energy/eqKwhStatistics?startDate=${startDate}&endDate=${endDate}`)
+    const result = await res.json()
+    if (result.code === 200) {
+      const data = result.data || {}
+      Object.assign(utilData.currentStatus, data.currentStatus || {})
+      utilData.deviceList = data.deviceList || []
+      Object.assign(utilData.summary, data.summary || {})
+      utilData.abnormalRanking = data.abnormalRanking || []
+      await nextTick()
+      drawUtilAll()
+    }
+  } catch (err) {
+    console.error('获取稼动率数据失败:', err)
+  }
+}
+
+function drawUtilAll() { drawUtilTotalPie(); drawUtilStatusPie(); drawUtilRankBar(); drawUtilStackBar(); }
+
+// ---- 总稼动率饼图（普通饼图，不含离线） ----
+function drawUtilTotalPie() {
+  const canvas = utilTotalPieCanvasRef.value; if (!canvas) return
+  const wrap = canvas.parentElement; if (!wrap) return
+  const w = wrap.clientWidth, h = wrap.clientHeight || 220
+  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)
+
+  const summary = utilData.summary
+  const totalDur = summary.totalStatusDuration || {}
+  const s1 = totalDur.status1?.durationSeconds || 0
+  const s2 = totalDur.status2?.durationSeconds || 0
+  const s3 = totalDur.status3?.durationSeconds || 0
+  const total = s1 + s2 + s3
+
+  // 饼图居中偏左，给右侧图例留空间，半径更大
+  const cx = w * 0.4, cy = h / 2, R = Math.min(cx, cy) * 0.85
+
+  if (total <= 0) {
+    ctx.fillStyle = '#c0c4cc'; ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+
+  // 扇区：运行、待机、停机（不含离线）
+  const segs = [
+    { val: s3, color: UTIL_COLORS[3], label: '运行' },
+    { val: s2, color: UTIL_COLORS[2], label: '待机' },
+    { val: s1, color: UTIL_COLORS[1], label: '停机' },
+  ]
+
+  let startA = -Math.PI / 2
+  segs.forEach(seg => {
+    const sweep = (seg.val / total) * Math.PI * 2
+    if (seg.val > 0 && sweep > 0.02) {
+      ctx.beginPath()
+      ctx.moveTo(cx, cy)
+      ctx.arc(cx, cy, R, startA, startA + sweep)
+      ctx.closePath()
+      ctx.fillStyle = seg.color; ctx.fill()
+
+      // 标签：百分比 + 状态名:时长（水平居中）
+      if (sweep > 0.25 || seg.val / total > 0.15) {
+        const midA = startA + sweep / 2
+        const lr = R * 0.6
+        const tx = cx + Math.cos(midA) * lr, ty = cy + Math.sin(midA) * lr
+        const pct = ((seg.val / total) * 100).toFixed(2).replace(/\.?0+$/, '') + '%'
+        const durHrs = (seg.val / 3600).toFixed(2).replace(/\.?0+$/, '')
+        const durLabel = `${seg.label}:${durHrs}时`
+        ctx.fillStyle = '#fff'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+        // 水平显示，不旋转
+        ctx.fillText(pct, tx, ty - 7)
+        ctx.font = '11px sans-serif'
+        ctx.fillText(durLabel, tx, ty + 8)
+      }
+    } else if (seg.val > 0) {
+      ctx.beginPath(); ctx.moveTo(cx, cy)
+      ctx.arc(cx, cy, R, startA, startA + sweep)
+      ctx.closePath()
+      ctx.fillStyle = seg.color; ctx.fill()
+    }
+    startA += sweep
+  })
+
+  // 右侧图例（仅运行/待机/停机），向中间靠拢
+  const legX = cx + R + 20, legStartY = cy - 30
+  ;segs.map(s => ({ c: s.color, l: s.label })).forEach((leg, i) => {
+    const ly = legStartY + i * 24
+    ctx.fillStyle = leg.c; roundRect(ctx, legX, ly - 6, 12, 12, 2); ctx.fill()
+    ctx.fillStyle = '#666'; ctx.font = '12px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'
+    ctx.fillText(leg.l, legX + 18, ly)
+  })
+}
+
+function drawUtilLegend(ctx, cx, ly) {
+  ctx.textAlign = 'center'
+  ;[{ c: UTIL_COLORS[3], l: '运行' }, { c: UTIL_COLORS[2], l: '待机' }, { c: UTIL_COLORS[1], l: '停机' }, { c: UTIL_COLORS[0], l: '离线' }].forEach((leg, i) => {
+    const lx = cx - 60 + i * 40
+    ctx.fillStyle = leg.c; roundRect(ctx, lx - 4, ly - 4, 10, 10, 2); ctx.fill()
+    ctx.fillStyle = '#666'; ctx.font = '11px sans-serif'; ctx.fillText(leg.l, lx + 7, ly + 4)
+  })
+}
+
+// ---- 当前机台运行状态饼图（普通，图例在右侧） ----
+function drawUtilStatusPie() {
+  const canvas = utilStatusPieCanvasRef.value; if (!canvas) return
+  const wrap = canvas.parentElement; if (!wrap) return
+  const w = wrap.clientWidth, h = wrap.clientHeight || 220
+  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)
+
+  const cs = utilData.currentStatus
+  const v3 = parseInt(cs['3']) || 0
+  const v2 = parseInt(cs['2']) || 0
+  const v1 = parseInt(cs['1']) || 0
+  const v0 = parseInt(cs['0']) || 0
+  const total = v0 + v1 + v2 + v3
+
+  // 饼图居中偏左，与总稼动率一致的大小和布局
+  const cx = w * 0.4, cy = h / 2, R = Math.min(cx, cy) * 0.85
+
+  if (total <= 0) {
+    ctx.fillStyle = '#c0c4cc'; ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', cx, cy); return
+  }
+
+  // 全部4个状态
+  const segs = [
+    { val: v3, color: UTIL_COLORS[3], label: '运行' },
+    { val: v2, color: UTIL_COLORS[2], label: '待机' },
+    { val: v1, color: UTIL_COLORS[1], label: '停机' },
+    { val: v0, color: UTIL_COLORS[0], label: '离线' },
+  ]
+
+  let startA = -Math.PI / 2
+  segs.forEach(seg => {
+    const sweep = (seg.val / total) * Math.PI * 2
+    if (seg.val > 0 && sweep > 0.02) {
+      ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, R, startA, startA + sweep); ctx.closePath()
+      ctx.fillStyle = seg.color; ctx.fill()
+
+      // 标签水平显示：状态名X台
+      if (sweep > 0.25 || seg.val / total > 0.15) {
+        const midA = startA + sweep / 2
+        const lr = R * 0.6
+        const tx = cx + Math.cos(midA) * lr, ty = cy + Math.sin(midA) * lr
+        const labelText = `${seg.label}${seg.val}台`
+        ctx.fillStyle = '#fff'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+        ctx.fillText(labelText, tx, ty)
+      }
+    } else if (seg.val > 0) {
+      ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, R, startA, startA + sweep); ctx.closePath()
+      ctx.fillStyle = seg.color; ctx.fill()
+    }
+    startA += sweep
+  })
+
+  // 右侧图例（全部4项）
+  const legX = cx + R + 20, legStartY = cy - 36
+  segs.forEach((leg, i) => {
+    const ly = legStartY + i * 24
+    ctx.fillStyle = leg.color; roundRect(ctx, legX, ly - 6, 12, 12, 2); ctx.fill()
+    ctx.fillStyle = '#666'; ctx.font = '12px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'
+    ctx.fillText(leg.label, legX + 18, ly)
+  })
+}
+
+// ---- 异常机台排名（横向堆叠条形，仅停机+待机） ----
+function drawUtilRankBar() {
+  const canvas = utilRankCanvasRef.value; if (!canvas) return
+  const wrap = canvas.parentElement; if (!wrap) return
+  const w = wrap.clientWidth
+  // 高度按实际数据行数计算，不留多余空白
+  const list = utilData.abnormalRanking
+  const rowCount = Math.min(list.length, 6)
+  const h = Math.max((rowCount === 0 ? 0 : rowCount * 28 + 12 + 20), 60)
+  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)
+
+  rankHitRects = []
+
+  if (!list.length) {
+    ctx.fillStyle = '#c0c4cc'; ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', w / 2, h / 2); return
+  }
+
+  const padL = 100, padT = 12, padB = 20, barH = 22, gap = 6
+  const legW = 55 // 右侧图例宽度
+  const chartW = w - padL - legW - 10
+  const chartH = h - padT - padB
+
+  // X轴基准：取数据中 s1+s2 的最大值，向上取整到漂亮数字
+  const rawMaxSec = Math.max(...list.slice(0, 6).map(d =>
+    (Number(d.status1?.durationSeconds || 0)) + (Number(d.status2?.durationSeconds || 0))), 1)
+  const axisMaxSec = niceAxisMaxHours(rawMaxSec / 3600) * 3600
+
+  // 网格线
+  ctx.strokeStyle = '#f0f0f0'; ctx.lineWidth = 1
+  for (let g = 1; g <= 5; g++) {
+    const gy = padT + chartH * (g / 5)
+    ctx.beginPath(); ctx.moveTo(padL, gy); ctx.lineTo(padL + chartW, gy); ctx.stroke()
+  }
+
+  list.slice(0, 6).forEach((item, i) => {
+    const y = padT + i * (barH + gap)
+    // 设备名
+    ctx.fillStyle = '#303133'; ctx.font = '11px sans-serif'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle'
+    ctx.fillText(item.deviceName || item.dtuSn || '-', padL - 8, y + barH / 2)
+
+    // 背景条（浅灰）
+    ctx.fillStyle = '#fafafa'; roundRect(ctx, padL, y, chartW, barH, 2); ctx.fill()
+
+    // 取停机/待机时长（秒）
+    const s1 = Number(item.status1?.durationSeconds ?? 0) || 0
+    const s2 = Number(item.status2?.durationSeconds ?? 0) || 0
+
+    let px = padL
+    const hitInfo = { x: padL, y, w: 0, h: barH, deviceName: item.deviceName || item.dtuSn || '', s1, s2 }
+    // 先画待机(橙#e6a23c)，再画停机(红#f56c6c)
+    ;[[s2, UTIL_COLORS[2]], [s1, UTIL_COLORS[1]]].forEach(([sec, col]) => {
+      if (sec <= 0) return
+      const sw = Math.max(chartW * (sec / axisMaxSec), 3)
+      ctx.fillStyle = col
+      roundRect(ctx, px, y, sw, barH, 2)
+      ctx.fill()
+      px += sw
+      hitInfo.w = px - padL
+    })
+
+    rankHitRects.push(hitInfo)
+  })
+
+  // X轴时间标签（根据实际最大值动态显示）
+  for (let t = 0; t <= 4; t++) {
+    const valSec = (t / 4) * axisMaxSec
+    const gx = padL + (t / 4) * chartW
+    ctx.fillStyle = '#909399'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'
+    ctx.fillText(formatHoursShort(valSec), gx, h - padB + 6)
+  }
+
+  // 右侧图例（带颜色的方块+文字）
+  const legX = padL + chartW + 12, legStartY = padT + 10
+  ;[
+    { color: UTIL_COLORS[2], label: '待机' },
+    { color: UTIL_COLORS[1], label: '停机' },
+  ].forEach((leg, i) => {
+    const ly = legStartY + i * 22
+    ctx.fillStyle = leg.color
+    roundRect(ctx, legX, ly - 6, 11, 11, 2)
+    ctx.fill()
+    ctx.fillStyle = '#606266'
+    ctx.font = '12px sans-serif'
+    ctx.textAlign = 'left'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(leg.label, legX + 16, ly)
+  })
+}
+
+function onUtilRankHover(e) {
+  const canvas = utilRankCanvasRef.value; if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left, my = e.clientY - rect.top
+  let hit = null
+  for (const r of rankHitRects) {
+    if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) { hit = r; break }
+  }
+  if (hit) {
+    utilRankHover.deviceName = hit.deviceName
+    const totalS12 = hit.s1 + hit.s2
+    const s2Pct = totalS12 > 0 ? ((hit.s2 / totalS12) * 100).toFixed(0) : '0'
+    const s1Pct = totalS12 > 0 ? ((hit.s1 / totalS12) * 100).toFixed(0) : '0'
+    utilRankHover.s2Label = `${tsFormatDuration(hit.s2)}(${s2Pct}%)`
+    utilRankHover.s1Label = `${tsFormatDuration(hit.s1)}(${s1Pct}%)`
+    if (!utilRankHover.show) {
+      utilRankHover.show = true
+      let tx = mx + 12, ty = my - 80
+      if (tx + 180 > rect.width) tx = mx - 190
+      if (ty < 10) ty = my + 16
+      utilRankHover.x = tx; utilRankHover.y = ty
+    }
+  } else {
+    utilRankHover.show = false
+  }
+}
+function onUtilRankLeave() { utilRankHover.show = false }
+
+function formatHoursShort(sec) {
+  if (!sec) return ''
+  sec = Number(sec)
+  const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60)
+  if (h > 0) return h + '.' + String(Math.round(m/60*10)) + '时'
+  if (m > 0) return m + '分'
+  return sec + '秒'
+}
+
+// ---- 设备状态时长堆积柱状图 ----
+function drawUtilStackBar() {
+  const canvas = utilStackBarCanvasRef.value; if (!canvas) return
+  const wrap = canvas.parentElement; if (!wrap) return
+  const w = wrap.clientWidth, h = wrap.clientHeight || 260
+  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)
+
+  let list = [...utilData.deviceList]
+  if (sortMode.value === 'rate') {
+    list.sort((a, b) => (b.availabilityRateValue || 0) - (a.availabilityRateValue || 0))
+  } else {
+    list.sort((a, b) => ((b.status3?.durationSeconds||0)) - ((a.status3?.durationSeconds||0)))
+  }
+
+  stackHitRects = []
+  if (!list.length) {
+    ctx.fillStyle = '#c0c4cc'; ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', w / 2, h / 2); return
+  }
+
+  const padL = 44, padR = 14, padT = 22, padB = 24 // padB给柱子下方设备名留空间
+  const chartW = w - padL - padR
+  const chartH = h - padT - padB
+  const maxCols = Math.min(list.length, 12)
+  const barW = Math.min(Math.max(chartW / maxCols * 0.55, 24), 50)
+  const totalBarsW = barW * list.length
+  const barGap = list.length > 1 ? (chartW - totalBarsW) / (list.length + 1) : chartW / 2 - barW / 2
+
+  // Y轴：自动找合适的最大值和刻度
+  const rawMaxHrs = Math.max(...list.map(d => (d.totalDurationSeconds || 0) / 3600), 1)
+  const yMax = niceAxisMax(rawMaxHrs)
+  const yTicks = 5
+
+  // Y轴网格和刻度
+  ctx.strokeStyle = '#ebeef5'; ctx.lineWidth = 1; ctx.font = '10px 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 * 60).toFixed(0) + '分', padL - 5, vy)
+  }
+
+  // 基线
+  ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1
+  ctx.beginPath(); ctx.moveTo(padL, padT + chartH); ctx.lineTo(w - padR, padT + chartH); ctx.stroke()
+
+  const scale = chartH / yMax
+
+  list.forEach((item, i) => {
+    const bx = padL + barGap + i * (barW + barGap)
+    const s0s = item.status0?.durationSeconds || 0
+    const s1s = item.status1?.durationSeconds || 0
+    const s2s = item.status2?.durationSeconds || 0
+    const s3s = item.status3?.durationSeconds || 0
+
+    let by = padT + chartH
+    // 从下到上：运行、待机、停机、离线
+    ;[
+      { sec: s3s, color: UTIL_COLORS[3] },
+      { sec: s2s, color: UTIL_COLORS[2] },
+      { sec: s1s, color: UTIL_COLORS[1] },
+      { sec: s0s, color: UTIL_COLORS[0] },
+    ].reverse().forEach(seg => {
+      const sh = seg.sec / 3600 * scale
+      by -= sh
+      if (sh > 0.5) { ctx.fillStyle = seg.color; roundRect(ctx, bx, by, barW, sh, 0); ctx.fill() }
+    })
+
+    // 设备名：水平显示在柱子正下方
+    ctx.fillStyle = '#606266'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'
+    const dn = item.deviceName || item.dtuSn || ''
+    // 截取后几位，确保不超出柱子宽度
+    ctx.fillText(dn.length > 12 ? dn.slice(-12) : dn, bx + barW / 2, padT + chartH + 6)
+
+    // 存储hover区域
+    stackHitRects.push({ x: bx, y: padT, w: barW, h: chartH, deviceName: dn, s0: s0s, s1: s1s, s2: s2s, s3: s3s })
+  })
+}
+
+function onUtilStackHover(e) {
+  const canvas = utilStackBarCanvasRef.value; if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const wrap = canvas.parentElement
+  const mx = e.clientX - rect.left, my = e.clientY - rect.top
+  let hit = null
+  for (const r of stackHitRects) {
+    if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) { hit = r; break }
+  }
+  if (hit) {
+    utilStackHover.deviceName = hit.deviceName
+    const total = hit.s0 + hit.s1 + hit.s2 + hit.s3
+    utilStackHover.s3Label = `${tsFormatDuration(hit.s3)}${total > 0 ? '(' + ((hit.s3/total)*100).toFixed(1) + '%)' : ''}`
+    utilStackHover.s2Label = `${tsFormatDuration(hit.s2)}${total > 0 ? '(' + ((hit.s2/total)*100).toFixed(1) + '%)' : ''}`
+    utilStackHover.s1Label = `${tsFormatDuration(hit.s1)}${total > 0 ? '(' + ((hit.s1/total)*100).toFixed(1) + '%)' : ''}`
+    utilStackHover.s0Label = `${tsFormatDuration(hit.s0)}${total > 0 ? '(' + ((hit.s0/total)*100).toFixed(1) + '%)' : ''}`
+    // 定位：优先显示在柱子上方偏右，超出则改到下方或左侧
+    const tipW = 200, tipH = 130
+    let tx = mx + 14, ty = my - tipH - 8
+    if (tx + tipW > rect.width - 4) tx = mx - tipW - 6
+    if (ty < 4) ty = my + 14
+    utilStackHover.x = Math.max(4, tx); utilStackHover.y = Math.max(4, ty)
+    utilStackHover.show = true
+  } else {
+    utilStackHover.show = false
+  }
+}
+function onUtilStackLeave() { utilStackHover.show = false }
+
+// 计算合适的Y轴最大值（向上取整到整数，方便展示）
+function niceAxisMax(val) {
+  if (val <= 0) return 10
+  let max = Math.ceil(val)
+  if (max <= 1) return 1
+  if (max <= 2) return 2
+  if (max <= 5) return 5
+  if (max <= 10) return 10
+  if (max <= 12) return 12
+  if (max <= 15) return 15
+  if (max <= 20) return 20
+  return Math.ceil(max / 5) * 5
+}
+
+// X轴小时基准：根据实际最大小时数取整（支持月查询的大数值）
+function niceAxisMaxHours(hrs) {
+  if (hrs <= 0) return 12
+  const m = Math.ceil(hrs)
+  if (m <= 6) return 6
+  if (m <= 12) return 12
+  if (m <= 24) return 24
+  if (m <= 48) return 48
+  if (m <= 72) return 72
+  if (m <= 120) return 120
+  if (m <= 168) return 168  // 一周
+  if (m <= 336) return 336  // 两周
+  if (m <= 720) return 720  // 30天
+  return Math.ceil(m / 120) * 120
+}
+
+// 稼动率 tab 初始化
+watch(currentStatus, async (val) => {
+  if (val === 'utilization') {
+    await nextTick()
+    initUtilObserver()
+    fetchUtilData()
+  } else {
+    destroyUtilObserver()
+  }
+})
+
+function initUtilObserver() {
+  destroyUtilObserver()
+  utilResizeObs = new ResizeObserver(() => { if (currentStatus.value === 'utilization') drawUtilAll() })
+  const el = document.querySelector('.util-view')
+  if (el) utilResizeObs.observe(el)
+}
+function destroyUtilObserver() { if (utilResizeObs) { utilResizeObs.disconnect(); utilResizeObs = null } }
+onBeforeUnmount(() => destroyUtilObserver())
 // ========== 能耗效率数据 ==========
 const effQueryMode = ref('day')
@@ -727,10 +1225,12 @@ const effLine2Points = computed(() => {
 <style scoped>
 .energy-page {
   min-height: 100%;
-  height: calc(100vh - 0px);
+  height: 100vh;
   display: flex;
   flex-direction: column;
   background-color: #f0f2f5;
+  overflow: hidden;
+  min-width: 1200px;
 }
 .device-grid {
   flex: 1;
@@ -1134,10 +1634,63 @@ const effLine2Points = computed(() => {
 .gtt-val { color:#eef1f7; font-weight:500; display:flex; align-items:center; gap:4px; }
 .gtt-highlight { font-weight:bold; }
+/* 异常机台排名 hover tooltip */
+.rank-tooltip {
+  position: absolute;
+  background: #fff;
+  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.15);
+  border: 1px solid #ebeef5;
+}
+.rtt-name {
+  font-size: 13px; font-weight:bold; color:#303133; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #ebeef5;
+}
+.rtt-row {
+  display:flex; align-items:center; gap:8px; line-height:1.8; font-size:12px; color:#606266;
+}
+.rtt-row i { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
+.rtt-row .dot.y { background:#e6a23c; }
+.rtt-row .dot.r { background:#f56c6c; }
+.rtt-row span { margin-left:auto; color:#f56c6c; font-weight:500; }
+.rtt-row span:first-of-type { color:#67c23a; }
+
+/* 堆积柱状图 hover tooltip */
+.stack-tooltip {
+  position: absolute;
+  background: #fff;
+  border-radius: 6px;
+  padding: 10px 14px;
+  min-width: 180px;
+  z-index: 200;
+  pointer-events: none;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+  border: 1px solid #ebeef5;
+}
+.stt-name {
+  font-size: 13px; font-weight:bold; color:#303133; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #ebeef5;
+}
+.stt-row {
+  display:flex; align-items:center; gap:8px; line-height:1.8; font-size:12px; color:#606266;
+}
+.stt-row i { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
+.stt-row .dot.g { background:#67c23a; }
+.stt-row .dot.y { background:#e6a23c; }
+.stt-row .dot.r { background:#f56c6c; }
+.stt-row .dot.gy { background:#909399; }
+.stt-row span { margin-left:auto; color:#303133; font-weight:500; }
+
 /* ========== 稼动率 ========== */
 .util-view {
   background: #f5f7fa;
-  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
 }
 .util-toolbar {
   background: #fff;
@@ -1152,62 +1705,50 @@ const effLine2Points = computed(() => {
 }
 .util-top-charts {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   padding: 14px 20px;
+  flex-shrink: 0;
 }
 .pie-card, .bar-card {
   background: #fff;
-  border-radius: 6px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.06);
   padding: 14px;
   display: flex;
   flex-direction: column;
+  min-height: 0;
+  max-height: 280px;
+  overflow: hidden;
 }
 .pie-title {
   font-size: 13px;
   font-weight: bold;
   color: #333;
   margin-bottom: 10px;
+  flex-shrink: 0;
 }
-.pie-chart-svg {
+.pie-canvas-wrap {
   flex: 1;
+  min-height: 0;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 180px;
-  position: relative;
 }
-.pie-chart-svg svg { max-width: 200px; max-height: 180px; }
-.pie-empty-text {
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translate(-50%,-50%);
-  font-size: 14px; color: #ccc;
+.pie-canvas-wrap canvas {
+  display: block;
+  max-width: 100%;
 }
-.pie-legend {
-  margin-top: 8px;
-  display: flex;
-  gap: 10px;
-  font-size: 11px;
-  color: #666;
-  line-height: 1.5;
-}
-.center-leg { justify-content: center; }
-.leg-item { display: inline-flex; align-items: center; gap: 3px; }
-.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
-.dot.g { background: #67c23a; }
-.dot.y { background: #e6a23c; }
-.dot.r { background: #f56c6c; }
-.dot.gy { background: #909399; }
-
-.abnormal-list { flex: 1; overflow-y: auto; }
-.abn-footer {
-  margin-top: 6px;
-  font-size: 10px;
-  color: #bbb;
-  text-align: right;
+.bar-canvas-wrap {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+.bar-canvas-wrap canvas {
+  display: block;
+  width: 100%;
 }
+
 .abn-legend {
   margin-top: 4px;
   font-size: 11px;
@@ -1217,12 +1758,21 @@ const effLine2Points = computed(() => {
   justify-content: flex-end;
 }
+.rank-leg-inline {
+  display:flex; align-items:center; gap:8px; font-size:11px; color:#666; font-weight:normal;
+}
+.rank-leg-inline i { width:10px;height:10px;border-radius:2px;display:inline-block; }
+
 .util-bottom-chart {
   margin: 0 20px 14px;
   background: #fff;
-  border-radius: 6px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.06);
   padding: 14px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: visible;
 }
 .stack-bar-toolbar {
   display: flex;
@@ -1231,6 +1781,7 @@ const effLine2Points = computed(() => {
   margin-bottom: 10px;
   font-size: 13px;
   color: #666;
+  flex-shrink: 0;
 }
 .stack-bar-legend {
   display: flex;
@@ -1238,11 +1789,23 @@ const effLine2Points = computed(() => {
   margin-bottom: 8px;
   font-size: 12px;
   color: #666;
+  flex-shrink: 0;
 }
-.stack-bar-chart {
-  overflow-x: auto;
+.leg-item { display:flex; align-items:center; gap:4px; }
+.leg-item i { width:10px; height:10px; border-radius:2px; display:inline-block; }
+.leg-item .dot.g { background:#67c23a; }
+.leg-item .dot.y { background:#e6a23c; }
+.leg-item .dot.r { background:#f56c6c; }
+.leg-item .dot.gy { background:#909399; }
+.stack-bar-chart.canvas-stack-bar {
+  flex: 1;
+  min-height: 0;
+  overflow: visible;
+}
+.stack-bar-chart canvas {
+  display: block;
+  width: 100%;
 }
-.stack-bar-chart svg { min-width: 100%; }
 /* ========== 能耗效率 ========== */
 .eff-view {