This commit is contained in:
yanran200730
2023-04-28 13:47:35 +08:00
parent f346e8289f
commit de3e4ef259
2 changed files with 98 additions and 21 deletions

View File

@@ -91,11 +91,11 @@
<div class="right wrapper"> <div class="right wrapper">
<div class="AppQxnDv-title"> <div class="AppQxnDv-title">
<h2>群标签情况</h2> <h2>群标签情况</h2>
<el-select v-model="value" style="width: 92px" size="mini" placeholder="专属"> <!-- <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
<el-option label="XXX派出所" value="1"></el-option> <el-option label="XXX派出所" value="1"></el-option>
<el-option label="XXX派出所" value="2"></el-option> <el-option label="XXX派出所" value="2"></el-option>
<el-option label="XXX派出所" value="3"></el-option> <el-option label="XXX派出所" value="3"></el-option>
</el-select> </el-select> -->
</div> </div>
<ai-echart-v2 <ai-echart-v2
style="height: 220px; width: 100%; margin-top: 10px;" style="height: 220px; width: 100%; margin-top: 10px;"
@@ -122,7 +122,7 @@
<h2>群人数规模分布</h2> <h2>群人数规模分布</h2>
</div> </div>
<ai-echart-v2 <ai-echart-v2
style="height: 180px; width: 100%; margin-top: 20px;" style="height: 160px; width: 100%; margin-top: 20px;"
:ref="'chart2'" :ref="'chart2'"
:data="qrsGmData" :data="qrsGmData"
:ops="pieChart"> :ops="pieChart">
@@ -205,8 +205,8 @@
<h2>日均活跃率</h2> <h2>日均活跃率</h2>
</div> </div>
<DoughnutChart <DoughnutChart
:ratio="'61'" :ratio="rjhyRate"
:value="[{key: '活跃成员', value: '6005'}, {key: '激活成员', value: '9789'}]"> :value="rjhyData">
</DoughnutChart> </DoughnutChart>
</div> </div>
</div> </div>
@@ -217,8 +217,8 @@
<ai-echart-v2 <ai-echart-v2
style="height: 236px; width: 100%;" style="height: 236px; width: 100%;"
:ref="'chart'" :ref="'chart'"
:data="lineData" :data="cyfbData"
:ops="lineChart1"> :ops="lineChart2">
</ai-echart-v2> </ai-echart-v2>
</div> </div>
</AiDvPanel> </AiDvPanel>
@@ -428,6 +428,61 @@
} }
}) })
}, },
lineChart2: {
legend: {
show: false
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '35px',
containLabel: true
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0, 102, 154, 0.65)',
borderColor: 'rgba(0, 102, 154, 0.65)',
textStyle: { color: '#fff' },
axisPointer: { type: 'cross' }
},
color: ['#33CCCC', '#33CCCC'],
xAxis: {
type: "category",
axisTick: {show: false},
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
axisLabel: {color: '#8FABBF', fontSize: 12},
},
yAxis: {
nameGap: 23,
minInterval: 1,
splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
axisLabel: {color: '#8FABBF', fontSize: 12},
axisPointer: { snap: true }
},
daemon: (color) => ({
showSymbol: false,
smooth: true,
lineStyle: {
shadowBlur: 4,
shadowOffsetY: 2,
width: 2
},
areaStyle: {
color: {
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: this.Hex2RGBA(color, 0.3) },
{ offset: 1, color: this.Hex2RGBA(color, 0.1) }
]
}
}
})
},
barChart8: { barChart8: {
legend: { legend: {
textStyle: { textStyle: {
@@ -569,9 +624,9 @@
show: false show: false
}, },
grid: { grid: {
left: '6%', left: '0%',
top: '6%', top: '6%',
right: '6%', right: '0%',
bottom: '6%' bottom: '6%'
}, },
yAxis: { yAxis: {
@@ -598,7 +653,7 @@
normal: { normal: {
textStyle: { textStyle: {
color: '#9BB7D4', color: '#9BB7D4',
fontSize: 14 fontSize: 10
} }
} }
} }
@@ -629,12 +684,24 @@
}, },
computed: { computed: {
rjhyData () {
return [{key: '活跃成员', value: (this.cyActivityInfo['活跃成员总数(7日)'] / 7).toFixed(0)}, {key: '激活成员', value: this.cyActivityInfo['已激活']}]
},
rjhyRate () {
if (!this.cyActivityInfo['已激活']) {
return 0
}
return Number((((this.cyActivityInfo['活跃成员总数(7日)'] / 7).toFixed(0) / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
},
qbqlData () { qbqlData () {
return [{key: '活跃成员', value: 6006}, {key: '激活成员', value: 9789}] return [{key: '已打标签', value: 2938}, {key: '未打标签', value: 2283}]
}, },
qbqRate () { qbqRate () {
return 61 return 26.27
if (!this.cyActivityInfo['已激活']) { if (!this.cyActivityInfo['已激活']) {
return 0 return 0
} }
@@ -642,11 +709,11 @@
return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2)) return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
}, },
fglData () { fglData () {
return [{key: '已激活成员', value: 9789}, {key: '未激活成员', value: 6}] return [{key: '已关联人数', value: 726079}, {key: '地区户籍数', value: 3015112}]
}, },
fglRate () { fglRate () {
return 99.93 return 24.08
if (!this.cyActivityInfo['已激活']) { if (!this.cyActivityInfo['已激活']) {
return 0 return 0
} }
@@ -690,6 +757,19 @@
return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'])) * 100).toFixed(2)) return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'])) * 100).toFixed(2))
}, },
cyfbData () {
if (!this.cyActivityInfo['成员使用分布']) {
return []
}
return this.cyActivityInfo['成员使用分布'].map(v => {
return {
'日期': v['日期'],
'活跃用户数': v['活跃用户数']
}
})
},
barChartData () { barChartData () {
if (!this.wxGroupOverview['各单位群主及群分布']) { if (!this.wxGroupOverview['各单位群主及群分布']) {
return [] return []
@@ -697,7 +777,7 @@
return this.wxGroupOverview['各单位群主及群分布'].map(v => { return this.wxGroupOverview['各单位群主及群分布'].map(v => {
return { return {
name: v['网格名称'], 'name': v['网格名称'],
'群主数量': v['群主数量'], '群主数量': v['群主数量'],
'群数量': v['群数量'] '群数量': v['群数量']
} }

View File

@@ -9,7 +9,7 @@
<div class="DoughnutChart-explain"> <div class="DoughnutChart-explain">
<div class="item" v-for="(item, index) in value" :key="index"> <div class="item" v-for="(item, index) in value" :key="index">
<i></i> <i></i>
<span>{{ item.key }}</span> <span :style="labelStyle">{{ item.key }}</span>
<p>{{ item.value }}</p> <p>{{ item.value }}</p>
</div> </div>
</div> </div>
@@ -18,7 +18,7 @@
<script> <script>
export default { export default {
props: ['ratio', 'value'], props: ['ratio', 'value', 'labelStyle'],
data () { data () {
return { return {
@@ -146,10 +146,7 @@
} }
span { span {
margin-right: 20px; width: 78px;
// width: 88px;
// min-width: 50px;
// max-width: 70px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #9BB7D4; color: #9BB7D4;