zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 仪表盘

Browse Source
This commit is contained in:
Ironsp
2026-09-05 11:54:05 +08:00
parent a6f3f2d144
commit 8f83e48443
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/work/dashboard.vue
View File

@@ -8,8 +8,8 @@ const compactionValue = 25
const speedValue = 4.2
const speedMax = 12
// 指针旋转角度：0km/h → 180°（左），12km/h → 0°（右）
const needleRotation = computed(() => 180 * (1 - speedValue / speedMax))
// 指针旋转角度：0km/h → 225°（左下），12km/h → -45°（右下），中间90°（正上）
const needleRotation = computed(() => 225 - (speedValue / speedMax) * 270)
// 今日作业概览数据 (假数据)
const overviewData = [
@@ -84,26 +84,26 @@ const overviewData = [
</text>
</view>
<!-- 车速仪表 SVG 半圆弧 -->
<!-- 车速仪表 SVG 3/4圆弧 (270°) -->
<view class="speed-gauge">
<svg viewBox="0 0 120 70" class="speed-svg">
<!-- 左半弧：蓝色 (0~6) -->
<svg viewBox="0 0 120 110" class="speed-svg">
<!-- 左半弧：蓝色 (0~6) 从225°到90° -->
<path
d="M 10 60 A 50 50 0 0 1 60 10"
d="M 24.64 95.36 A 50 50 0 0 1 60 10"
fill="none"
stroke="#3b82f6"
stroke-width="10"
stroke-linecap="round"
/>
<!-- 右半弧：橙色 (6~12) -->
<!-- 右半弧：橙色 (6~12) 从90°到-45° -->
<path
d="M 60 10 A 50 50 0 0 1 110 60"
d="M 60 10 A 50 50 0 0 1 95.36 95.36"
fill="none"
stroke="#f97316"
stroke-width="10"
stroke-linecap="round"
/>
<!-- 指针：y 轴取反（SVG y 向下） -->
<!-- 指针 -->
<line
x1="60"
y1="60"
@@ -219,10 +219,10 @@ const overviewData = [
color: #333;
}
/* ===== 车速 SVG 半圆仪表 ===== */
/* ===== 车速 SVG 3/4圆仪表 ===== */
.speed-gauge {
width: 100px;
height: 60px;
width: 110px;
height: 100px;
}
.speed-svg {