You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
402 lines
11 KiB
402 lines
11 KiB
<template>
|
|
<view>
|
|
<view class="screen">
|
|
<picker v-model="orgIndex" :range="orgList" range-key="label" data-key="orgIndex" @change="setVal">
|
|
<view class="picker">
|
|
<text>{{ orgIndex >= 0 ? orgList[orgIndex].label : '按组织' }}</text>
|
|
<image src="/static/subpages/statistics/images/down.png" mode="widthFix" />
|
|
</view>
|
|
</picker>
|
|
<picker :range="natureOptions" range-key="label" v-model="natureIndex" data-key="natureIndex" @change="setVal">
|
|
<view class="picker-type">
|
|
<text>{{ natureIndex >= 0 ? natureOptions[natureIndex].label : '按性质' }}</text>
|
|
<image src="/static/subpages/statistics/images/down2.png" mode="widthFix" />
|
|
</view>
|
|
</picker>
|
|
<picker :range="statusOptions" range-key="label" v-model="statusIndex" data-key="statusIndex" @change="setVal">
|
|
<view class="picker-type">
|
|
<text>{{ statusIndex >= 0 ? statusOptions[statusIndex].label : '按状态' }}</text>
|
|
<image src="/static/subpages/statistics/images/down2.png" mode="widthFix" />
|
|
</view>
|
|
</picker>
|
|
<view class="btn" @tap="onConfirm">筛选</view>
|
|
</view>
|
|
<scroll-view @scrolltolower="scrolltolower" scroll-y style="height: calc(100vh - 92rpx)" class="statistics-container">
|
|
<view class="card-list" v-for="(item, index) in list" :key="index">
|
|
<view class="content">
|
|
<view class="item" @tap="gotopage" :data-id="item.demandRecId" v-if="listType === '1'">
|
|
<view class="user-info">
|
|
<view class="name">
|
|
{{ item.reportUserName ? item.reportUserName : '' }}
|
|
{{ item.reportUserMobile ? item.reportUserMobile : '' }}
|
|
</view>
|
|
<view class="tag orange" v-if="item.status === '待响应'">待响应</view>
|
|
<view class="tag blue" v-if="item.status === 'assigned'">已指派服务</view>
|
|
<view class="tag green" v-if="item.status === 'finished'">已完成</view>
|
|
</view>
|
|
<view class="date">
|
|
<view class="type">{{ item.categoryAllName ? item.categoryAllName : '' }}</view>
|
|
<view class="time">{{ item.reportTime ? item.reportTime : '' }}</view>
|
|
</view>
|
|
<view class="describe">
|
|
{{ item.content ? item.content : '' }}
|
|
</view>
|
|
</view>
|
|
<view class="item" @tap="gotopage" :data-id="item.id" v-else>
|
|
<view class="user-info">
|
|
<view class="name">
|
|
{{ item.title ? item.title : '' }}
|
|
</view>
|
|
</view>
|
|
<view class="date">
|
|
<view class="type">{{ item.commonServiceTypeName ? item.commonServiceTypeName : '' }}</view>
|
|
<view class="time">{{ item.createdTime ? item.createdTime : '' }}</view>
|
|
</view>
|
|
<view class="describe">
|
|
{{ item.content ? item.content : '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { maporg, commonDemandList, userdemandList } from '../../../../../utils/statisticsApi';
|
|
export default {
|
|
data() {
|
|
return {
|
|
orgList: [],
|
|
orgIndex: 0,
|
|
natureIndex: 0,
|
|
|
|
natureOptions: [
|
|
{
|
|
value: '1',
|
|
label: '个性需求'
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '共性需求'
|
|
}
|
|
],
|
|
|
|
statusIndex: 0,
|
|
|
|
statusOptions: [
|
|
{
|
|
label: '按状态',
|
|
value: ''
|
|
},
|
|
{
|
|
label: '待响应',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '已指派服务',
|
|
value: '2'
|
|
},
|
|
{
|
|
label: '已完成',
|
|
value: '3'
|
|
}
|
|
],
|
|
|
|
list: [],
|
|
total: 0,
|
|
pageNo: 1,
|
|
pageSize: 20,
|
|
listType: '1',
|
|
label: ''
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.getOrg();
|
|
},
|
|
methods: {
|
|
setVal(e) {
|
|
this.setData({
|
|
[e.currentTarget.dataset.key]: e.detail.value
|
|
});
|
|
},
|
|
|
|
getOrg() {
|
|
maporg().then(async ({ data }) => {
|
|
let parent = {
|
|
value: data.id,
|
|
label: data.name,
|
|
level: data.level
|
|
};
|
|
this.setData({
|
|
orgList: [
|
|
parent,
|
|
...data.children.map((item) => {
|
|
return {
|
|
value: item.id,
|
|
label: item.name,
|
|
level: item.level
|
|
};
|
|
})
|
|
]
|
|
});
|
|
console.log(this.orgList, 'orgList');
|
|
this.getList();
|
|
});
|
|
},
|
|
|
|
onConfirm() {
|
|
this.setData({
|
|
list: [],
|
|
pageNo: 1
|
|
});
|
|
this.getList();
|
|
},
|
|
|
|
getList() {
|
|
if (this.natureOptions[this.natureIndex].value === '1') {
|
|
this.getPersonalityList();
|
|
} else {
|
|
this.getCommonnessList();
|
|
}
|
|
},
|
|
|
|
getPersonalityList() {
|
|
let params = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
orgId: this.orgList[this.orgIndex].value,
|
|
orgLevel: this.orgList[this.orgIndex].level,
|
|
status: this.statusIndex >= 0 ? this.statusOptions[this.statusIndex].value : ''
|
|
};
|
|
userdemandList(params).then((res) => {
|
|
this.setData({
|
|
list: this.list.concat(res.data.list),
|
|
total: res.data.total,
|
|
listType: '1'
|
|
});
|
|
});
|
|
},
|
|
|
|
getCommonnessList() {
|
|
let params = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
agencyId: this.orgList[this.orgIndex].value,
|
|
level: this.orgList[this.orgIndex].level,
|
|
status: this.statusIndex >= 0 ? this.statusOptions[this.statusIndex].value : ''
|
|
};
|
|
commonDemandList(params).then((res) => {
|
|
this.setData({
|
|
list: this.list.concat(res.data.list),
|
|
total: res.data.total,
|
|
listType: '2'
|
|
});
|
|
});
|
|
},
|
|
|
|
gotopage(e) {
|
|
uni.navigateTo({
|
|
url: '/subpages/statistics/pages/demand/detail/detail?id=' + e.currentTarget.dataset.id + '&type=' + this.listType
|
|
});
|
|
},
|
|
|
|
scrolltolower() {
|
|
if (this.list.length < this.total) {
|
|
this.setData({
|
|
pageNo: this.pageNo + 1
|
|
});
|
|
this.getList();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.screen {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
padding: 18rpx 22rpx;
|
|
}
|
|
|
|
.picker {
|
|
width: 200rpx;
|
|
margin-right: 10rpx;
|
|
height: 56rpx;
|
|
background: rgba(58, 128, 231, 0.16);
|
|
border: 1px solid #3a80e7;
|
|
border-radius: 28rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #3a80e7;
|
|
line-height: 56rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.picker-type image,
|
|
.picker image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
.picker-type text {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
width: calc(100% - 24rpx);
|
|
}
|
|
.picker-type {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
margin-right: 10rpx;
|
|
box-sizing: border-box;
|
|
width: 180rpx;
|
|
height: 56rpx;
|
|
background: rgba(193, 193, 193, 0.16);
|
|
border: 1px solid #dbdbdb;
|
|
border-radius: 28rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #c1c1c1;
|
|
line-height: 56rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 120rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
background: #3a80e7;
|
|
border-radius: 28rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
.statistics-container {
|
|
padding: 0 20rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card-list {
|
|
margin-top: 20rpx;
|
|
padding: 0 30rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.head {
|
|
border-bottom: 1px solid #eaeaea;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.month {
|
|
font-size: 54rpx;
|
|
font-weight: bold;
|
|
color: #3a80e7;
|
|
}
|
|
|
|
.month text {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.head-right {
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
}
|
|
|
|
.head-right .txt {
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.card-list .content .item {
|
|
padding: 30rpx 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
|
|
.card-list .content .item .user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-list .content .item .user-info .name {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
line-height: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.blue {
|
|
background: rgba(79, 148, 255, 0.14);
|
|
color: #4f94ff;
|
|
}
|
|
|
|
.orange {
|
|
background: rgba(255, 120, 60, 0.14);
|
|
color: #ff783c;
|
|
}
|
|
|
|
.green {
|
|
background: rgba(4, 184, 173, 0.14);
|
|
color: #04b8ad;
|
|
}
|
|
|
|
.red {
|
|
color: #fa1919;
|
|
background: rgba(255, 48, 27, 0.14);
|
|
}
|
|
|
|
.date {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 15rpx 0 29rpx;
|
|
}
|
|
|
|
.date .time {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #c1c1c1;
|
|
}
|
|
|
|
.date .type {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
|
|
.describe {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 46rpx;
|
|
}
|
|
</style>
|
|
|