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

居民统计

Browse Source
This commit is contained in:
liuye
2022-09-06 17:17:49 +08:00
parent cc4bed2a48
commit bdff532ebb
6 changed files with 642 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/apps/AppPageHome.vue/AppPageHome.vue
View File

@@ -27,7 +27,7 @@ export default {
},
onLoad(options) {
this.id = options.id
this.id = '7a4701d5641543cca4419488db368d3e'
// this.id = '7a4701d5641543cca4419488db368d3e'
this.getAppInfo()
},
methods: {

117
src/project/saas/AppResidentStatistics/AppResidentStatistics.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<div class="AppResidentStatistics">
<AiTopFixed>
<div class="area-content">
<AiAreaPicker v-model="areaId" :name.sync="areaName">
<div flex>
<img src="./img/location.png" alt="" class="icon-img">
<AiMore v-model="areaName" icon="arrow-down"/>
</div>
</AiAreaPicker>
</div>
</AiTopFixed>
<div class="tab-list">
<div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
</div>
<component :is="tabList[tabIndex].component" class="component" />
</div>
</template>
<script>
import Files from './components/Files'
import Message from './components/Message'
import People from './components/People'
export default {
name: "AppResidentStatistics",
appName: "居民统计",
data() {
return {
tabList: [
{
text: '人群统计',
component: People
},
{
text: '档案统计',
component: Files
},
{
text: '会话统计',
component: Message
},
],
tabIndex: 0,
areaId: '',
areaName: '',
}
},
components: {Files, Message, People},
methods: {
tabClick(index) {
this.tabIndex = index
},
},
onShow() {
document.title = "居民统计"
},
}
</script>
<style lang="scss" scoped>
.AppResidentStatistics {
width: 100%;
height: 100%;
background-color: #F5F6F7;
padding-bottom: 112px;
::v-deep .AiTopFixed {
.content {
background-color: #3975C6;
color: #fff;
}
.icon-img{
width: 48px;
height: 48px;
}
}
::v-deep .AiMore{
span{
color: #fff;
}
}
.tab-list {
width: 100%;
line-height: 88px;
display: flex;
background-color: #fff;
position: fixed;
z-index: 9;
.tab-item {
flex: 1;
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
position: relative;
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000;
span {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
width: 50px;
height: 6px;
background: #3399FF;
border-radius: 4px;
}
}
}
.component{
padding-top: 88px;
}
}
</style>

115
src/project/saas/AppResidentStatistics/components/Files.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div class="Files">
<div class="title">特殊人群</div>
<div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
<div class="title">年龄分布</div>
<div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
<div class="title">男女比例</div>
<div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
name: "Files",
data() {
return {
echartDataSpecial: null,
echartDataAge: null,
echartDataSex: null
}
},
computed: { ...mapState(['user']) },
methods: {
chartInit() {
this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
var option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
this.echartDataSpecial.setOption(option)
this.echartDataSex.setOption(option)
var option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000'
}
},
150,
80,
70,
110,
130
],
type: 'bar'
}
]
};
this.echartDataAge.setOption(option2)
},
},
created() {
this.$nextTick(() => {
this.chartInit()
})
},
}
</script>
<style lang="scss" scoped>
.Files {
padding: 0 32px;
.title {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
padding: 40px 0 24px 0;
}
.chart-content{
width: 100%;
background-color: #fff;
border-radius: 8px;
}
}
</style>

199
src/project/saas/AppResidentStatistics/components/Message.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div class="Message">
<div class="title">消息回复率</div>
<div class="title">单聊统计</div>
<div class="tab-content">
<div class="item" v-for="(item, index) in friendList" :key="index">
<p>{{ item.label }}</p>
<h3>{{ item.value }}</h3>
</div>
</div>
<div class="chart-content" id="chartFriend"></div>
<div class="title">单聊统计</div>
<div class="tab-content">
<div class="item" v-for="(item, index) in groupList" :key="index">
<p>{{ item.label }}</p>
<h3>{{ item.value }}</h3>
</div>
</div>
<div class="chart-content" id="chartGroup"></div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
name: "Message",
data() {
return {
friendList: [
{
label: '单聊会话',
value: '235'
},
{
label: '单聊消息',
value: '23500'
}
],
groupList: [
{
label: '活跃群聊',
value: '235'
},
{
label: '活跃群成员',
value: '23'
},
{
label: '群聊消息',
value: '255,625'
},
],
echartDataFriend: null,
echartDataGroup: null
}
},
computed: { ...mapState(['user']) },
methods: {
chartInit() {
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
var option = {
grid: {
left: '5%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#E1E5EF', //x轴的颜色
width: 1, //轴线的宽度
},
},
axisLabel: {
show: true,
textStyle: {
color: '#666',
},
},
data: ['4月', '5月', '6月', '7月', '8月',]
},
yAxis: {
axisLine:{ //y轴
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#666',
},
},
type: 'value',
minInterval: 50,
},
tooltip: {
trigger: 'axis'
},
series: [
{
data: [155, 130, 120, 160, 120, 130, 110],
type: 'line',
areaStyle: {//覆盖区域的渐变色
normal: {
color: {
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
colorStops: [
{
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
},
{
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
}
},
lineStyle: {
normal: {
color: '#2891FF'
}
},
itemStyle : {
normal : {
color:'#2891FF',
}
}
}
]
};
this.echartDataFriend.setOption(option)
this.echartDataGroup.setOption(option)
},
},
created() {
this.$nextTick(() => {
this.chartInit()
})
},
}
</script>
<style lang="scss" scoped>
.Message {
padding: 0 30px;
.title {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
padding: 40px 0 24px 0;
span {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
}
}
.tab-content {
display: flex;
padding: 24px 0;
background-color: #fff;
border-radius: 16px;
margin-bottom: 16px;
.item {
flex: 1;
text-align: center;
p {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
line-height: 48px;
}
h3 {
font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000;
line-height: 48px;
}
}
}
.chart-content {
width: 100%;
height: 517px;
background-color: #fff;
border-radius: 8px;
}
}
</style>

210
src/project/saas/AppResidentStatistics/components/People.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="People">
<div class="title">
居民好友统计<span>（统计数据为去重后的数据）</span>
</div>
<div class="tab-content">
<div class="item" v-for="(item, index) in friendList" :key="index">
<p>{{ item.label }}</p>
<h3>{{ item.value }}</h3>
</div>
</div>
<div class="chart-content" id="chartFriend"></div>
<div class="title">
居民群统计<span>（统计数据为去重后的数据）</span>
</div>
<div class="tab-content">
<div class="item" v-for="(item, index) in groupList" :key="index">
<p>{{ item.label }}</p>
<h3>{{ item.value }}</h3>
</div>
</div>
<div class="chart-content" id="chartGroup"></div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
name: "People",
data() {
return {
friendList: [
{
label: '居民好友',
value: '235,625'
},
{
label: '昨日新增',
value: '235'
},
{
label: '昨日流失',
value: '18'
}
],
groupList: [
{
label: '居民群',
value: '235'
},
{
label: '居民群',
value: '235,625'
},
{
label: '昨日新增',
value: '235'
},
{
label: '昨日流失',
value: '18'
}
],
echartDataFriend: null,
echartDataGroup: null
}
},
computed: { ...mapState(['user']) },
methods: {
chartInit() {
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
var option = {
grid: {
left: '5%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#E1E5EF', //x轴的颜色
width: 1, //轴线的宽度
},
},
axisLabel: {
show: true,
textStyle: {
color: '#666',
},
},
data: ['4月', '5月', '6月', '7月', '8月',]
},
yAxis: {
axisLine:{ //y轴
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#666',
},
},
type: 'value',
minInterval: 50,
},
tooltip: {
trigger: 'axis'
},
series: [
{
data: [155, 130, 120, 160, 120, 130, 110],
type: 'line',
areaStyle: {//覆盖区域的渐变色
normal: {
color: {
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
colorStops: [
{
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
},
{
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
}
},
lineStyle: {
normal: {
color: '#2891FF'
}
},
itemStyle : {
normal : {
color:'#2891FF',
}
}
}
]
};
this.echartDataFriend.setOption(option)
this.echartDataGroup.setOption(option)
},
},
created() {
this.$nextTick(() => {
this.chartInit()
})
},
}
</script>
<style lang="scss" scoped>
.People {
padding: 0 30px;
.title {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
padding: 40px 0 24px 0;
span {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
}
}
.tab-content {
display: flex;
padding: 24px 0;
background-color: #fff;
border-radius: 16px;
margin-bottom: 16px;
.item {
flex: 1;
text-align: center;
p {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
line-height: 48px;
}
h3 {
font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000;
line-height: 48px;
}
}
}
.chart-content {
width: 100%;
height: 517px;
background-color: #fff;
border-radius: 8px;
}
}
</style>

BIN
src/project/saas/AppResidentStatistics/img/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B