feat: 重构时序状态为Canvas甘特图

@@ -88,64 +88,38 @@
     </div>
     </div>
     </div><!-- /tab-content realtime -->
     </div><!-- /tab-content realtime -->
 
 
-    <!-- ========== 时序状态：时间轴甘特图 ========== -->
-    <div v-else-if="currentStatus === 'timeseries'" class="tab-content timeseries-view">
+    <!-- ========== 时序状态：Canvas甘特图 ========== -->
+    <div v-else-if="currentStatus === 'timeseries'" class="tab-content timeseries-view" ref="tsWrapRef">
       <div class="ts-toolbar">
       <div class="ts-toolbar">
         <span class="ts-label">查询方式：</span>
         <span class="ts-label">查询方式：</span>
-        <el-radio-group v-model="tsQueryMode" size="small">
+        <el-radio-group v-model="tsQueryMode" size="small" @change="onTsModeChange">
           <el-radio-button value="day">日查询</el-radio-button>
           <el-radio-button value="day">日查询</el-radio-button>
         </el-radio-group>
         </el-radio-group>
-        <el-date-picker v-model="tsDateRange" type="daterange" size="small" range-separator="-"
-          start-placeholder="" end-placeholder="" style="width: 260px; margin-left: 8px;" />
-        <el-button type="primary" size="small">查询</el-button>
+        <el-date-picker v-model="tsSelectedDate" type="date" placeholder="" size="small"
+          style="width:160px;margin-left:8px;" value-format="YYYY-MM-DD"
+          :disabled-date="disabledDateFuture" @change="fetchTimelineData" />
+        <el-button type="primary" size="small" style="margin-left:8px;" @click="fetchTimelineData">查询</el-button>
       </div>
       </div>
 
 
-      <div class="ts-table-wrap">
-        <div class="ts-header-row">
-          <div class="ts-col-name">设备名称</div>
-          <div class="ts-col-name ts-sub-col">稼动率</div>
-          <div class="ts-col-name ts-sub-col2">用电量</div>
-          <div class="ts-timeline-area">
-            <div style="display:flex;justify-content:space-between;padding-right:16px;">
-              <span style="font-size:12px;color:#333;font-weight:bold;">{{ tsHeaderDate }}</span>
-              <span style="font-size:12px;color:#333;font-weight:bold;">202</span>
-            </div>
-            <svg viewBox="0 0 1200 1" preserveAspectRatio="none" style="width:100%;height:30px;">
-              <g font-size="11" fill="#666" text-anchor="middle">
-                <text x="50" y="-5">10:15</text><text x="150" y="-5">10:30</text>
-                <text x="250" y="-5">10:45</text>
-                <text x="350" y="-5">11:00</text>
-                <text x="450" y="-5">11:15</text>
-                <text x="550" y="-5">11:30</text>
-                <text x="650" y="-5">11:45</text><text x="750" y="-5">12:00</text>
-                <text x="850" y="-5">12:15</text>
-                <text x="950" y="-5">12:30</text><text x="1050" y="-5">12:</text><text x="1150" y="-5"></text>
-              </g>
-            </svg>
-          </div>
-        </div>
-
-        <div v-for="(dev, idx) in energyTimeSeriesData" :key="idx"
-             :class="['ts-row', { 'row-gray': dev.rate === 0 }]">
-          <div class="ts-cell-name">
-            <span class="ts-link">{{ dev.name }}</span>
-          </div>
-          <div class="ts-cell-rate">{{ dev.rate }}%</div>
-          <div class="ts-cell-rate">{{ dev.power }}</div>
-          <div class="ts-cell-bars">
-            <div class="bar-track">
-              <template v-for="(seg, si) in dev.segments" :key="si">
-                <div class="bar-seg" :class="'seg-' + seg.color"
-                     :style="{ left: seg.left + '%', width: seg.width + '%' }"></div>
-              </template>
-            </div>
+      <div class="ts-gantt-wrap" v-loading="tsLoading">
+        <div class="ts-fixed-col"><canvas ref="tsFixedCanvasRef"></canvas></div>
+        <div class="ts-scroll-area" ref="tsScrollAreaRef" @scroll="onTsScroll">
+          <canvas ref="tsGanttCanvasRef" @mousemove="onTsGanttMouseMove" @mouseleave="onTsGanttMouseLeave" @wheel.prevent.stop="onTsGanttWheel"></canvas>
+          <div v-if="tsHover.show" class="gantt-tooltip" :style="{ left: tsHover.x + 'px', top: tsHover.y + 'px' }">
+            <div class="gtt-title">{{ tsHover.deviceName }}</div>
+            <div class="gtt-row"><span class="gtt-label">状态</span><span class="gtt-val" :style="{ color: TS_STATUS_COLORS[tsHover.status] }">{{ tsStatusLabel(tsHover.status) }}</span></div>
+            <div class="gtt-row"><span class="gtt-label">开始</span><span class="gtt-val">{{ tsHover.startTime }}</span></div>
+            <div class="gtt-row"><span class="gtt-label">结束</span><span class="gtt-val">{{ tsHover.endTime || '-' }}</span></div>
+            <div class="gtt-row"><span class="gtt-label">时长</span><span class="gtt-val gtt-highlight">{{ tsFormatDuration(tsHover.duration) }}</span></div>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
 
 
       <div class="pagination-wrapper">
       <div class="pagination-wrapper">
-        <span>共 {{ energyTimeSeriesData.length }} 条</span>
-        <el-pagination :current-page="1" :page-size="20" layout="prev, pager, next, total, jumper" :total="energyTimeSeriesData.length" small />
+        <span>共 {{ tsTotal }} 条</span>
+        <el-pagination small layout="sizes, prev, pager, next, jumper"
+          v-model:current-page="tsPageNo" v-model:page-size="tsPageSize"
+          :total="tsTotal" :page-sizes="[12, 24, 48]" @size-change="fetchTimelineData" @current-change="fetchTimelineData" />
       </div>
       </div>
     </div>
     </div>
 
 
@@ -294,7 +268,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
 import { Search, Menu, Document, Lock, Setting, Warning, Histogram } from '@element-plus/icons-vue'
 import { Search, Menu, Document, Lock, Setting, Warning, Histogram } from '@element-plus/icons-vue'
 import EnergyReportDialog from '../components/EnergyReportDialog.vue'
 import EnergyReportDialog from '../components/EnergyReportDialog.vue'
 import SafetyDialog from '../components/SafetyDialog.vue'
 import SafetyDialog from '../components/SafetyDialog.vue'
@@ -422,14 +396,304 @@ function openDetail(type, device) {
   dialogVisible[type] = true
   dialogVisible[type] = true
 }
 }
 
 
-// ========== 时序状态数据 ==========
+// ========== 时序状态：Canvas甘特图 ==========
+const TS_STATUS_COLORS = { 0: '#909399', 1: '#e74c3c', 2: '#67c23a', 3: '#c5d94e' }
+const TS_STATUS_MAP = { 0: '离线', 1: '停机', 2: '运行', 3: '待机' }
+
 const tsQueryMode = ref('day')
 const tsQueryMode = ref('day')
-const tsDateRange = ref(null)
-const tsHeaderDate = ref('2026-04-28')
-const energyTimeSeriesData = ref([
-  { name: '能耗设备1', rate: 0, power: 0, segments: [{color:'gy',left:0,width:100}] },
-  { name: '能耗设备2', rate: 0, power: 0, segments: [{color:'gy',left:0,width:100}] }
-])
+const tsSelectedDate = ref(new Date().toISOString().slice(0, 10))
+const tsPageNo = ref(1)
+const tsPageSize = ref(12)
+const tsTotal = ref(0)
+const tsLoading = ref(false)
+const tsTimelineList = ref([])
+// 视图缩放：zoomLevel=1显示24h，越大显示的时间范围越短
+const tsZoomLevel = ref(1)
+const TS_ZOOM_MIN = 1       // 最小：一屏24h
+const TS_ZOOM_MAX = 8       // 最大：一屏约3h
+// 视图中心时间点（毫秒），用于鼠标位置为中心的缩放
+const tsViewCenterMs = ref(0)
+
+function disabledDateFuture(time) { return time.getTime() > Date.now() }
+function onTsModeChange() { fetchTimelineData() }
+function tsStatusLabel(s) { return TS_STATUS_MAP[s] || '未知' }
+function tsFormatDuration(sec) {
+  if (!sec && sec !== 0) return '-'
+  sec = Number(sec)
+  const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60
+  let str = ''
+  if (h > 0) str += h + '时'
+  if (m > 0) str += m + '分'
+  if (s > 0 || !str) str += s + '秒'
+  return str
+}
+
+// Canvas refs
+const tsFixedCanvasRef = ref(null)
+const tsGanttCanvasRef = ref(null)
+const tsScrollAreaRef = ref(null)
+let tsResizeObs = null
+
+// Hover
+const tsHover = reactive({ show: false, x: 0, y: 0, rowIdx: -1, segIdx: -1,
+  deviceName: '', status: 0, startTime: '', endTime: '', duration: 0 })
+let tsHitRects = []
+
+// 布局常量
+const TS_ROW_H = 36
+const TS_FIXED_W = 220
+const TS_AXIS_H = 32
+
+async function fetchTimelineData() {
+  tsLoading.value = true
+  tsZoomLevel.value = 1
+  tsViewCenterMs.value = 0
+  try {
+    const url = `/api/energy/timelineStatus?date=${tsSelectedDate.value}&pageSize=${tsPageSize.value}&pageNo=${tsPageNo.value}`
+    const res = await fetch(url)
+    const data = await res.json()
+    if (data.code === 200) {
+      tsTimelineList.value = data.list || []
+      tsTotal.value = data.total || 0
+      await nextTick()
+      drawTsAll()
+    }
+  } catch (err) {
+    console.error('获取时序状态失败:', err)
+  } finally {
+    tsLoading.value = false
+  }
+}
+
+function getDpr() { return window.devicePixelRatio || 1 }
+
+function drawTsAll() { drawTsFixedCol(); drawTsGanttChart(); }
+
+// 左侧固定列绘制
+function drawTsFixedCol() {
+  const canvas = tsFixedCanvasRef.value; if (!canvas) return
+  const list = tsTimelineList.value
+  const h = Math.max(TS_AXIS_H + list.length * TS_ROW_H + 8, 80)
+  canvas.width = TS_FIXED_W * getDpr(); canvas.height = h * getDpr()
+  canvas.style.width = TS_FIXED_W + 'px'; canvas.style.height = h + 'px'
+  const ctx = canvas.getContext('2d'); ctx.scale(getDpr(), getDpr())
+  ctx.fillStyle = '#fafafa'; ctx.fillRect(0, 0, TS_FIXED_W, h)
+
+  // 表头
+  ctx.fillStyle = '#f0f2f5'; ctx.fillRect(0, 0, TS_FIXED_W, TS_AXIS_H)
+  ctx.strokeStyle = '#e4e7ed'; ctx.lineWidth = 1
+  ctx.beginPath(); ctx.moveTo(0, TS_AXIS_H); ctx.lineTo(TS_FIXED_W, TS_AXIS_H); ctx.stroke()
+
+  ctx.font = 'bold 13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#333'
+  const cW = [TS_FIXED_W * 0.42, TS_FIXED_W * 0.22, TS_FIXED_W * 0.36]
+  ctx.fillText('设备名称', cW[0] / 2, TS_AXIS_H / 2)
+  ctx.fillText('稼动率', cW[0] + cW[1] / 2, TS_AXIS_H / 2)
+  ctx.fillText('用电量', cW[0] + cW[1] + cW[2] / 2, TS_AXIS_H / 2)
+
+  // 列分隔线
+  ctx.strokeStyle = '#ebeef5'
+  let cx = cW[0]; ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, h); ctx.stroke()
+  cx += cW[1]; ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, h); ctx.stroke()
+
+  // 数据行
+  ctx.font = '12px sans-serif'
+  list.forEach((item, i) => {
+    const y = TS_AXIS_H + i * TS_ROW_H
+    if (i % 2 === 1) { ctx.fillStyle = '#f9f9f9'; ctx.fillRect(0, y, TS_FIXED_W, TS_ROW_H) }
+    ctx.strokeStyle = '#f0f0f0'; ctx.beginPath(); ctx.moveTo(0, y + TS_ROW_H); ctx.lineTo(TS_FIXED_W, y + TS_ROW_H); ctx.stroke()
+    const cy = y + TS_ROW_H / 2
+    ctx.fillStyle = '#303133'; ctx.textAlign = 'left'
+    ctx.fillText(item.deviceName || item.dtuSn || '-', 10, cy)
+    const ur = item.utilizationRate ?? 0
+    ctx.fillStyle = ur >= 30 ? '#67c23a' : ur > 0 ? '#e6a23c' : '#909399'
+    ctx.textAlign = 'center'
+    ctx.fillText((ur % 1 === 0 ? ur.toFixed(1) : ur.toFixed(2)) + '%', cW[0] + cW[1] / 2, cy)
+    ctx.fillStyle = '#303133'; ctx.textAlign = 'right'
+    ctx.fillText(String(item.totalKwh ?? 0), cW[0] + cW[1] + cW[2] - 8, cy)
+  })
+}
+
+// 甘特图绘制（视图缩放：canvas宽度始终=容器宽度，不产生滚动条）
+function drawTsGanttChart() {
+  const canvas = tsGanttCanvasRef.value; const wrap = tsScrollAreaRef.value
+  if (!canvas || !wrap) return
+  const list = tsTimelineList.value
+  const w = wrap.clientWidth || 800
+  const h = Math.max(TS_AXIS_H + list.length * TS_ROW_H + 8, 80)
+
+  canvas.width = w * getDpr(); canvas.height = h * getDpr()
+  canvas.style.width = w + 'px'; canvas.style.height = h + 'px'
+  const ctx = canvas.getContext('2d'); ctx.scale(getDpr(), getDpr())
+
+  ctx.clearRect(0, 0, w, h)
+  tsHitRects = []
+
+  const dateStr = tsSelectedDate.value || new Date().toISOString().slice(0, 10)
+  const dayStartMs = new Date(dateStr + 'T00:00:00').getTime()
+  const dayEndMs = dayStartMs + 86400000
+
+  // 根据zoomLevel计算可见时间范围（小时）
+  const visibleHours = Math.max(24 / tsZoomLevel.value, 3)
+  const visibleMs = visibleHours * 3600000
+
+  // 视图中心点，默认为当天中午
+  let center = tsViewCenterMs.value || (dayStartMs + 43200000)
+  if (tsZoomLevel.value <= 1) center = dayStartMs + 43200000
+  const halfVis = visibleMs / 2
+  if (center - halfVis < dayStartMs) center = dayStartMs + halfVis
+  if (center + halfVis > dayEndMs) center = dayEndMs - halfVis
+
+  const viewStartMs = center - halfVis
+  const viewEndMs = center + halfVis
+  const viewRangeMs = viewEndMs - viewStartMs
+
+  // 表头背景
+  ctx.fillStyle = '#f0f2f5'; ctx.fillRect(0, 0, w, TS_AXIS_H)
+  ctx.strokeStyle = '#e4e7ed'; ctx.lineWidth = 1
+  ctx.beginPath(); ctx.moveTo(0, TS_AXIS_H); ctx.lineTo(w, TS_AXIS_H); ctx.stroke()
+
+  // 时间刻度（根据可见范围动态调整间隔）
+  ctx.font = '11px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#666'
+  let stepMinutes = 60
+  if (visibleHours <= 4) stepMinutes = 15
+  else if (visibleHours <= 8) stepMinutes = 30
+  else if (visibleHours <= 16) stepMinutes = 45
+
+  const tickStep = stepMinutes * 60000
+  const firstTick = Math.ceil(viewStartMs / tickStep) * tickStep
+  for (let t = firstTick; t <= viewEndMs; t += tickStep) {
+    const px = ((t - viewStartMs) / viewRangeMs) * w
+    ctx.strokeStyle = '#ebeef5'; ctx.lineWidth = 0.5
+    ctx.beginPath(); ctx.moveTo(px, TS_AXIS_H); ctx.lineTo(px, h); ctx.stroke()
+    const hh = new Date(t).getHours(), mm = new Date(t).getMinutes()
+    ctx.fillText(hh.toString().padStart(2,'0')+':'+mm.toString().padStart(2,'0'), px, TS_AXIS_H/2)
+  }
+
+  // 数据行条带
+  list.forEach((item, rowIdx) => {
+    const y = TS_AXIS_H + rowIdx * TS_ROW_H
+    const barY = y + TS_ROW_H * 0.15; const barH = TS_ROW_H * 0.7
+    if (rowIdx % 2 === 1) { ctx.fillStyle = '#f9f9f9'; ctx.fillRect(0, y, w, TS_ROW_H) }
+    ctx.strokeStyle = '#f0f0f0'; ctx.beginPath(); ctx.moveTo(0, y+TS_ROW_H); ctx.lineTo(w, y+TS_ROW_H); ctx.stroke()
+
+    ;(item.timelineList || []).forEach((seg, segIdx) => {
+      if (!seg.duration || seg.duration <= 0) return
+      const sMs = new Date(seg.startTime).getTime()
+      const eMs = seg.endTime ? new Date(seg.endTime).getTime() : sMs + (seg.duration||0)*1000
+      const x = ((sMs - viewStartMs) / viewRangeMs) * w
+      const sw = Math.max(((eMs - sMs) / viewRangeMs) * w, 2)
+      const drawW = Math.max(Math.min(sw, w - x - 1), 0)
+
+      const isHover = (tsHover.show && rowIdx===tsHover.rowIdx && segIdx===tsHover.segIdx)
+      ctx.fillStyle = isHover ? (TS_STATUS_COLORS[seg.runStatus]||'#ccc'):(TS_STATUS_COLORS[seg.runStatus]||'#ccc')
+      ctx.globalAlpha = isHover?1:0.85
+      if(drawW > 0) roundRect(ctx,x,barY,drawW,barH,0);ctx.fill()
+      ctx.globalAlpha=1
+
+      if(x+sw>=-50 && x<w+50){
+        tsHitRects.push({rowIdx,segIdx,x,y:barY,w:drawW,h:barH,
+          ...item,runStatus:seg.runStatus,startTime:seg.startTime,endTime:seg.endTime||'',duration:seg.duration})
+      }
+    })
+  })
+
+  // 当前时间线
+  const now=Date.now(),nowPx=((now-viewStartMs)/viewRangeMs)*w
+  if(nowPx>=0 && nowPx<=w){ctx.strokeStyle='#e74c3c';ctx.lineWidth=1.5;ctx.setLineDash([4,3])
+    ctx.beginPath();ctx.moveTo(nowPx,TS_AXIS_H);ctx.lineTo(nowPx,h);ctx.stroke();ctx.setLineDash([])}
+}
+
+// 鼠标滚轮缩放：以鼠标位置为中心放大/缩小可见时间范围（无滚动条）
+let tsZoomLock=false
+function onTsGanttWheel(e){
+  e.preventDefault();if(tsZoomLock)return
+  tsZoomLock=true;setTimeout(()=>{tsZoomLock=false},60)
+
+  const delta=e.deltaY>0?-0.25:0.25
+  let newL=Math.max(TS_ZOOM_MIN,Math.min(TS_ZOOM_MAX,tsZoomLevel.value+delta))
+  if(newL===tsZoomLevel.value)return
+
+  const wrap=tsScrollAreaRef.value,cnv=tsGanttCanvasRef.value
+  if(!wrap||!cnv)return
+  const rect=cnv.getBoundingClientRect(),mx=e.clientX-rect.left
+
+  const dateStr=tsSelectedDate.value||new Date().toISOString().slice(0,10)
+  const dayStartMs=new Date(dateStr+'T00:00:00').getTime()
+
+  const oldVH=Math.max(24/tsZoomLevel.value,3),oldVM=oldVH*3600000
+  let center=tsViewCenterMs.value||(dayStartMs+43200000)
+  let oldVS=center-oldVM/2;if(oldVS<dayStartMs)oldVS=dayStartMs
+  const mouseTimeAt=oldVS+(mx/rect.width)*oldVM
+
+  tsZoomLevel.value=newL
+  const newVH=Math.max(24/newL,3),newVM=newVH*3600000
+  const newVS=mouseTimeAt-(mx/rect.width)*newVM
+  tsViewCenterMs.value=newVS+newVM/2
+
+  drawTsAll()
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+  if (w < 1 || h < 1) return
+  if (r > w / 2) r = w / 2
+  if (r > h / 2) r = h / 2
+  if (r <= 0) { ctx.fillRect(x, y, w, h); return }
+  ctx.beginPath(); ctx.moveTo(x+r, y); ctx.arcTo(x+w, y, x+w, y+h, r)
+  ctx.arcTo(x+w, y+h, x, y+h, r); ctx.arcTo(x, y+h, x, y, r); ctx.arcTo(x, y, x+w, y, r); ctx.closePath()
+}
+
+// Hover事件
+function onTsGanttMouseMove(e) {
+  const canvas = tsGanttCanvasRef.value; const wrap = tsScrollAreaRef.value
+  if (!canvas || !wrap) return
+  const rect = canvas.getBoundingClientRect()
+  const mx = e.clientX - rect.left, my = e.clientY - rect.top
+  let hit = null
+  for (let i = tsHitRects.length - 1; i >= 0; i--) {
+    const r = tsHitRects[i]
+    if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) { hit = r; break }
+  }
+  if (hit) {
+    tsHover.rowIdx = hit.rowIdx; tsHover.segIdx = hit.segIdx
+    tsHover.deviceName = hit.deviceName || hit.dtuSn || ''
+    tsHover.status = hit.runStatus ?? 0
+    tsHover.startTime = hit.startTime ? hit.startTime.slice(11, 19) : ''
+    tsHover.endTime = hit.endTime ? hit.endTime.slice(11, 19) : ''
+    tsHover.duration = hit.duration || 0
+    if (!tsHover.show) {
+      tsHover.show = true
+      let tx = mx + 12, ty = my - 100
+      if (tx + 180 > wrap.clientWidth - 20) tx = mx - 190
+      if (ty < 10) ty = my + 16
+      tsHover.x = tx; tsHover.y = ty
+    }
+  } else {
+    tsHover.show = false
+  }
+  drawTsGanttChart()
+}
+function onTsGanttMouseLeave() { tsHover.show = false; drawTsGanttChart() }
+function onTsScroll() { drawTsFixedCol() }
+
+// 监听tab切换自动加载
+watch(currentStatus, async (val) => {
+  if (val === 'timeseries') {
+    await nextTick()
+    initTsObserver()
+    fetchTimelineData()
+  } else {
+    destroyTsObserver()
+  }
+})
+
+function initTsObserver() {
+  destroyTsObserver()
+  tsResizeObs = new ResizeObserver(() => { if (currentStatus.value === 'timeseries') drawTsAll() })
+  const el = document.querySelector('.ts-gantt-wrap')
+  if (el) tsResizeObs.observe(el)
+}
+function destroyTsObserver() { if (tsResizeObs) { tsResizeObs.disconnect(); tsResizeObs = null } }
+onBeforeUnmount(() => destroyTsObserver())
 
 
 // ========== 稼动率数据 ==========
 // ========== 稼动率数据 ==========
 const utilQueryMode = ref('day')
 const utilQueryMode = ref('day')
@@ -664,7 +928,7 @@ const effLine2Points = computed(() => {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: flex-end;
   justify-content: flex-end;
-  padding: 14px 20px;
+  padding: 8px 20px;
   border-top: 1px solid #e8e8e8;
   border-top: 1px solid #e8e8e8;
 }
 }
 .pagination-info { font-size: 13px; color: #666; }
 .pagination-info { font-size: 13px; color: #666; }
@@ -727,7 +991,7 @@ const effLine2Points = computed(() => {
   flex: 1;
   flex: 1;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
-  overflow: hidden;
+  min-height: 0;
 }
 }
 
 
 /* ========== 时序状态 ========== */
 /* ========== 时序状态 ========== */
@@ -736,7 +1000,7 @@ const effLine2Points = computed(() => {
 }
 }
 .ts-toolbar {
 .ts-toolbar {
   background: #fff;
   background: #fff;
-  padding: 10px 20px;
+  padding: 8px 20px;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 10px;
   gap: 10px;
@@ -825,6 +1089,51 @@ const effLine2Points = computed(() => {
 .seg-r { background: #f56c6c; }
 .seg-r { background: #f56c6c; }
 .seg-gy { background: #909399; }
 .seg-gy { background: #909399; }
 
 
+/* ========== 时序状态：Canvas甘特图 ========== */
+.ts-gantt-wrap {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: auto;
+  background: #fff;
+  margin: 8px 20px 0;
+  border: 1px solid #e8e8e8;
+  position: relative;
+}
+.ts-fixed-col {
+  width: 220px;
+  flex-shrink: 0;
+}
+.ts-fixed-col canvas { display: block; }
+.ts-scroll-area {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+.ts-scroll-area canvas { display: block; }
+
+/* Tooltip - 相对于 ts-scroll-area 定位 */
+.gantt-tooltip {
+  position: absolute;
+  background: rgba(30,40,55,0.95);
+  border-radius: 6px;
+  padding: 8px 14px;
+  min-width: 180px;
+  z-index: 200;
+  pointer-events: none;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+}
+.gtt-title {
+  font-size: 12px; font-weight:bold; color:#eef1f7; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.1);
+}
+.gtt-row {
+  display:flex; align-items:center; justify-content:space-between; gap:12px; line-height:2; font-size:12px;
+}
+.gtt-label { color:#aab2c0; flex-shrink:0; }
+.gtt-val { color:#eef1f7; font-weight:500; display:flex; align-items:center; gap:4px; }
+.gtt-highlight { font-weight:bold; }
+
 /* ========== 稼动率 ========== */
 /* ========== 稼动率 ========== */
 .util-view {
 .util-view {
   background: #f5f7fa;
   background: #f5f7fa;