<template>
|
<view class="main_app">
|
<!-- <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>
|
<!-- -->
|
<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,
|
getPointRecordByCode
|
} from '@/api'
|
import {
|
Html5Qrcode
|
} from 'html5-qrcode';
|
export default {
|
data() {
|
return {
|
param: {
|
queryStatus: '0,1'
|
},
|
list: [],
|
activeTab: 0,
|
selectAll: false,
|
page: 1,
|
|
statusM: {
|
0: '待开始',
|
1: '进行中',
|
2: '已超期',
|
3: '已完成',
|
4: '已取消',
|
},
|
html5Qrcode: null,
|
isScaning: false,
|
// activeItem: {}
|
};
|
},
|
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); //错误信息
|
}
|
);
|
}
|
});
|
},
|
|
stopScan() {
|
console.log('停止扫码')
|
this.isScaning = false;
|
if (this.html5Qrcode) {
|
this.html5Qrcode.stop();
|
}
|
},
|
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.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;
|
}
|
|
}
|
|
}
|
|
.head_wrap {
|
display: flex;
|
align-items: center;
|
|
.search_wrap {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 76rpx;
|
background: #F7F7F7;
|
border-radius: 38rpx;
|
padding-left: 30rpx;
|
|
input {
|
flex: 1;
|
}
|
|
.search {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
|
}
|
|
.scroll_Y {
|
height: calc(100vh - 130rpx);
|
}
|
|
.list {
|
|
.item {
|
display: flex;
|
// height: 290rpx;
|
padding: 30rpx 0;
|
border-bottom: 2rpx solid #E5E5E5;
|
&:nth-last-child(1){
|
border: none;
|
}
|
.icon {
|
width: 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;
|
}
|
}
|
}
|
}
|
}
|
|
.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>
|
