客户数据概览

kiisoo-ic-ui/src/iview.js

@@ -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);

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

@@ -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>

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

@@ -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>

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

@@ -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>

kiisoo-ic-ui/src/router/index.js

@@ -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',
+          path: '/customer/view',
-          name: 'CustomerData',
+          name: 'CustomerView',
-          component: CustomerData,
+          component: CustomerView,
         },
         {
           path: '/customer/data/detail',

kiisoo-ic-ui/src/services/datacenter/customerView.js

@@ -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,
+
+}