宣发日历
This commit is contained in:
shijingjing
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,23 @@
|
||||
<template>
|
||||
<div class="calendarInfo">
|
||||
<uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
|
||||
|
||||
<div class="dailyMatters">
|
||||
<div>
|
||||
<div :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
|
||||
<div>11:00</div>
|
||||
<div>晴风小区志愿者活动</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
|
||||
<div>11:00</div>
|
||||
<div>晴风小区志愿者活动</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="readMore">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -35,9 +52,63 @@ export default {
|
||||
}
|
||||
::v-deep .uni-calendar__header {
|
||||
height: 76px;
|
||||
justify-content: space-around;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
::v-deep .uni-calendar__weeks-day {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
::v-deep .uni-calendar__weeks-day-text,
|
||||
::v-deep .uni-calendar__header-text,
|
||||
::v-deep .uni-calendar-item__weeks-box-text {
|
||||
font-size: 28px;
|
||||
}
|
||||
::v-deep .uni-calendar__header-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-left-color: #5297FF;
|
||||
border-top-color: #5297FF;
|
||||
}
|
||||
::v-deep .uni-calendar__backtoday {
|
||||
display: none
|
||||
}
|
||||
|
||||
.dailyMatters {
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
.daily_item {
|
||||
background: #FFF;
|
||||
padding: 30px 20px 30px 50px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 0px 16px 16px 0px;
|
||||
|
||||
div:first-child {
|
||||
color: #999999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.color1 {
|
||||
border-left: 6px solid #3AA0FF;
|
||||
}
|
||||
.color2 {
|
||||
border-left: 6px solid #50CB74;
|
||||
}
|
||||
.color3 {
|
||||
border-left: 6px solid #9D73D9;
|
||||
}
|
||||
.color4 {
|
||||
border-left: 6px solid #435289;
|
||||
}
|
||||
|
||||
.readMore {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
color: #3F8DF5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user