<template>
<cs-page :selected="1" title="执法任务" isTab>
<view class="page-container page">
<van-dropdown-menu safe-area-tab-bar active-color="#17C653">
<van-dropdown-item
:value="queryParams.status"
:options="getDropdownOption('task_state')"
@change="
v => {
querySelect(v, 'status')
}
"
/>
<van-dropdown-item
:value="queryParams.priority"
:options="getDropdownOption('task_priority')"
@change="
v => {
querySelect(v, 'priority')
}
"
/>
<van-dropdown-item
:value="queryParams.zf_lx"
:options="getDropdownOption('zf_lx')"
@change="
v => {
querySelect(v, 'zf_lx')
}
"
/>
<van-dropdown-item
:value="queryParams.select_week"
:options="getDropdownOption('select_week')"
@change="
v => {
querySelect(v, 'select_week')
}
"
/>
</van-dropdown-menu>
<scroll-view
scroll-y="true"
:refresher-enabled="true"
@refresherrefresh="refresherrefresh"
:refresher-triggered="refresherTriggered"
@refresherpulling="refresherpulling"
@scrolltolower="loadMore"
class="list"
:enable-flex="true"
:style="{ height: `${listHeight}px` }"
>
<view
v-for="task in list"
:key="task.id"
class="wd-flex wd-items-center enterprise"
@click="goDetail(task.id)"
>
<view class="rate">
<van-circle
:value="task.status == '3' ? 0 : task.pace"
size="56"
type="2d"
color="#17c653"
:layer-color="task.status == '2' ? '#EAFFF1' : '#F1F1F4'"
:canvasId="`canvas-${task.id}`"
>
<template>
<u-count-to
:startVal="0"
:endVal="task.pace"
fontSize="16"
bold
duration="1000"
></u-count-to>
%
</template>
</van-circle>
</view>
<view class="wd-flex wd-flex-col" style="gap: 8rpx">
<text
class="wd-font-800 wd-text-15 wd-pb-2px"
style="padding-right: 3rem"
>
{{ task.title }}
</text>
<view class="wd-flex wd-pb-8px">
<u-icon
name="calendar"
size="18"
:color="task.status == '2' ? '#17C653' : '#78829D'"
></u-icon>
<text
class="address wd-text-12"
style="margin-left: 8rpx"
:style="{
color: task.status == '2' ? '#17C653' : '#78829D'
}"
>
于{{
$util.formatDate(task.endDate, 'YYYY年MM月DD日')
}}结束
</text>
</view>
<view class="tagList">
<view class="tag" v-if="task.deptName">
{{ task.deptName }}
</view>
<view class="tag">
{{
$dict.echoDicValue(dictMap.task_priority, task.priority)
}}
</view>
<view
class="tag"
v-for="(tag, index) in task.tagList"
:key="index"
>
{{ tag }}
</view>
</view>
</view>
<view class="audit">
<cs-dict-tag
:dict="dictMap.task_state"
:value="task.status"
></cs-dict-tag>
</view>
</view>
<u-loadmore
:status="load"
marginTop="12"
marginBottom="12"
v-if="load !== 'nomore'"
/>
<cs-emty marginTop="24" v-if="list.length == 0"></cs-emty>
</scroll-view>
</view>
</cs-page>
</template>
<script>
import {
getDictBatchByType,
getDeptTree,
getTagData
} from '@/api/system/dict.js'
import { TaskApi } from '@/api/task/index.js'
export default {
data() {
return {
queryParams: {
pageSize: 10,
pageNo: 1,
zf_lx: '',
priority: '',
status: '',
select_week: '',
tagList: ''
},
listHeight: 0,
refresherTriggered: false,
list: [],
load: 'loadmore',
dictMap: {}
}
},
async onLoad() {
await this.getDict()
},
onReady() {
this.getPageHeight()
this.queryEnterprise()
},
methods: {
getPageHeight() {
const query = uni.createSelectorQuery().in(this)
query
.select('.page')
.boundingClientRect(data => {
this.listHeight = data.height - 55 - 25
})
.exec()
},
async getList() {
uni.showToast({
title: '加载中',
mask: true,
icon: 'loading'
})
this.load = 'loading'
const res = await TaskApi.getList(this.queryParams)
this.list.push(
...res.data.list.map((i, index) => {
return {
...i,
pace: (i.taskFinishNum / i.taskExecNum) * 100
}
})
)
this.load = 'loadmore'
if (this.list.length == res.data.total) {
this.load = 'nomore'
}
uni.hideToast()
},
async getDict() {
const tags = await getTagData(['zf_lx'].join(','))
const dict = await getDictBatchByType({
type: ['select_week', 'task_state', 'task_priority'].join(',')
})
let tagMap = {}
tags.data.forEach(t => {
tagMap[t.tagCode] = t.children
})
this.dictMap = {
...tagMap,
...dict.data
}
},
getDropdownOption(key) {
if (!this.dictMap[key]) return []
const keyMap = {
task_priority: '按等级',
zf_lx: '按类型',
task_state: '按状态',
select_week: '按周期'
}
if (['zf_lx'].includes(key)) {
return [
...this.dictMap[key].map(d => {
return {
value: d.id,
text: d.tagName
}
}),
{ value: '', text: keyMap[key] }
]
} else {
return [
...this.dictMap[key].map(d => {
return {
value: d.value,
text: d.label
}
}),
{ value: '', text: keyMap[key] }
]
}
},
querySelect(v, key) {
this.queryParams[key] = v.detail
this.queryEnterprise()
},
queryEnterprise() {
this.queryParams.pageNo = 1
this.load = 'loadmore'
this.list = []
this.queryParams.tagList = [this.queryParams.zf_lx]
.filter(i => i != '')
.join()
this.getList()
},
loadMore() {
if (this.load == 'nomore') {
uni.showToast({
title: '没有更多了',
icon: 'none'
})
return
}
this.queryParams.pageNo++
this.getList()
},
refresherpulling() {
const that = this
if (!this.refresherTriggered) {
this.refresherTriggered = true
setTimeout(() => {
that.refresherTriggered = false
}, 1000)
}
},
refresherrefresh() {
this.resetQuery()
},
async resetQuery() {
this.queryParams = {
pageSize: 10,
pageNo: 1,
zf_lx: '',
priority: '',
status: '',
select_week: '',
tagList: ''
}
await this.queryEnterprise()
},
goDetail(id) {
uni.navigateTo({
url: `/sub/task/detail?id=${id}`
})
}
}
}
</script>
<style lang="scss" scoped>
.page-container {
height: 100%;
overflow: hidden;
}
.list {
padding: 0 24rpx;
}
.enterprise {
padding: 24rpx;
background-color: #fff;
border-radius: $cs-border-radius;
gap: 24rpx;
margin-top: 24rpx;
position: relative;
overflow: hidden;
font-size: 24rpx;
&:active {
background-color: $cs-color-touch;
}
.address {
color: $uni-text-color-grey;
}
.tagList {
margin-top: 16rpx;
display: flex;
gap: 8rpx;
color: $uni-text-color-grey;
display: flex;
.tag {
font-size: 24rpx;
display: flex;
padding: 4rpx 12rpx;
justify-content: center;
align-items: center;
border-radius: 4rpx;
background: #f9f9f9;
}
}
.audit {
position: absolute;
right: 0;
top: 0;
transform-origin: 50% 50%;
transform: translateX(28px) translateY(9px) rotateZ(45deg);
}
.rate {
position: relative;
}
}
::v-deep .van-dropdown-menu {
box-shadow: none;
height: 70rpx !important;
font-size: 26rpx;
border-bottom: 1px solid #f1f1f4;
}
::v-deep .u-list {
padding: 24rpx;
}
::v-deep .u-count-num {
font-size: 16px;
font-family: 'WeChat Sans Std';
font-weight: 800;
}
</style>