From 3f713a8d15611b348e304f35113f452188e35e29 Mon Sep 17 00:00:00 2001 From: yanran200730 Date: Thu, 8 Sep 2022 16:05:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=B4=E4=B9=89=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project/dv/apps/AppXyDv.vue | 117 ++++++++++++++++---------- project/dv/apps/components/XyGrid.vue | 47 ++++++----- 2 files changed, 100 insertions(+), 64 deletions(-) diff --git a/project/dv/apps/AppXyDv.vue b/project/dv/apps/AppXyDv.vue index 8890300f..4c2e3a72 100644 --- a/project/dv/apps/AppXyDv.vue +++ b/project/dv/apps/AppXyDv.vue @@ -43,19 +43,19 @@ 群成员
-
+
- 65 + {{ item['居民群'] }}
- +
-

兴义

+

{{ item.girdName }}

- +
- 32144 + {{ item['群成员'] }}
@@ -129,11 +129,11 @@
警务数据
-
{{ girdInfo['网格名称'] }}
+
微警务群
-

{{ girdInfo['微网格长'] || 0 }}

-

微网格长

+

{{ girdInfo['村民警员'] || 0 }}

+

村民警员

{{ girdInfo['居民群'] || 0 }}

@@ -155,17 +155,17 @@
-

240

+

{{ total || 0 }}

总数
-
+
- - 类型A + + {{ item.name }}
-

类型A

+

{{ item.value }}

@@ -182,7 +182,7 @@
{{ item.name || '未命名群聊' }} {{ item.ownerName }} - {{ item.personCount }} + {{ item.memberCount }}
@@ -224,13 +224,17 @@ groupNumber: {}, replyPercentage: {}, groupChatNumber: {}, - dynamicList: [] + dynamicList: [], + total: 0, + typeList: [], + list: [], + colorList: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#FFBA68', '#FD6C39'] } }, created () { this.getInfo() - this.getGridInfo() + this.getGridInfo({}) }, mounted () { @@ -239,14 +243,6 @@ if (document.querySelector('.AiDvWrapper .viewPanel')) { document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)' } - - this.initChart5('.chart10', [ - { value: 1048, name: 'Search Engine' }, - { value: 735, name: 'Direct' }, - { value: 580, name: 'Email' }, - { value: 484, name: 'Union Ads' }, - { value: 300, name: 'Video Ads' } - ]) }) }, @@ -272,7 +268,7 @@ }, series: [ { - name: 'Access From', + name: '分类统计', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, @@ -295,13 +291,7 @@ labelLine: { show: false }, - data: [ - { value: 1048, name: 'Search Engine' }, - { value: 735, name: 'Direct' }, - { value: 580, name: 'Email' }, - { value: 484, name: 'Union Ads' }, - { value: 300, name: 'Video Ads' } - ] + data: data } ] } @@ -407,15 +397,48 @@ }) }, - getGridInfo (id) { - this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${id || ''}`).then(res => { + getGridInfo (e) { + if (e.level === 4) return + + if (e.level !== 3) { + this.instance.post(`/app/qxn_appgirdinfo/branchStatistics?girdId=${e.id || ''}`).then(res => { + if (res.code === 0) { + if (res.data && res.data.length) { + const list = res.data.map(item => { + return { + ...item + } + }) + + const v1 = Math.max(...list.map(v => v['居民群'])) + const v2 = Math.max(...list.map(v => v['群成员'])) + + this.list = list.map(v => { + return { + ...v, + rate1: (v['居民群'] / v1 * 100).toFixed(0) + '%', + rate2: (v['群成员'] / v2 * 100).toFixed(0) + '%' + } + }) + } + } + }) + } + + this.instance.post(`/app/qxn_appgirdinfo/policeWork?girdId=${e.id || ''}`).then(res => { if (res.code === 0) { - this.girdInfo = res.data - } - }) - this.instance.post(`/app/wxcp/wxgroup/listBtGridId?size=1000&girdId=${id || ''}`).then(res => { - if (res.code === 0) { - this.gridList = res.data.records + this.girdInfo = res.data.countInfo + this.gridList = res.data.groupList + if (res.data.typeInfo) { + this.total = res.data.typeInfo.map(v => v.c).reduce((x, y) => x + y) + this.typeList = res.data.typeInfo.map(v => { + return { + value: v.c, + name: v.type + } + }) + this.initChart5('.chart10', this.typeList) + } } }) }, @@ -920,7 +943,6 @@ .rate-wrapper { width: 100%; - padding: 0 10px; } .rate { @@ -934,14 +956,20 @@ .rate { background-image: linear-gradient(270deg, rgba(0,240,251,0.80) 0%, rgba(0,240,251,0.00) 100%); } + + span { + text-align: right; + } } h2 { + width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFFFFF; - font-size: 16px; + font-size: 14px; + text-align: center; text-shadow: 0px 0px 13px rgb(59 182 255 / 80%); background: #fff; -webkit-background-clip: text; @@ -949,6 +977,7 @@ } span { + width: 38px; color: #aeacaf; font-size: 15px; } @@ -1139,7 +1168,7 @@ position: absolute; right: 0; top: 50%; - z-index: 111; + z-index: 99; transform: translateY(-50%); .right-item { diff --git a/project/dv/apps/components/XyGrid.vue b/project/dv/apps/components/XyGrid.vue index cdc66d05..91805868 100644 --- a/project/dv/apps/components/XyGrid.vue +++ b/project/dv/apps/components/XyGrid.vue @@ -8,7 +8,7 @@
-->
-

{{ girdNum3 }}

+

{{ girdNum3 || 0 }}

{{ girdName3 }}

@@ -16,7 +16,7 @@
-

{{ girdNum4 }}

+

{{ girdNum4 || 0 }}

{{ girdName4 }}

@@ -24,7 +24,7 @@
-

{{ girdNum5 }}

+

{{ girdNum5 || 0 }}

{{ girdName5 }}

@@ -182,7 +182,10 @@ this.currIndex5 = -1 this.girdNum3 = 1 this.isShowGrid3 = false - this.$emit('nodeClick', item.id) + this.$emit('nodeClick', { + id: item.id, + level: 2 + }) this.girdInfoList4 = [] this.girdInfoList5 = [] this.currGird = item.girdName @@ -195,7 +198,10 @@ this.currIndex5 = -1 this.girdNum4 = 1 this.isShowGrid4 = false - this.$emit('nodeClick', item.id) + this.$emit('nodeClick', { + id: item.id, + level: 3 + }) this.girdInfoList5 = [] this.currGird = item.girdName @@ -207,32 +213,33 @@ this.girdName5 = item.girdName this.isShowGrid5 = false this.girdNum5 = 1 - this.$emit('nodeClick', item.id) + this.$emit('nodeClick', { + id: item.id, + level: 4 + }) this.currGird = item.girdName this.getInfo(item.id) }, getInfo (id) { - this.instance.post(`/app/appgirdinfo/queryPdDetailByGirdId?id=${id || ''}`).then(res => { + this.instance.post(`/app/qxn_appgirdinfo/queryGirdInfo?id=${id || ''}`).then(res => { if (res.code === 0) { - res.data.girdInfoList2 && (this.girdInfoList2 = res.data.girdInfoList2) - res.data.girdInfoList3 && (this.girdInfoList3 = res.data.girdInfoList3) - res.data.girdInfoList4 && (this.girdInfoList4 = res.data.girdInfoList4) - res.data.girdInfoList5 && (this.girdInfoList5 = res.data.girdInfoList5) + res.data.girdInfoList2 && (this.girdInfoList3 = res.data.girdInfoList2) + res.data.girdInfoList3 && (this.girdInfoList4 = res.data.girdInfoList3) + res.data.girdInfoList4 && (this.girdInfoList5 = res.data.girdInfoList4) - res.data.girdName2 && (this.girdName2 = res.data.girdName2) - res.data.girdName3 && (this.girdName3 = res.data.girdName3) - res.data.girdName4 && (this.girdName4 = res.data.girdName4) - res.data.girdName5 && (this.girdName5 = res.data.girdName5) + res.data.girdName1 && (this.girdName2 = res.data.girdName1) + res.data.girdName2 && (this.girdName3 = res.data.girdName2) + res.data.girdName3 && (this.girdName4 = res.data.girdName3) + res.data.girdName4 && (this.girdName5 = res.data.girdName4) - res.data.girdNum3 != null && (this.girdNum3 = res.data.girdNum3) - res.data.girdNum4 != null && (this.girdNum4 = res.data.girdNum4) - res.data.girdNum5 != null && (this.girdNum5 = res.data.girdNum5) + res.data.girdNum2 != null && (this.girdNum3 = res.data.girdNum2) + res.data.girdNum3 != null && (this.girdNum4 = res.data.girdNum3) + res.data.girdNum4 != null && (this.girdNum5 = res.data.girdNum4) if (!id) { - this.currGird = res.data.girdName2 - this.currIndex2 = res.data.girdInfoList2.findIndex(v => res.data.girdName2 === v.girdName) + this.currGird = res.data.girdName1 } } })