diff --git a/packages/bigscreen/dv/AppQxnEventDv.vue b/packages/bigscreen/dv/AppQxnEventDv.vue index bec76b76..f5834032 100644 --- a/packages/bigscreen/dv/AppQxnEventDv.vue +++ b/packages/bigscreen/dv/AppQxnEventDv.vue @@ -92,13 +92,13 @@

事件受理率

- +

事件办结率

- +
@@ -123,10 +123,13 @@
-

隐患上报

-

咨询服务

-

矛盾调解

-

其他

+

+ {{ item.categoryName }} +

事件列表

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