From 5de5036c0b025566a65db08346627f72363eaa1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Wed, 28 Sep 2022 13:42:24 +0800
Subject: [PATCH] up

---
 src/api/dashboard.js                          |   9 +
 src/views/dashboard/components/PanelGroup.vue | 402 ++++++++++--
 src/views/dashboard/index.vue                 | 617 +++++++++---------
 3 files changed, 646 insertions(+), 382 deletions(-)

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index ba8ceea..858d041 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -15,3 +15,12 @@ export function getChartsData(params) {
     params: params
   })
 }
+
+export function getChartsHome(params) {
+  return request({
+    url: '/api/admin/chart/home',
+    method: 'get',
+    params: params
+  })
+}
+
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 6e6b300..3860e75 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,60 +1,114 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+  <div>
+    <div class="boxlist">
+      <div class="box box1">
+        <div class="boxtitle">
+          <span>营业统计</span>
+          <i class="el-icon-data-line statIcon"></i>
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            欢迎回来
-          </div>
-          <div class="card-panel-text" style="color: #001528;">
-            管理员
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">服务金额</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              {{totaldata.business.server_money_total}}万
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.business.nurse_money_total}}</span>
+                <span>护工金额</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.business.remain_money_total}}</span>
+                <span>留存金额</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleRoute('box')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="toolbox" class-name="card-panel-icon" />
+
+      <div class="box box2">
+        <div class="boxtitle">
+
+          <span>人效统计</span>
+          <i class="el-icon-user statIcon"></i>
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            工具箱
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">总服务时长</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              {{totaldata.person_efficiency.server_time_total}}
+              分钟
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+
+                <span>{{totaldata.person_efficiency.expect}}</span>
+                <span> 照护人员数</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.person_efficiency.act}} </span>
+                <span>天数</span>
+              </div>
+            </div>
           </div>
-          <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" />
         </div>
       </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleRoute('tool')">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="tool" class-name="card-panel-icon" />
+
+      <div class="box box3">
+        <div class="boxtitle">
+          <span>客户统计</span>
+          <i class="el-icon-s-custom statIcon"></i>
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            工具
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">活跃客户</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              {{totaldata.customer.active}}人
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.customer.add}}</span>
+                <span>新增</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.customer.wash}}</span>
+                <span>流失</span>
+              </div>
+            </div>
           </div>
-          <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" />
         </div>
       </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleRoute('user')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+
+      <div class="box box4">
+        <div class="boxtitle">
+
+          <span>订单统计</span>
+          <i class="el-icon-document statIcon"></i>
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            工具箱用户
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">服务订单</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">{{totaldata.order.server_total}}单
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.order.cycle_total}}</span>
+                <span>周期性订单</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.order.unit_total}}</span>
+                <span>单次订单</span>
+              </div>
+            </div>
           </div>
-          <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" />
         </div>
       </div>
-    </el-col>
-  </el-row>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -64,6 +118,32 @@
     props: {
       countsData: {
         type: Object
+      },
+      totaldata: {
+        type: Object,
+        default: {
+
+          "business": {
+            "server_money_total": 0,
+            "nurse_money_total": 0,
+            "remain_money_total": 0
+          },
+          "person_efficiency": {
+            "server_time_total": "0",
+            "expect": 0,
+            "act": 0
+          },
+          "customer": {
+            "active": 0,
+            "add": 0,
+            "wash": 0
+          },
+          "order": {
+            "server_total": 0,
+            "cycle_total": 0,
+            "unit_total": 0
+          },
+        }
       }
     },
     components: {
@@ -72,71 +152,245 @@
     methods: {
       handleRoute(type) {
         this.$emit('handleRoute', type)
+      },
+      toCaculateper(f1, f2) {
+        return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%"
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+  .boxlist {
+    display: flex;
+  }
+
+  .statIcon {
+    font-size: 24px;
+  }
+
+  .index_icon {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    width: 3.5625rem;
+  }
+
+  .index_bg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+
+  .boxcontentitem-small {
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+
+  .box {
+    position: relative;
+    width: 33%;
+    margin-left: 0.5%;
+    margin-right: 0.5%;
+    margin-bottom: 2.375rem;
+    box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
+    border-radius: 8px;
+    box-sizing: border-box;
+    opacity: 0.8;
+    padding: 1.25rem 0;
+
+    .boxcontentsubtitle {
+      color: #FFFFFF;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      font-size: 1.0625rem;
+      margin-top: 1.25rem;
+    }
+
+    .boxfooter {
+      font-size: 1.0625rem;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      display: flex;
+      justify-content: center;
+    }
+
+    .boxtitle {
+      font-size: 20px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      padding: 0 1.25rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .boxcontent {
+      display: flex;
+      //justify-content: space-around;
+      align-items: center;
+
+      .boxline {
+        width: 1px;
+        height: 4.0625rem;
+        background: #FFFFFF00;
+        opacity: 0.3;
+        margin-left: 2.0625rem;
+        margin-right: 2.0625rem;
+      }
+
+
+
+      .boxcontentitem {
+        display: flex;
+        flex-direction: column;
+        font-size: 19px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        text-align: center;
+        min-width: 100%;
+
+        .boxcontentitem-big {
+          font-size: 2.625rem;
+          font-family: Arial;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+
+
+    }
+  }
+
+  .box1 {
+    background: linear-gradient(134deg, #D1AC7B, #DFC69C);
+
+    .boxcline {
+      width: 100%;
+      background: #DFC69C;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .bline {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
+    height: 0.25rem;
+    width: 100%;
+    margin-top: 1.25rem;
+  }
+
+  .box2 {
+    background: linear-gradient(134deg, #9193BC, #B7B9D4);
+
+    .boxcline {
+      width: 100%;
+      background: #B7B9D4;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .box3 {
+
+    background: linear-gradient(-55deg, #F6A868, #F4C59E);
+
+    .boxcline {
+      width: 100%;
+      background: #F4C59E;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .box4 {
+
+    background: linear-gradient(-55deg, #64A48E, #9ECABB);
+
+    .boxcline {
+      width: 100%;
+      background: #9ECABB;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
   .panel-group {
-    margin-top: 18px;
+    // margin-top: 18px;
+    margin-left: -2% !important;
+    margin-right: -3% !important;
 
     .card-panel-col {
+      margin: 0 2%;
+
       margin-bottom: 32px;
     }
 
     .card-panel {
-      height: 108px;
+      height: 130px;
       cursor: pointer;
       font-size: 12px;
       position: relative;
       overflow: hidden;
       color: #666;
-      background: #fff;
-      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-      border-color: rgba(0, 0, 0, .05);
+      text-align: center;
+      // background: #fff;
+      // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      // border-color: rgba(0, 0, 0, .05);
 
       &:hover {
         .card-panel-icon-wrapper {
           color: #fff;
         }
 
-        .icon-people {
-          background: #40c9c6;
-        }
+        // .icon-people {
+        //   background: #40c9c6;
+        // }
 
-        .icon-message {
-          background: #36a3f7;
-        }
+        // .icon-message {
+        //   background: #36a3f7;
+        // }
 
-        .icon-money {
-          background: #f4516c;
-        }
+        // .icon-money {
+        //   background: #f4516c;
+        // }
 
-        .icon-shopping {
-          background: #34bfa3
-        }
+        // .icon-shopping {
+        //   background: #34bfa3
+        // }
       }
 
       .icon-people {
-        color: #40c9c6;
+        color: #fff;
       }
 
       .icon-message {
-        color: #36a3f7;
+        color: #fff;
       }
 
       .icon-money {
-        color: #f4516c;
+        color: #fff;
       }
 
       .icon-shopping {
-        color: #34bfa3
+        color: #fff
       }
 
       .card-panel-icon-wrapper {
-        float: left;
-        margin: 14px 0 0 14px;
+        float: right;
+        margin: 22px 0 0 14px;
         padding: 16px;
         transition: all 0.38s ease-out;
         border-radius: 6px;
@@ -144,20 +398,26 @@
 
       .card-panel-icon {
         float: left;
-        font-size: 48px;
+        font-size: 42px;
       }
 
       .card-panel-description {
-        float: right;
+        // float: right;
         font-weight: bold;
-        margin: 26px;
-        margin-left: 0px;
+        margin: 16px 12px;
 
         .card-panel-text {
-          line-height: 18px;
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 16px;
-          margin-bottom: 12px;
+          line-height: 25px;
+          color: rgb(255, 255, 255);
+          font-size: 26px;
+          margin-bottom: 20px;
+          width: 70%;
+          text-align: left;
+        }
+
+        p {
+          text-align: left;
+          font-size: 19px;
         }
 
         .card-panel-num {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 109e30c..167c71d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,312 +1,307 @@
-<template>
-  <div>
-    <div class="statistics">
-      <el-card>
-        <template v-slot:header>
-          <i class="el-icon-data-line"></i>
-          <span class="statistics-title">营业统计</span>
-        </template>
-        <div class="statistics-content">
-          <div class="statistics-content-top">
-            <div class="statistics-content-top__num">￥40.5万</div>
-            <div class="statistics-content-top__name">服务金额</div>
-          </div>
-          <div class="statistics-content-bottom">
-            <div class="statistics-content-bottom-left">
-              <div class="statistics-content-bottom-left__num">￥26.9万</div>
-              <div class="statistics-content-bottom-left__name">护工金额</div>
-            </div>
-            <div class="statistics-content-bottom-right">
-              <div class="statistics-content-bottom-right__num">￥13.6万</div>
-              <div class="statistics-content-bottom-right__name">留存金额</div>
-            </div>
-          </div>
-        </div>
-      </el-card>
-
-      <el-card>
-        <template v-slot:header>
-          <i class="el-icon-user"></i>
-          <span class="statistics-title">人效统计</span>
-        </template>
-        <div class="statistics-content">
-          <div class="statistics-content-top">
-            <div class="statistics-content-top__num">120人</div>
-            <div class="statistics-content-top__name">照护人员</div>
-          </div>
-          <div class="statistics-content-bottom">
-            <div class="statistics-content-bottom-left">
-              <div class="statistics-content-bottom-left__num">8小时/天</div>
-              <div class="statistics-content-bottom-left__name">预期照护时长</div>
-            </div>
-            <div class="statistics-content-bottom-right">
-              <div class="statistics-content-bottom-right__num">6.3小时/天</div>
-              <div class="statistics-content-bottom-right__name">人均照护时长</div>
-            </div>
-          </div>
-        </div>
-      </el-card>
-
-      <el-card>
-        <template v-slot:header>
-          <i class="el-icon-s-custom"></i>
-          <span class="statistics-title">客户统计</span>
-        </template>
-        <div class="statistics-content">
-          <div class="statistics-content-top">
-            <div class="statistics-content-top__num">800人</div>
-            <div class="statistics-content-top__name">活跃客户</div>
-          </div>
-          <div class="statistics-content-bottom">
-            <div class="statistics-content-bottom-left">
-              <div class="statistics-content-bottom-left__num">100</div>
-              <div class="statistics-content-bottom-left__name">新增</div>
-            </div>
-            <div class="statistics-content-bottom-right">
-              <div class="statistics-content-bottom-right__num">20</div>
-              <div class="statistics-content-bottom-right__name">流失</div>
-            </div>
-          </div>
-        </div>
-      </el-card>
-
-      <el-card>
-        <template v-slot:header>
-          <i class="el-icon-document"></i>
-          <span class="statistics-title">订单统计</span>
-        </template>
-        <div class="statistics-content">
-          <div class="statistics-content-top">
-            <div class="statistics-content-top__num">500</div>
-            <div class="statistics-content-top  __name">服务订单</div>
-          </div>
-          <div class="statistics-content-bottom">
-            <div class="statistics-content-bottom-left">
-              <div class="statistics-content-bottom-left__num">450</div>
-              <div class="statistics-content-bottom-left__name">周期性订单</div>
-            </div>
-            <div class="statistics-content-bottom-right">
-              <div class="statistics-content-bottom-right__num">50</div>
-              <div class="statistics-content-bottom-right__name">单次订单</div>
-            </div>
-          </div>
-        </div>
-      </el-card>
-    </div>
-
-    <div class="chart">
-      <div id="col-chart"></div>
-      <div id="line-chart"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import echarts from "echarts"
-
-export default {
-  components: {},
-  data() {
-    return {
-      col:'',
-      line:''
-    }
-  },
-  methods: {
-    init() {
-      this.col = echarts.init(document.getElementById('col-chart'))
-      this.col.setOption({
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          position:'bottom'
-        },
-        legend: {},
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        yAxis: {
-          type: 'value',
-          boundaryGap: [0, 0.01]
-        },
-        xAxis: {
-          type: 'category',
-          data: ['第一周', '第二周', '第三周', '第四周']
-        },
-        series: [
-          {
-            name: '服务金额',
-            type: 'bar',
-            data: [18203, 23489, 29034, 104970],
-            itemStyle: {
-              normal: {
-                color: 'rgb(42,182,252)'
-              },
-            },
-          },
-          {
-            name: '收款',
-            type: 'bar',
-            data: [19325, 23438, 31000, 121594],
-            itemStyle: {
-              normal: {
-                color: 'rgb(34,228,255)'
-              },
-            },
-          }
-        ]
-      })
-
-      this.line = echarts.init(document.getElementById('line-chart'))
-      this.line.setOption({
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['活跃客户', '服务订单']
-        },
-        grid: {
-          left: '3%',
-          right: '6%',
-          bottom: '3%',
-          containLabel: true
-        },
-        toolbox: {
-
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['第一周', '第二周', '第三周', '第四周']
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            name: '活跃客户',
-            type: 'line',
-            stack: 'Total',
-            data: [120, 132, 101, 134],
-            itemStyle: {
-              normal: {
-                color: 'rgb(42,182,252)'
-              },
-            },
-          },
-          {
-            name: '服务订单',
-            type: 'line',
-            stack: 'Total',
-            data: [220, 182, 191, 234],
-            itemStyle: {
-              normal: {
-                color: 'rgb(34,228,255)'
-              },
-            },
-          }
-        ]
-      })
-    }
-  },
-  mounted() {
-    this.init()
-
-    window.onresize = () => {
-      this.col.resize()
-      this.line.resize()
-    }
-  },
-  destroyed() {
-    window.onresize = null
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.statistics{
-  display: flex;
-
-  margin-top: 20px;
-  &-title{
-
-    padding-left: 6px;
-  }
-  &-content{
-    text-align: center;
-    font-size: 13px;
-    &-top{
-
-      &__num{
-        font-weight: 600;
-      }
-      &__name{
-        font-size: 10px;
-        color: rgb(140,140,140);
-      }
-    }
-    &-bottom{
-      display: flex;
-      justify-content: space-between;
-
-      &-left{
-
-        &__num{
-          font-weight: 600;
-        }
-        &__name{
-          font-size: 10px;
-          color: rgb(140,140,140);
-        }
-      }
-      &-right{
-
-        &__num{
-          font-weight: 600;
-        }
-        &__name{
-          font-size: 10px;
-          color: rgb(140,140,140);
-        }
-      }
-    }
-  }
-  &>div{
-    flex: 1;
-    margin-right: 20px;
-
-    &:last-child{
-      margin-right: 0;
-    }
-  }
-}
-.chart{
-  display: flex;
-
-  margin-top: 50px;
-  #col-chart {
-    background: #fff;
-    border-radius: 10px;
-    flex: 1;
-    height: 300px;
-    margin-right: 30px;
-  }
-  #line-chart {
-    background: #fff;
-    border-radius: 10px;
-    flex: 1;
-    height: 300px;
-  }
-}
+<template>
+  <div>
+
+    <div class="statistics">
+      <panel-group :totaldata="list" />
+    </div>
+
+    <div class="chart">
+      <div class="chartItem" style="margin-right: 1%;">
+        <div class="chartItemTitle">营业与收入</div>
+        <div id="col-chart"></div>
+      </div>
+      <div class="chartItem" style="margin-left: 1%;">
+        <div class="chartItemTitle">客户与订单</div>
+        <div id="line-chart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from "echarts"
+  import PanelGroup from './components/PanelGroup'
+  import {
+    getChartsHome
+  } from "../../api/dashboard.js"
+
+  export default {
+    components: {
+      PanelGroup
+    },
+    data() {
+      return {
+        col: '',
+        line: '',
+        business_data: [],
+        collect_data: [],
+        list: {},
+        customerArr: [],
+        orderArr: [],
+        chartData: {},
+      }
+    },
+    watch: {
+      chartData(val, newval) {
+        if (newval){
+          this.init();
+        }
+      }
+    },
+    methods: {
+      async loadData() {
+        await getChartsHome().then((res) => {
+          console.log(res);
+          this.list = res.list;
+          this.chartData = res;
+          let _business_data = [];
+          let _collect_data = [];
+          res.business_data.map(item => {
+            _business_data.push(item.server_money_total)
+            _collect_data.push(item.collect_money)
+          })
+          this.business_data = _business_data;
+          this.collect_data = _collect_data;
+          let _customerArr = [];
+          let _orderArr = [];
+
+          res.order_data.map(item => {
+            _customerArr.push(item.active_customer)
+            _orderArr.push(item.order_total)
+          })
+          this.customerArr = _customerArr;
+          this.orderArr = _orderArr;
+        }).catch()
+      },
+      init() {
+        this.col = echarts.init(document.getElementById('col-chart'))
+        this.col.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            position: 'bottom'
+          },
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          xAxis: {
+            type: 'category',
+            data: ['第一周', '第二周', '第三周', '第四周']
+          },
+          series: [{
+              name: '服务金额',
+              type: 'bar',
+              data: this.business_data,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(42,182,252)'
+                },
+              },
+            },
+            {
+              name: '收款',
+              type: 'bar',
+              data: this.collect_data,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(34,228,255)'
+                },
+              },
+            }
+          ]
+        })
+
+        this.line = echarts.init(document.getElementById('line-chart'))
+        this.line.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['活跃客户', '服务订单']
+          },
+          grid: {
+            left: '3%',
+            right: '6%',
+            bottom: '3%',
+            containLabel: true
+          },
+          toolbox: {
+
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['第一周', '第二周', '第三周', '第四周']
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [{
+              name: '活跃客户',
+              type: 'line',
+              stack: 'Total',
+              data: this.customerArr,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(42,182,252)'
+                },
+              },
+            },
+            {
+              name: '服务订单',
+              type: 'line',
+              stack: 'Total',
+              data: this.orderArr,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(34,228,255)'
+                },
+              },
+            }
+          ]
+        })
+      }
+    },
+    created() {
+
+      this.loadData();
+    },
+    mounted() {
+
+
+      //this.init()
+
+      window.onresize = () => {
+        this.col.resize()
+        this.line.resize()
+      }
+
+    },
+    destroyed() {
+      window.onresize = null
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .statistics {
+    display: flex;
+
+    margin-top: 20px;
+
+    &-title {
+
+      padding-left: 6px;
+    }
+
+    &-content {
+      text-align: center;
+      font-size: 13px;
+
+      &-top {
+
+        &__num {
+          font-weight: 600;
+        }
+
+        &__name {
+          font-size: 10px;
+          color: rgb(140, 140, 140);
+        }
+      }
+
+      &-bottom {
+        display: flex;
+        justify-content: space-between;
+
+        &-left {
+
+          &__num {
+            font-weight: 600;
+          }
+
+          &__name {
+            font-size: 10px;
+            color: rgb(140, 140, 140);
+          }
+        }
+
+        &-right {
+
+          &__num {
+            font-weight: 600;
+          }
+
+          &__name {
+            font-size: 10px;
+            color: rgb(140, 140, 140);
+          }
+        }
+      }
+    }
+
+    &>div {
+      flex: 1;
+      margin-right: 20px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .chart {
+    display: flex;
+
+    margin-top: 20px;
+
+
+    .chartItem {
+
+      width: 49%;
+
+      .chartItemTitle {
+        font-size: 16px;
+        margin-bottom: 20px;
+      }
+
+      #col-chart {
+        background: #fff;
+        border-radius: 10px;
+        flex: 1;
+        margin-right: 20px;
+        padding: 20px;
+        box-sizing: border-box;
+        min-height: 400px;
+        width: 100%;
+      }
+
+      #line-chart {
+        background: #fff;
+        border-radius: 10px;
+        flex: 1;
+        padding: 20px;
+        box-sizing: border-box;
+        min-height: 400px;
+      }
+    }
+
+
+  }
 </style>