386 lines
8.5 KiB
Vue
386 lines
8.5 KiB
Vue
<template>
|
|
<div class="list">
|
|
<!-- 统计 -->
|
|
<div class="content-box">
|
|
<div class="content-list">
|
|
<div class="list-item" v-for="(item, index) in staticName" :key="index">
|
|
<h3>{{ item.value }}</h3>
|
|
<p>{{ item.label }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 事件列表 -->
|
|
<div class="title">
|
|
<div class="title-name">事件列表</div>
|
|
<div class="title-type" @click="showGird = true">{{ status ? status : '全部类型' }}<u-icon name="arrow-down"></u-icon></div>
|
|
</div>
|
|
|
|
<template>
|
|
<AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
|
|
<template #custom>
|
|
<div class="card-top">
|
|
<div class="titles">{{ item.content }}</div>
|
|
|
|
<div class="types">
|
|
<div class="label label1">事件类型</div>
|
|
<div class="types-right">{{ item.groupName }}</div>
|
|
</div>
|
|
|
|
<div class="gards gird">
|
|
<div class="label">所属网格</div>
|
|
<div class="gards-right">{{ item.girdName }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'" v-if="item.eventStatus">
|
|
<span class="icon"></span>
|
|
<span>
|
|
{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</AiCard>
|
|
|
|
<div class="addbtn">
|
|
<div class="myreport" @click="linkTo('./myReply')">我的上报</div>
|
|
|
|
<div class="add" @click="addEvent">新增事件</div>
|
|
</div>
|
|
|
|
<AiEmpty v-if="!datas.length"></AiEmpty>
|
|
</template>
|
|
|
|
<u-select v-model="showGird" :list="$dict.getDict('clapEventStatusAll')" label-name="dictName" value-name="dictValue" @confirm="changeType" />
|
|
|
|
<div class="pad-b120" v-if="datas.length"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
currentTabs: 0,
|
|
current: 1,
|
|
pages: 0,
|
|
show: false,
|
|
girdId: '',
|
|
groupName: '',
|
|
girdNameText: '所属网格',
|
|
showType: false,
|
|
listType: [],
|
|
status: '',
|
|
eventStatus: '',
|
|
eventStatusText: '办件状态',
|
|
listTypeHistory: [],
|
|
listTypeAll: [],
|
|
groupType: [],
|
|
showGird: false,
|
|
staticName: [
|
|
{
|
|
label: '待处理',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '上报数',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '已办数',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '今日办结',
|
|
value: 0,
|
|
},
|
|
],
|
|
statisticsList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
|
|
loadmore() {
|
|
return this.pages <= this.current ? 'loading ' : 'nomore'
|
|
},
|
|
},
|
|
mounted() {
|
|
this.current = 1
|
|
this.getList()
|
|
this.getStaticList()
|
|
uni.$on('update', () => {
|
|
this.current = 1
|
|
this.getList()
|
|
this.getStaticList()
|
|
})
|
|
},
|
|
onShow() {
|
|
document.title = '矛盾调解'
|
|
},
|
|
created() {
|
|
this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory').then(() => {
|
|
this.getList()
|
|
this.getStaticList()
|
|
this.listTypeAll = this.$dict.getDict('clapEventStatusAll')
|
|
this.listTypeHistory = this.$dict.getDict('clapEventStatusHistory')
|
|
this.listType = this.listTypeAll
|
|
})
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.$http
|
|
.post(`/app/appclapeventinfo/listByGirdMember`, null, {
|
|
params: {
|
|
size: 10,
|
|
current: this.current,
|
|
searchType: this.currentTabs == 1 ? '1' : '0',
|
|
eventStatus: this.eventStatus,
|
|
girdId: this.girdId,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
|
this.pages = res.data.pages
|
|
this.$forceUpdate()
|
|
}
|
|
})
|
|
},
|
|
getStaticList() {
|
|
this.$http.post('/app/appclapeventinfo/clapEventStatisticByGirdMember').then((res) => {
|
|
if (res.code == 0) {
|
|
Object.keys(res.data).forEach(() => {
|
|
this.staticName[0].value = res.data['待处理']
|
|
this.staticName[1].value = res.data['上报数']
|
|
this.staticName[2].value = res.data['已办数']
|
|
this.staticName[3].value = res.data['今日办结']
|
|
})
|
|
this.$forceUpdate()
|
|
}
|
|
})
|
|
},
|
|
// 切换类型
|
|
changeType(e) {
|
|
this.status = e[0].label
|
|
this.eventStatus = e[0].value
|
|
this.current = 1
|
|
this.datas = []
|
|
this.getList()
|
|
},
|
|
|
|
// 新增事件
|
|
addEvent() {
|
|
uni.navigateTo({ url: './add' })
|
|
},
|
|
|
|
goDetail(item) {
|
|
uni.navigateTo({ url: `./detail?id=${item.id}` })
|
|
},
|
|
|
|
change(index) {
|
|
this.current = 1
|
|
this.datas = []
|
|
this.eventStatus = ''
|
|
this.girdId = ''
|
|
this.girdNameText = '所属网格'
|
|
this.eventStatusText = '办件状态'
|
|
this.currentTabs = index
|
|
if (index == 0) {
|
|
this.listType = this.listTypeAll
|
|
} else {
|
|
this.listType = this.listTypeHistory
|
|
}
|
|
this.getList()
|
|
},
|
|
|
|
linkTo(url) {
|
|
uni.navigateTo({ url })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
uni-page-body {
|
|
height: 100%;
|
|
}
|
|
.list {
|
|
height: 100%;
|
|
|
|
.content-box {
|
|
padding: 32px 30px 0px;
|
|
box-sizing: border-box;
|
|
|
|
.content-list {
|
|
display: flex;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
height: 240px;
|
|
|
|
.list-item {
|
|
width: 25%;
|
|
height: 80px;
|
|
text-align: center;
|
|
padding-top: 50px;
|
|
box-sizing: border-box;
|
|
|
|
h3 {
|
|
font-size: 64px;
|
|
color: #1e88e8;
|
|
}
|
|
|
|
p {
|
|
font-size: 28px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
padding: 0 30px;
|
|
.title-name {
|
|
font-size: 38px;
|
|
color: #333333;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.title-type {
|
|
font-size: 26px;
|
|
color: #666666;
|
|
padding-left: 60px;
|
|
}
|
|
}
|
|
|
|
::v-deep .AiTopFixed .content {
|
|
padding: 0;
|
|
}
|
|
::v-deep .AiCard {
|
|
background: #f3f6f9;
|
|
padding: 24px 30px 0;
|
|
|
|
.start {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
|
|
.card-top {
|
|
padding: 32px;
|
|
.titles {
|
|
margin-bottom: 34px;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 1.4;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.types,
|
|
.gards {
|
|
display: flex;
|
|
margin-top: 8px;
|
|
font-size: 26px;
|
|
width: 100%;
|
|
.types-right,
|
|
.gards-right {
|
|
width: calc(100% - 120px);
|
|
color: #333333;
|
|
}
|
|
.label1 {
|
|
width: 120px;
|
|
}
|
|
.label {
|
|
width: 120px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status {
|
|
padding: 32px;
|
|
border-top: 1px solid #dddddd;
|
|
.icon {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.status0 {
|
|
color: #ff883c;
|
|
.icon {
|
|
background: #ff883c;
|
|
}
|
|
}
|
|
|
|
.status1 {
|
|
color: #1aaaff;
|
|
.icon {
|
|
background: #1aaaff;
|
|
}
|
|
}
|
|
|
|
.status2 {
|
|
color: #42d784;
|
|
.icon {
|
|
background: #42d784;
|
|
}
|
|
}
|
|
|
|
.status3 {
|
|
color: #ff4466;
|
|
.icon {
|
|
background: #ff4466;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.addbtn {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: inset 0px 1px 0px 0px #dddddd;
|
|
z-index: 999;
|
|
.myreport {
|
|
background-color: #ffffff;
|
|
width: 40%;
|
|
color: #333;
|
|
}
|
|
.add {
|
|
background-color: #3975c6;
|
|
width: 60%;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.pad-b120 {
|
|
background-color: #f3f6f9;
|
|
padding-bottom: 140px;
|
|
}
|
|
}
|
|
</style>
|