renkang
2024-12-06 eb291c55ed2860b38b40385be78a30f30552685f
h5/pages/operation/device.vue
@@ -5,10 +5,12 @@
            <view class="la"><text class="red">*</text>选择设备</view>
            <view class="line">
               <view class="sel_wrap" @click="showModal = true">
                  <view class="left" :class="param.deviceName ? '' : 'placeholder9'">{{ param.deviceName ? param.deviceName : '请选择设备' }}</view>
                  <view class="left" :class="param.deviceName ? '' : 'placeholder9'">
                     {{ param.deviceName ? param.deviceName : '请选择设备' }}
                  </view>
                  <u-icon name="arrow-right" color="#999999" size="17"></u-icon>
               </view>
               <image class="icon" src="@/static/side/scan.png" mode=""></image>
               <image @click="openQrcode" class="icon" src="@/static/side/scan.png" mode=""></image>
            </view>
         </view>
         <view class="item">
@@ -52,12 +54,14 @@
         </view>
      </u-popup>
      <!--  -->
      <u-popup :show="showModal" @close="showModal = false" :safeAreaInsetBottom="true" :round="10" closeable closeOnClickOverlay>
      <u-popup :show="showModal" @close="showModal = false" :safeAreaInsetBottom="true" :round="10" closeable
         closeOnClickOverlay>
         <view class="appr_modal">
            <view class="title">请选择设备</view>
            <view class="search_wrap">
               <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>
               <input v-model="searchValue" @confirm="getDevice()" type="text" placeholder="搜索设备名称/编号" placeholder-class="placeholder9" />
               <input v-model="searchValue" @confirm="getDevice()" type="text" placeholder="搜索设备名称/编号"
                  placeholder-class="placeholder9" />
            </view>
            <view class="modal_list">
               <view class="item" v-for="item,i in deviceList" @click="deviceClick(item)">
@@ -68,6 +72,10 @@
            <view class="sub_btn" @click="handleDevice">确定选择</view>
         </view>
      </u-popup>
      <!--  -->
      <view class="reader-box" @click="stopScan" v-if="isScaning">
         <view class="reader" id="reader"></view>
      </view>
   </view>
</template>
@@ -78,17 +86,25 @@
      ywDeviceCreate
   } from '@/api'
   import dayjs from 'dayjs';
   import {
      Html5Qrcode
   } from 'html5-qrcode';
   export default {
      data() {
         return {
            param: {status: 0},
            param: {
               status: 0
            },
            showUpload: false,
            showModal: false,
            fileList: [],
            
            searchValue: '',
            deviceList: [],
            activeDevice: {}
            activeDevice: {},
            html5Qrcode: null,
            isScaning: false,
         };
      },
      onLoad() {
@@ -96,7 +112,10 @@
      },
      methods: {
         onSubmit() {
            const { param, fileList } = this
            const {
               param,
               fileList
            } = this
            
            if(!param.deviceId) return this.showToast('请先选择要维护的设备')
            ywDeviceCreate({
@@ -121,7 +140,9 @@
            })
         },
         handleDevice() {
            const { activeDevice } = this
            const {
               activeDevice
            } = this
            if(!activeDevice.id) return this.showToast('请先选择设备')
            this.$set(this.param, 'deviceId', activeDevice.id)
            this.$set(this.param, 'deviceName', activeDevice.name)
@@ -224,6 +245,40 @@
                  });
               }
            });
         },
         openQrcode() {
            this.isScaning = true;
            Html5Qrcode.getCameras().then((devices) => {
               if (devices && devices.length) {
                  this.html5Qrcode = new Html5Qrcode('reader');
                  this.html5Qrcode.start({
                        facingMode: 'environment'
                     }, {
                        focusMode: 'continuous', //设置连续聚焦模式
                        fps: 5, //设置扫码识别速度
                        qrbox: 280 //设置二维码扫描框大小
                     },
                     (decodeText, decodeResult) => {
                        if (decodeText) { //这里decodeText就是通过扫描二维码得到的内容
                           this.action(decodeText) //对二维码逻辑处理
                           this.stopScan(); //关闭扫码功能
                        }
                     },
                     (err) => {
                        // console.log(err);  //错误信息
                     }
                  );
               }
            });
         },
         stopScan() {
            console.log('停止扫码')
            this.isScaning = false;
            if (this.html5Qrcode) {
               this.html5Qrcode.stop();
            }
         }
      }
   }
@@ -240,11 +295,13 @@
         .line {
            display: flex;
            align-items: center;
            .icon{
               width: 52rpx;
               height: 52rpx;
               margin-left: 40rpx;
            }
            textarea {
               box-sizing: border-box;
               width: 690rpx;
@@ -267,11 +324,13 @@
            align-items: center;
            border-bottom: 1rpx solid #E5E5E5;
         }
         .radio_wrap{
            margin-top: 20rpx;
            width: 100%;
            display: flex;
            justify-content: space-between;
            .ite{
               width: 216rpx;
               height: 68rpx;
@@ -282,12 +341,14 @@
               align-items: center;
               justify-content: center;
            }
            .active{
               color: $primaryColor;
               border-color: $primaryColor;
               background: rgba(0,104,255,0.1);
            }
         }
         .upload_wrap {
            display: flex;
            flex-wrap: wrap;
@@ -333,6 +394,7 @@
      }
   }
   .sel_upload_wrap {
      width: 100%;
      border-top: 1px solid #333333;
@@ -344,6 +406,7 @@
         text-align: center;
      }
   }
   .sub_btn {
      position: fixed;
      bottom: 68rpx;
@@ -360,9 +423,11 @@
      font-size: 32rpx;
      color: #FFFFFF;
   }
   .appr_modal {
      padding: 36rpx 30rpx 0;
      height: calc( 100vh - 120rpx );
      .title {
         font-weight: 600;
         font-size: 32rpx;
@@ -379,16 +444,20 @@
         background: #f2f2f2;
         border-radius: 38rpx;
         padding-left: 30rpx;
         input{
            flex: 1;
         }
         .search {
            width: 28rpx;
            height: 28rpx;
         }
      }
      .modal_list{
         height: calc( 100% - 360rpx );
         .item{
            display: flex;
            align-items: center;
@@ -396,15 +465,36 @@
            height: 100rpx;
            font-size: 30rpx;
            border-bottom: 1px solid #E5E5E5;
            image{
               width: 40rpx;
               height: 40rpx;
            }
         }
         .active{
            color: $primaryColor;
         }
      }
      
   }
   .reader-box {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
   }
   .reader {
      width: 100%;
      // width: 540rpx;
      // height: 540rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
</style>