客户概览，UI修改

src/pages/CustomerView.vue

@@ -5,15 +5,26 @@
         <row>
           <!--筛选-->
           <row style="margin-top: -2px">
-            <i-col span="4">
+            <i-col span="5">
-              <row style="width: 248px;border: 1px solid #E8ECF2;border-radius: 8px;padding: 3px">
+              <row style="width: 330px;border: 1px solid #E8ECF2;border-radius: 8px;padding: 3px">
                 <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>
               </row>
             </i-col>
-            <i-col span="4" style="height: 38px;line-height: 38px;">
+            <i-col span="6" style="height: 38px;line-height: 38px;">
-              <span class="view-text">{{dateBtnValue}}概览</span><span class="view-date">{{viewDate}}</span>
+              <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="请选择时间" style="width: 120px" size="small" @on-change="diyDateChange"></DatePicker>
+                <span style="margin: 0 5px">至</span>
+                <DatePicker v-model="selectEndTime" :options="options2" type="date" placeholder="请选择时间" style="width: 120px" size="small" @on-change="diyDateChange"></DatePicker>
+                <Tooltip content="限制最大31天" placement="bottom">
+                    <Icon type="ios-alert-outline" style="margin-left: 5px" />
+                </Tooltip>
+              </span>
+
             </i-col>
           </row>
           <!--5块客户数-->
@@ -70,42 +81,53 @@
           <!--前十名-->
           <row class="top-10">
             <i-col span="8">
-              <row class="outline" style="min-height: 300px">
+              <row class="outline" style="min-height: 305px">
                 <span class="blue-logo"></span>
                 <span style="display: inline-block;margin-left: 5px;">零售公司新增好友top10</span>
                 <row v-if="customerViewVO.orgNewCustomerList.length === 0" style="text-align: center">暂无数据</row>
                 <row v-if="customerViewVO.orgNewCustomerList.length > 0" class="pading-12">
-                  <row><i-col span="2">排行</i-col><i-col span="18">零售公司</i-col><i-col span="4">新增好友</i-col></row>
+                  <row v-for="item in customerViewVO.orgNewCustomerList" :key="item.orgId">
-                  <row v-for="(item,index) in customerViewVO.orgNewCustomerList" :key="item.orgId">
+                    <i-col span="6" class="text-ellipsis" style="text-align: right">{{item.orgName}}</i-col>
-                    <i-col span="2">{{index + 1}}</i-col><i-col span="18">{{item.orgName}}</i-col><i-col span="4">{{item.newCustomerCount}}</i-col>
+                    <i-col span="1"><span style="visibility: hidden">visible</span></i-col>
+                    <i-col span="17"><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="8" class="padding-left-10">
-              <row class="outline" style="min-height: 300px">
+              <row class="outline" style="min-height: 305px">
               <span class="blue-logo"></span>
               <span style="display: inline-block;margin-left: 5px">店铺新增好友top10</span>
                 <row v-if="customerViewVO.shopNewCustomerList.length === 0" style="text-align: center">暂无数据</row>
                 <row v-if="customerViewVO.shopNewCustomerList.length > 0" class="pading-12">
-                  <row><i-col span="2">排行</i-col><i-col span="18">店铺</i-col><i-col span="4">新增好友</i-col></row>
+                  <row v-for="item in customerViewVO.shopNewCustomerList" :key="item.shopId">
-                  <row v-for="(item,index) in customerViewVO.shopNewCustomerList" :key="item.shopId">
+                    <i-col span="8" class="text-ellipsis" style="text-align: right">{{item.shopName}}</i-col>
-                    <i-col span="2">{{index + 1}}</i-col><i-col span="18">{{item.shopName}}</i-col><i-col span="4">{{item.newCustomerCount}}</i-col>
+                    <i-col span="1"><span style="visibility: hidden">visible</span></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" style="min-height: 300px">
+              <row class="outline" style="min-height: 305px">
               <span class="blue-logo"></span>
               <span style="display: inline-block;margin-left: 5px">推广为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" style="text-align: center">暂无数据</row>
                 <row v-if="customerViewVO.zeroExtendList.length > 0" class="pading-12">
-                  <row><i-col span="13">零售公司</i-col><i-col span="6">店铺总数</i-col><i-col span="5">推广为0店铺数</i-col></row>
+                  <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="13">{{item.orgName}}</i-col><i-col span="6">{{item.allShopCount}}</i-col><i-col span="5">{{item.zeroShopCount}}</i-col>
+                    <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>
@@ -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;this.chartExtend.label.show = true;break;
-              case '本周': this.dateBtnValue = "本周";this.recentName = "本周";this.dateSelectChange('本周');this.chartExtend.barWidth = 28;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;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;
+    vertical-align: middle;
-    white-space: nowrap
+    height: 18px;
+    line-height: 18px;
+    margin-right: 5px;
   }
 
 </style>