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
2022-07-22 11:53:54 +08:00
parent d9e1f83d05
commit aae17797b7
2 changed files with 229 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
project/dv/apps/AppPdDv.vue
View File

@@ -14,21 +14,20 @@
<div class="item-top__item">
<h2>居民好友</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
<span>{{ residentInfo.customerTotal || 0 }}</span>
</div>
</div>
<div class="item-top__item">
<h2>昨日新增</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
<span>{{ residentInfo.addCustomerCount || 0 }}</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
</div>
</div>
<div class="item-top__item">
<h2>昨日流失</h2>
<div class="bottom">
<span>9</span>
<span>{{ residentInfo.removeCustomerCount || 0 }}</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
@@ -101,11 +100,11 @@
<div class="item-top dl">
<div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
<p>{{ userChatNumber.chatCnt }}</p>
</div>
<div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
<h2>单聊消息</h2>
<p>{{ userChatNumber.messageCnt }}</p>
</div>
</div>
<div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 170px;"></div>
@@ -115,16 +114,16 @@
<div class="title">群聊统计</div>
<div class="item-top ql">
<div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
<h2>活跃群聊</h2>
<p>{{ groupChatNumber.chatHasMsg }}</p>
</div>
<div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
<h2>活跃群成员</h2>
<p>{{ groupChatNumber.memberHasMsg }}</p>
</div>
<div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
<h2>群聊消息</h2>
<p>{{ groupChatNumber.msgTotal }}</p>
</div>
</div>
<div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 170px;"></div>
@@ -136,7 +135,7 @@
</div>
<div class="middle">
<div class="top">
<AiGrid :instance="instance"></AiGrid>
<AiGrid :instance="instance" @nodeClick="onNodeClick"></AiGrid>
</div>
<div class="bottom">
<div class="bottom-title">
@@ -157,23 +156,23 @@
<div class="right">
<div class="appPdDv-title">网格信息</div>
<div class="right-item top-wrapper">
<div class="title">"星"网格</div>
<div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
<div class="item-wrapper">
<div class="item-top__item">
<h2>925</h2>
<h2>{{ girdInfo['微网格长'] || 0 }}</h2>
<p>微网格长</p>
</div>
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
<h2>{{ girdInfo['居民群'] || 0 }}</h2>
<p>居民群</p>
</div>
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
<h2>{{ girdInfo['群成员'] || 0 }}</h2>
<p>群成员</p>
</div>
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
<h2>{{ girdInfo['居民好友'] || 0 }}</h2>
<p>居民好友</p>
</div>
</div>
</div>
@@ -186,10 +185,10 @@
<span style="width: 60px; text-align: right;">群人数</span>
</div>
<div class="item-table__body">
<div class="item-table__item" v-for="(item, index) in 6" :key="index">
<span style="width: 110px">XX网格居民群</span>
<span style="flex: 1; text-align: center;">王磊</span>
<span style="width: 60px; text-align: right;">150</span>
<div class="item-table__item" v-for="(item, index) in gridList" :key="index">
<span style="width: 110px" :title="item.name">{{ item.name }}</span>
<span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
<span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
</div>
</div>
</div>
@@ -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;
}
}
}
}