环境

MrShi

2025-01-02 a0a1c206612de9a3e9d64f3d45564c0ff03f93f6

 h5/pages/polling/detail.vue

@@ -1,28 +1,30 @@
<template>

   <view class="main_app">

      <view v-if="info.status || info.status == 0" class="head_bg" :style="{
         background: `linear-gradient(180deg, ${statusM[info.status].color} 0%, rgba(247, 247, 247, 0) 100%)`
      <view v-if="info.status || info.status == 0" class="head_bg" :style="{

         background: `linear-gradient(180deg, ${statusM[info.status].color} 0%, rgba(247, 247, 247, 0) 100%)`

      }"></view>

      <view class="info">

         <image v-if="info.status == 2" class="icon" src="@/static/side/ic_dabiaoed.png" mode=""></image>

         <image v-if="info.status == 3" class="icon" src="@/static/side/ic_dabiao.png" mode=""></image>

         <view class="head">

            <view class="name">{{ info.title }}</view>

            <view class="status" v-if="info.status || info.status == 0" :style="{color: statusM[info.status].color}">{{statusM[info.status].name}}</view>

            <view class="name">{{ info.title || info.planTitle }}</view>

            <view class="status" v-if="info.status || info.status == 0" :style="{color: statusM[info.status].color}">

               {{statusM[info.status].name}}

            </view>

         </view>

         <view class="line">

            <view class="la">任务日期：</view>

            <view class="val" v-if="info.startDate && info.endDate">{{ info.startDate.slice(0, 11) }} 至

               {{ info.endDate.slice(0, 11) }}</view>

            <view class="val" v-if="info.startDate">{{ info.startDate.slice(0, 10) }}</view>

         </view>

         <view class="line">

            <view class="la">执行时间：</view>

            <view class="val" v-if="info.startDate && info.endDate">{{ info.startDate.slice(11,16) }} 至

               {{ info.endDate.slice(11, 16) }}</view>

               {{ info.endDate.slice(11, 16) }}

            </view>

         </view>

         <view class="line">

            <view class="la">完成情况：</view>

            <view class="val">{{info.finishNum}}/{{info.patrolNum}}</view>

            <view class="val">{{info.finishNum || 0}}/{{info.patrolNum}}</view>

         </view>

      </view>

      <view class="title">巡检点列表({{list.length}})</view>

@@ -48,8 +50,12 @@
            </view>

         </view>

      </view>

      <view class="footer">

      <view class="footer" @click="openSc" v-if="flag">

         <view class="sub_btn">扫码巡检</view>

      </view>
      <!--  -->
      <view class="reader-box" @click="stopScan" v-if="isScaning">
         <view class="reader" id="reader"></view>
      </view>

   </view>

</template>

@@ -57,31 +63,95 @@
<script>

   import {

      ywPatrolDetail,

      ywPatrolTaskRecord

      ywPatrolTaskRecord,
      getPointRecordByCode

   } from '@/api'

   import dayjs from 'dayjs';

   import {

      Html5Qrcode

   } from 'html5-qrcode';

   export default {

      data() {

         return {

            id: '',

            info: {},

            list: [],
            statusM: [
               { color: '#4593f7', name: '待开始' },
               { color: '#73e09a', name: '进行中' },
               { color: '#f1a93f', name: '已超期' },
               { color: '#b9b9b9', name: '已处理' },
            ]

            list: [],

            flag: false,

            statusM: [{

                  color: '#4593f7',

                  name: '待开始'

               },

               {

                  color: '#73e09a',

                  name: '进行中'

               },

               {

                  color: '#f1a93f',

                  name: '已超期'

               },

               {

                  color: '#b9b9b9',

                  name: '已处理'

               },

            ],

            html5Qrcode: null,

            isScaning: false,

         };

      },

      onLoad(option) {

         this.id = option.id

         this.getDetail()

      },
      onShow() {
         this.getDetail()
      },

      // onShow() {

      //    this.getDetail()

      // },

      methods: {

         openSc() {

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

                           getPointRecordByCode({

                              taskId: this.id,

                              pointCode: decodeText

                           }).then(ress => {

                              if (ress.data) {

                                 uni.navigateTo({

                                    url: '/pages/polling/point?id=' + ress.data.id

                                 })

                              } else {

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

                              }

                           })

                        }

                     },

                     (err) => {

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

                     }

                  );

               }

            });

         },



         stopScan() {

            console.log('停止扫码')

            this.isScaning = false;

            if (this.html5Qrcode) {

               this.html5Qrcode.stop();

            }

         },

         itemClick(item) {

            if (!this.flag) return

            uni.navigateTo({

               url: '/pages/polling/point?id=' + item.id

            })

@@ -92,6 +162,9 @@
            } = this

            ywPatrolDetail(id).then(res => {

               this.info = res.data

               let time = new Date(res.data.startDate).getTime()

               console.log('res.data.startDate', new Date().getTime());

               this.flag = new Date().getTime() > time

            })

            ywPatrolTaskRecord({

               capacity: 999,

@@ -103,22 +176,26 @@
               this.list = res.data.records

            })

         },

         async startScan() {
               try {
                 const video = document.getElementById('video');
                 const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
                 video.srcObject = stream;
			
                 // 使用 QrScanner 解析
                 const qrScanner = new QrScanner(video, result => {
                   alert(`扫描结果: ${result}`);
                   qrScanner.stop(); // 停止扫码
                 });
                 qrScanner.start();
               } catch (err) {
                 console.error('打开摄像头失败:', err);
               }
             }
         async startScan() {

            try {

               const video = document.getElementById('video');

               const stream = await navigator.mediaDevices.getUserMedia({

                  video: {

                     facingMode: "environment"

                  }

               });

               video.srcObject = stream;



               // 使用 QrScanner 解析

               const qrScanner = new QrScanner(video, result => {

                  alert(`扫描结果: ${result}`);

                  qrScanner.stop(); // 停止扫码

               });

               qrScanner.start();

            } catch (err) {

               console.error('打开摄像头失败:', err);

            }

         }

      }

   }

</script>

@@ -170,9 +247,10 @@


            .status {

               color: $primaryColor;

            }
            .gray{
               color: gray;
            }



            .gray {

               color: gray;

            }

         }



@@ -208,9 +286,11 @@
            display: flex;

            padding: 20rpx 30rpx 0 16rpx;

            margin-bottom: 20rpx;

            .line{
               margin-bottom: 10rpx;


            .line {

               margin-bottom: 10rpx;

            }



            .icon {

               width: 10rpx;

               height: 148rpx;

@@ -234,9 +314,10 @@
                     offset-anchor: 28rpx;

                     color: $primaryColor;

                     font-weight: 400;

                  }
                  .gray{
                     color: #999999;
                  }



                  .gray {

                     color: #999999;

                  }

               }



@@ -280,4 +361,23 @@
      }



   }


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