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 15:41:17 +08:00
parent f57ed1b712
commit 056a3cbfa9
2 changed files with 73 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,9 +121,12 @@ const overviewData = [
</view>
<!-- 今日作业概览 -->
<text class="section-title">
今日作业概览
</text>
<view class="section-title">
<text>
今日作业概览
</text>
</view>
<view class="overview-section">
<view v-for="item in overviewData" :key="item.label" class="overview-item">
<text class="overview-label">
@@ -145,7 +148,7 @@ const overviewData = [
}
.card-title {
font-size: 18px;
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 16px;
@@ -162,11 +165,14 @@ const overviewData = [
flex: 1;
display: flex;
flex-direction: column;
margin-top: 30px;
gap: 30px;
}
/* 左侧仪表项 */
.gauge-item {
margin-bottom: 16px;
gap:100px
}
.gauge-header {
@@ -181,7 +187,7 @@ const overviewData = [
}
.gauge-label {
font-size: 14px;
font-size: 16px;
color: #666;
}
@@ -193,6 +199,7 @@ const overviewData = [
/* ===== 压实度圆环 ===== */
.ring-wrap {
margin-top: 20px;
position: relative;
width: 100px;
height: 100px;
@@ -204,7 +211,7 @@ const overviewData = [
}
.freq-label {
font-size: 14px;
font-size: 18px;
color: #666;
display: block;
margin-bottom: 4px;
@@ -236,10 +243,10 @@ const overviewData = [
/* ===== 今日作业概览 ===== */
.section-title {
font-size: 18px;
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 16px;
margin: 25px 0px;
}
.overview-section {
@@ -255,7 +262,7 @@ const overviewData = [
}
.overview-label {
font-size: 13px;
font-size: 18px;
color: #999;
}

103
src/components/work/deviceControl.vue
View File

@@ -31,19 +31,13 @@ const workStatus = '作业进行中'
</view>
</view>
<view class="status-tags">
<view class="tag">
<view class="dot dot--green" />
<text>{{ deviceInfo.status }}</text>
</view>
<view class="tag">
<view class="dot dot--green" />
<text>{{ deviceInfo.connected }}</text>
</view>
</view>
<view class="info-grid">
<view class="info-item">
<view class="status-columns">
<!-- 左列：作业状态 -->
<view class="status-col">
<view class="tag">
<view class="dot dot--green" />
<text>{{ deviceInfo.status }}</text>
</view>
<text class="info-label">
压实作业
</text>
@@ -51,7 +45,13 @@ const workStatus = '作业进行中'
{{ deviceInfo.workStatus }}
</text>
</view>
<view class="info-item">
<!-- 右列：连接状态 -->
<view class="status-col">
<view class="tag">
<view class="dot dot--green" />
<text>{{ deviceInfo.connected }}</text>
</view>
<text class="info-label">
设备连接
</text>
@@ -78,16 +78,25 @@ const workStatus = '作业进行中'
</view>
</view>
<view class="status-tags">
<view class="tag">
<view class="dot dot--green" />
<text>当前：{{ workStatus }}</text>
<view class="control-rows">
<!-- 第一行：空（对齐左侧 tag 行） -->
<view class="control-row" />
<!-- 第二行：当前状态（对齐左侧 label 行） -->
<view class="control-row">
<view class="tag">
<view class="dot dot--green" />
<text>当前：{{ workStatus }}</text>
</view>
</view>
<!-- 第三行：暂停按钮（对齐左侧 value 行） -->
<view class="control-row">
<wd-button type="warning" class="pause-btn" round>
暂停作业
</wd-button>
</view>
</view>
<wd-button type="warning" block class="pause-btn">
暂停作业
</wd-button>
</view>
</view>
</view>
@@ -114,7 +123,7 @@ const workStatus = '作业进行中'
.section-header {
display: flex;
align-items: center;
gap: 10px;
gap: 10rpx;
margin-bottom: 12px;
}
@@ -137,29 +146,36 @@ const workStatus = '作业进行中'
}
.title {
font-size: 16px;
font-size: 20px;
font-weight: 600;
color: #333;
}
.subtitle {
font-size: 12px;
font-size: 14px;
color: #999;
margin-top: 2px;
}
.status-tags {
.status-columns {
display: flex;
gap: 16px;
margin-bottom: 12px;
gap: 24px;
}
.status-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.tag {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
.dot {
@@ -172,21 +188,9 @@ const workStatus = '作业进行中'
background: #22c55e;
}
.info-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.info-label {
font-size: 13px;
color: #999;
font-size: 14px;
color: #333333;
}
.info-value {
@@ -204,11 +208,18 @@ const workStatus = '作业进行中'
align-self: stretch;
}
.control-section .status-tags {
margin-bottom: 20px;
.control-rows {
display: flex;
flex-direction: column;
gap: 34rpx;
}
.control-row {
display: flex;
align-items: center;
}
.pause-btn {
width: 100%;
width: 80%;
}
</style>