优化仪表界面

This commit is contained in:
zzh 2026-05-14 13:15:22 +08:00
parent 819ac1cdaa
commit 6c6fd1cc9f

View File

@ -1285,7 +1285,7 @@ const Dashboard = (() => {
if(!canvas) return;
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const size = 280; // 足够容纳引出线
const size = 360; // 足够容纳四周引出线文字
canvas.width = size * dpr;
canvas.height = size * dpr;
canvas.style.width = size + 'px';
@ -1601,10 +1601,10 @@ const Dashboard = (() => {
if(!segs || segs.length === 0 || !tot) return;
const rect = shipmentDonutCanvas.getBoundingClientRect();
const scaleX = shipmentDonutCanvas.offsetWidth > 0 ? (280 / shipmentDonutCanvas.offsetWidth) : 1;
const scaleY = shipmentDonutCanvas.offsetHeight > 0 ? (280 / shipmentDonutCanvas.offsetHeight) : 1;
const rx = (e.clientX - rect.left) * scaleX - 140;
const ry = (e.clientY - rect.top) * scaleY - 140;
const scaleX = shipmentDonutCanvas.offsetWidth > 0 ? (360 / shipmentDonutCanvas.offsetWidth) : 1;
const scaleY = shipmentDonutCanvas.offsetHeight > 0 ? (360 / shipmentDonutCanvas.offsetHeight) : 1;
const rx = (e.clientX - rect.left) * scaleX - 180;
const ry = (e.clientY - rect.top) * scaleY - 180;
const dist = Math.sqrt(rx * rx + ry * ry);
if(dist < 56 || dist > 100) {
@ -2244,10 +2244,10 @@ const Dashboard = (() => {
<div class="card" style="flex:1;padding:20px;border-radius:16px;display:flex;flex-direction:column;background:var(--surface);min-height:340px">
<div style="font-weight:600;font-size:14px;margin-bottom:12px">产量占比</div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center">
<div style="display:flex;align-items:center;justify-content:center;position:relative;height:280px;width:280px;flex-shrink:0">
<canvas id="shipment-donut-chart" style="width:280px;height:280px"></canvas>
<div style="display:flex;align-items:center;justify-content:center;position:relative;height:360px;width:360px;flex-shrink:0">
<canvas id="shipment-donut-chart" style="width:360px;height:360px"></canvas>
</div>
<div id="shipment-donut-legend" style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px;width:100%"></div>
<div id="shipment-donut-legend" style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:-40px;width:100%"></div>
</div>
</div>
</div>