commit：H5开发联调

 <template>
 <template>
-  <div class="app-container">
+  <div v-if="isH5Route" class="h5-container">
+    <router-view />
+  </div>
+  <div v-else class="app-container">
     <el-container>
     <el-container>
       <el-aside width="180px" class="sidebar">
       <el-aside width="180px" class="sidebar">
         <div class="logo-area">
         <div class="logo-area">
@@ -30,17 +33,22 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { computed, ref, provide } from 'vue'
+import { computed, provide, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
+import { setCorpCode } from './config/api.js'
 
 
 const route = useRoute()
 const route = useRoute()
 const router = useRouter()
 const router = useRouter()
 const currentRoute = computed(() => route.path)
 const currentRoute = computed(() => route.path)
+const isH5Route = computed(() => Boolean(route.meta?.h5))
 
 
 // 从URL获取corpCode，全局共享（hash模式下参数在#后面，需用route.query）
 // 从URL获取corpCode，全局共享（hash模式下参数在#后面，需用route.query）
 // 使用computed确保路由切换时corpCode始终同步
 // 使用computed确保路由切换时corpCode始终同步
 const corpCode = computed(() => route.query.corpCode || '')
 const corpCode = computed(() => route.query.corpCode || '')
 provide('corpCode', corpCode)
 provide('corpCode', corpCode)
+watchEffect(() => {
+  setCorpCode(corpCode.value)
+})
 
 
 // 给URL拼接corpCode
 // 给URL拼接corpCode
 function withCorpCode(path) {
 function withCorpCode(path) {
@@ -56,6 +64,10 @@ function navigateTo(path) {
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
+.h5-container {
+  min-height: 100vh;
+  background-color: #f5f6f8;
+}
 .app-container {
 .app-container {
   height: 100vh;
   height: 100vh;
   overflow: hidden;
   overflow: hidden;

+<template>
+  <div class="eff-h5">
+    <div class="toolbar">
+      <div class="left">
+        <el-radio-group v-model="effQueryMode" size="small" @change="fetchEffData">
+          <el-radio-button value="hour">时查询</el-radio-button>
+          <el-radio-button value="day">日查询</el-radio-button>
+          <el-radio-button value="month">月查询</el-radio-button>
+        </el-radio-group>
+      </div>
+      <el-button type="primary" size="small" :loading="loading" @click="fetchEffData">查询</el-button>
+    </div>
+
+    <div class="toolbar" style="margin-top: 8px;">
+      <div class="left">
+        <el-date-picker
+          v-if="effQueryMode === 'hour'"
+          v-model="effHourDate"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择日期"
+          size="small"
+          style="width: 160px;"
+          :disabled-date="disabledDateFuture"
+          @change="fetchEffData"
+        />
+        <el-date-picker
+          v-else-if="effQueryMode === 'day'"
+          v-model="effDayDate"
+          type="month"
+          value-format="YYYY-MM"
+          placeholder="选择月份"
+          size="small"
+          style="width: 160px;"
+          :disabled-date="disabledMonthFuture"
+          @change="fetchEffData"
+        />
+        <el-date-picker
+          v-else
+          v-model="effMonthDate"
+          type="year"
+          value-format="YYYY"
+          placeholder="选择年份"
+          size="small"
+          style="width: 140px;"
+          :disabled-date="disabledYearFuture"
+          @change="fetchEffData"
+        />
+      </div>
+    </div>
+
+    <div class="toolbar" style="margin-top: 8px;">
+      <div class="left" style="width: 100%;">
+        <el-select
+          v-model="effDeviceFilter"
+          size="small"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="2"
+          placeholder="选择设备（可多选）"
+          style="width: 100%;"
+          @change="onDeviceFilterChange"
+        >
+          <el-option v-for="dev in effAllDevices" :key="dev.dtuSn" :label="dev.deviceName || dev.dtuSn" :value="dev.dtuSn" />
+        </el-select>
+      </div>
+    </div>
+
+    <div class="toolbar" style="margin-top: 8px;">
+      <div class="left">
+        <el-radio-group v-model="viewMode" size="small" @change="onViewChange">
+          <el-radio-button value="chart">图表</el-radio-button>
+          <el-radio-button value="table">表格</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="right">
+        <span v-if="totalKwh != null" class="total">总用电量 {{ formatKwh(totalKwh) }} kw·h</span>
+      </div>
+    </div>
+
+    <div class="section">
+      <template v-if="viewMode === 'chart'">
+        <div ref="chartWrapRef" class="chart-wrap">
+          <canvas ref="chartCanvasRef" class="chart-canvas" @pointerdown="onChartTap"></canvas>
+        </div>
+        <div v-if="chartTip.show" class="tip-card">
+          <div class="tip-title">{{ chartTip.timeLabel || '-' }}</div>
+          <div v-for="(d, i) in chartTip.devices" :key="i" class="tip-line">
+            <i :style="{ background: d.color }"></i>
+            <span class="tlabel">{{ d.name }}</span>
+            <span class="tval">{{ formatKwh(d.value) }}</span>
+          </div>
+        </div>
+        <el-empty v-if="!loading && effDeviceList.length === 0" description="暂无数据" />
+      </template>
+
+      <template v-else>
+        <div class="table-scroll">
+          <table v-if="tableColumns.length > 0 && tableRows.length > 0" class="table">
+            <thead>
+              <tr>
+                <th class="col-name">设备名称</th>
+                <th v-for="(col, ci) in tableColumns" :key="ci">{{ col.label }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, ri) in tableRows" :key="ri">
+                <td class="td-name">{{ row.deviceName }}</td>
+                <td v-for="(col, ci) in tableColumns" :key="ci">{{ row.values[ci] != null ? formatKwh(row.values[ci]) : '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <el-empty v-else-if="!loading" description="暂无数据" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const EFF_LINE_COLORS = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4',
+  '#ea7ccc'
+]
+
+const viewMode = ref('chart')
+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(String(new Date().getFullYear()))
+const effDeviceFilter = ref([])
+
+const loading = ref(false)
+const totalKwh = ref(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))
+})
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+function disabledMonthFuture(time) {
+  const now = new Date()
+  return time.getFullYear() > now.getFullYear() || (time.getFullYear() === now.getFullYear() && time.getMonth() > now.getMonth())
+}
+function disabledYearFuture(time) {
+  return time.getFullYear() > new Date().getFullYear()
+}
+
+function formatKwh(v) {
+  if (v == null) return '0'
+  const n = Number(v)
+  if (!Number.isFinite(n)) return '0'
+  return n.toFixed(n % 1 === 0 ? 0 : 2)
+}
+
+async function fetchEffData() {
+  loading.value = true
+  let startDate = ''
+  let endDate = ''
+  let type = 1
+  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
+    startDate = effMonthDate.value + '-01-01'
+    endDate = effMonthDate.value + '-12-31'
+  }
+  try {
+    const res = await apiFetch(`/api/energy/eqKwhByType?startDate=${encodeURIComponent(startDate)}&endDate=${encodeURIComponent(endDate)}&type=${type}`)
+    const data = await res.json()
+    if (data?.code !== 200) throw new Error('bad response')
+    effDataList.value = data.list || []
+    totalKwh.value = data.grandTotalKwh ?? data.totalKwh ?? null
+
+    if (effDeviceFilter.value.length) {
+      effDeviceFilter.value = effDeviceFilter.value.filter(sn => effDataList.value.some(d => d.dtuSn === sn))
+    }
+    chartTip.show = false
+    await nextTick()
+    drawChart()
+  } catch (e) {
+    ElMessage.error('获取数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function onDeviceFilterChange() {
+  chartTip.show = false
+  nextTick(() => drawChart())
+}
+
+function onViewChange() {
+  chartTip.show = false
+  nextTick(() => drawChart())
+}
+
+const tableColumns = computed(() => {
+  const list = effDeviceList.value
+  if (!list.length) return []
+  if (effQueryMode.value === 'hour') {
+    if (!list[0].kwhList || !list[0].kwhList.length) return []
+    return list[0].kwhList.map((k, i) => ({ label: k.date || '', key: i }))
+  }
+  if (effQueryMode.value === 'day') {
+    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 }))
+  }
+  if (!list[0].monthlyData || !list[0].monthlyData.length) return []
+  return list[0].monthlyData.map((m, i) => ({ label: m.label || '', key: i }))
+})
+
+const tableRows = 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 < tableColumns.value.length) values.push(null)
+    return { deviceName: dev.deviceName || dev.dtuSn, values }
+  })
+})
+
+const chartCanvasRef = ref(null)
+const chartWrapRef = ref(null)
+let hitAreas = []
+
+const chartTip = reactive({ show: false, timeLabel: '', devices: [] })
+
+const dpr = window.devicePixelRatio || 1
+function setupCanvas(canvas, cssW, cssH) {
+  canvas.style.width = cssW + 'px'
+  canvas.style.height = cssH + 'px'
+  canvas.width = Math.round(cssW * dpr)
+  canvas.height = Math.round(cssH * dpr)
+  const ctx = canvas.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return { ctx, W: cssW, H: cssH }
+}
+
+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 drawChart() {
+  const canvas = chartCanvasRef.value
+  const wrap = chartWrapRef.value
+  if (!canvas || !wrap) return
+  const list = effDeviceList.value
+  const cssW = Math.max(320, wrap.clientWidth)
+  const cssH = 360
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+  hitAreas = []
+  if (!list.length) return
+
+  const padL = 44
+  const padR = 16
+  const padT = 18
+  const padB = 44
+  const chartW = W - padL - padR
+  const chartH = H - padT - padB
+
+  let xLabels = []
+  const xDataMap = {}
+  if (effQueryMode.value === 'hour') {
+    xLabels = (list[0].kwhList || []).map(k => k.date || '')
+    list.forEach(dev => (xDataMap[dev.dtuSn] = (dev.kwhList || []).map(k => Number(k.value) || 0)))
+  } else if (effQueryMode.value === 'day') {
+    xLabels = (list[0].dailyData || []).map(d => (d.date ? d.date.slice(5) : ''))
+    list.forEach(dev => (xDataMap[dev.dtuSn] = (dev.dailyData || []).map(d => Number(d.totalKwh) || 0)))
+  } else {
+    xLabels = (list[0].monthlyData || []).map(m => m.label || '')
+    list.forEach(dev => (xDataMap[dev.dtuSn] = (dev.monthlyData || []).map(m => Number(m.totalKwh) || 0)))
+  }
+  const pointCount = xLabels.length
+  if (!pointCount) return
+
+  let maxY = 1
+  list.forEach(dev => {
+    ;(xDataMap[dev.dtuSn] || []).forEach(v => {
+      if (v > maxY) maxY = v
+    })
+  })
+  const yMax = niceEffYMax(maxY)
+  const yTicks = 5
+
+  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 y = padT + chartH - (i / yTicks) * chartH
+    const val = (i / yTicks) * yMax
+    ctx.beginPath()
+    ctx.moveTo(padL, y)
+    ctx.lineTo(W - padR, y)
+    ctx.stroke()
+    ctx.fillStyle = '#94a3b8'
+    ctx.fillText(val >= 1 ? val.toFixed(0) : val.toFixed(1), padL - 6, y)
+  }
+  ctx.strokeStyle = '#ddd'
+  ctx.lineWidth = 1.5
+  ctx.beginPath()
+  ctx.moveTo(padL, padT + chartH)
+  ctx.lineTo(W - padR, padT + chartH)
+  ctx.stroke()
+  ctx.beginPath()
+  ctx.moveTo(padL, padT)
+  ctx.lineTo(padL, padT + chartH)
+  ctx.stroke()
+
+  const stepX = chartW / Math.max(pointCount - 1, 1)
+  const xLabelStep = pointCount > 20 ? Math.ceil(pointCount / 12) : 1
+  ctx.fillStyle = '#64748b'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'top'
+  xLabels.forEach((lbl, i) => {
+    if (i % xLabelStep === 0 || i === pointCount - 1) {
+      const x = padL + i * stepX
+      ctx.fillText(lbl, x, padT + chartH + 10)
+    }
+  })
+
+  for (let i = 0; i < pointCount; i++) {
+    hitAreas.push({ x: padL + i * stepX - stepX / 2, w: stepX, index: i, label: xLabels[i] })
+  }
+
+  const yScale = chartH / yMax
+  hitAreas.forEach(a => (a.devs = []))
+  list.forEach((dev, devIdx) => {
+    const color = EFF_LINE_COLORS[devIdx % EFF_LINE_COLORS.length]
+    const vals = xDataMap[dev.dtuSn] || []
+    vals.forEach((v, i) => {
+      hitAreas[i].devs.push({ name: dev.deviceName || dev.dtuSn, value: Number(v) || 0, color })
+    })
+    if (!vals.length) return
+    const points = vals.map((v, i) => ({
+      x: padL + i * stepX,
+      y: padT + chartH - (Number(v) || 0) * yScale
+    }))
+    ctx.strokeStyle = color
+    ctx.lineWidth = 2
+    ctx.lineJoin = 'round'
+    ctx.beginPath()
+    ctx.moveTo(points[0].x, points[0].y)
+    for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y)
+    ctx.stroke()
+    points.forEach(p => {
+      ctx.fillStyle = '#fff'
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, 3, 0, Math.PI * 2)
+      ctx.fill()
+      ctx.strokeStyle = color
+      ctx.lineWidth = 1.4
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, 3, 0, Math.PI * 2)
+      ctx.stroke()
+    })
+  })
+}
+
+function onChartTap(e) {
+  const canvas = chartCanvasRef.value
+  if (!canvas || !hitAreas.length) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  let hit = null
+  for (const a of hitAreas) {
+    if (mx >= a.x && mx <= a.x + a.w) {
+      hit = a
+      break
+    }
+  }
+  if (!hit || !hit.devs) {
+    chartTip.show = false
+    return
+  }
+  chartTip.timeLabel = hit.label || ''
+  chartTip.devices = [...hit.devs].sort((a, b) => (b.value || 0) - (a.value || 0))
+  chartTip.show = true
+}
+
+let ro = null
+onMounted(() => {
+  fetchEffData()
+  if ('ResizeObserver' in window) {
+    ro = new ResizeObserver(() => nextTick(() => drawChart()))
+    if (chartWrapRef.value) ro.observe(chartWrapRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+</script>
+
+<style scoped>
+.eff-h5 {
+  padding: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+}
+
+.total {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-top: 10px;
+}
+
+.chart-wrap {
+  width: 100%;
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 360px;
+  display: block;
+}
+
+.tip-card {
+  margin-top: 10px;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(64, 158, 255, 0.06);
+  border: 1px solid rgba(64, 158, 255, 0.18);
+}
+
+.tip-title {
+  font-weight: 800;
+  color: #0f172a;
+  margin-bottom: 6px;
+}
+
+.tip-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #334155;
+  line-height: 1.6;
+}
+
+.tip-line i {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.tlabel {
+  color: #64748b;
+}
+
+.tval {
+  margin-left: auto;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.table th,
+.table td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 8px 10px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.col-name,
+.td-name {
+  position: sticky;
+  left: 0;
+  background: #fff;
+  text-align: left !important;
+  min-width: 120px;
+  max-width: 160px;
+}
+
+.table thead th {
+  position: sticky;
+  top: 0;
+  background: #f8fafc;
+  z-index: 1;
+}
+
+.table thead .col-name {
+  z-index: 2;
+}
+</style>

+<template>
+  <div class="energy-realtime">
+    <div class="h5-search">
+      <el-input
+        v-model="searchKeyword"
+        placeholder="输入设备名称搜索"
+        clearable
+        @keyup.enter="onSearch"
+        @clear="onSearch"
+      >
+        <template #append>
+          <el-button :loading="loading" @click="onSearch">搜索</el-button>
+        </template>
+      </el-input>
+    </div>
+
+    <div class="h5-filters">
+      <button
+        v-for="item in filterItems"
+        :key="item.key"
+        :class="['filter-chip', { active: runStatusFilter === item.key }]"
+        type="button"
+        @click="onFilter(item.key)"
+      >
+        <span class="dot" :style="{ backgroundColor: item.dotColor }"></span>
+        <span class="label">{{ item.label }}</span>
+        <span class="count">{{ item.count }}</span>
+      </button>
+    </div>
+
+    <el-empty v-if="!loading && deviceList.length === 0" description="暂无设备" />
+
+    <div v-for="device in deviceList" :key="device.id" class="device-card">
+      <div class="card-top">
+        <div class="device-name">{{ device.name }}</div>
+        <div class="device-status">
+          <span class="status-dot" :style="{ backgroundColor: device.statusColor }"></span>
+          <span class="status-text">{{ device.statusLabel }}</span>
+        </div>
+      </div>
+
+      <div class="card-body">
+        <div class="row">
+          <div class="k">用电量</div>
+          <div class="v">{{ device.evalue }} kw·h</div>
+        </div>
+        <div class="row">
+          <div class="k">{{ device.statusLabel }}时长</div>
+          <div class="v">{{ device.duration }}</div>
+        </div>
+      </div>
+
+      <div class="card-actions">
+        <el-button size="small" @click="goRunStatus(device)">运行状态</el-button>
+        <el-button size="small" type="primary" @click="goUsage(device)">用时用电</el-button>
+      </div>
+    </div>
+
+    <div class="h5-footer">
+      <el-button
+        v-if="canLoadMore"
+        type="primary"
+        :loading="loadingMore"
+        style="width: 100%;"
+        @click="loadMore"
+      >
+        加载更多
+      </el-button>
+      <div v-else-if="deviceList.length > 0" class="no-more">没有更多了</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const route = useRoute()
+const router = useRouter()
+
+const searchKeyword = ref('')
+const runStatusFilter = ref('')
+const currentPage = ref(1)
+const PAGE_SIZE = 20
+
+const deviceList = ref([])
+const totalDevices = ref(0)
+const loading = ref(false)
+const loadingMore = ref(false)
+
+const totalCounts = reactive({ all: 0, offline: 0, stop: 0, standby: 0, run: 0 })
+const canLoadMore = computed(() => deviceList.value.length < totalDevices.value)
+
+const STATUS_LABEL_MAP = { '0': '离线', '1': '停机', '2': '待机', '3': '运行' }
+const STATUS_COLOR_MAP = { '0': '#95a5a6', '1': '#e74c3c', '2': '#67c23a', '3': '#3498db' }
+
+function toDeviceViewModel(item) {
+  const runStatus = String(item.runStatus ?? '0')
+  return {
+    id: item.id,
+    name: item.deviceName || item.dtuSn,
+    dtuSn: item.dtuSn || item.deviceSn || item.sn || '',
+    evalue: parseFloat(item.evalue) || 0,
+    duration: item.duration || '0秒',
+    runStatus,
+    statusLabel: STATUS_LABEL_MAP[runStatus] || '未知',
+    statusColor: STATUS_COLOR_MAP[runStatus] || '#95a5a6',
+    _raw: item
+  }
+}
+
+const filterItems = computed(() => [
+  { key: '', label: '全部', count: `${totalCounts.all}台`, dotColor: '#2c3e50' },
+  { key: '3', label: '运行', count: `${totalCounts.run}台`, dotColor: STATUS_COLOR_MAP['3'] },
+  { key: '2', label: '待机', count: `${totalCounts.standby}台`, dotColor: STATUS_COLOR_MAP['2'] },
+  { key: '1', label: '停机', count: `${totalCounts.stop}台`, dotColor: STATUS_COLOR_MAP['1'] },
+  { key: '0', label: '离线', count: `${totalCounts.offline}台`, dotColor: STATUS_COLOR_MAP['0'] }
+])
+
+async function fetchStats() {
+  const res = await apiFetch('/api/energy/stats')
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const data = await res.json()
+  totalCounts.all = data.total || 0
+  totalCounts.offline = parseInt(data['0']) || 0
+  totalCounts.stop = parseInt(data['1']) || 0
+  totalCounts.standby = parseInt(data['2']) || 0
+  totalCounts.run = parseInt(data['3']) || 0
+}
+
+async function fetchDeviceList({ append }) {
+  const params = new URLSearchParams({
+    pageNo: String(currentPage.value),
+    pageSize: String(PAGE_SIZE),
+    projectState: '1'
+  })
+  if (searchKeyword.value) params.append('deviceName', searchKeyword.value)
+  if (runStatusFilter.value !== '') params.append('runStatus', runStatusFilter.value)
+
+  const res = await apiFetch(`/api/energy/list?${params}`)
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const data = await res.json()
+  const mapped = (data.list || []).map(toDeviceViewModel)
+  deviceList.value = append ? deviceList.value.concat(mapped) : mapped
+  totalDevices.value = data.total || 0
+}
+
+async function refresh({ append }) {
+  try {
+    if (append) loadingMore.value = true
+    else loading.value = true
+    await Promise.all([fetchDeviceList({ append }), fetchStats()])
+  } catch (e) {
+    ElMessage.error('获取数据失败，请检查后端接口或代理配置')
+    console.warn(e)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function onSearch() {
+  currentPage.value = 1
+  refresh({ append: false })
+}
+
+function onFilter(key) {
+  if (runStatusFilter.value === key) return
+  runStatusFilter.value = key
+  currentPage.value = 1
+  refresh({ append: false })
+}
+
+function loadMore() {
+  if (!canLoadMore.value || loading.value || loadingMore.value) return
+  currentPage.value += 1
+  refresh({ append: true })
+}
+
+function goRunStatus(device) {
+  router.push({
+    path: '/energy-h5/run-status',
+    query: { ...route.query, dtuSn: device.dtuSn || '', deviceName: device.name || '' }
+  })
+}
+
+function goUsage(device) {
+  router.push({
+    path: '/energy-h5/usage',
+    query: { ...route.query, dtuSn: device.dtuSn || '', deviceName: device.name || '' }
+  })
+}
+
+onMounted(() => {
+  refresh({ append: false })
+})
+</script>
+
+<style scoped>
+.h5-search :deep(.el-input__wrapper) {
+  border-radius: 10px;
+}
+
+.h5-filters {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-top: 10px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #fff;
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: #334155;
+  white-space: nowrap;
+}
+
+.filter-chip.active {
+  border-color: rgba(64, 158, 255, 0.45);
+  background: rgba(64, 158, 255, 0.08);
+  color: #1d4ed8;
+}
+
+.filter-chip .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.filter-chip .count {
+  opacity: 0.75;
+}
+
+.device-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-bottom: 10px;
+}
+
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.device-name {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  line-height: 1.25;
+  word-break: break-all;
+}
+
+.device-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #334155;
+  flex: 0 0 auto;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.card-body {
+  margin-top: 10px;
+  display: grid;
+  gap: 6px;
+}
+
+.card-actions {
+  margin-top: 10px;
+  display: flex;
+  gap: 10px;
+}
+
+.card-actions :deep(.el-button) {
+  flex: 1 1 auto;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.row .k {
+  color: #64748b;
+}
+
+.row .v {
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.h5-footer {
+  padding: 10px 0 18px;
+}
+
+.no-more {
+  text-align: center;
+  color: #94a3b8;
+  font-size: 12px;
+  padding: 8px 0;
+}
+</style>

+<template>
+  <div class="ts-h5">
+    <div class="toolbar">
+      <div class="left">
+        <div class="mode">日查询</div>
+        <el-date-picker
+          v-model="tsDate"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择日期"
+          size="small"
+          style="width: 150px;"
+          :disabled-date="disabledDateFuture"
+          @change="onDateChange"
+        />
+      </div>
+      <el-button type="primary" size="small" :loading="loading" @click="resetAndFetch">查询</el-button>
+    </div>
+
+    <div class="canvas-card">
+      <div class="gantt-row">
+        <div class="fixed-col">
+          <canvas ref="fixedCanvasRef" class="fixed-canvas"></canvas>
+        </div>
+        <div ref="scrollAreaRef" class="scroll-area" @scroll="onScroll">
+          <canvas
+            ref="ganttCanvasRef"
+            class="gantt-canvas"
+            @mousemove="onMouseMove"
+            @mouseleave="onMouseLeave"
+            @click="onCanvasClick"
+          ></canvas>
+        </div>
+      </div>
+
+      <div v-if="tooltip.show" class="gantt-tooltip" :style="{ left: tooltip.x + 'px', top: tooltip.y + 'px' }">
+        <div class="gtt-title">{{ tooltip.seg.deviceName }}</div>
+        <div class="gtt-row">
+          <span class="gtt-dot" :style="{ background: getStatusColor(tooltip.seg.runStatus) }"></span>
+          {{ statusLabel(tooltip.seg.runStatus) }}: {{ formatDuration(tooltip.seg.duration) }}
+        </div>
+        <div class="gtt-sub">{{ formatTimeRange(tooltip.seg.startTime, tooltip.seg.endTime) }}</div>
+      </div>
+
+      <el-empty v-if="!loading && timeSeriesData.length === 0" description="暂无数据" />
+
+      <div v-if="timeSeriesData.length > 0" class="load-more">
+        <div ref="sentinelRef" class="load-sentinel"></div>
+        <div v-if="loadingMore" class="load-text">加载中...</div>
+        <div v-else-if="!loading && !hasMore" class="load-text">没有更多了</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const tsDate = ref('')
+const loading = ref(false)
+const loadingMore = ref(false)
+const tsPageNo = ref(0)
+const tsPageSize = 12
+const timeSeriesData = ref([])
+const hasMore = ref(true)
+
+const canLoadMore = computed(() => timeSeriesData.value.length > 0 && hasMore.value)
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+
+function onDateChange() {
+  resetAndFetch()
+}
+
+const STATUS_MAP = { 0: '离线', 1: '停机', 2: '运行', 3: '待机' }
+const STATUS_COLORS = { 0: '#909399', 1: '#e74c3c', 2: '#67c23a', 3: '#c5d94e' }
+
+function statusLabel(s) {
+  return STATUS_MAP[Number(s)] || '未知'
+}
+
+function getStatusColor(s) {
+  return STATUS_COLORS[Number(s)] || '#909399'
+}
+
+function formatDuration(dur) {
+  const v = Number(dur || 0)
+  if (v <= 0) return '0秒'
+  if (v >= 3600) {
+    const h = Math.floor(v / 3600)
+    const m = Math.floor((v % 3600) / 60)
+    const s = Math.floor(v % 60)
+    if (h > 0 && m === 0 && s === 0) return `${h}时`
+    if (h > 0 && s === 0) return `${h}时${m}分`
+    return `${h}时${m}分${s}秒`
+  }
+  if (v >= 60) {
+    const m = Math.floor(v / 60)
+    const s = Math.floor(v % 60)
+    return s === 0 ? `${m}分` : `${m}分${s}秒`
+  }
+  return `${Math.floor(v)}秒`
+}
+
+function formatTimeRange(start, end) {
+  const fmt = (ts) => {
+    const d = ts ? new Date(String(ts).replace(/-/g, '/')) : new Date()
+    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')} ${String(
+      d.getHours()
+    ).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
+  }
+  return `${fmt(start)} ~ ${fmt(end || start)}`
+}
+
+function parseTimeMs(timeStr) {
+  const d = new Date(String(timeStr || '').replace(/-/g, '/'))
+  return d.getTime()
+}
+
+function getDayStartMs() {
+  const dateStr = tsDate.value || ''
+  const d = dateStr ? new Date(dateStr) : new Date()
+  d.setHours(0, 0, 0, 0)
+  return d.getTime()
+}
+
+function resetAndFetch() {
+  tsPageNo.value = 0
+  timeSeriesData.value = []
+  hasMore.value = true
+  tooltip.show = false
+  fetchTimeSeriesData({ page: 1, append: false })
+}
+
+function mapRow(item) {
+  const dayStartMs = getDayStartMs()
+  const segments = (item.timelineList || [])
+    .map((seg) => {
+      const sMs = parseTimeMs(seg.startTime)
+      let eMs = seg.endTime ? parseTimeMs(seg.endTime) : NaN
+      const dur = Number(seg.duration || 0)
+      if (!Number.isFinite(eMs) && Number.isFinite(sMs) && dur > 0) eMs = sMs + dur * 1000
+      if (!Number.isFinite(sMs) || !Number.isFinite(eMs)) return null
+      const startSec = Math.max(0, Math.min(86400, (sMs - dayStartMs) / 1000))
+      const endSec = Math.max(0, Math.min(86400, (eMs - dayStartMs) / 1000))
+      return {
+        runStatus: Number(seg.runStatus ?? 0),
+        startSec,
+        endSec: Math.max(startSec, endSec),
+        startTime: seg.startTime,
+        endTime: seg.endTime || '',
+        duration: seg.duration || dur
+      }
+    })
+    .filter(Boolean)
+
+  return {
+    name: item.deviceName || item.dtuSn || '',
+    dtuSn: item.dtuSn || '',
+    utilizationRate: Number(item.utilizationRate ?? 0),
+    totalKwh: Number(item.totalKwh ?? 0),
+    segments
+  }
+}
+
+async function fetchTimeSeriesData({ page = 1, append = false } = {}) {
+  if (!tsDate.value) {
+    ElMessage.warning('请选择查询日期')
+    return
+  }
+  if (loading.value || loadingMore.value) return
+  if (append && !hasMore.value) return
+  if (append) loadingMore.value = true
+  else loading.value = true
+  try {
+    const res = await apiFetch(
+      `/api/energy/timelineStatus?date=${encodeURIComponent(tsDate.value)}&pageSize=${encodeURIComponent(tsPageSize)}&pageNo=${encodeURIComponent(page)}`
+    )
+    const data = await res.json()
+    if (data?.code !== 200) throw new Error('bad response')
+    const list = (data.list || []).map(mapRow)
+    hasMore.value = list.length >= tsPageSize
+    timeSeriesData.value = append ? timeSeriesData.value.concat(list) : list
+    tsPageNo.value = page
+    await nextTick()
+    drawAll()
+    await nextTick()
+    ensureAutoLoad()
+  } catch (e) {
+    ElMessage.error('获取时序状态失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+const ganttCanvasRef = ref(null)
+const fixedCanvasRef = ref(null)
+const scrollAreaRef = ref(null)
+
+const ROW_H = 36
+const AXIS_H = 32
+const FIXED_W = 210
+const PAD = 10
+const PX_PER_HOUR = 100
+const MIN_TIMELINE_W = 24 * PX_PER_HOUR
+
+const tooltip = reactive({ show: false, x: 0, y: 0, seg: null })
+let ganttHitRects = []
+
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v))
+}
+
+function formatRate(v) {
+  const n = Number(v || 0)
+  if (!Number.isFinite(n)) return '0.0%'
+  return (n % 1 === 0 ? n.toFixed(1) : n.toFixed(2)) + '%'
+}
+
+function drawTextEllipsis(ctx, text, x, y, maxW) {
+  if (!text) return
+  const t = String(text)
+  if (ctx.measureText(t).width <= maxW) {
+    ctx.fillText(t, x, y)
+    return
+  }
+  let cur = ''
+  for (let i = 0; i < t.length; i++) {
+    const next = cur + t[i]
+    if (ctx.measureText(next + '…').width > maxW) break
+    cur = next
+  }
+  ctx.fillText(cur + '…', x, y)
+}
+
+function drawFixedCol(cssH) {
+  const canvas = fixedCanvasRef.value
+  if (!canvas) return
+  const dpr = window.devicePixelRatio || 1
+  canvas.style.width = FIXED_W + 'px'
+  canvas.style.height = cssH + 'px'
+  canvas.width = Math.round(FIXED_W * dpr)
+  canvas.height = Math.round(cssH * dpr)
+  const ctx = canvas.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  ctx.clearRect(0, 0, FIXED_W, cssH)
+
+  const rows = timeSeriesData.value || []
+  ctx.fillStyle = '#f0f2f5'
+  ctx.fillRect(0, 0, FIXED_W, AXIS_H)
+  ctx.strokeStyle = '#e4e7ed'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo(0, AXIS_H)
+  ctx.lineTo(FIXED_W, AXIS_H)
+  ctx.stroke()
+
+  ctx.font = 'bold 12px sans-serif'
+  ctx.fillStyle = '#334155'
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'left'
+  ctx.fillText('设备名称', 10, AXIS_H / 2)
+  ctx.textAlign = 'center'
+  ctx.fillText('稼动率', FIXED_W - 86, AXIS_H / 2)
+  ctx.textAlign = 'right'
+  ctx.fillText('用电量', FIXED_W - 8, AXIS_H / 2)
+
+  ctx.font = '12px sans-serif'
+  rows.forEach((row, idx) => {
+    const y = AXIS_H + idx * ROW_H
+    if (idx % 2 === 1) {
+      ctx.fillStyle = '#fafafa'
+      ctx.fillRect(0, y, FIXED_W, ROW_H)
+    }
+    ctx.strokeStyle = '#f0f0f0'
+    ctx.beginPath()
+    ctx.moveTo(0, y + ROW_H)
+    ctx.lineTo(FIXED_W, y + ROW_H)
+    ctx.stroke()
+
+    const cy = y + ROW_H / 2
+    ctx.textAlign = 'left'
+    ctx.fillStyle = '#0f172a'
+    drawTextEllipsis(ctx, row.name, 10, cy, FIXED_W - 110)
+
+    const ur = Number(row.utilizationRate ?? 0)
+    ctx.textAlign = 'center'
+    ctx.fillStyle = ur >= 30 ? '#67c23a' : ur > 0 ? '#e6a23c' : '#909399'
+    ctx.fillText(formatRate(ur), FIXED_W - 86, cy)
+
+    ctx.textAlign = 'right'
+    ctx.fillStyle = '#0f172a'
+    ctx.fillText(String(row.totalKwh ?? 0), FIXED_W - 8, cy)
+  })
+}
+
+function drawTimeline(cssW, cssH) {
+  const canvas = ganttCanvasRef.value
+  if (!canvas) return
+  const rows = timeSeriesData.value || []
+
+  const dpr = window.devicePixelRatio || 1
+  canvas.style.width = cssW + 'px'
+  canvas.style.height = cssH + 'px'
+  canvas.width = Math.round(cssW * dpr)
+  canvas.height = Math.round(cssH * dpr)
+  const ctx = canvas.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  ctx.clearRect(0, 0, cssW, cssH)
+
+  const plotX = PAD
+  const plotW = cssW - PAD - PAD
+  const viewStartSec = 0
+  const viewRangeSec = 86400
+  const viewEndSec = 86400
+
+  ctx.fillStyle = '#f0f2f5'
+  ctx.fillRect(0, 0, cssW, AXIS_H)
+  ctx.strokeStyle = '#e4e7ed'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo(0, AXIS_H)
+  ctx.lineTo(cssW, AXIS_H)
+  ctx.stroke()
+
+  ctx.font = '11px sans-serif'
+  ctx.fillStyle = '#64748b'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  for (let h = 0; h <= 24; h++) {
+    const t = h * 3600
+    const px = plotX + (t / 86400) * plotW
+    ctx.strokeStyle = h % 2 === 0 ? 'rgba(0,0,0,0.08)' : 'rgba(0,0,0,0.05)'
+    ctx.lineWidth = 0.8
+    ctx.beginPath()
+    ctx.moveTo(px, AXIS_H)
+    ctx.lineTo(px, cssH)
+    ctx.stroke()
+    if (h % 2 === 0) ctx.fillText(String(h).padStart(2, '0') + ':00', px, AXIS_H / 2)
+  }
+
+  ganttHitRects = []
+  rows.forEach((row, idx) => {
+    const y = AXIS_H + idx * ROW_H
+    const barY = y + ROW_H * 0.18
+    const barH = ROW_H * 0.64
+
+    if (idx % 2 === 1) {
+      ctx.fillStyle = '#fafafa'
+      ctx.fillRect(0, y, cssW, ROW_H)
+    }
+    ctx.strokeStyle = '#f0f0f0'
+    ctx.beginPath()
+    ctx.moveTo(0, y + ROW_H)
+    ctx.lineTo(cssW, y + ROW_H)
+    ctx.stroke()
+
+    ctx.fillStyle = 'rgba(15,23,42,0.03)'
+    ctx.fillRect(plotX, barY, plotW, barH)
+
+    ;(row.segments || []).forEach((seg, segIdx) => {
+      const s = seg.startSec
+      const e = seg.endSec
+      if (e <= viewStartSec || s >= viewEndSec) return
+      const x1 = plotX + ((Math.max(s, viewStartSec) - viewStartSec) / viewRangeSec) * plotW
+      const x2 = plotX + ((Math.min(e, viewEndSec) - viewStartSec) / viewRangeSec) * plotW
+      const w = Math.max(1, x2 - x1)
+      const isHover = tooltip.show && tooltip.seg && tooltip.seg.rowIdx === idx && tooltip.seg.segIdx === segIdx
+      ctx.fillStyle = getStatusColor(seg.runStatus)
+      ctx.globalAlpha = isHover ? 1 : 0.86
+      ctx.fillRect(x1, barY, w, barH)
+      ctx.globalAlpha = 1
+      ganttHitRects.push({
+        rowIdx: idx,
+        segIdx,
+        x: x1,
+        y: barY,
+        w,
+        h: barH,
+        ...seg,
+        deviceName: row.name
+      })
+    })
+  })
+
+  const now = Date.now()
+  const dayStartMs = getDayStartMs()
+  const nowSec = (now - dayStartMs) / 1000
+  if (nowSec >= 0 && nowSec <= 86400) {
+    const px = plotX + (nowSec / 86400) * plotW
+    ctx.strokeStyle = '#e74c3c'
+    ctx.lineWidth = 1.2
+    ctx.setLineDash([4, 3])
+    ctx.beginPath()
+    ctx.moveTo(px, AXIS_H)
+    ctx.lineTo(px, cssH)
+    ctx.stroke()
+    ctx.setLineDash([])
+  }
+}
+
+function getHitAtCanvas(mx, my) {
+  for (let i = ganttHitRects.length - 1; i >= 0; i--) {
+    const r = ganttHitRects[i]
+    if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) return r
+  }
+  return null
+}
+
+function showTooltip(hit, clientX, clientY) {
+  const vw = window.innerWidth || document.documentElement.clientWidth
+  const vh = window.innerHeight || document.documentElement.clientHeight
+  const ttW = 240
+  const ttH = 108
+  let tx = clientX + 12
+  let ty = clientY - ttH - 10
+  if (tx + ttW > vw - 8) tx = clientX - ttW - 10
+  if (ty < 8) ty = clientY + 14
+  tooltip.x = clamp(tx, 6, vw - ttW - 6)
+  tooltip.y = clamp(ty, 6, vh - ttH - 6)
+  tooltip.seg = hit
+  tooltip.show = true
+}
+
+function hideTooltip() {
+  tooltip.show = false
+  tooltip.seg = null
+}
+
+function onMouseMove(e) {
+  if (!(window.matchMedia && window.matchMedia('(hover: hover)').matches)) return
+  const canvas = ganttCanvasRef.value
+  if (!canvas) return
+  const mx = e.offsetX
+  const my = e.offsetY
+  const hit = getHitAtCanvas(mx, my)
+  if (!hit) {
+    hideTooltip()
+    drawAll()
+    return
+  }
+  showTooltip(hit, e.clientX, e.clientY)
+  drawAll()
+}
+
+function onMouseLeave() {
+  if (window.matchMedia && window.matchMedia('(hover: hover)').matches) {
+    hideTooltip()
+    drawAll()
+  }
+}
+
+function onCanvasClick(e) {
+  const canvas = ganttCanvasRef.value
+  if (!canvas) return
+  const mx = e.offsetX
+  const my = e.offsetY
+  const hit = getHitAtCanvas(mx, my)
+  if (!hit) {
+    hideTooltip()
+    drawAll()
+    return
+  }
+  showTooltip(hit, e.clientX, e.clientY)
+  drawAll()
+}
+
+function onScroll() {
+  hideTooltip()
+}
+
+const sentinelRef = ref(null)
+let sentinelObserver = null
+let ensureTimer = null
+
+function loadMoreIfNeeded() {
+  if (loading.value || loadingMore.value) return
+  if (!canLoadMore.value) return
+  const nextPage = tsPageNo.value + 1
+  fetchTimeSeriesData({ page: nextPage, append: true })
+}
+
+function ensureAutoLoad() {
+  if (ensureTimer) return
+  ensureTimer = window.setTimeout(() => {
+    ensureTimer = null
+    if (!sentinelRef.value) return
+    if (loading.value || loadingMore.value) return
+    if (!canLoadMore.value) return
+    const rect = sentinelRef.value.getBoundingClientRect()
+    const vh = window.innerHeight || document.documentElement.clientHeight
+    if (rect.top <= vh + 200) loadMoreIfNeeded()
+  }, 0)
+}
+
+function attachObserver() {
+  if (!sentinelRef.value) return
+  if (!('IntersectionObserver' in window)) return
+  if (sentinelObserver) return
+  sentinelObserver = new IntersectionObserver(
+    (entries) => {
+      if (entries.some(e => e.isIntersecting)) loadMoreIfNeeded()
+    },
+    { root: null, rootMargin: '300px 0px 300px 0px', threshold: 0 }
+  )
+  sentinelObserver.observe(sentinelRef.value)
+}
+
+function detachObserver() {
+  if (sentinelObserver) {
+    sentinelObserver.disconnect()
+    sentinelObserver = null
+  }
+}
+
+let ro = null
+
+onMounted(() => {
+  const today = new Date()
+  tsDate.value = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+  resetAndFetch()
+  attachObserver()
+
+  if ('ResizeObserver' in window) {
+    ro = new ResizeObserver(() => drawAll())
+    if (scrollAreaRef.value) ro.observe(scrollAreaRef.value)
+  }
+})
+
+onActivated(() => {
+  attachObserver()
+  ensureAutoLoad()
+  drawAll()
+})
+
+onDeactivated(() => {
+  detachObserver()
+})
+
+onBeforeUnmount(() => {
+  detachObserver()
+  if (ensureTimer) {
+    window.clearTimeout(ensureTimer)
+    ensureTimer = null
+  }
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+
+function drawAll() {
+  const scroller = scrollAreaRef.value
+  const cssViewportW = Math.max(320, scroller ? scroller.clientWidth : 320)
+  const cssTimelineW = Math.max(MIN_TIMELINE_W, cssViewportW)
+  const rows = timeSeriesData.value || []
+  const cssH = Math.max(AXIS_H + rows.length * ROW_H + 8, 120)
+  drawFixedCol(cssH)
+  drawTimeline(cssTimelineW, cssH)
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mode {
+  font-size: 12px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.canvas-card {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.gantt-row {
+  display: flex;
+  align-items: flex-start;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.fixed-col {
+  flex: 0 0 auto;
+  background: #fff;
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.fixed-canvas {
+  display: block;
+  width: 210px;
+}
+
+.gantt-tooltip {
+  position: fixed;
+  width: 240px;
+  background: rgba(15, 23, 42, 0.92);
+  color: #fff;
+  border-radius: 10px;
+  padding: 10px 10px;
+  pointer-events: none;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+  z-index: 1000;
+}
+
+.gtt-title {
+  font-size: 12px;
+  font-weight: 800;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gtt-row {
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gtt-sub {
+  margin-top: 6px;
+  font-size: 11px;
+  opacity: 0.9;
+  line-height: 1.35;
+}
+
+.gtt-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.scroll-area {
+  flex: 1 1 auto;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  background: #fff;
+}
+
+.gantt-canvas {
+  display: block;
+  height: auto;
+}
+
+.load-more {
+  margin-top: 10px;
+}
+
+.load-sentinel {
+  height: 1px;
+}
+
+.load-text {
+  font-size: 12px;
+  color: #64748b;
+  text-align: center;
+  padding: 10px 0 4px;
+}
+</style>

+<template>
+  <div class="util-h5">
+    <div class="toolbar">
+      <div class="left">
+        <el-radio-group v-model="utilQueryMode" size="small" @change="onModeChange">
+          <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>
+      </div>
+      <el-button type="primary" size="small" :loading="loading" @click="fetchUtilData">查询</el-button>
+    </div>
+
+    <div class="toolbar" style="margin-top: 8px;">
+      <div class="left">
+        <el-date-picker
+          v-if="utilQueryMode === 'day'"
+          v-model="utilDate"
+          type="date"
+          placeholder="选择日期"
+          size="small"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disabledDateFuture"
+          style="width: 160px;"
+          @change="fetchUtilData"
+        />
+        <el-date-picker
+          v-else-if="utilQueryMode === 'week'"
+          v-model="utilWeekDate"
+          type="date"
+          :format="utilWeekDisplayFormat"
+          placeholder="选择周"
+          size="small"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disableNonMonday"
+          style="width: 160px;"
+          @change="fetchUtilData"
+        />
+        <el-date-picker
+          v-else
+          v-model="utilMonthDate"
+          type="month"
+          placeholder="选择月份"
+          size="small"
+          value-format="YYYY-MM"
+          style="width: 140px;"
+          @change="fetchUtilData"
+        />
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">总稼动率</div>
+      <div class="subline">稼动率：{{ totalAvailabilityRate }}</div>
+      <div class="legend-total">
+        <div v-for="(seg, i) in totalSegments" :key="i" class="legend-total-item">
+          <div class="lt-left">
+            <span class="dot" :style="{ background: seg.color }"></span>
+            <span class="name">{{ seg.label }}</span>
+          </div>
+          <div class="lt-right">
+            <div class="val">{{ seg.duration }}</div>
+            <div class="pct">{{ seg.pct }}</div>
+          </div>
+        </div>
+      </div>
+      <div ref="pieTotalWrapRef" class="pie-wrap">
+        <canvas ref="pieTotalRef" class="pie-canvas"></canvas>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">当前机台运行状态</div>
+      <div class="legend">
+        <div class="legend-item">
+          <span class="dot" style="background:#67c23a"></span><span class="name">运行</span><span class="val">{{ currentCounts.run }}台</span>
+        </div>
+        <div class="legend-item">
+          <span class="dot" style="background:#e6a23c"></span><span class="name">待机</span><span class="val">{{ currentCounts.standby }}台</span>
+        </div>
+        <div class="legend-item">
+          <span class="dot" style="background:#f56c6c"></span><span class="name">停机</span><span class="val">{{ currentCounts.stop }}台</span>
+        </div>
+        <div class="legend-item">
+          <span class="dot" style="background:#909399"></span><span class="name">离线</span><span class="val">{{ currentCounts.offline }}台</span>
+        </div>
+      </div>
+      <div ref="pieStatusWrapRef" class="pie-wrap">
+        <canvas ref="pieStatusRef" class="pie-canvas"></canvas>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">异常机台排名</div>
+      <div class="subline">待机 + 停机时长</div>
+      <div ref="abnormalWrapRef" class="chart-wrap">
+        <canvas ref="abnormalRef" class="chart-canvas" @pointerdown="onAbnormalTap"></canvas>
+      </div>
+      <div v-if="abnormalSelected.show" class="tip-card">
+        <div class="tip-title">{{ abnormalSelected.name }}</div>
+        <div class="tip-line"><i style="background:#e6a23c"></i>待机 {{ formatDuration(abnormalSelected.s2) }}</div>
+        <div class="tip-line"><i style="background:#f56c6c"></i>停机 {{ formatDuration(abnormalSelected.s1) }}</div>
+      </div>
+      <el-empty v-if="!loading && abnormalList.length === 0" description="暂无异常数据" />
+    </div>
+
+    <div class="section">
+      <div class="section-title">设备状态时长分布</div>
+      <div class="stack-toolbar">
+        <div class="subline" style="margin: 0;">排序</div>
+        <el-radio-group v-model="sortMode" size="small" @change="redrawStackBar">
+          <el-radio-button value="rate">稼动率</el-radio-button>
+          <el-radio-button value="duration">运行时长</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="stack-legend">
+        <span class="leg"><i class="dot" style="background:#67c23a"></i>运行</span>
+        <span class="leg"><i class="dot" style="background:#e6a23c"></i>待机</span>
+        <span class="leg"><i class="dot" style="background:#f56c6c"></i>停机</span>
+        <span class="leg"><i class="dot" style="background:#909399"></i>离线</span>
+      </div>
+      <div class="stack-scroll">
+        <div ref="stackWrapRef" class="stack-wrap">
+          <canvas ref="stackRef" class="stack-canvas" @pointerdown="onStackTap"></canvas>
+        </div>
+      </div>
+      <div v-if="stackSelected.show" class="tip-card">
+        <div class="tip-title">{{ stackSelected.name }}</div>
+        <div class="tip-line"><i style="background:#67c23a"></i>运行 {{ formatDuration(stackSelected.s3) }}</div>
+        <div class="tip-line"><i style="background:#e6a23c"></i>待机 {{ formatDuration(stackSelected.s2) }}</div>
+        <div class="tip-line"><i style="background:#f56c6c"></i>停机 {{ formatDuration(stackSelected.s1) }}</div>
+        <div class="tip-line"><i style="background:#909399"></i>离线 {{ formatDuration(stackSelected.s0) }}</div>
+      </div>
+      <el-empty v-if="!loading && deviceList.length === 0" description="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const utilQueryMode = ref('day')
+const utilDate = ref('')
+const utilWeekDate = ref('')
+const utilMonthDate = ref('')
+const loading = ref(false)
+const sortMode = ref('rate')
+
+const utilData = reactive({
+  currentStatus: {},
+  deviceList: [],
+  summary: {},
+  abnormalRanking: []
+})
+
+const UTIL_COLORS = { 0: '#909399', 1: '#f56c6c', 2: '#e6a23c', 3: '#67c23a' }
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+
+function formatYMD(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function getWeekNumber(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum)
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
+  return Math.ceil(((d - yearStart) / 86400000 + 1) / 7)
+}
+
+const utilWeekDisplayFormat = computed(() => {
+  if (!utilWeekDate.value) return ''
+  const d = new Date(utilWeekDate.value)
+  return `${d.getFullYear()}-${String(getWeekNumber(d)).padStart(2, '0')}周`
+})
+
+function getCurrentMonday() {
+  const today = new Date()
+  const day = today.getDay() || 7
+  today.setDate(today.getDate() - day + 1)
+  return formatYMD(today)
+}
+
+function getCurrentYM() {
+  const now = new Date()
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+function getWeekRange(dateStr) {
+  if (!dateStr) return { start: '', end: '' }
+  const d = new Date(dateStr)
+  const day = d.getDay() || 7
+  const diff = d.getDate() - day + 1
+  const monday = new Date(d.setDate(diff))
+  const sunday = new Date(monday)
+  sunday.setDate(monday.getDate() + 6)
+  return { start: formatYMD(monday), end: formatYMD(sunday) }
+}
+
+function getMonthRange(ymStr) {
+  if (!ymStr) return { start: '', end: '' }
+  const [y, m] = ymStr.split('-').map(Number)
+  const lastDay = new Date(y, m, 0).getDate()
+  return { start: `${ymStr}-01`, end: `${ymStr}-${String(lastDay).padStart(2, '0')}` }
+}
+
+function disableNonMonday(date) {
+  return date.getDay() !== 1
+}
+
+function setDefaultDate() {
+  if (utilQueryMode.value === 'day') {
+    if (!utilDate.value) utilDate.value = formatYMD(new Date())
+  } else if (utilQueryMode.value === 'week') {
+    if (!utilWeekDate.value) utilWeekDate.value = getCurrentMonday()
+  } else {
+    if (!utilMonthDate.value) utilMonthDate.value = getCurrentYM()
+  }
+}
+
+function onModeChange() {
+  setDefaultDate()
+  fetchUtilData()
+}
+
+function formatDuration(seconds) {
+  seconds = Number(seconds || 0)
+  if (seconds <= 0) return '0秒'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = Math.floor(seconds % 60)
+  if (h > 0) return `${h}时${m}分${s}秒`
+  if (m > 0) return `${m}分${s}秒`
+  return `${s}秒`
+}
+
+function formatHours(seconds) {
+  seconds = Number(seconds || 0)
+  return (seconds / 3600).toFixed(2).replace(/\.?0+$/, '') + '时'
+}
+
+const totalSegments = computed(() => {
+  const totalDur = utilData.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
+  if (!total) return []
+  return [
+    { label: '运行', color: UTIL_COLORS[3], seconds: s3, duration: formatHours(s3), pct: ((s3 / total) * 100).toFixed(2) + '%' },
+    { label: '待机', color: UTIL_COLORS[2], seconds: s2, duration: formatHours(s2), pct: ((s2 / total) * 100).toFixed(2) + '%' },
+    { label: '停机', color: UTIL_COLORS[1], seconds: s1, duration: formatHours(s1), pct: ((s1 / total) * 100).toFixed(2) + '%' }
+  ]
+})
+
+const totalAvailabilityRate = computed(() => {
+  const segs = totalSegments.value
+  if (!segs.length) return '0%'
+  const total = segs.reduce((s, x) => s + x.seconds, 0)
+  const run = segs.find(x => x.label === '运行')?.seconds || 0
+  return total > 0 ? ((run / total) * 100).toFixed(2).replace(/\.?0+$/, '') + '%' : '0%'
+})
+
+const currentCounts = computed(() => {
+  const cs = utilData.currentStatus || {}
+  return {
+    offline: parseInt(cs['0']) || 0,
+    stop: parseInt(cs['1']) || 0,
+    standby: parseInt(cs['2']) || 0,
+    run: parseInt(cs['3']) || 0
+  }
+})
+
+const abnormalList = computed(() => {
+  return (utilData.abnormalRanking || []).filter(item => (Number(item.status1?.durationSeconds || 0) + Number(item.status2?.durationSeconds || 0)) > 0)
+})
+
+const deviceList = computed(() => utilData.deviceList || [])
+
+async function fetchUtilData() {
+  let startDate = ''
+  let endDate = ''
+  if (utilQueryMode.value === 'day') {
+    if (!utilDate.value) { ElMessage.warning('请选择查询日期'); return }
+    startDate = endDate = utilDate.value
+  } else if (utilQueryMode.value === 'week') {
+    if (!utilWeekDate.value) { ElMessage.warning('请选择查询周'); return }
+    const range = getWeekRange(utilWeekDate.value)
+    startDate = range.start
+    endDate = range.end
+  } else {
+    if (!utilMonthDate.value) { ElMessage.warning('请选择查询月份'); return }
+    const range = getMonthRange(utilMonthDate.value)
+    startDate = range.start
+    endDate = range.end
+  }
+
+  loading.value = true
+  try {
+    const res = await apiFetch(`/api/energy/eqKwhStatistics?startDate=${encodeURIComponent(startDate)}&endDate=${encodeURIComponent(endDate)}`)
+    const result = await res.json()
+    if (result?.code !== 200) throw new Error('bad response')
+    const summary = result?.data?.summary || {}
+    utilData.currentStatus = summary.currentStatus || {}
+    utilData.deviceList = (summary.deviceList || []).map(d => ({ ...d, availabilityRateValue: parseFloat(d.availabilityRate) || 0 }))
+    utilData.summary = summary || {}
+    utilData.abnormalRanking = summary.abnormalRanking || []
+    abnormalSelected.show = false
+    stackSelected.show = false
+    await nextTick()
+    drawAll()
+  } catch (e) {
+    ElMessage.error('获取数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const pieTotalRef = ref(null)
+const pieStatusRef = ref(null)
+const abnormalRef = ref(null)
+const stackRef = ref(null)
+
+const pieTotalWrapRef = ref(null)
+const pieStatusWrapRef = ref(null)
+const abnormalWrapRef = ref(null)
+const stackWrapRef = ref(null)
+
+const dpr = window.devicePixelRatio || 1
+function setupCanvas(canvas, cssW, cssH) {
+  canvas.style.width = cssW + 'px'
+  canvas.style.height = cssH + 'px'
+  canvas.width = Math.round(cssW * dpr)
+  canvas.height = Math.round(cssH * dpr)
+  const ctx = canvas.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return { ctx, W: cssW, H: cssH }
+}
+
+function drawPie(ctx, cx, cy, r, segments) {
+  const total = segments.reduce((s, seg) => s + seg.value, 0)
+  if (total <= 0) return
+  let angle = -Math.PI / 2
+  segments.forEach(seg => {
+    const sweep = (seg.value / total) * Math.PI * 2
+    ctx.beginPath()
+    ctx.moveTo(cx, cy)
+    ctx.arc(cx, cy, r, angle, angle + sweep)
+    ctx.closePath()
+    ctx.fillStyle = seg.color
+    ctx.fill()
+    ctx.strokeStyle = 'rgba(255,255,255,0.5)'
+    ctx.lineWidth = 0.8
+    ctx.stroke()
+    angle += sweep
+  })
+}
+
+function drawTotalPie() {
+  const canvas = pieTotalRef.value
+  const wrap = pieTotalWrapRef.value
+  if (!canvas || !wrap) return
+  const cssSize = Math.max(240, Math.min(320, wrap.clientWidth || 0))
+  const { ctx, W, H } = setupCanvas(canvas, cssSize, cssSize)
+  ctx.clearRect(0, 0, W, H)
+  const segs = totalSegments.value
+  const total = segs.reduce((s, x) => s + x.seconds, 0)
+  const cx = W / 2
+  const cy = H / 2
+  const r = Math.min(W, H) / 2 - 16
+  if (!total) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+  drawPie(ctx, cx, cy, r, segs.map(s => ({ label: s.label, value: s.seconds, color: s.color })))
+  ctx.fillStyle = '#0f172a'
+  ctx.font = 'bold 14px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(totalAvailabilityRate.value, cx, cy)
+}
+
+function drawStatusPie() {
+  const canvas = pieStatusRef.value
+  const wrap = pieStatusWrapRef.value
+  if (!canvas || !wrap) return
+  const cssSize = Math.max(240, Math.min(320, wrap.clientWidth || 0))
+  const { ctx, W, H } = setupCanvas(canvas, cssSize, cssSize)
+  ctx.clearRect(0, 0, W, H)
+  const cs = currentCounts.value
+  const total = cs.offline + cs.stop + cs.standby + cs.run
+  const cx = W / 2
+  const cy = H / 2
+  const r = Math.min(W, H) / 2 - 16
+  if (!total) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+  drawPie(ctx, cx, cy, r, [
+    { label: '运行', value: cs.run, color: UTIL_COLORS[3] },
+    { label: '待机', value: cs.standby, color: UTIL_COLORS[2] },
+    { label: '停机', value: cs.stop, color: UTIL_COLORS[1] },
+    { label: '离线', value: cs.offline, color: UTIL_COLORS[0] }
+  ])
+}
+
+const abnormalSelected = reactive({ show: false, name: '', s1: 0, s2: 0 })
+let abnormalRects = []
+
+function drawAbnormal() {
+  const canvas = abnormalRef.value
+  const wrap = abnormalWrapRef.value
+  if (!canvas || !wrap) return
+  const list = abnormalList.value.slice(0, 8)
+  const cssW = Math.max(300, wrap.clientWidth)
+  const cssH = Math.min(420, Math.max(220, list.length * 28 + 80))
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+  abnormalRects = []
+  if (!list.length) return
+
+  const PAD_L = 88
+  const PAD_R = 14
+  const PAD_T = 26
+  const PAD_B = 10
+  const plotW = W - PAD_L - PAD_R
+  const rowH = 26
+  const barH = 18
+
+  let maxVal = 1
+  list.forEach(item => {
+    const v = Number(item.status1?.durationSeconds || 0) + Number(item.status2?.durationSeconds || 0)
+    maxVal = Math.max(maxVal, v)
+  })
+
+  ctx.fillStyle = '#64748b'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'center'
+  for (let i = 0; i <= 4; i++) {
+    const val = (maxVal * i) / 4
+    const x = PAD_L + (plotW * i) / 4
+    ctx.fillText(formatHours(val), x, 14)
+    if (i > 0) {
+      ctx.strokeStyle = '#eee'
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(x, PAD_T)
+      ctx.lineTo(x, H - PAD_B)
+      ctx.stroke()
+    }
+  }
+
+  list.forEach((item, idx) => {
+    const y = PAD_T + idx * rowH
+    const name = item.deviceName || item.dtuSn || ''
+    const s1 = Number(item.status1?.durationSeconds || 0)
+    const s2 = Number(item.status2?.durationSeconds || 0)
+    const total = s1 + s2
+    ctx.fillStyle = '#0f172a'
+    ctx.font = '11px sans-serif'
+    ctx.textAlign = 'right'
+    ctx.textBaseline = 'middle'
+    const dn = name.length > 10 ? name.slice(-10) : name
+    ctx.fillText(dn, PAD_L - 8, y + rowH / 2)
+
+    const yW = (s2 / maxVal) * plotW
+    const rW = (s1 / maxVal) * plotW
+    const by = y + (rowH - barH) / 2
+    ctx.fillStyle = 'rgba(15,23,42,0.04)'
+    ctx.fillRect(PAD_L, by, plotW, barH)
+    ctx.fillStyle = UTIL_COLORS[2]
+    ctx.fillRect(PAD_L, by, yW, barH)
+    ctx.fillStyle = UTIL_COLORS[1]
+    ctx.fillRect(PAD_L + yW, by, rW, barH)
+    abnormalRects.push({ x: PAD_L, y: by, w: plotW, h: barH, name, s1, s2, total })
+  })
+}
+
+function onAbnormalTap(e) {
+  const canvas = abnormalRef.value
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const hit = abnormalRects.find(r => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h)
+  if (!hit) {
+    abnormalSelected.show = false
+    return
+  }
+  abnormalSelected.show = true
+  abnormalSelected.name = hit.name
+  abnormalSelected.s1 = hit.s1
+  abnormalSelected.s2 = hit.s2
+}
+
+const stackSelected = reactive({ show: false, name: '', s0: 0, s1: 0, s2: 0, s3: 0 })
+let stackRects = []
+
+function drawStackBar() {
+  const canvas = stackRef.value
+  const wrap = stackWrapRef.value
+  if (!canvas || !wrap) return
+  const list = [...(deviceList.value || [])]
+  if (sortMode.value === 'rate') list.sort((a, b) => (b.availabilityRateValue || 0) - (a.availabilityRateValue || 0))
+  else list.sort((a, b) => (Number(b.status3?.durationSeconds || 0) - Number(a.status3?.durationSeconds || 0)))
+
+  const PAD_L = 36
+  const PAD_R = 16
+  const PAD_T = 18
+  const PAD_B = 44
+  const colW = 18
+  const gap = 8
+  const minW = Math.max(320, wrap.clientWidth)
+  const cssW = Math.max(minW, PAD_L + PAD_R + list.length * (colW + gap) + gap)
+  const cssH = 280
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+  stackRects = []
+  if (!list.length) return
+
+  const plotW = W - PAD_L - PAD_R
+  const plotH = H - PAD_T - PAD_B
+
+  let maxVal = 1
+  list.forEach(item => {
+    const total =
+      Number(item.status0?.durationSeconds || 0) +
+      Number(item.status1?.durationSeconds || 0) +
+      Number(item.status2?.durationSeconds || 0) +
+      Number(item.status3?.durationSeconds || 0)
+    maxVal = Math.max(maxVal, total)
+  })
+
+  const maxHours = maxVal / 3600 || 1
+  const yTicks = [Math.ceil(maxHours), Math.ceil(maxHours * 0.66), Math.ceil(maxHours * 0.33), 0]
+  ctx.strokeStyle = '#f0f0f0'
+  ctx.lineWidth = 1
+  ctx.fillStyle = '#94a3b8'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'end'
+  yTicks.forEach(val => {
+    const py = PAD_T + plotH * (1 - val / maxHours)
+    ctx.fillText(val + '时', PAD_L - 4, py + 3)
+    ctx.beginPath()
+    ctx.moveTo(PAD_L, py)
+    ctx.lineTo(W - PAD_R, py)
+    ctx.stroke()
+  })
+
+  ctx.strokeStyle = '#ddd'
+  ctx.beginPath()
+  ctx.moveTo(PAD_L, PAD_T + plotH)
+  ctx.lineTo(W - PAD_R, PAD_T + plotH)
+  ctx.stroke()
+
+  const scale = plotH / maxVal
+  list.forEach((item, idx) => {
+    const px = PAD_L + gap + idx * (colW + gap)
+    const s0 = Number(item.status0?.durationSeconds || 0)
+    const s1 = Number(item.status1?.durationSeconds || 0)
+    const s2 = Number(item.status2?.durationSeconds || 0)
+    const s3 = Number(item.status3?.durationSeconds || 0)
+    const total = s0 + s1 + s2 + s3
+    if (!total) return
+    let curY = PAD_T + plotH
+    const parts = [
+      { sec: s0, color: UTIL_COLORS[0] },
+      { sec: s1, color: UTIL_COLORS[1] },
+      { sec: s2, color: UTIL_COLORS[2] },
+      { sec: s3, color: UTIL_COLORS[3] }
+    ]
+    parts.forEach(p => {
+      const h = p.sec * scale
+      if (h <= 0) return
+      curY -= h
+      ctx.fillStyle = p.color
+      ctx.fillRect(px, curY, colW, h)
+    })
+
+    ctx.fillStyle = '#64748b'
+    ctx.font = '9px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.save()
+    ctx.translate(px + colW / 2, PAD_T + plotH + 12)
+    ctx.rotate(-Math.PI / 6)
+    const dn = (item.deviceName || item.dtuSn || '').slice(0, 8)
+    ctx.fillText(dn, 0, 0)
+    ctx.restore()
+
+    stackRects.push({ x: px, y: PAD_T, w: colW, h: plotH, name: item.deviceName || item.dtuSn || '', s0, s1, s2, s3 })
+  })
+}
+
+function onStackTap(e) {
+  const canvas = stackRef.value
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const hit = stackRects.find(r => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h)
+  if (!hit) {
+    stackSelected.show = false
+    drawStackBar()
+    return
+  }
+  stackSelected.show = true
+  stackSelected.name = hit.name
+  stackSelected.s0 = hit.s0
+  stackSelected.s1 = hit.s1
+  stackSelected.s2 = hit.s2
+  stackSelected.s3 = hit.s3
+}
+
+function drawAll() {
+  drawTotalPie()
+  drawStatusPie()
+  drawAbnormal()
+  drawStackBar()
+}
+
+function redrawStackBar() {
+  nextTick(drawStackBar)
+}
+
+let ro = null
+onMounted(() => {
+  setDefaultDate()
+  fetchUtilData()
+  if ('ResizeObserver' in window) {
+    ro = new ResizeObserver(() => drawAll())
+    if (pieTotalWrapRef.value) ro.observe(pieTotalWrapRef.value)
+    if (pieStatusWrapRef.value) ro.observe(pieStatusWrapRef.value)
+    if (abnormalWrapRef.value) ro.observe(abnormalWrapRef.value)
+    if (stackWrapRef.value) ro.observe(stackWrapRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+</script>
+
+<style scoped>
+.util-h5 {
+  padding: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-top: 10px;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.subline {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 8px;
+}
+
+.legend {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.legend-item {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #475569;
+}
+
+.legend-item .val {
+  justify-self: end;
+  color: #0f172a;
+  font-weight: 700;
+}
+
+.legend-total {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+  margin-bottom: 8px;
+}
+
+.legend-total-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.lt-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.lt-left .name {
+  font-size: 12px;
+  color: #0f172a;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.lt-right {
+  text-align: right;
+  min-width: 0;
+}
+
+.legend-total-item .val {
+  font-size: 12px;
+  color: #0f172a;
+  font-weight: 800;
+  line-height: 1.15;
+  white-space: nowrap;
+}
+
+.legend-total-item .pct {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.15;
+  margin-top: 4px;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.pie-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.pie-canvas {
+  width: 100%;
+  max-width: 320px;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+.chart-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+
+.chart-canvas {
+  width: 100%;
+  display: block;
+}
+
+.stack-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.stack-legend {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #475569;
+  margin-bottom: 10px;
+}
+
+.leg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.stack-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.stack-wrap {
+  min-width: 100%;
+}
+
+.stack-canvas {
+  height: 280px;
+  display: block;
+}
+
+.tip-card {
+  margin-top: 10px;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(64, 158, 255, 0.06);
+  border: 1px solid rgba(64, 158, 255, 0.18);
+}
+
+.tip-title {
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 6px;
+}
+
+.tip-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #334155;
+  line-height: 1.6;
+}
+
+.tip-line i {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+</style>

+<template>
+  <div class="smart-light-h5-realtime">
+    <div class="h5-search">
+      <el-input
+        v-model="searchKeyword"
+        placeholder="输入设备名称搜索"
+        clearable
+        @keyup.enter="onSearch"
+        @clear="onSearch"
+      >
+        <template #append>
+          <el-button :loading="loading" @click="onSearch">搜索</el-button>
+        </template>
+      </el-input>
+    </div>
+
+    <div class="h5-filters">
+      <button
+        v-for="item in filterItems"
+        :key="item.key"
+        :class="['filter-chip', { active: lampStateFilter === item.key }]"
+        type="button"
+        @click="onFilter(item.key)"
+      >
+        <span class="dot" :style="{ backgroundColor: item.dotColor }"></span>
+        <span class="label">{{ item.label }}</span>
+        <span class="count">{{ item.count }}</span>
+      </button>
+    </div>
+
+    <el-empty v-if="!loading && deviceList.length === 0" description="暂无设备" />
+
+    <div v-for="device in deviceList" :key="device.id" class="device-card">
+      <div class="card-top">
+        <div class="device-name">{{ device.name }}</div>
+        <div class="device-status">
+          <span class="status-dot" :style="{ backgroundColor: device.statusColor }"></span>
+          <span class="status-text">{{ device.statusLabel }}</span>
+        </div>
+      </div>
+
+      <div class="card-body">
+        <div class="row">
+          <div class="k">稼动率</div>
+          <div class="v">{{ device.utilization }}%</div>
+        </div>
+        <div class="row">
+          <div class="k">{{ device.statusLabel }}时长</div>
+          <div class="v">{{ device.lightTime }}</div>
+        </div>
+      </div>
+
+      <div class="card-actions">
+        <el-button size="small" @click="goOeeTimeline(device)">OEE时序</el-button>
+        <el-button size="small" type="primary" @click="goUtilization(device)">稼动率</el-button>
+      </div>
+    </div>
+
+    <div class="h5-footer">
+      <el-button
+        v-if="canLoadMore"
+        type="primary"
+        :loading="loadingMore"
+        style="width: 100%;"
+        @click="loadMore"
+      >
+        加载更多
+      </el-button>
+      <div v-else-if="deviceList.length > 0" class="no-more">没有更多了</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const route = useRoute()
+const router = useRouter()
+
+const searchKeyword = ref('')
+const lampStateFilter = ref('')
+const currentPage = ref(1)
+const PAGE_SIZE = 20
+
+const deviceList = ref([])
+const totalDevices = ref(0)
+const loading = ref(false)
+const loadingMore = ref(false)
+
+const totalCounts = reactive({ all: 0, red: 0, yellow: 0, green: 0, blue: 0, gray: 0 })
+const canLoadMore = computed(() => deviceList.value.length < totalDevices.value)
+
+function mapLampStatus(lampState) {
+  if (lampState === '3') return 'green'
+  if (lampState === '1') return 'red'
+  if (lampState === '2') return 'yellow'
+  if (lampState === '4') return 'blue'
+  return 'gray'
+}
+
+const LAMP_LABEL_MAP = { green: '绿灯', yellow: '黄灯', red: '红灯', blue: '蓝灯', gray: '灭灯' }
+const LAMP_COLOR_MAP = { green: '#2ecc71', yellow: '#f1c40f', red: '#e74c3c', blue: '#3498db', gray: '#95a5a6' }
+
+function toDeviceViewModel(item) {
+  const status = mapLampStatus(item.lampState)
+  return {
+    id: item.id,
+    name: item.deviceName || item.dtuSn,
+    dtuSn: item.dtuSn || item.deviceSn || item.sn || '',
+    utilization: parseFloat(item.utilizationRate) || 0,
+    lightTime: item.duration || '0分',
+    statusLabel: LAMP_LABEL_MAP[status] || '灭灯',
+    statusColor: LAMP_COLOR_MAP[status] || '#95a5a6',
+    _raw: item
+  }
+}
+
+const filterItems = computed(() => [
+  { key: '', label: '全部', count: `${totalCounts.all}台`, dotColor: '#2c3e50' },
+  { key: '1', label: '红', count: `${totalCounts.red}台`, dotColor: LAMP_COLOR_MAP.red },
+  { key: '2', label: '黄', count: `${totalCounts.yellow}台`, dotColor: LAMP_COLOR_MAP.yellow },
+  { key: '3', label: '绿', count: `${totalCounts.green}台`, dotColor: LAMP_COLOR_MAP.green },
+  { key: '4', label: '蓝', count: `${totalCounts.blue}台`, dotColor: LAMP_COLOR_MAP.blue },
+  { key: '0', label: '灭', count: `${totalCounts.gray}台`, dotColor: LAMP_COLOR_MAP.gray }
+])
+
+async function fetchStats() {
+  const res = await apiFetch('/api/device/stats')
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const data = await res.json()
+  totalCounts.all = data.all || 0
+  totalCounts.red = data.red || 0
+  totalCounts.yellow = data.yellow || 0
+  totalCounts.green = data.green || 0
+  totalCounts.blue = data.blue || 0
+  totalCounts.gray = data.off || 0
+}
+
+async function fetchDeviceList({ append }) {
+  const params = new URLSearchParams({
+    pageNo: String(currentPage.value),
+    pageSize: String(PAGE_SIZE)
+  })
+  if (searchKeyword.value) params.append('deviceName', searchKeyword.value)
+  if (lampStateFilter.value) params.append('lampState', lampStateFilter.value)
+
+  const res = await apiFetch(`/api/device/list?${params}`)
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const data = await res.json()
+
+  const mapped = (data.list || []).map(toDeviceViewModel)
+  deviceList.value = append ? deviceList.value.concat(mapped) : mapped
+  totalDevices.value = data.total || 0
+}
+
+async function refresh({ append }) {
+  try {
+    if (append) loadingMore.value = true
+    else loading.value = true
+
+    await Promise.all([fetchDeviceList({ append }), fetchStats()])
+  } catch (e) {
+    ElMessage.error('获取数据失败，请检查后端接口或代理配置')
+    console.warn(e)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function onSearch() {
+  currentPage.value = 1
+  refresh({ append: false })
+}
+
+function onFilter(key) {
+  if (lampStateFilter.value === key) return
+  lampStateFilter.value = key
+  currentPage.value = 1
+  refresh({ append: false })
+}
+
+function loadMore() {
+  if (!canLoadMore.value || loading.value || loadingMore.value) return
+  currentPage.value += 1
+  refresh({ append: true })
+}
+
+function goOeeTimeline(device) {
+  router.push({
+    path: '/smart-light-h5/oee',
+    query: { ...route.query, dtuSn: device.dtuSn || '', deviceName: device.name || '' }
+  })
+}
+
+function goUtilization(device) {
+  router.push({
+    path: '/smart-light-h5/utilization',
+    query: { ...route.query, dtuSn: device.dtuSn || '', deviceName: device.name || '' }
+  })
+}
+
+onMounted(() => {
+  refresh({ append: false })
+})
+</script>
+
+<style scoped>
+.h5-search :deep(.el-input__wrapper) {
+  border-radius: 10px;
+}
+
+.h5-filters {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-top: 10px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #fff;
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: #334155;
+  white-space: nowrap;
+}
+
+.filter-chip.active {
+  border-color: rgba(64, 158, 255, 0.45);
+  background: rgba(64, 158, 255, 0.08);
+  color: #1d4ed8;
+}
+
+.filter-chip .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.filter-chip .count {
+  opacity: 0.75;
+}
+
+.device-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-top: 10px;
+}
+
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.device-name {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  line-height: 1.25;
+  word-break: break-all;
+}
+
+.device-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #334155;
+  flex: 0 0 auto;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.card-body {
+  margin-top: 10px;
+  display: grid;
+  gap: 6px;
+}
+
+.card-actions {
+  margin-top: 10px;
+  display: flex;
+  gap: 10px;
+}
+
+.card-actions :deep(.el-button) {
+  flex: 1 1 auto;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.row .k {
+  color: #64748b;
+}
+
+.row .v {
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.h5-footer {
+  padding: 10px 0 18px;
+}
+
+.no-more {
+  text-align: center;
+  color: #94a3b8;
+  font-size: 12px;
+  padding: 8px 0;
+}
+</style>

+<template>
+  <div class="startup-h5">
+    <div class="toolbar">
+      <div class="left">
+        <el-radio-group v-model="queryMode" size="small" @change="onModeChange">
+          <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>
+      </div>
+      <el-button type="primary" size="small" :loading="loading" @click="fetchData">查询</el-button>
+    </div>
+
+    <div class="toolbar" style="margin-top: 8px;">
+      <div class="left">
+        <el-date-picker
+          v-if="queryMode === 'day'"
+          v-model="dayDate"
+          type="date"
+          placeholder="选择日期"
+          size="small"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disabledDateFuture"
+          style="width: 160px;"
+          @change="fetchData"
+        />
+        <el-date-picker
+          v-else-if="queryMode === 'week'"
+          v-model="weekDate"
+          type="date"
+          :format="weekDisplayFormat"
+          placeholder="选择周"
+          size="small"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disableNonMonday"
+          style="width: 160px;"
+          @change="fetchData"
+        />
+        <el-date-picker
+          v-else
+          v-model="monthDate"
+          type="month"
+          placeholder="选择月份"
+          size="small"
+          value-format="YYYY-MM"
+          style="width: 140px;"
+          @change="fetchData"
+        />
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">概览</div>
+      <div class="summary-grid">
+        <div class="summary-item">
+          <div class="k">设备数</div>
+          <div class="v">{{ summary.totalDevices || 0 }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="k">整体开机率</div>
+          <div class="v">{{ summary.overallBootRate || '0%' }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="k">总时长</div>
+          <div class="v">{{ summary.totalDuration || '-' }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="k">开机时长</div>
+          <div class="v">{{ summary.onDuration || '-' }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="k">关机时长</div>
+          <div class="v">{{ summary.offDuration || '-' }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="k">统计天数</div>
+          <div class="v">{{ summary.dataDays || 0 }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">开机率</div>
+      <div class="subline"><i class="dot" style="background:#67c23a"></i>开机率</div>
+      <div class="chart-scroll">
+        <div ref="chartWrapRef" class="chart-wrap">
+          <canvas
+            ref="canvasRef"
+            class="chart-canvas"
+            @pointerdown="onCanvasTap"
+            @pointermove="onCanvasMove"
+            @pointerleave="onCanvasLeave"
+          ></canvas>
+          <div v-if="loading" class="loading-overlay"><div class="spinner"></div></div>
+        </div>
+      </div>
+
+      <div v-if="selected.show" class="tip-card">
+        <div class="tip-title">{{ selected.name }}</div>
+        <div class="tip-line"><i style="background:#67c23a"></i>开机率 {{ selected.bootRate }}</div>
+        <div class="tip-line"><i style="background:#91cc75"></i>开机时长 {{ selected.onDuration }}</div>
+        <div class="tip-line"><i style="background:#909399"></i>关机时长 {{ selected.offDuration }}</div>
+        <div class="tip-line">总时长 {{ selected.totalDuration }}</div>
+      </div>
+
+      <el-empty v-if="!loading && list.length === 0" description="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const queryMode = ref('day')
+const dayDate = ref('')
+const weekDate = ref('')
+const monthDate = ref('')
+const loading = ref(false)
+
+const list = ref([])
+const summary = reactive({
+  totalDevices: 0,
+  overallBootRate: '0%',
+  totalDuration: '',
+  onDuration: '',
+  offDuration: '',
+  dataDays: 0
+})
+
+const selected = reactive({
+  show: false,
+  name: '',
+  bootRate: '',
+  onDuration: '',
+  offDuration: '',
+  totalDuration: ''
+})
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+
+function formatYMD(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function getWeekNumber(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum)
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
+  return Math.ceil(((d - yearStart) / 86400000 + 1) / 7)
+}
+
+const weekDisplayFormat = computed(() => {
+  if (!weekDate.value) return ''
+  const d = new Date(weekDate.value)
+  return `${d.getFullYear()}-${String(getWeekNumber(d)).padStart(2, '0')}周`
+})
+
+function getCurrentMonday() {
+  const today = new Date()
+  const day = today.getDay() || 7
+  today.setDate(today.getDate() - day + 1)
+  return formatYMD(today)
+}
+
+function getCurrentYM() {
+  const now = new Date()
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+function getWeekRange(dateStr) {
+  if (!dateStr) return { start: '', end: '' }
+  const d = new Date(dateStr)
+  const day = d.getDay() || 7
+  const diff = d.getDate() - day + 1
+  const monday = new Date(d.setDate(diff))
+  const sunday = new Date(monday)
+  sunday.setDate(monday.getDate() + 6)
+  return { start: formatYMD(monday), end: formatYMD(sunday) }
+}
+
+function getMonthRange(ymStr) {
+  if (!ymStr) return { start: '', end: '' }
+  const [y, m] = ymStr.split('-').map(Number)
+  const lastDay = new Date(y, m, 0).getDate()
+  return { start: `${ymStr}-01`, end: `${ymStr}-${String(lastDay).padStart(2, '0')}` }
+}
+
+function disableNonMonday(date) {
+  return date.getDay() !== 1
+}
+
+function setDefaultDate() {
+  if (queryMode.value === 'day') {
+    if (!dayDate.value) dayDate.value = formatYMD(new Date())
+  } else if (queryMode.value === 'week') {
+    if (!weekDate.value) weekDate.value = getCurrentMonday()
+  } else {
+    if (!monthDate.value) monthDate.value = getCurrentYM()
+  }
+}
+
+function onModeChange() {
+  setDefaultDate()
+  fetchData()
+}
+
+function getDateRange() {
+  if (queryMode.value === 'day') {
+    if (!dayDate.value) return { startDate: '', endDate: '' }
+    return { startDate: dayDate.value, endDate: dayDate.value }
+  }
+  if (queryMode.value === 'week') {
+    if (!weekDate.value) return { startDate: '', endDate: '' }
+    const range = getWeekRange(weekDate.value)
+    return { startDate: range.start, endDate: range.end }
+  }
+  if (!monthDate.value) return { startDate: '', endDate: '' }
+  const range = getMonthRange(monthDate.value)
+  return { startDate: range.start, endDate: range.end }
+}
+
+const canvasRef = ref(null)
+const chartWrapRef = ref(null)
+let bars = []
+let hitIdx = -1
+const dpr = window.devicePixelRatio || 1
+
+function roundRect(ctx, x, y, w, h, r) {
+  r = Math.min(r, w / 2, h / 2)
+  ctx.beginPath()
+  ctx.moveTo(x + r, y)
+  ctx.lineTo(x + w - r, y)
+  ctx.arcTo(x + w, y, x + w, y + r, r)
+  ctx.lineTo(x + w, y + h - r)
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
+  ctx.lineTo(x + r, y + h)
+  ctx.arcTo(x, y + h, x, y + h - r, r)
+  ctx.lineTo(x, y + r)
+  ctx.arcTo(x, y, x + r, y, r)
+  ctx.closePath()
+}
+
+function lightenColor(hex, amount) {
+  let r = parseInt(hex.slice(1, 3), 16)
+  let g = parseInt(hex.slice(3, 5), 16)
+  let b = parseInt(hex.slice(5, 7), 16)
+  r = Math.min(255, r + amount)
+  g = Math.min(255, g + amount)
+  b = Math.min(255, b + amount)
+  return `rgb(${r},${g},${b})`
+}
+
+function setupCanvas(canvas, cssW, cssH) {
+  canvas.style.width = cssW + 'px'
+  canvas.style.height = cssH + 'px'
+  canvas.width = Math.round(cssW * dpr)
+  canvas.height = Math.round(cssH * dpr)
+  const ctx = canvas.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return { ctx }
+}
+
+function drawChart() {
+  const canvas = canvasRef.value
+  const wrap = chartWrapRef.value
+  if (!canvas || !wrap) return
+
+  const data = list.value || []
+  const PAD_L = 40
+  const PAD_R = 16
+  const PAD_T = 18
+  const PAD_B = 46
+  const colW = 18
+  const gap = 10
+  const cssH = 320
+  const minW = Math.max(320, wrap.clientWidth)
+  const cssW = Math.max(minW, PAD_L + PAD_R + data.length * (colW + gap) + gap)
+  const { ctx } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, cssW, cssH)
+
+  if (data.length === 0) return
+
+  const plotW = cssW - PAD_L - PAD_R
+  const plotH = cssH - PAD_T - PAD_B
+
+  ctx.strokeStyle = '#eee'
+  ctx.lineWidth = 1
+  ctx.fillStyle = '#94a3b8'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'end'
+
+  for (let i = 0; i <= 5; i++) {
+    const val = i * 20
+    const py = PAD_T + plotH * (1 - val / 100)
+    ctx.fillText(val + '%', PAD_L - 4, py + 3)
+    if (i > 0) {
+      ctx.beginPath()
+      ctx.moveTo(PAD_L, py)
+      ctx.lineTo(cssW - PAD_R, py)
+      ctx.stroke()
+    }
+  }
+
+  ctx.strokeStyle = '#ddd'
+  ctx.lineWidth = 1.5
+  ctx.beginPath()
+  ctx.moveTo(PAD_L, PAD_T + plotH)
+  ctx.lineTo(cssW - PAD_R, PAD_T + plotH)
+  ctx.stroke()
+
+  data.forEach((item, idx) => {
+    const px = PAD_L + gap + idx * (colW + gap)
+    ctx.fillStyle = '#f2f3f5'
+    roundRect(ctx, px, PAD_T, colW, plotH, 3)
+    ctx.fill()
+  })
+
+  bars = []
+  data.forEach((item, idx) => {
+    const px = PAD_L + gap + idx * (colW + gap)
+    const rate = Number(item.bootRateValue || 0)
+    const barH = (rate / 100) * plotH
+    const barY = PAD_T + plotH - barH
+
+    let color = '#67c23a'
+    if (rate >= 95) color = '#4caf50'
+    else if (rate < 50) color = '#91cc75'
+
+    const isHovered = idx === hitIdx
+    if (isHovered) {
+      ctx.save()
+      ctx.shadowColor = 'rgba(103,194,58,0.45)'
+      ctx.shadowBlur = 14
+      ctx.shadowOffsetY = 3
+      ctx.fillStyle = lightenColor(color, 26)
+      const hoverPad = 2
+      roundRect(ctx, px - hoverPad, barY - hoverPad, colW + hoverPad * 2, barH + hoverPad * 2, 4)
+      ctx.fill()
+      ctx.restore()
+      ctx.strokeStyle = '#3d8b3d'
+      ctx.lineWidth = 1.2
+      roundRect(ctx, px - hoverPad, barY - hoverPad, colW + hoverPad * 2, barH + hoverPad * 2, 4)
+      ctx.stroke()
+    } else {
+      roundRect(ctx, px, barY, colW, barH, 3)
+      ctx.fillStyle = color
+      ctx.fill()
+    }
+
+    ctx.fillStyle = '#64748b'
+    ctx.font = '9px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.save()
+    ctx.translate(px + colW / 2, PAD_T + plotH + 12)
+    ctx.rotate(-Math.PI / 6)
+    const dn = (item.deviceName || item.dtuSn || '').slice(0, 8)
+    ctx.fillText(dn, 0, 0)
+    ctx.restore()
+
+    bars.push({
+      x: px - 2,
+      y: PAD_T,
+      w: colW + 4,
+      h: plotH,
+      name: item.deviceName || item.dtuSn,
+      bootRate: item.bootRate,
+      onDuration: item.onDuration,
+      offDuration: item.offDuration,
+      totalDuration: item.totalDuration
+    })
+  })
+}
+
+function hitTest(clientX, clientY) {
+  const canvas = canvasRef.value
+  if (!canvas) return -1
+  const rect = canvas.getBoundingClientRect()
+  const mx = clientX - rect.left
+  const my = clientY - rect.top
+  for (let i = 0; i < bars.length; i++) {
+    const b = bars[i]
+    if (mx >= b.x && mx <= b.x + b.w && my >= b.y && my <= b.y + b.h) return i
+  }
+  return -1
+}
+
+function applySelection(idx) {
+  if (idx < 0) {
+    selected.show = false
+    hitIdx = -1
+    drawChart()
+    return
+  }
+  const b = bars[idx]
+  selected.name = b.name
+  selected.bootRate = b.bootRate
+  selected.onDuration = b.onDuration
+  selected.offDuration = b.offDuration
+  selected.totalDuration = b.totalDuration
+  selected.show = true
+  hitIdx = idx
+  drawChart()
+}
+
+function onCanvasTap(e) {
+  const idx = hitTest(e.clientX, e.clientY)
+  applySelection(idx)
+}
+
+function onCanvasMove(e) {
+  if (window.matchMedia && window.matchMedia('(hover: hover)').matches) {
+    const idx = hitTest(e.clientX, e.clientY)
+    if (idx !== hitIdx) applySelection(idx)
+  }
+}
+
+function onCanvasLeave() {
+  if (window.matchMedia && window.matchMedia('(hover: hover)').matches) {
+    applySelection(-1)
+  }
+}
+
+async function fetchData() {
+  const { startDate, endDate } = getDateRange()
+  if (!startDate || !endDate) {
+    ElMessage.warning('请选择查询时间')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await apiFetch(`/api/device/bootRate?startDate=${encodeURIComponent(startDate)}&endDate=${encodeURIComponent(endDate)}`)
+    const data = await res.json()
+    list.value = data.list || []
+    if (data.summary) Object.assign(summary, data.summary)
+    selected.show = false
+    hitIdx = -1
+    await nextTick()
+    drawChart()
+  } catch (e) {
+    ElMessage.error('获取数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+let ro = null
+onMounted(() => {
+  setDefaultDate()
+  fetchData()
+  if (chartWrapRef.value && 'ResizeObserver' in window) {
+    ro = new ResizeObserver(() => drawChart())
+    ro.observe(chartWrapRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+</script>
+
+<style scoped>
+.startup-h5 {
+  padding: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-top: 10px;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.subline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #475569;
+  margin-bottom: 8px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.summary-item {
+  background: #f8fafc;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  padding: 10px;
+  min-width: 0;
+}
+
+.summary-item .k {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.1;
+}
+
+.summary-item .v {
+  margin-top: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chart-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.chart-wrap {
+  position: relative;
+  min-width: 100%;
+}
+
+.chart-canvas {
+  height: 320px;
+  display: block;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.6);
+  display: grid;
+  place-items: center;
+}
+
+.spinner {
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-top-color: rgba(64, 158, 255, 0.9);
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tip-card {
+  margin-top: 10px;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(64, 158, 255, 0.06);
+  border: 1px solid rgba(64, 158, 255, 0.18);
+}
+
+.tip-title {
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 6px;
+}
+
+.tip-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #334155;
+  line-height: 1.5;
+}
+
+.tip-line i {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+</style>

+<template>
+  <div class="ts-h5">
+    <div class="toolbar">
+      <div class="left">
+        <div class="mode">日查询</div>
+        <el-date-picker
+          v-model="tsDate"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择日期"
+          size="small"
+          style="width: 150px;"
+          :disabled-date="disabledDate"
+          @change="onDateChange"
+        />
+      </div>
+      <el-button type="primary" size="small" :loading="loading" @click="resetAndFetch">查询</el-button>
+    </div>
+
+    <div class="canvas-card">
+      <div
+        ref="ganttContainerRef"
+        class="gantt-wrap"
+        @wheel.prevent="onGanttWheel"
+        @pointerdown="onPointerDown"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+        @pointercancel="onPointerUp"
+        @pointerleave="onPointerLeave"
+      >
+        <canvas ref="ganttCanvasRef" class="gantt-canvas"></canvas>
+        <div
+          v-if="ganttHoveredSeg"
+          class="gantt-tooltip"
+          :style="{ left: ganttTooltipPos.x + 'px', top: ganttTooltipPos.y + 'px' }"
+        >
+          <div class="gtt-row">
+            <span class="gtt-dot" :style="{ background: getLampColor(ganttHoveredSeg.lampState) }"></span>
+            {{ getLampLabelName(ganttHoveredSeg.lampState) }}: {{ formatDuration(ganttHoveredSeg.duration) }}
+          </div>
+          <div class="gtt-sub">{{ formatTimeRange(ganttHoveredSeg.startTime, ganttHoveredSeg.endTime) }}</div>
+        </div>
+      </div>
+
+      <el-empty v-if="!loading && timeSeriesData.length === 0" description="暂无数据" />
+
+      <div v-if="timeSeriesData.length > 0" class="load-more">
+        <div ref="sentinelRef" class="load-sentinel"></div>
+        <div v-if="loadingMore" class="load-text">加载中...</div>
+        <div v-else-if="!loading && !hasMore" class="load-text">没有更多了</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const tsDate = ref('')
+const loading = ref(false)
+const loadingMore = ref(false)
+const tsPageNo = ref(0)
+const tsPageSize = 12
+const timeSeriesData = ref([])
+const hasMore = ref(true)
+
+const canLoadMore = computed(() => timeSeriesData.value.length > 0 && hasMore.value)
+
+function disabledDate(time) {
+  return time.getTime() > Date.now()
+}
+
+function onDateChange() {
+  resetAndFetch()
+}
+
+function getLampLabelName(lampState) {
+  if (lampState === 3 || lampState === '3') return '绿灯'
+  if (lampState === 2 || lampState === '2') return '黄灯'
+  if (lampState === 1 || lampState === '1') return '红灯'
+  return '灭灯'
+}
+
+function getLampColor(lampState) {
+  if (lampState === 3 || lampState === '3') return '#67c23a'
+  if (lampState === 2 || lampState === '2') return '#e6a23c'
+  if (lampState === 1 || lampState === '1') return '#f56c6c'
+  return '#909399'
+}
+
+function formatDuration(dur) {
+  const v = Number(dur || 0)
+  if (v <= 0) return '0秒'
+  if (v > 3600) {
+    const h = Math.floor(v / 3600)
+    const m = Math.floor((v % 3600) / 60)
+    return `${h}时${m}分`
+  }
+  if (v > 60) {
+    const m = Math.floor(v / 60)
+    const s = Math.floor(v % 60)
+    return `${m}分${s}秒`
+  }
+  return `${Math.floor(v)}秒`
+}
+
+function formatTimeRange(start, end) {
+  const fmt = (ts) => {
+    const d = ts ? new Date(String(ts).replace(/-/g, '/')) : new Date()
+    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')} ${String(
+      d.getHours()
+    ).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
+  }
+  return `${fmt(start)} ~ ${fmt(end || start)}`
+}
+
+function getTimeBounds() {
+  const dateStr = tsDate.value || ''
+  const startDate = dateStr ? new Date(dateStr) : new Date()
+  startDate.setHours(0, 0, 0, 0)
+  const endDate = new Date(startDate)
+  endDate.setHours(23, 59, 59, 999)
+  return { startTime: startDate.getTime(), endTime: endDate.getTime() + 1 }
+}
+
+function parseStartTime(timeStr) {
+  const d = new Date(String(timeStr).replace(/-/g, '/'))
+  return d.getTime()
+}
+
+function resetAndFetch() {
+  tsPageNo.value = 0
+  timeSeriesData.value = []
+  hasMore.value = true
+  ganttZoomLevel.value = 1
+  ganttViewOffsetX.value = 0
+  fetchTimeSeriesData({ page: 1, append: false })
+}
+
+async function fetchTimeSeriesData({ page = 1, append = false } = {}) {
+  if (!tsDate.value) {
+    ElMessage.warning('请选择查询日期')
+    return
+  }
+
+  if (loading.value || loadingMore.value) return
+  if (append && !hasMore.value) return
+  if (append) loadingMore.value = true
+  else loading.value = true
+  try {
+    const params = new URLSearchParams({
+      startDate: tsDate.value,
+      endDate: tsDate.value,
+      pageNo: String(page),
+      pageSize: String(tsPageSize)
+    })
+    const res = await apiFetch(`/api/device/oeeTimeline?${params}`)
+    const data = await res.json()
+    const records = data?.data?.records || []
+    const mapped = records.map(record => ({
+      name: record.deviceName || record.dtuSn || '',
+      rate: Number.parseFloat(record.availabilityRatio || 0).toFixed(1),
+      segments: (record.lampData || []).map(item => ({
+        duration: item.duration,
+        lampState: item.lampState,
+        startTime: item.startTime,
+        endTime: item.endTime || ''
+      }))
+    }))
+    hasMore.value = mapped.length >= tsPageSize
+    timeSeriesData.value = append ? timeSeriesData.value.concat(mapped) : mapped
+    tsPageNo.value = page
+
+    await nextTick()
+    drawGanttChart()
+    await nextTick()
+    ensureAutoLoad()
+  } catch (e) {
+    ElMessage.error('获取时序数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+const ganttCanvasRef = ref(null)
+const ganttContainerRef = ref(null)
+const ganttZoomLevel = ref(1)
+const ganttViewOffsetX = ref(0)
+const GANTT_MIN_ZOOM = 0.06
+const GANTT_MAX_ZOOM = 1
+
+const ganttHoveredSeg = ref(null)
+const ganttTooltipPos = ref({ x: 0, y: 0 })
+
+function clampViewOffset(vo, z, plotW) {
+  const maxVo = Math.max(0, plotW - plotW * z)
+  return Math.max(0, Math.min(maxVo, vo))
+}
+
+function onGanttWheel(e) {
+  const container = ganttContainerRef.value
+  if (!container) return
+  const rect = container.getBoundingClientRect()
+  const PAD = 8
+  const nameColWidth = 100
+  const rateColWidth = 56
+  const leftFixedWidth = nameColWidth + rateColWidth
+  const mx = e.clientX - rect.left - PAD
+  if (mx < leftFixedWidth || mx < 0) return
+
+  const plotW = container.clientWidth - PAD * 2 - leftFixedWidth
+  if (plotW <= 0) return
+
+  const z = ganttZoomLevel.value
+  const vo = ganttViewOffsetX.value
+  const mouseDataX = vo + (mx - leftFixedWidth) * z
+  const delta = e.deltaY < 0 ? 0.8 : 1.25
+  const nextZ = Math.max(GANTT_MIN_ZOOM, Math.min(GANTT_MAX_ZOOM, z * delta))
+  let nextVo = mouseDataX - (mx - leftFixedWidth) * nextZ
+  nextVo = clampViewOffset(nextVo, nextZ, plotW)
+  ganttViewOffsetX.value = nextVo
+  ganttZoomLevel.value = nextZ
+  drawGanttChart()
+}
+
+const drag = ref({ active: false, pointerId: null, startX: 0, startVo: 0, moved: false })
+
+function onPointerDown(e) {
+  if (!ganttContainerRef.value) return
+  drag.value.active = true
+  drag.value.pointerId = e.pointerId
+  drag.value.startX = e.clientX
+  drag.value.startVo = ganttViewOffsetX.value
+  drag.value.moved = false
+  e.currentTarget.setPointerCapture?.(e.pointerId)
+}
+
+function onPointerMove(e) {
+  const container = ganttContainerRef.value
+  if (!container) return
+
+  if (drag.value.active && drag.value.pointerId === e.pointerId) {
+    const dx = e.clientX - drag.value.startX
+    if (Math.abs(dx) > 4) drag.value.moved = true
+
+    const PAD = 8
+    const nameColWidth = 100
+    const rateColWidth = 56
+    const leftFixedWidth = nameColWidth + rateColWidth
+    const plotW = container.clientWidth - PAD * 2 - leftFixedWidth
+    if (plotW > 0) {
+      const z = ganttZoomLevel.value
+      let nextVo = drag.value.startVo - dx * z
+      nextVo = clampViewOffset(nextVo, z, plotW)
+      ganttViewOffsetX.value = nextVo
+      drawGanttChart()
+    }
+    return
+  }
+
+  if (e.pointerType === 'mouse') onHitTest(e)
+}
+
+function onPointerUp(e) {
+  if (drag.value.active && drag.value.pointerId === e.pointerId) {
+    drag.value.active = false
+    drag.value.pointerId = null
+    if (!drag.value.moved) onHitTest(e)
+  }
+}
+
+function onPointerLeave() {
+  if (ganttHoveredSeg.value) {
+    ganttHoveredSeg.value = null
+    drawGanttChart()
+  }
+}
+
+function onHitTest(e) {
+  const container = ganttContainerRef.value
+  if (!container) return
+  const rect = container.getBoundingClientRect()
+  const PAD = 8
+  const nameColWidth = 100
+  const rateColWidth = 56
+  const leftFixedWidth = nameColWidth + rateColWidth
+  const mx = e.clientX - rect.left - PAD
+  const my = e.clientY - rect.top - PAD
+  if (mx < leftFixedWidth || mx < 0) {
+    if (ganttHoveredSeg.value) {
+      ganttHoveredSeg.value = null
+      drawGanttChart()
+    }
+    return
+  }
+
+  const rowHeight = 34
+  const headerHeight = 36
+  const rowIdx = Math.floor((my - headerHeight) / rowHeight)
+  if (rowIdx < 0 || rowIdx >= timeSeriesData.value.length) {
+    if (ganttHoveredSeg.value) {
+      ganttHoveredSeg.value = null
+      drawGanttChart()
+    }
+    return
+  }
+
+  const dev = timeSeriesData.value[rowIdx]
+  const { startTime: tStart, endTime: tEnd } = getTimeBounds()
+  const totalMs = tEnd - tStart || 86400000
+  const plotW = container.clientWidth - PAD * 2 - leftFixedWidth
+  const barPad = 4
+  const innerPlotW = plotW - barPad * 2
+  const z = ganttZoomLevel.value
+  const vo = ganttViewOffsetX.value
+  const mouseDataX = vo + (mx - leftFixedWidth) * z
+
+  const rowY = headerHeight + rowIdx * rowHeight
+  const barY = rowY + (rowHeight - 16) / 2
+  const barH = 16
+  if (my < barY || my > barY + barH) {
+    if (ganttHoveredSeg.value) {
+      ganttHoveredSeg.value = null
+      drawGanttChart()
+    }
+    return
+  }
+
+  let hitSeg = null
+  for (let i = (dev.segments || []).length - 1; i >= 0; i--) {
+    const seg = dev.segments[i]
+    const segStartMs = parseStartTime(seg.startTime)
+    const durMs = (seg.duration || 0) * 1000
+    const pct = Math.max(0, (segStartMs - tStart) / totalMs)
+    const wPct = durMs / totalMs
+    const dataSx = barPad + pct * innerPlotW
+    const dataSw = Math.max(wPct * innerPlotW, 1)
+    if (mouseDataX >= dataSx && mouseDataX <= dataSx + dataSw) {
+      hitSeg = seg
+      break
+    }
+  }
+
+  if (hitSeg !== ganttHoveredSeg.value) {
+    ganttHoveredSeg.value = hitSeg
+    if (hitSeg) {
+      ganttTooltipPos.value = { x: mx + PAD + 8, y: my + PAD + 8 }
+    }
+    drawGanttChart()
+  } else if (hitSeg) {
+    ganttTooltipPos.value = { x: mx + PAD + 8, y: my + PAD + 8 }
+  }
+}
+
+function drawGanttChart() {
+  const canvas = ganttCanvasRef.value
+  const container = ganttContainerRef.value
+  if (!canvas || !container) return
+
+  const PAD = 8
+  const rowHeight = 34
+  const headerHeight = 36
+  const nameColWidth = 100
+  const rateColWidth = 56
+  const leftFixedWidth = nameColWidth + rateColWidth
+  const containerW = container.clientWidth - PAD * 2
+  const plotW = containerW - leftFixedWidth
+  const totalHeight = Math.max(headerHeight + timeSeriesData.value.length * rowHeight, 200)
+
+  canvas.width = containerW
+  canvas.height = totalHeight
+  canvas.style.width = containerW + 'px'
+  canvas.style.height = totalHeight + 'px'
+
+  const ctx = canvas.getContext('2d')
+  const W = containerW
+  const H = totalHeight
+
+  ctx.fillStyle = '#fff'
+  ctx.fillRect(0, 0, W, H)
+
+  const { startTime: tStart, endTime: tEnd } = getTimeBounds()
+  const totalMs = tEnd - tStart || 86400000
+
+  const z = ganttZoomLevel.value
+  const vo = clampViewOffset(ganttViewOffsetX.value, z, plotW)
+  ganttViewOffsetX.value = vo
+
+  ctx.fillStyle = '#fafafa'
+  ctx.fillRect(0, 0, leftFixedWidth, headerHeight)
+  ctx.strokeStyle = '#e0e0e0'
+  ctx.lineWidth = 2
+  ctx.beginPath()
+  ctx.moveTo(0, headerHeight)
+  ctx.lineTo(leftFixedWidth, headerHeight)
+  ctx.stroke()
+  ctx.fillStyle = '#333'
+  ctx.font = 'bold 12px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText('设备', nameColWidth / 2, headerHeight / 2)
+  ctx.fillText('稼动', nameColWidth + rateColWidth / 2, headerHeight / 2)
+  ctx.strokeStyle = '#ebeef5'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo(nameColWidth, 0)
+  ctx.lineTo(nameColWidth, H)
+  ctx.stroke()
+  ctx.beginPath()
+  ctx.moveTo(leftFixedWidth, 0)
+  ctx.lineTo(leftFixedWidth, H)
+  ctx.stroke()
+
+  timeSeriesData.value.forEach((dev, idx) => {
+    const y = headerHeight + idx * rowHeight
+    ctx.fillStyle = idx % 2 === 0 ? '#fff' : '#fafbfc'
+    ctx.fillRect(0, y, leftFixedWidth, rowHeight)
+    ctx.strokeStyle = '#ebeef5'
+    ctx.beginPath()
+    ctx.moveTo(0, y)
+    ctx.lineTo(leftFixedWidth, y)
+    ctx.stroke()
+    ctx.fillStyle = '#409eff'
+    ctx.font = '11px sans-serif'
+    ctx.textAlign = 'left'
+    ctx.textBaseline = 'middle'
+    const dn = dev.name.length > 9 ? dev.name.slice(0, 9) + '..' : dev.name
+    ctx.fillText(dn, 8, y + rowHeight / 2)
+    ctx.fillStyle = '#333'
+    ctx.font = 'bold 11px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText(`${dev.rate}%`, nameColWidth + rateColWidth / 2, y + rowHeight / 2)
+  })
+
+  ctx.fillStyle = '#fafafa'
+  ctx.fillRect(leftFixedWidth, 0, plotW, headerHeight)
+  ctx.strokeStyle = '#e0e0e0'
+  ctx.lineWidth = 2
+  ctx.beginPath()
+  ctx.moveTo(leftFixedWidth, headerHeight)
+  ctx.lineTo(W, headerHeight)
+  ctx.stroke()
+
+  const visMs = Math.max(1000, totalMs * z)
+  let stepMs = 2 * 3600 * 1000
+  if (visMs <= 600000) stepMs = 15 * 60 * 1000
+  else if (visMs <= 1800000) stepMs = 30 * 60 * 1000
+  else if (visMs <= 28800000) stepMs = 3600 * 1000
+  else stepMs = 2 * 3600 * 1000
+
+  const leftMs = (vo / plotW) * totalMs
+  let firstMs = Math.floor(leftMs / stepMs) * stepMs
+  if (firstMs < 0) firstMs = 0
+
+  ctx.font = '10px sans-serif'
+  ctx.fillStyle = '#666'
+  for (let ms = firstMs; ms <= totalMs + stepMs * 2; ms += stepMs) {
+    const dataX = (ms / totalMs) * plotW
+    const screenX = leftFixedWidth + (dataX - vo) / z
+    if (screenX < leftFixedWidth - 60 || screenX > W + 60) continue
+    const dt = new Date(tStart + ms)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(`${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`, screenX, headerHeight / 2)
+    ctx.strokeStyle = '#f0f0f0'
+    ctx.lineWidth = 0.5
+    ctx.beginPath()
+    ctx.moveTo(screenX, headerHeight)
+    ctx.lineTo(screenX, H)
+    ctx.stroke()
+  }
+
+  timeSeriesData.value.forEach((dev, idx) => {
+    const y = headerHeight + idx * rowHeight
+    ctx.fillStyle = idx % 2 === 0 ? '#fff' : '#fafbfc'
+    ctx.fillRect(leftFixedWidth, y, W - leftFixedWidth, rowHeight)
+    ctx.strokeStyle = '#ebeef5'
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.moveTo(leftFixedWidth, y)
+    ctx.lineTo(W, y)
+    ctx.stroke()
+
+    const segs = dev.segments || []
+    if (segs.length === 0) return
+
+    const barY = y + (rowHeight - 16) / 2
+    const barH = 16
+    const barPad = 4
+    const innerPlotW = plotW - barPad * 2
+
+    ctx.save()
+    ctx.beginPath()
+    ctx.rect(leftFixedWidth, headerHeight, W - leftFixedWidth, H - headerHeight)
+    ctx.clip()
+
+    segs.forEach(seg => {
+      const segStartMs = parseStartTime(seg.startTime)
+      const durMs = (seg.duration || 0) * 1000
+      const pct = Math.max(0, (segStartMs - tStart) / totalMs)
+      const wPct = durMs / totalMs
+      const dataSx = barPad + pct * innerPlotW
+      const dataSw = Math.max(wPct * innerPlotW, 1)
+      const sx = leftFixedWidth + (dataSx - vo) / z
+      const sw = dataSw / z
+      if (sx + sw < leftFixedWidth - 20 || sx > W + 20) return
+
+      const isHovered = ganttHoveredSeg.value === seg
+      ctx.fillStyle = getLampColor(seg.lampState)
+      if (isHovered) {
+        ctx.globalAlpha = 0.7
+        ctx.fillRect(sx, barY - 2, sw, barH + 4)
+        ctx.globalAlpha = 1
+        ctx.strokeStyle = 'rgba(0,0,0,0.5)'
+        ctx.lineWidth = 1.5
+        ctx.strokeRect(sx, barY - 2, sw, barH + 4)
+      } else {
+        ctx.fillRect(sx, barY, sw, barH)
+        ctx.strokeStyle = 'rgba(255,255,255,0.35)'
+        ctx.lineWidth = 0.5
+        ctx.strokeRect(sx, barY, sw, barH)
+      }
+    })
+
+    ctx.restore()
+  })
+}
+
+const sentinelRef = ref(null)
+let sentinelObserver = null
+let ensureTimer = null
+
+function loadMoreIfNeeded() {
+  if (loading.value || loadingMore.value) return
+  if (!canLoadMore.value) return
+  const nextPage = tsPageNo.value + 1
+  fetchTimeSeriesData({ page: nextPage, append: true })
+}
+
+function ensureAutoLoad() {
+  if (ensureTimer) return
+  ensureTimer = window.setTimeout(() => {
+    ensureTimer = null
+    if (!sentinelRef.value) return
+    if (loading.value || loadingMore.value) return
+    if (!canLoadMore.value) return
+    const rect = sentinelRef.value.getBoundingClientRect()
+    const vh = window.innerHeight || document.documentElement.clientHeight
+    if (rect.top <= vh + 200) loadMoreIfNeeded()
+  }, 0)
+}
+
+function attachObserver() {
+  if (!sentinelRef.value) return
+  if (!('IntersectionObserver' in window)) return
+  if (sentinelObserver) return
+  sentinelObserver = new IntersectionObserver(
+    (entries) => {
+      if (entries.some(e => e.isIntersecting)) loadMoreIfNeeded()
+    },
+    { root: null, rootMargin: '300px 0px 300px 0px', threshold: 0 }
+  )
+  sentinelObserver.observe(sentinelRef.value)
+}
+
+function detachObserver() {
+  if (sentinelObserver) {
+    sentinelObserver.disconnect()
+    sentinelObserver = null
+  }
+}
+
+onMounted(() => {
+  const today = new Date()
+  tsDate.value = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+  resetAndFetch()
+  attachObserver()
+})
+
+onBeforeUnmount(() => {
+  detachObserver()
+  if (ensureTimer) {
+    window.clearTimeout(ensureTimer)
+    ensureTimer = null
+  }
+})
+
+onActivated(() => {
+  attachObserver()
+  ensureAutoLoad()
+})
+
+onDeactivated(() => {
+  detachObserver()
+})
+</script>
+
+<style scoped>
+.ts-h5 {
+  padding: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mode {
+  font-size: 12px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.canvas-card {
+  margin-top: 10px;
+}
+
+.gantt-wrap {
+  position: relative;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 8px;
+  overflow: hidden;
+  touch-action: pan-y;
+}
+
+.gantt-canvas {
+  width: 100%;
+  display: block;
+}
+
+.gantt-tooltip {
+  position: absolute;
+  min-width: 180px;
+  max-width: 240px;
+  padding: 8px 10px;
+  background: rgba(17, 24, 39, 0.92);
+  color: #fff;
+  font-size: 12px;
+  border-radius: 10px;
+  pointer-events: none;
+}
+
+.gtt-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1.45;
+}
+
+.gtt-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.gtt-sub {
+  margin-top: 6px;
+  opacity: 0.9;
+  line-height: 1.35;
+  word-break: break-all;
+}
+
+.page-info,
+.load-text {
+  font-size: 12px;
+  color: #475569;
+}
+
+.load-more {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.load-sentinel {
+  height: 1px;
+}
+</style>

+<template>
+  <div class="util-h5">
+    <div class="toolbar">
+      <div class="left">
+        <el-radio-group v-model="utilQueryMode" size="small" @change="onModeChange">
+          <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>
+      </div>
+      <el-button type="primary" size="small" :loading="utilLoading" @click="fetchUtilData">查询</el-button>
+    </div>
+
+    <div class="toolbar" style="margin-top: 8px;">
+      <div class="left">
+        <el-date-picker
+          v-if="utilQueryMode === 'day'"
+          v-model="utilDate"
+          type="date"
+          placeholder="选择日期"
+          size="small"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disabledDateFuture"
+          style="width: 160px;"
+          @change="fetchUtilData"
+        />
+        <el-date-picker
+          v-else-if="utilQueryMode === 'week'"
+          v-model="utilWeekDate"
+          type="date"
+          :format="utilWeekDisplayFormat"
+          placeholder="选择周"
+          size="small"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disableNonMonday"
+          style="width: 160px;"
+          @change="fetchUtilData"
+        />
+        <el-date-picker
+          v-else
+          v-model="utilMonthDate"
+          type="month"
+          placeholder="选择月份"
+          size="small"
+          value-format="YYYY-MM"
+          style="width: 140px;"
+          @change="fetchUtilData"
+        />
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">总时长</div>
+      <div class="legend-total">
+        <div v-for="(seg, i) in utilTotalSegments" :key="i" class="legend-total-item">
+          <div class="lt-left">
+            <span class="dot" :style="{ background: seg.color }"></span>
+            <span class="name">{{ seg.label }}</span>
+          </div>
+          <div class="lt-right">
+            <div class="val">{{ seg.duration }}</div>
+            <div class="pct">{{ seg.pct }}</div>
+          </div>
+        </div>
+      </div>
+      <div ref="pieTotalWrapRef" class="pie-wrap">
+        <canvas ref="pieTotalRef" class="pie-canvas"></canvas>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">稼动率</div>
+      <div class="subline">稼动率：{{ utilData.availabilityRate || '0%' }}</div>
+      <div ref="pieRateWrapRef" class="pie-wrap">
+        <canvas ref="pieRateRef" class="pie-canvas"></canvas>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">当前机台运行状态</div>
+      <div class="legend">
+        <div class="legend-item">
+          <span class="dot" style="background:#67c23a"></span><span class="name">绿灯</span><span class="val">{{ utilData.currentStatus.green || 0 }}台</span>
+        </div>
+        <div class="legend-item">
+          <span class="dot" style="background:#e6a23c"></span><span class="name">黄灯</span><span class="val">{{ utilData.currentStatus.yellow || 0 }}台</span>
+        </div>
+        <div class="legend-item">
+          <span class="dot" style="background:#f56c6c"></span><span class="name">红灯</span><span class="val">{{ utilData.currentStatus.red || 0 }}台</span>
+        </div>
+        <div class="legend-item">
+          <span class="dot" style="background:#909399"></span><span class="name">灭灯</span><span class="val">{{ utilData.currentStatus.off || 0 }}台</span>
+        </div>
+      </div>
+      <div ref="pieStatusWrapRef" class="pie-wrap">
+        <canvas ref="pieStatusRef" class="pie-canvas"></canvas>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">异常机台排名</div>
+      <div class="subline">黄灯 + 红灯时长</div>
+      <div ref="abnormalWrapRef" class="chart-wrap">
+        <canvas ref="abnormalRef" class="chart-canvas"></canvas>
+      </div>
+      <el-empty v-if="!utilLoading && abnormalList.length === 0" description="暂无异常数据" />
+    </div>
+
+    <div class="section">
+      <div class="section-title">排序</div>
+      <div class="stack-toolbar">
+        <el-radio-group v-model="sortMode" size="small" @change="redrawStackBar">
+          <el-radio-button value="duration">绿灯时长</el-radio-button>
+          <el-radio-button value="rate">稼动率</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="stack-legend">
+        <span class="leg"><i class="dot" style="background:#67c23a"></i>绿灯</span>
+        <span class="leg"><i class="dot" style="background:#e6a23c"></i>黄灯</span>
+        <span class="leg"><i class="dot" style="background:#f56c6c"></i>红灯</span>
+        <span class="leg"><i class="dot" style="background:#909399"></i>灭灯</span>
+      </div>
+      <div class="stack-scroll">
+        <div ref="stackWrapRef" class="stack-wrap">
+          <canvas ref="stackRef" class="stack-canvas"></canvas>
+        </div>
+      </div>
+      <el-empty v-if="!utilLoading && (utilData.deviceList || []).length === 0" description="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiFetch } from '../../config/api.js'
+
+const utilQueryMode = ref('day')
+const utilDate = ref('')
+const utilWeekDate = ref('')
+const utilMonthDate = ref('')
+const utilLoading = ref(false)
+const sortMode = ref('rate')
+
+const utilData = reactive({
+  totalDuration: { green: {}, yellow: {}, red: {}, off: {}, blue: {} },
+  availabilityRate: '0%',
+  currentStatus: { green: 0, red: 0, off: 0, blue: 0, yellow: 0 },
+  abnormalRanking: [],
+  deviceList: []
+})
+
+const utilWeekDisplayFormat = computed(() => {
+  if (!utilWeekDate.value) return ''
+  const d = new Date(utilWeekDate.value)
+  return `${d.getFullYear()}-${String(getWeekNumber(d)).padStart(2, '0')}周`
+})
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+
+function getWeekNumber(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum)
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
+  return Math.ceil(((d - yearStart) / 86400000 + 1) / 7)
+}
+
+function formatYMD(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function getCurrentMonday() {
+  const today = new Date()
+  const day = today.getDay() || 7
+  today.setDate(today.getDate() - day + 1)
+  return formatYMD(today)
+}
+
+function getCurrentYM() {
+  const now = new Date()
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+function getWeekRange(dateStr) {
+  if (!dateStr) return { start: '', end: '' }
+  const d = new Date(dateStr)
+  const day = d.getDay() || 7
+  const diff = d.getDate() - day + 1
+  const monday = new Date(d.setDate(diff))
+  const sunday = new Date(monday)
+  sunday.setDate(monday.getDate() + 6)
+  return { start: formatYMD(monday), end: formatYMD(sunday) }
+}
+
+function getMonthRange(ymStr) {
+  if (!ymStr) return { start: '', end: '' }
+  const [y, m] = ymStr.split('-').map(Number)
+  const lastDay = new Date(y, m, 0).getDate()
+  return { start: `${ymStr}-01`, end: `${ymStr}-${String(lastDay).padStart(2, '0')}` }
+}
+
+function disableNonMonday(date) {
+  return date.getDay() !== 1
+}
+
+function setDefaultDate() {
+  if (utilQueryMode.value === 'day') {
+    if (!utilDate.value) utilDate.value = formatYMD(new Date())
+  } else if (utilQueryMode.value === 'week') {
+    if (!utilWeekDate.value) utilWeekDate.value = getCurrentMonday()
+  } else {
+    if (!utilMonthDate.value) utilMonthDate.value = getCurrentYM()
+  }
+}
+
+function onModeChange() {
+  setDefaultDate()
+  fetchUtilData()
+}
+
+function fmtSecHour(sec) {
+  sec = Math.max(0, sec || 0)
+  return (sec / 3600).toFixed(2) + '时'
+}
+
+function fmtSec(sec) {
+  sec = Math.max(0, sec | 0)
+  const h = Math.floor(sec / 3600)
+  const m = Math.floor((sec % 3600) / 60)
+  const s = sec % 60
+  if (h > 0) return `${h}时${m}分${s}秒`
+  if (m > 0) return `${m}分${s}秒`
+  return `${s}秒`
+}
+
+const utilTotalSegments = computed(() => {
+  const td = utilData.totalDuration
+  const totalSec = (td.green?.seconds || 0) + (td.yellow?.seconds || 0) + (td.red?.seconds || 0) + (td.off?.seconds || 0)
+  if (!totalSec) return []
+  return [
+    { label: '绿灯', color: '#67c23a', duration: td.green?.duration || '', pct: (((td.green?.seconds || 0) / totalSec) * 100).toFixed(2) + '%' },
+    { label: '黄灯', color: '#e6a23c', duration: td.yellow?.duration || '', pct: (((td.yellow?.seconds || 0) / totalSec) * 100).toFixed(2) + '%' },
+    { label: '红灯', color: '#f56c6c', duration: td.red?.duration || '', pct: (((td.red?.seconds || 0) / totalSec) * 100).toFixed(2) + '%' },
+    { label: '灭灯', color: '#909399', duration: td.off?.duration || '', pct: (((td.off?.seconds || 0) / totalSec) * 100).toFixed(2) + '%' }
+  ]
+})
+
+const abnormalList = computed(() => {
+  return (utilData.abnormalRanking || []).filter(item => (item.yellowSeconds || 0) + (item.redSeconds || 0) > 0)
+})
+
+const pieTotalRef = ref(null)
+const pieRateRef = ref(null)
+const pieStatusRef = ref(null)
+const abnormalRef = ref(null)
+const stackRef = ref(null)
+
+const pieTotalWrapRef = ref(null)
+const pieRateWrapRef = ref(null)
+const pieStatusWrapRef = ref(null)
+const abnormalWrapRef = ref(null)
+const stackWrapRef = ref(null)
+
+const dpr = window.devicePixelRatio || 1
+function setupCanvas(canvas, cssW, cssH) {
+  canvas.style.width = cssW + 'px'
+  canvas.style.height = cssH + 'px'
+  canvas.width = Math.round(cssW * dpr)
+  canvas.height = Math.round(cssH * dpr)
+  const ctx = canvas.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return { ctx, W: cssW, H: cssH }
+}
+
+function drawPie(ctx, cx, cy, r, segments) {
+  const total = segments.reduce((s, seg) => s + seg.value, 0)
+  if (total <= 0) return
+  let angle = -Math.PI / 2
+  segments.forEach(seg => {
+    const sweep = (seg.value / total) * Math.PI * 2
+    ctx.beginPath()
+    ctx.moveTo(cx, cy)
+    ctx.arc(cx, cy, r, angle, angle + sweep)
+    ctx.closePath()
+    ctx.fillStyle = seg.color
+    ctx.fill()
+    ctx.strokeStyle = 'rgba(255,255,255,0.5)'
+    ctx.lineWidth = 0.8
+    ctx.stroke()
+
+    if (seg.value > 0) {
+      const midAngle = angle + sweep / 2
+      const labelR = r * 0.62
+      const lx = cx + Math.cos(midAngle) * labelR
+      const ly = cy + Math.sin(midAngle) * labelR
+      const pct = ((seg.value / total) * 100).toFixed(2) + '%'
+      ctx.save()
+      ctx.fillStyle = '#fff'
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.font = 'bold 12px sans-serif'
+      ctx.fillText(pct, lx, ly - 7)
+      ctx.font = '10px sans-serif'
+      ctx.fillText(seg.textLabel || '', lx, ly + 8)
+      ctx.restore()
+    }
+    angle += sweep
+  })
+}
+
+function drawTotalPie() {
+  const canvas = pieTotalRef.value
+  const wrap = pieTotalWrapRef.value
+  if (!canvas || !wrap) return
+  const cssSize = Math.max(240, Math.min(320, wrap.clientWidth || 0))
+  const { ctx, W, H } = setupCanvas(canvas, cssSize, cssSize)
+  ctx.clearRect(0, 0, W, H)
+  const td = utilData.totalDuration
+  const gSec = td.green?.seconds || 0
+  const ySec = td.yellow?.seconds || 0
+  const rSec = td.red?.seconds || 0
+  const oSec = td.off?.seconds || 0
+  const totalSec = gSec + ySec + rSec + oSec
+  const cx = W / 2
+  const cy = H / 2
+  const r = Math.min(W, H) / 2 - 16
+  if (totalSec <= 0) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+  drawPie(ctx, cx, cy, r, [
+    { label: '绿灯', value: gSec, color: '#67c23a', textLabel: '绿灯' },
+    { label: '黄灯', value: ySec, color: '#e6a23c', textLabel: `黄灯:${fmtSecHour(ySec)}` },
+    { label: '红灯', value: rSec, color: '#f56c6c', textLabel: `红灯:${fmtSecHour(rSec)}` },
+    { label: '灭灯', value: oSec, color: '#909399', textLabel: `灭灯:${fmtSecHour(oSec)}` }
+  ])
+}
+
+function drawRatePie() {
+  const canvas = pieRateRef.value
+  const wrap = pieRateWrapRef.value
+  if (!canvas || !wrap) return
+  const cssSize = Math.max(240, Math.min(320, wrap.clientWidth || 0))
+  const { ctx, W, H } = setupCanvas(canvas, cssSize, cssSize)
+  ctx.clearRect(0, 0, W, H)
+  const td = utilData.totalDuration
+  const gSec = td.green?.seconds || 0
+  const ySec = td.yellow?.seconds || 0
+  const rSec = td.red?.seconds || 0
+  const total = gSec + ySec + rSec
+  const cx = W / 2
+  const cy = H / 2
+  const r = Math.min(W, H) / 2 - 16
+  if (total <= 0) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+  drawPie(ctx, cx, cy, r, [
+    { label: '绿灯', value: gSec, color: '#67c23a', textLabel: `绿灯:${fmtSecHour(gSec)}` },
+    { label: '黄灯', value: ySec, color: '#e6a23c', textLabel: `黄灯:${fmtSecHour(ySec)}` },
+    { label: '红灯', value: rSec, color: '#f56c6c', textLabel: `红灯:${fmtSecHour(rSec)}` }
+  ])
+}
+
+function drawStatusPie() {
+  const canvas = pieStatusRef.value
+  const wrap = pieStatusWrapRef.value
+  if (!canvas || !wrap) return
+  const cssSize = Math.max(240, Math.min(320, wrap.clientWidth || 0))
+  const { ctx, W, H } = setupCanvas(canvas, cssSize, cssSize)
+  ctx.clearRect(0, 0, W, H)
+  const cs = utilData.currentStatus
+  const gN = cs.green || 0
+  const yN = cs.yellow || 0
+  const rN = cs.red || 0
+  const oN = cs.off || 0
+  const total = gN + yN + rN + oN
+  const cx = W / 2
+  const cy = H / 2
+  const r = Math.min(W, H) / 2 - 16
+  if (total <= 0) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+  drawPie(ctx, cx, cy, r, [
+    { label: '绿灯', value: gN, color: '#67c23a', textLabel: `绿灯${gN}台` },
+    { label: '黄灯', value: yN, color: '#e6a23c', textLabel: `黄灯${yN}台` },
+    { label: '红灯', value: rN, color: '#f56c6c', textLabel: `红灯${rN}台` },
+    { label: '灭灯', value: oN, color: '#909399', textLabel: `灭灯${oN}台` }
+  ])
+}
+
+function drawAbnormal() {
+  const canvas = abnormalRef.value
+  const wrap = abnormalWrapRef.value
+  if (!canvas || !wrap) return
+  const list = abnormalList.value
+  const cssW = Math.max(300, wrap.clientWidth)
+  const cssH = Math.min(420, Math.max(220, list.length * 26 + 60))
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+  if (list.length === 0) return
+
+  const PAD_L = 64
+  const PAD_R = 14
+  const PAD_T = 30
+  const PAD_B = 10
+  const plotW = W - PAD_L - PAD_R
+  const plotH = H - PAD_T - PAD_B
+  const rowH = Math.min(24, plotH / list.length)
+  const barH = rowH - 6
+
+  let maxVal = 1
+  list.forEach(item => {
+    maxVal = Math.max(maxVal, (item.yellowSeconds || 0) + (item.redSeconds || 0))
+  })
+
+  const tickCount = 4
+  ctx.strokeStyle = '#eee'
+  ctx.lineWidth = 1
+  ctx.fillStyle = '#64748b'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'center'
+  for (let i = 0; i <= tickCount; i++) {
+    const val = (maxVal * i) / tickCount
+    const x = PAD_L + (plotW * i) / tickCount
+    ctx.fillText(fmtSec(Math.round(val)), x, 16)
+    if (i > 0) {
+      ctx.beginPath()
+      ctx.moveTo(x, PAD_T)
+      ctx.lineTo(x, H - PAD_B)
+      ctx.stroke()
+    }
+  }
+
+  ctx.strokeStyle = '#ddd'
+  ctx.lineWidth = 1.5
+  ctx.beginPath()
+  ctx.moveTo(PAD_L, PAD_T)
+  ctx.lineTo(W - PAD_R, PAD_T)
+  ctx.stroke()
+
+  list.slice(0, 12).forEach((item, idx) => {
+    const y = PAD_T + idx * rowH
+    ctx.fillStyle = '#0f172a'
+    ctx.font = '11px sans-serif'
+    ctx.textAlign = 'right'
+    ctx.textBaseline = 'middle'
+    const dn = (item.deviceName || item.dtuSn || '').slice(0, 8)
+    ctx.fillText(dn, PAD_L - 8, y + rowH / 2)
+
+    const yS = item.yellowSeconds || 0
+    const rS = item.redSeconds || 0
+    const yW = (yS / maxVal) * plotW
+    const rW = (rS / maxVal) * plotW
+    ctx.fillStyle = '#e6a23c'
+    ctx.fillRect(PAD_L, y + 3, yW, barH)
+    ctx.fillStyle = '#f56c6c'
+    ctx.fillRect(PAD_L + yW, y + 3, rW, barH)
+  })
+}
+
+function drawStackBar() {
+  const canvas = stackRef.value
+  const wrap = stackWrapRef.value
+  if (!canvas || !wrap) return
+  const list = utilData.deviceList || []
+  if (list.length === 0) {
+    const { ctx, W, H } = setupCanvas(canvas, Math.max(320, wrap.clientWidth), 260)
+    ctx.clearRect(0, 0, W, H)
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('暂无数据', W / 2, H / 2)
+    return
+  }
+
+  const sorted = sortMode.value === 'rate'
+    ? [...list].sort((a, b) => parseFloat(b.availabilityRatio || 0) - parseFloat(a.availabilityRatio || 0))
+    : [...list].sort((a, b) => (b.greenSeconds || 0) - (a.greenSeconds || 0))
+
+  const PAD_L = 36
+  const PAD_R = 16
+  const PAD_T = 18
+  const PAD_B = 44
+  const colW = 18
+  const gap = 8
+  const minW = Math.max(320, wrap.clientWidth)
+  const cssW = Math.max(minW, PAD_L + PAD_R + sorted.length * (colW + gap) + gap)
+  const cssH = 280
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+
+  const plotW = W - PAD_L - PAD_R
+  const plotH = H - PAD_T - PAD_B
+
+  let maxVal = 1
+  sorted.forEach(item => {
+    const t = (item.greenSeconds || 0) + (item.yellowSeconds || 0) + (item.redSeconds || 0) + (item.offSeconds || 0)
+    maxVal = Math.max(maxVal, t)
+  })
+
+  const maxHours = maxVal / 3600 || 1
+  const yTicks = [Math.ceil(maxHours), Math.ceil(maxHours * 0.66), Math.ceil(maxHours * 0.33), 0]
+  ctx.strokeStyle = '#f0f0f0'
+  ctx.lineWidth = 1
+  ctx.fillStyle = '#94a3b8'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'end'
+  yTicks.forEach(val => {
+    const py = PAD_T + plotH * (1 - val / maxHours)
+    ctx.fillText(val + '时', PAD_L - 4, py + 3)
+    ctx.beginPath()
+    ctx.moveTo(PAD_L, py)
+    ctx.lineTo(W - PAD_R, py)
+    ctx.stroke()
+  })
+
+  ctx.strokeStyle = '#ddd'
+  ctx.beginPath()
+  ctx.moveTo(PAD_L, PAD_T + plotH)
+  ctx.lineTo(W - PAD_R, PAD_T + plotH)
+  ctx.stroke()
+
+  const scale = plotH / maxVal
+  sorted.forEach((item, idx) => {
+    const px = PAD_L + gap + idx * (colW + gap)
+    const gS = item.greenSeconds || 0
+    const yS = item.yellowSeconds || 0
+    const rS = item.redSeconds || 0
+    const oS = item.offSeconds || 0
+    const total = gS + yS + rS + oS
+    if (total <= 0) return
+    let curY = PAD_T + plotH
+    const gH = gS * scale
+    curY -= gH
+    ctx.fillStyle = '#67c23a'
+    ctx.fillRect(px, curY, colW, gH)
+    const yH = yS * scale
+    curY -= yH
+    ctx.fillStyle = '#e6a23c'
+    ctx.fillRect(px, curY, colW, yH)
+    const rH = rS * scale
+    curY -= rH
+    ctx.fillStyle = '#f56c6c'
+    ctx.fillRect(px, curY, colW, rH)
+    const oH = oS * scale
+    curY -= oH
+    ctx.fillStyle = '#909399'
+    ctx.fillRect(px, curY, colW, oH)
+
+    ctx.fillStyle = '#64748b'
+    ctx.font = '9px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.save()
+    ctx.translate(px + colW / 2, PAD_T + plotH + 12)
+    ctx.rotate(-Math.PI / 6)
+    const dn = (item.deviceName || item.dtuSn || '').replace(/中速|高速|号机/g, '').slice(0, 6)
+    ctx.fillText(dn, 0, 0)
+    ctx.restore()
+  })
+}
+
+function drawAll() {
+  drawTotalPie()
+  drawRatePie()
+  drawStatusPie()
+  drawAbnormal()
+  drawStackBar()
+}
+
+function redrawStackBar() {
+  nextTick(drawStackBar)
+}
+
+async function fetchUtilData() {
+  let startDate = ''
+  let endDate = ''
+  if (utilQueryMode.value === 'day') {
+    if (!utilDate.value) { ElMessage.warning('请选择查询日期'); return }
+    startDate = endDate = utilDate.value
+  } else if (utilQueryMode.value === 'week') {
+    if (!utilWeekDate.value) { ElMessage.warning('请选择查询周'); return }
+    const range = getWeekRange(utilWeekDate.value)
+    startDate = range.start
+    endDate = range.end
+  } else {
+    if (!utilMonthDate.value) { ElMessage.warning('请选择查询月份'); return }
+    const range = getMonthRange(utilMonthDate.value)
+    startDate = range.start
+    endDate = range.end
+  }
+
+  utilLoading.value = true
+  try {
+    const res = await apiFetch(`/api/device/lampStatistics?startDate=${encodeURIComponent(startDate)}&endDate=${encodeURIComponent(endDate)}`)
+    const data = await res.json()
+    if (data.totalDuration) Object.assign(utilData.totalDuration, data.totalDuration)
+    if (data.availabilityRate) utilData.availabilityRate = data.availabilityRate
+    if (data.currentStatus) Object.assign(utilData.currentStatus, data.currentStatus)
+    utilData.abnormalRanking = data.abnormalRanking || []
+    utilData.deviceList = data.deviceList || []
+    await nextTick()
+    drawAll()
+  } catch (e) {
+    ElMessage.error('获取数据失败')
+    console.warn(e)
+  } finally {
+    utilLoading.value = false
+  }
+}
+
+let ro = null
+onMounted(() => {
+  setDefaultDate()
+  fetchUtilData()
+  const target = pieTotalWrapRef.value || null
+  if (target && 'ResizeObserver' in window) {
+    ro = new ResizeObserver(() => { drawAll() })
+    ro.observe(target)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+
+watch(() => utilData.totalDuration, () => nextTick(drawAll), { deep: true })
+</script>
+
+<style scoped>
+.util-h5 {
+  padding: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-top: 10px;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.subline {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 8px;
+}
+
+.legend {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.legend-item {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #475569;
+}
+
+.legend-item .val {
+  justify-self: end;
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.legend-item .pct {
+  justify-self: end;
+  color: #64748b;
+  margin-left: 6px;
+}
+
+.legend-total {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+  margin-bottom: 8px;
+}
+
+.legend-total-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.lt-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.lt-left .name {
+  font-size: 12px;
+  color: #0f172a;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.lt-right {
+  text-align: right;
+  min-width: 0;
+}
+
+.legend-total-item .val {
+  font-size: 12px;
+  color: #0f172a;
+  font-weight: 700;
+  line-height: 1.15;
+  white-space: nowrap;
+}
+
+.legend-total-item .pct {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.15;
+  margin-top: 4px;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.pie-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.pie-canvas {
+  width: 100%;
+  max-width: 320px;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+.chart-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+
+.chart-canvas {
+  width: 100%;
+  display: block;
+}
+
+.stack-toolbar {
+  margin-bottom: 10px;
+}
+
+.stack-legend {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #475569;
+  margin-bottom: 10px;
+}
+
+.leg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.stack-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.stack-wrap {
+  min-width: 100%;
+}
+
+.stack-canvas {
+  height: 280px;
+  display: block;
+}
+</style>