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

客户概览，UI修改

Browse Source
master
wyj2080 6 years ago
parent 9698ea959d
commit c09d607bdf
2 changed files with 68 additions and 51 deletions
Show Stats Download Patch File Download Diff File

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

@ -5,26 +5,50 @@
<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" @on-change="downRegionChange">
<Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
<span style="margin-left: 48px">选择日期</span>
<DatePicker v-model="dateRange" class="left-15" type="daterange" placement="bottom-start" split-panels placeholder="请选择日期区间" style="width: 200px" size="small"></DatePicker>
<span class="left-15">零售公司选择</span>
<Select filterable placeholder="请选择零售公司" v-model="organizationId" class="left-15" style="width:190px" size="small" @on-change="downRegionChange">
<Option v-for="item in organizationList" :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" @on-change="downShopChange">
<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>
<!--5块客户数-->
<row class="top-10">
<Row type="flex" justify="space-between" class="code-row-bg">
<i-col span="4" class="big-blank" style="border: 1px solid #2EA4E4;border-left: 6px solid #2EA4E4;">
<row class="top-20"><span class="left-10">全部客户（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allCustomer}}</span></row>
</i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #63C16D;border-left: 6px solid #63C16D;">
<row class="top-20"><span class="left-10">有效客户（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.validCustomer}}</span></row>
</i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #FFCC00;border-left: 6px solid #FFCC00;">
<row class="top-20"><span class="left-10">新增客户</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newCustomer}}</span></row>
</i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #EC6A2F;border-left: 6px solid #EC6A2F;">
<row class="top-20"><span class="left-10">新增有效客户</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newValidCustomer}}</span></row>
</i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #2DC6EA;border-left: 6px solid #2DC6EA;">
<row class="top-20"><span class="left-10">删除拉黑数（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.deleteCustomer}}</span></row>
</i-col>
</Row>
</row>
<!--柱状图-->
<row class="top-10 outline">
<span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">{{sevenDayStartDate}}至{{sevenDayEndDate}}（近七天）趋势图</span>
<ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
</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>
<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">
@ -38,7 +62,7 @@
<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 class="ivu-poptip-body-content-inner"></div>
</div>
</div>
</div>
@ -79,14 +103,8 @@
<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><!--条形图结束-->
<Spin style="top: 100px" size="large" fix v-if="spinShow"></Spin>
</row>
</i-col>
</Row>
@ -102,12 +120,14 @@
userId: 13,
//加载遮罩
spinShow: false,
regionId: 0,
regionList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
dateRange: [],
organizationId: 0,
organizationList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
shopId: 0,
shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
sellerId: 0,
sellerList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
//近七天日期
sevenDayStartDate: this.$moment(new Date()).add(-6,"days").format("YYYY-MM-DD"),
sevenDayEndDate: this.$moment(new Date()).format("YYYY-MM-DD"),
//人数占比
allVipPercent: "width:66.66%",
percent1: "width:33.33%",
@ -115,6 +135,11 @@
percent3: "width:33.33%",
allCustomerPercent: "width:66.66%",
customerViewVO: {
allCustomer: 0,
validCustomer: 0,
newCustomer: 0,
newValidCustomer: 0,
deleteCustomer: 0,
customer:0,
common:0,
vip:0,
@ -140,7 +165,6 @@
}
},
mounted: function () {
this.downSellerData();
this.downShopData();
this.downRegionData();
this.getMainList();
@ -181,29 +205,12 @@
if(value === 0){return null;}
return value;
},
//导购list
downSellerData: function () {
let that = this;
that.sellerList = [{"id":0,"name":"全部"}];
let request = {userId: this.userId, regionId: that.checkZero(that.regionId), shopId:that.checkZero( that.shopId)};
customerDetail.downSellerData(request, function (data) {
data = data.data.results;
if(data){
for(let i=0;i<data.length;i++){
let entity = data[i];
if(entity){
that.sellerList.push(entity);
}
}
}
})
},
//店铺list
downShopData: function () {
let that = this;
that.shopList = [{"id":0,"name":"全部"}];
let request =
{userId: this.userId,regionId: that.checkZero(that.regionId)};
{userId: this.userId,regionId: null};
customerDetail.downShopData(request, function (data) {
data = data.data.results;
if(data){
@ -219,7 +226,7 @@
//区域list
downRegionData: function () {
let that = this;
that.regionList = [{"id":0,"name":"全部"}];
that.organizationList = [{"id":0,"name":"全部"}];
let request =
{userId: this.userId};
customerDetail.downRegionData(request, function (data) {
@ -228,16 +235,12 @@
for(let i=0;i<data.length;i++){
let entity = data[i];
if(entity){
that.regionList.push(entity);
that.organizationList.push(entity);
}
}
}
})
},
//店铺选择
downShopChange: function () {
this.downSellerData();
},
//区域选择
downRegionChange: function () {
this.downShopData();
@ -252,9 +255,8 @@
userId: this.userId,
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.checkZero(this.regionId),
organizationId: this.checkZero(this.organizationId),
shopId: this.checkZero(this.shopId),
sellerId: this.checkZero(this.sellerId),
};
let that = this;
//加载遮罩
@ -287,6 +289,16 @@
}
</script>
<style scoped>
/*5大块客户数*/
.big-blank{
height: 100px;
border-radius: 4px;
}
.big-blank-font{
font-size: 28px;
font-weight: 700;
font-family: 'Microsoft YaHei';
}
/*蓝色logo*/
.blue-logo{
background: #1A80D2;
@ -317,9 +329,15 @@
.left-15{
margin-left: 15px;
}
.left-25{
margin-left: 25px;
}
.top-10{
margin-top: 10px;
}
.top-20{
margin-top: 20px;
}
/*全部客户样式*/
.inline-center-nowrap{

1
src/pages/Home.vue
Unescape Escape View File

@ -231,7 +231,6 @@
},
//账户管理页面回调方法
callBack(){
debugger
let that = this;
this.selectedMenu = "设置管理";
this.selectedSubMenu = "账户管理";

Write Preview
Loading…
Cancel
Save