大屏
This commit is contained in:
yanran200730
@@ -24,7 +24,7 @@
|
||||
</div>
|
||||
<div class="left-item__bottom">
|
||||
<span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
|
||||
<span>成员：{{ item.allGridMemberCount }}</span>
|
||||
<span>成员：{{ item.allWXMemberCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,16 +144,44 @@
|
||||
<div class="right-middle">
|
||||
<AiDvPanel style="width: 100%" border="border6" title="综合概况图">
|
||||
<div class="right-left__total AppQxnDv-total">
|
||||
<div class="item" v-for="(item, index) in 5" :key="index">
|
||||
<h2>分局数量</h2>
|
||||
<div class="item">
|
||||
<h2>警格上报事件</h2>
|
||||
<div class="item-bottom">
|
||||
<span>726,079</span>
|
||||
<i>个</i>
|
||||
<span>{{ middleTotalInfo['警格累计上报'] }}</span>
|
||||
<i>条</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>居民上报事件</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ middleTotalInfo['居民累计上报'] }}</span>
|
||||
<i>条</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>今日待处理</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ middleTotalInfo['今日上报'] - middleTotalInfo['今日办结'] }}</span>
|
||||
<i>条</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>今日办理中</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ middleTotalInfo['今日上报'] - middleTotalInfo['今日办结'] }}</span>
|
||||
<i>条</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>今日已办结</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ middleTotalInfo['今日办结'] }}</span>
|
||||
<i>条</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<DvMap :instance="instance" style="width: 100%; height: 356px;"></DvMap>
|
||||
<DvMap :instance="instance" style="width: 100%; height: 356px;" type="1"></DvMap>
|
||||
</div>
|
||||
<div class="right-middle__bottom">
|
||||
<div class="AppQxnDv-title">
|
||||
@@ -225,59 +253,45 @@
|
||||
<h2>事件详情</h2>
|
||||
</div>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShow = false" />
|
||||
<h3>咨询如何报考摩托车驾驶</h3>
|
||||
<h3 :title="eventInfo.desc">{{ eventInfo.desc }}</h3>
|
||||
<div class="info-wrapper">
|
||||
<div class="info-wrapper__item">
|
||||
<label>办理状态：</label>
|
||||
<span>{{ info['派出所数量'] }}个派出所</span>
|
||||
<span :style="{color: mapStatus(eventInfo.status, 'color')}">{{ mapStatus(eventInfo.status, 'name') }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>上报来源：</label>
|
||||
<span>{{ info['群数量'] }}</span>
|
||||
<span>{{ eventInfo.typeName }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>发生地点：</label>
|
||||
<span>{{ info['成员总数'] }}</span>
|
||||
<span>{{ eventInfo.location.address }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>事件类别：</label>
|
||||
<span>{{ info['群成员数量'] }}</span>
|
||||
<span>{{ eventInfo.case_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-bottom">
|
||||
<h3>办理流程</h3>
|
||||
<div class="progress">
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
<div class="info-bottom__wrapper">
|
||||
<div class="info-bottom__item" v-for="(item, index) in eventInfo.process_list" :key="index">
|
||||
<h4>{{ item.solve_username }}</h4>
|
||||
<div class="middle">
|
||||
<p :title="item.process_desc">{{ item.process_desc }}</p>
|
||||
<span>{{ $moment(item.solved_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
<i>{{ mapProcessType(item.process_type) }}</i>
|
||||
</div>
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
</div>
|
||||
<div class="progress" v-if="false">
|
||||
<div class="progress-item active" v-for="(item, index) in eventInfo.process_list" :key="index">
|
||||
<h4>{{ mapStatus(item.status, 'name') }}</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
</div>
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
</div>
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
<p>{{ item.solve_username }}</p>
|
||||
<span>{{ $moment(item.solved_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -309,8 +323,8 @@
|
||||
currIndex: 0,
|
||||
areaList: [],
|
||||
type: '0',
|
||||
info: {},
|
||||
isShow: false,
|
||||
middleTotalInfo: {},
|
||||
gridId: '',
|
||||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
||||
chartConfig1: {
|
||||
@@ -538,6 +552,7 @@
|
||||
{ prop: 'reporterName', label: '姓名', align: 'center' },
|
||||
{ prop: 'caseName', label: '事件名称', align: 'left', width: 130 }
|
||||
],
|
||||
eventInfo: {},
|
||||
reportHandleList: [],
|
||||
colConfigs2: [
|
||||
{ slot: 'index' },
|
||||
@@ -611,9 +626,8 @@
|
||||
cursor: 'pointer'
|
||||
},
|
||||
on: {
|
||||
click: e => {
|
||||
this.isShow = true
|
||||
console.log(params)
|
||||
click: () => {
|
||||
this.getEventInfo(params.row.orderId, params.row)
|
||||
}
|
||||
},
|
||||
}, '查看>>'
|
||||
@@ -709,6 +723,18 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
mapProcessType (status) {
|
||||
return {
|
||||
'1': '创建',
|
||||
'2': '受理',
|
||||
'3': '分配',
|
||||
'4': '转交',
|
||||
'5': '办结',
|
||||
'6': '拒绝',
|
||||
'7': '办理中'
|
||||
}[status]
|
||||
},
|
||||
|
||||
mapStatus (status, type) {
|
||||
const index = Number(status)
|
||||
return [{
|
||||
@@ -765,6 +791,25 @@
|
||||
})
|
||||
},
|
||||
|
||||
getEventInfo (orderId, info) {
|
||||
this.instance.post(`/api/wxgridinfo/reportInfo`, null, {
|
||||
params: {
|
||||
orderId,
|
||||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.eventInfo = {
|
||||
...res.data,
|
||||
typeName: info.type === '1' ? '居民上报' : '巡查上报',
|
||||
status: info.status
|
||||
}
|
||||
|
||||
this.isShow = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onTypeChange (index) {
|
||||
this.currIndex = index
|
||||
this.getWxGridReportCata()
|
||||
@@ -914,6 +959,49 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.info-bottom__wrapper {
|
||||
height: 120px;
|
||||
margin-top: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.info-bottom__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
color: #fff;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
margin: 0 18px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: #d0e1e8;
|
||||
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #9BB7D4;
|
||||
}
|
||||
}
|
||||
|
||||
.info-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -924,13 +1012,6 @@
|
||||
background: rgba($color: #000000, $alpha: 0.1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 28px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #02FEFF;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -943,12 +1024,25 @@
|
||||
background-size: 100% 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
& > h3 {
|
||||
margin-top: 28px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #02FEFF;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.info-bottom {
|
||||
margin-top: 20px;
|
||||
padding-top: 14px;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
& > h3 {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #02FEFF;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -999,7 +1093,7 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
&:nth-of-type(4n)::before {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: -28px;
|
||||
@@ -1021,7 +1115,7 @@
|
||||
background: rgba(7, 183, 89, 1);
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
&:nth-of-type(4n)::before {
|
||||
background: rgba(7, 183, 89, 1);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user