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

宣发日历

Browse Source
This commit is contained in:
liuye
2022-07-14 17:10:58 +08:00
parent a6cd4d2578
commit 1bfe8afc8b
1 changed files with 203 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue
View File

@@ -5,53 +5,47 @@
<ai-title title="宣发日历"></ai-title>
<div class="flex-content">
<div class="flex-left">
<el-calendar v-model="value">
<div class="date-header">
<p>{{chooseYear}}年{{chooseMonth}}月</p>
<div>
<el-date-picker size="small"
v-model="searchMonth"
type="month" value-format="yyyy-MM"
placeholder="选择日期" @change="searchMonthChange">
</el-date-picker>
</div>
</div>
<el-calendar v-model="calendarDate">
<template
slot="dateCell"
slot-scope="{date, data}" >
<!-- <p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p> -->
<div class="flex-date">
<span>{{data.day.substring(8, 10)}}</span>
<span class="tips" v-if="data.day.substring(5, 7) == month && dateList[data.day.substring(8, 10)] && dateList[data.day.substring(8, 10)].length">{{dateList[data.day.substring(8, 10)].length}}</span>
<span>{{Number(data.day.substring(8, 10))}}</span>
<span class="tips" v-if="data.day.substring(5, 7) == chooseMonth && dateList[Number(data.day.substring(8, 10))] && dateList[Number(data.day.substring(8, 10))].taskList.length">{{dateList[Number(data.day.substring(8, 10))].taskList.length}}</span>
</div>
</template>
</el-calendar>
</div>
<div class="flex-right">
<div class="title">7月19日宣发内容</div>
<div class="title">{{chooseMonth}}月{{chooseDay}}日宣发内容</div>
<div class="list-content">
<el-timeline>
<el-timeline-item placement="top">
<el-timeline-item v-for="(item, index) in taskList" :key="index">
<el-card>
<div class="flex-between">
<p class="item-title">晴风小区志愿者活动</p>
<span class="item-time">10:00</span>
<p class="item-title">{{item.taskTitle}}</p>
<span class="item-time" v-if="item.createTime">{{item.createTime.substring(10, 16)}}</span>
</div>
<div class="item-info item-created">创建人：<span class="name">张三</span></div>
<div class="item-info">创建部门：<span>市委/宣传部/一组</span></div>
<div class="item-info item-created">创建人：<span class="name">{{item.createUserId}}</span></div>
<div class="item-info">创建部门：<span>{{item.createUserDept}}</span></div>
<div class="flex-between">
<div class="item-info">群发类型：<span>群发到居民群</span></div>
<span class="item-btn">详情</span>
</div>
</el-card>
</el-timeline-item>
<el-timeline-item placement="top">
<el-card>
<div class="flex-between">
<p class="item-title">晴风小区志愿者活动</p>
<span class="item-time">10:00</span>
</div>
<div class="item-info item-created">创建人：<span class="name">张三</span></div>
<div class="item-info">创建部门：<span>市委/宣传部/一组</span></div>
<div class="flex-between">
<div class="item-info">群发类型：<span>群发到居民群</span></div>
<div class="item-info">群发类型：<span>{{$dict.getLabel('mstSendType', item.sendType)}}</span></div>
<span class="item-btn">详情</span>
</div>
</el-card>
</el-timeline-item>
</el-timeline>
<ai-empty v-if="!taskList.length" />
</div>
</div>
</div>
@@ -60,10 +54,7 @@
<div class="flex-between mar-b16">
<ai-title title="宣发效果"></ai-title>
<div class="right-search">
<div class="time-select active">近7天</div>
<div class="time-select">近30天</div>
<div class="time-select">近1年</div>
<div class="time-select">自定义</div>
<div class="time-select" :class="effectType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeEffectType(index)">{{item}}</div>
<ai-select size="medium" clearable placeholder="宣发部门" v-model="type" :selectList="dict.getDict('yesOrNo')"/>
</div>
</div>
@@ -71,31 +62,31 @@
<div class="flex1">
<div class="header">
<p>累计创建宣发任务数</p>
<h2>3,324</h2>
<h2>{{effectData.createCount}}</h2>
</div>
<div class="chart-content">
<div class="chart-title">宣发任务数</div>
<div></div>
<div class="chart-box" id="createChart"></div>
</div>
</div>
<div class="flex1">
<div class="header">
<p>累计执行宣发次数</p>
<h2>3,324</h2>
<h2>{{effectData.executeCount}}</h2>
</div>
<div class="chart-content">
<div class="chart-title">宣发次数</div>
<div></div>
<div class="chart-box" id="executeChart"></div>
</div>
</div>
<div class="flex1 mar-r0">
<div class="header">
<p>累计触达人次</p>
<h2>3,324</h2>
<h2>{{effectData.receiveCount}}</h2>
</div>
<div class="chart-content">
<div class="chart-title">触达人次</div>
<div></div>
<div class="chart-box" id="receiveChart"></div>
</div>
</div>
</div>
@@ -104,18 +95,17 @@
<div class="flex-between mar-b16">
<ai-title title="宣发明细"></ai-title>
<div class="right-search">
<div class="time-select active">近7天</div>
<div class="time-select">近30天</div>
<div class="time-select">近1年</div>
<div class="time-select mar-r0">自定义</div>
<div class="time-select" :class="departType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeDepartType(index)">{{item}}</div>
</div>
</div>
<div id="departBarChart"></div>
</div>
</template>
</ai-list>
</template>
<script>
import * as echarts from "echarts";
export default {
name: 'AppAnnounceStatistics',
@@ -127,45 +117,174 @@
},
data () {
return {
value: new Date(),
dateList: {
'01': {
length: 3
},
'02': {
length: 0
},
},
month: 7,
day: '',
type: ''
calendarDate: new Date(),
dateList: {},
chooseYear: '',
chooseMonth: '',
chooseDay: '',
searchMonth: '',
taskList: [],
effectType: 0, // 宣发效果类型 0：近七天、1：近30天、2：近一年、3：自定义
effectData: {},
createChart: null,
executeChart: null,
receiveChart: null,
departType: 0, // 宣发明细类型 0：近七天、1：近30天、2：近一年、3：自定义
dateTypeList: ['近7天', '近30天', '近1年', '自定义'],
departData: {},
departBarChart: null,
type: '',
}
},
watch: {
value: function() {
var year = this.value.getFullYear();
var month = this.value.getMonth() + 1;
var date=this.value.getDate()
if (date >= 1 && date <= 9) {//日如果小于10就补个0
date = "0" + date;
calendarDate: function() {
var year = '' , month = '', date = ''
if(this.calendarDate.length == 9) { // 月份选择器触发
year = this.calendarDate.substring(0, 4)
month = this.calendarDate.substring(5, 7)
date = this.calendarDate.substring(8, 10)
}else { // 日历点击
year = this.calendarDate.getFullYear();
month = this.calendarDate.getMonth() + 1;
date = this.calendarDate.getDate()
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if(this.chooseMonth != month) { // 日历点击不同月
this.searchMonth = ''
}
}
if (month >= 1 && month <= 9) {//月如果小于10就补个0
month = "0" + month;
this.chooseDay = date
if(this.chooseMonth != month || this.chooseYear != year) { // 不同年/不同月重新请求日历列表
this.getCalendarList(year, month)
} else {
this.getTaskList(date)
}
console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
this.getCalendarList() // 调用接口，把拼接好的参数传到后台
this.chooseMonth = month
this.chooseYear = year
}
},
created() {
this.dict.load("yesOrNo")
var year = this.calendarDate.getFullYear();
var month = this.calendarDate.getMonth() + 1;
var date = this.calendarDate.getDate()
if (month >= 1 && month <= 9) {
month = "0" + month;
}
this.chooseMonth = month
this.chooseYear = year
this.chooseDay = date
this.getCalendarList(year, month)
this.getEffect()
this.getDepart()
this.dict.load("mstSendType")
},
mounted() {
},
methods: {
getCalendarList(){
console.log('接口调用成功');
searchMonthChange() {
this.calendarDate = this.searchMonth + '-1'
},
getCalendarList(year, month){
this.instance.post(`/app/appmasssendingtask/statisticsCalendar?yyyyMM=${year}${month}`).then(res => {
if (res.code == 0) {
this.dateList = res.data
this.getTaskList(this.chooseDay)
}
})
},
getTaskList(day) {
this.taskList = this.dateList[day].taskList
},
changeEffectType(type) {
this.effectType = type
this.getEffect()
},
getEffect() {
this.instance.post(`/app/appmasssendingtask/statisticsEffect?type=${this.effectType}`).then(res => {
if (res.code == 0) {
this.effectData = res.data
var xData = [], createData = [], executeData = [], receiveData = []
res.data.trend.map(e => {
xData.push(e.ymd)
createData.push(e.createCount)
executeData.push(e.executeCount)
receiveData.push(e.receiveCount)
})
this.setLineChart(xData, createData, 'createChart', ['#2891FF'])
this.setLineChart(xData, executeData, 'executeChart', ['#FFB865'])
this.setLineChart(xData, receiveData, 'receiveChart', ['#26D52B'])
}
})
},
setLineChart(xData, yData, id, colorList) {
this[id] = echarts.init(document.querySelector(`#${id}`))
var option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
grid: {
left: '10px',
right: '28px',
bottom: '14px',
top: '30px',
containLabel: true
},
color: colorList,
series: [
{
data: yData,
type: 'line'
}
]
}
this[id].setOption(option)
},
changeDepartType(type) {
this.departType = type
this.getDepart()
},
getDepart() {
this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=${this.departType}`).then(res => {
if (res.code == 0) {
// this.dateList = res.data
// this.getTaskList(this.chooseDay)
}
})
//
},
setBarChart() {
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
}
}
}
</script>
@@ -195,6 +314,15 @@
margin-top: 16px;
.flex-left{
width: 50%;
.date-header{
padding: 12px 16px;
border: 1px solid #eee;
display: flex;
justify-content: space-between;
p{
line-height: 32px;
}
}
.flex-date{
display: flex;
justify-content: space-between;
@@ -329,10 +457,18 @@
color: #333;
line-height: 24px;
}
.chart-box{
width: 100%;
height: 280px;
}
}
}
}
#departBarChart{
width: 100%;
height: 300px;
}
}
@@ -351,7 +487,7 @@
color: #888;
}
::v-deep .el-calendar__header{
border: 1px solid #eee;
display: none;
}
::v-deep .el-calendar__body{
padding: 0;