zhenghuang
/
bsdgy-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

批量上传门店号

Browse Source
master
yechenhao 6 years ago
parent 0da245b7df
commit a908a9f650
9 changed files with 950 additions and 3 deletions
Show Stats Download Patch File Download Diff File

2
src/iview.js
Unescape Escape View File

@ -8,6 +8,7 @@ import {
FormItem, FormItem,
Icon, Icon,
Input, Input,
InputNumber,
Layout, Layout,
Menu, Menu,
MenuItem, MenuItem,
@ -41,6 +42,7 @@ Vue.component('Table', Table);
Vue.component('Card', Card); Vue.component('Card', Card);
Vue.component('Form', Form); Vue.component('Form', Form);
Vue.component('FormItem', FormItem); Vue.component('FormItem', FormItem);
Vue.component('InputNumber', InputNumber);
Vue.component('Icon', Icon); Vue.component('Icon', Icon);
Vue.component('i-input', Input); Vue.component('i-input', Input);
Vue.component('Layout', Layout); Vue.component('Layout', Layout);

432
src/pages/AddCustomerTable.vue
Unescape Escape View File

@ -0,0 +1,432 @@
<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" :options="options1" type="date" placeholder="请选择时间"
class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
<span style="margin: 0 5px">至</span>
<DatePicker v-model="selectEndTime" :options="options2" type="date" placeholder="请选择时间"
class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
<Tooltip content="限制最大31天" placement="bottom">
<Icon type="ios-alert-outline" style="margin-left: 5px"/>
</Tooltip>
</span>
<img src="../../static/img/bsd-logo.png" class="title-logo"/>
</span>
</row>
<!--柱状图-->
<row class="top-10">
<i-col span="24" class="outline">
<span class="blue-logo"></span>
<span class="chart-title-date">累计拓客报表</span>
<ve-histogram :data="chartData" :extend="chartExtend"
height="500px" :mark-line="markLine" :colors="chartColor"></ve-histogram>
</i-col>
</row>
<!--柱状图-->
<row class="top-10">
<i-col span="24" class="outline">
<span class="blue-logo"></span>
<span class="chart-title-date">店均拓客报表</span>
<ve-histogram :data="chartStoreData" :extend="chartExtend"
height="500px" :mark-line="avgMarkLine" :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/component/markLine'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/toolbox'
export default {
inject: ['setMenuName'],
data() {
return {
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
//加载遮罩
spinShow: false,
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);
let jsonData =JSON.stringify(data.getOption().series[0].data);
let company =JSON.stringify(data.getOption().xAxis[0].data);
let request = {
title: title,
jsonData: jsonData,
company: company
};
customerView.downLoadExcel(request, title,null);
}
},
}
},
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"],
chartData: {
columns: ['零售公司','累计拓客'],
rows: [
{'零售公司': 'qishuo', '累计拓客': 14},
{'零售公司': 'qishuo', '累计拓客': 7},
{'零售公司': 'qishuo', '累计拓客': 8},
{'零售公司': 'qishuo', '累计拓客': 5},
{'零售公司': 'qishuo', '累计拓客': 10},
]
},
chartStoreData: {
columns: ['零售公司','店铺平均拓客'],
rows: [
{'零售公司': 'qishuo', '店铺平均拓客': 14},
{'零售公司': 'qishuo', '店铺平均拓客': 7},
{'零售公司': 'qishuo', '店铺平均拓客': 8},
{'零售公司': 'qishuo', '店铺平均拓客': 5},
{'零售公司': 'qishuo', '店铺平均拓客': 10},
]
},
markLine : {
precision:0,
data: [
{
name: '平均线',
type: 'average',
lineStyle:{
color:"#FF0000"
}
}
]
},
avgMarkLine : {
precision:0,
data: [
{
name: '平均线',
yAxis: 6,
lineStyle:{
color:"#FF0000"
}
}
]
}
}
},
computed: {
options1() {
let that = this;
return {
disabledDate(date) {
if (that.selectEndTime == null || that.selectEndTime == "") {
return false;
} else {
return date && date.valueOf() > that.$moment(that.selectEndTime) || date && date.valueOf() < that.$moment(that.selectEndTime).add(-31, "days");
}
}
}
},
options2() {
let that = this;
return {
disabledDate(date) {
if (that.selectStartTime == null || that.selectStartTime == "") {
return false;
} else {
return date && date.valueOf() < that.$moment(that.selectStartTime) || date && date.valueOf() > that.$moment(that.selectStartTime).add(31, "days");
}
}
}
},
},
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 = 8;
this.chartExtend.label.show = false;
break;
case '自定义':
this.dateBtnValue = "自定义";
this.recentName = "自定义";
this.diyDateChange();
break;
}
},
//自定义日期
diyDateChange: function () {
if (this.selectStartTime && this.selectEndTime) {
//超过15天，柱状图不显示数字
if (this.$moment(this.selectEndTime).valueOf() - this.$moment(this.selectStartTime).valueOf() > 15 * 24 * 60 * 60 * 1000) {
this.chartExtend.barWidth = 8;
this.chartExtend.label.show = false;
} else {
this.chartExtend.barWidth = 28;
this.chartExtend.label.show = true;
}
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 = {
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.getAnalysisRequest(request, function (data) {
that.spinShow = false;
if (data.data.code !== "0000") {
that.$Message.error("系统异常");
}
data = data.data.results;
// that.customerViewVO = data;//数据部分没刷新
that.chartData.rows = [];
that.chartStoreData.rows = [];
let sumAdd = 0;
let storeNum = 0;
for (let i = 0;i<data.length;i++) {
let obj1 = {
"零售公司": data[i].companyName,
"累计拓客": data[i].addCustomer
};
that.chartData.rows.push(obj1);
let obj2 = {
"零售公司": data[i].companyName,
"店铺平均拓客": data[i].avgAddCustomer
};
that.chartStoreData.rows.push(obj2);
sumAdd += data[i].addCustomer;
storeNum += data[i].storeNum
}
that.avgMarkLine.data[0].yAxis = sumAdd/storeNum;
//页面重绘(柱状图)
that.resizeWindow();
});
},
//定时刷新
timingRefresh: function () {
let that = this;
setInterval(function () {
that.dateBtnClick(that.dateBtnValue);
}, 1000 * 60);
}
}
}
</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>

389
src/pages/ApplyCustomerTable.vue
Unescape Escape View File

@ -0,0 +1,389 @@
<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" :options="options1" type="date" placeholder="请选择时间"
class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
<span style="margin: 0 5px">至</span>
<DatePicker v-model="selectEndTime" :options="options2" type="date" placeholder="请选择时间"
class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
<Tooltip content="限制最大31天" placement="bottom">
<Icon type="ios-alert-outline" style="margin-left: 5px"/>
</Tooltip>
</span>
<img src="../../static/img/bsd-logo.png" class="title-logo"/>
</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"></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: '自定义扩展方法1',
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: ['发起申请数']
}
}
},
computed: {
options1() {
let that = this;
return {
disabledDate(date) {
if (that.selectEndTime == null || that.selectEndTime == "") {
return false;
} else {
return date && date.valueOf() > that.$moment(that.selectEndTime) || date && date.valueOf() < that.$moment(that.selectEndTime).add(-31, "days");
}
}
}
},
options2() {
let that = this;
return {
disabledDate(date) {
if (that.selectStartTime == null || that.selectStartTime == "") {
return false;
} else {
return date && date.valueOf() < that.$moment(that.selectStartTime) || date && date.valueOf() > that.$moment(that.selectStartTime).add(31, "days");
}
}
}
},
},
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 = 8;
this.chartExtend.label.show = false;
break;
case '自定义':
this.dateBtnValue = "自定义";
this.recentName = "自定义";
this.diyDateChange();
break;
}
},
//自定义日期
diyDateChange: function () {
if (this.selectStartTime && this.selectEndTime) {
//超过15天，柱状图不显示数字
if (this.$moment(this.selectEndTime).valueOf() - this.$moment(this.selectStartTime).valueOf() > 15 * 24 * 60 * 60 * 1000) {
this.chartExtend.barWidth = 8;
this.chartExtend.label.show = false;
} else {
this.chartExtend.barWidth = 28;
this.chartExtend.label.show = true;
}
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();
});
},
//定时刷新
timingRefresh: function () {
let that = this;
setInterval(function () {
that.dateBtnClick(that.dateBtnValue);
}, 1000 * 60);
}
}
}
</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>

2
src/pages/CustomerView.vue
Unescape Escape View File

@ -71,7 +71,7 @@
<i-col span="6" class="big-blank"> <i-col span="6" class="big-blank">
<row class="top-15"><span class="big-blank-font">{{customerViewVO.validDeleteCustomer}}</span> <row class="top-15"><span class="big-blank-font">{{customerViewVO.validDeleteCustomer}}</span>
</row> </row>
<row class="top-10"><span>拉黑数(累计去重)</span></row> <row class="top-10"><span>拉黑数(累计)</span></row>
</i-col> </i-col>
</row> </row>
</i-col> </i-col>

46
src/pages/TableAnalysis.vue
Unescape Escape View File

@ -0,0 +1,46 @@
<template>
<div>
<Menu ref="menu" mode="horizontal" :active-name="selectedItemName" v-model="this.threeLevel[0].id">
<MenuItem :name="cItem.id" :to="cItem.resource" v-for="cItem in threeLevel"
:key="cItem.id">
{{cItem.name}}
</MenuItem>
</Menu>
<div>
<router-view/>
</div>
</div>
</template>
<script>
export default {
name: "TableAnalysis",
data() {
return {
threeLevel: [],
selectedItemName: null,
}
},
created() {
this.threeLevel = JSON.parse(sessionStorage.getItem("threeLevel"));
this.menuInit();
},
mounted() {
this.threeLevel = JSON.parse(sessionStorage.getItem("threeLevel"));
this.menuInit();
},
methods:{
menuInit(){
let that = this;
that.selectedItemName = that.threeLevel[0].id;
this.$nextTick(() => {
that.$refs.menu.updateActiveName();
});
}
}
}
</script>
<style scoped>
</style>

24
src/router/index.js
Unescape Escape View File

@ -10,6 +10,9 @@ import AccountManagerUpload from '@/pages/user/AccountManagerUpload';
import RoleManager from '@/pages/user/RoleManager'; import RoleManager from '@/pages/user/RoleManager';
import IncreaseManager from '@/pages/shop/IncreaseManager'; import IncreaseManager from '@/pages/shop/IncreaseManager';
import CustomerView from "@/pages/CustomerView"; import CustomerView from "@/pages/CustomerView";
import TableAnalysis from "@/pages/TableAnalysis";
import AddCustomerTable from "@/pages/AddCustomerTable";
import ApplyCustomerTable from "@/pages/ApplyCustomerTable";
import ZeroExtendDetail from "@/pages/ZeroExtendDetail"; import ZeroExtendDetail from "@/pages/ZeroExtendDetail";
import CustomerDetail from "@/pages/CustomerDetail"; import CustomerDetail from "@/pages/CustomerDetail";
import IncreaseData from '@/pages/shop/IncreaseData'; import IncreaseData from '@/pages/shop/IncreaseData';
@ -102,6 +105,27 @@ const router = new Router({
} }
] ]
}, },
{
path: '/table/analysis',
name: 'TableAnalysis',
component: TableAnalysis,
children: [
{
path: '/',
redirect: '/table/analysis/customer/add'
},
{
path: '/table/analysis/customer/add',
name: 'AddCustomerTable',
component: AddCustomerTable
},
{
path: '/table/analysis/customer/apply',
name: 'ApplyCustomerTable',
component: ApplyCustomerTable
}
]
},
{ {
path: '/shop/increase/configure', path: '/shop/increase/configure',
name: 'IncreaseConfigure', name: 'IncreaseConfigure',

44
src/services/CommonHttp.js
Unescape Escape View File

@ -7,7 +7,7 @@ import commonUtils from '../utils/Common'
// http://mf.kiisoo.com:58080/ // http://mf.kiisoo.com:58080/
// axios.defaults.baseURL = 'http://mf.kiisoo.com:58080/gds/api'; // axios.defaults.baseURL = 'http://mf.kiisoo.com:58080/gds/api';
axios.defaults.baseURL = 'https://wxtk.bsdits.com/kiisoo-ic/'; axios.defaults.baseURL = '/ic';
// axios.defaults.baseURL = '/kiisoo-ic'; // axios.defaults.baseURL = '/kiisoo-ic';
//响应时间 //响应时间
@ -230,6 +230,47 @@ export function downloadZip(url,filename, options = {}) {
) )
}) })
} }
export function downloadExcel(url,filename, options = {}) {
let split = filename.split(",");
if (split.length != 1){
filename = "店铺发起申请数报表";
}else{
filename = "零售公司拓客报表";
}
return new Promise((resolve, reject) => {
axios.defaults.headers['content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios({
method: 'post',
url: url, // 请求地址
data: options, // 参数
responseType: 'blob' // 表明返回服务器返回的数据类型
}).then(
response => {
resolve(response.data)
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
})
console.log(blob)
let fileName = filename + '.xls'
if (window.navigator.msSaveOrOpenBlob) {
// console.log(2)
navigator.msSaveBlob(blob, fileName)
} else {
// console.log(3)
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
//释放内存
window.URL.revokeObjectURL(link.href)
}
},
err => {
reject(err)
}
)
})
}
export function downloadImg(url,filename, options = {}) { export function downloadImg(url,filename, options = {}) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.defaults.headers['content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8' axios.defaults.headers['content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
@ -274,6 +315,7 @@ export default {
get, get,
post, post,
downloadZip, downloadZip,
downloadExcel,
downloadImg, downloadImg,
put, put,
fetchDelete, fetchDelete,

12
src/services/datacenter/customerView.js
Unescape Escape View File

@ -10,10 +10,22 @@ import http from '../CommonHttp'
export function getMainRequest(params, call) { export function getMainRequest(params, call) {
return http.get('/customer/view/main', params).then(call) return http.get('/customer/view/main', params).then(call)
} }
export function getAnalysisRequest(params, call) {
return http.post('/analysis/add/customer', params).then(call)
}
export function getAnalysisApplyRequest(params, call) {
return http.post('/analysis/apply/customer', params).then(call)
}
export function downLoadExcel(params,filename, call) {
return http.downloadExcel('/analysis/download/excel',filename, params).then(call)
}
export default { export default {
//mainList //mainList
getMainRequest, getMainRequest,
getAnalysisRequest,
downLoadExcel,
getAnalysisApplyRequest,
} }

2
vue.config.js
Unescape Escape View File

@ -28,7 +28,7 @@ module.exports = {
hotOnly: false, hotOnly: false,
disableHostCheck: true, disableHostCheck: true,
/* 使用代理 后台接口路径 */ /* 使用代理 后台接口路径 */
proxy: 'http://192.168.31.177:8312/' proxy: 'http://192.168.1.163:8048/'
// proxy: 'http://jdxdev.vipgz4.idcfengye.com/' // proxy: 'http://jdxdev.vipgz4.idcfengye.com/'
}, },
chainWebpack: config => { chainWebpack: config => {

Write Preview
Loading…
Cancel
Save