feat 实时数据仪表盘

src/components/work/dashboard.vue

@@ -121,9 +121,12 @@ const overviewData = [
     </view>
 
     <!-- 今日作业概览 -->
-    <text class="section-title">
+    <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;
 }
 

src/components/work/deviceControl.vue

@@ -31,19 +31,13 @@ const workStatus = '作业进行中'
           </view>
         </view>
 
-        <view class="status-tags">
+        <view class="status-columns">
+          <!-- 左列：作业状态 -->
+          <view class="status-col">
             <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">
             <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,19 +78,28 @@ const workStatus = '作业进行中'
           </view>
         </view>
 
-        <view class="status-tags">
+        <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>
 
-        <wd-button type="warning" block class="pause-btn">
+          <!-- 第三行：暂停按钮（对齐左侧 value 行） -->
+          <view class="control-row">
+            <wd-button type="warning" class="pause-btn" round>
               暂停作业
             </wd-button>
           </view>
         </view>
       </view>
+    </view>
+  </view>
 </template>
 
 <style scoped>
@@ -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;
+  gap: 24px;
-  margin-bottom: 12px;
+}
+
+.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;
+  font-size: 14px;
-  color: #999;
+  color: #333333;
 }
 
 .info-value {
@@ -204,11 +208,18 @@ const workStatus = '作业进行中'
   align-self: stretch;
 }
 
-.control-section .status-tags {
+.control-rows {
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 34rpx;
+}
+
+.control-row {
+  display: flex;
+  align-items: center;
 }
 
 .pause-btn {
-  width: 100%;
+  width: 80%;
 }
 </style>