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:
aixianling
2024-10-31 14:34:57 +08:00
parent 6a833be062
commit 8c56cf808b
2165 changed files with 4116 additions and 8716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

903
library/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue Normal file
View File

@@ -0,0 +1,903 @@
<template>
<div class="AppPropagandaStatistics">
<div class="calendar_header">
<u-section
title="宣发日历"
:show-line="false"
sub-title="查看更多"
@click="readMore"
></u-section>
</div>
<div class="threeDays">
<!-- 昨天 -->
<div class="yesterday">
<div class="itemYesterday">昨天<span>{{ nowMonth }}.{{ nowDate - 1 }}</span></div>
<div v-if="calendarList && calendarList[nowDate - 1] && calendarList[nowDate - 1].taskList.length">
<div v-for="(item,index) in calendarList[nowDate - 1].taskList.slice(0, 2)" :key="index">{{item.taskTitle}}</div>
<div v-if="calendarList[nowDate - 1].taskList.length > 2 && showYes">
<div v-for="(item,index) in calendarList[nowDate - 1].taskList.slice(2, calendarList[nowDate - 1].taskList.length)" :key="index">{{item.taskTitle}}</div>
</div>
</div>
<div v-if="!(calendarList && calendarList[nowDate - 1] && calendarList[nowDate - 1].taskList.length)">暂无宣发任务</div>
<div class="isShow" v-if="calendarList && calendarList[nowDate - 1] && calendarList[nowDate - 1].taskList.length && calendarList[nowDate - 1].taskList.length > 2" @click="showYes = !showYes">{{ showYes ? "收起" : "展开" }}</div>
</div>
<!-- 今天 -->
<div class="today">
<div class="itemToday">今天<span>{{ nowMonth }}.{{ nowDate }}</span></div>
<div v-if="calendarList && calendarList[nowDate] && calendarList[nowDate].taskList.length">
<div v-for="(item,index) in calendarList[nowDate].taskList.slice(0, 2)" :key="index">{{item.taskTitle}}</div>
<div v-if="calendarList[nowDate].taskList.length > 2 && showTo">
<div v-for="(item,index) in calendarList[nowDate].taskList.slice(2, calendarList[nowDate].taskList.length)" :key="index">{{item.taskTitle}}</div>
</div>
</div>
<div v-if="!(calendarList && calendarList[nowDate] && calendarList[nowDate].taskList.length>0)">暂无宣发任务</div>
<div class="isShow" v-if="calendarList && calendarList[nowDate] && calendarList[nowDate].taskList.length && calendarList[nowDate].taskList.length > 2" @click="showTo=!showTo">{{ showTo ? "收起" : "展开" }}</div>
</div>
<!-- 明天 -->
<div class="tomorrow">
<div class="itemTomorrow">明天<span>{{ nowMonth }}.{{ nowDate + 1 }}</span></div>
<div v-if="calendarList && calendarList[nowDate + 1] && calendarList[nowDate + 1].taskList.length">
<div v-for="(item,index) in calendarList[nowDate + 1].taskList.slice(0, 2)" :key="index">{{item.taskTitle}}</div>
<div v-if="calendarList[nowDate + 1].taskList.length > 2 && showTom">
<div v-for="(item,index) in calendarList[nowDate + 1].taskList.slice(2, calendarList[nowDate + 1].taskList.length)" :key="index">{{item.taskTitle}}</div>
</div>
</div>
<div v-if="!(calendarList && calendarList[nowDate + 1] && calendarList[nowDate + 1].taskList.length)">暂无宣发任务</div>
<div class="isShow" v-if="calendarList && calendarList[nowDate + 1] && calendarList[nowDate + 1].taskList.length && calendarList[nowDate + 1].taskList.length > 2" @click="showTom=!showTom">{{ showTom ? "收起" : "展开" }}</div>
</div>
</div>
<!-- 折线图 -->
<div class="brokenEcharts">
<div class="broken_title">
<div class="broken_left">宣发效果</div>
<div class="broken_right" @click="filterShow = true">
<img src="./images/shaixuan.png" alt="" />筛选
</div>
</div>
<div class="broken_statistics">
<div class="broken_item">
<div>创建宣发任务数</div>
<div>{{ data.createCount || 0 }}</div>
</div>
<div class="broken_item">
<div>执行宣发次数</div>
<div>{{ data.executeCount || 0 }}</div>
</div>
<div class="broken_item">
<div>触达人次</div>
<div>{{ data.receiveCount || 0 }}</div>
</div>
</div>
<div class="title">宣发任务数</div>
<div id="brokenEcharts3"></div>
<div class="title" >宣发次数</div>
<div id="brokenEcharts2"></div>
<div class="title" >触达人次</div>
<div id="brokenEcharts1"></div>
</div>
<div class="columnarEcharts" v-if="colData.length">
<div class="broken_title">
<div class="broken_left">宣发明细</div>
<div class="broken_right">
<span
:class="detailType == 0 ? 'active' : ''"
@click="detailType = 0, getColData()"
>近7天</span
>
<span
:class="detailType == 1 ? 'active' : ''"
@click="detailType = 1, getColData()"
>近30天</span
>
<span
:class="detailType == 2 ? 'active' : ''"
@click="detailType = 2, getColData()"
>近1年</span
>
</div>
</div>
<div id="columnarEcharts"></div>
</div>
<u-popup v-model="filterShow" mode="bottom" border-radius="14">
<div class="popup">
<div class="tips"></div>
<div class="title">
<div
class="cancel"
@click.stop="filterShow = false, timeSelect = 0"
>
取消
</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 timeList"
:key="index"
:class="index == timeSelect ? 'active' : ''"
@click.stop="checkTime(index)"
>
{{ item }}
</div>
</div>
<div class="type-list">
<div class="type-title">宣发部门</div>
<div @click="getDept" class="dept">
<div v-if="departmentId">
<AiOpenData type="departmentName" :openid="departmentId"/>
</div>
<div v-if="!departmentId">请选择部门</div>
<u-icon name="arrow-right"></u-icon>
</div>
</div>
</scroll-view>
<div class="popBtn">
<div @click="reset">重置</div>
<div @click="selectConfirm">确认</div>
</div>
</div>
<u-popup v-model="customShow" mode="bottom" border-radius="14" closeable>
<div class="customPop">
<div class="startTime">
<div>开始时间：</div>
<div style="display: flex; justify-content: space-between">
<u-input
v-model="startTime"
placeholder="请选择开始时间"
disabled
@click="showStart = true"
/>
<u-icon name="arrow-right"></u-icon>
</div>
</div>
<div class="endTime">
<div>结束时间：</div>
<div style="display: flex; justify-content: space-between">
<u-input
v-model="endTime"
placeholder="请选择结束时间"
disabled
@click="showEnd = true"
/>
<u-icon name="arrow-right"></u-icon>
</div>
</div>
<u-picker
mode="time"
v-model="showStart"
@confirm="confirmStart"
></u-picker>
<u-picker
mode="time"
v-model="showEnd"
@confirm="confirmEnd"
></u-picker>
<div class="timeBtn" @click="handleTime">确定</div>
</div>
</u-popup>
</u-popup>
</div>
</template>
<script>
import echarts from "echarts";
import { mapState, mapActions } from 'vuex'
export default {
name: "AppPropagandaStatistics",
appName: "宣发统计",
data() {
return {
isShow: false,
brokenEcharts1: null,
brokenEcharts2: null,
brokenEcharts3: null,
columnarEcharts: null,
filterShow: false,
customShow: false,
showYes: false,
showTo: false,
showTom: false,
timeList: ["近7天", "近30天", "近1年", "自定义"],
timeSelect: 0,
start: "",
end: "",
departmentId: '',
departList: [],
nowMonth: "",
nowDate: "",
calendarList: [],
detailType: 0,
timeType: "",
departId: "",
startTime: "",
endTime: "",
start: "",
end: "",
showStart: false,
showEnd: false,
resX: [],
resY: [],
res2Y: [],
res3Y: [],
colData: [],
data: {}
};
},
onShow() {
document.title = "宣发统计";
this.getBrokenDate();
this.getData();
this.getColData();
this.getNowDate();
},
mounted() {
this.getBrokenEcharts1();
this.getBrokenEcharts2();
this.getBrokenEcharts3();
this.getColumnarEcharts();
},
computed: {
...mapState(['user'])
},
methods: {
...mapActions(['initOpenData', 'transCanvas','selectEnterpriseContact']),
checkTime(index) {
if (index == 3) {
this.timeSelect = index;
this.customShow = true;
this.showStart = false;
this.showEnd = false;
} else {
this.timeSelect = index;
}
},
readMore() {
uni.navigateTo({ url: `./calendarInfo` });
},
// 重置
reset() {
this.timeType = 0;
this.timeSelect = 0;
this.start = "";
this.end = "";
this.departId = "";
this.departmentId = "";
},
selectConfirm() {
if (this.timeSelect == 3) {
this.detailType = this.timeSelect;
this.start = this.startTime;
this.end = this.endTime;
} else {
this.detailType = this.timeSelect || 0;
}
this.departId = this.departmentId
this.getBrokenDate();
this.filterShow = false;
},
confirmStart(val) {
this.startTime = val.year + "-" + val.month + "-" + val.day;
},
confirmEnd(val) {
this.endTime = val.year + "-" + val.month + "-" + val.day;
},
handleTime() {
this.start = this.startTime;
this.end = this.endTime;
let startTmp = this.start.split("-");
let endTmp = this.end.split("-");
let stT = new Date(startTmp[0], startTmp[1], startTmp[2]);
let edT = new Date(endTmp[0], endTmp[1], endTmp[2]);
if (stT.getTime() > edT.getTime()) {
this.$u.toast("开始日期不能大于结束日期！");
this.customShow = true
return
}
this.customShow = false;
},
getNowDate() {
let date = new Date();
this.nowDate = date.getDate();
this.nowMonth = date.getMonth() + 1;
},
// 宣发日历
getData() {
this.$http
.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
params: {},
})
.then((res) => {
if (res?.data) {
this.calendarList = res.data;
}
});
},
// 宣发效果
getBrokenDate() {
this.$http
.post(`/app/appmasssendingtask/statisticsEffect`, null, {
params: {
type: this.timeSelect,
startTime: this.start,
endTime: this.end,
departId: this.departId
},
})
.then((res) => {
if (res?.data) {
this.data = res.data;
if (this.timeType == 0) {
this.resX = res.data.trend.map(
(e) =>
e.ymd.substring(5, 7) + "-" + e.ymd.substring(8, 10)
);
} else if (this.timeType == 1) {
this.resX = res.data.trend.map(
(e) =>
e.ymd.substring(5, 7) + "-" + e.ymd.substring(8, 10)
);
} else if (this.timeType == 2) {
this.resX = res.data.trend.map(
(e) =>
e.ymd.substring(0, 4) + "-" + e.ymd.substring(5, 7)
);
}
this.resY = res.data.trend.map((e) => e.receiveCount);
this.res2Y = res.data.trend.map((e) => e.executeCount);
this.res3Y = res.data.trend.map((e) => e.createCount);
this.getBrokenEcharts1();
this.getBrokenEcharts2();
this.getBrokenEcharts3();
}
});
},
// 触发人数
getBrokenEcharts1() {
this.brokenEcharts1 = echarts.init(
document.getElementById("brokenEcharts1")
);
this.brokenEcharts1.setOption({
tooltip: {
trigger: "axis",
},
grid: {
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
dataZoom: [
{
type: "slider",
xAxisIndex: [0],
filterMode: "filter",
},
],
xAxis: {
type: "category",
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: this.resX,
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
type: "line",
data: this.resY,
lineStyle: {
color: "#4B87FE",
},
itemStyle: {
color: "#4E8EEE",
},
},
],
});
},
// 宣发次数
getBrokenEcharts2() {
this.brokenEcharts2 = echarts.init(
document.getElementById("brokenEcharts2")
);
this.brokenEcharts2.setOption({
tooltip: {
trigger: "axis",
},
grid: {
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
dataZoom: [
{
type: "slider",
xAxisIndex: [0],
filterMode: "filter",
},
],
calculable: true,
xAxis: {
type: "category",
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: this.resX,
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
type: "line",
data: this.res2Y,
lineStyle: {
color: "#32C5FF",
},
itemStyle: {
color: "#31C1FA",
},
},
],
});
},
// 宣发任务数
getBrokenEcharts3() {
this.brokenEcharts3 = echarts.init(
document.getElementById("brokenEcharts3")
);
this.brokenEcharts3.setOption({
tooltip: {
trigger: "axis",
},
grid: {
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
dataZoom: [
{
type: "slider",
xAxisIndex: [0],
filterMode: "filter",
},
],
xAxis: {
type: "category",
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: this.resX,
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
type: "line",
data: this.res3Y,
lineStyle: {
color: "#FFAA44",
},
itemStyle: {
color: "#FFAA44",
},
},
],
});
},
// 宣发明细
getColData() {
this.$http.post(`/app/appmasssendingtask/statisticsDepart`, null, {
params: {
type: this.detailType,
},
})
.then((res) => {
if (res.code ===0) {
if(res.data && res.data.length) {
this.colData = res.data
let items = [], xData = [], yData = []
res.data.forEach((item) => {
const i = {type: 'departmentName', id: item.deptId, corpid: this.user.corpId}
items.push(i)
yData.push(item.taskCount)
})
this.initOpenData({canvas:true})
setTimeout(() => {
this.transCanvas(items).then((data) => {
data.items.map((a) => {
xData.push(a.data)
})
this.getColumnarEcharts(xData, yData)
})
}, 2000)
}
}
});
},
// 柱状图
getColumnarEcharts(xData, yData) {
this.columnarEcharts = echarts.init(
document.getElementById("columnarEcharts")
);
this.columnarEcharts.setOption({
dataZoom: [
{
type: "slider",
xAxisIndex: [0],
filterMode: "filter",
},
],
xAxis: {
type: "category",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: xData,
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
data: yData,
itemStyle: {
normal: {
color: "#5087ec",
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
fontSize: 13,
color: '#666'
}
},
},
},
type: "bar",
barWidth: 22,
barGap: '20%',
},
],
});
},
// 选择部门
getDept() {
this.selectEnterpriseContact({
fromDepartmentId: 0,
mode: "single",
type: ["department"],
selectedDepartmentIds: this.departList?.map(e => e.id)
}).then((res)=>{
if(res?.departmentList) {
this.departmentId = res.departmentList[0].id
}
}
).catch((err) => {
console.log(err);
})
},
},
};
</script>
<style lang="scss" scoped>
.AppPropagandaStatistics {
.calendar_header {
padding: 26px 32px;
box-sizing: border-box;
background: #fff;
::v-deep .u-section__title__text {
font-size: 32px;
}
}
.threeDays {
background: #fff;
padding: 8px 32px 12px 32px;
box-sizing: border-box;
.yesterday,
.today,
.tomorrow {
background: #f7f8fa;
margin-bottom: 32px;
padding: 30px 0 30px 40px;
box-sizing: border-box;
.isShow {
color: #3aa0ff;
}
.itemYesterday,
.itemToday,
.itemTomorrow {
color: #999999;
span {
margin-left: 20px;
}
}
}
.yesterday {
border-left: 6px solid #fbd444;
}
.today {
border-left: 6px solid #50cb74;
}
.tomorrow {
border-left: 6px solid #3aa0ff;
}
}
.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;
align-items: center;
.broken_left {
font-size: 32px;
font-weight: 600;
}
.broken_right {
font-size: 24px;
img {
width: 28px;
height: 28px;
}
span {
margin-right: 12px;
width: 108px;
height: 48px;
line-height: 48px;
text-align: center;
display: inline-block;
border: 1px solid #ddd;
border-radius: 8px;
}
.active {
background: #3399ff;
color: #fff;
}
}
}
.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;
}
}
}
.title {
padding: 30px 0;
box-sizing: border-box;
font-size: 32px;
font-weight: 600;
}
}
.brokenEcharts,
.columnarEcharts {
background: #fff;
#brokenEcharts1,
#brokenEcharts2,
#brokenEcharts3,
#columnarEcharts {
width: 100%;
height: 400px;
background: #f9f9f9;
border-radius: 8px;
}
}
.popup {
box-sizing: border-box;
.tips {
width: 80px;
height: 6px;
background: #dddddd;
border-radius: 4px;
padding: 0 32px;
box-sizing: border-box;
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: 0 32px;
box-sizing: border-box;
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 {
padding: 0 32px;
box-sizing: border-box;
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;
margin: 0 16px 16px 0;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
}
.active {
background: #1365dd;
color: #fff;
}
.dept {
display: flex;
justify-content: space-between
}
}
.popBtn {
display: flex;
height: 98px;
line-height: 98px;
div {
width: 50%;
border: 2px solid #3399ff;
text-align: center;
}
div:first-child {
color: #3399ff;
}
div:last-child {
color: #fff;
background: #3399ff;
}
}
}
.customPop {
padding: 80px 32px 20px 32px;
box-sizing: border-box;
height: 660px;
.startTime,
.endTime {
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.timeBtn {
width: 100%;
background: #3399ff;
height: 80px;
line-height: 80px;
text-align: center;
border-radius: 16px;
color: #fff;
margin-top: 164px;
}
::v-deep .u-close {
z-index: auto;
}
}
}
</style>