Merge remote-tracking branch 'origin/master'

renkang

2025-01-03 ccf28d1fed1aa2e5437dbe64b5133ba1cbde6ec7

 h5/pages/polling/task.vue

@@ -1,173 +1,261 @@
<template>

   <view class="main_app">

<!--       <view class="head_wrap">

      <!--       <view class="head_wrap">

         <view class="search_wrap">

            <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>

            <input v-model="param.keyword" @confirm="getList()" type="text" placeholder="搜索楼宇/房间名称" placeholder-class="placeholder9" />

         </view>

      </view> -->
      <!--  -->
      <view class="tabs">
         <view class="tab" :class="{active: param.queryStatus == '0,1'}" @click="tabsClick('0,1')">
            <text>待处理</text>
            <text class="border"></text>
         </view>
         <view class="tab" :class="{active: param.queryStatus == 3}" @click="tabsClick(3)">
            <text>已处理</text>
            <text class="border"></text>
         </view>
         <view class="tab" @click="allClick">
            <view class="name">
               <image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>
               <image v-else class="icon" src="@/static/check.png" mode=""></image>
               <text>查看全部</text>
            </view>
            <text class="border"></text>
         </view>
      </view>

      </view> -->

      <!--  -->

      <view class="list">

         <view class="item" v-for="item in list" @click="itemClick(item)">

            <image v-if="item.status == 0 || item.status == 1" src="@/static/side/xunjianed.png" class="icon"></image>
            <image v-else src="@/static/side/xunjian.png" class="icon"></image>

            <view class="content">

               <view class="name_wrap line">

                  <view class="name">{{item.planTitle}}</view>

                  <view class="status" :class="{
                     green: item.status == 1,
                     red: item.status == 2,
                     gray: item.status == 3 || item.status == 4
                  }">{{statusM[item.status]}}</view>

               </view>

               <view class="line" v-if="item.startDate">任务日期：{{ item.startDate.slice(0, 11) }}</view>

               <view class="line">执行时间：{{ item.startDate.slice(11, 16) }} 至 {{ item.endDate.slice(11, 16) }}</view>
               <view class="line">
                  <view>完成情况：{{item.finishNum || 0}}/{{item.patrolNum}}</view>
                  <view class="btn">
                     <image src="@/static/side/ic_saoma@2x.png" class="saoma" mode=""></image>
                     <view>扫码巡检</view>
                  </view>
               </view>

      <view class="tabs">

         <view class="tab" :class="{active: param.queryStatus == '0,1'}" @click="tabsClick('0,1')">

            <text>待处理</text>

            <text class="border"></text>

         </view>

         <view class="tab" :class="{active: param.queryStatus == 3}" @click="tabsClick(3)">

            <text>已处理</text>

            <text class="border"></text>

         </view>

         <view class="tab" @click="allClick">

            <view class="name">

               <image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>

               <image v-else class="icon" src="@/static/check.png" mode=""></image>

               <text>查看全部</text>

            </view>

            <text class="border"></text>

         </view>

      </view>

      <!--  -->

      <scroll-view scroll-y="true" class="scroll_Y" @scrolltolower="scrolltolower">

         <view class="list">

            <view class="item" v-for="item in list">

               <image @click="itemClick(item)" v-if="item.status == 0 || item.status == 1" src="@/static/side/xunjianed.png" class="icon"></image>

               <image @click="itemClick(item)" v-else src="@/static/side/xunjian.png" class="icon"></image>

               <view class="content">

                  <view class="name_wrap line">

                     <view class="name" @click="itemClick(item)">{{item.planTitle}}</view>

                     <view class="status" @click="itemClick(item)" :class="{

                        green: item.status == 1,

                        red: item.status == 2,

                        gray: item.status == 3 || item.status == 4

                     }">{{statusM[item.status]}}</view>

                  </view>

                  <view class="line" @click="itemClick(item)" v-if="item.startDate">任务日期：{{ item.startDate.slice(0, 11) }}</view>

                  <view class="line" @click="itemClick(item)">执行时间：{{ item.startDate.slice(11, 16) }} 至 {{ item.endDate.slice(11, 16) }}</view>

                  <view class="line">

                     <view @click="itemClick(item)">完成情况：{{item.finishNum || 0}}/{{item.patrolNum}}</view>

                     <view v-if="param.queryStatus == '0,1' && item.flag && (item.status == 0 || item.status == 1)" class="btn" @click="openSc(item)">

                        <image src="@/static/side/ic_saoma@2x.png" class="saoma" mode=""></image>

                        <view>扫码巡检</view>

                     </view>

                  </view>

               </view>

            </view>

            <view v-if="list.length == 0" class="empty_wrap">
               <image src="@/static/empty.png" mode=""></image>
               <view class="">暂无数据</view>
            </view>
         </view>

      </scroll-view>



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

   </view>

</template>



<script>
   import { ywPatrolTaskPost } from '@/api'

<script>

   import {

      ywPatrolTaskPost,
      getPointRecordByCode

   } from '@/api'
   import {
      Html5Qrcode
   } from 'html5-qrcode';

   export default {

      data() {

         return {

            param: {
               queryStatus: '0,1'
            param: {

               queryStatus: '0,1'

            },

            list: [],

            activeTab: 0,

            selectAll: false,

            page: 1,



            statusM: {

               0: '待开始',

               1: '进行中',

               2: '已超期',

               3: '已完成',

               4: '已取消',

            },
            list: [],
            activeTab: 0,
            selectAll: false,
            page: 1,
				
            statusM: {
               0: '待开始',
               1: '进行中',
               2: '已超期',
               3: '已完成',
               4: '已取消',
            }

            html5Qrcode: null,
            isScaning: false,
            // activeItem: {}

         };

      },
      onLoad() {
         this.getList()
      },
      onReachBottom() {
         const {total,list} = this
         if (list.length < total) {
            this.page = this.page + 1
            this.getList()
         } else {
            this.showToast('暂无更多数据')
         }
      },

      methods: {

         tabsClick(val) {
            this.param.status = val
            this.page = 1
            this.list = []
            this.getList()
      onShow() {
         this.page = 1
         this.list = []

         this.getList()

      },

      methods: {
         openSc(item) {
            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: item.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);  //错误信息
                     }
                  );
               }
            });
         },
         allClick() {
            this.selectAll = !this.selectAll
            this.list = []
            this.page = 1
            this.getList()
			
         stopScan() {
            console.log('停止扫码')
            this.isScaning = false;
            if (this.html5Qrcode) {
               this.html5Qrcode.stop();
            }
         },
         itemClick(item) {
            uni.navigateTo({
               url: '/pages/polling/detail?id=' + item.id
            })
         },
         getList() {
            const { page, param, selectAll } = this
            ywPatrolTaskPost({
               model: {...param, dealUserId: selectAll ? '' : uni.getStorageSync('userInfo').id, },
               page,
               capacity: 10
            }).then(res => {
         scrolltolower() {
            const {
               total,
               list
            } = this
            if (list.length < total) {
               this.page = this.page + 1
               this.getList()
            } else {
               this.showToast('暂无更多数据')
            }
         },

         tabsClick(val) {

            this.param.queryStatus = val

            this.page = 1

            this.list = []

            this.getList()

         },

         allClick() {

            this.selectAll = !this.selectAll

            this.list = []

            this.page = 1

            this.getList()

         },

         itemClick(item) {

            uni.navigateTo({

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

            })

         },

         getList() {

            const {

               page,

               param,

               selectAll

            } = this

            ywPatrolTaskPost({

               model: {

                  ...param,

                  dealUserId: selectAll ? '' : uni.getStorageSync('userInfo').id,

               },

               page,

               capacity: 10

            }).then(res => {

               this.list = [...this.list, ...res.data.records]
               this.total = res.data.total
            })
               this.list.forEach(item => {
               let time = new Date(item.startDate).getTime()
               item.flag = new Date().getTime() > time
               })

               this.total = res.data.total

            })

         }

      }

   }

</script>



<style lang="scss" scoped>
   .main_app{
      padding: 0 30rpx;
   }
   .tabs{
      display: flex;
      width: 750rpx;
      margin: 12rpx -30rpx 0;
      border-bottom: 1rpx solid #E5E5E5;
      .tab{
         font-size: 30rpx;
         color: #666666;
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-end;
         height: 88rpx;
         .name{
            display: flex;
            align-items: center;
         }
         .icon{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
         }
         .border{
            width: 54rpx;
            height: 6rpx;
            background-color: #fff;
            border-radius: 3rpx;
            margin-top: 24rpx;
         }
      }
      .active{
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         .border{
            background-color: $primaryColor;
         }
			
      }
		
<style lang="scss" scoped>

   .main_app {

      padding: 0 30rpx;

   }



   .tabs {

      display: flex;

      width: 750rpx;

      margin: 12rpx -30rpx 0;

      border-bottom: 1rpx solid #E5E5E5;



      .tab {

         font-size: 30rpx;

         color: #666666;

         flex: 1;

         display: flex;

         flex-direction: column;

         align-items: center;

         justify-content: flex-end;

         height: 88rpx;



         .name {

            display: flex;

            align-items: center;

         }



         .icon {

            width: 28rpx;

            height: 28rpx;

            margin-right: 10rpx;

         }



         .border {

            width: 54rpx;

            height: 6rpx;

            background-color: #fff;

            border-radius: 3rpx;

            margin-top: 24rpx;

         }

      }



      .active {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;



         .border {

            background-color: $primaryColor;

         }



      }



   }



   .head_wrap {

      display: flex;

      align-items: center;

@@ -180,9 +268,11 @@
         background: #F7F7F7;

         border-radius: 38rpx;

         padding-left: 30rpx;

         input{
            flex: 1;


         input {

            flex: 1;

         }



         .search {

            width: 28rpx;

            height: 28rpx;

@@ -191,72 +281,108 @@


   }



   .list {

   .scroll_Y {

      height: calc(100vh - 130rpx);

   }



   .list {
		
      .item {

         display: flex;

         // height: 290rpx;
         padding: 30rpx 0;
         // height: 290rpx;

         padding: 30rpx 0;

         border-bottom: 2rpx solid #E5E5E5;

         &:nth-last-child(1){
            border: none;
         }

         .icon {

            width: 80rpx;

            height: 80rpx;
            height: 80rpx;

            margin-right: 24rpx;

         }



         .content {

            flex: 1;
            color: #666666;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .line{
               margin-bottom: 20rpx;
               display: flex;
               justify-content: space-between;
               align-items: center;
               .btn{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 180rpx;
                  height: 60rpx;
                  background: $primaryColor;
                  color: #fff;
                  font-size: 26rpx;
                  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,104,255,0.3);
                  border-radius: 30rpx;
                  .saoma{
                     width: 28rpx;
                     height: 28rpx;
                     margin-right: 8rpx;
                  }
               }
               &:nth-last-child(1){
                  margin-bottom: 0;
               }
            }
            .name_wrap{
               display: flex;
               justify-content: space-between;
               align-items: center;
               .name{
                  display: flex;
                  align-items: flex-end;
                  font-weight: 600;
                  font-size: 34rpx;
                  color: #222222;
               }
               .status{
                  color: $primaryColor;
               }
               .green{
                  color: #0ADE79;
               }
               .gray{
                  color: #999999;
               }
            flex: 1;

            color: #666666;

            display: flex;

            flex-direction: column;

            justify-content: space-between;



            .line {

               margin-bottom: 20rpx;

               display: flex;

               justify-content: space-between;

               align-items: center;



               .btn {

                  display: flex;

                  align-items: center;

                  justify-content: center;

                  width: 180rpx;

                  height: 60rpx;

                  background: $primaryColor;

                  color: #fff;

                  font-size: 26rpx;

                  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 104, 255, 0.3);

                  border-radius: 30rpx;



                  .saoma {

                     width: 28rpx;

                     height: 28rpx;

                     margin-right: 8rpx;

                  }

               }



               &:nth-last-child(1) {

                  margin-bottom: 0;

               }

            }



            .name_wrap {

               display: flex;

               justify-content: space-between;

               align-items: center;



               .name {

                  display: flex;

                  align-items: flex-end;

                  font-weight: 600;

                  font-size: 34rpx;

                  color: #222222;

               }



               .status {

                  color: $primaryColor;

               }



               .green {

                  color: #0ADE79;

               }



               .gray {

                  color: #999999;

               }

            }

         }

      }

   }


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