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:
shijingjing
2022-07-13 16:59:58 +08:00
parent 1a0d42890d
commit 0b7ae25121
4 changed files with 372 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
View File

@@ -55,9 +55,6 @@
</div> </div>
<div id="columnarEcharts"></div> <div id="columnarEcharts"></div>
</div> </div>
<div class="pieEcharts">
<div id="pieEcharts"></div>
</div>
<u-popup v-model="filterShow" mode="bottom"> <u-popup v-model="filterShow" mode="bottom">
<div class="popup"> <div class="popup">
@@ -99,7 +96,6 @@ export default {
brokenEcharts2: null, brokenEcharts2: null,
brokenEcharts3: null, brokenEcharts3: null,
columnarEcharts: null, columnarEcharts: null,
pieEcharts: null,
filterShow: false, filterShow: false,
} }
}, },
@@ -112,7 +108,6 @@ export default {
this.getBrokenEcharts2() this.getBrokenEcharts2()
this.getBrokenEcharts3() this.getBrokenEcharts3()
this.getColumnarEcharts() this.getColumnarEcharts()
this.getPieEcharts()
}, },
methods: { methods: {
showMore() {}, showMore() {},
@@ -319,46 +314,7 @@ export default {
] ]
}) })
}, },
// 带百分比饼图
getPieEcharts() {
this.pieEcharts = echarts.init(document.getElementById('pieEcharts'))
this.pieEcharts.setOption( {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
color:['#1684fc','#ccc'],
series: [
{
name: '群发送达率',
type: 'pie',
radius: ['60', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
},
labelLine: {
show: false
},
data: [
{value: 10, name: '群发送达率', label:{
normal:{
show:true,
formatter: '{d}%\n群发送达率',
textStyle: {
fontSize: 16,
},
}}
},
{value: 120, name: '邮件营销'}
]
}
]
})
}
} }
} }
</script> </script>
@@ -464,21 +420,18 @@ export default {
} }
.brokenEcharts, .brokenEcharts,
.columnarEcharts, .columnarEcharts {
.pieEcharts {
background: #FFF; background: #FFF;
#brokenEcharts1, #brokenEcharts1,
#brokenEcharts2, #brokenEcharts2,
#brokenEcharts3, #brokenEcharts3,
#columnarEcharts, #columnarEcharts {
#pieEcharts {
width: 100%; width: 100%;
height: 400px; height: 400px;
background: #F9F9F9; background: #F9F9F9;
border-radius: 8px; border-radius: 8px;
} }
} }
.popup{ .popup{

106
src/project/saas/AppPropagandaStatistics/detail.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<div class="detail">
<div class="task">
<div class="task_title">群发客户群</div>
<div class="task_content">
<div class="item">
<span>任务名称</span>
<span>居民社保最新政策</span>
</div>
<div class="item">
<span>创建人</span>
<span>居民社保最新政策</span>
</div>
<div class="item">
<span>所在部门</span>
<span>居民社保最新政策</span>
</div>
<div class="item">
<span>群发时间</span>
<span>居民社保最新政策</span>
</div>
</div>
</div>
<div class="info">
<div class="scope">
<span>群发范围</span>
<span>按条件筛选的全部X个客户群</span>
</div>
<div class="content">
<p>群发内容</p>
<div></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {},
onShow() {
document.title = "群发审批"
}
}
</script>
<style lang="scss" scoped>
.detail {
padding: 32px;
box-sizing: border-box;
.task {
margin-bottom: 24px;
background: #FFF;
border-radius: 8px;
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
.task_title {
padding: 26px 32px;
box-sizing: border-box;
border-bottom: 2px solid #DDDDDD;
}
.task_content {
padding: 0 32px 26px 32px;
box-sizing: border-box;
.item {
display: flex;
padding-top: 26px;
box-sizing: border-box;
span:first-child {
width: 160px;
color: #999999;
}
span:last-child {
width: calc(100% - 160px);
}
}
}
}
.info {
background: #FFF;
border-radius: 8px;
padding: 26px 32px;
box-sizing: border-box;
.scope {
display: flex;
margin-bottom: 16px;
span:first-child {
width: 160px;
color: #999;
}
span:last-child {
width: calc(100% - 160px);
}
}
.content {
p {
color: #999;
}
}
}
}
</style>

261
src/project/saas/AppPropagandaStatistics/groupSendDetail.vue
View File

@@ -1,18 +1,269 @@
<template> <template>
<div class="groupSendDetail"></div> <div class="groupSendDetail">
<AiTopFixed>
<div class="tab-select">
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{ item }}<span></span>
</div>
</div>
</AiTopFixed>
<div class="content">
<div class="header">
<div class="header_left">
<div>防疫宣传群发通知</div>
<div>创建时间: 2022-07-12 14:54</div>
</div>
<div class="header_right" @click="toDetail">查看详情</div>
</div>
<div class="pieEcharts">
<div class="pie_info">
<div class="tips">数据更新于2022-07-06 09:18:56</div>
<div class="pie_card">
<div id="pieEcharts"></div>
<div class="pie_right">
<div>计划送达居民群: <span>10</span></div>
<div>未送达居民群: <span>10</span></div>
<div>已送达居民群: <span>10</span></div>
<div>无法送达居民群: <span>10</span></div>
</div>
</div>
<div class="btn">提醒成员发送</div>
</div>
</div>
<div class="list_content">
<div class="list_card">
<div class="tab">
<u-subsection :list="subsection" :current="subIndex"></u-subsection>
</div>
<AiTable :data="tableData0" :colConfigs="colConfigs0" v-if="tabIndex == 0"/>
<AiTable :data="tableData1" :colConfigs="colConfigs1" v-if="tabIndex == 1"/>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import echarts from 'echarts'
export default { export default {
data() { data() {
return {} return {
tabs: ['成员统计', '居民群统计'],
tabIndex: 0,
pieEcharts: null,
subsection: [
{name: '未送达'},
{name: '已送达'},
{name: '无法送达'}
],
subIndex: 0,
tableData0: [],
tableData1: [],
}
}, },
methods: {}, computed: {
onShow() {}, colConfigs0() {
return [
{ label: '成员', prop: '', width: '240rpx', dict: 'householdRelation' },
{ label: '预计未送达居民', prop: ''},
]
},
colConfigs1() {
return [
{ label: '居民群', prop: '', width: '240rpx', dict: 'householdRelation' },
{ label: '群人数', prop: '', width: '200rpx' },
{ label: '群主', prop: '', dict: 'sex' },
]
},
},
methods: {
tabClick(index) {
this.tabIndex = index
},
toDetail() {
uni.navigateTo({url: `./detail`})
},
// 带百分比饼图
getPieEcharts() {
this.pieEcharts = echarts.init(document.getElementById('pieEcharts'))
this.pieEcharts.setOption( {
// legend: {
// selectedMode:false
// },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
color:['#1684fc','#ccc'],
series: [
{
name: '群发送达率',
type: 'pie',
radius: ['65', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
},
labelLine: {
show: false
},
data: [
{value: 10, name: '群发送达率', label:{
normal:{
show:true,
formatter: '{d}%\n群发送达率',
textStyle: {
fontSize: 16,
},
}}
},
{value: 120,}
]
}
]
})
}
},
onShow() {
document.title = "群发居民群统计"
},
mounted() {
this.getPieEcharts()
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.groupSendDetail {} .groupSendDetail {
::v-deep .AiTopFixed .content {
padding: 0;
}
.tab-select {
width: 100%;
height: 96px;
line-height: 96px;
background: #3975C6;
display: flex;
.item {
flex: 1;
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #CDDCF0;
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
position: relative;
color: #fff;
span {
width: 48px;
height: 4px;
background: #FFF;
position: absolute;
bottom: 14px;
left: 50%;
margin-left: -24px;
}
}
}
.header {
height: 160px;
padding: 32px;
box-sizing: border-box;
background: #FFF;
display: flex;
align-items: center;
.header_left {
width: calc(100% - 120px);
div:first-child {
color: #000000;
font-size: 32px;
font-weight: 600;
margin-bottom: 10px;
}
div:last-child {
color: #666666;
}
}
.header_right {
width: 120px;
color: #5297FF;
}
}
.pieEcharts {
width: 100%;
padding: 32px;
box-sizing: border-box;
.pie_info {
background: #FFF;
border-radius: 16px;
padding-bottom: 20px;
box-sizing: border-box;
.tips {
color: #666666;
padding: 40px 32px 0 32px;
box-sizing: border-box;
}
.pie_card {
display: flex;
width: 100%;
align-items: center;
#pieEcharts {
// flex: 1;
width: 60%;
height: 400px;
}
.pie_right {
// flex: 1;
width: 40%;
div {
margin-bottom: 10px;
}
}
}
.btn {
margin: 0 auto;
width: 90%;
height: 80px;
line-height: 80px;
text-align: center;
color: #FFF;
background: #3AA0FF;
border-radius: 8px;
}
}
}
.list_content {
padding: 0 32px;
box-sizing: border-box;
.list_card {
background: #FFF;
border-radius: 16px;
padding: 30px 30px;
.tab {
margin-bottom: 34px;
}
}
}
}
</style> </style>

8
src/project/saas/AppPropagandaStatistics/groupSendResident.vue
View File

@@ -9,7 +9,7 @@
</div> </div>
</AiTopFixed> </AiTopFixed>
<div class="resident_list"> <div class="resident_list">
<div class="card"> <div class="card" @click="toDetail">
<div class="card_title"> <div class="card_title">
<div class="card_left">晴风小区志愿者活动</div> <div class="card_left">晴风小区志愿者活动</div>
<div class="card_right"><span></span>进行中</div> <div class="card_right"><span></span>进行中</div>
@@ -30,7 +30,11 @@ export default {
name: '' name: ''
} }
}, },
methods: {}, methods: {
toDetail() {
uni.navigateTo({url: `./groupSendDetail`})
}
},
onShow() { onShow() {
document.title = '群发居民群' document.title = '群发居民群'
}, },