|
|
<template>
|
|
|
<div>
|
|
|
<Row :gutter="32">
|
|
|
<i-col span="32">
|
|
|
<row>
|
|
|
<!--筛选-->
|
|
|
<row>
|
|
|
<span>
|
|
|
<span class="title-span">
|
|
|
<span class="date-btn" :style="dateBtnValue === '今日' ? 'background: #2D8CF0;color: #fff' : ''"
|
|
|
@click="dateBtnClick('今日')">今日</span>
|
|
|
<span class="date-btn" :style="dateBtnValue === '本周' ? 'background: #2D8CF0;color: #fff' : ''"
|
|
|
@click="dateBtnClick('本周')">本周</span>
|
|
|
<span class="date-btn" :style="dateBtnValue === '本月' ? 'background: #2D8CF0;color: #fff' : ''"
|
|
|
@click="dateBtnClick('本月')">本月</span>
|
|
|
<span class="date-btn" :style="dateBtnValue === '自定义' ? 'background: #2D8CF0;color: #fff' : ''"
|
|
|
@click="dateBtnClick('自定义')">自定义</span>
|
|
|
</span>
|
|
|
</span>
|
|
|
<span class="title-select-date">
|
|
|
<span class="view-text">{{dateBtnValue}}概览</span>
|
|
|
<span v-if="dateBtnValue !== '自定义'" class="view-date">{{viewDate}}</span>
|
|
|
<span class="left-10" v-if="dateBtnValue === '自定义'" style="vertical-align: top">
|
|
|
<DatePicker v-model="selectStartTime" type="date" placeholder="请选择时间"
|
|
|
class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
|
|
|
<span style="margin: 0 5px">至</span>
|
|
|
<DatePicker v-model="selectEndTime" type="date" placeholder="请选择时间"
|
|
|
class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
|
|
|
</span>
|
|
|
</span>
|
|
|
</row>
|
|
|
<!--柱状图-->
|
|
|
<row class="top-10">
|
|
|
<i-col span="24" class="outline">
|
|
|
<span class="blue-logo"></span>
|
|
|
<span class="chart-title-date">累计拓客报表</span>
|
|
|
<span style="font-size: 14px;color:#666;margin-left: 100px">
|
|
|
拓客<input-number size="small" :min="1" v-model="count" :on-change="getMainList"></input-number>以内门店数量
|
|
|
</span>
|
|
|
<ve-histogram :data="chartData" :extend="chartExtend" :settings="chartSettings" :colors="chartColor"></ve-histogram>
|
|
|
</i-col>
|
|
|
</row>
|
|
|
<Spin style="top: 50px" size="large" fix v-if="spinShow"></Spin>
|
|
|
</row>
|
|
|
</i-col>
|
|
|
</Row>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
|
|
|
import customerView from "../../services/datacenter/customerView";
|
|
|
import 'echarts/lib/chart/line'
|
|
|
import 'echarts/lib/component/toolbox'
|
|
|
export default {
|
|
|
inject: ['setMenuName'],
|
|
|
data() {
|
|
|
return {
|
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
|
//加载遮罩
|
|
|
spinShow: false,
|
|
|
count: 3,
|
|
|
dateBtnValue: "今日",
|
|
|
viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
|
|
|
//近七天日期
|
|
|
recentName: "近七天",
|
|
|
//选中时间
|
|
|
selectStartTime: "",
|
|
|
selectEndTime: "",
|
|
|
//柱状图时间
|
|
|
startTime: "",
|
|
|
endTime: "",
|
|
|
chartExtend: {
|
|
|
barWidth: 28,
|
|
|
grid: {
|
|
|
left:50,
|
|
|
right:50,
|
|
|
},
|
|
|
toolbox: {
|
|
|
show: true,
|
|
|
feature: {
|
|
|
dataView: { show: true, readOnly: false },
|
|
|
restore: { show: true },
|
|
|
saveAsImage: { show: true },
|
|
|
myTool1: {
|
|
|
show: true,
|
|
|
title: '下载excel',
|
|
|
icon:'path://M877.6 289.5L656 68.4c-2.8-2.8-6.6-4.4-10.6-4.4h-463c-22.3 0-40.5 18.1-40.5 40.4v815.2c0 22.3 18.1 40.4 40.5 40.4h659.1c22.3 0 40.5-18.1 40.5-40.4V300.1c0-4-1.6-7.8-4.4-10.6zM641.2 96.1l207.6 207.2H641.2V96.1zM841.5 930h-659c-5.8 0-10.5-4.7-10.5-10.4V104.4c0-5.6 4.8-10.4 10.5-10.4h428.8v224.3c0 8.3 6.7 15 15 15H852v586.3c0 5.7-4.7 10.4-10.5 10.4z M447.9 520.2h-32l-44.8 74.2c-3.3 5.7-6 11-8.3 16.1h-0.6c-2.5-5.9-5-11-7.6-15.4l-42.8-74.9h-34.3l66.3 107.7-72.1 108.6H306l49.8-81.3c3.2-6.8 4.8-10.6 5-11.3h0.7c2.1 5.6 3.8 9.3 4.9 11.2l48.4 81.4h34l-68.7-109.1 67.8-107.2zM509 520.2h-28v216.3h114.4v-24.7H509zM693.9 616.5c-19.3-9.5-31.9-17-37.6-22.5-5.8-5.5-8.7-12.6-8.7-21.4 0-9.9 4.2-17.6 12.5-23.1s19.1-8.3 32.4-8.3c20 0 36.5 4.5 49.5 13.5v-30.4c-10.1-5.2-25.9-7.8-47.4-7.8-22 0-40.3 5.3-54.7 15.8-14.5 10.5-21.7 24.8-21.7 42.7 0 11.9 3.5 22.5 10.4 31.8s21.2 19.3 43 30.1c15.7 7.7 26.4 13.5 32 17.2 5.7 3.7 10.2 8 13.4 12.8 3.3 4.8 4.9 10.3 4.9 16.3 0 21.6-15.2 32.4-45.6 32.4-10 0-20.5-1.9-31.6-5.6-11.1-3.7-20-8.5-26.6-14.2v31.8c5.2 3.5 13.5 6.5 25 8.9 11.4 2.4 21.4 3.6 30 3.6 24.5 0 43.7-5.1 57.5-15.2 13.8-10.1 20.7-24.7 20.7-43.7 0-12.7-4.2-24.1-12.7-34.2-8.6-10.2-23.4-20.3-44.7-30.5z',
|
|
|
onclick: function (data){
|
|
|
let title =JSON.stringify(data.getOption().series[0].name);
|
|
|
title += ","+JSON.stringify(data.getOption().series[1].name);
|
|
|
let jsonData =JSON.stringify(data.getOption().series[0].data);//将series转成JSON字符串
|
|
|
jsonData += "##"+JSON.stringify(data.getOption().series[1].data);
|
|
|
let company =JSON.stringify(data.getOption().xAxis[0].data);//将series转成JSON字符串
|
|
|
let request = {
|
|
|
title: title,
|
|
|
jsonData: jsonData,
|
|
|
company: company,
|
|
|
};
|
|
|
//加载遮罩
|
|
|
this.spinShow = true;
|
|
|
customerView.downLoadExcel(request, title,function (data) {
|
|
|
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
label: {show: false, position: "top"},
|
|
|
xAxis: {
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
rotate: 45,
|
|
|
fontSize: 10,
|
|
|
fontWeight:"normal"
|
|
|
},
|
|
|
triggerEvent: true
|
|
|
},
|
|
|
dataZoom: {
|
|
|
type: "slider",
|
|
|
realtime: true, //拖动滚动条时是否动态的更新图表数据
|
|
|
height: 25, //滚动条高度
|
|
|
start: 0, //滚动条开始位置（共100等份）
|
|
|
end: 100 //结束位置（共100等份）
|
|
|
}
|
|
|
},
|
|
|
chartColor: ["#FFCC00","#EC6A2F"],
|
|
|
chartData: {
|
|
|
columns: ['零售公司','店铺数','发起申请数'],
|
|
|
rows: [
|
|
|
{'零售公司': 'qishuo', '发起申请数': 14, '店铺数': 7},
|
|
|
{'零售公司': 'qishuo', '发起申请数': 7, '店铺数': 3},
|
|
|
{'零售公司': 'qishuo', '发起申请数': 8, '店铺数': 4},
|
|
|
{'零售公司': 'qishuo', '发起申请数': 5, '店铺数': 2},
|
|
|
{'零售公司': 'qishuo', '发起申请数': 10, '店铺数': 9}
|
|
|
]
|
|
|
},
|
|
|
chartSettings : {
|
|
|
showLine: ['发起申请数']
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted: function () {
|
|
|
this.dateBtnClick('今日');
|
|
|
this.timingRefresh();
|
|
|
},
|
|
|
methods: {
|
|
|
//页面重绘
|
|
|
resizeWindow: function () {
|
|
|
let event = document.createEvent("HTMLEvents");
|
|
|
event.initEvent("resize", true, true);
|
|
|
window.dispatchEvent(event);
|
|
|
},
|
|
|
//日期按钮
|
|
|
dateBtnClick: function (value) {
|
|
|
switch (value) {
|
|
|
case '今日':
|
|
|
this.dateBtnValue = "今日";
|
|
|
this.recentName = "近七天";
|
|
|
this.dateSelectChange('今日');
|
|
|
this.chartExtend.barWidth = 28;
|
|
|
this.chartExtend.label.show = true;
|
|
|
break;
|
|
|
case '本周':
|
|
|
this.dateBtnValue = "本周";
|
|
|
this.recentName = "本周";
|
|
|
this.dateSelectChange('本周');
|
|
|
this.chartExtend.barWidth = 28;
|
|
|
this.chartExtend.label.show = true;
|
|
|
break;
|
|
|
case '本月':
|
|
|
this.dateBtnValue = "本月";
|
|
|
this.recentName = "本月";
|
|
|
this.dateSelectChange('本月');
|
|
|
this.chartExtend.barWidth = 28;
|
|
|
this.chartExtend.label.show = true;
|
|
|
break;
|
|
|
case '自定义':
|
|
|
this.dateBtnValue = "自定义";
|
|
|
this.recentName = "自定义";
|
|
|
this.diyDateChange();
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
//自定义日期
|
|
|
diyDateChange: function () {
|
|
|
if (this.selectStartTime && this.selectEndTime) {
|
|
|
//超过15天，柱状图不显示数字
|
|
|
this.dateSelectChange('自定义');
|
|
|
}
|
|
|
},
|
|
|
//日期改变
|
|
|
dateSelectChange: function (value) {
|
|
|
//概览日期text
|
|
|
let nowDate = this.$moment(new Date());
|
|
|
switch (value) {
|
|
|
case '今日':
|
|
|
this.viewDate = nowDate.format("YYYY-MM-DD");
|
|
|
this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
|
|
|
this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
|
this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
|
|
|
this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
|
break;
|
|
|
case '本周':
|
|
|
this.viewDate = nowDate.startOf('week').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
|
|
|
this.selectStartTime = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD 00:00:00");
|
|
|
this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
|
this.startTime = this.selectStartTime;
|
|
|
this.endTime = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD HH:mm:ss");
|
|
|
break;
|
|
|
case '本月':
|
|
|
this.viewDate = nowDate.startOf('month').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
|
|
|
this.selectStartTime = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD 00:00:00");
|
|
|
this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
|
this.startTime = this.selectStartTime;
|
|
|
this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss");
|
|
|
break;
|
|
|
case '自定义':
|
|
|
this.selectStartTime = this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00");
|
|
|
this.selectEndTime = this.$moment(this.selectEndTime).format("YYYY-MM-DD 23:59:59");
|
|
|
this.startTime = this.selectStartTime;
|
|
|
this.endTime = this.selectEndTime;
|
|
|
break;
|
|
|
}
|
|
|
this.getMainList();
|
|
|
},
|
|
|
/**mainList*/
|
|
|
getMainList: function () {
|
|
|
let request = {
|
|
|
count: this.count,
|
|
|
selectStartTime: this.selectStartTime == null ? null : this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"),
|
|
|
selectEndTime: this.selectEndTime == null ? null : this.$moment(this.selectEndTime).format("YYYY-MM-DD HH:mm:ss"),
|
|
|
};
|
|
|
let that = this;
|
|
|
//加载遮罩
|
|
|
this.spinShow = true;
|
|
|
customerView.getAnalysisApplyRequest(request, function (data) {
|
|
|
that.spinShow = false;
|
|
|
if (data.data.code !== "0000") {
|
|
|
that.$Message.error("系统异常");
|
|
|
}
|
|
|
data = data.data.results;
|
|
|
// that.customerViewVO = data;//数据部分没刷新
|
|
|
that.chartData.rows = [];
|
|
|
for (let i = 0;i<data.length;i++) {
|
|
|
let obj1 = {
|
|
|
"零售公司": data[i].companyName,
|
|
|
"发起申请数": data[i].applyCustomer,
|
|
|
"店铺数": data[i].storeNum
|
|
|
};
|
|
|
that.chartData.rows.push(obj1);
|
|
|
}
|
|
|
//页面重绘(柱状图)
|
|
|
that.resizeWindow();
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
/*日期按钮*/
|
|
|
.date-btn {
|
|
|
display: inline-block;
|
|
|
width: 80px;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
text-align: center;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
/*概览字体*/
|
|
|
.view-text {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
font-family: "Microsoft YaHei";
|
|
|
}
|
|
|
|
|
|
/*概览日期*/
|
|
|
.view-date {
|
|
|
font-size: 16px;
|
|
|
color: #97A4B3;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
/*蓝色logo*/
|
|
|
.blue-logo {
|
|
|
background: #1A80D2;
|
|
|
height: 26px;
|
|
|
width: 6px;
|
|
|
border-radius: 3px;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
/*外面的边框*/
|
|
|
.outline {
|
|
|
border: #e8ecf2 2px solid;
|
|
|
padding: 10px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.left-10 {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.top-10 {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.title-span {
|
|
|
width: 330px;
|
|
|
border: 1px solid #E8ECF2;
|
|
|
border-radius: 8px;
|
|
|
padding: 3px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.title-select-date {
|
|
|
height: 38px;
|
|
|
line-height: 38px;
|
|
|
margin-left: 25px;
|
|
|
}
|
|
|
|
|
|
.date-picker {
|
|
|
width: 120px;
|
|
|
}
|
|
|
|
|
|
.title-logo {
|
|
|
position: absolute;
|
|
|
right: 0px;
|
|
|
top: -10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.chart-title-date {
|
|
|
display: inline-block;
|
|
|
margin-left: 5px;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color:#666666;
|
|
|
}
|
|
|
</style>
|