diff --git a/src/pages/CustomerView.vue b/src/pages/CustomerView.vue index 8c2fcee..163ce3c 100644 --- a/src/pages/CustomerView.vue +++ b/src/pages/CustomerView.vue @@ -5,15 +5,26 @@ - - + + 今日 本周 本月 + 自定义 - - {{dateBtnValue}}概览{{viewDate}} + + {{dateBtnValue}}概览 + {{viewDate}} + + + + + + + + + @@ -70,42 +81,53 @@ - + 零售公司新增好友top10 暂无数据 - 排行零售公司新增好友 - - {{index + 1}}{{item.orgName}}{{item.newCustomerCount}} + + {{item.orgName}} + visible + {{item.newCustomerCount}} - + 店铺新增好友top10 暂无数据 - 排行店铺新增好友 - - {{index + 1}}{{item.shopName}}{{item.newCustomerCount}} + + {{item.shopName}} + visible + {{item.newCustomerCount}} - + 推广为0的店铺数 + 更多 暂无数据 - 零售公司店铺总数推广为0店铺数 + + visible + 零售公司 + 店铺总数 + 推广为0店铺数 + - {{item.orgName}}{{item.allShopCount}}{{item.zeroShopCount}} + visible + {{item.orgName}} + {{item.allShopCount}} + {{item.zeroShopCount}} @@ -155,7 +177,8 @@ zeroExtendList: [], }, chartExtend: { - barWidth: 28 + barWidth: 28, + label: { show: true, position: "top" } }, chartColor:["#ffcc00","#ec6a2f"], chartData: { @@ -172,6 +195,33 @@ }, } }, + computed:{ + options1() { + let that = this; + return{ + disabledDate (date) { + if(that.selectEndTime == null || that.selectEndTime == ""){ + return false; + }else{ + return date && date.valueOf() > 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.selectStartTime || date && date.valueOf() > that.$moment(that.selectStartTime).add(31,"days"); + } + } + } + }, + }, mounted: function () { this.dateBtnClick('今日'); }, @@ -216,11 +266,25 @@ //日期按钮 dateBtnClick: function(value){ switch (value) { - case '今日': this.dateBtnValue = "今日";this.recentName = "近七天";this.dateSelectChange('今日');this.chartExtend.barWidth = 28;break; - case '本周': this.dateBtnValue = "本周";this.recentName = "本周";this.dateSelectChange('本周');this.chartExtend.barWidth = 28;break; - case '本月': this.dateBtnValue = "本月";this.recentName = "本月";this.dateSelectChange('本月');this.chartExtend.barWidth = 8;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.dateSelectChange('本月');this.chartExtend.barWidth = 8;this.chartExtend.label.show = false;break; + case '自定义': this.dateBtnValue = "自定义";this.recentName = "自定义";break; } - this.getMainList(); + }, + //自定义日期 + 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){ @@ -248,7 +312,14 @@ 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(){ @@ -289,6 +360,10 @@ that.resizeWindow(); }); }, + //零推广更多 + zeroExtendMore: function () { + alert("123"); + } } } @@ -384,11 +459,19 @@ margin-right: 5px; } - /*全部客户样式*/ - .inline-center-nowrap{ + /*文字过长...*/ + .text-ellipsis{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + /*top10,占比样式*/ + .top10-percent-span{ display: inline-block; - text-align: center; - white-space: nowrap + vertical-align: middle; + height: 18px; + line-height: 18px; + margin-right: 5px; } diff --git a/static/img/right-angle.png b/static/img/right-angle.png new file mode 100644 index 0000000..01ef903 Binary files /dev/null and b/static/img/right-angle.png differ