From 003f9745adafbcfab1c664a1717dedf7b4ce6b2a Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Thu, 19 May 2022 14:10:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LxHeader/index.vue             |   4 +-
 src/layout/components/Navbar.vue              |   4 +-
 src/layout/components/Sidebar/Logo.vue        |  30 +++-
 src/store/modules/app.js                      |   4 +-
 src/styles/sidebar.scss                       |   4 +-
 src/styles/variables.scss                     |  12 +-
 src/views/dashboard/components/LineChart.vue  | 143 +++++++++++++++
 src/views/dashboard/components/PanelGroup.vue |  94 ++++++----
 src/views/dashboard/components/PieChart.vue   | 163 ++++++++++++++++++
 src/views/dashboard/index.vue                 | 144 +++++++++++++---
 10 files changed, 522 insertions(+), 80 deletions(-)
 create mode 100644 src/views/dashboard/components/LineChart.vue
 create mode 100644 src/views/dashboard/components/PieChart.vue

diff --git a/src/components/LxHeader/index.vue b/src/components/LxHeader/index.vue
index 91589ab..b41055b 100644
--- a/src/components/LxHeader/index.vue
+++ b/src/components/LxHeader/index.vue
@@ -40,9 +40,9 @@ export default {
     // padding-top: 10px;
     font-weight: bold;
     font-size: 15px;
-    color: #c69845;
+    // color: #fff;
     white-space: nowrap;
-    border-bottom: 2px solid #c69845;
+    border-bottom: 2px solid #ef9525;
     > span {
       position: relative;
       top: 2px;
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index bfcdc99..f3f4cf0 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 
-    <breadcrumb class="breadcrumb-container" />
+    <!-- <breadcrumb class="breadcrumb-container" /> -->
 
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 7f33fea..36a82b0 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+     <!-- <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" src="../../../assets/logo-mini.png?v=1" class="sidebar-logo">
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" src="../../../assets/logo-mini.png" class="sidebar-logo">
+      </router-link> -->
+      <router-link key="expand" class="sidebar-logo-link" to="/">
+        <!-- <img v-if="logo" src="../../../assets/logo-mini.png" class="sidebar-logo">
         <img src="../../../assets/logo.png?v=1"
-          class="sidebar-name-logo" />
+          class="sidebar-name-logo" /> -->
+			  中共苏州独立支部旧址预约管理系统
+
+
       </router-link>
     </transition>
   </div>
@@ -31,7 +34,14 @@
   }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
+	#app .sidebar-container{
+		overflow:visible!important;
+		& a{
+			color:#515a6e;
+      font-weight: bold;
+		}
+	}
   .sidebarLogoFade-enter-active {
     transition: opacity 1.5s;
   }
@@ -47,12 +57,14 @@
 
   .sidebar-logo-container {
     position: relative;
-    width: 100%;
-    height: 50px;
+    width: 150%;
+    height: 50px;
+	font-size:16px;
+	color:#333;
     line-height: 50px;
     background: #FFFFFF;
     text-align: center;
-    overflow: hidden;
+    // overflow: hidden;
 
     & .sidebar-logo-link {
       height: 100%;
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 7ea7e33..50735e1 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -15,11 +15,11 @@ const mutations = {
     if (state.sidebar.opened) {
       Cookies.set('sidebarStatus', 1)
     } else {
-      Cookies.set('sidebarStatus', 0)
+      // Cookies.set('sidebarStatus', 0)
     }
   },
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
-    Cookies.set('sidebarStatus', 0)
+    // Cookies.set('sidebarStatus', 0)
     state.sidebar.opened = false
     state.sidebar.withoutAnimation = withoutAnimation
   },
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 302d239..ff74359 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -18,7 +18,7 @@
     bottom: 0;
     left: 0;
     z-index: 1001;
-    overflow: hidden;
+    overflow: visible;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -87,7 +87,7 @@
        //border-right: 5px solid $subMenuActiveText !important;
     }
         .is-active>.el-submenu__title {
-          color: $subMenuActiveText !important;
+          // color: $subMenuActiveText !important;
         }
 
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 2365536..23f35a1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,16 +1,16 @@
 // sidebar
 $menuText:#606266;
-$menuActiveText:#c69845;
-$subMenuActiveText:#c69845; //https://github.com/ElemeFE/element/issues/12951
+$menuActiveText:#fff;
+$subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
 
 $menuBg:#ffffff;//#304156
-$menuHover:#ea3223;
-$menuActiveBg:#ea3223;
+$menuHover:#ef9525;
+$menuActiveBg:#ef9525;
 
 
 $subMenuBg:#ffffff;//#1f2d3d
-$subMenuHover:#ea3223;
-$submenuActiveBg:#ea3223;
+$subMenuHover:#ef9525;
+$submenuActiveBg:#ef9525;
 
 $sideBarWidth: 210px;
 $primaryColor: #c69845;
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
index d0701b8..70591ff 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,56 +1,77 @@
 <template>
   <el-row :gutter="40" class="panel-group">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+    <el-col :xs="12" :sm="12" :lg="5"  class="card-panel-col" style="margin-right:3%;background: #FDC830;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+">
       <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-people">
+        <!-- <div class="card-panel-icon-wrapper icon-people">
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
-        </div>
+        </div> -->
         <div class="card-panel-description">
           <div class="card-panel-text">
-            欢迎回来
+            预约参观
           </div>
-          <div class="card-panel-text" style="color: #001528;">
-            管理员
+          <div class="card-panel-text" style="color: #fff;">
+            总 234 人次
           </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">
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:10.5%;background: #FFE000;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #799F0C, #FFE000);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #799F0C, #FFE000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+">
+      <div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
+        <!-- <div class="card-panel-icon-wrapper icon-message">
           <svg-icon icon-class="toolbox" class-name="card-panel-icon" />
-        </div>
+        </div> -->
         <div class="card-panel-description">
-          <div class="card-panel-text">
-            团队数量
+          <div class="card-panel-text" >
+            实际入场参观
+          </div>
+          <div class="card-panel-text" style="color: #fff;">
+            总 194 人次
           </div>
-          <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" />
+          <!-- <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">
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:3%;background: #F2994A;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+">
       <div class="card-panel" @click="handleRoute('tool')">
-        <div class="card-panel-icon-wrapper icon-money">
+        <!-- <div class="card-panel-icon-wrapper icon-money">
           <svg-icon icon-class="tool" class-name="card-panel-icon" />
-        </div>
+        </div> -->
         <div class="card-panel-description">
           <div class="card-panel-text">
-            预约数量
+            预约活动
+          </div>
+          <div class="card-panel-text" style="color: #fff;">
+            总 305 人次
           </div>
-          <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" />
+          <!-- <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">
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FFB75E;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+">
       <div class="card-panel" @click="handleRoute('user')">
-        <div class="card-panel-icon-wrapper icon-shopping">
+        <!-- <div class="card-panel-icon-wrapper icon-shopping">
           <svg-icon icon-class="user-group" class-name="card-panel-icon" />
-        </div>
+        </div> -->
         <div class="card-panel-description">
           <div class="card-panel-text">
-            游客数量
+            实际参与活动
+          </div>
+          <div class="card-panel-text" style="color: #fff;">
+            总 267 人次
           </div>
-          <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" />
+          <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
         </div>
       </div>
     </el-col>
@@ -77,11 +98,14 @@
   }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
+
   .panel-group {
     margin-top: 18px;
-
-    .card-panel-col {
+    margin-left:0px!important;
+    margin-right:0px!important;
+    .card-panel-col {
+      // margin:0 2%;
       margin-bottom: 32px;
     }
 
@@ -91,10 +115,11 @@
       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);
+      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 {
@@ -148,16 +173,17 @@
       }
 
       .card-panel-description {
-        float: right;
+        // float: right;
         font-weight: bold;
         margin: 26px;
         margin-left: 0px;
 
         .card-panel-text {
-          line-height: 18px;
+          line-height: 25px;
           color: rgba(0, 0, 0, 0.45);
-          font-size: 16px;
-          margin-bottom: 12px;
+          font-size: 25px;
+          margin-bottom: 12px;
+          font-family: "微软雅黑";
         }
 
         .card-panel-num {
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 ffce2f5..11f1b2e 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -3,33 +3,56 @@
 
     <panel-group @handleRoute="handleRoute" :countsData="countsData" />
     <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="12">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <div class="chart-title">
-            <router-link to="/toolbox/warning">数据统计</router-link>
-            <div>
+            <router-link to="/toolbox/warning">参观男女统计</router-link>
+            <!-- <div>
               <el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
                 style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
                 {{item.name}}
               </el-tag>
-            </div>
+            </div> -->
           </div>
-          <bar-chart :chartData="stat.warning" />
+          <pie-chart :chartData="stat.warning" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="12">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <div class="chart-title">
-            <router-link to="/toolbox/exception">登录统计</router-link>
-            <div>
+            <router-link to="/toolbox/exception">参观年龄段统计</router-link>
+           <!-- <div>
               <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                 style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                 {{item.name}}
               </el-tag>
-            </div>
+            </div> -->
           </div>
-          <bar-chart :chartData="stat.exception" />
+          <pie-chart :chartData="stat.exception" />
         </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <div class="chart-title">
+            <router-link to="/toolbox/exception">参观时长统计</router-link>
+           <!-- <div>
+              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
+                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
+                {{item.name}}
+              </el-tag>
+            </div> -->
+          </div>
+          <pie-chart :chartData="stat.times" />
+        </div>
+      </el-col>
+      <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>
 
@@ -38,7 +61,9 @@
 
 <script>
   import PanelGroup from './components/PanelGroup'
-  import BarChart from './components/BarChart'
+  // import BarChart from './components/BarChart'
+  import PieChart from './components/PieChart'
+  import LineChart from './components/LineChart'
   import {
     getChartsData,
     getCounts
@@ -47,7 +72,8 @@
     name: 'DashboardAdmin',
     components: {
       PanelGroup,
-      BarChart
+      PieChart,
+      LineChart
     },
     data() {
       return {
@@ -58,8 +84,19 @@
         },
         stat: {
           warning: {
-            xArr: ["一","二","三","四","五"],
-            yArr: [200,300,400,500,330],
+            // xArr: ["一","二","三","四","五"],
+            // yArr: [200,300,400,500,330],
+            yArr: [{
+                value: 1048,
+                name: '男性'
+              },
+              {
+                value: 735,
+                name: '女性'
+              },
+
+            ],
+            radiusArr: "60%",
             dateRange: [{
               checked: true,
               type: "week",
@@ -71,8 +108,24 @@
             }]
           },
           exception: {
-            xArr: ["一","二","三","四","五"],
-            yArr: [200,300,400,500,330],
+            yArr: [{
+                value: 1048,
+                name: '12岁以下'
+              },
+              {
+                value: 735,
+                name: '12-17岁'
+              },
+              {
+                value: 580,
+                name: '18-24岁'
+              },
+              {
+                value: 484,
+                name: '25岁以上'
+              }
+            ],
+            radiusArr: ['40%', '70%'],
             dateRange: [{
               checked: true,
               type: "week",
@@ -82,17 +135,62 @@
               type: "month",
               name: "本月"
             }]
-          },
+          },
+          times: {
+            radiusArr: "60%",
+            yArr: [{
+                value: 240,
+                name: '最长时长'
+              },
+              {
+                value: 20,
+                name: '最短时长'
+              },
+              {
+                value: 130,
+                name: '平均值'
+              }
+            ],
+          }
+        },
+        lineArr: {
+          xArr: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+          legendArr:["团队预约人数","团队预约实际入场人数","个人预约人数","个人预约实际入场人数"],
+          series: [{
+              name: '团队预约人数',
+              type: 'line',
+              stack: 'Total',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+              name: '团队预约实际入场人数',
+              type: 'line',
+              stack: 'Total',
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+              name: '个人预约人数',
+              type: 'line',
+              stack: 'Total',
+              data: [150, 232, 201, 154, 190, 330, 210]
+            },
+            {
+              name: '个人预约实际入场人数',
+              type: 'line',
+              stack: 'Total',
+              data: [50, 132, 101, 104, 180, 230, 110]
+            }
+          ]
         }
-      }
-    },
-    created: function() {
+      }
+      },
+      created: function() {
 
-    },
-    methods: {
+        },
+        methods: {
 
+        }
     }
-  }
 </script>
 
 <style lang="scss" scoped>