瀏覽代碼

feat: 多页面优化设备数据展示与交互体验

1. 为设备数据列表添加状态指示灯图标,优化可视化展示
2. 修复设备id参数兼容问题,适配更多设备标识字段
3. 优化详情页标签显示逻辑,增加camera_id判断条件
4. 重构控制页滑块组件布局,添加当前值显示与范围刻度
allen 1 天之前
父節點
當前提交
2c5db747e8

+ 26 - 3
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;
@@ -1157,6 +1179,7 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
+              position: relative;
             }
           }
         }

+ 1 - 1
pages/cb/smallPest/smallPest.vue

@@ -258,7 +258,7 @@ export default {
       uni.navigateTo({
         url:
           './photolist?device_id=' +
-          this.equipInfo.imei +
+          ( this.equipInfo.imei || this.equipInfo.device_id || this.equipInfo.id) +
           '&d_id=' +
           this.equipInfo.d_id,
       });

+ 33 - 4
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>
@@ -840,6 +852,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;
@@ -1195,6 +1223,7 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
+              position: relative;
             }
           }
         }

+ 53 - 12
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;

+ 49 - 8
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>
@@ -942,6 +966,22 @@ export default {
     }
   }
 }
+.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;
+}
 .tabs-container{
   display:flex;
   align-items: center;
@@ -1174,6 +1214,7 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
+              position: relative;
             }
           }
         }

+ 1 - 1
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> -->