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-04-28 16:01:01 +08:00
parent f7cf905f93
commit 973ca20fb6
1 changed files with 250 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,13 +92,13 @@
<div class="AppQxnDv-title">
<h2>事件受理率</h2>
</div>
<DoughnutChart :ratio="sllRate" :value="sllData"></DoughnutChart>
<DoughnutChart :labelStyle="{width: '96px'}" :ratio="sllRate" :value="sllData"></DoughnutChart>
</div>
<div class="wrapper">
<div class="AppQxnDv-title">
<h2>事件办结率</h2>
</div>
<DoughnutChart :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
<DoughnutChart :labelStyle="{width: '96px'}" :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
</div>
</div>
<div class="right wrapper">
@@ -123,10 +123,13 @@
<div class="right-left__bottom">
<div class="AppQxnDv-title">
<div class="left AppQxnDv-title__tab">
<h2 @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">隐患上报</h2>
<h2 @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">咨询服务</h2>
<h2 @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">矛盾调解</h2>
<h2 @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">其他</h2>
<h2
@click="onTypeChange(index)"
:class="[currIndex === index ? 'active' : '']"
v-for="(item, index) in eventList"
:key="index">
{{ item.categoryName }}
</h2>
</div>
</div>
<ai-echart-v2
@@ -156,63 +159,62 @@
<div class="AppQxnDv-title">
<h2>事件列表</h2>
<div class="right">
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
<el-option label="XXX派出所" value="1"></el-option>
<el-option label="XXX派出所" value="2"></el-option>
<el-option label="XXX派出所" value="3"></el-option>
<el-select clearable @change="getReportList" v-model="search.source" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
<el-option label="巡查上报" value="0"></el-option>
<el-option label="居民上报" value="1"></el-option>
</el-select>
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
<el-option label="XXX派出所" value="1"></el-option>
<el-option label="XXX派出所" value="2"></el-option>
<el-option label="XXX派出所" value="3"></el-option>
<el-select clearable @change="getReportList" v-model="search.categoryId" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
<el-option
v-for="(item, index) in eventList"
:key="index"
:label="item.categoryName"
:value="item.categoryId">
</el-option>
</el-select>
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
<el-option label="XXX派出所" value="1"></el-option>
<el-option label="XXX派出所" value="2"></el-option>
<el-option label="XXX派出所" value="3"></el-option>
<el-select clearable @change="getReportList" v-model="search.status" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
<el-option label="待受理" value="0"></el-option>
<el-option label="办理中" value="1"></el-option>
<el-option label="已办结" value="2"></el-option>
<el-option label="已拒绝" value="3"></el-option>
</el-select>
<el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
<el-option label="XXX派出所" value="1"></el-option>
<el-option label="XXX派出所" value="2"></el-option>
<el-option label="XXX派出所" value="3"></el-option>
<el-select clearable @change="getReportList" v-model="search.dateRange" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
<el-option label="昨天" value="0"></el-option>
<el-option label="近7天" value="1"></el-option>
<el-option label="近30天" value="2"></el-option>
</el-select>
<el-input placeholder="关键词" style="width: 98px;">
<el-input placeholder="关键词" v-model="search.param" v-throttle="() => {getReportList()}" style="width: 98px;">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</div>
<AiDvTable
style="margin-top: 16px; height: 430px;"
:heigth="'100%'"
size="mini"
stripe="1"
:headerStyle="{
color: '#02FEFF',
fontSize: '12px',
fontWeight: '600',
backgroundColor: 'rgba(33, 180, 253, 0.1)'
}"
:config="eventTableConfig"
:data="eventTableData">
</AiDvTable>
<ai-table
style="margin-top: 10px; width: 556px;"
height="420px"
:tableData="tableData3"
:col-configs="colConfigs3"
:isShowPagination="false"
@getList="() => {}">
</ai-table>
</div>
</AiDvPanel>
</div>
<div class="right-right">
<AiDvPanel class="bottom" style="" border="border6" title="办理排行">
<AiDvTable
:heigth="'100%'"
stripe="1"
:headerStyle="{
color: '#02FEFF',
fontSize: '12px',
fontWeight: '600',
backgroundColor: 'rgba(33, 180, 253, 0.1)'
}"
isShowIndex="1"
:config="tableConfig"
:data="tableData">
</AiDvTable>
<AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
<ai-table
style="margin-top: 10px;"
height="890px"
:tableData="reportHandleList"
:col-configs="colConfigs2"
:isShowPagination="false"
@getList="() => {}">
<el-table-column slot="index" label="排名" align="center" width="58">
<template slot-scope="{ $index }">
<div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
<span>{{ $index + 1 }}</span>
</div>
</template>
</el-table-column>
</ai-table>
</AiDvPanel>
</div>
</div>
@@ -243,73 +245,6 @@
type: '0',
gridId: '',
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
tableData: [
{
name: '姓名',
v1: '宗梦瑞',
v2: '宗梦瑞',
v3: '宗梦瑞',
v4: '宗梦瑞',
v5: '宗梦瑞',
v6: '宗梦瑞',
v7: '宗梦瑞',
v8: '宗梦瑞',
v9: '宗梦瑞',
v10: '宗梦瑞'
},
{
name: '己办结',
v1: '12',
v2: '12',
v3: '123',
v4: '123',
v5: '123',
v6: '123',
v7: '2',
v8: '123',
v9: '123',
v10: '1234'
},
{
name: '办理中',
v1: '12',
v2: '12',
v3: '123',
v4: '123',
v5: '123',
v6: '123',
v7: '2',
v8: '123',
v9: '123',
v10: '1234'
},
{
name: '上报数',
v1: '12',
v2: '12',
v3: '123',
v4: '123',
v5: '123',
v6: '123',
v7: '2',
v8: '123',
v9: '123',
v10: '1234'
},
{
name: '联系TA',
v1: '联系TA',
v2: '联系TA',
v3: '联系TA',
v4: '联系TA',
v5: '联系TA',
v6: '联系TA',
v7: '联系TA',
v8: '联系TA',
v9: '联系TA',
v10: '联系TA'
}
],
chartConfig1: {
legend: {
textStyle: {
@@ -420,91 +355,7 @@
}
})
},
bbTableData: [
{
name: '时间',
v: '04/18',
v1: '04/18',
v2: '04/18',
v3: '04/18',
v4: '04/18',
v5: '04/18'
},
{
name: '姓名',
v: '宗梦瑞',
v1: '宗梦瑞',
v2: '宗梦瑞',
v3: '宗梦瑞',
v4: '宗梦瑞',
v5: '宗梦瑞'
},
{
name: '事件名称',
v: '户籍办理',
v1: '户籍办理',
v2: '户籍办理',
v3: '户籍办理',
v4: '户籍办理',
v5: '户籍办理'
}
],
blConfig: [{
color: '#d0e1e8',
align: '',
width: '',
fontSize: '14px',
flex: ''
}, {
color: '#d0e1e8',
align: 'left',
width: '',
fontSize: '14px',
flex: ''
}, {
color: '#d0e1e8',
align: 'right',
fontSize: '14px',
flex: ''
}
],
chartData3: [
{
"name": "人员聚集",
"已办理": 223,
"待处理": 23,
"处理中": 223,
"已拒绝": 23
},
{
"name": "非法饲养动物",
"已办理": 223,
"待处理": 23,
"处理中": 223,
"已拒绝": 23
},
{
"name": "婚姻家庭纠纷",
"已办理": 223,
"待处理": 23,
"处理中": 223,
"已拒绝": 23
},
{
"name": "道路安全",
"已办理": 223,
"待处理": 23,
"处理中": 223,
"已拒绝": 23
},
{
"name": "其他",
"已办理": 223,
"待处理": 23,
"处理中": 223,
"已拒绝": 23
}
] ,
chartData3: [] ,
chartConfig3: {
xAxis: {
type: "category",
@@ -589,166 +440,107 @@
itemStyle: {}
}
},
eventTableData: [
{
name: '时间',
v1: '04/18',
v2: '02/18',
v3: '04/18',
v4: '04/18',
v5: '04/18',
v6: '04/18',
v7: '04/18',
v8: '04/18',
v9: '04/18',
v10: '04/18'
},
{
name: '事件内容',
v1: '咨询如何报考摩托车驾驶咨询如',
v2: '咨询如何报考摩托车驾驶咨询如',
v3: '咨询如何报考摩托车驾驶咨询如',
v4: '咨询如何报考摩托车驾驶咨询如',
v5: '咨询如何报考摩托车驾驶咨询如',
v6: '咨询如何报考摩托车驾驶咨询如',
v7: '咨询如何报考摩托车驾驶咨询如',
v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
v9: '咨询如何报考摩托车驾驶咨询如',
v10: '咨询如何报考摩托车驾驶咨询如'
},
{
name: '状态',
v1: '已办理',
v2: '已办理',
v3: '已办理',
v4: '已办理',
v5: '处理中',
v6: '已拒绝',
v7: '处理中',
v8: '待处理',
v9: '处理中',
v10: '处理中'
},
{
name: '查看',
v1: '详情>>',
v2: '详情>>',
v3: '详情>>',
v4: '详情>>',
v5: '详情>>',
v6: '详情>>',
v7: '详情>>',
v8: '详情>>',
v9: '详情>>',
v10: '详情>>'
}
],
wxGridReportOverviewInfo: {},
tableData1: [],
colConfigs1: [
{ prop: 'createTime', label: '时间', align: 'center', width: '60px', dateFormat: 'MM/DD' },
{ prop: 'reporterName', label: '姓名', align: 'center' },
{ prop: 'caseName', label: '事件名称', align: 'left', width: 130 }
]
}
},
computed: {
tableConfig () {
return this.tableData.map((v, index) => {
if (index === 4) {
return {
color: '#d0e1e8',
align: 'center',
width: '',
fontSize: '12px',
flex: '',
render: (h, params) => {
return h(
'p', {
style: {
width: '52px',
height: '22px',
textAlign: 'center',
lineHeight: '22px',
color: '#D4F2FF',
cursor: 'pointer',
margin: '0 auto',
borderRadius: '4px',
backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
},
on: {
click: e => {
console.log(params)
}
},
}, params.column
)
}
],
reportHandleList: [],
colConfigs2: [
{ slot: 'index' },
{ prop: 'name', label: '姓名', align: 'center' },
{ prop: 'overCount', label: '已办结', align: 'center', width: 60 },
{ prop: 'handleCount', label: '办理中', align: 'center', width: 60 },
{ prop: 'reportCount', label: '上报数', align: 'center', width: 60 },
{
prop: 'reportCount',
label: '查看',
align: 'center',
render: (h, params) => {
return h(
'p', {
style: {
width: '52px',
height: '22px',
textAlign: 'center',
lineHeight: '22px',
color: '#D4F2FF',
cursor: 'pointer',
margin: '0 auto',
borderRadius: '4px',
backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
},
on: {
click: e => {
console.log(params)
}
},
}, '联系TA'
)
}
}
return {
color: '#d0e1e8',
align: '',
width: index === 0 ? '100' : '',
fontSize: '14px',
flex: ''
}
})
},
eventTableConfig () {
return [
],
colConfigs3: [
{ prop: 'createTime', label: '时间', align: 'center', dateFormat: 'MM/DD' },
{ prop: 'desc', label: '事件内容', align: 'left', width: 300 },
{
color: '#d0e1e8',
align: '',
width: '',
fontSize: '14px',
flex: ''
},
{
color: '#d0e1e8',
align: 'left',
width: '250',
fontSize: '14px',
flex: ''
},
{
color: '#d0e1e8',
prop: 'status',
label: '状态',
align: 'center',
width: '',
fontSize: '14px',
flex: '',
render: (h, params) => {
return h(
'i', {
style: {
display: 'inline-block',
fontStyle: 'normal',
width: '52px',
height: '20px',
textAlgin: 'center',
lineHeight: '20px',
color: '#07B794',
color: this.mapStatus(params.row.status, 'color'),
margin: '0 auto',
borderRadius: '2px',
background: 'rgba(19, 246, 201, 0.14)',
background: this.mapStatus(params.row.status, 'bgColor'),
}
}, params.column
}, this.mapStatus(params.row.status, 'name')
)
}
},
{
color: '#00AAFF',
align: '',
width: '',
fontSize: '14px',
flex: '',
click: e => {
console.log(e)
prop: 'reportCount',
label: '联系TA',
align: 'center',
render: (h, params) => {
return h(
'p', {
style: {
color: '#00AAFF'
},
on: {
click: e => {
console.log(params)
}
},
}, '查看>>'
)
}
}
]
},
],
tableData3: [],
search: {
dateRange: '',
param: '',
source: '',
status: '',
categoryId: ''
},
eventList: []
}
},
computed: {
chartData1 () {
if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
return []
@@ -756,7 +548,7 @@
return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
return {
name: v['月份'],
name: v['月份'] + '月',
'警格上报': v['警格上报'],
'居民上报': v['居民上报']
}
@@ -770,7 +562,7 @@
return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
return {
name: v['月份'],
name: v['月份'] + '月',
'上报总数': v['上报数量'],
'已办理': v['已拒绝数量'],
'已拒绝': v['已拒绝数量']
@@ -810,11 +602,42 @@
},
mounted () {
this.getInfo()
this.init()
this.instance.post(`/api/wxgridcata/list`, null, {
params: {
level: 1,
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
}
}).then(res => {
if (res.code === 0) {
this.eventList = res.data.records
this.init()
}
})
},
methods: {
mapStatus (status, type) {
console.log(status)
const index = Number(status)
return [{
color: '#FFB300',
name: '待受理',
bgColor: 'rgba(255, 203, 82, 0.14)'
}, {
color: '#508AFE',
name: '办理中',
bgColor: 'rgba(123, 176, 254, 0.14)'
}, {
color: '#07B759',
name: '已办结',
bgColor: 'rgba(19, 246, 201, 0.14)'
}, {
color: '#FF4C4C',
name: '已拒绝',
bgColor: 'rgba(255, 112, 112, 0.14)'
}][index][type]
},
init (gridId) {
this.gridId = ''
this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
@@ -825,6 +648,7 @@
}
}).then(res => {
if (res.code === 0) {
this.getInfo()
if (gridId) {
this.policeStationList = res.data
} else {
@@ -832,16 +656,28 @@
}
}
})
this.getInfo()
},
onStationChange () {
this.$nextTick(() => {
this.getInfo()
this.instance.post(`/api/wxgridinfo/tree`, null, {
params: {
gridParentId: this.gridId,
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
}
}).then(res => {
if (res.code === 0) {
this.getInfo()
}
})
})
},
onTypeChange (index) {
this.currIndex = index
this.getWxGridReportCata()
},
onChange () {
this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
params: {
@@ -856,6 +692,42 @@
})
},
getReportList () {
this.instance.post(`/api/wxgridinfo/reportList`, null, {
params: {
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
gridId: this.gridId || this.gridParentId,
size: '50',
...this.search
}
}).then(res => {
if (res.code === 0) {
this.tableData3 = res.data
}
})
},
getWxGridReportCata () {
this.instance.post(`/api/wxgridinfo/wxGridReportCata`, null, {
params: {
categoryId: this.eventList[this.currIndex].categoryId,
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
}
}).then(res => {
if (res.code === 0) {
this.chartData3 = res.data.map(v => {
return {
name: v['二级分类名称'],
'已办结': v['已办结'],
'待受理': v['待处理'],
'处理中': v['处理中'],
'已拒绝': v['已拒绝']
}
})
}
})
},
getInfo () {
this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
params: {
@@ -867,6 +739,23 @@
}
})
this.getWxGridReportCata()
this.instance.post(`/api/wxgridinfo/reportHandleList`, null, {
params: {
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
gridId: this.gridId || this.gridParentId,
size: '50',
dateRange: '2'
}
}).then(res => {
if (res.code === 0) {
this.reportHandleList = res.data
}
})
this.getReportList()
this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
params: {
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
@@ -924,6 +813,25 @@
background: #0c0c0c;
overflow: hidden;
.table-index {
display: flex;
align-items: center;
justify-content: center;
span {
width: 22px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 4px;
border: 1px solid #42BED5;
}
&.table-index__active span {
border-color: #EDAA38;
}
}
.wrapper {
margin-bottom: 12px;
}