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-15 10:44:31 +08:00
parent d1d4287c06
commit 936ba62f1c
4 changed files with 573 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,47 +1,115 @@
<template> <template>
<div class="AppPropagandaStatistics"> <div class="AppPropagandaStatistics">
<div class="calendar_header"> <div class="calendar_header">
<u-section title="宣发日历" :show-line="false" sub-title="查看更多" @click="readMore"></u-section> <u-section
title="宣发日历"
:show-line="false"
sub-title="查看更多"
@click="readMore"
></u-section>
</div> </div>
<div class="threeDays"> <div class="threeDays">
<div class="yesterday"> <div class="yesterday">
<div class="itemYesterday">昨天<span>{{ nowMonth }}.{{ nowDate - 1 }}</span></div> <div class="itemYesterday">
<!-- <div v-if="calendarList[nowDate - 1].taskList">晴风小区志愿者活动</div> --> 昨天<span>{{ nowMonth }}.{{ nowDate - 1 }}</span>
<!-- <div v-if="!calendarList[nowDate - 1].taskList">今日暂无宣发任务</div> --> </div>
<div
v-if="
calendarList &&
calendarList[nowDate - 1] &&
calendarList[nowDate - 1].taskList.length > 0
"
>
晴风小区志愿者活动
</div>
<div
v-if="
!(
calendarList &&
calendarList[nowDate - 1] &&
calendarList[nowDate - 1].taskList.length > 0
)
"
>
今日暂无宣发任务
</div>
</div> </div>
<div class="today"> <div class="today">
<div class="itemToday">今天<span>{{ nowMonth }}.{{ nowDate }}</span></div> <div class="itemToday">
<!-- <div v-if="calendarList[nowDate].taskList">晴风小区志愿者活动</div> --> 今天<span>{{ nowMonth }}.{{ nowDate }}</span>
<!-- <div v-if="!calendarList[nowDate].taskList">今日暂无宣发任务</div> --> </div>
<div
v-if="
calendarList &&
calendarList[nowDate - 1] &&
calendarList[nowDate - 1].taskList.length > 0
"
>
晴风小区志愿者活动
</div>
<div
v-if="
!(
calendarList &&
calendarList[nowDate - 1] &&
calendarList[nowDate - 1].taskList.length > 0
)
"
>
今日暂无宣发任务
</div>
</div> </div>
<div class="tomorrow"> <div class="tomorrow">
<div class="itemTomorrow">明天<span>{{ nowMonth }}.{{ nowDate + 1 }}</span></div> <div class="itemTomorrow">
<!-- <div v-if="calendarList[nowDate + 1].taskList">晴风小区志愿者活动</div> --> 明天<span>{{ nowMonth }}.{{ nowDate + 1 }}</span>
<!-- <div v-if="!calendarList[nowDate + 1].taskList">今日暂无宣发任务</div> --> </div>
<div class="isShow" @click="showMore()">{{ isShow ? '收起' : '展开' }}</div> <div
v-if="
calendarList &&
calendarList[nowDate - 1] &&
calendarList[nowDate - 1].taskList.length > 0
"
>
晴风小区志愿者活动
</div>
<div
v-if="
!(
calendarList &&
calendarList[nowDate - 1] &&
calendarList[nowDate - 1].taskList.length > 0
)
"
>
今日暂无宣发任务
</div>
<div class="isShow" @click="showMore()">
{{ isShow ? "收起" : "展开" }}
</div>
<span></span> <span></span>
</div> </div>
</div> </div>
<!-- 折线图 --> <!-- 折线图 -->
<div class="brokenEcharts"> <div class="brokenEcharts">
<div class="broken_title"> <div class="broken_title">
<div class="broken_left">宣发效果</div> <div class="broken_left">宣发效果</div>
<div class="broken_right" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div> <div class="broken_right" @click="filterShow = true">
<img src="./images/shaixuan.png" alt="" />筛选
</div>
</div> </div>
<div class="broken_statistics"> <div class="broken_statistics">
<div class="broken_item"> <div class="broken_item">
<div>创建宣发任务数</div> <div>创建宣发任务数</div>
<div>200</div> <div>{{ peopleNum }}</div>
</div> </div>
<div class="broken_item"> <div class="broken_item">
<div>执行宣发次数</div> <div>执行宣发次数</div>
<div>200</div> <div>{{ sendNum }}</div>
</div> </div>
<div class="broken_item"> <div class="broken_item">
<div>触达人次</div> <div>触达人次</div>
<div>200</div> <div>{{ predictNum }}</div>
</div> </div>
</div> </div>
<div class="title">触达人次</div> <div class="title">触达人次</div>
@@ -55,9 +123,21 @@
<div class="broken_title"> <div class="broken_title">
<div class="broken_left">宣发明细</div> <div class="broken_left">宣发明细</div>
<div class="broken_right"> <div class="broken_right">
<span :class="detailType ==0? 'active': ''" @click="detailType = 0, getColData()">近七天</span> <span
<span :class="detailType ==1? 'active': ''" @click="detailType = 1, getColData()">近30天</span> :class="detailType == 0 ? 'active' : ''"
<span :class="detailType ==2? 'active': ''" @click="detailType = 2, getColData()">近1年</span> @click="(detailType = 0), getColData()"
>近七天</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> </div>
<div id="columnarEcharts"></div> <div id="columnarEcharts"></div>
@@ -67,21 +147,45 @@
<div class="popup"> <div class="popup">
<div class="tips"></div> <div class="tips"></div>
<div class="title"> <div class="title">
<div class="cancel" @click.stop="filterShow=false,timeSelect=0">取消</div> <div
class="cancel"
@click.stop="(filterShow = false), (timeSelect = 0)"
>
取消
</div>
<p>筛选条件</p> <p>筛选条件</p>
<div class="confirm" @click.stop="selectConfirm">确定</div> <div class="confirm" @click.stop="selectConfirm">确定</div>
</div> </div>
<scroll-view class="select-content" scroll-y="true"> <scroll-view class="select-content" scroll-y="true">
<div class="type-list"> <div class="type-list">
<div class="type-title">宣发时间</div> <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
class="item"
v-for="(item, index) in timeList"
:key="index"
:class="index == timeSelect ? 'active' : ''"
@click.stop="checkTime(index)"
>
{{ item }}
</div>
</div> </div>
<div class="type-list"> <div class="type-list">
<div class="type-title">宣发部门</div> <div class="type-title">宣发部门</div>
<AiPagePicker type="custom" :selected.sync="deptList" nodeKey="id" :ops="{url:`./selectDeptUser`,label:'name'}" valueObj> <AiPagePicker
type="custom"
:selected.sync="deptList"
nodeKey="id"
:ops="{ url: `./selectDeptUser`, label: 'name' }"
valueObj
>
<span class="label" v-if="deptList.length">已选择</span> <span class="label" v-if="deptList.length">已选择</span>
<span v-else style="color:#999;">请选择</span> <span v-else style="color: #999">请选择</span>
<u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;"/> <u-icon
name="arrow-right"
color="#999"
size="24"
style="margin-left: 8px"
/>
</AiPagePicker> </AiPagePicker>
</div> </div>
</scroll-view> </scroll-view>
@@ -91,17 +195,27 @@
</div> </div>
</div> </div>
<u-popup v-model="customShow" mode="bottom" border-radius="14" closeable> <u-popup v-model="customShow" mode="bottom" border-radius="14" closeable>
<div class="customPop"> <div class="customPop">
<div class="startTime"> <div class="startTime">
<div>开始时间：</div> <div>开始时间：</div>
<div> <div>
<u-input v-model="start" placeholder="请输入格式为2022-00-00的开始时间" type="text" clearable/> <u-input
v-model="start"
placeholder="请输入格式为2022-00-00的开始时间"
type="text"
clearable
/>
</div> </div>
</div> </div>
<div class="endTime"> <div class="endTime">
<div>结束时间：</div> <div>结束时间：</div>
<div> <div>
<u-input v-model="end" placeholder="请输入格式为2022-00-00的结束时间" type="text" clearable/> <u-input
v-model="end"
placeholder="请输入格式为2022-00-00的结束时间"
type="text"
clearable
/>
</div> </div>
</div> </div>
<div class="timeBtn" @click="handleTime">确定</div> <div class="timeBtn" @click="handleTime">确定</div>
@@ -112,10 +226,10 @@
</template> </template>
<script> <script>
import echarts from 'echarts'; import echarts from "echarts";
export default { export default {
name: 'AppPropagandaStatistics', name: "AppPropagandaStatistics",
appName: '宣发统计', appName: "宣发统计",
data() { data() {
return { return {
isShow: false, isShow: false,
@@ -125,143 +239,166 @@ export default {
columnarEcharts: null, columnarEcharts: null,
filterShow: false, filterShow: false,
customShow: false, customShow: false,
timeList: ['近7天', '近30天', '近1年','自定义'], timeList: ["近7天", "近30天", "近1年", "自定义"],
timeSelect: 0, timeSelect: 0,
start: '', start: "",
end: '', end: "",
deptList: [], deptList: [],
nowMonth: '', nowMonth: "",
nowDate: '', nowDate: "",
calendarList: [], calendarList: [],
colData: {}, colData: {},
detailType: 0, detailType: 0,
timeType: '', timeType: "",
departId: '', departId: "",
startTime: '', startTime: "",
endTime: '', endTime: "",
x: [], resX: [],
} resY: [],
res2Y: [],
res3Y: [],
peopleNum: "",
sendNum: "",
predictNum: "",
};
}, },
onShow() { onShow() {
document.title = '宣发统计' document.title = "宣发统计";
this.getData() },
this.getColData() created() {
this.getNowDate() this.getBrokenDate();
this.getBrokenDate() this.getData();
this.getColData();
this.getNowDate();
}, },
mounted() { mounted() {
this.getBrokenEcharts1() // this.getBrokenDate();
this.getBrokenEcharts2() this.getBrokenEcharts1();
this.getBrokenEcharts3() this.getBrokenEcharts2();
this.getColumnarEcharts() this.getBrokenEcharts3();
this.getColumnarEcharts();
}, },
methods: { methods: {
showMore() {}, showMore() {},
checkTime(index) { checkTime(index) {
if(index == 3) { if (index == 3) {
this.timeSelect = index this.timeSelect = index;
this.customShow = true this.customShow = true;
} else { } else {
this.timeSelect = index this.timeSelect = index;
} }
}, },
readMore() { readMore() {
uni.navigateTo({url: `./calendarInfo`}) uni.navigateTo({ url: `./calendarInfo` });
}, },
// 重置 // 重置
reset() { reset() {
this.timeType = 0 this.timeType = 0;
this.startTime = '' this.startTime = "";
this.endTime = '' this.endTime = "";
this.departId = '' this.departId = "";
}, },
selectConfirm() { selectConfirm() {
if(this.timeSelect == 3) { if (this.timeSelect == 3) {
this.timeType = this.timeSelect this.timeType = this.timeSelect;
this.startTime = this.start this.startTime = this.start;
this.endTime = this.end this.endTime = this.end;
this.getBrokenDate() this.getBrokenDate();
} else { } else {
this.timeType = this.timeSelect this.timeType = this.timeSelect;
this.getBrokenDate() this.getBrokenDate();
} }
this.filterShow = false this.filterShow = false;
}, },
handleTime() { handleTime() {
this.startTime = this.start this.startTime = this.start;
this.endTime = this.end this.endTime = this.end;
this.customShow = false this.customShow = false;
}, },
getNowDate() { getNowDate() {
let date = new Date() let date = new Date();
this.nowDate = date.getDate() this.nowDate = date.getDate();
this.nowMonth = date.getMonth() + 1 this.nowMonth = date.getMonth() + 1;
}, },
// 宣发日历 // 宣发日历
getData() { getData() {
this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, { this.$http
params: {} .post(`/app/appmasssendingtask/statisticsCalendar`, null, {
}).then((res)=> {{ params: {},
if(res?.data) { })
this.calendarList = res.data .then((res) => {
} {
}}) if (res?.data) {
this.calendarList = res.data;
}
}
});
}, },
// 宣发效果 // 宣发效果
getBrokenDate() { getBrokenDate() {
this.$http.post(`/app/appmasssendingtask/statisticsEffect`, null, { this.$http
params: { .post(`/app/appmasssendingtask/statisticsEffect`, null, {
type: this.timeSelect, params: {
startTime: this.startTime, type: this.timeSelect,
endTime: this.endTime, startTime: this.startTime,
// departId: this.departId endTime: this.endTime,
} // departId: this.departId
}).then(res=>{ },
if(res?.data) { })
if(this.timeType == 0) { .then((res) => {
this.x = res.data.trend.map(e=> e.ymd.substring(5,7) + '月' + e.ymd.substring(8,10) + '日') if (res?.data) {
} else if (this.timeType == 1) { if (this.timeType == 0) {
this.x = res.data.trend.map(e=> e.ymd.substring(5,7) + '月' + e.ymd.substring(8,10) + '日') this.resX = res.data.trend.map((e) =>e.ymd.substring(5, 7) + "月" + e.ymd.substring(8, 10) + "日");
} else if (this.timeType == 2) { } else if (this.timeType == 1) {
this.x = res.data.trend.map(e=> e.ymd.substring(0,4) + '年' + e.ymd.substring(5,7) + '月') 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.peopleNum = this.resY.reduce((accumulator, currentValue)=>{ return accumulator + currentValue})
this.res2Y = res.data.trend.map((e) => e.executeCount);
this.sendNum = this.res2Y.reduce((accumulator, currentValue)=>{ return accumulator + currentValue})
this.res3Y = res.data.trend.map((e) => e.createCount);
this.predictNum = this.res3Y.reduce((accumulator, currentValue)=>{ return accumulator + currentValue})
} }
});
}
})
}, },
// 触发人数 // 触发人数
getBrokenEcharts1() { getBrokenEcharts1() {
this.brokenEcharts1 = echarts.init(document.getElementById('brokenEcharts1')) let dataX = this.resX;
this.brokenEcharts1.setOption({ let dataY1 = this.resY;
console.log(dataX);
console.log(dataY1);
this.brokenEcharts1 = echarts.init(
document.getElementById("brokenEcharts1")
);
const option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
left: '2%', left: "2%",
right: '5%', right: "5%",
bottom: '2%', bottom: "2%",
containLabel: true containLabel: true,
}, },
dataZoom: [ dataZoom: [
{ {
id: 'dataZoomX', id: "dataZoomX",
type: 'slider', type: "slider",
xAxisIndex: [0], xAxisIndex: [0],
filterMode: 'filter' filterMode: "filter",
}, },
], ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
axisTick: { axisTick: {
show: false, show: false,
@@ -269,54 +406,58 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
data: this.x data: dataX,
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLine: { axisLine: {
show: false, show: false,
} },
}, },
series: [ series: [
{ {
type: 'line', type: "line",
data: [120, 132, 101, 134, 90, 230], data: dataY1,
lineStyle: { lineStyle: {
color: '#4B87FE', color: "#4B87FE",
}, },
itemStyle: { itemStyle: {
color: '#4E8EEE' color: "#4E8EEE",
} },
}, },
] ],
}) };
option && this.brokenEcharts1.setOption(option);
}, },
// 宣发次数 // 宣发次数
getBrokenEcharts2() { getBrokenEcharts2() {
this.brokenEcharts2 = echarts.init(document.getElementById('brokenEcharts2')) this.brokenEcharts2 = echarts.init(
document.getElementById("brokenEcharts2")
);
this.brokenEcharts2.setOption({ this.brokenEcharts2.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
left: '2%', left: "2%",
right: '5%', right: "5%",
bottom: '2%', bottom: "2%",
containLabel: true containLabel: true,
}, },
dataZoom: [ dataZoom: [
{ {
id: 'dataZoomX', id: "dataZoomX",
type: 'slider', type: "slider",
xAxisIndex: [0], xAxisIndex: [0],
filterMode: 'filter' filterMode: "filter",
}, },
], ],
calculable: true,
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
axisTick: { axisTick: {
show: false, show: false,
@@ -324,54 +465,56 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
data: ['2月', '3月', '4月', '5月', '6月', '7月'] data: this.resX,
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLine: { axisLine: {
show: false, show: false,
} },
}, },
series: [ series: [
{ {
type: 'line', type: "line",
data: [220, 182, 191, 234, 290, 330], data: this.res2Y,
lineStyle: { lineStyle: {
color: '#32C5FF', color: "#32C5FF",
}, },
itemStyle: { itemStyle: {
color: '#31C1FA' color: "#31C1FA",
} },
}, },
] ],
}) });
}, },
// 宣发任务数 // 宣发任务数
getBrokenEcharts3() { getBrokenEcharts3() {
this.brokenEcharts3 = echarts.init(document.getElementById('brokenEcharts3')) this.brokenEcharts3 = echarts.init(
document.getElementById("brokenEcharts3")
);
this.brokenEcharts3.setOption({ this.brokenEcharts3.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
left: '2%', left: "2%",
right: '5%', right: "5%",
bottom: '2%', bottom: "2%",
containLabel: true containLabel: true,
}, },
dataZoom: [ dataZoom: [
{ {
id: 'dataZoomX', id: "dataZoomX",
type: 'slider', type: "slider",
xAxisIndex: [0], xAxisIndex: [0],
filterMode: 'filter' filterMode: "filter",
}, },
], ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
axisTick: { axisTick: {
show: false, show: false,
@@ -379,60 +522,63 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
data: ['2月', '3月', '4月', '5月', '6月', '7月'] data: this.resX,
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLine: { axisLine: {
show: false, show: false,
} },
}, },
series: [ series: [
{ {
type: 'line', type: "line",
data: [1000, 232, 201, 154, 190, 330], data: this.res3Y,
lineStyle: { lineStyle: {
color: '#FFAA44', color: "#FFAA44",
}, },
itemStyle: { itemStyle: {
color: '#FFAA44' color: "#FFAA44",
} },
}, },
] ],
}) });
}, },
// 宣发明细 // 宣发明细
getColData() { getColData() {
this.$http.post(`/app/appmasssendingtask/statisticsDepart`, null, { this.$http
params: { .post(`/app/appmasssendingtask/statisticsDepart`, null, {
type: this.detailType params: {
} type: this.detailType,
}).then(res=> { },
// console.log(res); })
if(res?.data) { .then((res) => {
console.log(res); if (res?.data) {
this.colData = res.data console.log(res);
} this.colData = res.data;
}) }
});
}, },
getColumnarEcharts() { getColumnarEcharts() {
this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts')) this.columnarEcharts = echarts.init(
document.getElementById("columnarEcharts")
);
this.columnarEcharts.setOption({ this.columnarEcharts.setOption({
xAxis: { xAxis: {
type: 'category', type: "category",
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLine: { axisLine: {
show: false, show: false,
}, },
data: ['卫健委', '法院', '团委', '扶贫办', '警察局'] data: ["卫健委", "法院", "团委", "扶贫办", "警察局"],
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisTick: { axisTick: {
show: false, show: false,
}, },
@@ -443,47 +589,43 @@ export default {
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130], data: [120, 200, 150, 80, 70, 110, 130],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#5087ec' color: "#5087ec",
} },
}, },
type: 'bar' type: "bar",
} },
] ],
}) });
}, },
},
};
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.AppPropagandaStatistics { .AppPropagandaStatistics {
.calendar_header { .calendar_header {
padding: 26px 32px; padding: 26px 32px;
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #fff;
::v-deep .u-section__title__text { ::v-deep .u-section__title__text {
font-size: 32px; font-size: 32px;
} }
} }
.threeDays { .threeDays {
background: #FFF; background: #fff;
padding: 8px 32px 12px 32px; padding: 8px 32px 12px 32px;
box-sizing: border-box; box-sizing: border-box;
.yesterday, .yesterday,
.today, .today,
.tomorrow { .tomorrow {
background: #F7F8FA; background: #f7f8fa;
margin-bottom: 32px; margin-bottom: 32px;
padding: 30px 0 30px 40px; padding: 30px 0 30px 40px;
box-sizing: border-box; box-sizing: border-box;
.isShow { .isShow {
color: #3AA0FF; color: #3aa0ff;
} }
.itemYesterday, .itemYesterday,
.itemToday, .itemToday,
@@ -492,21 +634,19 @@ export default {
span { span {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
.yesterday { .yesterday {
border-left: 6px solid #FBD444; border-left: 6px solid #fbd444;
} }
.today { .today {
border-left: 6px solid #50CB74; border-left: 6px solid #50cb74;
} }
.tomorrow { .tomorrow {
border-left: 6px solid #3AA0FF; border-left: 6px solid #3aa0ff;
} }
} }
.brokenEcharts, .brokenEcharts,
.columnarEcharts { .columnarEcharts {
margin: 24px 0 24px 0; margin: 24px 0 24px 0;
@@ -532,17 +672,17 @@ export default {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
span { span {
margin-right: 12px; margin-right: 12px;
padding: 8px 10px; padding: 8px 10px;
display: inline-block; display: inline-block;
border: 1px solid #DDD; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
} }
.active { .active {
background: #3399FF; background: #3399ff;
color: #FFF; color: #fff;
} }
} }
} }
@@ -579,7 +719,7 @@ export default {
.brokenEcharts, .brokenEcharts,
.columnarEcharts { .columnarEcharts {
background: #FFF; background: #fff;
#brokenEcharts1, #brokenEcharts1,
#brokenEcharts2, #brokenEcharts2,
@@ -587,24 +727,24 @@ export default {
#columnarEcharts { #columnarEcharts {
width: 100%; width: 100%;
height: 400px; height: 400px;
background: #F9F9F9; background: #f9f9f9;
border-radius: 8px; border-radius: 8px;
} }
} }
.popup{ .popup {
box-sizing: border-box; box-sizing: border-box;
// height: 800px; // height: 800px;
.tips{ .tips {
width: 80px; width: 80px;
height: 6px; height: 6px;
background: #DDDDDD; background: #dddddd;
border-radius: 4px; border-radius: 4px;
padding: 0 32px; padding: 0 32px;
box-sizing: border-box; box-sizing: border-box;
margin: 32px auto 8px auto; margin: 32px auto 8px auto;
} }
.title{ .title {
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
font-size: 34px; font-size: 34px;
@@ -614,56 +754,55 @@ export default {
padding: 0 32px; padding: 0 32px;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 32px; padding-bottom: 32px;
.cancel{ .cancel {
display: inline-block; display: inline-block;
width: 200px; width: 200px;
color: #aaa; color: #aaa;
} }
.confirm{ .confirm {
display: inline-block; display: inline-block;
width: 200px; width: 200px;
text-align: right; text-align: right;
color: #333; color: #333;
} }
p{ p {
display: inline-block; display: inline-block;
width: calc(100% - 400px); width: calc(100% - 400px);
text-align: center; text-align: center;
font-size: 28px; font-size: 28px;
} }
} }
.select-content{ .select-content {
height: calc(100% - 100px); height: calc(100% - 100px);
overflow-y: scroll; overflow-y: scroll;
} }
.type-list{ .type-list {
padding: 0 32px; padding: 0 32px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 32px; margin-bottom: 32px;
.type-title{ .type-title {
line-height: 108px; line-height: 108px;
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.item{ .item {
display: inline-block; display: inline-block;
width: 210px; width: 210px;
text-align: center; text-align: center;
line-height: 64px; line-height: 64px;
background: #F3F4F7; background: #f3f4f7;
border-radius: 4px; border-radius: 4px;
margin: 0 16px 16px 0; margin: 0 16px 16px 0;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #333; color: #333;
} }
.active{ .active {
background: #1365DD; background: #1365dd;
color: #fff; color: #fff;
} }
} }
.popBtn { .popBtn {
display: flex; display: flex;
@@ -671,15 +810,15 @@ export default {
line-height: 98px; line-height: 98px;
div { div {
width: 50%; width: 50%;
border: 2px solid #3399FF; border: 2px solid #3399ff;
text-align: center; text-align: center;
} }
div:first-child { div:first-child {
color: #3399FF; color: #3399ff;
} }
div:last-child { div:last-child {
color: #FFF; color: #fff;
background: #3399FF; background: #3399ff;
} }
} }
} }
@@ -690,20 +829,19 @@ export default {
.startTime, .startTime,
.endTime { .endTime {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #ddd;
margin-bottom: 20px; margin-bottom: 20px;
} }
.timeBtn { .timeBtn {
width: 100%; width: 100%;
background: #3399FF; background: #3399ff;
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
border-radius: 16px; border-radius: 16px;
color: #FFF; color: #fff;
} }
} }
} }
</style> </style>

44
src/project/saas/AppPropagandaStatistics/calendarInfo.vue
View File

@@ -29,23 +29,61 @@ export default {
data() { data() {
return { return {
date: '', date: '',
selected: [{date: '2022-07-12'}], selected: [],
list: [{ list: [{
time: '11:00', time: '11:00',
info: '晴风小区志愿者活动' info: '晴风小区志愿者活动'
}] }],
calendarList: {},
year: '',
month: '',
day: '',
} }
}, },
components: { components: {
uniCalendar uniCalendar
}, },
created() {
this.getNowDay()
this.getData()
},
methods: { methods: {
change(val) { change(val) {
this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}` this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
}, },
getNowDay() {
const date = new Date()
this.year = date.getFullYear()
this.month = date.getMonth() + 1
},
toGroup() { toGroup() {
uni.navigateTo({url: './groupSendResident'}) uni.navigateTo({url: './groupSendResident'})
} },
getData() {
this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
params: {},
})
.then((res) => {
if (res?.data) {
this.calendarList = res.data;
var arr = Object.keys(res.data).map(key => (res.data[key]))
var calList = arr.filter(item=> (item.taskList && item.taskList.length > 0))
this.selected = calList.map(item=> {
if(item.day>=1 && item.day<=9) {
if(this.month>=1 && this.month <=9) {
return this.year + '-' + '0' + this.month + '-' + '0' + item.day
}
} else if(item.day> 9) {
if(this.month > 9) {
return this.year + '-' + this.month + '-' + item.day
}
}
})
console.log(this.selected);
}
});
},
}, },
onShow() { onShow() {
document.title = '宣发日历' document.title = '宣发日历'

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

@@ -119,7 +119,7 @@ export default {
{value: 10, name: '群发送达率', label:{ {value: 10, name: '群发送达率', label:{
normal:{ normal:{
show:true, show:true,
formatter: '{d}%\n群发送达率', formatter: `{d}%\n群发居民群`,
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
}, },

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

@@ -5,7 +5,7 @@
<div class="searchBox"> <div class="searchBox">
<u-search placeholder="请输入任务名称" v-model="name" :show-action="false"></u-search> <u-search placeholder="请输入任务名称" v-model="name" :show-action="false"></u-search>
</div> </div>
<div class="filterBtn"><img src="./images/shaixuan.png" alt="">筛选</div> <div class="filterBtn" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
</div> </div>
</AiTopFixed> </AiTopFixed>
<div class="resident_list"> <div class="resident_list">
@@ -19,6 +19,57 @@
<div>创建部门：<span>{{ item.createUserDept }}</span></div> <div>创建部门：<span>{{ item.createUserDept }}</span></div>
</div> </div>
</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 class="item">
<div>开始时间</div>
<div style="display: flex;">
<u-input v-model="startTime" disabled placeholder="请选择开始时间" @click="showStart = true" />
<u-icon name="arrow-right"></u-icon>
</div>
</div>
<div class="item">
<div>结束时间</div>
<div style="display: flex;">
<u-input v-model="endTime" disabled placeholder="请选择开始时间" @click="showEnd = true" />
<u-icon name="arrow-right"></u-icon>
</div>
</div>
</div>
</scroll-view>
<u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
<u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
<div class="popBtn">
<div @click="reset">重置</div>
<div @click="selectConfirm">确认</div>
</div>
</div>
</u-popup>
</div> </div>
</template> </template>
@@ -29,6 +80,11 @@ export default {
current: 1, current: 1,
name: '', name: '',
list: [], list: [],
filterShow: false,
startTime: '',
endTime: '',
showStart: false,
showEnd: false,
} }
}, },
methods: { methods: {
@@ -39,7 +95,6 @@ export default {
this.$http.post(`/app/appmasssendingtask/list`, null, { this.$http.post(`/app/appmasssendingtask/list`, null, {
params: { params: {
current: this.current, current: this.current,
} }
}).then(res=> { }).then(res=> {
if(res?.data) { if(res?.data) {
@@ -47,14 +102,28 @@ export default {
} }
console.log(res); console.log(res);
}) })
} },
filterBtn() {},
reset() {
this.startTime = '',
this.endTime = ''
},
selectConfirm() {},
confirmStart(val) {
this.startTime = val.year + '-' + val.month + '-' + val.day
},
confirmEnd(val) {
this.endTime = val.year + '-' + val.month + '-' + val.day
},
}, },
onShow() { onShow() {
document.title = '群发居民群' document.title = '群发居民群'
this.current = 1
this.getList() this.getList()
}, },
onReachBottom() { onReachBottom() {
this.current ++ this.current ++
this.getList()
}, },
} }
</script> </script>
@@ -112,5 +181,94 @@ export default {
} }
} }
} }
.popup {
box-sizing: border-box;
// height: 800px;
.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: flex;
justify-content: space-between;
& > div:last-child {
::v-deep .uni-input-input,
::v-deep .uni-input-placeholder {
text-align: right;
}
}
}
.active {
background: #1365dd;
color: #fff;
}
}
.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;
}
}
}
} }
</style> </style>