Skip to content

C
confucius
Commit a2f4bc2a authored by Mac's avatar Mac
Browse files
Options

1

parent 3675e80b
Hide whitespace changes
Inline Side-by-side
Showing with 427 additions and 44 deletions
src/api/system/wechat.js
View file @ a2f4bc2a
......@@ -342,6 +342,40 @@ export function SetSynvEduEmployee(data) {
})
}
/**
* 获取渠道码统计 - 今日新增
*
*/
export function getWeChatChannelStatisticsForDay(data) {
return request({
url: '/QYWeChat/GetWeChatChannelStatisticsForDay',
method: 'post',
data
})
}
/**
* 获取渠道码统计 - 曲线图统计
*
*/
export function getWeChatChannelStatistics(data) {
return request({
url: '/QYWeChat/GetWeChatChannelStatistics',
method: 'post',
data
})
}
/**
* 获取渠道码统计 - 明细列表
*
*/
export function getWeChatChannelStatisticsPageList(data) {
return request({
url: '/QYWeChat/GetWeChatChannelStatisticsPageList',
method: 'post',
data
})
}
......
src/pages/enterprise/channelCodeStatistics.vue
View file @ a2f4bc2a
<style>
.channelCodeStatistics .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.channelCodeStatistics .todaybox {
height: 120px;
padding: 10px;
font-size: 13px;
color: #FFF;
}
.channelCodeStatistics .todayboxt {
font-size: 24px;
font-weight: bold;
}
.channelCodeStatistics .el-range-editor .el-range-input {
background: transparent;
}
.channelCodeStatistics .el-range-editor.el-input__inner {
background-color: transparent;
}
</style>
<template>
<div class="channelcodeList page-body">
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<!-- <div class="col-3">
<q-input @keyup.enter.native="changePage(1)" clearable standout="bg-primary text-white" v-model="msg.Name"
label="渠道码名称" @clear="changePage(1)" maxlength="20" />
</div> -->
<div class="channelCodeStatistics page-body">
<q-btn color="accent" style="margin-bottom:20px" size="sm" class="q-mr-md" icon='iconfont icon-fanhui'
label="返回" @click="goblack()"></q-btn>
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3 ">
<div class="todaybox " style='background:#40a9ff'>
<p>今日新增客户数</p>
<p class="todayboxt">{{ForDayobj && ForDayobj.AddNum ? ForDayobj.AddNum:'0'}}</p>
</div>
</div>
<div class="col-3">
<div class="todaybox " style='background:#fcc71b'>
<p>今日被客户删除/拉黑的人数</p>
<p class="todayboxt">{{ForDayobj && ForDayobj.BlacklistNum ? ForDayobj.BlacklistNum:'0'}}</p>
</div>
</div>
<div class="col-3 ">
<div class="todaybox " style='background:#8f8aff'>
<p>今日删除人数</p>
<p class="todayboxt">{{ForDayobj && ForDayobj.DelNum ? ForDayobj.DelNum:'0'}}</p>
</div>
</div>
<div class="col-3">
<div class="todaybox " style='background:#f9688e'>
<p>今日净增人数</p>
<p class="todayboxt">{{ForDayobj && ForDayobj.NetNum ? ForDayobj.NetNum:'0'}}</p>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="row items-center">
<q-btn-toggle v-model="msg.Type" toggle-color="primary" @input="gettime" :options="[
{label: '按日', value: '1'},
{label: '按周', value: '2'},
{label: '按月', value: '3'}
]" />
<div style="margin-left: 20px;">
<div class="col-3">
<q-field filled>
 <template v-slot:control>
<el-date-picker v-model="dateList" @change="ChannelStatistics()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
 :disabled="msg.Type==2||msg.Type==3" range-separator="至"  start-placeholder="开始时间"
 end-placeholder="结束时间">
</el-date-picker>       
</template>
</q-field>
</div>
</div>
</div>
<div style="margin-top: 20px;">这段时间里，共新增客户数 {{totalnum.AddNum}} 人，被客户删除/拉黑 {{totalnum.BlacklistNum}}
人，员工删除客户 {{totalnum.DelNum}} 人，净增人数 {{totalnum.NetNum}} 人</div>
<div id="main" style="width: 100%;height:500px;"> </div>
<q-table :pagination="msg2" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
style="margin-top: 20px;" separator="none" title="" :data="data" :columns="columns" row-key="name">
<template v-slot:top="props">
<div class="col-2 q-table__title">详情数据</div>
<q-space />
</template>
<template v-slot:body-cell-SkipVerify="props">
<q-td :props="props">
<div>{{props.row.SkipVerify==1?'需要验证':'自动通过'}}</div>
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="msg2.pageIndex" color="primary"
:max="pageCount" :input="true" @input="changePage" />
</template>
</q-table>
</div>
</div>
<div class="page-content">
</div>
</div>
</template>
<script>
</template>
<script>
import {
getWeChatChannelStatisticsForDay,
getWeChatChannelStatistics,
getWeChatChannelStatisticsPageList
} from '../../api/system/wechat';
export default {
meta: {
title: "渠道码统计"
},
name: "channelCodeStatistics",
data() {
return {
loading: false,
meta: {
title: "渠道码统计"
},
name: "channelCodeStatistics",
data() {
return {
loading: false,
ForDayobj: null,
msg: {
ChannelId: 0,
Type: '2',//类型 1按日 2按周 3按月 (周：最近一周 月：最近一年)
StartTime: '',
EndTime: '',
},
dateList: [],
StatisticsList: [],
totalnum: {
AddNum: 0,
DelNum: 0,
BlacklistNum: 0,
NetNum: 0,
},
msg2: {
pageIndex: 1,
pageSize: 10,
rowsPerPage: 10,
ChannelId: 0,
Type: "2",
StartTime: '',
EndTime: '',
},
data: [],
pageCount: 0,
columns: [
{
name: 'DateStr',
label: '时间',
field: 'DateStr',
align: 'left'
},
{
name: 'AddNum',
label: '新增客户数',
field: 'AddNum',
align: 'left'
},
{
name: 'BlacklistNum',
label: '被客户删除/拉黑人数',
field: 'BlacklistNum',
align: 'left'
},
{
name: 'DelNum',
label: '删除人数',
field: 'DelNum',
align: 'left'
},
{
name: 'NetNum',
label: '净增客户数',
field: 'NetNum',
align: 'left'
},
]
}
},
created() {
if (this.$route.query && this.$route.query.Id) {
this.msg.ChannelId = this.$route.query.Id
this.msg2.ChannelId = this.$route.query.Id
}
this.gettoday()
},
methods: {
gettoday() {
this.loading = true
getWeChatChannelStatisticsForDay({ ChannelId: this.msg.ChannelId }).then(res => {
this.loading = false
this.ForDayobj = res.Data
})
this.ChannelStatistics()
},
ChannelStatistics() {
if (this.msg.Type == 1) {
if (this.dateList && this.dateList.length > 0) {
this.msg.StartTime = this.dateList[0]
this.msg.EndTime = this.dateList[1]
} else {
this.$q.notify({
type: 'negative',
message: `请输入日期范围`,
position: 'top'
})
return
}
}
getWeChatChannelStatistics(this.msg).then(res => {
this.StatisticsList = res.Data
this.totalnum.AddNum = 0;
this.totalnum.DelNum = 0;
this.totalnum.BlacklistNum = 0;
this.totalnum.NetNum = 0;
if (res.Data && res.Data.length > 0) {
res.Data.map(x => {
this.totalnum.AddNum += x.AddNum;
this.totalnum.DelNum += x.DelNum;
this.totalnum.BlacklistNum += x.BlacklistNum;
this.totalnum.NetNum += x.NetNum;
})
}
this.tubiao()
this.getStatisticsPageList()
})
},
getStatisticsPageList() {
this.msg2.Type = this.msg.Type;
this.msg2.StartTime = this.msg.StartTime;
this.msg2.EndTime = this.msg.EndTime;
getWeChatChannelStatisticsPageList(this.msg2).then(res => {
this.data = res.Data.PageData;
this.pageCount = res.Data.PageCount
})
},
changePage(e) {
this.msg.pageIndex = e
this.getStatisticsPageList()
},
gettime() {
if (this.msg.Type == 1) {
if (this.dateList.length == 0 || this.dateList == null) {
//昨天的时间
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
this.dateList.push(day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate());
//今天的时间
var day2 = new Date();
day2.setTime(day2.getTime());
this.dateList.push(day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate());
}
}
this.ChannelStatistics()
},
tubiao() {
var echarts = require('echarts')
var myChart;
myChart = echarts.init(document.getElementById('main'))
let xAxisdata = []
if (this.msg.Type == 1) {//按日
xAxisdata = this.getDayAll(this.msg.StartTime, this.msg.EndTime);
} else if (this.msg.Type == 2) {//按周
let date1 = new Date();
let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
var date2 = new Date(date1);
date2.setDate(date1.getDate() - 6);//7天前
var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
xAxisdata = this.getDayAll(time2, time1);
} else if (this.msg.Type == 3) {
xAxisdata = [];
var data = new Date();
var year = data.getFullYear();
data.setMonth(data.getMonth() + 1, 1)//获取到当前月份,设置月份
for (var i = 0; i < 12; i++) {
data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
var m = data.getMonth() + 1;
m = m < 10 ? "0" + m : m;
xAxisdata.unshift(data.getFullYear() + "-" + (m))
}
}
let seriesData = [
{ name: '新增客户数', type: 'line', data: [], smooth: true, },
{ name: '被客户删除/拉黑的人数', type: 'line', data: [], smooth: true, },
{ name: '删除人数', type: 'line', data: [], smooth: true, },
{ name: '净增人数', type: 'line', data: [], smooth: true, },
]
xAxisdata.forEach(x => {
if (this.StatisticsList.length > 0) {
for (var i = 0; i < this.StatisticsList.length; i++) {
if (x == this.StatisticsList[i].DateStr) {
seriesData[0].data.push(this.StatisticsList[i].AddNum)
seriesData[1].data.push(this.StatisticsList[i].BlacklistNum)
seriesData[2].data.push(this.StatisticsList[i].DelNum)
seriesData[3].data.push(this.StatisticsList[i].NetNum)
return
} else {
if (i + 1 == this.StatisticsList.length) {
seriesData[0].data.push(0)
seriesData[1].data.push(0)
seriesData[2].data.push(0)
seriesData[3].data.push(0)
}
}
}
} else {
seriesData[0].data.push(0)
seriesData[1].data.push(0)
seriesData[2].data.push(0)
seriesData[3].data.push(0)
}
})
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
legend: {
data: ['新增客户数', '被客户删除/拉黑的人数', '删除人数', '净增人数']
},
xAxis: {
type: 'category',
data: xAxisdata,
},
dataZoom: [{ // 第一个 dataZoom 组件
xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
},
{ // 第二个 dataZoom 组件
xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis
}],
yAxis: {
type: 'value'
},
series: seriesData
}
myChart.setOption(option)
},
getDayAll(starDay, endDay) {
var arr = [];
var dates = [];
// 设置两个日期UTC时间
var db = new Date(starDay);
var de = new Date(endDay);
// 获取两个日期GTM时间
var s = db.getTime() - 24 * 60 * 60 * 1000;
var d = de.getTime() - 24 * 60 * 60 * 1000;
// 获取到两个日期之间的每一天的毫秒数
for (var i = s; i <= d;) {
i = i + 24 * 60 * 60 * 1000;
arr.push(parseInt(i))
}
// 获取每一天的时间 YY-MM-DD
for (var j in arr) {
var time = new Date(arr[j]);
var year = time.getFullYear(time);
var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
var YYMMDD = year + '-' + mouth + '-' + day;
dates.push(YYMMDD)
}
return dates
},
goblack() {
this.$router.go(-1);//返回上一层
}
}
},
created() {
console.log(this.$route.query)
},
methods: {
}
}
</script>
<style>
</style>
\ No newline at end of file
</script>
\ No newline at end of file
src/pages/enterprise/channelcodeList.vue
View file @ a2f4bc2a
......@@ -172,6 +172,7 @@
customMsg:{
pageIndex: 1,
pageSize: 10,
rowsPerPage: 10,
ChannelId:0
},
typeList: [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment