326 lines
9.6 KiB
Vue
326 lines
9.6 KiB
Vue
<template>
|
|
<view>
|
|
<statusNav returnColor="#c2c2c2" navBarTitle="人员状态"></statusNav>
|
|
<container-subgroup-two>
|
|
<view slot="content" style="margin: -30rpx;">
|
|
<view class="peopleManagement-input">
|
|
<input type="text" class="int" @confirm="callEv" v-model="keyword" placeholder="请输入关键字" placeholder-style="color:#999999;" />
|
|
<image class="search" @tap="callEv" src="../../static/iocn/ss.png" mode=""></image>
|
|
<view class="xian"></view>
|
|
</view>
|
|
<view class="peopleManagement-content pad-x50">
|
|
<view class="li" v-for="(item,index) in dataList">
|
|
<view class="head">
|
|
<view class="name" @click="listStateFun(item)">
|
|
<!-- 选中 -->
|
|
<view class="icon" v-if="!item.state"></view>
|
|
<!-- 未选中 -->
|
|
<image class="iconImg" v-else src="../../static/iocn/pxz.png" mode=""></image>
|
|
<view class="">
|
|
{{item.name}}<text :class="item.isJob ? 'cor' : 'cor1'">({{item.isJob ? '正在作业' : '空闲中'}})</text>
|
|
</view>
|
|
</view>
|
|
<view class="state">{{['未审核','已审核'][item.is_check]}}</view>
|
|
</view>
|
|
<view class="con">
|
|
<image class="img" :src="item.imgsrc" mode="aspectFill"></image>
|
|
<view class="text scal09">
|
|
<view class="code">
|
|
<view class="">编号: {{item.number}}</view>
|
|
<view class="iconCon">
|
|
<view v-for="(item1,index) in 5">
|
|
<image class="icon" v-if="index < item.rate" src="../../static/iocn/6.png" mode="aspectFill" ></image>
|
|
<image class="icon" v-else src="../../static/iocn/7.png" mode="aspectFill" ></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="p">
|
|
<view class="one">待处理：{{item.num}}单 </view>
|
|
<view class="">已处理：{{item.allnum}}单 </view>
|
|
</view>
|
|
<view class="address">当前定位：{{item.address}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="bottom-content">
|
|
联系电话： <text class="cor3" v-if="item.phone">{{$toolAll.tools.hideMPhone(item.phone,'x')}}</text>
|
|
</view>
|
|
<view class="bottom-content">
|
|
注册时间： <text class="cor3">{{item.time}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<pitera v-if="total == dataList.length && dataList.length" textStr="暂无更多人员列表"></pitera>
|
|
<nothing-page v-if="!dataList.length" content="暂无人员状态数据"></nothing-page>
|
|
<button class="submit-button" type="default" :style="{display: tianxuan ? 'flex' : 'none'}">派发工单</button>
|
|
</view>
|
|
</container-subgroup-two>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import statusNav from '../../components/status-nav.vue';
|
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
|
import pitera from '@/components/nothing/pitera.vue';
|
|
export default {
|
|
components: {
|
|
statusNav,
|
|
containerSubgroupTwo,
|
|
pitera
|
|
},
|
|
data() {
|
|
return {
|
|
dataList: [
|
|
// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:5,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
|
|
// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:3,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
|
|
// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:2,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
|
|
],
|
|
keyword:'',//关键字
|
|
page:1,
|
|
list_rows:20,
|
|
total:0,
|
|
tianxuan:''
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if(this.total!=this.dataList.length) {
|
|
this.page++;
|
|
this.checkList();
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.checkList();
|
|
},
|
|
methods: {
|
|
// 查询人员状态列表
|
|
checkList() {
|
|
let params = {
|
|
list_rows:this.list_rows,
|
|
page:this.page,
|
|
keyword:this.keyword
|
|
}
|
|
this.$requst.get('/universal/api.user/user_location',params).then(res=>{
|
|
if(res.code) {
|
|
this.total = res.data.total;
|
|
if(this.page==1) this.dataList = [];
|
|
if(res.data.data.length) {
|
|
res.data.data.forEach(item=>{
|
|
let obj = {
|
|
id:1,
|
|
name: item.name,
|
|
imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
number:'YG20211207-001',
|
|
rate:5,
|
|
num:item.pending_order,
|
|
allnum:item.processed_order,
|
|
address:item.address,
|
|
phone:item.phone,
|
|
time:item.register_time,
|
|
state: false,
|
|
isJob: item.is_working ? true : false,
|
|
is_check:item.is_check
|
|
}
|
|
this.dataList.push(obj);
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 调用查询事件
|
|
callEv() {
|
|
this.page = 1;
|
|
this.checkList();
|
|
},
|
|
listStateFun(item){
|
|
this.dataList.forEach(item1=>{item1.state = false})
|
|
item.state = !item.state;
|
|
item.state ? this.tianxuan = item.id : '';
|
|
console.log(this.tianxuan);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.submit-button {
|
|
position: fixed;
|
|
display: none;
|
|
bottom: 30rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 686rpx;
|
|
border-radius: 50rpx;
|
|
height: 90rpx;
|
|
background-color: #02A2ea;
|
|
line-height: 90rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 60rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
}
|
|
.peopleManagement-input {
|
|
width: 100%;
|
|
position: relative;
|
|
padding: 40rpx 16rpx;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF
|
|
}
|
|
|
|
.peopleManagement-input .int {
|
|
width: 100%;
|
|
background-color: #F7F7F7;
|
|
padding: 0 25rpx;
|
|
height: 67rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 36rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
.peopleManagement-input .xian {
|
|
width: 3rpx;
|
|
height: 35rpx;
|
|
position: absolute;
|
|
background-color: #EAEAEA;
|
|
right: 100rpx;
|
|
top: 50%;
|
|
margin-top: -14rpx;
|
|
}
|
|
.peopleManagement-input .search {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
position: absolute;
|
|
right: 43rpx;
|
|
top: 50%;
|
|
margin-top: -14rpx;
|
|
}
|
|
.peopleManagement-content .li {
|
|
background-color: #FFFFFF;
|
|
padding-right: 30rpx;
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .head {
|
|
display: flex;
|
|
padding: 22rpx 0rpx;
|
|
padding-left: 40rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
justify-content: space-between;
|
|
padding-right: 30rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .head .name {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #333333;
|
|
font-size: 27rpx;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.peopleManagement-content .li .head .name .icon {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-right: 12rpx;
|
|
border: solid #969696 2rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
}
|
|
.peopleManagement-content .li .head .name .iconImg{
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-right: 12rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
}
|
|
.cor {
|
|
color: #1c9bdb;
|
|
}
|
|
|
|
.cor1 {
|
|
color: #ff424d;
|
|
}
|
|
|
|
.peopleManagement-content .li .head .state {
|
|
color: #1c9bdb;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .con {
|
|
padding: 20rpx 0rpx;
|
|
padding-left: 52rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.peopleManagement-content .li .con .img {
|
|
width: 140rpx;
|
|
height: 130rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .con .text {
|
|
flex: 1;
|
|
margin-left: -14rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .con .text .iconCon {
|
|
font-size: 0rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.peopleManagement-content .li .con .text .icon {
|
|
width: 28rpx;
|
|
height: 26rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .con .text .code {
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #333333;
|
|
}
|
|
.peopleManagement-content .li .con .text .p{
|
|
color: #7a7979;
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
padding: 15rpx 0rpx;
|
|
}
|
|
|
|
.peopleManagement-content .li .con .text .p .one{
|
|
margin-right: 40rpx;
|
|
}
|
|
.peopleManagement-content .li .con .text .address{
|
|
color: #7a7979;
|
|
font-size: 24rpx;
|
|
}
|
|
.peopleManagement-content .li .bottom{
|
|
display: flex;
|
|
padding: 10rpx 0rpx;
|
|
padding-left: 40rpx;
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
padding-right: 22rpx;
|
|
justify-content: space-between;
|
|
}
|
|
.peopleManagement-content .li .bottom .cor3{
|
|
color: #666666;
|
|
}
|
|
.peopleManagement-content .li .bottom .bottom-content{
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
.peopleManagement-content .li .bottom .bottom-content:last-child{
|
|
text-align: right;
|
|
width: 48%;
|
|
}
|
|
.peopleManagement-content .li .bottom .bottom-content:first-child{
|
|
border-right: 2rpx dashed #eaeaea;
|
|
width: 52%;
|
|
}
|
|
</style>
|