This commit is contained in:
shijingjing
2022-07-18 10:55:29 +08:00
parent 74466bf775
commit 1f729bf860
3 changed files with 243 additions and 139 deletions

View File

@@ -2,35 +2,54 @@
<div class="cooperationDetail"> <div class="cooperationDetail">
<AiTopFixed> <AiTopFixed>
<div class="tab-select"> <div class="tab-select">
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{ item }}<span></span> <div
class="item"
:class="tabIndex == index ? 'active' : ''"
v-for="(item, index) in tabs"
:key="index"
@click="tabClick(index)"
>
{{ item }}<span></span>
</div> </div>
</div> </div>
</AiTopFixed> </AiTopFixed>
<div class="content">
<div class="content">
<div class="header"> <div class="header">
<div class="header_left"> <div class="header_left">
<div>防疫宣传群发通知</div> <div>防疫宣传群发通知</div>
<div>创建时间: <span>{{ createTime }}</span></div> <div>
创建时间: <span>{{ createTime }}</span>
</div>
</div> </div>
<div class="header_right" @click="toDetail">查看详情</div> <div class="header_right" @click="toDetail">查看详情</div>
</div> </div>
<div class="pieEcharts"> <div class="pieEcharts">
<div class="pie_info"> <div class="pie_info">
<div class="tips">数据更新于<span>{{ info.remindTime }}</span></div> <div class="tips">
数据更新于<span>{{ info.remindTime }}</span>
</div>
<div class="pie_card"> <div class="pie_card">
<div v-if="info.executedCount!=null" id="pieEcharts"></div> <div v-if="info.executedCount != null" id="pieEcharts"></div>
<AiEmpty description="暂无数据" v-else /> <AiEmpty description="暂无数据" v-else />
<div class="pie_right"> <div class="pie_right">
<div>计划送达居民群: <span>{{ info.planCount || 0 }}</span></div> <div>
<div>送达居民群: <span>{{ info.unExecutedCount || 0 }}</span></div> 计划送达居民群: <span>{{ info.planCount || 0 }}</span>
<div>已送达居民群: <span>{{ info.executedCount || 0 }}</span></div> </div>
<div>无法送达居民群: <span>{{ info.cannotExecuteCount || 0 }}</span></div> <div>
未送达居民群: <span>{{ info.unExecutedCount || 0 }}</span>
</div>
<div>
已送达居民群: <span>{{ info.executedCount || 0 }}</span>
</div>
<div>
无法送达居民群: <span>{{ info.cannotExecuteCount || 0 }}</span>
</div>
</div> </div>
</div> </div>
<div class="btn" v-if="info.status == 4" @click="remindSend">提醒成员发送</div> <!-- v-if="info.status == 4" -->
<div class="btn" @click="remindSend">提醒成员发送</div>
</div> </div>
</div> </div>
@@ -39,8 +58,16 @@
<div class="tab"> <div class="tab">
<u-subsection :list="subsection" :current="subIndex"></u-subsection> <u-subsection :list="subsection" :current="subIndex"></u-subsection>
</div> </div>
<AiTable :data="tableData" :colConfigs="colConfigs0" v-if="tabIndex == 0"/> <AiTable
<AiTable :data="tableData" :colConfigs="colConfigs1" v-if="tabIndex == 1"/> :data="tableData"
:colConfigs="colConfigs0"
v-if="tabIndex == 0"
/>
<AiTable
:data="tableData"
:colConfigs="colConfigs1"
v-if="tabIndex == 1"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -48,143 +75,174 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from "echarts";
export default { export default {
data() { data() {
return { return {
tabs: ['成员统计', '居民群统计'], tabs: ["成员统计", "居民群统计"],
tabIndex: 0, tabIndex: 0,
pieEcharts: null, pieEcharts: null,
subsection: [ subsection: [
{name: '未送达'}, { name: "未送达" },
{name: '已送达'}, { name: "已送达" },
{name: '无法送达'} { name: "无法送达" },
], ],
subIndex: 0, subIndex: 0,
tableData: [], tableData: [],
createTime: '', createTime: "",
id: '', id: "",
info: {}, info: {},
current: 1, current: 1,
} firstClickTime: "",
currentClickTime: "",
flag: true,
};
}, },
computed: { computed: {
colConfigs0() { colConfigs0() {
return [ return [
{ label: '成员', prop: 'groupOwnerId', width: '240rpx', dict: 'householdRelation' }, {
{ label: '预计未送达居民', prop: 'groupCount'}, label: "成员",
] prop: "groupOwnerId",
width: "240rpx",
dict: "householdRelation",
},
{ label: "预计未送达居民", prop: "groupCount" },
];
}, },
colConfigs1() { colConfigs1() {
return [ return [
{ label: '居民群', prop: 'groupName', width: '240rpx', dict: 'householdRelation' }, {
{ label: '群人数', prop: 'memberCount', width: '200rpx' }, label: "居民群",
{ label: '群主', prop: 'groupOwnerId', dict: 'sex' }, prop: "groupName",
] width: "240rpx",
dict: "householdRelation",
},
{ label: "群人数", prop: "memberCount", width: "200rpx" },
{ label: "群主", prop: "groupOwnerId", dict: "sex" },
];
}, },
}, },
onLoad(o) { onLoad(o) {
this.id = o.id this.id = o.id;
this.createTime = o.time this.createTime = o.time;
this.getStatistics()
}, },
methods: { methods: {
tabClick(index) { tabClick(index) {
this.tabIndex = index this.tabIndex = index;
}, },
toDetail() { toDetail() {
uni.navigateTo({url: `./detail?id=${this.id}`}) uni.navigateTo({ url: `./detail?id=${this.id}` });
}, },
// 提醒发送 // 提醒发送
remindSend() { remindSend() {
var timer = null this.firstClickTime = this.firstClickTime || +new Date();
var num = 60 * 60 * 1000 this.currentClickTime = +new Date();
this.$http.post('/app/appmasssendingtask/remindSend',null,{ let time = this.currentClickTime - this.firstClickTime;
params: { if (time >= 60 * 60 * 1000 || this.flag) {
id: this.id this.$http
} .post("/app/appmasssendingtask/remindSend", null, {
}).then(res => { params: {
if(res?.code==0) { id: this.id,
this.$u.toast('已提醒成员发送') },
timer = setInterval(()=>{ })
if(this.num == 0) { .then((res) => {
clearInterval(timer) if (res?.code == 0) {
this.$u.toast("已提醒成员发送");
this.flag = false;
} }
num = num - 1 })
}, 60 * 60 * 1000) .catch((err) => {
} else { console.log(err);
this.$u.toast(res.msg) });
} else {
time = 60 * 60 * 1000 - time;
const min = Math.floor(time / 1000 / 60); // 分钟
const second = Math.floor(time / 1000);
second %= 60;
let msg = ``;
if (min > 0 && second > 0) {
msg = `${min}分钟${second}秒后可以再次点击`;
} else if (min > 0 && second <= 0) {
msg = `${min}分钟后可以再次点击`;
} else if (min <= 0 && second > 0) {
msg = `${second}秒后可以再次点击`;
} }
}).catch(() => { this.$u.toast(msg);
this.$u.toast(`${num}s后可再次提醒发送`) }
})
}, },
getStatistics() { getStatistics() {
this.$http.post(`/app/appmasssendingtask/detailStatistics`, null, { this.$http
params: { .post(`/app/appmasssendingtask/detailStatistics`, null, {
type: this.tabIndex, params: {
sendStatus: this.subIndex, type: this.tabIndex,
taskId: this.id, sendStatus: this.subIndex,
current: this.current taskId: this.id,
} current: this.current,
}).then(res => { },
if(res?.data) { })
this.tableData = res.data.executedList .then((res) => {
} if (res?.data) {
}) this.tableData = res.data.executedList;
}
});
}, },
// 带百分比饼图 // 带百分比饼图
getPieEcharts() { getPieEcharts() {
this.pieEcharts = echarts.init(document.getElementById('pieEcharts')) this.pieEcharts = echarts.init(document.getElementById("pieEcharts"));
this.pieEcharts.setOption( { this.pieEcharts.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b}: {c} ({d}%)' formatter: "{a} <br/>{b}: {c} ({d}%)",
}, },
color:['#1684fc','#ccc'], color: ["#1684fc", "#ccc"],
series: [ series: [
{ {
name: '群发送达率', name: "群发送达率",
type: 'pie', type: "pie",
radius: ['65', '50%'], radius: ["65", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: false, show: false,
position: 'center' position: "center",
}, },
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: [ data: [
{value: 10, name: '群发送达率', label:{ {
normal:{ value: 10,
show:true, name: "群发送达率",
formatter: `{d}%\n群发居民群`, label: {
textStyle: { normal: {
fontSize: 16, show: true,
formatter: `{d}%\n群发居民群`,
textStyle: {
fontSize: 16,
},
}, },
}} },
}, },
{value: 120,} { value: 120 },
] ],
} },
] ],
}) });
} },
}, },
onShow() { onShow() {
document.title = "群发居民群统计" document.title = "群发居民群统计";
this.getStatistics();
}, },
mounted() { mounted() {
this.getPieEcharts() this.getPieEcharts();
} },
};
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -196,7 +254,7 @@ export default {
width: 100%; width: 100%;
height: 96px; height: 96px;
line-height: 96px; line-height: 96px;
background: #3975C6; background: #3975c6;
display: flex; display: flex;
.item { .item {
@@ -204,7 +262,7 @@ export default {
text-align: center; text-align: center;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #CDDCF0; color: #cddcf0;
} }
.active { .active {
@@ -216,7 +274,7 @@ export default {
span { span {
width: 48px; width: 48px;
height: 4px; height: 4px;
background: #FFF; background: #fff;
position: absolute; position: absolute;
bottom: 14px; bottom: 14px;
left: 50%; left: 50%;
@@ -229,7 +287,7 @@ export default {
height: 160px; height: 160px;
padding: 32px; padding: 32px;
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
.header_left { .header_left {
@@ -246,7 +304,7 @@ export default {
} }
.header_right { .header_right {
width: 120px; width: 120px;
color: #5297FF; color: #5297ff;
} }
} }
@@ -255,7 +313,7 @@ export default {
padding: 32px; padding: 32px;
box-sizing: border-box; box-sizing: border-box;
.pie_info { .pie_info {
background: #FFF; background: #fff;
border-radius: 16px; border-radius: 16px;
padding-bottom: 20px; padding-bottom: 20px;
box-sizing: border-box; box-sizing: border-box;
@@ -288,8 +346,8 @@ export default {
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
color: #FFF; color: #fff;
background: #3AA0FF; background: #3aa0ff;
border-radius: 8px; border-radius: 8px;
} }
} }
@@ -300,7 +358,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
.list_card { .list_card {
background: #FFF; background: #fff;
border-radius: 16px; border-radius: 16px;
padding: 30px 30px; padding: 30px 30px;
@@ -309,7 +367,5 @@ export default {
} }
} }
} }
} }
</style> </style>

View File

@@ -198,20 +198,38 @@
<div class="customPop"> <div class="customPop">
<div class="startTime"> <div class="startTime">
<div>开始时间:</div> <div>开始时间:</div>
<div style="display: flex; justify-content: space-between;"> <div style="display: flex; justify-content: space-between">
<u-input v-model="startTime" placeholder="请选择开始时间" disabled @click="showStart = true"/> <u-input
v-model="startTime"
placeholder="请选择开始时间"
disabled
@click="showStart = true"
/>
<u-icon name="arrow-right"></u-icon> <u-icon name="arrow-right"></u-icon>
</div> </div>
</div> </div>
<div class="endTime"> <div class="endTime">
<div>结束时间:</div> <div>结束时间:</div>
<div style="display: flex; justify-content: space-between;"> <div style="display: flex; justify-content: space-between">
<u-input v-model="endTime" placeholder="请选择结束时间" disabled @click="showEnd = true" /> <u-input
v-model="endTime"
placeholder="请选择结束时间"
disabled
@click="showEnd = true"
/>
<u-icon name="arrow-right"></u-icon> <u-icon name="arrow-right"></u-icon>
</div> </div>
</div> </div>
<u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker> <u-picker
<u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></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 class="timeBtn" @click="handleTime">确定</div>
</div> </div>
</u-popup> </u-popup>
@@ -271,7 +289,6 @@ export default {
this.getNowDate(); this.getNowDate();
}, },
mounted() { mounted() {
// this.getBrokenDate();
this.getBrokenEcharts1(); this.getBrokenEcharts1();
this.getBrokenEcharts2(); this.getBrokenEcharts2();
this.getBrokenEcharts3(); this.getBrokenEcharts3();
@@ -283,8 +300,8 @@ export default {
checkTime(index) { checkTime(index) {
if (index == 3) { if (index == 3) {
this.timeSelect = index; this.timeSelect = index;
this.customShow = true; this.customShow = true;
this.showStart = false; this.showStart = false;
this.showEnd = false; this.showEnd = false;
} else { } else {
@@ -298,34 +315,35 @@ export default {
// 重置 // 重置
reset() { reset() {
this.timeType = 0; this.timeType = 0;
this.startTime = ""; this.timeSelect = 0;
this.endTime = ""; this.start = "";
this.end = "";
this.departId = ""; this.departId = "";
}, },
selectConfirm() { selectConfirm() {
if (this.timeSelect == 3) { if (this.timeSelect == 3) {
this.timeType = this.timeSelect; this.detailType = this.timeSelect;
this.start = this.startTime; this.start = this.startTime;
this.end = this.endTime; this.end = this.endTime;
this.getBrokenDate(); this.getBrokenDate();
} else { } else {
this.timeType = this.timeSelect; this.detailType = this.timeSelect;
this.getBrokenDate(); this.getBrokenDate();
} }
this.filterShow = false; this.filterShow = false;
}, },
confirmStart(val) { confirmStart(val) {
this.startTime = val.year + '-' + val.month + '-' + val.day this.startTime = val.year + "-" + val.month + "-" + val.day;
}, },
confirmEnd(val) { confirmEnd(val) {
this.endTime = val.year + '-' + val.month + '-' + val.day this.endTime = val.year + "-" + val.month + "-" + val.day;
}, },
handleTime() { handleTime() {
this.start = this.startTime this.start = this.startTime;
this.end = this.endTime this.end = this.endTime;
this.customShow = false; this.customShow = false;
}, },
@@ -341,10 +359,8 @@ export default {
params: {}, params: {},
}) })
.then((res) => { .then((res) => {
{ if (res?.data) {
if (res?.data) { this.calendarList = res.data;
this.calendarList = res.data;
}
} }
}); });
}, },
@@ -363,18 +379,37 @@ export default {
.then((res) => { .then((res) => {
if (res?.data) { if (res?.data) {
if (this.timeType == 0) { if (this.timeType == 0) {
this.resX = 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 == 1) { } else if (this.timeType == 1) {
this.resX = 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 == 2) {
this.resX = 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(0, 4) + "年" + e.ymd.substring(5, 7) + "月"
);
} }
this.resY = res.data.trend.map((e) => e.receiveCount); this.resY = res.data.trend.map((e) => e.receiveCount);
this.peopleNum = this.resY.reduce((accumulator, currentValue)=>{ return accumulator + currentValue}) this.peopleNum = this.resY.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
this.res2Y = res.data.trend.map((e) => e.executeCount); this.res2Y = res.data.trend.map((e) => e.executeCount);
this.sendNum = this.res2Y.reduce((accumulator, currentValue)=>{ return accumulator + currentValue}) this.sendNum = this.res2Y.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
this.res3Y = res.data.trend.map((e) => e.createCount); this.res3Y = res.data.trend.map((e) => e.createCount);
this.predictNum = this.res3Y.reduce((accumulator, currentValue)=>{ return accumulator + currentValue}) this.predictNum = this.res3Y.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
this.getBrokenEcharts1();
this.getBrokenEcharts2();
this.getBrokenEcharts3();
this.getColumnarEcharts();
} }
}); });
}, },
@@ -382,8 +417,6 @@ export default {
getBrokenEcharts1() { getBrokenEcharts1() {
let dataX = this.resX; let dataX = this.resX;
let dataY1 = this.resY; let dataY1 = this.resY;
console.log(dataX);
console.log(dataY1);
this.brokenEcharts1 = echarts.init( this.brokenEcharts1 = echarts.init(
document.getElementById("brokenEcharts1") document.getElementById("brokenEcharts1")
); );
@@ -414,7 +447,7 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
data: dataX, data: this.resX,
}, },
yAxis: { yAxis: {
type: "value", type: "value",

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="calendarInfo"> <div class="calendarInfo">
<uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/> <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change" @monthSwitch="changeMonth"/>
<div class="dailyMatters"> <div class="dailyMatters">
<div> <div>
@@ -38,6 +38,7 @@ export default {
year: '', year: '',
month: '', month: '',
day: '', day: '',
yyyyMM: '',
} }
}, },
components: { components: {
@@ -49,6 +50,14 @@ export default {
}, },
methods: { methods: {
changeMonth(e) {
if(e.month<=9) {
this.yyyyMM = e.year + '-' + '0' + e.month
} else if(e.month > 9) {
this.yyyyMM = e.year + '-' + e.month
}
this.getData()
},
change(val) { change(val) {
this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}` this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
}, },
@@ -62,21 +71,27 @@ export default {
}, },
getData() { getData() {
this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, { this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
params: {}, params: {
yyyyMM: this.yyyyMM,
},
}) })
.then((res) => { .then((res) => {
if (res?.data) { if (res?.data) {
this.calendarList = res.data; this.calendarList = res.data;
var arr = Object.keys(res.data).map(key => (res.data[key])) let arr = Object.keys(res.data).map(key => (res.data[key]))
var calList = arr.filter(item=> (item.taskList && item.taskList.length > 0)) let calList = arr.filter(item=> (item.taskList && item.taskList.length > 0))
this.selected = calList.map(item=> { this.selected = calList.map(item=> {
if(item.day>=1 && item.day<=9) { if(item.day>=1 && item.day<=9) {
if(this.month>=1 && this.month <=9) { if(this.month>=1 && this.month <=9) {
return this.year + '-' + '0' + this.month + '-' + '0' + item.day return {
date: this.year + '-' + '0' + this.month + '-' + '0' + item.day
}
} }
} else if(item.day> 9) { } else if(item.day> 9) {
if(this.month > 9) { if(this.month > 9) {
return this.year + '-' + this.month + '-' + item.day return {
date: this.year + '-' + this.month + '-' + item.day
}
} }
} }
}) })