条形图，提示框

kiisoo-ic-ui/src/iview.js

@@ -31,7 +31,8 @@ import {
     Divider,
     Page,
     Upload,
-    Spin
+    Spin,
+    Tooltip
 } from "view-design";
 import 'view-design/dist/styles/iview.css';
 
@@ -70,3 +71,4 @@ Vue.component('Divider', Divider);
 Vue.component('Page', Page);
 Vue.component('Spin', Spin);
 Vue.component('Upload', Upload);
+Vue.component('Tooltip', Tooltip);

kiisoo-ic-ui/src/pages/CustomerView.vue

@@ -28,7 +28,7 @@
               </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>
+                  <span :style="allVipPercent"  class="inline-center-nowrap">全部会员：{{customerViewVO.common + customerViewVO.vip}}人</span>
                 </row>
                 <!--上大括号-->
                 <row>
@@ -45,10 +45,17 @@
                     </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 style="height: 28px;margin-top: 3px;background: #ccc;border-radius:14px;overflow: hidden">
+                  <span v-if="customerViewVO.customer > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent1" style="background: #FFCC00;" class="percent-span">
+                    <Tooltip  :content="'未关联的客户：' + customerViewVO.customer" placement="top" transfer><span>未关联的客户</span><span class="left-10">{{customerViewVO.customer}}</span></Tooltip>
+                  </span>
+                  <span v-if="customerViewVO.common > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent2" style="background: #33CC00;" class="percent-span">
+                    <Tooltip  :content="'已关联：' + customerViewVO.common" placement="top" transfer><span>已关联</span><span class="left-10">{{customerViewVO.common}}</span></Tooltip>
+                  </span>
+                  <span v-if="customerViewVO.vip > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent3" style="background: #EC6A2F;" class="percent-span">
+                    <Tooltip  :content="'未关联的会员：' + customerViewVO.vip" placement="top" transfer><span>未关联的会员</span><span class="left-10">{{customerViewVO.vip}}</span></Tooltip>
+                  </span>
                 </row>
                 <!--下大括号-->
                 <row>
@@ -66,7 +73,7 @@
                   </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>
+                  <span :style="allCustomerPercent" class="inline-center-nowrap">全部客户：{{customerViewVO.customer + customerViewVO.common}}人</span>
                 </row>
               </i-col>
               <i-col span="4">
@@ -106,9 +113,9 @@
               percent3: "width:33.33%",
               allCustomerPercent: "width:66.66%",
               customerViewVO: {
-                customer:10,
-                common:10,
-                vip:1266,
+                customer:0,
+                common:0,
+                vip:0,
                 sevenDayCustomerList: [],
                 sevenDayVipList: [],
               },
@@ -119,13 +126,13 @@
               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 }
+                  { 'date': '1/1', '新增客户': 0, '新增会员': 0 },
+                  { 'date': '1/2', '新增客户': 0, '新增会员': 0 },
+                  { 'date': '1/3', '新增客户': 0, '新增会员': 0 },
+                  { 'date': '1/4', '新增客户': 0, '新增会员': 0 },
+                  { 'date': '1/5', '新增客户': 0, '新增会员': 0 },
+                  { 'date': '1/6', '新增客户': 0, '新增会员': 0 },
+                  { 'date': '1/7', '新增客户': 0, '新增会员': 0 }
                 ]
               },
             }
@@ -243,4 +250,11 @@
     margin-top: 10px;
   }
 
+  /*全部客户样式*/
+  .inline-center-nowrap{
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap
+  }
+
 </style>