18 changed files with 635 additions and 124 deletions
@ -1,13 +1,294 @@ |
|||||||
<template> |
<template> |
||||||
<cs-page :selected="1" isTab></cs-page> |
<cs-page :selected="1" title="执法任务" isTab> |
||||||
|
<view class="page-container"> |
||||||
|
<van-dropdown-menu safe-area-tab-bar active-color="#17C653"> |
||||||
|
<van-dropdown-item |
||||||
|
:value="queryParams.dept" |
||||||
|
:options="getDropdownOption('dept')" |
||||||
|
@change=" |
||||||
|
v => { |
||||||
|
querySelect(v, 'dept') |
||||||
|
} |
||||||
|
" |
||||||
|
/> |
||||||
|
<van-dropdown-item |
||||||
|
:value="queryParams.hy" |
||||||
|
:options="getDropdownOption('hy')" |
||||||
|
@change=" |
||||||
|
v => { |
||||||
|
querySelect(v, 'hy') |
||||||
|
} |
||||||
|
" |
||||||
|
/> |
||||||
|
<van-dropdown-item |
||||||
|
:value="queryParams.st" |
||||||
|
:options="getDropdownOption('st')" |
||||||
|
@change=" |
||||||
|
v => { |
||||||
|
querySelect(v, 'st') |
||||||
|
} |
||||||
|
" |
||||||
|
/> |
||||||
|
<van-dropdown-item |
||||||
|
:value="queryParams.wr" |
||||||
|
:options="getDropdownOption('wr')" |
||||||
|
@change=" |
||||||
|
v => { |
||||||
|
querySelect(v, 'wr') |
||||||
|
} |
||||||
|
" |
||||||
|
/> |
||||||
|
</van-dropdown-menu> |
||||||
|
<scroll-view |
||||||
|
scroll-y="true" |
||||||
|
:refresher-enabled="true" |
||||||
|
@refresherrefresh="refresherrefresh" |
||||||
|
:refresher-triggered="refresherTriggered" |
||||||
|
@refresherpulling="refresherpulling" |
||||||
|
@scrolltolower="loadMore" |
||||||
|
class="list" |
||||||
|
> |
||||||
|
<view |
||||||
|
v-for="enterprise in list" |
||||||
|
:key="enterprise.id" |
||||||
|
class="wd-flex wd-items-center enterprise" |
||||||
|
@click="goDetail(enterprise.id)" |
||||||
|
> |
||||||
|
<van-circle :value="Math.random() * 100" size="56" color="#17c653" layer-color="#F1F1F4"> |
||||||
|
<template> |
||||||
|
<u-count-to :startVal="0" :endVal="Math.random() * 100" fontSize="16" bold duration="1000"></u-count-to> |
||||||
|
% |
||||||
|
</template> |
||||||
|
</van-circle> |
||||||
|
<view class="wd-flex wd-flex-col" style="gap: 4px"> |
||||||
|
<text class="wd-font-800 wd-text-15">{{ enterprise.enterprisesName }}</text> |
||||||
|
<text class="address wd-text-12">{{ enterprise.address }}</text> |
||||||
|
<view class="tagList"> |
||||||
|
<view class="tag" v-for="(tag, index) in enterprise.tagList" :key="index"> |
||||||
|
{{ tag }} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
class="audit" |
||||||
|
v-if="enterprise.audit != 2" |
||||||
|
:style="{ color: enterprise.audit == 1 ? '#F6B100' : '#ea000c', backgroundColor: '#FFF8DD' }" |
||||||
|
> |
||||||
|
{{ $dict.echoDicValue(dictMap.user_audit_type, enterprise.audit) }} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<u-loadmore :status="load" marginTop="20" /> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
</cs-page> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import { getEnterPriseList } from '@/api/enterprise/index.js' |
||||||
|
import { getDictBatchByType, getDeptTree, getTagData } from '@/api/system/dict.js' |
||||||
export default { |
export default { |
||||||
data() { |
data() { |
||||||
return {} |
return { |
||||||
} |
queryParams: { |
||||||
|
pageSize: 10, |
||||||
|
pageNo: 1, |
||||||
|
qy: '', |
||||||
|
hy: '', |
||||||
|
st: '', |
||||||
|
wr: '', |
||||||
|
dept: '', |
||||||
|
tagList: '' |
||||||
|
}, |
||||||
|
refresherTriggered: false, |
||||||
|
list: [], |
||||||
|
load: 'loadmore', |
||||||
|
dictMap: {} |
||||||
|
} |
||||||
|
}, |
||||||
|
async onLoad() { |
||||||
|
await this.getDict() |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.queryEnterprise() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async getList() { |
||||||
|
uni.showToast({ |
||||||
|
title: '加载中', |
||||||
|
mask: true, |
||||||
|
icon: 'loading' |
||||||
|
}) |
||||||
|
this.load = 'loading' |
||||||
|
const res = await getEnterPriseList(this.queryParams) |
||||||
|
this.list.push(...res.data.list) |
||||||
|
this.load = 'loadmore' |
||||||
|
if (this.list.length == res.data.total) { |
||||||
|
this.load = 'nomore' |
||||||
|
} |
||||||
|
uni.hideToast() |
||||||
|
}, |
||||||
|
async getDict() { |
||||||
|
const tags = await getTagData(['qy', ' hy', 'st', 'wr'].join(',')) |
||||||
|
const dict = await getDictBatchByType({ type: ['user_audit_type'].join(',') }) |
||||||
|
const dept = await getDeptTree() |
||||||
|
let tagMap = {} |
||||||
|
tags.data.forEach(t => { |
||||||
|
tagMap[t.tagCode] = t.children |
||||||
|
}) |
||||||
|
this.dictMap = { |
||||||
|
...tagMap, |
||||||
|
...dict.data, |
||||||
|
dept: dept.data.map(i => { |
||||||
|
return { |
||||||
|
...i, |
||||||
|
text: i.name, |
||||||
|
value: i.id |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
getDropdownOption(key) { |
||||||
|
if (!this.dictMap[key]) return [] |
||||||
|
const keyMap = { |
||||||
|
qy: '区域', |
||||||
|
hy: '行业', |
||||||
|
st: '生态', |
||||||
|
wr: '污染', |
||||||
|
dept: '全部部门' |
||||||
|
} |
||||||
|
if (key == 'dept') { |
||||||
|
return [...this.dictMap[key], { value: '', text: keyMap[key] }] |
||||||
|
} else { |
||||||
|
return [ |
||||||
|
...this.dictMap[key].map(d => { |
||||||
|
return { |
||||||
|
value: d.id, |
||||||
|
text: d.tagName |
||||||
|
} |
||||||
|
}), |
||||||
|
{ 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.qy, this.queryParams.hy, this.queryParams.st, this.queryParams.wr] |
||||||
|
.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, |
||||||
|
qy: '', |
||||||
|
hy: '', |
||||||
|
st: '', |
||||||
|
wr: '', |
||||||
|
dept: '', |
||||||
|
tagList: '' |
||||||
|
} |
||||||
|
await this.queryEnterprise() |
||||||
|
}, |
||||||
|
goDetail(id) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: `/sub/task/detail?id=${id}` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"></style> |
<style lang="scss" scoped> |
||||||
|
.page-container { |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.list { |
||||||
|
height: 75vh; |
||||||
|
padding: 12px; |
||||||
|
} |
||||||
|
.enterprise { |
||||||
|
padding: 12px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: $cs-border-radius; |
||||||
|
gap: 12px; |
||||||
|
margin-top: 12px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
font-size: 12px; |
||||||
|
.address { |
||||||
|
color: $uni-text-color-grey; |
||||||
|
} |
||||||
|
.tagList { |
||||||
|
margin-top: 8px; |
||||||
|
display: flex; |
||||||
|
gap: 4px; |
||||||
|
color: $uni-text-color-grey; |
||||||
|
display: flex; |
||||||
|
.tag { |
||||||
|
font-size: 12px; |
||||||
|
display: flex; |
||||||
|
padding: 2px 6px; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 2px; |
||||||
|
background: #f9f9f9; |
||||||
|
} |
||||||
|
} |
||||||
|
.audit { |
||||||
|
position: absolute; |
||||||
|
right: -19px; |
||||||
|
top: 6px; |
||||||
|
transform: rotateZ(45deg); |
||||||
|
transform-origin: 50% 50%; |
||||||
|
padding: 4px 20px; |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
::v-deep .van-dropdown-menu { |
||||||
|
box-shadow: none; |
||||||
|
height: 35px; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep .u-list { |
||||||
|
padding: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep .u-count-num { |
||||||
|
font-size: 16px; |
||||||
|
font-family: 'WeChat Sans Std'; |
||||||
|
font-weight: 800; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 254 KiB |
@ -1 +1,62 @@ |
|||||||
@import '../common/index.wxss';.van-dropdown-menu{background-color:var(--dropdown-menu-background-color,#fff);box-shadow:var(--dropdown-menu-box-shadow,0 2px 12px hsla(210,1%,40%,.12));display:flex;height:var(--dropdown-menu-height,50px);-webkit-user-select:none;user-select:none}.van-dropdown-menu__item{align-items:center;display:flex;flex:1;justify-content:center;min-width:0}.van-dropdown-menu__item:active{opacity:.7}.van-dropdown-menu__item--disabled:active{opacity:1}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--dropdown-menu-title-disabled-text-color,#969799)}.van-dropdown-menu__title{box-sizing:border-box;color:var(--dropdown-menu-title-text-color,#323233);font-size:var(--dropdown-menu-title-font-size,15px);line-height:var(--dropdown-menu-title-line-height,18px);max-width:100%;padding:var(--dropdown-menu-title-padding,0 24px 0 8px);position:relative}.van-dropdown-menu__title:after{border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:3px;content:"";margin-top:-5px;opacity:.8;position:absolute;right:11px;top:50%;transform:rotate(-45deg)}.van-dropdown-menu__title--active{color:var(--dropdown-menu-title-active-text-color,#ee0a24)}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)} |
@import '../common/index.wxss'; |
||||||
|
|
||||||
|
.van-dropdown-menu { |
||||||
|
background-color: var(--dropdown-menu-background-color, #fff); |
||||||
|
box-shadow: var(--dropdown-menu-box-shadow, 0 2px 12px hsla(210, 1%, 40%, .12)); |
||||||
|
display: flex; |
||||||
|
height: var(--dropdown-menu-height, 50px); |
||||||
|
-webkit-user-select: none; |
||||||
|
user-select: none |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__item { |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
justify-content: center; |
||||||
|
min-width: 0 |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__item:active { |
||||||
|
opacity: .7 |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__item--disabled:active { |
||||||
|
opacity: 1 |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__item--disabled .van-dropdown-menu__title { |
||||||
|
color: var(--dropdown-menu-title-disabled-text-color, #969799) |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__title { |
||||||
|
box-sizing: border-box; |
||||||
|
color: var(--dropdown-menu-title-text-color, #323233); |
||||||
|
font-size: var(--dropdown-menu-title-font-size, 15px); |
||||||
|
line-height: var(--dropdown-menu-title-line-height, 18px); |
||||||
|
max-width: 100%; |
||||||
|
padding: var(--dropdown-menu-title-padding, 0 24px 0 8px); |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__title:after { |
||||||
|
border-color: transparent transparent currentcolor currentcolor; |
||||||
|
border-style: solid; |
||||||
|
border-width: 3px; |
||||||
|
content: ""; |
||||||
|
margin-top: -5px; |
||||||
|
opacity: .8; |
||||||
|
position: absolute; |
||||||
|
right: 11px; |
||||||
|
top: 50%; |
||||||
|
transform: rotate(-45deg) |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__title--active { |
||||||
|
color: var(--dropdown-menu-title-active-text-color, #ee0a24) |
||||||
|
} |
||||||
|
|
||||||
|
.van-dropdown-menu__title--down:after { |
||||||
|
margin-top: -1px; |
||||||
|
transform: rotate(135deg) |
||||||
|
} |
||||||
Loading…
Reference in new issue