feat 实时数据仪表盘

src/components/work/deviceControl.vue

@@ -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>