kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏

Browse Source
This commit is contained in:
yanran200730
2023-05-05 14:37:49 +08:00
parent 0507cd9a89
commit c5784e268e
6 changed files with 209 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bigscreen/dv/AppQxnDv.vue
View File

@@ -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>
@@ -171,7 +171,7 @@
</div>
</div>
<div class="wrapper" style="position: relative;">
<DvMap :instance="instance" style="width: 100%; height: 376px;"></DvMap>
<DvMap :instance="instance" style="width: 100%; height: 376px;" type="0"></DvMap>
<div class="total-info">
<div class="total-info__item">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">

200
packages/bigscreen/dv/AppQxnEventDv.vue
View File

@@ -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);
}

80
packages/bigscreen/dv/components/DvMap.vue
View File

@@ -9,7 +9,7 @@
<h2>{{ title }}</h2>
</div>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShowInfo = false" />
<div class="info-wrapper">
<div class="info-wrapper" v-if="type === '0'">
<div class="info-wrapper__item">
<label>下属单位：</label>
<span>{{ info['派出所数量'] }}个派出所</span>
@@ -39,6 +39,40 @@
<span>{{ info['群主人数'] }}</span>
</div>
</div>
<div class="info-wrapper" v-else>
<div class="info-wrapper__item">
<label>负责人：</label>
<span>{{ info['负责人'] }}</span>
</div>
<div class="info-wrapper__item">
<label>下属警格数：</label>
<span>{{ info['下属警格数量'] }}</span>
</div>
<div class="info-wrapper__item">
<label>警格人数：</label>
<span>{{ info['外部联系人数量'] }}</span>
</div>
<div class="info-wrapper__item">
<label>事件处理率：</label>
<span>{{ rate }}</span>
</div>
<div class="info-wrapper__item">
<label>待处理：</label>
<span>{{ info['待受理'] }}</span>
</div>
<div class="info-wrapper__item">
<label>处理中：</label>
<span>{{ info['办理中'] }}</span>
</div>
<div class="info-wrapper__item">
<label>已办理：</label>
<span>{{ info['已办结'] }}</span>
</div>
<div class="info-wrapper__item">
<label>事件总数：</label>
<span>{{ info['事件总数'] }}</span>
</div>
</div>
</div>
</div>
</transition>
@@ -52,7 +86,8 @@
name: 'AiDvMap',
props: {
instance: Function
instance: Function,
type: String
},
data() {
@@ -69,11 +104,11 @@
computed: {
rate () {
if (!this.info['已激活']) {
if (!this.info['事件总数']) {
return '0%'
}
return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
return ((this.info['事件总数'] - this.info['已拒绝']) / this.info['事件总数']).toFixed(2) * 100 + '%'
}
},
@@ -224,33 +259,6 @@
areaColor: null
}
},
// label: {
// show: true,
// formatter: e => {
// const name = e.data[3]
// const value = e.data[2]
// return `{a|${name}}\n{b|${value}}`
// },
// fontSize: 16,
// rich: {
// a: {
// width: '100%',
// color: '#fff',
// lineHeight: 20,
// fontSize: 16
// },
// b: {
// backgroundColor: {
// // image: require('@/assets/images/point.png')
// },
// color: '#fff',
// height: 56,
// align: 'center',
// width: 50,
// fontSize: 16
// }
// }
// },
data: []
}
]
@@ -311,9 +319,9 @@
top: 50%;
left: 50%;
z-index: 11;
width: 378px;
height: 254px;
padding: 15px 22px 0;
width: 390px;
height: 262px;
padding: 15px 18px 0;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/info-bg.png);
background-size: 100% 100%;
transform: translate(-50%, -50%);
@@ -332,8 +340,8 @@
margin-bottom: 20px;
label {
width: 70px;
margin-right: 20px;
width: 90px;
margin-right: 10px;
color: #fff;
text-align: right;
font-size: 14px;