kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into build

Browse Source
This commit is contained in:
aixianling
2022-09-08 16:17:08 +08:00
parent 6e98d28b88 3f713a8d15
commit 9ea39b1386
2 changed files with 100 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
packages/bigscreen/dv/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 {

47
packages/bigscreen/dv/components/XyGrid.vue
View File

@@ -8,7 +8,7 @@
</div> -->
<div class="pdgrid-body">
<div class="pdgrid-body__item" @click="isShowGrid3 = true">
<h2>{{ girdNum3 }}</h2>
<h2>{{ girdNum3 || 0 }}</h2>
<div class="bottom">
<i></i>
<p>{{ girdName3 }}</p>
@@ -16,7 +16,7 @@
</div>
</div>
<div class="pdgrid-body__item" @click.stop="isShowGrid4 = true">
<h2>{{ girdNum4 }}</h2>
<h2>{{ girdNum4 || 0 }}</h2>
<div class="bottom">
<i></i>
<p>{{ girdName4 }}</p>
@@ -24,7 +24,7 @@
</div>
</div>
<div class="pdgrid-body__item" @click="isShowGrid5 = true">
<h2>{{ girdNum5 }}</h2>
<h2>{{ girdNum5 || 0 }}</h2>
<div class="bottom">
<i></i>
<p>{{ girdName5 }}</p>
@@ -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
}
}
})