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 10:52:43 +08:00
parent c8aaa59311
commit 9eb1d579b0
2 changed files with 279 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div class="AppPropagandaStatistics">
<div class="calendar_header">
<u-section title="宣发日历" :show-line="false" sub-title="查看更多"></u-section>
<u-section title="宣发日历" :show-line="false" sub-title="查看更多" @click="readMore"></u-section>
</div>
<div class="threeDays">
<div class="yesterday">
@@ -23,22 +23,66 @@
<!-- 折线图 -->
<div class="brokenEcharts">
<div>
<div class="broken_title">
<div class="broken_left">宣发效果</div>
<div class="broken_right" @click="filterShow = true">筛选</div>
</div>
<div class="broken_statistics">
<div class="broken_item">
<div>创建宣发任务数</div>
<div>200</div>
</div>
<div class="broken_item">
<div>执行宣发次数</div>
<div>200</div>
</div>
<div class="broken_item">
<div>触达人次</div>
<div>200</div>
</div>
</div>
<div id="brokenEcharts"></div>
</div>
<div class="columnarEcharts">
<div class="broken_title">
<div class="broken_left">宣发明细</div>
<div class="broken_right"></div>
</div>
<div id="columnarEcharts"></div>
</div>
<div class="pieEcharts">
<div id="pieEcharts"></div>
</div>
<u-popup v-model="filterShow" mode="bottom">
<div class="popup">
<div class="tips"></div>
<div class="title">
<div class="cancel" @click.stop="filterShow=false">取消</div>
<p>筛选条件</p>
<div class="confirm" @click.stop="selectConfirm">确定</div>
</div>
<scroll-view class="select-content" scroll-y="true">
<div class="type-list">
<div class="type-title">宣发时间</div>
<!-- <div class="item" v-for="(item, index) in quotaList" :key="index" :class="index == quotaIndex ? 'active' : ''" @click.stop="quotaIndex=index">{{item.label}}</div> -->
</div>
<div class="type-list">
<div class="type-title">宣发部门</div>
<!-- <div class="item" v-for="(item, index) in typeList" :key="index" :class="index == typeIndex ? 'active' : ''" @click.stop="typeIndex=index">{{item.dictName}}</div> -->
</div>
<div>
<!-- <div>重置</div>
<div>确认</div> -->
</div>
</scroll-view>
</div>
</u-popup>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'AppPropagandaStatistics',
@@ -49,6 +93,7 @@ export default {
brokenEcharts: null,
columnarEcharts: null,
pieEcharts: null,
filterShow: false,
}
},
@@ -63,6 +108,9 @@ export default {
methods: {
showMore() {},
readMore() {
uni.navigateTo({url: `./calendarInfo`})
},
// 折线图
getBrokenEcharts() {
this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
@@ -73,21 +121,42 @@ export default {
legend: {
selectedMode: false,
orient: 'horizontal',
padding: [25,0,0,0],
data: ['触达人次', '宣发次数', '宣发任务数']
},
grid: {
left: '2%',
right: '8%',
bottom: '3%',
right: '5%',
bottom: '2%',
containLabel: true
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
],
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: ['2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
}
},
series: [
{
@@ -112,15 +181,24 @@ export default {
getColumnarEcharts() {
this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
this.columnarEcharts.setOption({
title: {
text: '宣发明细'
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: ['卫健委', '法院', '团委', '扶贫办', '警察局']
},
yAxis: {
type: 'value'
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
@@ -226,9 +304,50 @@ export default {
}
.brokenEcharts {
padding: 32px 0 60px 0,
.brokenEcharts,
.columnarEcharts {
margin: 24px 0 24px 0;
padding: 0 32px 32px 32px;
box-sizing: border-box;
.broken_title {
display: flex;
justify-content: space-between;
height: 96px;
line-height: 96px;
.broken_left {
font-size: 32px;
font-weight: 600;
}
.broken_right {
font-size: 24px;
color: #3399FF;
}
}
.broken_statistics {
display: flex;
padding: 24px 0;
box-sizing: border-box;
.broken_item {
flex: 1;
text-align: center;
div:first-child {
font-size: 24px;
color: #999999;
padding: 10px 0;
}
div:last-child {
font-size: 36px;
color: #000000;
font-weight: 600;
}
}
}
}
.brokenEcharts,
@@ -241,8 +360,83 @@ export default {
#pieEcharts {
width: 100%;
height: 400px;
background: #F9F9F9;
border-radius: 8px;
}
}
.popup{
padding: 0 32px;
padding-bottom: 60px;
.tips{
width: 80px;
height: 6px;
background: #DDDDDD;
border-radius: 4px;
margin: 32px auto 8px auto;
}
.title{
height: 48px;
line-height: 48px;
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222;
padding-bottom: 32px;
.cancel{
display: inline-block;
width: 200px;
color: #aaa;
}
.confirm{
display: inline-block;
width: 200px;
text-align: right;
color: #333;
}
p{
display: inline-block;
width: calc(100% - 400px);
text-align: center;
font-size: 28px;
}
}
.select-content{
height: calc(100% - 100px);
overflow-y: scroll;
}
.type-list{
margin-bottom: 32px;
.type-title{
line-height: 108px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
}
.item{
display: inline-block;
width: 210px;
text-align: center;
line-height: 64px;
background: #F3F4F7;
border-radius: 4px;
// padding: 0 80px;
margin: 0 16px 16px 0;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
}
.active{
background: #1365DD;
color: #fff;
}
}
}
::v-deep .popup{
height: 800px;
}
}