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.
366 lines
8.9 KiB
366 lines
8.9 KiB
<template> |
|
<cs-page :selected="1" title="执法任务" isTab> |
|
<view class="page-container page"> |
|
<view class="drop-box"> |
|
<van-dropdown-menu active-color="#17C653"> |
|
<van-dropdown-item |
|
:value="queryParams.status" |
|
:options="getDropdownOption('task_state')" |
|
@change=" |
|
v => { |
|
querySelect(v, 'status') |
|
} |
|
" |
|
/> |
|
<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> |
|
</view> |
|
|
|
<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" |
|
color="#071437" |
|
></u-count-to> |
|
<text style="color: #071437; font-size: 24rpx">%</text> |
|
</template> |
|
</van-circle> |
|
</view> |
|
<view class="wd-flex wd-flex-col"> |
|
<text |
|
class="wd-font-800 wd-text-15" |
|
style=" |
|
padding-right: 3rem; |
|
margin-bottom: 4rpx; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
width: 432rpx; |
|
overflow: hidden; |
|
" |
|
> |
|
{{ task.title }} |
|
</text> |
|
<view class="wd-flex" style="margin-top: 4rpx"> |
|
<u-icon |
|
name="calendar" |
|
size="18" |
|
:color="task.status == '2' ? '#17C653' : '#78829D'" |
|
></u-icon> |
|
<text |
|
class="address wd-text-12" |
|
style="margin-left: 4rpx" |
|
:style="{ |
|
color: task.status == '2' ? '#17C653' : '#78829D' |
|
}" |
|
> |
|
于{{ |
|
$util.formatDate(task.endDate, 'YYYY年MM月DD日') |
|
}}结束 |
|
</text> |
|
</view> |
|
<view class="tagList" style="margin-top: 16rpx"> |
|
<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 [ |
|
{ value: '', text: keyMap[key] }, |
|
...this.dictMap[key].map(d => { |
|
return { |
|
value: d.id, |
|
text: d.tagName |
|
} |
|
}) |
|
] |
|
} else { |
|
return [ |
|
{ value: '', text: keyMap[key] }, |
|
...this.dictMap[key].map(d => { |
|
return { |
|
value: d.value, |
|
text: d.label |
|
} |
|
}) |
|
] |
|
} |
|
}, |
|
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; |
|
border: 1px solid var(--LightMode-Grey-Grey-100, #f9f9f9); |
|
&:active { |
|
background-color: $cs-color-touch; |
|
} |
|
.address { |
|
color: $uni-text-color-grey; |
|
} |
|
.audit { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
transform-origin: 50% 50%; |
|
transform: translateX(33px) translateY(9px) rotateZ(45deg); |
|
} |
|
.rate { |
|
position: relative; |
|
} |
|
} |
|
.drop-box { |
|
padding: 24rpx; |
|
border-bottom: 2rpx solid #f1f1f4; |
|
background-color: #fff; |
|
::v-deep .van-dropdown-menu { |
|
box-shadow: none; |
|
height: fit-content !important; |
|
font-size: 26rpx; |
|
padding: 12rpx 24rpx; |
|
} |
|
} |
|
|
|
::v-deep .u-list { |
|
padding: 24rpx; |
|
} |
|
|
|
::v-deep .u-count-num { |
|
font-size: 16px; |
|
font-family: 'WeChat Sans Std'; |
|
font-weight: 800; |
|
} |
|
</style>
|
|
|