|
|
|
|
|
<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>
|
|
|
|
|
|
<!--5块客户数-->
|
|
|
|
|
|
<row class="top-20">
|
|
|
|
|
|
<Row class="text-center">
|
|
|
|
|
|
<i-col span="10">
|
|
|
|
|
|
<row type="flex" justify="center" class="code-row-bg">
|
|
|
|
|
|
<i-col span="5" class="big-blank">
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<i-col span="10" class="big-blank">
|
|
|
|
|
|
<row class="top-5"><span
|
|
|
|
|
|
class="huge-blank-font">{{customerViewVO.allCustomer}}</span></row>
|
|
|
|
|
|
<row><span class="weight-700">好友总数</span></row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <i-col span="5" class="big-blank">-->
|
|
|
|
|
|
<!-- <row class="top-5"><span class="huge-blank-font">{{customerViewVO.allValidCustomer}}</span>-->
|
|
|
|
|
|
<!-- </row>-->
|
|
|
|
|
|
<!-- <row><span class="left-10 weight-700">好友总数(去重)</span></row>-->
|
|
|
|
|
|
<!-- </i-col>-->
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<i-col span="10">
|
|
|
|
|
|
<row type="flex" justify="center" class="code-row-bg">
|
|
|
|
|
|
<!-- <i-col span="4" class="big-blank">-->
|
|
|
|
|
|
<!-- </i-col>-->
|
|
|
|
|
|
<i-col span="4" class="big-blank">
|
|
|
|
|
|
<row class="top-15"><span
|
|
|
|
|
|
class="big-blank-font">{{customerViewVO.newCustomer}}</span></row>
|
|
|
|
|
|
<row class="top-10"><span>新增好友</span></row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<!-- <i-col span="2" class="big-blank">-->
|
|
|
|
|
|
<!-- </i-col>-->
|
|
|
|
|
|
<!-- <i-col span="5" class="big-blank">-->
|
|
|
|
|
|
<!-- <row class="top-15"><span class="big-blank-font">{{customerViewVO.newValidCustomer}}</span>-->
|
|
|
|
|
|
<!-- </row>-->
|
|
|
|
|
|
<!-- <row class="top-10"><span>新增好友(去重)</span></row>-->
|
|
|
|
|
|
<!-- </i-col>-->
|
|
|
|
|
|
<!-- <i-col span="2" class="big-blank">-->
|
|
|
|
|
|
<!-- </i-col>-->
|
|
|
|
|
|
<!-- <i-col span="6" class="big-blank">-->
|
|
|
|
|
|
<!-- <row class="top-15"><span class="big-blank-font">{{customerViewVO.validDeleteCustomer}}</span>-->
|
|
|
|
|
|
<!-- </row>-->
|
|
|
|
|
|
<!-- <row class="top-10"><span>拉黑数(累计)</span></row>-->
|
|
|
|
|
|
<!-- </i-col>-->
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<!--柱状图-->
|
|
|
|
|
|
<row class="top-10">
|
|
|
|
|
|
<i-col span="16" class="outline">
|
|
|
|
|
|
<span class="blue-logo"></span>
|
|
|
|
|
|
<span class="chart-title-date">{{this.$moment(startTime).format("YYYY-MM-DD")}}至{{this.$moment(endTime).format("YYYY-MM-DD")}}（{{recentName}}）趋势图</span>
|
|
|
|
|
|
<ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<i-col span="8" class="padding-left-10">
|
|
|
|
|
|
<row class="outline">
|
|
|
|
|
|
<span class="blue-logo"></span>
|
|
|
|
|
|
<span class="chart-title-span">好友&会员情况</span>
|
|
|
|
|
|
<row class="chart-row">
|
|
|
|
|
|
<i-col span="6" style="border-right: 1px solid #D3D3D3;">
|
|
|
|
|
|
<row class="chart-row-customer-row1"></row>
|
|
|
|
|
|
<row class="percent-text"><span>好友总数(去重)</span></row>
|
|
|
|
|
|
<row class="chart-row-customer-row2"></row>
|
|
|
|
|
|
<row class="percent-text"><span>会员总数</span></row>
|
|
|
|
|
|
<row class="chart-row-customer-row3"></row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<i-col span="18">
|
|
|
|
|
|
<row class="chart-row-customer-row1"></row>
|
|
|
|
|
|
<row><span class="percent-span" style="background: #EC6A2F;"
|
|
|
|
|
|
:style="percent1"></span><span>{{customerViewVO.allValidCustomer}}</span>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<row class="chart-row-customer-row2"></row>
|
|
|
|
|
|
<row><span class="percent-span" style="background: #FFCC00;"
|
|
|
|
|
|
:style="percent2"></span><span>{{customerViewVO.allVipCount}}</span>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<row class="chart-row-customer-row3"></row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<!--前十名-->
|
|
|
|
|
|
<row class="top-10">
|
|
|
|
|
|
<i-col span="6">
|
|
|
|
|
|
<row class="outline chart-top-10-row">
|
|
|
|
|
|
<span class="blue-logo"></span>
|
|
|
|
|
|
<span class="chart-top-10-title-span">零售公司店均新增好友top10</span>
|
|
|
|
|
|
<row v-if="customerViewVO.orgNewCustomerList.length === 0" class="text-center">暂无数据
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<row v-if="customerViewVO.orgNewCustomerList.length > 0" class="padding-12">
|
|
|
|
|
|
<row v-for="item in customerViewVO.orgNewCustomerList" :key="item.orgId">
|
|
|
|
|
|
<i-col span="8" class="text-ellipsis" style="text-align: left;padding-right: 5px;">
|
|
|
|
|
|
{{item.orgName}}
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<i-col span="16"><span class="top10-percent-span" style="background: #FFCC00;"
|
|
|
|
|
|
:style="'width:' + item.newCustomerCount/customerViewVO.orgNewCustomerList[0].newCustomerCount*80 + '%'"></span><span>{{item.newCustomerCount}}</span>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
|
|
|
|
|
|
<i-col span="10" class="padding-left-10">
|
|
|
|
|
|
<row class="outline chart-top-10-row">
|
|
|
|
|
|
<span class="blue-logo"></span>
|
|
|
|
|
|
<span class="chart-top-10-title-span">店铺新增好友top10</span>
|
|
|
|
|
|
<row v-if="customerViewVO.shopNewCustomerList.length === 0" class="text-center">暂无数据
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<row v-if="customerViewVO.shopNewCustomerList.length > 0" class="padding-12">
|
|
|
|
|
|
<row v-for="item in customerViewVO.shopNewCustomerList" :key="item.shopId">
|
|
|
|
|
|
<i-col span="9" class="text-ellipsis" style="text-align: left;padding-right: 5px;">
|
|
|
|
|
|
{{item.shopName}}
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
<i-col span="15"><span class="top10-percent-span" style="background: #EC6A2F;"
|
|
|
|
|
|
:style="'width:' + item.newCustomerCount/customerViewVO.shopNewCustomerList[0].newCustomerCount*80 + '%'"></span><span>{{item.newCustomerCount}}</span>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</i-col>
|
|
|
|
|
|
|
|
|
|
|
|
<i-col span="8" class="padding-left-10">
|
|
|
|
|
|
<row class="outline chart-top-10-row">
|
|
|
|
|
|
<span class="blue-logo"></span>
|
|
|
|
|
|
<span class="chart-top-10-title-span">推广为0的店铺数</span>
|
|
|
|
|
|
<span style="position: absolute;right: 5px;cursor: pointer"
|
|
|
|
|
|
@click="zeroExtendMore"><span style="vertical-align: top">更多</span><img
|
|
|
|
|
|
src="../../../static/img/right-angle.png"/></span>
|
|
|
|
|
|
<row v-if="customerViewVO.zeroExtendList.length === 0" class="text-center">暂无数据</row>
|
|
|
|
|
|
<row v-if="customerViewVO.zeroExtendList.length > 0" class="padding-12">
|
|
|
|
|
|
<row>
|
|
|
|
|
|
<i-col span="1"><span style="visibility: hidden">visible</span></i-col>
|
|
|
|
|
|
<i-col span="9">零售公司</i-col>
|
|
|
|
|
|
<i-col span="7">店铺总数</i-col>
|
|
|
|
|
|
<i-col span="7">0推广店铺数</i-col>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
<row v-for="item in customerViewVO.zeroExtendList" :key="item.orgId">
|
|
|
|
|
|
<i-col span="1"><span style="visibility: hidden">visible</span></i-col>
|
|
|
|
|
|
<i-col span="9" class="text-ellipsis">{{item.orgName}}</i-col>
|
|
|
|
|
|
<i-col span="7">{{item.allShopCount}}</i-col>
|
|
|
|
|
|
<i-col span="7">{{item.zeroShopCount}}</i-col>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</row>
|
|
|
|
|
|
</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";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
inject: ['setMenuName'],
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
|
|
|
|
intervalId : 0,
|
|
|
|
|
|
//加载遮罩
|
|
|
|
|
|
spinShow: false,
|
|
|
|
|
|
dateBtnValue: "今日",
|
|
|
|
|
|
viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
|
|
|
|
|
|
//近七天日期
|
|
|
|
|
|
recentName: "近七天",
|
|
|
|
|
|
//选中时间
|
|
|
|
|
|
selectStartTime: "",
|
|
|
|
|
|
selectEndTime: "",
|
|
|
|
|
|
//柱状图时间
|
|
|
|
|
|
startTime: "",
|
|
|
|
|
|
endTime: "",
|
|
|
|
|
|
//人数占比
|
|
|
|
|
|
percent1: "width:0%",
|
|
|
|
|
|
percent2: "width:0%",
|
|
|
|
|
|
customerViewVO: {
|
|
|
|
|
|
newCustomer: 0,
|
|
|
|
|
|
newValidCustomer: 0,
|
|
|
|
|
|
allCustomer: 0,
|
|
|
|
|
|
allValidCustomer: 0,
|
|
|
|
|
|
validDeleteCustomer: 0,
|
|
|
|
|
|
allVipCount: 0,
|
|
|
|
|
|
//柱状图
|
|
|
|
|
|
customerList: [],
|
|
|
|
|
|
validCustomerList: [],
|
|
|
|
|
|
//下面3大块
|
|
|
|
|
|
orgNewCustomerList: [],
|
|
|
|
|
|
shopNewCustomerList: [],
|
|
|
|
|
|
zeroExtendList: [],
|
|
|
|
|
|
},
|
|
|
|
|
|
chartExtend: {
|
|
|
|
|
|
barWidth: 28,
|
|
|
|
|
|
label: {show: true, position: "top"}
|
|
|
|
|
|
},
|
|
|
|
|
|
chartColor: ["#ffcc00", "#ec6a2f"],
|
|
|
|
|
|
chartData: {
|
|
|
|
|
|
columns: ['date', '新增好友', '新增好友(去重)'],
|
|
|
|
|
|
rows: [
|
|
|
|
|
|
{'date': '1/1', '新增好友': 14, '新增好友(去重)': 14},
|
|
|
|
|
|
{'date': '1/1', '新增好友': 20, '新增好友(去重)': 10},
|
|
|
|
|
|
{'date': '1/1', '新增好友': 30, '新增好友(去重)': 25},
|
|
|
|
|
|
{'date': '1/1', '新增好友': 11, '新增好友(去重)': 11},
|
|
|
|
|
|
{'date': '1/1', '新增好友': 14, '新增好友(去重)': 14},
|
|
|
|
|
|
{'date': '1/1', '新增好友': 20, '新增好友(去重)': 10},
|
|
|
|
|
|
{'date': '1/1', '新增好友': 30, '新增好友(去重)': 25},
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
timer: null
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
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();
|
|
|
|
|
|
},
|
|
|
|
|
|
// 页面销毁清除定时器
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
|
if (this.timer){
|
|
|
|
|
|
clearInterval(this.timer);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
//页面重绘
|
|
|
|
|
|
resizeWindow: function () {
|
|
|
|
|
|
let event = document.createEvent("HTMLEvents");
|
|
|
|
|
|
event.initEvent("resize", true, true);
|
|
|
|
|
|
window.dispatchEvent(event);
|
|
|
|
|
|
},
|
|
|
|
|
|
//占比重绘
|
|
|
|
|
|
percentResize: function () {
|
|
|
|
|
|
let allValidCustomer = this.customerViewVO.allValidCustomer;
|
|
|
|
|
|
let allVipCount = this.customerViewVO.allVipCount;
|
|
|
|
|
|
let sum = allValidCustomer + allVipCount;
|
|
|
|
|
|
if (sum === 0) {
|
|
|
|
|
|
this.percent1 = "width:0%";
|
|
|
|
|
|
this.percent2 = "width:0%";
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (allValidCustomer > allVipCount) {
|
|
|
|
|
|
let p2 = Math.floor(allVipCount / allValidCustomer * 100 * 100) / 100 * 0.8;
|
|
|
|
|
|
this.percent1 = "width:80%";
|
|
|
|
|
|
this.percent2 = "width:" + p2 + "%";
|
|
|
|
|
|
}
|
|
|
|
|
|
if (allValidCustomer < allVipCount) {
|
|
|
|
|
|
let p1 = Math.floor(allValidCustomer / allVipCount * 100 * 100) / 100 * 0.8;
|
|
|
|
|
|
this.percent1 = "width:" + p1 + "%";
|
|
|
|
|
|
this.percent2 = "width:80%";
|
|
|
|
|
|
}
|
|
|
|
|
|
if (allValidCustomer === allVipCount) {
|
|
|
|
|
|
this.percent1 = "width:80%";
|
|
|
|
|
|
this.percent2 = "width:80%";
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//0转null
|
|
|
|
|
|
checkZero: function (value) {
|
|
|
|
|
|
if (value === 0) {
|
|
|
|
|
|
return null;
|
|
|
|
|
|
}
|
|
|
|
|
|
return value;
|
|
|
|
|
|
},
|
|
|
|
|
|
//日期按钮
|
|
|
|
|
|
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();
|
|
|
|
|
|
this.getMainVip();
|
|
|
|
|
|
this.getMainDateList();
|
|
|
|
|
|
this.getMainDel();
|
|
|
|
|
|
this.getAllCount();
|
|
|
|
|
|
},
|
|
|
|
|
|
getAllCount: function(){
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
customerView.getAllCount({
|
|
|
|
|
|
userId: this.userId
|
|
|
|
|
|
},function (data) {
|
|
|
|
|
|
if (data.data.code !== "0000") {
|
|
|
|
|
|
that.$Message.error("系统异常");
|
|
|
|
|
|
}
|
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
|
that.customerViewVO.allCustomer = data.allCustomer;
|
|
|
|
|
|
that.customerViewVO.allValidCustomer = data.allValidCustomer;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
/**mainList*/
|
|
|
|
|
|
getMainList: function () {
|
|
|
|
|
|
let request = {
|
|
|
|
|
|
userId: this.userId,
|
|
|
|
|
|
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"),
|
|
|
|
|
|
startTime: this.startTime,
|
|
|
|
|
|
endTime: this.endTime
|
|
|
|
|
|
};
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
customerView.getMainRequest(request, function (data) {
|
|
|
|
|
|
if (data.data.code !== "0000") {
|
|
|
|
|
|
that.$Message.error("系统异常");
|
|
|
|
|
|
}
|
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
|
// that.customerViewVO = data;//数据部分没刷新
|
|
|
|
|
|
that.customerViewVO.newCustomer = data.newCustomer;
|
|
|
|
|
|
that.customerViewVO.newValidCustomer = data.newValidCustomer;
|
|
|
|
|
|
that.customerViewVO.customerList = data.customerList;
|
|
|
|
|
|
that.customerViewVO.validCustomerList = data.validCustomerList;
|
|
|
|
|
|
that.chartData.rows = [];
|
|
|
|
|
|
if (that.startTime && that.endTime) {
|
|
|
|
|
|
let tmpStartTime = that.startTime;
|
|
|
|
|
|
while (that.$moment(tmpStartTime).format("YYYY-MM-DD") <= that.$moment(that.endTime).format("YYYY-MM-DD")) {
|
|
|
|
|
|
let date = that.$moment(tmpStartTime).format("M-DD");
|
|
|
|
|
|
let customerDO = that.customerViewVO.customerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD"));
|
|
|
|
|
|
let validCustomerDO = that.customerViewVO.validCustomerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD"));
|
|
|
|
|
|
let customerSize = customerDO.length === 0 ? 0 : customerDO[0].customerSize;
|
|
|
|
|
|
let validCustomerSize = validCustomerDO.length === 0 ? 0 : validCustomerDO[0].customerSize;
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
date: date,
|
|
|
|
|
|
"新增好友": customerSize,
|
|
|
|
|
|
"新增好友(去重)": validCustomerSize,
|
|
|
|
|
|
};
|
|
|
|
|
|
that.chartData.rows.push(obj);
|
|
|
|
|
|
tmpStartTime = that.$moment(tmpStartTime).add(1, "days").format("YYYY-MM-DD HH:mm:ss");
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//占比重绘
|
|
|
|
|
|
that.percentResize();
|
|
|
|
|
|
//页面重绘(柱状图)
|
|
|
|
|
|
that.resizeWindow();
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getMainVip: function () {
|
|
|
|
|
|
let request = {
|
|
|
|
|
|
userId: this.userId
|
|
|
|
|
|
};
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
customerView.getMainVipRequest(request, function (data) {
|
|
|
|
|
|
if (data.data.code !== "0000") {
|
|
|
|
|
|
that.$Message.error("系统异常");
|
|
|
|
|
|
}
|
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
|
that.customerViewVO.allVipCount = data.allVipCount;
|
|
|
|
|
|
//占比重绘
|
|
|
|
|
|
that.percentResize();
|
|
|
|
|
|
//页面重绘(柱状图)
|
|
|
|
|
|
that.resizeWindow();
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getMainDateList: function () {
|
|
|
|
|
|
let request = {
|
|
|
|
|
|
userId: this.userId,
|
|
|
|
|
|
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.getMainDateRequest(request, function (data) {
|
|
|
|
|
|
that.spinShow = false;
|
|
|
|
|
|
if (data.data.code !== "0000") {
|
|
|
|
|
|
that.$Message.error("系统异常");
|
|
|
|
|
|
}
|
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
|
that.customerViewVO.orgNewCustomerList = data.orgNewCustomerList;
|
|
|
|
|
|
that.customerViewVO.shopNewCustomerList = data.shopNewCustomerList;
|
|
|
|
|
|
that.customerViewVO.zeroExtendList = data.zeroExtendList;
|
|
|
|
|
|
//占比重绘
|
|
|
|
|
|
that.percentResize();
|
|
|
|
|
|
//页面重绘(柱状图)
|
|
|
|
|
|
that.resizeWindow();
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getMainDel: function () {
|
|
|
|
|
|
let request = {
|
|
|
|
|
|
userId: this.userId
|
|
|
|
|
|
};
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
//加载遮罩
|
|
|
|
|
|
customerView.getMainDel(request, function (data) {
|
|
|
|
|
|
if (data.data.code !== "0000") {
|
|
|
|
|
|
that.$Message.error("系统异常");
|
|
|
|
|
|
}
|
|
|
|
|
|
that.customerViewVO.validDeleteCustomer = data.validDeleteCustomer;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
//零推广更多跳转
|
|
|
|
|
|
zeroExtendMore: function () {
|
|
|
|
|
|
this.setMenuName("首页", "推广为0店铺数");
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
this.$router.push({
|
|
|
|
|
|
path: '/zero/extend/detail',
|
|
|
|
|
|
query: {
|
|
|
|
|
|
userId: that.userId,
|
|
|
|
|
|
startDate: that.selectStartTime,
|
|
|
|
|
|
endDate: that.selectEndTime,
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
//定时刷新
|
|
|
|
|
|
timingRefresh: function () {
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
// that.timer = setInterval(function () {
|
|
|
|
|
|
// that.dateBtnClick(that.dateBtnValue);
|
|
|
|
|
|
// }, 1000 * 60 * 5);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*5大块客户数*/
|
|
|
|
|
|
.huge-blank-font {
|
|
|
|
|
|
color: #EC6A2F;
|
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-family: 'Microsoft YaHei';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.big-blank {
|
|
|
|
|
|
min-height: 100px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.big-blank-font {
|
|
|
|
|
|
color: #2D8CF0;
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-family: 'Microsoft YaHei';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.weight-700 {
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*蓝色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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.left-15 {
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.left-25 {
|
|
|
|
|
|
margin-left: 25px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-5 {
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-10 {
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-15 {
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-20 {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-30 {
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.padding-12 {
|
|
|
|
|
|
padding: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.padding-left-10 {
|
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*占比样式*/
|
|
|
|
|
|
.percent-text {
|
|
|
|
|
|
height: 38px;
|
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
padding-right: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.percent-span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
height: 38px;
|
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*文字过长...*/
|
|
|
|
|
|
.text-ellipsis {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*top10,占比样式*/
|
|
|
|
|
|
.top10-percent-span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
height: 18px;
|
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.text-center {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-title-date {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-title-span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-row {
|
|
|
|
|
|
height: 399px;
|
|
|
|
|
|
padding: 99px 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-row-customer-row1 {
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-row-customer-row2 {
|
|
|
|
|
|
height: 25px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-row-customer-row3 {
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-top-10-row {
|
|
|
|
|
|
min-height: 425px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-top-10-title-span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
