refactor: 优化多个页面的滑块与设备数据展示样式及逻辑

1.  为所有滑块组件添加首尾数值标签，统一滑块容器样式
2.  为设备数据列表项添加状态指示灯，优化视觉展示
3.  修复scd详情页tab显示条件，新增camera_id校验
4.  补全scd设备控制页表单默认值与双向绑定逻辑

pages/bzy/components/deviceData.vue

@@ -109,11 +109,17 @@
                 class="scrollable-row"
                 :class="{ even: index % 2 === 0 }"
               >
-                <text class="body-cell">{{ item.ds == 1? '打开' : '关闭' }}</text>
+                <text 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.batStatus == 0? '正常' : '欠压' }}</text>
-                <text class="body-cell">{{ item.work_sta == 0? '待机' : item.work_sta == 1? '收集' : item.work_sta == 2? '培养' : '拍照' }}</text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.batStatus == 0 ? 'success-icon' : 'status-icon'"></view>
+                  {{ item.batStatus == 0 ? '正常' : '欠压' }}</text>
+                <text 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>
               </view>
             </view>
@@ -748,6 +754,22 @@ export default {
     border-radius: 50%;
   }
 }
+.status-icon{
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20rpx;
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #B6BECA;
+}
+.success-icon{
+  background: #0BBC58;
+}
+.warning-icon{
+  background: #F8B610;
+}
 .general-images{
   display: flex;
   align-items: center;
@@ -1089,10 +1111,6 @@ export default {
             display: flex;
             align-items: center;
 
-            &.even {
-              background: #FAFAFA;
-            }
-
             .body-cell.fixed {
               font-size: 24rpx;
               font-family: 'Source Han Sans CN VF', sans-serif;
@@ -1145,10 +1163,6 @@ export default {
             height: 80rpx;
             align-items: center;
 
-            &.even {
-              background: #FAFAFA;
-            }
-
             .body-cell {
               min-width: 140rpx;
               font-size: 24rpx;
@@ -1157,6 +1171,7 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
+              position: relative;
             }
           }
         }

pages/bzy/deviceControl.vue

@@ -64,17 +64,29 @@
           <text class="device-detail-label">高温保护阀值(℃)
           {{ equipContrlForm.tph }}</text>
         </view>
-        <u-slider v-model="equipContrlForm.tph" style="width:100%" :min="50" :max="70" active-color="#0bbc58"></u-slider>
+        <view class="slider-container">
+          <view class="slider-min-value">50</view>
+          <u-slider v-model="equipContrlForm.tph" class="slider" :min="50" :max="70" active-color="#0bbc58"></u-slider>
+          <view class="slider-max-value">70</view>
+        </view>
         <view class="device-detail-viewImage">
           <text class="device-detail-label">低温保护阀值(℃)
           {{ equipContrlForm.tpl }}</text>
         </view>
-        <u-slider v-model="equipContrlForm.tpl" style="width:100%" :min="-30" :max="20" active-color="#0bbc58"></u-slider>
+        <view class="slider-container">
+          <view class="slider-min-value">-30</view>
+          <u-slider v-model="equipContrlForm.tpl" class="slider" :min="-30" :max="20" active-color="#0bbc58"></u-slider>
+          <view class="slider-max-value">20</view>
+        </view>
         <view class="device-detail-viewImage">
           <text class="device-detail-label">数据上传间隔(min)
           {{ equipContrlForm.datt }}</text>
         </view>
-        <u-slider v-model="equipContrlForm.datt" style="width:100%;" :max="60" :min="10" active-color="#0bbc58"></u-slider>
+        <view class="slider-container">
+          <view class="slider-min-value">10</view>
+          <u-slider v-model="equipContrlForm.datt" class="slider" :max="60" :min="10" active-color="#0bbc58"></u-slider>
+          <view class="slider-max-value">60</view>
+        </view>
       </view>
     </view>
     <view class="device-detail-btn-footer" v-if="activeTab === 'viewImage'">
@@ -437,6 +449,23 @@ export default {
       }
     }
   }
+  .slider-container{
+    position: relative;
+    margin-bottom: 20rpx;
+    .slider-min-value{
+      position: absolute;
+      left: 0;
+      top: -50rpx;
+    }
+    .slider{
+      width: 600rpx;
+    }
+    .slider-max-value{
+      position: absolute;
+      right: 0;
+      top: -50rpx;
+    }
+  }
   .device-detail-content{
     display: flex;
     padding: 24rpx 32rpx;

pages/cbd/components/deviceData.vue

@@ -140,10 +140,22 @@
                 <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">{{ getRpsDict(item) }}</text>
-                <text class="body-cell">{{ getTpsDict(item) }}</text>
-                <text class="body-cell">{{ getLpsDict(item) }}</text>
-                <text class="body-cell">{{ getStateDict(item) }}</text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.rps == 0 ? 'success-icon' : 'status-icon'"></view>
+                  {{ getRpsDict(item) }}
+                </text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.tps == 0 ? 'success-icon' : 'status-icon'"></view>
+                  {{ getTpsDict(item) }}
+                </text>
+                <text 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>
+                  {{ getStateDict(item) }}
+                </text>
                 <text class="body-cell">{{ item.csq }}</text>
                 <text class="body-cell">{{ item.current }}</text>
                 <text class="body-cell">{{ item.vbat }}</text>
@@ -788,6 +800,22 @@ export default {
     border-radius: 50%;
   }
 }
+.status-icon{
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20rpx;
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #B6BECA;
+}
+.success-icon{
+  background: #0BBC58;
+}
+.warning-icon{
+  background: #F8B610;
+}
 .general-images{
   display: flex;
   align-items: center;
@@ -1193,6 +1221,7 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
+              position: relative;
             }
           }
         }

pages/cbd/deviceControl.vue

@@ -66,29 +66,53 @@
           </u-radio>
         </u-radio-group>
         <view class="device-detail-viewImage">
-          <text class="device-detail-label">落虫时间(min)</text>
+          <text class="device-detail-label">落虫时间(min){{ equipContrlForm.collt }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">0</view>
+          <u-slider v-model="equipContrlForm.collt" class="slider" max="100" min="0" active-color="#0BBC58"></u-slider>
+          <view class="slider-max-value">100</view>
         </view>
-        <u-slider v-model="equipContrlForm.collt" style="width:100%" max="20" active-color="#0BBC58"></u-slider>
         <view class="device-detail-viewImage">
-          <text class="device-detail-label">加热时间(min)</text>
+          <text class="device-detail-label">加热时间(min){{ equipContrlForm.htim }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">0</view>
+          <u-slider v-model="equipContrlForm.htim" class="slider" max="100" min="0" active-color="#0BBC58"></u-slider>
+          <view class="slider-max-value">100</view>
         </view>
-        <u-slider v-model="equipContrlForm.htim" style="width:100%" max="100" active-color="#0BBC58"></u-slider>
         <view class="device-detail-viewImage">
-          <text class="device-detail-label">加热温度(℃)</text>
+          <text class="device-detail-label">加热温度(℃){{ equipContrlForm.hst }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">0</view>
+          <u-slider v-model="equipContrlForm.hst"  class="slider" max="100" min="0" active-color="#0BBC58"></u-slider>
+          <view class="slider-max-value">100</view>
         </view>
-        <u-slider v-model="equipContrlForm.hst" style="width:100%" max="100" active-color="#0BBC58"></u-slider>
         <view class="device-detail-viewImage">
-          <text class="device-detail-label">高温保护阀值(℃)</text>
+          <text class="device-detail-label">高温保护阀值(℃){{ equipContrlForm.tph }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">0</view>
+          <u-slider v-model="equipContrlForm.tph" class="slider" max="100" min="0" active-color="#0BBC58"></u-slider>
+          <view class="slider-max-value">100</view>
         </view>
-        <u-slider v-model="equipContrlForm.tph" style="width:100%" max="100" active-color="#0BBC58"></u-slider>
         <view class="device-detail-viewImage">
-          <text class="device-detail-label">低温保护阀值(℃)</text>
+          <text class="device-detail-label">低温保护阀值(℃){{ equipContrlForm.tpl }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">0</view>
+          <u-slider v-model="equipContrlForm.tpl" class="slider" max="100" min="0" active-color="#0BBC58"></u-slider>
+          <view class="slider-max-value">100</view>
         </view>
-        <u-slider v-model="equipContrlForm.tpl" style="width:100%" max="100" active-color="#0BBC58"></u-slider>
         <view class="device-detail-viewImage">
-          <text class="device-detail-label">数据上传间隔(min)</text>
+          <text class="device-detail-label">数据上传间隔(min){{ equipContrlForm.datt }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">0</view>
+          <u-slider v-model="equipContrlForm.datt" class="slider" max="100" min="0" active-color="#0BBC58"></u-slider>
+          <view class="slider-max-value">100</view>
         </view>
-        <u-slider v-model="equipContrlForm.datt" style="width:100%;" max="100" active-color="#0BBC58"></u-slider>
       </view>
     </view>
     <view class="device-detail-btn-footer" v-if="activeTab === 'viewImage'">
@@ -347,6 +371,23 @@ export default {
       padding-bottom: 20rpx;
     }
   }
+  .slider-container{
+    position: relative;
+    margin-bottom: 20rpx;
+    .slider-min-value{
+      position: absolute;
+      left: 0;
+      top: -50rpx;
+    }
+    .slider{
+      width: 600rpx;
+    }
+    .slider-max-value{
+      position: absolute;
+      right: 0;
+      top: -50rpx;
+    }
+  }
   .device-detail-btn-footer{
     position: fixed;
     bottom: 0;

pages/scd/components/deviceData.vue

@@ -119,14 +119,38 @@
                 :key="index"
                 class="scrollable-row"
               >
-                <text class="body-cell">{{ item.ds == 1? '打开' : '关闭' }}</text>
-                <text class="body-cell">{{ item.ws }}</text>
-                <text class="body-cell">{{ item.rps }}</text>
-                <text class="body-cell">{{ item.tps }}</text>
-                <text class="body-cell">{{ item.dps }}</text>
-                <text class="body-cell">{{ item.voltval }}</text>
-                <text class="body-cell">{{ item.vps == '0' ? '正常' : '欠压' }}</text>
-                <text class="body-cell">{{ item.tt }}</text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.ds == 1 ? 'success-icon' : 'status-icon'"></view>
+                  {{ item.ds == 1? '打开' : '关闭' }}
+                </text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.ws == '工作' ? 'success-icon' : 'warning-icon'"></view>
+                  {{ item.ws }}
+                </text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.rps == '正常' ? 'success-icon' : 'warning-icon'"></view>
+                  {{ item.rps }}
+                </text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.tps == '正常' ? 'success-icon' : 'warning-icon'"></view>
+                  {{ item.tps }}
+                </text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.tps == '正常' ? 'success-icon' : 'warning-icon'"></view>
+                  {{ item.dps }}
+                </text>
+                <text class="body-cell">
+                  <view class="status-icon" :class="item.voltval == '开灯' ? 'success-icon' : 'warning-icon'"></view>
+                  {{ item.voltval }}
+                </text>
+                <text 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 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">{{ item.at }}</text>
                 <text class="body-cell">{{ item.ah }}</text>
@@ -823,6 +847,22 @@ export default {
     left: -70rpx;
   }
 }
+.status-icon{
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20rpx;
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #B6BECA;
+}
+.success-icon{
+  background: #0BBC58;
+}
+.warning-icon{
+  background: #F8B610;
+}
 /* 主要数据面板 */
 .main-data-panel {
   display: flex;
@@ -1174,6 +1214,7 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
+              position: relative;
             }
           }
         }

pages/scd/detail.vue

@@ -43,7 +43,7 @@
         :deviceType="deviceType"
       />
       <view class="tabs">
-        <view class="tab-container" v-if="isShowTab">
+        <view class="tab-container" v-if="isShowTab && camera_id">
           <!-- <view class="tab-item" :class="activeTab === 'viewImage'?'active':''" @click="handleTabClick('viewImage')">
             查看图片
           </view> -->

pages/scd/deviceControl.vue

@@ -63,17 +63,29 @@
           <text class="device-detail-label">高温保护阀值(℃)
           {{ equipContrlForm.tph }}</text>
         </view>
-        <u-slider v-model="equipContrlForm.tph" style="width:100%" :min="50" :max="70" active-color="#0bbc58"></u-slider>
+        <view class="slider-container">
+          <view class="slider-min-value">50</view>
+          <u-slider :value="equipContrlForm.tph" @input="e => equipContrlForm.tph = e" class="slider" :min="50" :max="70" active-color="#0bbc58"></u-slider>
+          <view class="slider-max-value">70</view>
+        </view>
         <view class="device-detail-viewImage">
           <text class="device-detail-label">低温保护阀值(℃)
           {{ equipContrlForm.tpl }}</text>
         </view>
-        <u-slider v-model="equipContrlForm.tpl" style="width:100%" :min="-30" :max="20" active-color="#0bbc58"></u-slider>
+        <view class="slider-container">
+          <view class="slider-min-value">-30</view>
+          <u-slider :value="equipContrlForm.tpl" @input="e => equipContrlForm.tpl = e" class="slider" :min="-30" :max="20" active-color="#0bbc58"></u-slider>
+          <view class="slider-max-value">20</view>
+        </view>
         <view class="device-detail-viewImage">
           <text class="device-detail-label">数据上传间隔(min)
           {{ equipContrlForm.datt }}</text>
         </view>
-        <u-slider v-model="equipContrlForm.datt" style="width:100%;" :max="60" :min="10" active-color="#0bbc58"></u-slider>
+        <view class="slider-container">
+          <view class="slider-min-value">10</view>
+          <u-slider :value="equipContrlForm.datt" @input="e => equipContrlForm.datt = e" :max="60" :min="10" active-color="#0bbc58" class="slider"></u-slider>
+          <view class="slider-max-value">60</view>
+        </view>
       </view>
     </view>
     <view class="device-detail-btn-footer" v-if="activeTab === 'viewImage'">
@@ -118,7 +130,11 @@ export default {
         end_time: '',
         end_time_label: '',
       }],
-      equipContrlForm: {},
+      equipContrlForm: {
+        tph: 0,
+        tpl: 0,
+        datt: 0,
+      },
       time: '',
       activeTab: 'pestAnalysis',
       title: '设置控制',
@@ -327,8 +343,10 @@ export default {
         this.coll_time[i]['end_time_label'] = end_time >= 10 ? end_time + ':00' : '0' + end_time + ':00';
       }
       console.log(this.coll_time,'coll_timecoll_timecoll_time')
-      this.equipContrlForm.tph = Number(this.equipContrlForm.tph || 50)
-      this.equipContrlForm.tpl = Number(this.equipContrlForm.tpl || 0)
+      // 确保值是数字类型，并且使用默认值时也要在合理范围内
+      this.equipContrlForm.tph = this.equipContrlForm.tph !== undefined && this.equipContrlForm.tph !== '' && !isNaN(this.equipContrlForm.tph) ? Number(this.equipContrlForm.tph) : 50;
+      this.equipContrlForm.tpl = this.equipContrlForm.tpl !== undefined && this.equipContrlForm.tpl !== '' && !isNaN(this.equipContrlForm.tpl) ? Number(this.equipContrlForm.tpl) : 0;
+      this.equipContrlForm.datt = this.equipContrlForm.datt !== undefined && this.equipContrlForm.datt !== '' && !isNaN(this.equipContrlForm.datt) ? Number(this.equipContrlForm.datt) : 10;
     },
   }
 }
@@ -492,6 +510,23 @@ export default {
       }
     }
   }
+  .slider-container{
+    position: relative;
+    margin-bottom: 20rpx;
+    .slider-min-value{
+      position: absolute;
+      left: 0;
+      top: -50rpx;
+    }
+    .slider{
+      width: 600rpx;
+    }
+    .slider-max-value{
+      position: absolute;
+      right: 0;
+      top: -50rpx;
+    }
+  }
   .device-detail-btn-footer{
     position: fixed;
     bottom: 0;