refactor(deviceData): 统一替换表格单元格为view组件并优化样式

1.  将多个页面的deviceData组件里的text单元格替换为view，适配小程序布局
2.  优化status-icon样式，移除绝对定位改为流式布局并添加间距
3.  新增error-icon样式用于异常状态展示
4.  调整单元格容器的对齐方式，让内容居中对齐
5.  移除多余的斑马纹类和旧的定位样式

pages/bzy/components/deviceData.vue

@@ -107,20 +107,19 @@
                 v-for="(item, index) in historyData"
                 :key="index"
                 class="scrollable-row"
-                :class="{ even: index % 2 === 0 }"
               >
-                <text class="body-cell">
+                <view class="body-cell">
                   <view class="status-icon" :class="item.ds == 1 ? 'success-icon' : 'status-icon'"></view>
-                  {{ item.ds == 1 ? '打开' : '关闭' }}</text>
-                <text class="body-cell">{{ item.at }}</text>
-                <text class="body-cell">{{ item.ah }}</text>
-                <text class="body-cell">
+                  {{ item.ds == 1 ? '打开' : '关闭' }}</view>
+                <view class="body-cell">{{ item.at }}</view>
+                <view class="body-cell">{{ item.ah }}</view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.batStatus == 0 ? 'success-icon' : 'status-icon'"></view>
-                  {{ item.batStatus == 0 ? '正常' : '欠压' }}</text>
-                <text class="body-cell">
+                  {{ item.batStatus == 0 ? '正常' : '欠压' }}</view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.work_sta == 0 ? 'warning-icon' : item.work_sta == 1 ? 'success-icon':'status-icon'"></view>
-                  {{ item.work_sta == 0 ? '待机' : item.work_sta == 1 ? '收集' : item.work_sta == 2 ? '培养' : '拍照' }}</text>
-                <text class="body-cell">{{ item.dver }}</text>
+                  {{ item.work_sta == 0 ? '待机' : item.work_sta == 1 ? '收集' : item.work_sta == 2 ? '培养' : '拍照' }}</view>
+                <view class="body-cell">{{ item.dver }}</view>
               </view>
             </view>
           </view>
@@ -755,14 +754,11 @@ export default {
   }
 }
 .status-icon{
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 20rpx;
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
   background: #B6BECA;
+  margin-right: 8rpx;
 }
 .success-icon{
   background: #0BBC58;
@@ -770,6 +766,9 @@ export default {
 .warning-icon{
   background: #F8B610;
 }
+.error-icon{
+  background: #FF6B6B;
+}
 .general-images{
   display: flex;
   align-items: center;
@@ -1171,7 +1170,9 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
-              position: relative;
+              display:flex;
+              align-items: center;
+              justify-content: center;
             }
           }
         }

pages/cbd/components/deviceData.vue

@@ -135,32 +135,31 @@
                 v-for="(item, index) in historyData"
                 :key="index"
                 class="scrollable-row"
-                :class="{ even: index % 2 === 0 }"
               >
-                <text class="body-cell">{{ item.at }}</text>
-                <text class="body-cell">{{ item.ah }}</text>
-                <text class="body-cell">{{ item.hrt }}</text>
-                <text class="body-cell">
+                <view class="body-cell">{{ item.at }}</view>
+                <view class="body-cell">{{ item.ah }}</view>
+                <view class="body-cell">{{ item.hrt }}</view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.rps == 0 ? 'success-icon' : 'status-icon'"></view>
                   {{ getRpsDict(item) }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.tps == 0 ? 'success-icon' : 'status-icon'"></view>
                   {{ getTpsDict(item) }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.lps == 0 ? 'success-icon' : 'status-icon'"></view>
                   {{ getLpsDict(item) }}
-                </text>
-                <text class="body-cell">
-                  <view class="status-icon" :class="item.ws == 0 ? 'warning-icon' : item.lamp == 0 ? 'success-icon':'status-icon'"></view>
+                </view>
+                <view class="body-cell">
+                  <view class="status-icon" :class="item.ws == 0 ? 'warning-icon' : item.lamp == 0 ? 'success-icon':item.lamp == 1 ? 'error-icon':'status-icon'"></view>
                   {{ getStateDict(item) }}
-                </text>
-                <text class="body-cell">{{ item.csq }}</text>
-                <text class="body-cell">{{ item.current }}</text>
-                <text class="body-cell">{{ item.vbat }}</text>
-                <text class="body-cell">{{ item.lng }}</text>
-                <text class="body-cell">{{ item.lat }}</text>
+                </view>
+                <view class="body-cell">{{ item.csq }}</view>
+                <view class="body-cell">{{ item.current }}</view>
+                <view class="body-cell">{{ item.vbat }}</view>
+                <view class="body-cell">{{ item.lng }}</view>
+                <view class="body-cell">{{ item.lat }}</view>
               </view>
             </view>
           </view>
@@ -801,14 +800,11 @@ export default {
   }
 }
 .status-icon{
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 20rpx;
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
   background: #B6BECA;
+  margin-right: 8rpx;
 }
 .success-icon{
   background: #0BBC58;
@@ -816,6 +812,9 @@ export default {
 .warning-icon{
   background: #F8B610;
 }
+.error-icon{
+  background: #FF6B6B;
+}
 .general-images{
   display: flex;
   align-items: center;
@@ -1221,7 +1220,9 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
-              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
             }
           }
         }

pages/scd/components/deviceData.vue

@@ -120,46 +120,46 @@
                 :key="index"
                 class="scrollable-row"
               >
-                <text class="body-cell">
+                <view class="body-cell">
                   <view class="status-icon" :class="item.ds == '开机' ? 'success-icon' : 'status-icon'"></view>
                   {{ item.ds }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.ws == '工作' ? 'success-icon' : 'warning-icon'"></view>
                   {{ item.ws }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.rps == '正常' ? 'success-icon' : 'warning-icon'"></view>
                   {{ item.rps }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.tps == '正常' ? 'success-icon' : 'warning-icon'"></view>
                   {{ item.tps }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.tps == '正常' ? 'success-icon' : 'warning-icon'"></view>
                   {{ item.dps }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.voltval == '开灯' ? 'success-icon' : 'warning-icon'"></view>
                   {{ item.voltval }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.vps == 0 ? 'success-icon' : 'status-icon'"></view>
                   {{ item.vps == '0' ? '正常' : '欠压' }}
-                </text>
-                <text class="body-cell">
+                </view>
+                <view class="body-cell">
                   <view class="status-icon" :class="item.tt == '常亮' ? 'success-icon' : 'warning-icon'"></view>
                   {{ item.tt }}
-                </text>
-                <text class="body-cell">{{ item.infr_ct }}</text>
-                <text class="body-cell">{{ getCtFormat(item.ct) }}</text>
-                <text class="body-cell">{{ item.at }}</text>
-                <text class="body-cell">{{ item.ah }}</text>
-                <text class="body-cell">{{ item.cv }}</text>
-                <text class="body-cell">{{ item.bv }}</text>
-                <text class="body-cell">{{ item.csq }}</text>
-                <text class="body-cell">{{ formatTime(item.addtime) }}</text>
+                </view>
+                <view class="body-cell">{{ item.infr_ct }}</view>
+                <view class="body-cell">{{ getCtFormat(item.ct) }}</view>
+                <view class="body-cell">{{ item.at }}</view>
+                <view class="body-cell">{{ item.ah }}</view>
+                <view class="body-cell">{{ item.cv }}</view>
+                <view class="body-cell">{{ item.bv }}</view>
+                <view class="body-cell">{{ item.csq }}</view>
+                <view class="body-cell">{{ formatTime(item.addtime) }}</view>
               </view>
             </view>
           </view>