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>

 // API基础地址
 // API基础地址
 const API_BASE = import.meta.env.VITE_API_BASE || ''
 const API_BASE = import.meta.env.VITE_API_BASE || ''
 
 
+let corpCode = ''
+
+export function setCorpCode(value) {
+  corpCode = value ? String(value) : ''
+}
+
+export function getCorpCode() {
+  return corpCode
+}
+
+function isAbsoluteUrl(url) {
+  return /^https?:\/\//i.test(url)
+}
+
 // 生产环境后端路径不带 /api/ 前缀，这里做兼容处理
 // 生产环境后端路径不带 /api/ 前缀，这里做兼容处理
 export function getApiUrl(url) {
 export function getApiUrl(url) {
+  if (!url) return API_BASE
+  if (isAbsoluteUrl(url)) return url
   const cleanUrl = url.replace(/^\/api\//, '/')
   const cleanUrl = url.replace(/^\/api\//, '/')
   return API_BASE + cleanUrl
   return API_BASE + cleanUrl
 }
 }
 
 
+export function withCorpCode(url) {
+  const fullUrl = getApiUrl(url)
+  if (!corpCode) return fullUrl
+  try {
+    const u = new URL(fullUrl, window.location.origin)
+    if (!u.searchParams.has('corpCode')) u.searchParams.append('corpCode', corpCode)
+    return u.toString()
+  } catch {
+    const sep = fullUrl.includes('?') ? '&' : '?'
+    return `${fullUrl}${sep}corpCode=${encodeURIComponent(corpCode)}`
+  }
+}
+
+export function apiFetch(url, options) {
+  return fetch(withCorpCode(url), options)
+}
+
 export default API_BASE
 export default API_BASE

@@ -6,12 +6,52 @@ const routes = [
     redirect: '/smart-light'
     redirect: '/smart-light'
   },
   },
   {
   {
+    path: '/h5',
+    redirect: '/smart-light-h5'
+  },
+  {
     path: '/smart-light',
     path: '/smart-light',
     name: 'SmartLight',
     name: 'SmartLight',
     component: () => import('../views/SmartLight.vue'),
     component: () => import('../views/SmartLight.vue'),
     meta: { title: '动态监控' }
     meta: { title: '动态监控' }
   },
   },
   {
   {
+    path: '/smart-light-h5',
+    name: 'SmartLightH5',
+    component: () => import('../views/SmartLightH5.vue'),
+    meta: { title: '智能灯', h5: true }
+  },
+  {
+    path: '/smart-light-h5/oee',
+    name: 'SmartLightH5Oee',
+    component: () => import('../views/SmartLightH5Oee.vue'),
+    meta: { title: 'OEE时序', h5: true }
+  },
+  {
+    path: '/smart-light-h5/utilization',
+    name: 'SmartLightH5Utilization',
+    component: () => import('../views/SmartLightH5Utilization.vue'),
+    meta: { title: '稼动率', h5: true }
+  },
+  {
+    path: '/energy-h5',
+    name: 'EnergyH5',
+    component: () => import('../views/EnergyH5.vue'),
+    meta: { title: '能耗', h5: true }
+  },
+  {
+    path: '/energy-h5/run-status',
+    name: 'EnergyH5RunStatus',
+    component: () => import('../views/EnergyH5RunStatus.vue'),
+    meta: { title: '运行状态', h5: true }
+  },
+  {
+    path: '/energy-h5/usage',
+    name: 'EnergyH5Usage',
+    component: () => import('../views/EnergyH5Usage.vue'),
+    meta: { title: '用时用电', h5: true }
+  },
+  {
     path: '/energy',
     path: '/energy',
     name: 'Energy',
     name: 'Energy',
     component: () => import('../views/Energy.vue'),
     component: () => import('../views/Energy.vue'),
@@ -24,4 +64,4 @@ const router = createRouter({
   routes
   routes
 })
 })
 
 
-export default router
+export default router

+<template>
+  <div class="energy-h5">
+    <div class="h5-header">
+      <div class="h5-top">
+        <div class="h5-title">云物联网平台</div>
+        <div class="h5-tabs">
+          <button
+            type="button"
+            :class="['h5-tab', { active: activeTab === 'smart' }]"
+            @click="goH5('/smart-light-h5')"
+          >
+            智能灯
+          </button>
+          <button
+            type="button"
+            :class="['h5-tab', { active: activeTab === 'energy' }]"
+            @click="goH5('/energy-h5')"
+          >
+            能耗
+          </button>
+        </div>
+      </div>
+
+      <el-tabs v-model="currentStatus" class="h5-subtabs" :stretch="true">
+        <el-tab-pane label="实时状态" name="realtime" />
+        <el-tab-pane label="时序状态" name="timeseries" />
+        <el-tab-pane label="稼动率" name="utilization" />
+        <el-tab-pane label="能耗效率" name="efficiency" />
+      </el-tabs>
+    </div>
+
+    <div class="h5-content">
+      <KeepAlive>
+        <EnergyH5RealtimeTab v-if="currentStatus === 'realtime'" />
+        <EnergyH5TimeseriesTab v-else-if="currentStatus === 'timeseries'" />
+        <EnergyH5UtilizationTab v-else-if="currentStatus === 'utilization'" />
+        <EnergyH5EfficiencyTab v-else />
+      </KeepAlive>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import EnergyH5RealtimeTab from '../components/h5/EnergyH5RealtimeTab.vue'
+import EnergyH5TimeseriesTab from '../components/h5/EnergyH5TimeseriesTab.vue'
+import EnergyH5UtilizationTab from '../components/h5/EnergyH5UtilizationTab.vue'
+import EnergyH5EfficiencyTab from '../components/h5/EnergyH5EfficiencyTab.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const activeTab = computed(() => (route.path === '/smart-light-h5' ? 'smart' : 'energy'))
+
+function goH5(path) {
+  router.push({ path, query: route.query })
+}
+
+const currentStatus = ref('realtime')
+</script>
+
+<style scoped>
+.energy-h5 {
+  min-height: 100vh;
+  background-color: #f5f6f8;
+}
+
+.h5-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #fff;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.h5-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.h5-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #111827;
+}
+
+.h5-tabs {
+  display: inline-flex;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.h5-subtabs {
+  margin-top: 10px;
+}
+
+.h5-subtabs :deep(.el-tabs__header) {
+  margin: 0;
+}
+
+.h5-subtabs :deep(.el-tabs__nav-wrap) {
+  padding: 0;
+}
+
+.h5-subtabs :deep(.el-tabs__item) {
+  font-size: 12px;
+  padding: 0 10px;
+  height: 34px;
+  line-height: 34px;
+}
+
+.h5-subtabs :deep(.el-tabs__active-bar) {
+  height: 2px;
+}
+
+.h5-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #334155;
+}
+
+.h5-tab.active {
+  background: rgba(64, 158, 255, 0.12);
+  color: #1d4ed8;
+}
+
+.h5-content {
+  padding: 12px;
+}
+</style>

+<template>
+  <div class="h5-page">
+    <div class="topbar">
+      <el-button text @click="goBack">返回</el-button>
+      <div class="title">运行状态</div>
+      <div class="spacer"></div>
+    </div>
+
+    <div class="content">
+      <div class="device">{{ deviceName || '-' }}</div>
+      <el-empty v-if="!dtuSn" description="缺少 dtuSn" />
+
+      <template v-else>
+        <div class="query">
+          <div class="query-left">
+            <div class="query-label">日查询</div>
+            <el-date-picker
+              v-model="queryDate"
+              type="date"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              style="width: 150px;"
+              :disabled-date="disabledDateFuture"
+              @change="fetchData"
+            />
+          </div>
+          <el-button type="primary" size="small" :loading="loading" @click="fetchData">查询</el-button>
+        </div>
+
+        <div class="section">
+          <div class="section-title">
+            设备运行状态图
+            <span class="leg"><i class="dot g"></i>运行</span>
+            <span class="leg"><i class="dot r"></i>停机</span>
+            <span class="leg"><i class="dot y"></i>待机</span>
+            <span class="leg"><i class="dot gy"></i>离线</span>
+          </div>
+          <div
+            ref="timelineWrapRef"
+            class="timeline-wrap"
+            @wheel.prevent="onTimelineWheel"
+            @pointerdown="onTimelinePointerDown"
+            @pointermove="onTimelinePointerMove"
+            @pointerup="onTimelinePointerUp"
+            @pointercancel="onTimelinePointerUp"
+            @pointerleave="onTimelinePointerLeave"
+          >
+            <canvas ref="timelineCanvasRef" class="timeline-canvas"></canvas>
+          </div>
+          <div v-if="timelineSelected.show" class="tip-card">
+            <div class="tip-title">{{ timelineSelected.statusLabel }}</div>
+            <div class="tip-line">开始时间 {{ timelineSelected.startTime }}</div>
+            <div class="tip-line">结束时间 {{ timelineSelected.endTime }}</div>
+            <div class="tip-line">持续时长 {{ timelineSelected.duration }}</div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-title">设备用电量</div>
+          <div class="subline">总用电量：{{ totalKwh.toFixed(2) }} kw·h</div>
+          <div class="bar-scroll">
+            <div ref="barWrapRef" class="bar-wrap">
+              <canvas
+                ref="barCanvasRef"
+                class="bar-canvas"
+                @pointerdown="onBarPointerDown"
+                @pointermove="onBarPointerMove"
+                @pointerup="onBarPointerUp"
+                @pointercancel="onBarPointerUp"
+                @pointerleave="onBarPointerLeave"
+              ></canvas>
+            </div>
+          </div>
+          <div v-if="barSelected.show" class="tip-card">
+            <div class="tip-title">{{ barSelected.hour }}时</div>
+            <div class="tip-line">用电量 {{ barSelected.value }} kw·h</div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-title">设备运行状态明细</div>
+          <div class="pie-box">
+            <div ref="pieWrapRef" class="pie-wrap">
+              <canvas
+                ref="pieCanvasRef"
+                class="pie-canvas"
+                @pointerdown="onPieTap"
+              ></canvas>
+            </div>
+            <div class="pie-stats">
+              <div class="stat-row">
+                <div class="stat-k">总时长</div>
+                <div class="stat-v">{{ totalDurationFormatted || '-' }}</div>
+              </div>
+              <div class="stat-row">
+                <div class="stat-k">总用电量</div>
+                <div class="stat-v">{{ totalKwh.toFixed(2) }} kw·h</div>
+              </div>
+            </div>
+          </div>
+          <div v-if="pieSelected.show" class="tip-card" style="margin-top: 10px;">
+            <div class="tip-title">{{ pieSelected.statusLabel }}</div>
+            <div class="tip-line">占比 {{ pieSelected.percent }}%</div>
+          </div>
+          <el-empty v-if="!loading && oeeList.length === 0" description="暂无数据" />
+          <div v-else class="detail-list">
+            <div v-for="(item, idx) in oeeList" :key="idx" class="detail-item">
+              <div class="d-row">
+                <div class="d-k">开始</div>
+                <div class="d-v">{{ formatTime(item.startTime) }}</div>
+              </div>
+              <div class="d-row">
+                <div class="d-k">结束</div>
+                <div class="d-v">{{ formatTime(item.endTime) }}</div>
+              </div>
+              <div class="d-row">
+                <div class="d-k">状态</div>
+                <div class="d-v">
+                  <span class="d-status">
+                    <i :class="['dot', statusDotClass(item.runStatus)]"></i>
+                    {{ statusLabel(item.runStatus) }}
+                  </span>
+                </div>
+              </div>
+              <div class="d-row">
+                <div class="d-k">时长</div>
+                <div class="d-v">{{ formatDuration(item.duration) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, 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 dtuSn = computed(() => String(route.query.dtuSn || ''))
+const deviceName = computed(() => String(route.query.deviceName || ''))
+
+function goBack() {
+  router.back()
+}
+
+const queryDate = ref(new Date().toISOString().slice(0, 10))
+const loading = ref(false)
+
+const oeeList = ref([])
+const kwhList = ref([])
+const totalKwh = ref(0)
+const statusStats = ref([])
+const totalDurationFormatted = ref('')
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+
+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 statusDotClass(s) {
+  return { 0: 'gy', 1: 'r', 2: 'g', 3: 'y' }[Number(s)] || 'gy'
+}
+
+function formatDuration(seconds) {
+  if (!seconds && seconds !== 0) return '0秒'
+  seconds = Number(seconds)
+  if (seconds <= 0) return '0秒'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = Math.floor(seconds % 60)
+  let str = ''
+  if (h > 0) str += h + '时'
+  if (m > 0) str += m + '分'
+  if (s > 0 || !str) str += s + '秒'
+  return str
+}
+
+function formatTime(ts) {
+  if (!ts) return '-'
+  const d = new Date(String(ts).replace(/-/g, '/'))
+  if (Number.isNaN(d.getTime())) return String(ts).slice(0, 19)
+  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')}`
+}
+
+async function fetchData() {
+  if (!dtuSn.value || !queryDate.value) return
+  loading.value = true
+  try {
+    const res = await apiFetch(`/api/energy/detail?dtuSn=${encodeURIComponent(dtuSn.value)}&date=${encodeURIComponent(queryDate.value)}`)
+    const data = await res.json()
+    if (data?.code !== 200) throw new Error('bad response')
+    oeeList.value = data?.oeeData?.list || []
+    statusStats.value = data?.oeeData?.statusStats || []
+    totalDurationFormatted.value = data?.oeeData?.totalDurationFormatted || ''
+    kwhList.value = data?.kwhData?.list || []
+    totalKwh.value = Number(data?.kwhData?.totalKwh || 0)
+    timelineSelected.value.show = false
+    barSelected.value.show = false
+    pieSelected.value.show = false
+    zoomLevel.value = 1
+    viewOffsetX.value = 0
+    await nextTick()
+    drawAll()
+  } catch (e) {
+    ElMessage.error('获取数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+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 }
+}
+
+const timelineCanvasRef = ref(null)
+const timelineWrapRef = ref(null)
+const barCanvasRef = ref(null)
+const barWrapRef = ref(null)
+const pieCanvasRef = ref(null)
+const pieWrapRef = ref(null)
+
+const zoomLevel = ref(1)
+const viewOffsetX = ref(0)
+let timelineRects = []
+let barRects = []
+
+const timelineSelected = ref({
+  show: false,
+  startTime: '',
+  endTime: '',
+  statusLabel: '',
+  duration: ''
+})
+const barSelected = ref({ show: false, hour: '', value: '' })
+const pieSelected = ref({ show: false, status: -1, statusLabel: '', percent: '0.00' })
+
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v))
+}
+
+function getDayBounds() {
+  const dateStr = queryDate.value || ''
+  const start = dateStr ? new Date(dateStr) : new Date()
+  start.setHours(0, 0, 0, 0)
+  const end = new Date(start)
+  end.setHours(23, 59, 59, 999)
+  return { startMs: start.getTime(), endMs: end.getTime() + 1 }
+}
+
+function parseTimeMs(v) {
+  if (!v) return NaN
+  const d = new Date(String(v).replace(/-/g, '/'))
+  return d.getTime()
+}
+
+function buildSegments() {
+  const { startMs } = getDayBounds()
+  return (oeeList.value || [])
+    .map((item, idx) => {
+      const sMs = parseTimeMs(item.startTime)
+      const eMs = parseTimeMs(item.endTime)
+      const durSec = Number(item.duration || 0)
+      const startMs2 = Number.isFinite(sMs) ? sMs : NaN
+      let endMs2 = Number.isFinite(eMs) ? eMs : NaN
+      if (!Number.isFinite(endMs2) && Number.isFinite(startMs2) && durSec > 0) endMs2 = startMs2 + durSec * 1000
+      if (!Number.isFinite(startMs2) || !Number.isFinite(endMs2)) return null
+      const startSec = clamp((startMs2 - startMs) / 1000, 0, 86400)
+      const endSec = clamp((endMs2 - startMs) / 1000, 0, 86400)
+      const st = Number(item.runStatus ?? 0)
+      return {
+        index: idx,
+        startSec,
+        endSec: Math.max(startSec, endSec),
+        runStatus: st,
+        startTime: item.startTime,
+        endTime: item.endTime,
+        duration: formatDuration(item.duration)
+      }
+    })
+    .filter(Boolean)
+}
+
+function drawTimeline() {
+  const canvas = timelineCanvasRef.value
+  const wrap = timelineWrapRef.value
+  if (!canvas || !wrap) return
+  const cssW = Math.max(320, wrap.clientWidth)
+  const cssH = 140
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+
+  const PAD_L = 10
+  const PAD_R = 10
+  const PAD_T = 26
+  const PAD_B = 26
+  const plotW = W - PAD_L - PAD_R
+  const plotH = H - PAD_T - PAD_B
+
+  ctx.fillStyle = '#64748b'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  for (let i = 0; i <= 6; i++) {
+    const hour = i * 4
+    const x = PAD_L + (plotW * i) / 6
+    ctx.fillText(String(hour).padStart(2, '0') + ':00', x, 12)
+    if (i > 0) {
+      ctx.strokeStyle = 'rgba(0,0,0,0.06)'
+      ctx.beginPath()
+      ctx.moveTo(x, PAD_T)
+      ctx.lineTo(x, PAD_T + plotH)
+      ctx.stroke()
+    }
+  }
+
+  const z = zoomLevel.value
+  const maxOffset = Math.max(0, plotW * (z - 1))
+  viewOffsetX.value = clamp(viewOffsetX.value, 0, maxOffset)
+  const vo = viewOffsetX.value
+
+  ctx.fillStyle = 'rgba(15,23,42,0.04)'
+  ctx.fillRect(PAD_L, PAD_T, plotW, plotH)
+
+  const segs = buildSegments()
+  timelineRects = []
+  const barY = PAD_T + 14
+  const barH = plotH - 28
+
+  segs.forEach(seg => {
+    const sx = PAD_L + (seg.startSec / 86400) * plotW * z - vo
+    const ex = PAD_L + (seg.endSec / 86400) * plotW * z - vo
+    const w = Math.max(1, ex - sx)
+    if (sx > PAD_L + plotW || sx + w < PAD_L) return
+    const x = clamp(sx, PAD_L, PAD_L + plotW)
+    const w2 = clamp(sx + w, PAD_L, PAD_L + plotW) - x
+    ctx.fillStyle = STATUS_COLORS[seg.runStatus] || '#909399'
+    ctx.fillRect(x, barY, w2, barH)
+    timelineRects.push({ x, y: barY, w: w2, h: barH, seg })
+  })
+
+  ctx.strokeStyle = 'rgba(0,0,0,0.08)'
+  ctx.strokeRect(PAD_L, barY, plotW, barH)
+
+  if (z > 1) {
+    const ratio = vo / maxOffset
+    const trackY = H - 12
+    const trackW = plotW
+    const thumbW = Math.max(40, trackW / z)
+    const thumbX = PAD_L + (trackW - thumbW) * ratio
+    ctx.fillStyle = 'rgba(148,163,184,0.35)'
+    ctx.fillRect(PAD_L, trackY, trackW, 4)
+    ctx.fillStyle = 'rgba(100,116,139,0.55)'
+    ctx.fillRect(thumbX, trackY, thumbW, 4)
+  }
+}
+
+let tlPointerDown = false
+let tlStartX = 0
+let tlStartOffset = 0
+let tlMoved = false
+
+function onTimelinePointerDown(e) {
+  tlPointerDown = true
+  tlMoved = false
+  tlStartX = e.clientX
+  tlStartOffset = viewOffsetX.value
+  e.currentTarget.setPointerCapture?.(e.pointerId)
+}
+
+function onTimelinePointerMove(e) {
+  if (!tlPointerDown) return
+  const dx = e.clientX - tlStartX
+  if (Math.abs(dx) > 3) tlMoved = true
+  const wrap = timelineWrapRef.value
+  if (!wrap) return
+  const cssW = Math.max(320, wrap.clientWidth)
+  const plotW = cssW - 20
+  const z = zoomLevel.value
+  const maxOffset = Math.max(0, plotW * (z - 1))
+  viewOffsetX.value = clamp(tlStartOffset - dx, 0, maxOffset)
+  drawTimeline()
+}
+
+function onTimelinePointerUp(e) {
+  if (!tlPointerDown) return
+  tlPointerDown = false
+  if (!tlMoved) {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const mx = e.clientX - rect.left
+    const my = e.clientY - rect.top
+    const hit = timelineRects.find(r => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h)
+    if (hit) {
+      timelineSelected.value = {
+        show: true,
+        startTime: formatTime(hit.seg.startTime),
+        endTime: formatTime(hit.seg.endTime),
+        statusLabel: statusLabel(hit.seg.runStatus),
+        duration: hit.seg.duration
+      }
+    } else {
+      timelineSelected.value = { show: false, startTime: '', endTime: '', statusLabel: '', duration: '' }
+    }
+  }
+  e.currentTarget.releasePointerCapture?.(e.pointerId)
+}
+
+function onTimelinePointerLeave() {
+  tlPointerDown = false
+}
+
+function onTimelineWheel(e) {
+  const wrap = timelineWrapRef.value
+  if (!wrap) return
+  const cssW = Math.max(320, wrap.clientWidth)
+  const plotW = cssW - 20
+  const oldZ = zoomLevel.value
+  const delta = e.deltaY > 0 ? -0.15 : 0.15
+  const nextZ = clamp(oldZ + delta, 1, 6)
+  if (nextZ === oldZ) return
+  const maxOffsetOld = Math.max(0, plotW * (oldZ - 1))
+  const anchor = maxOffsetOld > 0 ? viewOffsetX.value / maxOffsetOld : 0
+  zoomLevel.value = nextZ
+  const maxOffsetNew = Math.max(0, plotW * (nextZ - 1))
+  viewOffsetX.value = clamp(anchor * maxOffsetNew, 0, maxOffsetNew)
+  drawTimeline()
+}
+
+function drawBars() {
+  const canvas = barCanvasRef.value
+  const wrap = barWrapRef.value
+  if (!canvas || !wrap) return
+  const list = kwhList.value || []
+  const PAD_L = 34
+  const PAD_R = 16
+  const PAD_T = 18
+  const PAD_B = 34
+  const colW = 12
+  const gap = 6
+  const baseW = Math.max(320, wrap.clientWidth)
+  const cssW = Math.max(baseW, PAD_L + PAD_R + list.length * (colW + gap) + gap)
+  const cssH = 220
+  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
+  const maxVal = Math.max(1, ...list.map(i => Number(i.value || 0)))
+
+  ctx.strokeStyle = 'rgba(0,0,0,0.06)'
+  ctx.lineWidth = 1
+  ctx.fillStyle = '#94a3b8'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'end'
+  for (let i = 0; i <= 4; i++) {
+    const v = (maxVal * i) / 4
+    const y = PAD_T + plotH * (1 - i / 4)
+    ctx.fillText(v.toFixed(1), PAD_L - 4, y + 3)
+    if (i > 0) {
+      ctx.beginPath()
+      ctx.moveTo(PAD_L, y)
+      ctx.lineTo(W - PAD_R, y)
+      ctx.stroke()
+    }
+  }
+
+  ctx.strokeStyle = 'rgba(0,0,0,0.08)'
+  ctx.lineWidth = 1.5
+  ctx.beginPath()
+  ctx.moveTo(PAD_L, PAD_T + plotH)
+  ctx.lineTo(W - PAD_R, PAD_T + plotH)
+  ctx.stroke()
+
+  barRects = []
+  list.forEach((item, idx) => {
+    const val = Number(item.value || 0)
+    const h = (val / maxVal) * plotH
+    const x = PAD_L + gap + idx * (colW + gap)
+    const y = PAD_T + plotH - h
+    const isSel = barSelected.value.show && Number(barSelected.value.hour) === idx + 1
+    ctx.fillStyle = isSel ? 'rgba(64,158,255,0.9)' : 'rgba(64,158,255,0.55)'
+    ctx.fillRect(x, y, colW, h)
+    if ((idx + 1) % 3 === 0 || idx === 0 || idx === list.length - 1) {
+      ctx.save()
+      ctx.fillStyle = '#64748b'
+      ctx.font = '9px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.translate(x + colW / 2, PAD_T + plotH + 14)
+      ctx.fillText(String(idx + 1), 0, 0)
+      ctx.restore()
+    }
+    barRects.push({ x, y, w: colW, h, idx, val })
+  })
+}
+
+let pieRanges = []
+function buildPieSlices() {
+  const stats = statusStats.value || []
+  if (!stats.length) return []
+  const totalPct = stats.reduce((sum, s) => sum + (Number(s.percent) || 0), 0)
+  const MIN_SLICE_DEG = 2
+  const sliceInfos = stats.map((s, i) => {
+    const pct = Number(s.percent) || 0
+    const deg = pct > 0 && totalPct > 0 ? (pct / totalPct) * 360 : MIN_SLICE_DEG
+    return { index: i, status: Number(s.status), percent: pct, deg }
+  })
+  const hasNonZero = sliceInfos.some(si => si.percent > 0)
+  if (!hasNonZero && sliceInfos.length > 0) {
+    const eq = 360 / sliceInfos.length
+    sliceInfos.forEach(si => (si.deg = eq))
+  } else if (hasNonZero) {
+    const usedByNonZero = sliceInfos.filter(si => si.percent > 0).reduce((s, si) => s + si.deg, 0)
+    const zeroCount = sliceInfos.filter(si => si.percent === 0).length
+    const remaining = Math.max(0, 360 - usedByNonZero - zeroCount * MIN_SLICE_DEG)
+    sliceInfos.forEach(si => {
+      if (si.percent > 0) si.deg = si.deg + (si.deg / usedByNonZero) * remaining
+    })
+  }
+  let startAngle = -Math.PI / 2
+  sliceInfos.forEach(si => {
+    const sliceAngle = (si.deg / 180) * Math.PI
+    si.startAngle = startAngle
+    si.endAngle = startAngle + sliceAngle
+    si.midAngle = startAngle + sliceAngle / 2
+    startAngle = si.endAngle
+  })
+  return sliceInfos
+}
+
+function drawPie() {
+  const canvas = pieCanvasRef.value
+  const wrap = pieWrapRef.value
+  if (!canvas || !wrap) return
+  const cssW = Math.max(320, wrap.clientWidth)
+  const cssH = 240
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+
+  const slices = buildPieSlices()
+  pieRanges = []
+  if (!slices.length) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', W / 2, H / 2)
+    return
+  }
+
+  const cx = W * 0.42
+  const cy = H * 0.54
+  const radius = Math.min(cx, cy) - 18
+  slices.forEach(si => {
+    pieRanges.push({ ...si, cx, cy, radius })
+  })
+
+  const selectedStatus = pieSelected.value.show ? pieSelected.value.status : -999
+  slices.forEach(si => {
+    if (si.status === selectedStatus) return
+    ctx.beginPath()
+    ctx.moveTo(cx, cy)
+    ctx.arc(cx, cy, radius, si.startAngle, si.endAngle)
+    ctx.closePath()
+    ctx.fillStyle = STATUS_COLORS[si.status] || '#ccc'
+    ctx.globalAlpha = 0.85
+    ctx.fill()
+    ctx.globalAlpha = 1
+  })
+
+  const sel = slices.find(s => s.status === selectedStatus)
+  if (sel) {
+    const expandR = radius + 6
+    const offset = 6
+    const ox = cx + Math.cos(sel.midAngle) * offset
+    const oy = cy + Math.sin(sel.midAngle) * offset
+    ctx.save()
+    ctx.shadowColor = 'rgba(0,0,0,0.25)'
+    ctx.shadowBlur = 12
+    ctx.shadowOffsetY = 3
+    ctx.beginPath()
+    ctx.moveTo(ox, oy)
+    ctx.arc(ox, oy, expandR, sel.startAngle, sel.endAngle)
+    ctx.closePath()
+    ctx.fillStyle = STATUS_COLORS[sel.status] || '#ccc'
+    ctx.fill()
+    ctx.restore()
+  }
+
+  slices.forEach(si => {
+    const { midAngle } = si
+    const lineStartX = cx + Math.cos(midAngle) * radius
+    const lineStartY = cy + Math.sin(midAngle) * radius
+    const elbowLen = 12
+    const elbowX = cx + Math.cos(midAngle) * (radius + elbowLen)
+    const elbowY = cy + Math.sin(midAngle) * (radius + elbowLen)
+    const leftSide = midAngle > Math.PI / 2 && midAngle <= Math.PI * 1.5
+    const textDir = leftSide ? -1 : 1
+    const textLen = 34
+    const lineEndX = elbowX + textDir * textLen
+    const lineEndY = elbowY
+
+    ctx.strokeStyle = 'rgba(0,0,0,0.25)'
+    ctx.lineWidth = 0.8
+    ctx.beginPath()
+    ctx.moveTo(lineStartX, lineStartY)
+    ctx.lineTo(elbowX, elbowY)
+    ctx.lineTo(lineEndX, lineEndY)
+    ctx.stroke()
+
+    const labelText = `${statusLabel(si.status)}${si.percent.toFixed(si.percent % 1 === 0 ? 0 : 2)}%`
+    ctx.fillStyle = '#475569'
+    ctx.font = '11px sans-serif'
+    ctx.textAlign = leftSide ? 'right' : 'left'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(labelText, lineEndX + textDir * 4, lineEndY)
+  })
+}
+
+function onPieTap(e) {
+  const canvas = pieCanvasRef.value
+  if (!canvas || !pieRanges.length) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const first = pieRanges[0]
+  const cx = first.cx
+  const cy = first.cy
+  const dx = mx - cx
+  const dy = my - cy
+  const dist = Math.sqrt(dx * dx + dy * dy)
+  if (dist > first.radius) {
+    pieSelected.value = { show: false, status: -1, statusLabel: '', percent: '0.00' }
+    drawPie()
+    return
+  }
+  let angle = Math.atan2(dy, dx)
+  const inRange = (a, sa, ea) => {
+    let na = a - sa
+    let nea = ea - sa
+    if (nea < 0) nea += Math.PI * 2
+    if (na < 0) na += Math.PI * 2
+    return na >= 0 && na <= nea
+  }
+  const hit = [...pieRanges].reverse().find(seg => inRange(angle, seg.startAngle, seg.endAngle))
+  if (!hit) {
+    pieSelected.value = { show: false, status: -1, statusLabel: '', percent: '0.00' }
+  } else {
+    pieSelected.value = {
+      show: true,
+      status: hit.status,
+      statusLabel: statusLabel(hit.status),
+      percent: (hit.percent || 0).toFixed(2)
+    }
+  }
+  drawPie()
+}
+
+let barPointerDown = false
+let barMoved = false
+let barStartX = 0
+let barStartScrollLeft = 0
+
+function onBarPointerDown(e) {
+  barPointerDown = true
+  barMoved = false
+  barStartX = e.clientX
+  barStartScrollLeft = e.currentTarget.parentElement?.scrollLeft || 0
+  e.currentTarget.setPointerCapture?.(e.pointerId)
+}
+
+function onBarPointerMove(e) {
+  if (!barPointerDown) return
+  const dx = e.clientX - barStartX
+  if (Math.abs(dx) > 3) barMoved = true
+  const scroller = e.currentTarget.parentElement
+  if (scroller && barMoved) scroller.scrollLeft = barStartScrollLeft - dx
+}
+
+function onBarPointerUp(e) {
+  if (!barPointerDown) return
+  barPointerDown = false
+  if (!barMoved) {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const mx = e.clientX - rect.left
+    const my = e.clientY - rect.top
+    const hit = barRects.find(r => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h)
+    if (hit) {
+      barSelected.value = { show: true, hour: String(hit.idx + 1), value: (hit.val || 0).toFixed(2) }
+    } else {
+      barSelected.value = { show: false, hour: '', value: '' }
+    }
+    drawBars()
+  }
+  e.currentTarget.releasePointerCapture?.(e.pointerId)
+}
+
+function onBarPointerLeave() {
+  barPointerDown = false
+}
+
+function drawAll() {
+  drawTimeline()
+  drawBars()
+  drawPie()
+}
+
+let ro = null
+onMounted(() => {
+  fetchData()
+  if ('ResizeObserver' in window) {
+    ro = new ResizeObserver(() => drawAll())
+    if (timelineWrapRef.value) ro.observe(timelineWrapRef.value)
+    if (barWrapRef.value) ro.observe(barWrapRef.value)
+    if (pieWrapRef.value) ro.observe(pieWrapRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+</script>
+
+<style scoped>
+.h5-page {
+  min-height: 100vh;
+  background: #f5f6f8;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.title {
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.spacer {
+  width: 48px;
+}
+
+.content {
+  padding: 12px;
+}
+
+.device {
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 10px;
+}
+
+.query {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.query-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.query-label {
+  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-bottom: 10px;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.leg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+  color: #475569;
+  font-size: 12px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.dot.g {
+  background: #67c23a;
+}
+
+.dot.r {
+  background: #e74c3c;
+}
+
+.dot.y {
+  background: #c5d94e;
+}
+
+.dot.gy {
+  background: #909399;
+}
+
+.timeline-wrap {
+  border-radius: 10px;
+  overflow: hidden;
+  background: rgba(15, 23, 42, 0.02);
+  touch-action: pan-y;
+}
+
+.timeline-canvas {
+  width: 100%;
+  height: 140px;
+  display: block;
+}
+
+.subline {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 8px;
+}
+
+.bar-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x;
+}
+
+.bar-wrap {
+  min-width: 100%;
+}
+
+.bar-canvas {
+  height: 220px;
+  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 {
+  font-size: 12px;
+  color: #334155;
+  line-height: 1.6;
+}
+
+.detail-list {
+  display: grid;
+  gap: 10px;
+}
+
+.detail-item {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fff;
+}
+
+.d-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 12px;
+  padding: 4px 0;
+}
+
+.d-k {
+  color: #64748b;
+}
+
+.d-v {
+  color: #0f172a;
+  font-weight: 600;
+  text-align: right;
+}
+
+.d-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.pie-box {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.pie-wrap {
+  width: 100%;
+}
+
+.pie-canvas {
+  width: 100%;
+  height: 240px;
+  display: block;
+}
+
+.pie-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.stat-row {
+  background: #f8fafc;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.stat-k {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.stat-v {
+  margin-top: 6px;
+  font-size: 14px;
+  font-weight: 800;
+  color: #0f172a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

+<template>
+  <div class="h5-page">
+    <div class="topbar">
+      <el-button text @click="goBack">返回</el-button>
+      <div class="title">用时用电</div>
+      <div class="spacer"></div>
+    </div>
+
+    <div class="content">
+      <div class="device">{{ deviceName || '-' }}</div>
+      <el-empty v-if="!dtuSn" description="缺少 dtuSn" />
+
+      <template v-else>
+        <div class="query">
+          <div class="query-left">
+            <el-radio-group v-model="queryMode" size="small" @change="onModeChange">
+              <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="fetchData">查询</el-button>
+        </div>
+
+        <div class="query2">
+          <el-date-picker
+            v-if="queryMode === 'hour'"
+            v-model="selectedDate"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            size="small"
+            style="width: 160px;"
+            :disabled-date="disabledDateFuture"
+            @change="fetchData"
+          />
+          <el-date-picker
+            v-else-if="queryMode === 'day'"
+            v-model="dayRange"
+            type="daterange"
+            value-format="YYYY-MM-DD"
+            start-placeholder="开始"
+            end-placeholder="结束"
+            size="small"
+            style="width: 100%;"
+            :disabled-date="disabledDateFuture"
+            @change="fetchData"
+          />
+          <el-date-picker
+            v-else
+            v-model="yearValue"
+            type="year"
+            value-format="YYYY"
+            placeholder="选择年份"
+            size="small"
+            style="width: 140px;"
+            @change="fetchData"
+          />
+        </div>
+
+        <div class="section">
+          <div class="section-title">
+            运行时长明细
+            <span class="leg"><i class="dot g"></i>运行</span>
+            <span class="leg"><i class="dot y"></i>待机</span>
+            <span class="leg"><i class="dot r"></i>停机</span>
+            <span class="leg"><i class="dot gy"></i>离线</span>
+            <span class="leg"><i class="line-dot"></i>用电量</span>
+          </div>
+          <div class="chart-scroll">
+            <div ref="comboWrapRef" class="chart-wrap">
+              <canvas
+                ref="comboCanvasRef"
+                class="combo-canvas"
+                @pointerdown="onComboTap"
+              ></canvas>
+            </div>
+          </div>
+          <div v-if="comboSelected.show" class="tip-card">
+            <div class="tip-title">{{ comboSelected.title }}</div>
+            <div v-for="(row, i) in comboSelected.rows" :key="i" class="tip-line">
+              <i v-if="row.dotClass" :class="['dot', row.dotClass]"></i>
+              <i v-else-if="row.isLine" class="line-dot-sm"></i>
+              <span class="tlabel">{{ row.label }}</span>
+              <span class="tval">{{ row.value }}</span>
+            </div>
+          </div>
+          <el-empty v-if="!loading && flatKwhList.length === 0" description="暂无数据" />
+        </div>
+
+        <div class="section">
+          <div class="section-title">运行时长统计</div>
+          <div class="stat-top">
+            <div class="stat-item">
+              <div class="k">总时长</div>
+              <div class="v">{{ apiSummary.totalDurationFormatted || '0秒' }}</div>
+            </div>
+            <div class="stat-item">
+              <div class="k">总用电量</div>
+              <div class="v">{{ formatKwh(apiSummary.totalKwh) }} kw·h</div>
+            </div>
+          </div>
+          <div class="pie-area">
+            <div ref="pieWrapRef" class="pie-wrap">
+              <canvas ref="pieCanvasRef" class="pie-canvas" @pointerdown="onPieTap"></canvas>
+            </div>
+          </div>
+          <div v-if="pieSelected.show" class="tip-card">
+            <div class="tip-title">{{ pieSelected.statusLabel }}</div>
+            <div class="tip-line">占比 {{ pieSelected.percent }}%</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, 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 dtuSn = computed(() => String(route.query.dtuSn || ''))
+const deviceName = computed(() => String(route.query.deviceName || ''))
+
+function goBack() {
+  router.back()
+}
+
+const today = new Date().toISOString().slice(0, 10)
+const weekAgo = new Date(Date.now() - 6 * 86400000).toISOString().slice(0, 10)
+
+const queryMode = ref('hour')
+const selectedDate = ref(today)
+const dayRange = ref([weekAgo, today])
+const yearValue = ref(String(new Date().getFullYear()))
+
+const loading = ref(false)
+const apiSummary = reactive({ totalKwh: 0, totalDurationSeconds: 0, statusStats: [], totalDurationFormatted: '0秒' })
+const detailList = ref([])
+
+function disabledDateFuture(time) {
+  return time.getTime() > Date.now()
+}
+
+function onModeChange() {
+  fetchData()
+}
+
+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 statusDotClass(s) {
+  return { 0: 'gy', 1: 'r', 2: 'g', 3: 'y' }[Number(s)] || 'gy'
+}
+
+function formatKwh(v) {
+  if (!v && v !== 0) return '0'
+  const n = Number(v)
+  return n.toFixed(n % 1 === 0 ? 0 : 2)
+}
+
+function formatDuration(seconds) {
+  if (!seconds && seconds !== 0) return '0秒'
+  seconds = Number(seconds)
+  if (seconds <= 0) return '0秒'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = Math.floor(seconds % 60)
+  let str = ''
+  if (h > 0) str += h + '时'
+  if (m > 0) str += m + '分'
+  if (s > 0 || !str) str += s + '秒'
+  return str
+}
+
+function formatHours(seconds) {
+  if (!seconds && seconds !== 0) return '0时'
+  const h = Number(seconds) / 3600
+  return h.toFixed(2).replace(/\.?0+$/, '') + '时'
+}
+
+const flatKwhList = computed(() => {
+  const dl = detailList.value || []
+  if (!dl.length) return []
+  if (dl[0] && dl[0].kwhList) return dl[0].kwhList
+  return dl.map(item => {
+    const row = { date: item.date || '', value: item.totalKwh || 0 }
+    ;(item.statusStats || []).forEach(s => {
+      row[s.status] = s.durationSeconds || 0
+    })
+    for (let k = 0; k <= 3; k++) row[k] = row[k] ?? 0
+    return row
+  })
+})
+
+function getXLabel(item, idx) {
+  if (queryMode.value === 'hour') return item.date || `${idx + 1}时`
+  if (queryMode.value === 'month') return item.date || `${idx + 1}`
+  return item.date || `${idx + 1}`
+}
+
+async function fetchData() {
+  if (!dtuSn.value) return
+  loading.value = true
+  try {
+    let type = 1
+    let sd = selectedDate.value
+    let ed = ''
+
+    if (queryMode.value === 'hour') {
+      type = 1
+      sd = selectedDate.value
+    } else if (queryMode.value === 'day') {
+      type = 2
+      if (!dayRange.value || !dayRange.value.length) throw new Error('missing range')
+      sd = dayRange.value[0]
+      ed = dayRange.value[1]
+    } else {
+      type = 3
+      const y = yearValue.value || String(new Date().getFullYear())
+      sd = `${y}-01-01`
+    }
+
+    let url = `/api/energy/runtimeDetail?dtuSn=${encodeURIComponent(dtuSn.value)}&startDate=${encodeURIComponent(sd)}&type=${type}`
+    if (ed) url += `&endDate=${encodeURIComponent(ed)}`
+
+    const res = await apiFetch(url)
+    const data = await res.json()
+    if (data?.code !== 200) throw new Error('bad response')
+    Object.assign(apiSummary, data.summary || { totalKwh: 0, totalDurationSeconds: 0, statusStats: [], totalDurationFormatted: '0秒' })
+    detailList.value = data.detailList || []
+    comboSelected.value.show = false
+    pieSelected.value.show = false
+    await nextTick()
+    drawAll()
+  } catch (e) {
+    ElMessage.error('获取数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+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 }
+}
+
+const comboCanvasRef = ref(null)
+const comboWrapRef = ref(null)
+let comboRects = []
+
+const comboSelected = ref({ show: false, index: -1, title: '', rows: [] })
+
+function buildComboSelected(idx) {
+  const list = flatKwhList.value
+  const item = list[idx]
+  if (!item) return { show: false, index: -1, title: '', rows: [] }
+  const statuses = [
+    { key: 2, dotClass: 'g', label: '运行' },
+    { key: 3, dotClass: 'y', label: '待机' },
+    { key: 1, dotClass: 'r', label: '停机' },
+    { key: 0, dotClass: 'gy', label: '离线' }
+  ]
+  const rows = []
+  const totalSec = (item['0'] || 0) + (item['1'] || 0) + (item['2'] || 0) + (item['3'] || 0)
+  statuses.forEach(s => {
+    const sec = item[s.key] ?? 0
+    if (sec > 0) {
+      const pct = totalSec > 0 ? ` (${((sec / totalSec) * 100).toFixed(1)}%)` : ''
+      rows.push({ dotClass: s.dotClass, label: s.label, value: formatHours(sec) + pct })
+    }
+  })
+  rows.push({ isLine: true, label: '用电量', value: `${formatKwh(item.value ?? 0)} kw·h` })
+  return { show: true, index: idx, title: getXLabel(item, idx), rows }
+}
+
+function drawCombo() {
+  const canvas = comboCanvasRef.value
+  const wrap = comboWrapRef.value
+  if (!canvas || !wrap) return
+  const list = flatKwhList.value || []
+  const PAD_L = 38
+  const PAD_R = 16
+  const PAD_T = 18
+  const PAD_B = 48
+  const colW = 14
+  const gap = 10
+  const cssH = 360
+  const minW = Math.max(320, wrap.clientWidth)
+  const cssW = Math.max(minW, PAD_L + PAD_R + list.length * (colW + gap) + gap)
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+
+  if (!list.length) return
+
+  const plotW = W - PAD_L - PAD_R
+  const plotH = H - PAD_T - PAD_B
+
+  let maxSec = 1
+  let maxKwh = 1
+  list.forEach(item => {
+    const sec = (item['0'] || 0) + (item['1'] || 0) + (item['2'] || 0) + (item['3'] || 0)
+    maxSec = Math.max(maxSec, sec)
+    maxKwh = Math.max(maxKwh, Number(item.value || 0))
+  })
+
+  ctx.strokeStyle = 'rgba(0,0,0,0.06)'
+  ctx.lineWidth = 1
+  ctx.fillStyle = '#94a3b8'
+  ctx.font = '10px sans-serif'
+  ctx.textAlign = 'end'
+  for (let i = 0; i <= 4; i++) {
+    const sec = (maxSec * i) / 4
+    const y = PAD_T + plotH * (1 - i / 4)
+    ctx.fillText((sec / 3600).toFixed(0) + 'h', PAD_L - 4, y + 3)
+    if (i > 0) {
+      ctx.beginPath()
+      ctx.moveTo(PAD_L, y)
+      ctx.lineTo(W - PAD_R, y)
+      ctx.stroke()
+    }
+  }
+
+  ctx.strokeStyle = 'rgba(0,0,0,0.08)'
+  ctx.lineWidth = 1.5
+  ctx.beginPath()
+  ctx.moveTo(PAD_L, PAD_T + plotH)
+  ctx.lineTo(W - PAD_R, PAD_T + plotH)
+  ctx.stroke()
+
+  comboRects = []
+  const selectedIdx = comboSelected.value.show ? comboSelected.value.index : -1
+
+  const order = [
+    { key: 2, color: STATUS_COLORS[2] },
+    { key: 3, color: STATUS_COLORS[3] },
+    { key: 1, color: STATUS_COLORS[1] },
+    { key: 0, color: STATUS_COLORS[0] }
+  ]
+
+  let lastLineX = null
+  let lastLineY = null
+  ctx.save()
+  ctx.strokeStyle = 'rgba(64,158,255,0.9)'
+  ctx.lineWidth = 2
+  list.forEach((item, idx) => {
+    const x = PAD_L + gap + idx * (colW + gap)
+    const totalSec = (item['0'] || 0) + (item['1'] || 0) + (item['2'] || 0) + (item['3'] || 0)
+    const barH = (totalSec / maxSec) * plotH
+    const baseY = PAD_T + plotH
+    let curY = baseY
+    order.forEach(seg => {
+      const sec = item[seg.key] || 0
+      const h = (sec / maxSec) * plotH
+      if (h <= 0) return
+      curY -= h
+      ctx.fillStyle = seg.color
+      ctx.globalAlpha = idx === selectedIdx ? 0.95 : 0.78
+      ctx.fillRect(x, curY, colW, h)
+      ctx.globalAlpha = 1
+    })
+
+    const kwh = Number(item.value || 0)
+    const ly = PAD_T + plotH - (kwh / maxKwh) * plotH
+    const lx = x + colW / 2
+    if (lastLineX != null) {
+      ctx.beginPath()
+      ctx.moveTo(lastLineX, lastLineY)
+      ctx.lineTo(lx, ly)
+      ctx.stroke()
+    }
+    lastLineX = lx
+    lastLineY = ly
+    ctx.fillStyle = '#409eff'
+    ctx.beginPath()
+    ctx.arc(lx, ly, idx === selectedIdx ? 3.5 : 2.5, 0, Math.PI * 2)
+    ctx.fill()
+
+    if (idx % Math.max(1, Math.floor(list.length / 8)) === 0 || idx === list.length - 1) {
+      ctx.save()
+      ctx.fillStyle = '#64748b'
+      ctx.font = '9px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.translate(lx, PAD_T + plotH + 14)
+      ctx.rotate(-Math.PI / 6)
+      ctx.fillText(getXLabel(item, idx), 0, 0)
+      ctx.restore()
+    }
+
+    comboRects.push({ x, y: PAD_T, w: colW, h: plotH, idx })
+  })
+  ctx.restore()
+}
+
+function onComboTap(e) {
+  const canvas = comboCanvasRef.value
+  if (!canvas || !comboRects.length) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const hit = comboRects.find(r => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h)
+  if (!hit) {
+    comboSelected.value = { show: false, index: -1, title: '', rows: [] }
+  } else {
+    comboSelected.value = buildComboSelected(hit.idx)
+  }
+  drawCombo()
+}
+
+const pieCanvasRef = ref(null)
+const pieWrapRef = ref(null)
+const pieSelected = ref({ show: false, status: -1, statusLabel: '', percent: '0.00' })
+let pieRanges = []
+
+function buildPieSlices() {
+  const stats = apiSummary.statusStats || []
+  if (!stats.length) return []
+  const totalPct = stats.reduce((sum, s) => sum + (Number(s.percent) || 0), 0)
+  const MIN_SLICE_DEG = 2
+  const sliceInfos = stats.map((s, i) => {
+    const pct = Number(s.percent) || 0
+    const deg = pct > 0 && totalPct > 0 ? (pct / totalPct) * 360 : MIN_SLICE_DEG
+    return { index: i, status: Number(s.status), percent: pct, deg }
+  })
+  const hasNonZero = sliceInfos.some(si => si.percent > 0)
+  if (!hasNonZero && sliceInfos.length > 0) {
+    const eq = 360 / sliceInfos.length
+    sliceInfos.forEach(si => (si.deg = eq))
+  } else if (hasNonZero) {
+    const usedByNonZero = sliceInfos.filter(si => si.percent > 0).reduce((s, si) => s + si.deg, 0)
+    const zeroCount = sliceInfos.filter(si => si.percent === 0).length
+    const remaining = Math.max(0, 360 - usedByNonZero - zeroCount * MIN_SLICE_DEG)
+    sliceInfos.forEach(si => {
+      if (si.percent > 0) si.deg = si.deg + (si.deg / usedByNonZero) * remaining
+    })
+  }
+  let startAngle = -Math.PI / 2
+  sliceInfos.forEach(si => {
+    const sliceAngle = (si.deg / 180) * Math.PI
+    si.startAngle = startAngle
+    si.endAngle = startAngle + sliceAngle
+    si.midAngle = startAngle + sliceAngle / 2
+    startAngle = si.endAngle
+  })
+  return sliceInfos
+}
+
+function drawPie() {
+  const canvas = pieCanvasRef.value
+  const wrap = pieWrapRef.value
+  if (!canvas || !wrap) return
+  const cssW = Math.max(320, wrap.clientWidth)
+  const cssH = 240
+  const { ctx, W, H } = setupCanvas(canvas, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+  const slices = buildPieSlices()
+  pieRanges = []
+  if (!slices.length) {
+    ctx.fillStyle = '#999'
+    ctx.font = '13px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', W / 2, H / 2)
+    return
+  }
+
+  const cx = W * 0.5
+  const cy = H * 0.54
+  const radius = Math.min(cx, cy) - 18
+  slices.forEach(si => pieRanges.push({ ...si, cx, cy, radius }))
+
+  const selectedStatus = pieSelected.value.show ? pieSelected.value.status : -999
+  slices.forEach(si => {
+    if (si.status === selectedStatus) return
+    ctx.beginPath()
+    ctx.moveTo(cx, cy)
+    ctx.arc(cx, cy, radius, si.startAngle, si.endAngle)
+    ctx.closePath()
+    ctx.fillStyle = STATUS_COLORS[si.status] || '#ccc'
+    ctx.globalAlpha = 0.85
+    ctx.fill()
+    ctx.globalAlpha = 1
+  })
+
+  const sel = slices.find(s => s.status === selectedStatus)
+  if (sel) {
+    const expandR = radius + 6
+    const offset = 6
+    const ox = cx + Math.cos(sel.midAngle) * offset
+    const oy = cy + Math.sin(sel.midAngle) * offset
+    ctx.save()
+    ctx.shadowColor = 'rgba(0,0,0,0.25)'
+    ctx.shadowBlur = 12
+    ctx.shadowOffsetY = 3
+    ctx.beginPath()
+    ctx.moveTo(ox, oy)
+    ctx.arc(ox, oy, expandR, sel.startAngle, sel.endAngle)
+    ctx.closePath()
+    ctx.fillStyle = STATUS_COLORS[sel.status] || '#ccc'
+    ctx.fill()
+    ctx.restore()
+  }
+
+  slices.forEach(si => {
+    const { midAngle } = si
+    const lineStartX = cx + Math.cos(midAngle) * radius
+    const lineStartY = cy + Math.sin(midAngle) * radius
+    const elbowLen = 12
+    const elbowX = cx + Math.cos(midAngle) * (radius + elbowLen)
+    const elbowY = cy + Math.sin(midAngle) * (radius + elbowLen)
+    const leftSide = midAngle > Math.PI / 2 && midAngle <= Math.PI * 1.5
+    const textDir = leftSide ? -1 : 1
+    const textLen = 34
+    const lineEndX = elbowX + textDir * textLen
+    const lineEndY = elbowY
+
+    ctx.strokeStyle = 'rgba(0,0,0,0.25)'
+    ctx.lineWidth = 0.8
+    ctx.beginPath()
+    ctx.moveTo(lineStartX, lineStartY)
+    ctx.lineTo(elbowX, elbowY)
+    ctx.lineTo(lineEndX, lineEndY)
+    ctx.stroke()
+
+    const labelText = `${statusLabel(si.status)}${si.percent.toFixed(si.percent % 1 === 0 ? 0 : 2)}%`
+    ctx.fillStyle = '#475569'
+    ctx.font = '11px sans-serif'
+    ctx.textAlign = leftSide ? 'right' : 'left'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(labelText, lineEndX + textDir * 4, lineEndY)
+  })
+}
+
+function onPieTap(e) {
+  const canvas = pieCanvasRef.value
+  if (!canvas || !pieRanges.length) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const first = pieRanges[0]
+  const cx = first.cx
+  const cy = first.cy
+  const dx = mx - cx
+  const dy = my - cy
+  const dist = Math.sqrt(dx * dx + dy * dy)
+  if (dist > first.radius) {
+    pieSelected.value = { show: false, status: -1, statusLabel: '', percent: '0.00' }
+    drawPie()
+    return
+  }
+  const inRange = (a, sa, ea) => {
+    let na = a - sa
+    let nea = ea - sa
+    if (nea < 0) nea += Math.PI * 2
+    if (na < 0) na += Math.PI * 2
+    return na >= 0 && na <= nea
+  }
+  const angle = Math.atan2(dy, dx)
+  const hit = [...pieRanges].reverse().find(seg => inRange(angle, seg.startAngle, seg.endAngle))
+  if (!hit) {
+    pieSelected.value = { show: false, status: -1, statusLabel: '', percent: '0.00' }
+  } else {
+    pieSelected.value = { show: true, status: hit.status, statusLabel: statusLabel(hit.status), percent: (hit.percent || 0).toFixed(2) }
+  }
+  drawPie()
+}
+
+function drawAll() {
+  drawCombo()
+  drawPie()
+}
+
+let ro = null
+onMounted(() => {
+  fetchData()
+  if ('ResizeObserver' in window) {
+    ro = new ResizeObserver(() => drawAll())
+    if (comboWrapRef.value) ro.observe(comboWrapRef.value)
+    if (pieWrapRef.value) ro.observe(pieWrapRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (ro) {
+    ro.disconnect()
+    ro = null
+  }
+})
+</script>
+
+<style scoped>
+.h5-page {
+  min-height: 100vh;
+  background: #f5f6f8;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.title {
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.spacer {
+  width: 48px;
+}
+
+.content {
+  padding: 12px;
+}
+
+.device {
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 10px;
+}
+
+.query {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.query-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.query2 {
+  margin-bottom: 10px;
+}
+
+.section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  margin-bottom: 10px;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.leg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+  color: #475569;
+  font-size: 12px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.dot.g {
+  background: #67c23a;
+}
+
+.dot.r {
+  background: #e74c3c;
+}
+
+.dot.y {
+  background: #c5d94e;
+}
+
+.dot.gy {
+  background: #909399;
+}
+
+.line-dot {
+  width: 18px;
+  height: 0;
+  border-top: 2px solid rgba(64, 158, 255, 0.95);
+  position: relative;
+}
+
+.line-dot::after {
+  content: '';
+  position: absolute;
+  right: -2px;
+  top: -3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(64, 158, 255, 0.95);
+}
+
+.line-dot-sm {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(64, 158, 255, 0.95);
+  display: inline-block;
+}
+
+.chart-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.chart-wrap {
+  min-width: 100%;
+}
+
+.combo-canvas {
+  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: 700;
+  color: #0f172a;
+  margin-bottom: 6px;
+}
+
+.tip-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #334155;
+  line-height: 1.6;
+}
+
+.tlabel {
+  color: #64748b;
+}
+
+.tval {
+  margin-left: auto;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.stat-top {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.stat-item {
+  background: #f8fafc;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.stat-item .k {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.stat-item .v {
+  margin-top: 6px;
+  font-size: 14px;
+  font-weight: 800;
+  color: #0f172a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pie-area {
+  display: flex;
+  justify-content: center;
+}
+
+.pie-wrap {
+  width: 100%;
+  max-width: 360px;
+}
+
+.pie-canvas {
+  width: 100%;
+  height: 240px;
+  display: block;
+}
+</style>

+<template>
+  <div class="smart-light-h5">
+    <div class="h5-header">
+      <div class="h5-top">
+        <div class="h5-title">云物联网平台</div>
+        <div class="h5-tabs">
+          <button
+            type="button"
+            :class="['h5-tab', { active: activeTab === 'smart' }]"
+            @click="goH5('/smart-light-h5')"
+          >
+            智能灯
+          </button>
+          <button
+            type="button"
+            :class="['h5-tab', { active: activeTab === 'energy' }]"
+            @click="goH5('/energy-h5')"
+          >
+            能耗
+          </button>
+        </div>
+      </div>
+
+      <el-tabs v-model="currentStatus" class="h5-subtabs" :stretch="true">
+        <el-tab-pane label="实时状态" name="realtime" />
+        <el-tab-pane label="时序状态" name="timeseries" />
+        <el-tab-pane label="稼动率" name="utilization" />
+        <el-tab-pane label="开机率" name="startup" />
+      </el-tabs>
+    </div>
+
+    <div class="h5-content">
+      <KeepAlive>
+        <SmartLightH5RealtimeTab v-if="currentStatus === 'realtime'" />
+        <SmartLightH5TimeseriesTab v-else-if="currentStatus === 'timeseries'" />
+        <SmartLightH5UtilizationTab v-else-if="currentStatus === 'utilization'" />
+        <SmartLightH5StartupTab v-else />
+      </KeepAlive>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import SmartLightH5RealtimeTab from '../components/h5/SmartLightH5RealtimeTab.vue'
+import SmartLightH5TimeseriesTab from '../components/h5/SmartLightH5TimeseriesTab.vue'
+import SmartLightH5UtilizationTab from '../components/h5/SmartLightH5UtilizationTab.vue'
+import SmartLightH5StartupTab from '../components/h5/SmartLightH5StartupTab.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const activeTab = computed(() => (route.path === '/energy-h5' ? 'energy' : 'smart'))
+
+function goH5(path) {
+  router.push({ path, query: route.query })
+}
+
+const currentStatus = ref('realtime')
+</script>
+
+<style scoped>
+.smart-light-h5 {
+  min-height: 100vh;
+  background-color: #f5f6f8;
+}
+
+.h5-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #fff;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.h5-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.h5-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #111827;
+}
+
+.h5-tabs {
+  display: inline-flex;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.h5-subtabs {
+  margin-top: 10px;
+}
+
+.h5-subtabs :deep(.el-tabs__header) {
+  margin: 0;
+}
+
+.h5-subtabs :deep(.el-tabs__nav-wrap) {
+  padding: 0;
+}
+
+.h5-subtabs :deep(.el-tabs__item) {
+  font-size: 12px;
+  padding: 0 10px;
+  height: 34px;
+  line-height: 34px;
+}
+
+.h5-subtabs :deep(.el-tabs__active-bar) {
+  height: 2px;
+}
+
+.h5-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #334155;
+}
+
+.h5-tab.active {
+  background: rgba(64, 158, 255, 0.12);
+  color: #1d4ed8;
+}
+
+.h5-content {
+  padding: 12px;
+}
+</style>

+<template>
+  <div class="h5-page">
+    <div class="topbar">
+      <el-button text @click="goBack">返回</el-button>
+      <div class="title">OEE时序</div>
+      <div class="spacer"></div>
+    </div>
+
+    <div class="content">
+      <div class="device">{{ deviceName || '-' }}</div>
+
+      <div class="query">
+        <div class="query-left">
+          <div class="query-label">日查询</div>
+          <el-date-picker
+            v-model="queryDate"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            style="width: 150px;"
+            @change="fetchLampData"
+          />
+        </div>
+        <el-button type="primary" :loading="loading" @click="fetchLampData">查询</el-button>
+      </div>
+
+      <el-empty v-if="!dtuSn" description="缺少 dtuSn" />
+
+      <template v-else>
+        <div class="section">
+          <div class="section-title">OEE时序</div>
+          <div class="timeline-wrap" ref="timelineRef" @wheel.prevent="onWheel">
+            <canvas
+              ref="canvasRef"
+              :width="canvasW"
+              :height="canvasH"
+              class="timeline-canvas"
+              @mousemove="onCanvasMouseMove"
+              @mouseleave="hoverSeg = null"
+            ></canvas>
+            <div
+              v-if="hoverSeg"
+              class="hover-tooltip"
+              :style="{ left: tooltipPos.x + 'px', top: tooltipPos.y + 'px' }"
+            >
+              <div class="tip-row"><span class="tip-label">开始：</span>{{ hoverSeg.startTimeText }}</div>
+              <div class="tip-row"><span class="tip-label">结束：</span>{{ hoverSeg.endTimeText }}</div>
+              <div class="tip-row">
+                <span class="tip-label">状态：</span>
+                <span :style="{ color: stateColorMap[hoverSeg.state] }">{{ stateNameMap[hoverSeg.state] || '未知' }}</span>
+              </div>
+              <div class="tip-row"><span class="tip-label">时长：</span>{{ formatDuration(hoverSeg.duration) }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="section-title">当日时长分布和异常原因分布</div>
+          <div class="charts">
+            <div class="chart-card">
+              <div class="chart-title">当日时长分布</div>
+              <div class="legend">
+                <div class="legend-item"><span class="dot green"></span>绿灯</div>
+                <div class="legend-item"><span class="dot red"></span>红灯</div>
+                <div class="legend-item"><span class="dot yellow"></span>黄灯</div>
+              </div>
+              <div class="pie-wrap">
+                <canvas
+                  ref="pieCanvasRef"
+                  width="280"
+                  height="280"
+                  class="pie-canvas"
+                  @mousemove="onPieMouseMove"
+                  @mouseleave="pieHoverItem = null"
+                ></canvas>
+                <div
+                  v-if="pieHoverItem"
+                  class="pie-tooltip"
+                  :style="{ left: pieTooltipPos.x + 'px', top: pieTooltipPos.y + 'px' }"
+                >
+                  <div class="pie-tip-title">时长详情</div>
+                  <div class="pie-tip-row">
+                    <span class="dot" :style="{ background: pieHoverItem.color }"></span>{{ pieHoverItem.key }}：{{
+                      formatDuration(pieHoverItem.sec)
+                    }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="chart-card">
+              <div class="chart-title">异常原因分布</div>
+              <div class="legend">
+                <div class="legend-item"><span class="dot red"></span>红灯未知原因</div>
+                <div class="legend-item"><span class="dot yellow"></span>黄灯未知原因</div>
+              </div>
+              <div class="pie-wrap">
+                <canvas
+                  ref="reasonCanvasRef"
+                  width="280"
+                  height="280"
+                  class="pie-canvas"
+                  @mousemove="onReasonMouseMove"
+                  @mouseleave="reasonHoverItem = null"
+                ></canvas>
+                <div
+                  v-if="reasonHoverItem"
+                  class="pie-tooltip"
+                  :style="{ left: reasonTooltipPos.x + 'px', top: reasonTooltipPos.y + 'px' }"
+                >
+                  <div class="pie-tip-title">时长占比</div>
+                  <div v-for="(row, i) in reasonHoverItem.rows" :key="i" class="pie-tip-row">
+                    {{ row.key }}总时长　{{ formatDuration(row.sec) }}
+                  </div>
+                  <div class="pie-tip-row">时长占比　{{ reasonHoverItem.pct }}%</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="section-title">OEE时序详情</div>
+          <el-empty v-if="!loading && tableData.length === 0" description="暂无数据" />
+          <div v-else class="detail-list">
+            <div v-for="(row, idx) in tableData" :key="idx" class="detail-item">
+              <div class="detail-top">
+                <div class="detail-time">{{ row.startTime }}</div>
+                <el-tag :type="statusTagType(row.statusName)" size="small">{{ row.statusName }}</el-tag>
+              </div>
+              <div class="detail-row">
+                <div class="k">运行时长</div>
+                <div class="v">{{ row.durationText }}</div>
+              </div>
+              <div class="detail-row">
+                <div class="k">原因</div>
+                <div class="v">{{ row.reason }}</div>
+              </div>
+              <div class="detail-row">
+                <div class="k">操作人</div>
+                <div class="v">{{ row.operator }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } 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 deviceName = computed(() => String(route.query.deviceName || ''))
+const dtuSn = computed(() => String(route.query.dtuSn || ''))
+const queryDate = ref(new Date().toISOString().slice(0, 10))
+const loading = ref(false)
+
+const stateColorMap = { 0: '#909399', 1: '#c0392b', 2: '#e67e22', 3: '#67c23a', 4: '#2463aa' }
+const stateNameMap = { '0': '灭灯', '1': '红灯', '2': '黄灯', '3': '绿灯', '4': '蓝灯' }
+
+const lampData = ref([])
+const stats = reactive({ off: '0秒', red: '0秒', yellow: '0秒', green: '0秒', blue: '0秒' })
+
+function formatDuration(seconds) {
+  if (!seconds || seconds <= 0) return '0秒'
+  seconds = Number(seconds)
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = Math.round(seconds % 60)
+  if (h > 0) return `${h}时${m}分${s}秒`
+  if (m > 0) return `${m}分${s}秒`
+  return `${s}秒`
+}
+
+function parseDurationToSec(str) {
+  if (!str) return 0
+  let total = 0
+  const hMatch = str.match(/(\d+)时/)
+  const mMatch = str.match(/(\d+)分/)
+  const sMatch = str.match(/(\d+)秒/)
+  if (hMatch) total += parseInt(hMatch[1]) * 3600
+  if (mMatch) total += parseInt(mMatch[1]) * 60
+  if (sMatch) total += parseInt(sMatch[1])
+  return total
+}
+
+function formatTimeStr(isoStr) {
+  if (!isoStr) return ''
+  const d = new Date(isoStr)
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  const h = String(d.getHours()).padStart(2, '0')
+  const min = String(d.getMinutes()).padStart(2, '0')
+  const s = String(d.getSeconds()).padStart(2, '0')
+  return `${m}/${dd} ${h}:${min}:${s}`
+}
+
+function calcEndTime(startTime, durationSec) {
+  if (!startTime) return ''
+  const d = new Date(startTime)
+  d.setSeconds(d.getSeconds() + (durationSec || 0))
+  return formatTimeStr(d.toISOString())
+}
+
+const tableData = computed(() => {
+  return lampData.value.map(item => ({
+    startTime: formatTimeStr(item.startTime),
+    status: item.lampState,
+    statusName: stateNameMap[String(item.lampState)] || '未知',
+    duration: item.duration,
+    durationText: formatDuration(item.duration),
+    reason: '无',
+    operator: '设备上传'
+  }))
+})
+
+function statusTagType(status) {
+  const map = { '绿灯': '', '黄灯': 'warning', '红灯': 'danger', '蓝灯': '', '灭灯': 'info' }
+  return map[status] || ''
+}
+
+async function fetchLampData() {
+  if (!dtuSn.value) return
+  loading.value = true
+  try {
+    const res = await apiFetch(`/api/device/lampData?dtuSn=${encodeURIComponent(dtuSn.value)}&date=${encodeURIComponent(queryDate.value)}`)
+    const data = await res.json()
+    const entry = (data.list && data.list[0]) || {}
+    lampData.value = (entry.lampData || []).sort((a, b) => new Date(b.startTime) - new Date(a.startTime))
+    const s = data.lampDurationStats || {}
+    stats.off = s.off || '0秒'
+    stats.red = s.red || '0秒'
+    stats.yellow = s.yellow || '0秒'
+    stats.green = s.green || '0秒'
+    stats.blue = s.blue || '0秒'
+  } catch (e) {
+    ElMessage.error('获取OEE数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const CANVAS_H = 100
+const timelineRef = ref(null)
+const canvasRef = ref(null)
+const hoverSeg = ref(null)
+const tooltipPos = reactive({ x: 0, y: 0 })
+const canvasW = ref(320)
+const canvasH = ref(CANVAS_H)
+const zoomLevel = ref(1)
+const viewOffsetX = ref(0)
+const minZoom = 0.001
+const maxZoom = 1
+
+function onWheel(e) {
+  const container = timelineRef.value
+  if (!container) return
+  const rect = container.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const mouseDataX = mx * zoomLevel.value + viewOffsetX.value
+  const delta = e.deltaY < 0 ? 0.8 : 1.25
+  const nextZ = Math.max(minZoom, Math.min(maxZoom, zoomLevel.value * delta))
+  viewOffsetX.value = mouseDataX - mx * nextZ
+  zoomLevel.value = nextZ
+}
+
+const rawSegments = computed(() => {
+  if (!lampData.value.length) return []
+  const dayStr = queryDate.value || new Date().toISOString().slice(0, 10)
+  const [y, m, d] = dayStr.split('-').map(Number)
+  const dayStartMs = new Date(y, m - 1, d).getTime()
+  const plotLeft = 55
+  const plotW = canvasW.value - plotLeft - 10
+
+  return lampData.value.map(item => {
+    const startMs = new Date(item.startTime).getTime()
+    const durSec = item.duration || 0
+    const endMs = startMs + durSec * 1000
+
+    const startX = ((startMs - dayStartMs) / 86400000) * plotW + plotLeft
+    const endX = ((endMs - dayStartMs) / 86400000) * plotW + plotLeft
+    const x = Math.max(plotLeft, startX)
+    const w = Math.max(1, endX - x)
+
+    return {
+      x,
+      w,
+      state: String(item.lampState),
+      startTime: item.startTime,
+      duration: item.duration,
+      startTimeText: formatTimeStr(item.startTime),
+      endTimeText: calcEndTime(item.startTime, item.duration)
+    }
+  })
+})
+
+function drawTimeline() {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  const W = canvasW.value
+  const H = canvasH.value
+  const z = zoomLevel.value
+  const vo = viewOffsetX.value
+
+  const labelLeft = 50
+  const plotLeft = 55
+  const plotW = W - plotLeft - 10
+  const barY = 24
+  const barH = 46
+  const axisY = barY + barH + 8
+  const timeLabelY = H - 4
+
+  ctx.clearRect(0, 0, W, H)
+
+  ctx.fillStyle = '#999'
+  ctx.font = '12px sans-serif'
+  ctx.fillText('时刻', labelLeft - vo / z, 16)
+
+  const totalSec = 24 * 3600
+  const visSpanSec = Math.max(60, (W * z / plotW) * totalSec)
+  let stepSec = 14400
+  if (visSpanSec <= 120) stepSec = 30
+  else if (visSpanSec <= 300) stepSec = 60
+  else if (visSpanSec <= 600) stepSec = 300
+  else if (visSpanSec <= 1800) stepSec = 600
+  else if (visSpanSec <= 3600) stepSec = 900
+  else if (visSpanSec <= 7200) stepSec = 1800
+  else if (visSpanSec <= 28800) stepSec = 3600
+  else stepSec = 7200
+
+  ctx.font = '11px sans-serif'
+  ctx.fillStyle = '#666'
+
+  const leftSec = ((vo - plotLeft) / plotW) * totalSec
+  let firstSec = Math.floor(leftSec / stepSec) * stepSec
+  if (firstSec < 0) firstSec = 0
+
+  for (let s = firstSec; s <= totalSec + stepSec * 2; s += stepSec) {
+    const dataPx = plotLeft + (s / totalSec) * plotW
+    const screenPx = (dataPx - vo) / z
+    if (screenPx < -50 || screenPx > W + 50) continue
+
+    const h = Math.floor(s / 3600)
+    const mm = Math.floor((s % 3600) / 60)
+    const ss = s % 60
+
+    if (stepSec < 60) {
+      ctx.fillText(`${String(h).padStart(2, '0')}:${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`, screenPx, timeLabelY)
+    } else {
+      ctx.fillText(`${String(h).padStart(2, '0')}:${String(mm).padStart(2, '0')}`, screenPx, timeLabelY)
+    }
+  }
+
+  ctx.strokeStyle = '#ddd'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo((plotLeft - vo) / z, axisY)
+  ctx.lineTo(((plotLeft + plotW) - vo) / z, axisY)
+  ctx.stroke()
+
+  const hoveredIdx = hoverSeg.value ? rawSegments.value.indexOf(hoverSeg.value) : -1
+  rawSegments.value.forEach((seg, idx) => {
+    const sx = (seg.x - vo) / z
+    const sw = seg.w / z
+    if (sx + sw < -1 || sx > W + 1) return
+    ctx.fillStyle = stateColorMap[seg.state] || '#909399'
+    ctx.globalAlpha = idx === hoveredIdx ? 0.7 : 1
+    ctx.fillRect(sx, barY, sw, barH)
+  })
+  ctx.globalAlpha = 1
+}
+
+function onCanvasMouseMove(e) {
+  const container = timelineRef.value
+  if (!container) return
+  const rect = container.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const z = zoomLevel.value
+  const vo = viewOffsetX.value
+  const dataX = mx * z + vo
+  const barY = 24
+  const barH = 46
+
+  let found = null
+  for (let i = rawSegments.value.length - 1; i >= 0; i--) {
+    const seg = rawSegments.value[i]
+    if (dataX >= seg.x && dataX <= seg.x + seg.w && my >= barY && my <= barY + barH) {
+      found = seg
+      break
+    }
+  }
+
+  hoverSeg.value = found
+  if (found) {
+    tooltipPos.x = Math.min(Math.max(mx + 12, 12), rect.width - 190)
+    tooltipPos.y = Math.max(my - 80, 6)
+  }
+}
+
+function updateCanvasSize() {
+  if (!timelineRef.value) return
+  canvasW.value = Math.max(300, timelineRef.value.clientWidth)
+  canvasH.value = CANVAS_H
+}
+
+const pieCanvasRef = ref(null)
+const reasonCanvasRef = ref(null)
+const pieHoverItem = ref(null)
+const pieTooltipPos = reactive({ x: 0, y: 0 })
+const reasonHoverItem = ref(null)
+const reasonTooltipPos = reactive({ x: 0, y: 0 })
+let pieAngleRanges = []
+let reasonAngleRanges = []
+
+const stateSeconds = computed(() => ({
+  green: parseDurationToSec(stats.green),
+  red: parseDurationToSec(stats.red),
+  yellow: parseDurationToSec(stats.yellow)
+}))
+
+const reasonStats = computed(() => {
+  const redSec = parseDurationToSec(stats.red)
+  const yellowSec = parseDurationToSec(stats.yellow)
+  const items = []
+  if (redSec > 0) items.push({ key: '红灯', sec: redSec, color: '#f56c6c' })
+  if (yellowSec > 0) items.push({ key: '黄灯', sec: yellowSec, color: '#f5a623' })
+  return items
+})
+
+function drawPieChart(canvasRefKey, items, options = {}) {
+  const canvas = canvasRefKey?.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  const W = canvas.width
+  const H = canvas.height
+  const cx = W / 2
+  const cy = H / 2
+  const r = Math.min(W, H) / 2 - 8
+  const solid = !!options.solid
+  const innerR = solid ? 0 : r * 0.55
+
+  ctx.clearRect(0, 0, W, H)
+
+  if (!items || items.length === 0) {
+    ctx.beginPath()
+    ctx.arc(cx, cy, r, 0, Math.PI * 2)
+    if (!solid) ctx.arc(cx, cy, innerR, 0, Math.PI * 2, true)
+    ctx.fillStyle = '#eee'
+    ctx.fill()
+    ctx.fillStyle = '#999'
+    ctx.font = '12px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', cx, cy)
+    if (canvas === pieCanvasRef.value) pieAngleRanges = []
+    if (canvas === reasonCanvasRef.value) reasonAngleRanges = []
+    return
+  }
+
+  const total = items.reduce((s, i) => s + i.sec, 0) || 1
+  let startAngle = -Math.PI / 2
+
+  if (canvas === pieCanvasRef.value) pieAngleRanges = []
+  if (canvas === reasonCanvasRef.value) reasonAngleRanges = []
+
+  items.forEach(item => {
+    const angle = (item.sec / total) * Math.PI * 2
+    const endAngle = startAngle + angle
+    const midAngle = startAngle + angle / 2
+
+    ctx.beginPath()
+    if (solid) {
+      ctx.moveTo(cx, cy)
+      ctx.arc(cx, cy, r, startAngle, endAngle)
+      ctx.closePath()
+    } else {
+      ctx.moveTo(cx + innerR * Math.cos(startAngle), cy + innerR * Math.sin(startAngle))
+      ctx.arc(cx, cy, r, startAngle, endAngle)
+      ctx.arc(cx, cy, innerR, endAngle, startAngle, true)
+      ctx.closePath()
+    }
+    ctx.fillStyle = item.color
+    ctx.fill()
+
+    if (canvas === pieCanvasRef.value) pieAngleRanges.push({ ...item, startAngle, endAngle, cx, cy, r, innerR, total })
+    else if (canvas === reasonCanvasRef.value) reasonAngleRanges.push({ ...item, startAngle, endAngle, cx, cy, r, innerR, total })
+
+    if (angle > 0.25) {
+      const labelR = solid ? r * 0.65 : (r + innerR) / 2
+      const lx = cx + labelR * Math.cos(midAngle)
+      const ly = cy + labelR * Math.sin(midAngle)
+      const pct = ((item.sec / total) * 100).toFixed(2)
+
+      ctx.fillStyle = '#fff'
+      ctx.font = solid ? 'bold 16px sans-serif' : 'bold 14px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.fillText(`${pct}%`, lx, ly - (solid ? 10 : 8))
+      ctx.font = solid ? '12px sans-serif' : '12px sans-serif'
+      ctx.fillText(item.key, lx, ly + 10)
+    }
+
+    startAngle = endAngle
+  })
+}
+
+function inAngleRange(a, sa, ea) {
+  const norm = v => {
+    let x = v % (Math.PI * 2)
+    if (x < 0) x += Math.PI * 2
+    return x
+  }
+  const na = norm(a)
+  const nsa = norm(sa)
+  const nea = norm(ea)
+  if (nea >= nsa) return na >= nsa && na <= nea
+  return na >= nsa || na <= nea
+}
+
+function onPieMouseMove(e) {
+  const canvas = pieCanvasRef.value
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const scaleX = canvas.width / rect.width
+  const scaleY = canvas.height / rect.height
+  const px = mx * scaleX
+  const py = my * scaleY
+
+  let found = null
+  for (let i = pieAngleRanges.length - 1; i >= 0; i--) {
+    const seg = pieAngleRanges[i]
+    const dx = px - seg.cx
+    const dy = py - seg.cy
+    const dist = Math.sqrt(dx * dx + dy * dy)
+    const inRadius = dist <= seg.r && dist >= seg.innerR
+    if (!inRadius) continue
+    const mouseAngle = Math.atan2(dy, dx)
+    if (inAngleRange(mouseAngle, seg.startAngle, seg.endAngle)) {
+      found = seg
+      break
+    }
+  }
+
+  pieHoverItem.value = found
+  if (found) {
+    pieTooltipPos.x = Math.min(Math.max(mx + 12, 12), rect.width - 160)
+    pieTooltipPos.y = Math.max(my - 60, 6)
+  }
+}
+
+function onReasonMouseMove(e) {
+  const canvas = reasonCanvasRef.value
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const scaleX = canvas.width / rect.width
+  const scaleY = canvas.height / rect.height
+  const px = mx * scaleX
+  const py = my * scaleY
+
+  let found = null
+  for (let i = reasonAngleRanges.length - 1; i >= 0; i--) {
+    const seg = reasonAngleRanges[i]
+    const dx = px - seg.cx
+    const dy = py - seg.cy
+    const dist = Math.sqrt(dx * dx + dy * dy)
+    const inRadius = dist <= seg.r && dist >= seg.innerR
+    if (!inRadius) continue
+    const mouseAngle = Math.atan2(dy, dx)
+    if (inAngleRange(mouseAngle, seg.startAngle, seg.endAngle)) {
+      found = seg
+      break
+    }
+  }
+
+  if (found || reasonAngleRanges.length > 0) {
+    const total = reasonAngleRanges.reduce((s, r) => s + r.sec, 0) || 1
+    const pct = ((found ? found.sec / total : 1) * 100).toFixed(2)
+    reasonHoverItem.value = found
+      ? { rows: [{ key: found.key, sec: found.sec }], pct }
+      : { rows: reasonAngleRanges.map(r => ({ key: r.key, sec: r.sec })), pct: '100.00' }
+  } else {
+    reasonHoverItem.value = null
+  }
+
+  if (reasonHoverItem.value) {
+    reasonTooltipPos.x = Math.min(Math.max(mx + 12, 12), rect.width - 180)
+    reasonTooltipPos.y = Math.max(my - 70, 6)
+  }
+}
+
+function drawDurationPie() {
+  const { green, red, yellow } = stateSeconds.value
+  const items = []
+  if (green > 0) items.push({ key: '绿灯', sec: green, color: '#67c23a' })
+  if (red > 0) items.push({ key: '红灯', sec: red, color: '#f56c6c' })
+  if (yellow > 0) items.push({ key: '黄灯', sec: yellow, color: '#f5a623' })
+  drawPieChart(pieCanvasRef, items, { solid: true })
+}
+
+function drawReasonPie() {
+  drawPieChart(reasonCanvasRef, reasonStats.value)
+}
+
+function goBack() {
+  if (window.history.length > 1) router.back()
+  else router.push({ path: '/smart-light-h5', query: route.query })
+}
+
+watch([lampData, zoomLevel, viewOffsetX, canvasW], () => {
+  nextTick(drawTimeline)
+}, { deep: true })
+
+watch([stats, lampData], () => {
+  nextTick(() => {
+    drawDurationPie()
+    drawReasonPie()
+  })
+}, { deep: true })
+
+watch([dtuSn, queryDate], () => {
+  if (dtuSn.value) fetchLampData()
+})
+
+onMounted(() => {
+  updateCanvasSize()
+  const el = timelineRef.value
+  if (el) {
+    const ro = new ResizeObserver(updateCanvasSize)
+    ro.observe(el)
+  }
+  nextTick(() => {
+    drawDurationPie()
+    drawReasonPie()
+  })
+  if (dtuSn.value) fetchLampData()
+})
+</script>
+
+<style scoped>
+.h5-page {
+  min-height: 100vh;
+  background-color: #f5f6f8;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.title {
+  flex: 1 1 auto;
+  text-align: center;
+  font-weight: 700;
+  color: #111827;
+}
+
+.spacer {
+  width: 48px;
+}
+
+.content {
+  padding: 12px;
+}
+
+.device {
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 10px;
+  word-break: break-all;
+}
+
+.query {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.query-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.query-label {
+  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;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.timeline-wrap {
+  position: relative;
+  padding: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.timeline-canvas {
+  width: 100%;
+  height: 100px;
+  display: block;
+}
+
+.hover-tooltip {
+  position: absolute;
+  width: 180px;
+  padding: 8px 10px;
+  background: rgba(17, 24, 39, 0.92);
+  color: #fff;
+  font-size: 12px;
+  border-radius: 10px;
+  pointer-events: none;
+}
+
+.tip-row {
+  line-height: 1.45;
+}
+
+.tip-label {
+  opacity: 0.85;
+}
+
+.detail-list {
+  display: grid;
+  gap: 10px;
+}
+
+.detail-item {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 10px;
+}
+
+.detail-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.detail-time {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 13px;
+}
+
+.detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  padding-top: 4px;
+}
+
+.detail-row .k {
+  color: #64748b;
+}
+
+.detail-row .v {
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.charts {
+  display: grid;
+  gap: 12px;
+}
+
+.chart-card {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 10px;
+}
+
+.chart-title {
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.legend {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  color: #475569;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.dot.green {
+  background: #67c23a;
+}
+
+.dot.red {
+  background: #f56c6c;
+}
+
+.dot.yellow {
+  background: #f5a623;
+}
+
+.pie-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.pie-canvas {
+  width: 240px;
+  height: 240px;
+}
+
+.pie-tooltip {
+  position: absolute;
+  min-width: 160px;
+  padding: 8px 10px;
+  background: rgba(17, 24, 39, 0.92);
+  color: #fff;
+  font-size: 12px;
+  border-radius: 10px;
+  pointer-events: none;
+}
+
+.pie-tip-title {
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+
+.pie-tip-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1.45;
+}
+
+.pie-tip-row .dot {
+  width: 8px;
+  height: 8px;
+}
+</style>

+<template>
+  <div class="h5-page">
+    <div class="topbar">
+      <el-button text @click="goBack">返回</el-button>
+      <div class="title">稼动率</div>
+      <div class="spacer"></div>
+    </div>
+
+    <div class="content">
+      <div class="device">{{ deviceName || '-' }}</div>
+
+      <div class="query">
+        <el-radio-group v-model="queryMode" size="small">
+          <el-radio-button value="day">日查询</el-radio-button>
+          <el-radio-button value="week">周查询</el-radio-button>
+          <el-radio-button value="month">月查询</el-radio-button>
+        </el-radio-group>
+        <el-date-picker
+          v-if="queryMode === 'day'"
+          v-model="queryDateRange"
+          type="daterange"
+          start-placeholder="开始"
+          end-placeholder="结束"
+          value-format="YYYY-MM-DD"
+          size="small"
+          class="range"
+        />
+        <el-button type="primary" size="small" :loading="loading" @click="fetchOeeData">查询</el-button>
+      </div>
+
+      <el-empty v-if="!dtuSn" description="缺少 dtuSn" />
+
+      <template v-else>
+        <div class="section">
+          <div class="section-title">颜色时长明细</div>
+          <div class="legend-inline">
+            <span class="leg"><i class="dot green"></i>绿灯</span>
+            <span class="leg"><i class="dot yellow"></i>黄灯</span>
+            <span class="leg"><i class="dot red"></i>红灯</span>
+            <span class="leg"><i class="dot gray"></i>离线</span>
+          </div>
+          <div class="canvas-scroll">
+            <div class="canvas-wrap">
+              <canvas ref="durCanvas" :width="durCanvasW" :height="240"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-title">颜色时长总计</div>
+          <div class="pie-wrap">
+            <canvas ref="durPieCanvas" width="200" height="200"></canvas>
+          </div>
+          <div class="pie-legend">
+            <div class="pleg"><span class="pdot green"></span>绿灯</div>
+            <div class="pleg"><span class="pdot yellow"></span>黄灯</div>
+            <div class="pleg"><span class="pdot red"></span>红灯</div>
+            <div class="pleg"><span class="pdot gray"></span>离线</div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-title">颜色次数明细</div>
+          <div class="legend-inline">
+            <span class="leg"><i class="dot green"></i>绿灯</span>
+            <span class="leg"><i class="dot yellow"></i>黄灯</span>
+            <span class="leg"><i class="dot red"></i>红灯</span>
+            <span class="leg"><i class="dot gray"></i>离线</span>
+          </div>
+          <div class="canvas-scroll">
+            <div class="canvas-wrap">
+              <canvas ref="freqCanvas" :width="freqCanvasW" :height="260"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-title">颜色次数总计</div>
+          <div class="pie-wrap">
+            <canvas ref="freqPieCanvas" width="200" height="200"></canvas>
+          </div>
+          <div class="pie-legend">
+            <div class="pleg"><span class="pdot green"></span>绿灯</div>
+            <div class="pleg"><span class="pdot yellow"></span>黄灯</div>
+            <div class="pleg"><span class="pdot red"></span>红灯</div>
+            <div class="pleg"><span class="pdot gray"></span>离线</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } 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 deviceName = computed(() => String(route.query.deviceName || ''))
+const dtuSn = computed(() => String(route.query.dtuSn || ''))
+
+const queryMode = ref('day')
+const now = new Date()
+const weekAgo = new Date(now)
+weekAgo.setDate(weekAgo.getDate() - 6)
+const queryDateRange = ref([formatDate(weekAgo), formatDate(now)])
+
+const loading = ref(false)
+const oeeData = ref(null)
+
+const summary = computed(() => oeeData.value?.summary || {})
+const displayList = computed(() => oeeData.value?.list || [])
+
+const padL = 50
+const padB = 24
+const COLORS = { green: '#67c23a', yellow: '#e6a23c', red: '#f56c6c', off: '#909399' }
+const COLOR_NAMES = { green: '绿灯', yellow: '黄灯', red: '红灯', off: '离线' }
+
+const durCanvas = ref(null)
+const freqCanvas = ref(null)
+const durPieCanvas = ref(null)
+const freqPieCanvas = ref(null)
+
+const durCanvasW = computed(() => {
+  const n = Math.max(displayList.value.length, 1)
+  return Math.max(360, padL + n * 64 + 20)
+})
+const freqCanvasW = computed(() => {
+  const n = Math.max(displayList.value.length, 1)
+  return Math.max(360, padL + n * 64 + 20)
+})
+
+const maxDurSec = computed(() => {
+  const list = displayList.value
+  if (!list.length) return 86400
+  let max = 1
+  list.forEach(item => {
+    const total = (item.off?.seconds || 0) + (item.red?.seconds || 0) + (item.yellow?.seconds || 0) + (item.green?.seconds || 0)
+    max = Math.max(max, total)
+  })
+  return max
+})
+
+const maxFreqCount = computed(() => {
+  const list = displayList.value
+  if (!list.length) return 100
+  let max = 1
+  list.forEach(item => {
+    const total = (item.off?.count || 0) + (item.red?.count || 0) + (item.yellow?.count || 0) + (item.green?.count || 0)
+    max = Math.max(max, total)
+  })
+  return max
+})
+
+const durPieSegs = computed(() => {
+  const s = summary.value
+  const items = [
+    { key: 'green', name: '绿灯', val: s.green?.seconds || 0, color: COLORS.green },
+    { key: 'yellow', name: '黄灯', val: s.yellow?.seconds || 0, color: COLORS.yellow },
+    { key: 'red', name: '红灯', val: s.red?.seconds || 0, color: COLORS.red },
+    { key: 'off', name: '离线', val: s.off?.seconds || 0, color: COLORS.off }
+  ].filter(x => x.val > 0).sort((a, b) => b.val - a.val)
+  const total = items.reduce((sum, x) => sum + x.val, 0) || 1
+  let angle = -Math.PI / 2
+  return items.map(item => {
+    const sweep = (item.val / total) * Math.PI * 2
+    const seg = { ...item, startAngle: angle, endAngle: angle + sweep, pct: ((item.val / total) * 100).toFixed(2) }
+    angle += sweep
+    return seg
+  })
+})
+
+const freqPieSegs = computed(() => {
+  const s = summary.value
+  const items = [
+    { key: 'green', name: '绿灯', val: s.green?.count || 0, color: COLORS.green },
+    { key: 'yellow', name: '黄灯', val: s.yellow?.count || 0, color: COLORS.yellow },
+    { key: 'red', name: '红灯', val: s.red?.count || 0, color: COLORS.red },
+    { key: 'off', name: '离线', val: s.off?.count || 0, color: COLORS.off }
+  ].filter(x => x.val > 0).sort((a, b) => b.val - a.val)
+  const total = items.reduce((sum, x) => sum + x.val, 0) || 1
+  let angle = -Math.PI / 2
+  return items.map(item => {
+    const sweep = (item.val / total) * Math.PI * 2
+    const seg = { ...item, startAngle: angle, endAngle: angle + sweep, pct: ((item.val / total) * 100).toFixed(2) }
+    angle += sweep
+    return seg
+  })
+})
+
+function formatDate(d) {
+  const dt = new Date(d)
+  return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`
+}
+
+function formatDateShort(s) {
+  if (!s) return ''
+  return String(s).slice(5)
+}
+
+function formatSec(s) {
+  if (!s || s <= 0) return '0秒'
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = Math.floor(s % 60)
+  if (h > 0) return `${h}时${m}分${sec}秒`
+  if (m > 0) return `${m}分${sec}秒`
+  return `${sec}秒`
+}
+
+const dpr = window.devicePixelRatio || 1
+function setupCanvas(cvs, cssW, cssH) {
+  cvs.width = Math.round(cssW * dpr)
+  cvs.height = Math.round(cssH * dpr)
+  cvs.style.width = cssW + 'px'
+  cvs.style.height = cssH + 'px'
+  const ctx = cvs.getContext('2d')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return { ctx, W: cssW, H: cssH }
+}
+
+function drawDurBar() {
+  const cvs = durCanvas.value
+  if (!cvs) return
+  const wrap = cvs.parentElement
+  const cssH = 240
+  const cssW = Math.max(wrap ? wrap.clientWidth : durCanvasW.value, durCanvasW.value)
+  const { ctx, W, H } = setupCanvas(cvs, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+
+  const plotTop = 18
+  const plotBottom = H - padB
+  const plotH = plotBottom - plotTop
+  const n = displayList.value.length
+  const groupW = n ? (W - padL - 10) / n : 1
+  const maxSec = maxDurSec.value || 1
+
+  ctx.font = '10px sans-serif'
+  ctx.fillStyle = '#999'
+  ctx.textAlign = 'right'
+  const tickCount = 5
+  for (let i = 0; i <= tickCount; i++) {
+    const sec = (maxSec * i) / tickCount
+    const y = plotBottom - (i / tickCount) * plotH + 3
+    const h = Math.floor(sec / 3600)
+    const m = Math.floor((sec % 3600) / 60)
+    ctx.fillText(h > 0 ? `${h}时` : `${m}分`, 32, y)
+  }
+
+  ctx.font = '9px sans-serif'
+  ctx.fillStyle = '#666'
+  ctx.textAlign = 'center'
+  displayList.value.forEach((item, i) => {
+    ctx.fillText(item.label || formatDateShort(item.startDate), padL + (i + 0.5) * groupW, H - 4)
+  })
+
+  ctx.strokeStyle = '#f0f0f0'
+  ctx.lineWidth = 1
+  for (let i = 0; i <= tickCount; i++) {
+    const y = plotBottom - (i / tickCount) * plotH
+    ctx.beginPath()
+    ctx.moveTo(padL, y)
+    ctx.lineTo(W - 10, y)
+    ctx.stroke()
+  }
+
+  displayList.value.forEach((item, idx) => {
+    const bx = padL + idx * groupW + (groupW - Math.min(groupW - 8, 44)) / 2
+    const bw = Math.min(groupW - 8, 44)
+    const scale = plotH / maxSec
+    let curY = plotBottom
+    const stack = [
+      { k: 'off', sec: item.off?.seconds || 0 },
+      { k: 'red', sec: item.red?.seconds || 0 },
+      { k: 'yellow', sec: item.yellow?.seconds || 0 },
+      { k: 'green', sec: item.green?.seconds || 0 }
+    ]
+    stack.forEach(seg => {
+      if (!seg.sec) return
+      const h = seg.sec * scale
+      curY -= h
+      ctx.fillStyle = COLORS[seg.k]
+      ctx.fillRect(bx, curY, bw, h)
+    })
+  })
+}
+
+function drawFreqBar() {
+  const cvs = freqCanvas.value
+  if (!cvs) return
+  const wrap = cvs.parentElement
+  const cssH = 260
+  const cssW = Math.max(wrap ? wrap.clientWidth : freqCanvasW.value, freqCanvasW.value)
+  const { ctx, W, H } = setupCanvas(cvs, cssW, cssH)
+  ctx.clearRect(0, 0, W, H)
+
+  const plotTop = 22
+  const plotBottom = H - padB
+  const plotH = plotBottom - plotTop
+  const n = displayList.value.length
+  const groupW = n ? (W - padL - 10) / n : 1
+  const maxCnt = maxFreqCount.value || 1
+
+  ctx.font = '10px sans-serif'
+  ctx.fillStyle = '#999'
+  ctx.textAlign = 'right'
+  const tickCount = 6
+  const step = Math.ceil(maxCnt / tickCount / 10) * 10 || 10
+  for (let i = 0; i <= tickCount; i++) {
+    const y = plotBottom - (i / tickCount) * plotH + 3
+    ctx.fillText(i * step + '次', 32, y)
+  }
+
+  ctx.font = '9px sans-serif'
+  ctx.fillStyle = '#666'
+  ctx.textAlign = 'center'
+  displayList.value.forEach((item, i) => {
+    ctx.fillText(item.label || formatDateShort(item.startDate), padL + (i + 0.5) * groupW, H - 4)
+  })
+
+  ctx.strokeStyle = '#f0f0f0'
+  ctx.lineWidth = 1
+  for (let i = 0; i <= tickCount; i++) {
+    const y = plotBottom - (i / tickCount) * plotH
+    ctx.beginPath()
+    ctx.moveTo(padL, y)
+    ctx.lineTo(W - 10, y)
+    ctx.stroke()
+  }
+
+  displayList.value.forEach((item, idx) => {
+    const bx = padL + idx * groupW + (groupW - Math.min(groupW - 8, 44)) / 2
+    const bw = Math.min(groupW - 8, 44)
+    const scale = plotH / (step * tickCount)
+    let curY = plotBottom
+    const stack = [
+      { k: 'off', cnt: item.off?.count || 0 },
+      { k: 'red', cnt: item.red?.count || 0 },
+      { k: 'yellow', cnt: item.yellow?.count || 0 },
+      { k: 'green', cnt: item.green?.count || 0 }
+    ]
+    stack.forEach(seg => {
+      if (!seg.cnt) return
+      const h = seg.cnt * scale
+      curY -= h
+      ctx.fillStyle = COLORS[seg.k]
+      ctx.fillRect(bx, curY, bw, h)
+    })
+  })
+}
+
+function drawPie(cvsRef, segs) {
+  const cvs = cvsRef.value
+  if (!cvs) return
+  const { ctx } = setupCanvas(cvs, 200, 200)
+  ctx.clearRect(0, 0, 200, 200)
+  const cx = 100
+  const cy = 100
+  const R = 74
+
+  if (!segs.length) {
+    ctx.beginPath()
+    ctx.arc(cx, cy, R, 0, Math.PI * 2)
+    ctx.fillStyle = '#eee'
+    ctx.fill()
+    ctx.fillStyle = '#999'
+    ctx.font = '12px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('暂无数据', cx, cy)
+    return
+  }
+
+  segs.forEach(seg => {
+    ctx.beginPath()
+    ctx.moveTo(cx, cy)
+    ctx.arc(cx, cy, R, seg.startAngle, seg.endAngle)
+    ctx.closePath()
+    ctx.fillStyle = seg.color
+    ctx.fill()
+  })
+
+  ctx.fillStyle = '#fff'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  segs.forEach(seg => {
+    const midAngle = (seg.startAngle + seg.endAngle) / 2
+    const tx = cx + Math.cos(midAngle) * R * 0.58
+    const ty = cy + Math.sin(midAngle) * R * 0.58
+    ctx.font = 'bold 12px sans-serif'
+    ctx.fillText(seg.pct + '%', tx, ty - 6)
+    ctx.font = '10px sans-serif'
+    ctx.fillText(seg.name, tx, ty + 7)
+  })
+}
+
+function redrawAll() {
+  nextTick(() => {
+    drawDurBar()
+    drawFreqBar()
+    drawPie(durPieCanvas, durPieSegs.value)
+    drawPie(freqPieCanvas, freqPieSegs.value)
+  })
+}
+
+async function fetchOeeData() {
+  if (!dtuSn.value) return
+  let params = `dtuSn=${encodeURIComponent(dtuSn.value)}&type=${encodeURIComponent(queryMode.value)}`
+  if (queryMode.value === 'day') {
+    const [start, end] = queryDateRange.value || []
+    if (!start || !end) return
+    params += `&startDate=${encodeURIComponent(start)}&endDate=${encodeURIComponent(end)}`
+  }
+  loading.value = true
+  try {
+    const res = await apiFetch(`/api/device/oeeStats?${params}`)
+    oeeData.value = await res.json()
+  } catch (e) {
+    ElMessage.error('获取稼动率数据失败')
+    console.warn(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goBack() {
+  if (window.history.length > 1) router.back()
+  else router.push({ path: '/smart-light-h5', query: route.query })
+}
+
+watch([durCanvasW, freqCanvasW], () => redrawAll())
+watch(oeeData, () => redrawAll(), { deep: true })
+watch(queryMode, () => fetchOeeData())
+watch(queryDateRange, () => {
+  if (queryMode.value === 'day') fetchOeeData()
+})
+
+onMounted(() => {
+  if (dtuSn.value) fetchOeeData()
+})
+</script>
+
+<style scoped>
+.h5-page {
+  min-height: 100vh;
+  background-color: #f5f6f8;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.title {
+  flex: 1 1 auto;
+  text-align: center;
+  font-weight: 700;
+  color: #111827;
+}
+
+.spacer {
+  width: 48px;
+}
+
+.content {
+  padding: 12px;
+}
+
+.device {
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 10px;
+  word-break: break-all;
+}
+
+.query {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.range {
+  width: 100%;
+}
+
+.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: 10px;
+}
+
+.legend-inline {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  color: #475569;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.leg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.dot.green {
+  background: #67c23a;
+}
+
+.dot.yellow {
+  background: #e6a23c;
+}
+
+.dot.red {
+  background: #f56c6c;
+}
+
+.dot.gray {
+  background: #909399;
+}
+
+.canvas-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.canvas-wrap {
+  min-width: 100%;
+}
+
+.pie-wrap {
+  display: flex;
+  justify-content: center;
+  padding-top: 6px;
+}
+
+.pie-legend {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+  color: #475569;
+  font-size: 12px;
+}
+
+.pleg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pdot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.pdot.green {
+  background: #67c23a;
+}
+
+.pdot.yellow {
+  background: #e6a23c;
+}
+
+.pdot.red {
+  background: #f56c6c;
+}
+
+.pdot.gray {
+  background: #909399;
+}
+</style>

@@ -16,6 +16,14 @@ export default defineConfig({
         changeOrigin: true,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '/iot-scheduler'),
         rewrite: (path) => path.replace(/^\/api/, '/iot-scheduler'),
       },
       },
+      '/device': {
+        target: 'http://10.9.5.84:33221',
+        changeOrigin: true,
+      },
+      '/energy': {
+        target: 'http://10.9.5.84:33221',
+        changeOrigin: true,
+      },
     },
     },
   },
   },
   resolve: {
   resolve: {
@@ -23,4 +31,4 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
     },
   },
   },
-})
+})