@@ -157,23 +156,23 @@
网格信息
-
"星"网格
+
{{ girdInfo['网格名称'] }}
-
925
+
{{ girdInfo['微网格长'] || 0 }}
微网格长
-
925
-
微网格长
+
{{ girdInfo['居民群'] || 0 }}
+
居民群
-
925
-
微网格长
+
{{ girdInfo['群成员'] || 0 }}
+
群成员
-
925
-
微网格长
+
{{ girdInfo['居民好友'] || 0 }}
+
居民好友
@@ -186,10 +185,10 @@
群人数
-
-
XX网格居民群
-
王磊
-
150
+
+ {{ item.name }}
+ {{ item.ownerName }}
+ {{ item.personCount }}
@@ -244,35 +243,25 @@
leftIndex: 0,
rightIndex: 0,
dlIndex: 0,
- qlIndex: 0
+ qlIndex: 0,
+ currGirdName: '',
+ girdInfo: {},
+ gridList: [],
+ userChatNumber: {},
+ residentInfo: {},
+ groupChatNumber: {}
}
},
+ created () {
+ this.getInfo()
+ this.getGridInfo()
+ },
+
mounted () {
this.$nextTick(() => {
setTimeout(() => {
- this.initLineChart('.chart1')
- this.initLineChart('.chart2')
- this.initBarChart('.chart4', [
- {offset: 0, color: 'rgba(66, 255, 254, 1)'},
- {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
- ])
- this.initBarChart('.chart3', [
- {offset: 0, color: 'rgba(66, 187, 255, 1)'},
- {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
- ])
- this.initBarChart('.chart5', [
- {offset: 0, color: 'rgba(66, 255, 254, 1)'},
- {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
- ])
- this.initBarChart('.chart6', [
- {offset: 0, color: 'rgba(255, 190, 66, 1)'},
- {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
- ])
- this.initBarChart('.chart7', [
- {offset: 0, color: 'rgba(66, 187, 255, 1)'},
- {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
- ])
+ // this.initLineChart('.chart2')
}, 500)
if (document.querySelector('.AiDvWrapper .viewPanel')) {
@@ -282,15 +271,103 @@
},
methods: {
- initLineChart (el) {
+ onNodeClick (e) {
+ this.getGridInfo(e.id)
+ },
+
+ getInfo () {
+ this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
+ if (res.code === 0) {
+ this.residentInfo = res.data['居民统计']
+ this.initLineChart('.chart1', {
+ x: res.data['居民好友数'].map(v => v.month),
+ value: res.data['居民好友数'].map(v => v.totalNumber),
+ name: '居民好友'
+ })
+ }
+ })
+ this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
+ if (res.code === 0) {
+
+ }
+ })
+ this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
+ if (res.code === 0) {
+
+ }
+ })
+ this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
+ if (res.code === 0) {
+ this.userChatNumber = res.data['单聊总和']
+ this.initBarChart('.chart4', {
+ x: res.data['条形统计'].map(v => v.dateDay),
+ value: res.data['条形统计'].map(v => v.messageCnt),
+ name: '单聊消息'
+ }, [
+ {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+ {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
+ ])
+ this.initBarChart('.chart3', {
+ x: res.data['条形统计'].map(v => v.dateDay),
+ value: res.data['条形统计'].map(v => v.chatCnt),
+ name: '单聊会话'
+ }, [
+ {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+ {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+ ])
+ }
+ })
+ this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
+ this.groupChatNumber = res.data['群聊总和']
+ if (res.code === 0) {
+ this.initBarChart('.chart5', {
+ x: res.data['条形统计'].map(v => v.dateDay),
+ value: res.data['条形统计'].map(v => v.chatHasMsg),
+ name: '活跃群聊'
+ }, [
+ {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+ {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
+ ])
+ this.initBarChart('.chart6', {
+ x: res.data['条形统计'].map(v => v.dateDay),
+ value: res.data['条形统计'].map(v => v.memberHasMsg),
+ name: '活跃群成员'
+ }, [
+ {offset: 0, color: 'rgba(255, 190, 66, 1)'},
+ {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
+ ])
+ this.initBarChart('.chart7', {
+ x: res.data['条形统计'].map(v => v.dateDay),
+ value: res.data['条形统计'].map(v => v.msgTotal),
+ name: '群聊消息'
+ }, [
+ {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+ {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+ ])
+ }
+ })
+ },
+
+ getGridInfo (id) {
+ this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${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
+ }
+ })
+ },
+
+ initLineChart (el, data) {
var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom)
- var option
-
- option = {
+ var option = {
xAxis: {
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: data.x,
axisTick: {
show: false
},
@@ -346,13 +423,14 @@
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
+ data: data.value,
type: 'line',
label: {
show: false,
position: 'top',
color: '#fff'
},
+ name: data.name,
areaStyle: {},
barWidth: 16,
barCategoryGap: 40,
@@ -364,7 +442,7 @@
option && myChart.setOption(option)
},
- initBarChart (el, color) {
+ initBarChart (el, data, color) {
var chartDom = document.querySelector(el)
var myChart = echarts.init(chartDom)
var option
@@ -372,7 +450,7 @@
option = {
xAxis: {
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: data.x,
axisTick: {
show: false
},
@@ -425,7 +503,8 @@
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
+ data: data.value,
+ name: data.name,
type: 'bar',
label: {
show: false,
@@ -453,6 +532,20 @@
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
background-size: 100% 100%;
+ ::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ ::-webkit-scrollbar-track {
+ border-radius: 5px;
+ background: rgba(93, 163, 255, 0.1);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background: rgba(173, 208, 255, 0.5);
+ }
+
* {
box-sizing: border-box;
}
@@ -630,6 +723,9 @@
padding: 4px 0 0 34px;
color: #fff;
font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
background-size: 100% 100%;
}
@@ -955,6 +1051,9 @@
}
.item-table__body {
+ height: 280px;
+ overflow-y: overlay;
+
.item-table__item {
display: flex;
align-items: center;
@@ -968,6 +1067,12 @@
&:nth-of-type(2n - 1) {
background: transparent;
}
+
+ span {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
}
}
diff --git a/project/dv/apps/components/AiGrid.vue b/project/dv/apps/components/AiGrid.vue
index d8488028..d66dd3ad 100644
--- a/project/dv/apps/components/AiGrid.vue
+++ b/project/dv/apps/components/AiGrid.vue
@@ -9,9 +9,11 @@
:props="props"
node-key="id"
show-collapsable
- default-expand-all
show-node-num
+ current-lable-class-name="aigrid-active"
+ :default-expanded-keys="defaultExpandedKeys"
ref="VueOkrTree"
+ @node-click="onNodeClick"
:data="treeData">
@@ -36,9 +38,10 @@
scale: 1,
x: '50%',
y: '50%',
+ defaultExpandedKeys: [],
treeData: [],
props: {
- label: 'name',
+ label: 'girdName',
children: 'children'
}
}
@@ -101,19 +104,34 @@
this.isMove = false
},
+ onNodeClick (e) {
+ this.$emit('nodeClick', e)
+ },
+
getPartyOrg () {
- this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
+ this.instance.post('/app/appgirdinfo/listAll3').then(res => {
if (res.code === 0) {
- this.treeData = res.data.filter(e => !e.parentId)
- this.treeData.map(p => this.addChild(p, res.data.map(v => {
+ this.treeData = res.data.filter(e => !e.parentGirdId)
+ const parentGirdId = this.treeData[0].id
+ const arr = res.data.filter(v => {
+ return v.parentGirdId === parentGirdId || !v.parentGirdId
+ })
+ this.treeData.map(p => this.addChild(p, arr.map(v => {
+ if (v.id === parentGirdId) {
+ this.defaultExpandedKeys.push(v.id)
+ }
+
return {
...v,
- name: v.name.substr(0, 12)
+ girdName: v.girdName.substr(0, 8)
}
- }), {parent: 'parentId'}))
+ }), {
+ parent: 'parentGirdId'
+ }))
this.$nextTick(() => {
this.autoScale()
+ this.$refs.VueOkrTree.setCurrentKey(parentGirdId)
})
}
})
@@ -150,6 +168,10 @@
height: 300%;
}
+ .aigrid-active {
+ background: linear-gradient(180deg, #42C6CE 0%, #307598 100%);
+ }
+
::v-deep .org-chart-container {
color: #FFFFFF;
font-size: 16px;
@@ -187,19 +209,51 @@
.org-chart-node-label {
width: 40px;
- height: 330px;
+ height: 230px;
margin-right: 15px;
padding: 0 0;
- border: 1px solid;
- background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
- border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
.org-chart-node-label-inner {
+ width: 40px!important;
+ height: 230px!important;
+ border: 1px solid;
+ background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
+ border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
line-height: 1.3;
padding: 10px 4px;
text-align: center;
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
+
+ &.aigrid-active {
+ background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
+ }
+ }
+
+ &.is-root-label {
+ width: auto!important;
+ min-width: 240px;
+ height: 40px!important;
+ line-height: 40px!important;
+ min-height: 40px!important;
+ text-align: center;
+
+ .org-chart-node-label-inner {
+ padding: 0 30px!important;
+ color: #fff!important;
+ width: auto!important;
+ min-width: 240px;
+ height: 40px!important;
+ line-height: 40px!important;
+ min-height: 40px!important;
+ text-align: center;
+ background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
+ border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
+
+ &.aigrid-active {
+ background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
+ }
+ }
}
}
@@ -210,21 +264,6 @@
}
}
- .is-root-label {
- width: auto!important;
- height: 40px!important;
- line-height: 40px!important;
- min-height: 40px!important;
- text-align: center;
- background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
- border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
-
- .org-chart-node-label-inner {
- padding: 0 30px!important;
- color: #fff!important;
- }
- }
-
.org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
.org-chart-node.is-leaf:before {
border-radius: 0;
+ {{ residentInfo.customerTotal || 0 }}
