开发更新

jiangping

2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea

 h5/pages/operation/device.vue

@@ -5,226 +5,319 @@
            <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 || param.deviceCode) ? '' : 'placeholder9'">

                     {{ (param.deviceName || param.deviceCode) ? param.deviceName ? `[${param.deviceCode}] ` + param.deviceName : `[${param.deviceCode}]` : '请选择设备' }}

                  </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">
            <view class="la">设备状态</view>
            <view class="line">
               <view class="radio_wrap">
                  <view class="ite" :class="{active: param.status == 0}" @click="statusChange(0)">正常</view>
                  <view class="ite" :class="{active: param.status == 1}" @click="statusChange(1)">损坏</view>
                  <view class="ite" :class="{active: param.status == 2}" @click="statusChange(2)">报废</view>
               </view>
            </view>
         </view>
         <view class="item">
            <view class="la">上传视频/图片</view>
            <view class="upload_wrap">
               <view class="upload_file" @click="showUpload = true">
                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
                  <view class="mt6">图片/视频</view>
               </view>
               <view class="upload_file" v-for="(item, i) in fileList" :key="i">
                  <u-icon class="close" size="20" name="close-circle-fill" color="red"
                     @click="fileDel('fileList', i)"></u-icon>
                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
                  <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
               </view>
            </view>
         </view>
         <view class="item">
            <view class="la">运维备注</view>
            <view class="line">
               <textarea v-model="param.content" placeholder="请输入" placeholder-class="placeholder9" />
            </view>
         </view>
         <view class="item">

            <view class="la">设备状态</view>

            <view class="line">

               <view class="radio_wrap">

                  <view class="ite" :class="{active: param.status == 0}" @click="statusChange(0)">正常</view>

                  <view class="ite" :class="{active: param.status == 1}" @click="statusChange(1)">损坏</view>

                  <view class="ite" :class="{active: param.status == 2}" @click="statusChange(2)">报废</view>

               </view>

            </view>

         </view>

         <view class="item">

            <view class="la">上传视频/图片</view>

            <view class="upload_wrap">

               <view class="upload_file" @click="showUpload = true">

                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>

                  <view class="mt6">图片/视频</view>

               </view>

               <view class="upload_file" v-for="(item, i) in fileList" :key="i">

                  <u-icon class="close" size="20" name="close-circle-fill" color="red"

                     @click="fileDel('fileList', i)"></u-icon>

                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>

                  <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>

               </view>

            </view>

         </view>

         <view class="item">

            <view class="la">运维备注</view>

            <view class="line">

               <textarea v-model="param.content" placeholder="请输入" placeholder-class="placeholder9" />

            </view>

         </view>

      </view>

      <view class="sub_btn" @click="onSubmit">提交</view>
      <!--  -->
      <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
         <view class="sel_upload_wrap">
            <view class="btn" @click="uploadImage">选择图片</view>
            <view class="btn" @click="uploadVideo">选择视频</view>
         </view>
      </u-popup>
      <!--  -->
      <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" />
            </view>
            <view class="modal_list">
               <view class="item" v-for="item,i in deviceList" @click="deviceClick(item)">
                  <view class="name">[{{item.code}}] {{ item.name }}</view>
                  <image v-if="activeDevice.id == item.id" src="@/static/radioed.png" mode=""></image>
               </view>
            </view>
            <view class="sub_btn" @click="handleDevice">确定选择</view>
         </view>
      <view class="sub_btn" @click="onSubmit">提交</view>

      <!--  -->

      <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>

         <view class="sel_upload_wrap">

            <view class="btn" @click="uploadImage">选择图片</view>

            <view class="btn" @click="uploadVideo">选择视频</view>

         </view>

      </u-popup>

      <!--  -->

      <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" />

            </view>

            <view class="modal_list">

               <view class="item" v-for="item,i in deviceList" @click="deviceClick(item)">

                  <view class="name">[{{item.code}}] {{ item.name }}</view>

                  <image v-if="activeDevice.id == item.id" src="@/static/radioed.png" mode=""></image>

               </view>

            </view>

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



<script>
   import {
      uploadUrl,
      ywDevicePost,
      ywDeviceCreate
   } from '@/api'
<script>

   import {

      uploadUrl,

      ywDevicePost,

      ywDeviceCreate,

      getFindByCode

   } from '@/api'

   import dayjs from 'dayjs';

   import {

      Html5Qrcode

   } from 'html5-qrcode';

   export default {

      data() {

         return {

            param: {status: 0},
            showUpload: false,
            showModal: false,
            fileList: [],
				
            searchValue: '',
            deviceList: [],
            activeDevice: {}

            param: {

               status: 0

            },

            showUpload: false,

            showModal: false,

            fileList: [],



            searchValue: '',

            deviceList: [],

            activeDevice: {},



            html5Qrcode: null,

            isScaning: false,

         };

      },
      onLoad() {
         this.getDevice()
      },
      methods: {
         onSubmit() {
            const { param, fileList } = this
				
            if(!param.deviceId) return this.showToast('请先选择要维护的设备')
            ywDeviceCreate({
               ...param,
               userId: uni.getStorageSync('userInfo').id,
               dealDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
               multifileList: fileList
            }).then(res => {
               this.showToast('提交成功')
               uni.navigateBack()
            })
         },
         getDevice(){
            ywDevicePost({
               capacity: 9999,
               page: 1,
               model: {
                  name: this.searchValue
               }
            }).then(res => {
               this.deviceList = res.data.records || []
            })
         },
         handleDevice() {
            const { activeDevice } = this
            if(!activeDevice.id) return this.showToast('请先选择设备')
            this.$set(this.param, 'deviceId', activeDevice.id)
            this.$set(this.param, 'deviceName', activeDevice.name)
            this.showModal = false
         },
         deviceClick(item) {
            this.activeDevice = item
            this.$forceUpdate()
         },
         statusChange(val){
            this.param.status = val
         },
         fileDel(str, i) {
            this[str].splice(i, 1);
         },
         uploadImage() {
            this.showUpload = false;
            let token = uni.getStorageSync('token') || '';
            uni.chooseImage({
               count: 4,
               success: chooseImageRes => {
                  uni.showLoading({
                     title: '上传中',
                     mask: true
                  });
                  const tempFilePaths = chooseImageRes.tempFilePaths;
                  let imgs = tempFilePaths.map((value, index) => {
                     return {
                        name: 'file',
                        uri: value
                     };
                  });
                  uni.uploadFile({
                     url: `${uploadUrl}`,
                     files: imgs,
                     name: 'file',
                     formData: {
                        folder: 'YW_DEVICE'
                     },
                     header: {
                        Dm_user_token: token
                     },
                     success: uploadFileRes => {
                        let res = JSON.parse(uploadFileRes.data);
                        if (res.data && res.data.length > 0) {
                           res.data.forEach(i => {
                              i.type = 0;
                              i.fileurl = i.imgaddr;
                              i.fileurlFull = i.url;
                              this.fileList.push(i);
                           });
                        }
                     },
                     fail(err) {
                        console.log('err', err);
                     },
                     complete() {
                        uni.hideLoading();
                        // if (i === chooseImageRes.tempFilePaths.length - 1) {
                        //   uni.hideLoading()
                        // }
                     }
                  });
               }
            });
         },
         uploadVideo() {
            this.showUpload = false;
            let token = uni.getStorageSync('token') || '';
            uni.chooseVideo({
               success: chooseImageRes => {
                  uni.showLoading({
                     title: '上传中',
                     mask: true
                  });
                  uni.uploadFile({
                     url: `${uploadUrl}`,
                     filePath: chooseImageRes.tempFilePath,
                     header: {
                        Dm_user_token: token
                     },
                     name: 'file',
                     formData: {
                        folder: 'YW_DEVICE'
                     },
                     success: uploadFileRes => {
                        let res = JSON.parse(uploadFileRes.data);
                        if (res.data && res.data.length > 0) {
                           res.data.forEach(i => {
                              i.type = 1;
                              i.fileurl = i.imgaddr;
                              i.fileurlFull = i.url;
                              this.fileList.push(i);
                           });
                        }
                     },
                     complete() {
                        uni.hideLoading();
                     }
                  });
               }
            });
         }
      },

      onLoad() {

         this.getDevice()

      },

      methods: {

         onSubmit() {

            const {

               param,

               fileList

            } = this



            if (!param.deviceId) return this.showToast('请先选择要维护的设备')

            this.handleP()

         },

         handleP() {

            const {

               param,

               fileList

            } = this

            ywDeviceCreate({

               ...param,

               userId: uni.getStorageSync('userInfo').id,

               dealDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),

               multifileList: fileList

            }).then(res => {

               if (res && res.code == 200) {

                  if (param.status != 0) {

                     uni.showModal({

                        title: '温馨提示',

                        content: '设备运维结果异常，是否前往提交工单?',

                        success: function(res) {

                           if (res.confirm) {

                              uni.redirectTo({

                                 url: '/pages/workOrder/edit'

                              })

                           } else if (res.cancel) {

                              uni.navigateBack()

                           }

                        }

                     });

                  } else {

                     this.showToast('提交成功')

                     uni.navigateBack()

                  }

               }



            })

         },

         getDevice() {

            ywDevicePost({

               capacity: 9999,

               page: 1,

               model: {

                  name: this.searchValue

               }

            }).then(res => {

               this.deviceList = res.data.records || []

            })

         },

         handleDevice() {

            const {

               activeDevice

            } = this

            if (!activeDevice.id) return this.showToast('请先选择设备')

            this.$set(this.param, 'deviceId', activeDevice.id)

            this.$set(this.param, 'deviceCode', activeDevice.code)

            this.$set(this.param, 'deviceName', activeDevice.name)

            this.showModal = false

         },

         deviceClick(item) {

            this.activeDevice = item

            this.$forceUpdate()

         },

         statusChange(val) {

            this.param.status = val

         },

         fileDel(str, i) {

            this[str].splice(i, 1);

         },

         uploadImage() {

            this.showUpload = false;

            let token = uni.getStorageSync('token') || '';

            uni.chooseImage({

               count: 4,

               success: chooseImageRes => {

                  uni.showLoading({

                     title: '上传中',

                     mask: true

                  });

                  const tempFilePaths = chooseImageRes.tempFilePaths;

                  let imgs = tempFilePaths.map((value, index) => {

                     return {

                        name: 'file',

                        uri: value

                     };

                  });

                  uni.uploadFile({

                     url: `${uploadUrl}`,

                     files: imgs,

                     name: 'file',

                     formData: {

                        folder: 'YW_DEVICE'

                     },

                     header: {

                        Dm_user_token: token

                     },

                     success: uploadFileRes => {

                        let res = JSON.parse(uploadFileRes.data);

                        if (res.data && res.data.length > 0) {

                           res.data.forEach(i => {

                              i.type = 0;

                              i.fileurl = i.imgaddr;

                              i.fileurlFull = i.url;

                              this.fileList.push(i);

                           });

                        }

                     },

                     fail(err) {

                        console.log('err', err);

                     },

                     complete() {

                        uni.hideLoading();

                        // if (i === chooseImageRes.tempFilePaths.length - 1) {

                        //   uni.hideLoading()

                        // }

                     }

                  });

               }

            });

         },

         uploadVideo() {

            this.showUpload = false;

            let token = uni.getStorageSync('token') || '';

            uni.chooseVideo({

               success: chooseImageRes => {

                  uni.showLoading({

                     title: '上传中',

                     mask: true

                  });

                  uni.uploadFile({

                     url: `${uploadUrl}`,

                     filePath: chooseImageRes.tempFilePath,

                     header: {

                        Dm_user_token: token

                     },

                     name: 'file',

                     formData: {

                        folder: 'YW_DEVICE'

                     },

                     success: uploadFileRes => {

                        let res = JSON.parse(uploadFileRes.data);

                        if (res.data && res.data.length > 0) {

                           res.data.forEach(i => {

                              i.type = 1;

                              i.fileurl = i.imgaddr;

                              i.fileurlFull = i.url;

                              this.fileList.push(i);

                           });

                        }

                     },

                     complete() {

                        uni.hideLoading();

                     }

                  });

               }

            });

         },



         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.stopScan(); //关闭扫码功能

                           getFindByCode(decodeText).then(ress => {

                              if (ress.data) {

                                 console.log('ress', ress.data);

                                 this.$set(this.param, 'deviceCode', ress.data.code)

                                 this.$set(this.param, 'deviceId', ress.data.id)

                                 this.$set(this.param, 'deviceName', ress.data.name)

                              } else {

                                 this.showToast('未匹配到巡检点,请重新扫描')

                              }

                           })



                        }

                     },

                     (err) => {

                        // console.log(err);  //错误信息

                     }

                  );

               }

            });

         },



         stopScan() {

            console.log('停止扫码')

            this.isScaning = false;

            if (this.html5Qrcode) {

               this.html5Qrcode.stop();

            }

         }

      }

   }

</script>

@@ -238,13 +331,15 @@
         }



         .line {

            display: flex;
            align-items: center;
            .icon{
               width: 52rpx;
               height: 52rpx;
               margin-left: 40rpx;
            display: flex;

            align-items: center;



            .icon {

               width: 52rpx;

               height: 52rpx;

               margin-left: 40rpx;

            }



            textarea {

               box-sizing: border-box;

               width: 690rpx;

@@ -259,7 +354,7 @@
            }

         }



         .sel_wrap {
         .sel_wrap {

            flex: 1;

            height: 90rpx;

            display: flex;

@@ -267,27 +362,31 @@
            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;
               background: #F7F7F7;
               border-radius: 36rpx;
               font-size: 30rpx;
               display: flex;
               align-items: center;
               justify-content: center;
            }
            .active{
               color: $primaryColor;
               border-color: $primaryColor;
               background: rgba(0,104,255,0.1);
            }


         .radio_wrap {

            margin-top: 20rpx;

            width: 100%;

            display: flex;

            justify-content: space-between;



            .ite {

               width: 216rpx;

               height: 68rpx;

               background: #F7F7F7;

               border-radius: 36rpx;

               font-size: 30rpx;

               display: flex;

               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 +432,7 @@


      }

   }



   .sel_upload_wrap {

      width: 100%;

      border-top: 1px solid #333333;

@@ -344,12 +444,14 @@
         text-align: center;

      }

   }



   .sub_btn {

      position: fixed;

      bottom: 68rpx;

      left: 40rpx;

      // position: fixed;

      // bottom: 68rpx;

      // left: 40rpx;

      width: 670rpx;

      height: 88rpx;

      margin-top: 80rpx;

      background: $primaryColor;

      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);

      border-radius: 44rpx;

@@ -360,51 +462,79 @@
      font-size: 32rpx;

      color: #FFFFFF;

   }

   .appr_modal {
      padding: 36rpx 30rpx 0;
      height: calc( 100vh - 120rpx );
      .title {
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         margin-bottom: 40rpx;
         text-align: center;
      }
		
      .search_wrap {
         display: flex;
         align-items: center;
         width: 100%;
         height: 76rpx;
         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;
            justify-content: space-between;
            height: 100rpx;
            font-size: 30rpx;
            border-bottom: 1px solid #E5E5E5;
            image{
               width: 40rpx;
               height: 40rpx;
            }
         }
         .active{
            color: $primaryColor;
         }
      }
		
   }


   .appr_modal {

      padding: 36rpx 30rpx 0;

      height: calc(100vh - 120rpx);



      .title {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;

         margin-bottom: 40rpx;

         text-align: center;

      }



      .search_wrap {

         display: flex;

         align-items: center;

         width: 100%;

         height: 76rpx;

         background: #f2f2f2;

         border-radius: 38rpx;

         padding-left: 30rpx;



         input {

            flex: 1;

         }



         .search {

            width: 28rpx;

            height: 28rpx;

         }

      }



      .modal_list {

         height: calc(100% - 360rpx);

         margin-bottom: -20rpx;



         .item {

            display: flex;

            align-items: center;

            justify-content: space-between;

            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>