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-09-08 16:05:40 +08:00
parent 36f4283374
commit 3f713a8d15
2 changed files with 100 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
project/dv/apps/AppXyDv.vue
View File

@@ -43,19 +43,19 @@
<span>群成员</span>
</div>
<div class="item-top__list">
<div class="item" v-for="(item, index) in 10" :key="index">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="left">
<span>65</span>
<span>{{ item['居民群'] }}</span>
<div class="rate-wrapper">
<span class="rate" style="width: 40%"></span>
<i class="rate" :style="{width: item.rate1}"></i>
</div>
</div>
<h2>兴义</h2>
<h2 :title="item.girdName">{{ item.girdName }}</h2>
<div class="right">
<div class="rate-wrapper">
<span class="rate" style="width: 100%"></span>
<i class="rate" :style="{width: item.rate2}"></i>
</div>
<span>32144</span>
<span>{{ item['群成员'] }}</span>
</div>
</div>
</div>
@@ -129,11 +129,11 @@
<div class="right">
<div class="appPdDv-title">警务数据</div>
<div class="right-item top-wrapper">
<div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
<div class="title">微警务群</div>
<div class="item-wrapper">
<div class="item-top__item">
<h2>{{ girdInfo['微网格长'] || 0 }}</h2>
<p>微网格长</p>
<h2>{{ girdInfo['村民警员'] || 0 }}</h2>
<p>村民警员</p>
</div>
<div class="item-top__item">
<h2>{{ girdInfo['居民群'] || 0 }}</h2>
@@ -155,17 +155,17 @@
<div class="left">
<div class="chart10" style="width: 100%; height: 240px;"></div>
<div class="left-text">
<h2>240</h2>
<h2>{{ total || 0 }}</h2>
<span>总数</span>
</div>
</div>
<div class="right">
<div class="right-item" v-for="(item, index) in 5" :key="index">
<div class="right-item" v-for="(item, index) in typeList" :key="index">
<div class="right-item__left">
<i></i>
<span>类型A</span>
<i :style="{background: colorList[index]}"></i>
<span>{{ item.name }}</span>
</div>
<p>类型A</p>
<p>{{ item.value }}</p>
</div>
</div>
</div>
@@ -182,7 +182,7 @@
<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>
<span style="width: 60px; text-align: right;">{{ item.memberCount }}</span>
</div>
</div>
</div>
@@ -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 {