bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/pages_inspect/pages/equipmentInspection/equipmentInspection.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,581 @@
<template>
   <view class="box1">
      <!--    è®¾å¤‡+日期   -->
      <view class="box_list">
         <view class="box_list_item" @click="show = true">
            <view class="box_list_item_left">
               <text>检验设备</text><text>*</text>
            </view>
            <view class="box_list_item_right">
               <text :style="form.equipmentName ? 'color: #000' : ''">{{ form.equipmentName ? form.equipmentName : '点击选择巡检设备' }}</text>
               <u-icon name="arrow-right" color="#999999" size="18"></u-icon>
            </view>
         </view>
         <view class="box_list_code" @click.stop="openCode">
            <view class="boxs">
               <image src="@/static/jianyan_ic_saoma@2x.png" alt="" />
               <text>扫描设备</text>
            </view>
         </view>
         <view class="box_list_item" @click="showTime = true">
            <view class="box_list_item_left">
               <text>巡检时间</text><text>*</text>
            </view>
            <view class="box_list_item_right">
               <text class="black">{{form.time}}</text>
               <u-icon name="arrow-right" color="#999999" size="18"></u-icon>
            </view>
         </view>
      </view>
      <!--    çŠ¶æ€+图片/视频   -->
      <view class="box_list1">
         <view class="box_list1_item">
            <view class="box_list1_item_left">
               <text>设备状态</text><text>*</text>
            </view>
            <view class="box_list1_item_right">
               <view class="box_list1_item_right_item" :class="{'active': item.active}"
                  v-for="(item, index) in status" :key="index" @click="changeItem(index, item.id)">{{item.name}}
               </view>
            </view>
         </view>
         <view class="box_list1_club">
            <view class="box_list1_club_label">巡检现场照片<text v-show="form.status == '1'">*</text></view>
            <view class="box_list1_club_list">
               <view class="box_list1_club_list_item" @click="uploadFile">
                  <view class="type">
                     <image class="type_img" src="@/static/btn_upload@2x.png" alt="" />
                  </view>
               </view>
               <view class="box_list1_club_list_item" v-for="(item, index) in form.files" :key="index"
                  @click="seeBigFile(index)">
                  <image class="close" src="@/static/ic_delete@2x.png" @click.stop="dele(index)" />
                  <image class="play" src="@/static/ic_play@2x.png" v-if="item.type === 1" />
                  <view class="type">
                     <video :src="item.url" v-if="item.type === 1"></video>
                     <image v-else class="type_img" :src="item.url" mode="widthFix" />
                  </view>
               </view>
               <view class="box_list1_club_list_item1"></view>
               <view class="box_list1_club_list_item1"></view>
            </view>
         </view>
      </view>
      <view class="box_list2">
         <view class="box_list2_label">备注</view>
         <textarea name="" id="" v-model="form.remarks" cols="20" rows="5" maxlength="300"
            placeholder="请详细描述巡检情况"></textarea>
      </view>
      <view class="box_footer">
         <button class="box_footer_submit" v-preventReClick @click="submit">提交</button>
      </view>
      <!-- æŸ¥çœ‹å¤§å›¾ -->
      <Preview :list="form.files" :current="current" v-if="isOpen" />
      <!-- é€‰æ‹©è®¾å¤‡ -->
      <ytyDataPicker :show="show" :dataList="columns" @select="handleSelect" @search="handleSearch" @close="show = false" />
      <!-- é€‰æ‹©æ—¶é—´ -->
      <u-datetime-picker :show="showTime" v-model="currentDate" @cancel="showTime = false" @confirm="queding" mode="datetime"></u-datetime-picker>
   </view>
</template>

<script>
   import { getBarcodeContent } from '@/util/api/WorkOrderAPI'
   import { saveBean, getDeviceByCondition, getsbInfo } from '@/util/api/QualityAPI'
   import { queryListByCode, uploadFiles } from '@/util/api/index'
   import { QRCodeType, baseUrl, fileType } from '@/common/config.js'
   import { setTime, judgmentType } from '@/util/utils.js'
   import { mapState } from 'vuex'
   import ytyDataPicker from '@/components/yty-data-picker/yty-data-picker.vue'
   import Preview from '@/components/Preview/Preview.vue'

   export default {
      data() {
         return {
            list1: [
               'https://cloudfactory.oss-cn-hangzhou.aliyuncs.com/deviceCheck/20230911/e228a809-0a6b-443c-9a2c-78d5c1b1b633.mp4',
               'https://cdn.uviewui.com/uview/swiper/swiper2.png',
               'https://cdn.uviewui.com/uview/swiper/swiper3.png',
            ],
            status: [{
                  name: '正常',
                  active: true,
                  id: '0'
               },
               {
                  name: '异常',
                  active: false,
                  id: '1'
               }
            ],
            columns: [],
            path: '',
            show: false,
            showTime: false,
            currentDate: new Date(),
            current: 0,
            form: {
               equipmentId: '', // è®¾å¤‡id
               equipmentName: '', //设备名称
               time: '', // å·¡æ£€æ—¶é—´
               status: '0', // è®¾å¤‡çŠ¶æ€
               files: [], // å·¡æ£€å›¾ç‰‡/视频
               remarks: '' // å¤‡æ³¨
            }
         };
      },
      components:{
         ytyDataPicker,
         Preview
      },
      onLoad() {
         this.form.time = setTime(new Date(), '-')
         this.getqueryListByCode()
         this.getSB('')
      },
      computed: {
         ...mapState(['session'])
      },
      methods: {
         // åˆ é™¤æŒ‡å®šæ–‡ä»¶
         dele(i) {
            this.form.files.splice(i, 1)
         },
         // é€‰æ‹©è®¾å¤‡
         handleSelect(e) {
            this.form.equipmentId = e.code
            this.form.equipmentName = e.name
            this.show = false
         },
         // æœç´¢è®¾å¤‡
         handleSearch(e) {
            this.getSB(e)
         },
         // ç¡®è®¤é€‰æ‹©æ—¥æœŸ
         queding(val) {
            this.form.time = uni.$u.timeFormat(val.value, 'yyyy-mm-dd hh:MM:ss')
            this.showTime = false
         },
         // æ‰«ç 
         openCode() {
            var that = this
            uni.scanCode({
               onlyFromCamera: true,
               success: function (result) {
                  getBarcodeContent({
                     barcode: result.result
                  }).then(res => {
                     if (res.code === 200) {
                        if (res.data.barcodeType === QRCodeType.SB) {
                           getsbInfo(res.data.id)
                              .then(res1 => {
                                 if (res1.code === 200) {
                                    that.form.equipmentId = res1.data.id
                                    that.form.equipmentName = res1.data.name
                                 }
                              })
                        } else {
                           uni.showToast({
                              title: '请扫描正确的设备码',
                              icon: 'none',
                              duration: 2000
                           });
                        }
                     }
                  })
               }
            });
         },
         // æ”¹å˜çŠ¶æ€
         changeItem(i, id) {
            this.status.forEach((item, index) => {
               item.active = index === i;
            })
            this.form.status = id
         },
         submit() {
            if (!this.form.equipmentId) return uni.showToast({
               title: '设备不能为空',
               icon: 'none',
               duration: 2000
            });
            if (!this.form.time) return uni.showToast({
               title: '时间不能为空',
               icon: 'none',
               duration: 2000
            });
            if (!this.form.status) return uni.showToast({
               title: '状态不能为空',
               icon: 'none',
               duration: 2000
            });
            if (this.form.status == '1') {
               if (this.form.files.length === 0) return uni.showToast({
                  title: '现场照片不能为空',
                  icon: 'none',
                  duration: 2000
               });
            }
            saveBean({
               checkDate: this.form.time,
               content: this.form.remarks,
               deviceId: this.form.equipmentId,
               status: this.form.status,
               multiFilesSaveBeans: this.form.files
            }).then(res => {
               if (res.code === 200) {
                  uni.showToast({
                     title: '提交成功',
                     icon: 'success',
                     duration: 2000,
                     mask: true
                  });
                  setTimeout(() => {
                     uni.navigateBack({
                        delta: 1
                     });
                  }, 2000)
               }
            })
         },
         // èŽ·å–当前用户下所有设备
         getSB(name) {
            getDeviceByCondition({ name })
               .then(res => {
                  if (res.code === 200 && res.data && res.data.length > 0) {
                     let arr = []
                     res.data.forEach(item => {
                        arr.push({ name: item.name, code: item.id })
                     })
                     this.columns = arr
                  } else {
                     this.columns = []
                  }
               })
         },
         // ç‚¹å‡»ä¸Šä¼ 
         uploadFile() {
            var that = this
            uni.chooseImage({
               success: (chooseImageRes) => {
                  const tempFilePaths = chooseImageRes.tempFilePaths;
                  console.log(tempFilePaths)
                  uni.uploadFile({
                     url: baseUrl + '/ext/routeCardExt/upload',
                     filePath: tempFilePaths[0],
                     name: 'file',
                     header: {
                        'Cookie': 'eva-auth-token=' + that.session
                     },
                     formData: {
                        'folder': that.path
                     },
                     success: (uploadFileRes) => {
                        let res = JSON.parse(uploadFileRes.data)
                        let type = ''
                        for (let i = 0; i < fileType.length; i++) {
                           if (tempFilePaths[0].indexOf(fileType[i].name) !== -1) {
                              type = fileType[i].type
                           }
                        }
                        that.form.files.push({
                           fileUrl: res.data.imgaddr,
                           filename: res.data.imgname,
                           type,
                           url: res.data.url
                        })
                     }
                  });
               }
            });
         },
         // èŽ·å–字典纸
         getqueryListByCode() {
            queryListByCode({
               dicCode: 'FOLDER',
               label: 'DEVICE_CHECK'
            }).then(res => {
               if (res.code === 200) {
                  this.path = res.data[0].code
               }
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .box1 {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #F7F7F7;
		
      .sb {
         width: 100%;
         height: 800rpx;
         padding: 30rpx;
         box-sizing: border-box;
      }

      .box_list {
         padding: 0 30rpx 0 30rpx;
         background: white;
         display: flex;
         flex-direction: column;

         .box_list_code {
            margin: 20rpx 0;

            .boxs {
               display: flex;
               align-items: center;
               justify-content: flex-end;

               image {
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 12rpx;
               }

               text {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: $nav-color;
               }
            }
         }

         .box_list_item {
            height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;

            &:last-child {
               border: none;
            }

            .box_list_item_left {
               text {
                  font-size: 30rpx;
                  font-weight: 400;

                  &:first-child {
                     color: #222222;
                  }

                  &:last-child {
                     color: #DE5243;
                     margin-left: 8rpx;
                  }
               }
            }

            .box_list_item_right {
               display: flex;
               align-items: center;
               .black {
                  color: black;
               }

               text {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #999999;
                  margin-right: 10rpx;
               }
            }
         }
      }

      .box_list1 {
         padding: 30rpx;
         background: white;
         margin-top: 20rpx;

         .box_list1_item {
            height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;

            &:last-child {
               border: none;
            }

            .box_list1_item_left {
               text {
                  font-size: 30rpx;
                  font-weight: 400;
                  color: #222222;

                  &:last-child {
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #DE5243;
                     margin-left: 4rpx;
                  }
               }
            }

            .box_list1_item_right {
               display: flex;
               align-items: center;

               .active {
                  color: white !important;
                  background: $nav-color !important;
               }

               .box_list1_item_right_item {
                  padding: 18rpx 32rpx;
                  background: #F2F2F2;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 26rpx;
                  font-weight: 400;
                  color: #333333;
                  margin-left: 20rpx;
                  border-radius: 8rpx;
               }
            }
         }

         .box_list1_club {
            display: flex;
            flex-direction: column;
            margin-top: 36rpx;

            .box_list1_club_label {
               font-size: 30rpx;
               font-weight: 400;
               color: #222222;
               margin-bottom: 32rpx;

               text {
                  font-size: 30rpx;
                  font-weight: 400;
                  color: #DE5243;
                  margin-left: 4rpx;
               }
            }

            .box_list1_club_list {
               display: flex;
               align-items: center;
               justify-content: space-between;
               flex-wrap: wrap;

               .box_list1_club_list_item1 {
                  width: 170rpx;
                  height: 0;
               }

               .box_list1_club_list_item {
                  width: 150rpx;
                  height: 150rpx;
                  border-radius: 8rpx;
                  position: relative;
                  margin-right: 22rpx;
                  margin-bottom: 22rpx;

                  .type {
                     width: 100%;
                     height: 100%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     position: absolute;
                     top: 0;
                     left: 0;

                     .type_img {
                        width: 100%;
                        height: 100%;
                     }

                     video {
                        height: 100%;
                        z-index: 1;
                     }
                  }

                  .play {
                     position: absolute;
                     left: 50%;
                     top: 50%;
                     width: 56rpx;
                     height: 56rpx;
                     z-index: 9;
                     transform: translate(-50%, -50%);
                  }

                  .close {
                     position: absolute;
                     right: -16rpx;
                     top: -16rpx;
                     width: 32rpx;
                     height: 32rpx;
                     z-index: 9;
                  }
               }
            }
         }
      }

      .box_list2 {
         padding: 30rpx;
         background: white;
         margin-top: 20rpx;
         display: flex;
         flex-direction: column;

         .box_list2_label {
            font-size: 30rpx;
            font-weight: 400;
            color: #222222;
            margin-bottom: 32rpx;
         }

         textarea {
            border: none;
            font-size: 28rpx;
         }

         textarea::-webkit-input-placeholder {
            font-size: 28rpx;
            font-weight: 400;
            color: #B2B2B2;
         }
      }

      .box_footer {
         width: 100%;
         padding: 0 30rpx 68rpx 30rpx;
         box-sizing: border-box;
         position: fixed;
         bottom: 0;
         left: 0;
         background: #F7F7F7;

         .box_footer_submit {
            width: 100%;
            height: 88rpx;
            background: #4275FC;
            box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.0800);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30rpx;
            font-weight: 500;
            color: #FFFFFF;
            border: none;
         }
      }
   }
</style>