1.维修验证页面开发完成

loulijun2021

2022-10-10 542593742c26593b049b83b00e1a17209af13343

 pages/sbgl/wxyz.html

@@ -6,8 +6,6 @@
      <meta name="HandheldFriendly" content="true" />
      <meta name="MobileOptimized" content="320" />
      <title>新凯迪制造云平台</title>
      <!-- 引入像素转换 px->rpx -->
      <!-- <script src="../../js/rpx4html.js"></script> -->

      <!-- 引入样式文件 -->
      <link rel="stylesheet" href="../../css/vant.css" />
@@ -19,28 +17,347 @@
      <script type="text/javascript" src="../../js/axios.min.js"></script>
      <script type="text/javascript" src="../../js/http.js"></script>

      <script type="text/javascript" src="../../js/common.js"></script>

      <link rel="stylesheet" href="../css/global.css" type="text/css" charset="utf-8" />
      <script type="text/javascript" src="../../js/global.js"></script>

      <script type="text/javascript">
         var topContent = [
            // {
            //    repair_code: 'SB00990001',
            //    eqpcode: 'SB001',
            //    eqpname: '齿轮箱组',
            //    wksp_code: "CJ002",
            //    wksp_name: '装配车间',
            //    eqpchkmain_code: "djbz002",
            //    repair_person: '佩罗西',
            //    repair_date: '2022-09-20 15:20:30',
            //    is_shutdown: 'Y',
            //    failure_descript: '精工车间注塑机一号开不精工车间注塑机一号开不',
            //    arrowType: true, //箭头类别
            //    messageDescr: '123',
            //    fileList: [],
            // },
            // {
            //    repair_code: 'SB00990002',
            //    eqpcode: 'SB002',
            //    eqpname: '齿轮箱组',
            //    wksp_code: "CJ002",
            //    wksp_name: '装配车间',
            //    eqpchkmain_code: "djbz002",
            //    repair_person: '佩罗西',
            //    repair_date: '2022-09-20 15:20:30',
            //    is_shutdown: 'N',
            //    failure_descript: '精工车间注塑机一号开不',
            //    arrowType: true, //箭头类别
            //    messageDescr: '123',
            //    fileList: [],
            // },
            // {
            //    repair_code: 'SB00990003',
            //    eqpcode: 'SB003',
            //    eqpname: '齿轮箱组',
            //    wksp_code: "CJ002",
            //    wksp_name: '装配车间',
            //    eqpchkmain_code: "djbz002",
            //    repair_person: '佩罗西',
            //    repair_date: '2022-09-20 15:20:30',
            //    is_shutdown: 'Y',
            //    failure_descript: '精工车间注塑机一号开不了',
            //    arrowType: true, //箭头类别
            //    messageDescr: '123',
            //    fileList: [],
            // },
            // {
            //    repair_code: 'SB00990004',
            //    eqpcode: 'SB004',
            //    eqpname: '齿轮箱组',
            //    wksp_code: "CJ002",
            //    wksp_name: '装配车间',
            //    eqpchkmain_code: "djbz002",
            //    repair_person: '佩罗西',
            //    repair_date: '2022-09-20 15:20:30',
            //    is_shutdown: 'N',
            //    failure_descript: '精工车间注塑机一号开不了',
            //    arrowType: true, //箭头类别
            //    messageDescr: '123',
            //    fileList: [],
            // },
         ];




         let radioValue = '' //单选框选中的项

         let falseArray = [] //假数组   做扫码回来视图更新用

         // 扫描维修工位返回时执行方法
         function scaned(r) {
            radioValue = r


            let temp = {}
            let flag = false
            topContent.forEach((item, index) => {
               if (item.repair_code === radioValue) {
                  temp = item
                  topContent.splice(index, 1)
                  flag = true
               }
            })
            if (flag) {
               topContent.unshift(temp)
            } else {
               vant.Notify({
                  type: 'danger',
                  message: '所扫二维码围在列表中！'
               })
               if (topContent.length > 0) {
                  radioValue = topContent[0].repair_code
               }
            }



            falseArray.push({
               id: '1'
            })
         }
      </script>
   </head>
   <!-- <body onload="loadNodes()"> -->
   <body>
      <div id="app">

         <div class="body">

            <van-nav-bar title="维修验证" @click-right="onClickRight" left-arrow @click-left="onClickleft">
               <template #right>
                  <van-popover style="" placement="bottom-end" :offset="[13,8]" v-model="showPopover" 
                     trigger="click" :actions="actions" @select="onSelect">
                     <template #reference>
                        <van-icon name="bars" size='20' color='#fff' />
                     </template>
                  </van-popover>
               </template>
            </van-nav-bar>
            <van-sticky>
               <van-nav-bar title="维修验证" @click-right="onClickRight" left-arrow @click-left="onClickleft">
                  <template #right>
                     <van-popover style="" placement="bottom-end" :offset="[13,8]" v-model="showPopover"
                        trigger="click" :actions="actions" @select="onSelect">
                        <template #reference>
                           <van-icon name="bars" size='20' color='#fff' />
                        </template>
                     </van-popover>
                  </template>
               </van-nav-bar>
            </van-sticky>

            <div v-if="topContent.length===0">
               <div class="sacnBody">
                  <div class="box">
                     <div class="boxImg"></div>
                  </div>
                  <div class="scanText">暂无维修可验证</div>
               </div>
            </div>

            <div v-else>

               <van-sticky :offset-top="44">
                  <div style="display: flex;
                           background-color: #eff0f1;
                           height: 40px;align-items:center;
                           justify-content: space-between;width: 98%;margin: auto;">

                     <div class="head_left">
                        <div class="head_bar"></div>
                        <div class="head_title">
                           扫描维修工位
                        </div>
                     </div>

                     <div style="margin-right: 10px;">
                        <van-icon name="scan" color='red' size='24' @click='topScanClick()' />
                     </div>

                  </div>
               </van-sticky>

               <van-radio-group v-model="radioValue">
                  <van-cell-group>
                     <div class="head" style="width: 96%;float: left;margin-right: 0;"
                        v-for="(item,index) in topContent"
                        @click="topContentClcik(item.repair_code,item.eqpcode,item.wksp_code)"
                        :key="item.repair_code">
                        <div class="cellDiv">设备维修单：{{item.repair_code}}</div>
                        <div class="cellDiv">工位编码：{{item.eqpcode}}</div>
                        <div class="cellDiv">工位名称：{{item.eqpname}}</div>
                        <div class="cellDiv">生产车间：{{item.wksp_name}}</div>
                        <van-cell :title="'申请人员：'+item.repair_person">
                           <template #right-icon>
                              <van-radio style="margin-right: 10px;" checked-color='red'
                                 :name="item.repair_code" />
                           </template>
                        </van-cell>
                        <div class="cellDiv">维修时间：{{item.repair_date}}</div>
                        <div class="cellDiv">停机维修：{{item.is_shutdown==='Y'?'是':'否'}}</div>
                        <div class="cellDiv">故障描述：{{item.failure_descript}}</div>

                        <div v-show="item.arrowType" style="height: 30px;margin: auto;margin-top: 10px;"
                           :style="{marginBottom:(topContent.length-1===index)?'70px':'0px'}">
                           <div style="border-radius: 5px;width: 60px;height: 30px;background-color: aliceblue;"
                              @click="arrowTypeChangeDown(item.repair_code,item.eqpcode,item.wksp_code)"
                              class="flex_center_center">
                              <van-icon :name="item.arrowType?'arrow-down':'arrow-up'" />
                           </div>
                        </div>

                        <!-- <div v-if="topContent.length-1===index" style="z-index: 100;height: 10px;background-color: red;margin-top: -10px;"></div> -->

                        <div v-show="!item.arrowType" class="flex_column">
                           <div class="flex_center_center"
                              style="margin-top: 10px;background-color: #eff0f1;height: 40px;font-size: 20px;">
                              维修详情</div>


                           <div class="head" style="padding-bottom: 0;">
                              <div class="head_block">
                                 <div class="head_left">
                                    <div class="head_bar"></div>
                                    <div class="head_title">
                                       故障描述
                                    </div>
                                 </div>
                              </div>



                              <div
                                 style="display:flex;flex-direction: column;width: 96%;margin: auto;padding: 10px;">
                                 {{messageDescr}}
                              </div>
                              <div v-show="fileList.length!==0" style="width: 96%;margin: auto;">
                                 <van-uploader multiple v-model="fileList" multiple :max-count="3" />
                              </div>

                           </div>


                           <div style="background-color: #eff0f1;height: 10px;"></div>

                           <div class="head" style="padding-bottom: 5px;margin-top: 0;">
                              <div class="head_block" style="">
                                 <div class="head_left">
                                    <div class="head_bar"></div>
                                    <div class="head_title">
                                       停机维修
                                    </div>
                                 </div>

                                 <van-button class="buttonSmall" size="small" type="primary">
                                    {{isStop==='Y'?'是':'否'}}
                                 </van-button>

                              </div>

                           </div>

                           <div style="background-color: #eff0f1;height: 10px;"></div>

                           <div class="head" style="padding-bottom: 0;" v-show="messageDescr2!==''">
                              <div class="head_block">
                                 <div class="head_left">
                                    <div class="head_bar"></div>
                                    <div class="head_title">
                                       维修内容
                                    </div>
                                 </div>
                              </div>

                              <div
                                 style="display:flex;flex-direction: column;width: 96%;margin: auto;padding: 10px;">
                                 {{messageDescr2}}
                              </div>

                           </div>

                           <div style="background-color: #eff0f1;height: 10px;"></div>


                           <div class="head" style="padding-bottom: 0;" v-show="messageDescr3!==''">
                              <div class="head_block">
                                 <div class="head_left">
                                    <div class="head_bar"></div>
                                    <div class="head_title">
                                       更换备件
                                    </div>
                                 </div>
                              </div>



                              <div
                                 style="display:flex;flex-direction: column;width: 96%;margin: auto;padding: 10px;">
                                 {{messageDescr3}}
                              </div>
                              <div v-show="fileList2.length!==0" style="width: 96%;margin: auto;">
                                 <van-uploader multiple v-model="fileList2" multiple :max-count="3" />
                              </div>

                           </div>

                           <div style="background-color: #eff0f1;height: 10px;"></div>

                           <div class="head" style="padding-bottom: 5px;margin-top: 0;">
                              <div class="head_block" style="">
                                 <div class="head_left">
                                    <div class="head_bar"></div>
                                    <div class="head_title">
                                       验证结果
                                    </div>
                                 </div>

                                 <div class="flex_center"
                                    style="width: 30%;display: flex;justify-content: space-around;">
                                    <van-button class="buttonSmall" size="small"
                                       :plain="item.resultValue!=='OK'"
                                       @click="resultValueClick(item.repair_code,'OK')" type="primary">
                                       正常</van-button>
                                    <van-button class="buttonSmall" size="small"
                                       :plain="item.resultValue!=='NG'"
                                       @click="resultValueClick(item.repair_code,'NG')" type="danger">
                                       异常
                                    </van-button>
                                 </div>

                              </div>

                           </div>


                           <div v-show="!item.arrowType" style="height: 30px;margin: auto;margin-top: 10px;"
                              :style="{marginBottom:(topContent.length-1===index)?'70px':'0px'}">
                              <div style="border-radius: 5px;width: 60px;height: 30px;background-color: aliceblue;"
                                 @click="arrowTypeChangeUp(item.repair_code)" class="flex_center_center">
                                 <van-icon :name="item.arrowType?'arrow-down':'arrow-up'" />
                              </div>
                           </div>


                        </div>

                     </div>
                  </van-cell-group>
               </van-radio-group>


               <div class="footer" style="min-height:50px;">
                  <div
                     style="position:fixed;bottom: 0;width: 96%;display: flex;justify-content: center;flex-direction: column;align-items: center">
                     <van-button :loading="submitIsDisabled"
                        :disabled="topContent.find(item=>item.repair_code===radioValue).resultValue===''"
                        loading-text='正在提交,请稍等...' class="vanButtonInfo" @click="submit" type="info">
                        确认提交</van-button>

                  </div>
               </div>

            </div>

         </div>


         <van-overlay :show="overlayShow" @click="overlayShow=false" />

@@ -52,6 +369,7 @@
         el: '#app',
         data: function() {
            return {
               submitIsDisabled: false,
               overlayShow: false,
               showPopover: false,
               actions: [{
@@ -65,52 +383,219 @@
                  text: '退出登录'
               }],

               topContent2: topContent,
               messageDescr: '', //故障描述
               fileList: [],
               fileList2: [],
               isStop: 'Y',
               messageDescr2: '', //维修内容
               messageDescr3: '', //更换备件
               falseArray2: falseArray,
               baseUrl: 'http://121.196.36.24:8001', //ip基础地址
               // resultValue: '', //验证结果
            }
         },
         created() {
         watch: {
            'topContent2.length': {
               handler(newValue, oldValue) {
                  if (newValue !== oldValue) {
                     // this.topContent2 = topContent
                     // this.$forceUpdate()
                     if (topContent[0] && topContent[0].repair_code) {
                        this.$forceUpdate()
                        this.topContentClcik(topContent[0].repair_code, topContent[0].eqpcode, topContent[0]
                           .wksp_code)
                     }

                  }
               },
               deep: true,
               immediate: true,
            },
            'falseArray2.length': {
               handler(newValue, oldValue) {
                  this.$forceUpdate()
               },
               deep: true,
               immediate: true,
            },
         },
         created() {},
         mounted() {
			
            this.getList()
         },
         methods: {
            onClickleft(){
            getList() {
               get('AppDeviceManage/RepairVerificationScanDeviceData').then(res => {
                  if (res.code === '200') {
                     topContent = res.data
                     radioValue = topContent[0].repair_code

                     topContent.forEach(item => {
                        item.arrowType = true
                        item.resultValue = ''
                     })
                     this.getDetail(topContent[0].repair_code, topContent[0].eqpcode, topContent[0]
                        .wksp_code)
                     this.$forceUpdate()
                  }
               })
            },
            getDetail(repair_code, eqpcode, wkshpcode) {
               const data = {
                  repair_code,
                  eqpcode,
                  wkshpcode
               }

               get('AppDeviceManage/RepairVerificationScanDeviceDataSub' + formatParams(data)).then(res => {
                  if (res.code === '200') {
                     console.log(res.data)
                     this.messageDescr = res.data.failure_descript

                     this.fileList = res.data.failure_descriptimg ? res.data.failure_descriptimg
                        .filter(item => item.img1url !== '') : []

                     this.fileList.forEach(item => {
                        item.url = this.baseUrl + item.img1url
                     })

                     this.isStop = res.data.repair_content ? 'N' : 'Y'

                     this.messageDescr2 = res.data.repair_content ? res.data.repair_content : ''
                     this.messageDescr3 = res.data.repair_part ? res.data.repair_part : ''

                     this.fileList2 = res.data.repair_partimage ? res.data.repair_partimage.filter(
                        item => item.img2url !== '') : []
                     this.fileList2.forEach(item => {
                        item.url = this.baseUrl + item.img2url
                     })
                     this.$forceUpdate()
                  }
               })
            },
            arrowTypeChangeUp(repair_code) {
               topContent.forEach(item => {
                  item.arrowType = true
               })
               this.$forceUpdate()
            },

            arrowTypeChangeDown(repair_code, eqpcode, wksp_code) {
               radioValue = repair_code
               topContent.forEach(item => {
                  item.arrowType = true
                  if (item.repair_code === repair_code) {
                     item.arrowType = false
                     item.resultValue = ''
                     this.messageDescr = ''
                     this.messageDescr2 = ''
                     this.messageDescr3 = ''
                     this.fileList = []
                     this.fileList2 = []
                     // this.resultValue =''
                     this.getDetail(item.repair_code, item.eqpcode, item.wksp_code)
                  }
               })
               this.$forceUpdate()
            },
            submit() {

               // if(this.resultValue===''){
               // return 
               // }

               const result = topContent.find(item => item.repair_code === radioValue)

               const formData = new FormData()
               formData.append("username", localStorage.getItem('username'))
               formData.append("eqpcode", result.eqpcode)
               formData.append("wkshpcode", result.wksp_code)
               formData.append("repairwo", result.repair_code)
               formData.append("result", result.resultValue)

               for (let [a, b] of formData.entries()) {
                  console.log(a, ', ', b);
               }

               post('AppDeviceManage/RepairVerificationScanDeviceSave', formData).then(res => {
                  if (res.code === '200') {
                     topContent.forEach((item, index) => {
                        if (item.repair_code === radioValue) {
                           topContent.splice(index, 1)
                        }
                     })
                     if (topContent.length > 0) {
                        radioValue = topContent[0].repair_code
                        this.getDetail(topContent[0].repair_code, topContent[0].eqpcode, topContent[0]
                           .wksp_code)
                     }
                     // this.resultValue=''
                     this.$forceUpdate()
                  }
               })
            },
            resultValueClick(repair_code, val) {
               topContent.forEach(item => {
                  if (item.repair_code === repair_code) {
                     item.resultValue = val
                  }
               })
               // this.resultValue = val
               this.$forceUpdate()
            },
            topScanClick() {
               createWithoutTitle('../../components/barcode_scan.html', {
                  titleNView: {
                     type: 'float',
                     backgroundColor: 'rgba(215,75,40,0.3)',
                     titleText: '扫一扫',
                     titleColor: '#FFFFFF',
                     autoBackButton: true,
                     buttons: [{
                        fontSrc: '_www/helloh5.ttf',
                        text: '\ue302',
                        fontSize: '18px',
                        onclick: 'javascript:scanPicture()'
                     }]
                  }
               });
            },
            // 输入框失焦触发事件
            vanFieldBlur() {
               this.$forceUpdate()
            },
            topContentClcik(repair_code, eqpcode, wksp_code) {
               radioValue = repair_code
               // this.resultValue = ''
               // topContent.forEach(item => {
               //    if (item.repair_code === repair_code) {
               //       this.getDetail(item.repair_code, item.eqpcode, item.wksp_code)
               //    }
               // })

               this.$forceUpdate()
            },
            onClickleft() {
               history.back()
            },
            onClickRight() {
               this.overlayShow = true
            },
            onSelect(action) {
               vant.Toast(action.text);
               if (action.text === '操作指导') {
                  topPopoverClick('操作指导')
               } else if (action.text === '成品追溯') {
                  topPopoverClick('成品追溯')
               } else if (action.text === '退出登录') {
                  topPopoverClick('退出登录')
               }
               this.overlayShow = false
            },
         }
      })
   </script>
   <style type="text/css">
      body {
         background-color: #fff;
      }

      .body {
         height: 600px;
         background-color: grey;
         margin-top: 0px;
         background-color: #fff;
         position: relative;		
      }

      .van-nav-bar__content {
         background-color: #2651d8;
         height: 44px;
      }

      .van-nav-bar__title {
         color: #fff;
         letter-spacing: 2px;
      }
      .van-nav-bar__arrow{
         color: #fff !important;
      }
      @import url('../../css/global.css');
   </style>
</html>
</html>