Commit ac8383570e0f580293032c321ae8ce804f6c28cd

Authored by 杨鸣坤
1 parent b91b1174

fix(energy): 优化能耗数据显示与图表自适应刻度

@@ -695,8 +695,11 @@ function drawBarChart() { @@ -695,8 +695,11 @@ function drawBarChart() {
695 const chartW = w - padLeft - padRight 695 const chartW = w - padLeft - padRight
696 const chartH = h - padTop - padBottom 696 const chartH = h - padTop - padBottom
697 697
698 - const maxVal = Math.max(...kwhList.map(d => d.value || 0), 70)  
699 - const niceMax = Math.ceil(maxVal / 10) * 10 698 + const rawMax = Math.max(...kwhList.map(d => d.value || 0))
  699 + const maxVal = rawMax > 0 ? rawMax : 1
  700 + // 按数据量级自适应刻度间隔:>=10 用 10,>=1 用 1,否则用 0.1
  701 + const step = maxVal >= 10 ? 10 : maxVal >= 1 ? 1 : 0.1
  702 + const niceMax = Math.ceil(maxVal / step) * step
700 703
701 // 网格线 + Y轴标签 704 // 网格线 + Y轴标签
702 ctx.strokeStyle = '#eee' 705 ctx.strokeStyle = '#eee'
@@ -704,13 +707,13 @@ function drawBarChart() { @@ -704,13 +707,13 @@ function drawBarChart() {
704 ctx.fillStyle = '#999' 707 ctx.fillStyle = '#999'
705 ctx.font = '11px sans-serif' 708 ctx.font = '11px sans-serif'
706 ctx.textAlign = 'right' 709 ctx.textAlign = 'right'
707 - for (let v = 0; v <= niceMax; v += 10) { 710 + for (let v = 0; v <= niceMax + 1e-9; v += step) {
708 const y = padTop + chartH - (v / niceMax) * chartH 711 const y = padTop + chartH - (v / niceMax) * chartH
709 ctx.beginPath() 712 ctx.beginPath()
710 ctx.moveTo(padLeft, y) 713 ctx.moveTo(padLeft, y)
711 ctx.lineTo(w - padRight, y) 714 ctx.lineTo(w - padRight, y)
712 ctx.stroke() 715 ctx.stroke()
713 - ctx.fillText(String(v), padLeft - 6, y + 4) 716 + ctx.fillText(Number(v).toFixed(step < 1 ? 1 : 0), padLeft - 6, y + 4)
714 } 717 }
715 718
716 // X 轴线 719 // X 轴线
@@ -758,7 +761,7 @@ function drawBarChart() { @@ -758,7 +761,7 @@ function drawBarChart() {
758 ctx.fillStyle = '#2060a8' 761 ctx.fillStyle = '#2060a8'
759 ctx.font = 'bold 13px sans-serif' 762 ctx.font = 'bold 13px sans-serif'
760 ctx.textAlign = 'center' 763 ctx.textAlign = 'center'
761 - ctx.fillText(String(val), x + barW_px / 2, y - 7) 764 + ctx.fillText(Number(val).toFixed(2), x + barW_px / 2, y - 7)
762 765
763 // X 轴标签高亮 766 // X 轴标签高亮
764 ctx.fillStyle = '#2060a8' 767 ctx.fillStyle = '#2060a8'
@@ -776,7 +779,7 @@ function drawBarChart() { @@ -776,7 +779,7 @@ function drawBarChart() {
776 ctx.fillStyle = '#555' 779 ctx.fillStyle = '#555'
777 ctx.font = '9px sans-serif' 780 ctx.font = '9px sans-serif'
778 ctx.textAlign = 'center' 781 ctx.textAlign = 'center'
779 - ctx.fillText(String(val), x + barW_px / 2, y - 4) 782 + ctx.fillText(Number(val).toFixed(2), x + barW_px / 2, y - 4)
780 } 783 }
781 784
782 // X 轴标签 785 // X 轴标签
@@ -553,11 +553,15 @@ function drawComboChart() { @@ -553,11 +553,15 @@ function drawComboChart() {
553 } 553 }
554 }) 554 })
555 555
556 - // 存储碰撞矩形(整个堆叠柱区域) 556 + // 存储碰撞矩形(整列区域:图表顶部到 X 轴,便于在空柱/折线上也能 hover)
557 const fullH = (totalSec / 3600 / niceMaxHours) * chartH 557 const fullH = (totalSec / 3600 / niceMaxHours) * chartH
558 comboBarRects.push({ 558 comboBarRects.push({
559 - x, y: padTop + chartH - fullH, w: barW, h: fullH,  
560 - totalSec, kwh: item.value || 0 559 + x: x - gap / 2,
  560 + y: padTop,
  561 + w: barW + gap,
  562 + h: chartH,
  563 + totalSec, kwh: item.value || 0,
  564 + fullStackH: fullH
561 }) 565 })
562 566
563 // --- X轴标签 --- 567 // --- X轴标签 ---
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 </div> 53 </div>
54 54
55 <div class="info-list"> 55 <div class="info-list">
56 - <div class="info-item">用电量:<span>{{ device.evalue }} kw·h</span></div> 56 + <div class="info-item">用电量:<span>{{ Number(device.evalue).toFixed(2) }} kw·h</span></div>
57 <div class="info-item">{{ getRunStatusLabel(device.runStatus) }}:<span>{{ device.duration }}</span></div> 57 <div class="info-item">{{ getRunStatusLabel(device.runStatus) }}:<span>{{ device.duration }}</span></div>
58 </div> 58 </div>
59 </div> 59 </div>
@@ -249,7 +249,7 @@ @@ -249,7 +249,7 @@
249 <div v-for="(item, idx) in effHover.devices" :key="idx" class="eft-row"> 249 <div v-for="(item, idx) in effHover.devices" :key="idx" class="eft-row">
250 <i class="dot" :style="{ background: item.color }"></i> 250 <i class="dot" :style="{ background: item.color }"></i>
251 <span class="eft-name">{{ item.name }}</span> 251 <span class="eft-name">{{ item.name }}</span>
252 - <span class="eft-val">{{ item.value }} kw·h</span> 252 + <span class="eft-val">{{ Number(item.value).toFixed(2) }} kw·h</span>
253 </div> 253 </div>
254 </div> 254 </div>
255 </div> 255 </div>