From 5b9c934b297ca451d31630b5068e0702d7411721 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: Fri, 11 Nov 2022 17:27:12 +0800
Subject: [PATCH] up

---
 src/api/dashboard.js                          |  33 +-
 src/views/dashboard/components/BarChart.vue   | 146 +++++++
 src/views/dashboard/components/LineChart.vue  | 143 +++++++
 src/views/dashboard/components/PanelGroup.vue | 396 ++++++++++++++++++
 src/views/dashboard/components/PieChart.vue   | 163 +++++++
 src/views/dashboard/index.vue                 | 166 +++++++-
 6 files changed, 1018 insertions(+), 29 deletions(-)
 create mode 100644 src/views/dashboard/components/BarChart.vue
 create mode 100644 src/views/dashboard/components/LineChart.vue
 create mode 100644 src/views/dashboard/components/PanelGroup.vue
 create mode 100644 src/views/dashboard/components/PieChart.vue

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index ba8ceea..574bb0f 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -1,16 +1,33 @@
 import request from '@/utils/request'
+
 
-export function getCounts() {
+export function getcustomerData(params) {
   return request({
-    url: '/api/admin/get-counts',
-    method: 'get'
+    url: '/api/admin/home/customer',
+    method: 'get',
+    params: params
   })
-}
-
-
-export function getChartsData(params) {
+}
+export function getorderData(params) {
+  return request({
+    url: '/api/admin/home/order',
+    method: 'get',
+    params: params
+  })
+}
+
+
+export function getcustomeritemData(params) {
+  return request({
+    url: '/api/admin/home/customer-item',
+    method: 'get',
+    params: params
+  })
+}
+
+export function getorderitemData(params) {
   return request({
-    url: '/api/admin/get-charts-data',
+    url: '/api/admin/home/order-item',
     method: 'get',
     params: params
   })
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
new file mode 100644
index 0000000..199f14c
--- /dev/null
+++ b/src/views/dashboard/components/BarChart.vue
@@ -0,0 +1,146 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '500px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            {
+              startValue: 0,
+              endValue: 6, // 显示条数
+              type: 'slider',
+              show: true,
+              xAxisIndex: [0],
+              handleSize: 0, //滑动条的 左右2个滑动条的大小
+              height: 8, //组件高度
+              left: 50, //左边的距离
+              right: 40, //右边的距离
+              bottom: 26, //右边的距离
+              handleColor: '#EFEFEF', //h滑动图标的颜色
+              handleStyle: {
+                borderColor: '#409EFF',
+                borderWidth: '1',
+                shadowBlur: 2,
+                background: '#EFEFEF',
+                shadowColor: '#EFEFEF'
+              },
+              fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                  //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                  //给第一个设置0，第四个设置1，就是垂直渐变
+                  offset: 0,
+                  color: '#409EFF'
+                },
+                {
+                  offset: 1,
+                  color: '#409EFF'
+                }
+              ]),
+              backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+              showDataShadow: false, //是否显示数据阴影 默认auto
+              showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+              handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+              filterMode: 'filter'
+            }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          grid: {
+            top: 10,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisTick: {
+              show: false
+            }
+          }],
+          series: [{
+            name: '数据',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: chartdata.yArr,
+            animationDuration
+          }]
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue
new file mode 100644
index 0000000..73ffc34
--- /dev/null
+++ b/src/views/dashboard/components/LineChart.vue
@@ -0,0 +1,143 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legendArr:[],
+          legend: {
+            orient: 'horizontal',
+            bottom: '3%',
+            data:chartdata.legendArr
+          },
+            tooltip: {
+              trigger: 'axis'
+            },
+            backgroundColor:"#fff",
+          grid: {
+            top: '3%',
+            left: '2%',
+            right: '2%',
+            bottom: '12%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+          }],
+          series: chartdata.series
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..cf270bb
--- /dev/null
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,396 @@
+<template>
+  <div>
+    <div class="boxlist">
+
+
+     <div class="box box1">
+        <div class="boxtitle">
+          订单统计
+        </div>
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">当日下单/取消</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+
+              <count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_date.total"
+                :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">支付：
+              {{totaldata.order.order_list.total.order_date.paid}}
+            </div>
+          </div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+
+              <count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_date.canceled"
+                :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">退款：
+              {{totaldata.order.order_list.total.order_date.refunded}}
+            </div>
+          </div>
+        </div>
+        <div class="boxcline"></div>
+
+        <div class="boxcontentsubtitle">当月下单/取消</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_month.total"
+                :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">支付：
+              {{totaldata.order.order_list.total.order_month.paid}}
+            </div>
+          </div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_month.canceled"
+                :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">退款：
+              {{totaldata.order.order_list.total.order_month.refunded}}
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="box box2">
+        <div class="boxtitle">
+          客户数量
+        </div>
+        <div class="bline"></div>
+
+        <div class="boxcontentsubtitle">总注册数 / 总手机号授权</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to separator="" :start-val="0" :end-val="totaldata.customer.customer_list.total.all_customer.total"
+                :duration="3600" />
+            </div>
+          </div>
+          <div class="boxline"></div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to separator="" :start-val="0" :end-val="totaldata.customer.customer_list.total.all_customer.phone"
+                :duration="3600" />
+            </div>
+          </div>
+        </div>
+
+        <div class="boxcline"></div>
+        <div class="boxcontentsubtitle">今日注册 / 手机号授权</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to separator="" :start-val="0"
+                :end-val="totaldata.customer.customer_list.total.customer_date.total" :duration="3600" />
+            </div>
+          </div>
+          <div class="boxline"></div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to separator="" :start-val="0"
+                :end-val="totaldata.customer.customer_list.total.customer_date.phone" :duration="3600" />
+            </div>
+          </div>
+        </div>
+        <div class="boxfooter"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import CountTo from 'vue-count-to'
+
+  export default {
+    props: {
+      totaldata: {
+        type: Object
+      }
+    },
+    components: {
+      CountTo
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .boxlist {
+    display: flex;
+  }
+
+  .index_icon {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    width: 3.5625rem;
+  }
+
+  .index_bg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+
+
+  .box {
+    position: relative;
+    width: 49%;
+    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;
+    }
+
+    .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: 40%;
+
+        .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-left: -2% !important;
+    margin-right: -3% !important;
+
+    .card-panel-col {
+      margin: 0 2%;
+
+      margin-bottom: 32px;
+    }
+
+    .card-panel {
+      height: 130px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      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-message {
+        //   background: #36a3f7;
+        // }
+
+        // .icon-money {
+        //   background: #f4516c;
+        // }
+
+        // .icon-shopping {
+        //   background: #34bfa3
+        // }
+      }
+
+      .icon-people {
+        color: #fff;
+      }
+
+      .icon-message {
+        color: #fff;
+      }
+
+      .icon-money {
+        color: #fff;
+      }
+
+      .icon-shopping {
+        color: #fff
+      }
+
+      .card-panel-icon-wrapper {
+        float: right;
+        margin: 22px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
+
+      .card-panel-icon {
+        float: left;
+        font-size: 42px;
+      }
+
+      .card-panel-description {
+        // float: right;
+        font-weight: bold;
+        margin: 16px 12px;
+
+        .card-panel-text {
+          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 {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
+
+    .card-panel-icon-wrapper {
+      float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
new file mode 100644
index 0000000..3979b90
--- /dev/null
+++ b/src/views/dashboard/components/PieChart.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '300px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legend: {
+            orient: 'horizontal',
+            bottom: '4%',
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          grid: {
+            top: 0,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisLine: {
+                show: false  //不显示坐标轴轴线
+            },
+            axisTick: {
+                show: false  //不显示坐标轴刻度
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisLine: {
+                show: false  //不显示坐标轴轴线
+            },
+            axisTick: {
+                show: false  //不显示坐标轴刻度
+            },
+          }],
+          radiusArr:[],
+          series: [{
+            name: '数据',
+            type: 'pie',
+            stack: 'vistors',
+            barWidth: '60%',
+            radius: chartdata.radiusArr,
+            center: ['50%', '45%'],
+            data: chartdata.yArr,
+            animationDuration
+          }]
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index dde336e..43dfc0a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,24 +1,148 @@
-<template>
-  <div class="dashboard-editor-container">
+<template>
+  <div class="dashboard-editor-container">
+
+    <panel-group :totaldata="totaldata" />
+
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="24">
+        <div class="chart-wrapper">
+          <div class="chart-title">
+            <router-link to="/toolbox/exception">客户与订单</router-link>
+          </div>
+          <line-chart :chartData="lineArr" />
+        </div>
+
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+  import PanelGroup from './components/PanelGroup'
+  // import BarChart from './components/BarChart'
+  import PieChart from './components/PieChart'
+  import LineChart from './components/LineChart'
+
+  import {
+    getcustomerData,
+    getorderData,
+    getcustomeritemData,
+    getorderitemData
+  } from "../../api/dashboard.js"
+
+  export default {
+    name: 'DashboardAdmin',
+    components: {
+      PanelGroup,
+      PieChart,
+      LineChart
+    },
+    data() {
+      return {
+        totaldata: {
+          customer: {},
+          order: {}
+        },
+        lineArr: {
+          xArr: [],
+          legendArr: ["客户", "订单", "成交额"],
+          series: [{
+              name: '客户',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            },
+            {
+              name: '订单',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            },
+            {
+              name: '成交额',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            }
+          ]
+        }
+      }
+    },
+    created: function() {},
+    mounted() {
+      this.$nextTick(() => {
+        this.load();
+        this.loadItemData();
+      })
+
+    },
+    methods: {
+      async load() {
+        var that = this;
+        await getcustomerData().then(res => {
+          that.totaldata.customer = res;
+        })
+
+        await getorderData().then(res => {
+          that.totaldata.order = res;
+        })
+      },
+      loadItemData() {
+        var that = this;
+
+        getcustomeritemData().then((res) => {
+
+          for (var m of res) {
+            that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
+            that.lineArr.series[0].data.push(m.customer_total);
+          }
+        }).catch((res) => {})
 
-  </div>
-</template>
+        getorderitemData().then((res) => {
 
-<script>
-
-  export default {
-    name: 'DashboardAdmin',
-
-  }
-</script>
-
-<style lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 32px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
-
-
-
-  }
+          for (var m of res) {
+            that.lineArr.series[1].data.push(m.order_total);
+            that.lineArr.series[2].data.push(m.paid_money_total);
+            
+          }
+        }).catch((res) => {})
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+
+      .chart-title {
+        font-size: 16px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
 </style>