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

客户数据概览

Browse Source
master
wyj2080 6 years ago
parent bf6d5614ac
commit 0acd3161f8
6 changed files with 274 additions and 85 deletions
Show Stats Download Patch File Download Diff File

4
kiisoo-ic-ui/src/iview.js
Unescape Escape View File

@ -18,6 +18,7 @@ import {
Col,
Select,
Option,
Poptip,
DatePicker,
CheckboxGroup,
Checkbox,
@ -29,6 +30,7 @@ import {
List,
Divider,
Page,
Spin
} from "view-design";
import 'view-design/dist/styles/iview.css';
@ -52,6 +54,7 @@ Vue.component('Row', Row);
Vue.component('i-col', Col);
Vue.component('Select', Select);
Vue.component('Option', Option);
Vue.component('Poptip', Poptip);
Vue.component('DatePicker', DatePicker);
Vue.component('CheckboxGroup', CheckboxGroup);
Vue.component('Checkbox', Checkbox);
@ -64,3 +67,4 @@ Vue.component('Radio', Radio);
Vue.component('List', List);
Vue.component('Divider', Divider);
Vue.component('Page', Page);
Vue.component('Spin', Spin);

80
kiisoo-ic-ui/src/pages/CustomerData.vue
Unescape Escape View File

@ -1,80 +0,0 @@
<template>
<div>
<Row :gutter="32">
<i-col span="32">
<row>
<row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
<span style="margin-left: 48px">区域选择</span>
<Select filterable placeholder="请选择区域" v-model="regionId" class="left-15" style="width:190px" size="small">
<Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<span class="left-15">店铺选择</span>
<Select filterable placeholder="请选择店铺" v-model="shopId" class="left-15" style="width:190px" size="small">
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<span class="left-15">导购选择</span>
<Select filterable placeholder="请选择导购" v-model="sellerId" class="left-15" style="width:190px" size="small">
<Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small">查询</Button>
</row>
<row>
<ve-histogram :data="chartData"></ve-histogram>
</row>
</row>
</i-col>
</Row>
</div>
</template>
<script>
export default {
data() {
return {
regionId: null,
regionList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
shopId: null,
shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
sellerId: null,
sellerList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
chartData: {
columns: ['date', '访问用户', '下单用户', '下单率'],
rows: [
{ 'date': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ 'date': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ 'date': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ 'date': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ 'date': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ 'date': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
},
}
},
mounted: function () {
},
methods: {
searchCustomerDataBtnClick: function () {
},
// /**商品mainList*/
// getMainList: function(){
//
// },
// //切页处理
// handlePage:function (value) {
//
// },
}
}
</script>
<style scoped>
.left-15{
margin-left: 15px;
}
</style>

246
kiisoo-ic-ui/src/pages/CustomerView.vue
Unescape Escape View File

@ -0,0 +1,246 @@
<template>
<div>
<Row :gutter="32">
<i-col span="32">
<row>
<!--筛选-->
<row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
<span style="margin-left: 48px">区域选择</span>
<Select filterable placeholder="请选择区域" v-model="regionId" class="left-15" style="width:190px" size="small">
<Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<span class="left-15">店铺选择</span>
<Select filterable placeholder="请选择店铺" v-model="shopId" class="left-15" style="width:190px" size="small">
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<span class="left-15">导购选择</span>
<Select filterable placeholder="请选择导购" v-model="sellerId" class="left-15" style="width:190px" size="small">
<Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small">查询</Button>
</row>
<!--条形图-->
<row class="top-10 outline">
<row>
<i-col span="4">
<span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">客户&会员关联情况</span>
</i-col>
<i-col span="16" style="height: 200px;">
<row style="margin-top: 32px;margin-bottom: 23px;text-align: right">
<span :style="allVipPercent" style="display: inline-block;text-align: center">全部会员：{{customerViewVO.common + customerViewVO.vip}}人</span>
</row>
<!--上大括号-->
<row>
<div class="ivu-poptip-popper" :style="allVipPercent" style="position: absolute; will-change: top, left; top: -23px; right: 0px;z-index: 1;min-width: 0px" x-placement="bottom">
<div class="ivu-poptip-content">
<div class="ivu-poptip-arrow" style="border-bottom-color:rgba(0,0,0,.5)"></div>
<div class="ivu-poptip-inner" style="box-shadow: 0px -1px 0px rgba(0,0,0,.4)">
<div class="ivu-poptip-body">
<div class="ivu-poptip-body-content">
<div class="ivu-poptip-body-content-inner"></div>
</div>
</div>
</div>
</div>
</div>
</row>
<row style="height: 28px;margin-top: 3px;background: #ccc;border-radius:14px;overflow:hidden;">
<span :style="percent1" style="background: #FFCC00;" class="percent-span"><span>未关联的客户</span><span class="left-10">{{customerViewVO.customer}}</span></span>
<span :style="percent2" style="background: #33CC00;" class="percent-span"><span>已关联</span><span class="left-10">{{customerViewVO.common}}</span></span>
<span :style="percent3" style="background: #EC6A2F;" class="percent-span"><span>未关联的会员</span><span class="left-10">{{customerViewVO.vip}}</span></span>
</row>
<!--下大括号-->
<row>
<div class="ivu-poptip-popper" :style="allCustomerPercent" style="position: absolute; will-change: top, left; top: -7px; left: 0px;display: inline-block;z-index: 1;min-width: 0px" x-placement="top">
<div class="ivu-poptip-content">
<div class="ivu-poptip-arrow" style="border-top-color:rgba(0,0,0,.5)"></div> <!---->
<div class="ivu-poptip-inner" style="box-shadow: 0px 1px 0px rgba(0,0,0,.4)"><!---->
<div class="ivu-poptip-body">
<div class="ivu-poptip-body-content ivu-poptip-body-content-word-wrap">
<div class="ivu-poptip-body-content-inner"></div>
</div>
</div>
</div>
</div>
</div>
</row>
<row style="margin-top: 23px;text-align: left">
<span :style="allCustomerPercent" style="display: inline-block;text-align: center;white-space: nowrap">全部客户：{{customerViewVO.customer + customerViewVO.common}}人</span>
</row>
</i-col>
<i-col span="4">
</i-col>
</row>
</row>
<!--柱状图-->
<row class="top-10 outline">
<span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">近7天趋势</span>
<ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
</row>
<Spin style="top: 110px" size="large" fix v-if="spinShow"></Spin>
</row>
</i-col>
</Row>
</div>
</template>
<script>
import customerView from "../services/datacenter/customerView";
export default {
data() {
return {
//加载遮罩
spinShow: false,
regionId: null,
regionList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
shopId: null,
shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
sellerId: null,
sellerList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
//人数占比
allVipPercent: "width:66.66%",
percent1: "width:33.33%",
percent2: "width:33.33%",
percent3: "width:33.33%",
allCustomerPercent: "width:66.66%",
customerViewVO: {
customer:10,
common:10,
vip:1266,
sevenDayCustomerList: [],
sevenDayVipList: [],
},
chartExtend: {
barWidth: 28
},
chartColor:["#ffcc00","#ec6a2f"],
chartData: {
columns: ['date', '新增客户', '新增会员' ],
rows: [
{ 'date': '1/1', '新增客户': 1393, '新增会员': 1093 },
{ 'date': '1/2', '新增客户': 3530, '新增会员': 3230 },
{ 'date': '1/3', '新增客户': 2923, '新增会员': 2623 },
{ 'date': '1/4', '新增客户': 1723, '新增会员': 1423 },
{ 'date': '1/5', '新增客户': 3792, '新增会员': 3492 },
{ 'date': '1/6', '新增客户': 4593, '新增会员': 4293 },
{ 'date': '1/7', '新增客户': 4593, '新增会员': 4293 }
]
},
}
},
mounted: function () {
this.getMainList();
},
methods: {
//页面重绘
resizeWindow: function(){
let event = document.createEvent("HTMLEvents");
event.initEvent("resize", true, true);
window.dispatchEvent(event);
},
//占比重绘
percentResize: function(){
let customer = this.customerViewVO.customer;
let common = this.customerViewVO.common;
let vip = this.customerViewVO.vip;
let sum = customer + common + vip;
if(sum === 0){
this.allVipPercent = "width:66.66%";
this.percent1 = "width:33.33%";
this.percent2 = "width:33.33%";
this.percent3 = "width:33.33%";
this.allCustomerPercent = "width:66.66%";
return;
}
let p1 = Math.floor(customer/sum * 100 *100)/100;
let p2 = Math.floor(common/sum * 100 *100)/100;
let p3 = Math.floor(vip/sum * 100 *100)/100;
this.allVipPercent = "width:" + (p2 + p3) + "%";
this.percent1 = "width:" + p1 + "%";
this.percent2 = "width:" + p2 + "%";
this.percent3 = "width:" + p3 + "%";
this.allCustomerPercent = "width:" + (p1 + p2) + "%";
},
//搜索
searchCustomerDataBtnClick: function () {
this.getMainList();
},
/**mainList*/
getMainList: function(){
let request = {
userId: 0,
sevenDayStartTime: this.$moment(new Date()).add(-6,"days").format("YYYY-MM-DD 00:00:00"),
sevenDayEndTime: this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
regionId: this.regionId,
shopId: this.shopId,
};
let that = this;
//加载遮罩
this.spinShow = true;
customerView.getMainRequest(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=-6;i<=0;i++){
let date = that.$moment(new Date()).add(i, "days").format("M-DD");
let obj = {
date:date,
"新增客户": that.customerViewVO.sevenDayCustomerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD")).length,
"新增会员": that.customerViewVO.sevenDayVipList.filter(vip => date === that.$moment(vip.registerTime).format("M-DD")).length,
};
that.chartData.rows.push(obj);
}
//占比重绘
that.percentResize();
//页面重绘(柱状图)
that.resizeWindow();
});
},
}
}
</script>
<style scoped>
/*蓝色logo*/
.blue-logo{
background: #1A80D2;
height: 26px;
width: 6px;
border-radius:3px;
display: inline-block;
vertical-align: middle;
}
/*占比样式*/
.percent-span{
display: inline-block;
vertical-align: middle;
height: 28px;
line-height: 28px;
background: #FFCC00;
color: #fff;
text-align: center;
}
/*外面的边框*/
.outline{
border: #e8ecf2 2px solid;
padding: 10px;
}
.left-10{
margin-left: 10px;
}
.left-15{
margin-left: 15px;
}
.top-10{
margin-top: 10px;
}
</style>

2
kiisoo-ic-ui/src/pages/Home.vue
Unescape Escape View File

@ -31,7 +31,7 @@
<Icon type="ios-paper" />
数据中心
</template>
<MenuItem name="3-1" to="/customer/data">客户数据</MenuItem>
<MenuItem name="3-1" to="/customer/view">客户数据</MenuItem>
<MenuItem name="3-2" to="/customer/data/detail">客户数据明细</MenuItem>
</Submenu>

8
kiisoo-ic-ui/src/router/index.js
Unescape Escape View File

@ -6,7 +6,7 @@ import Home from '@/pages/Home';
import AccountManager from '@/pages/user/AccountManager';
import RoleManager from '@/pages/user/RoleManager';
import IncreaseManager from '@/pages/shop/IncreaseManager';
import CustomerData from "@/pages/CustomerData";
import CustomerView from "@/pages/CustomerView";
import CustomerDetail from "@/pages/CustomerDetail";
import IncreaseData from '@/pages/shop/IncreaseData';
import IncreaseDataRegion from '@/pages/shop/IncreaseDataRegion';
@ -99,9 +99,9 @@ const router = new Router({
]
},
{
path: '/customer/data',
name: 'CustomerData',
component: CustomerData,
path: '/customer/view',
name: 'CustomerView',
component: CustomerView,
},
{
path: '/customer/data/detail',

19
kiisoo-ic-ui/src/services/datacenter/customerView.js
Unescape Escape View File

@ -0,0 +1,19 @@
/**
* 客户数据概览
* @author wangyinjia
* @date 2020/4/9
*/
import http from '../CommonHttp'
export function getMainRequest(params, call) {
return http.get('/customer/view/main', params).then(call)
}
export default {
//mainList
getMainRequest,
}
Write Preview
Loading…
Cancel
Save