From 8bde5bac16227688a0121c56dea39a8e62dd73ab Mon Sep 17 00:00:00 2001
From: zory <791736813@qq.com>
Date: Tue, 19 Apr 2022 22:03:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A0dashboard=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |   2 +
 src/store/getters.js                |   9 +-
 src/views/dashboard/BarChart.vue    | 101 +++++++++++++++
 src/views/dashboard/LineChart.vue   | 134 ++++++++++++++++++++
 src/views/dashboard/PanelGroup.vue  | 185 ++++++++++++++++++++++++++++
 src/views/dashboard/PieChart.vue    |  78 ++++++++++++
 src/views/dashboard/RaddarChart.vue | 115 +++++++++++++++++
 src/views/index_v1.vue              |  66 +++++-----
 8 files changed, 653 insertions(+), 37 deletions(-)
 create mode 100644 src/views/dashboard/BarChart.vue
 create mode 100644 src/views/dashboard/LineChart.vue
 create mode 100644 src/views/dashboard/PanelGroup.vue
 create mode 100644 src/views/dashboard/PieChart.vue
 create mode 100644 src/views/dashboard/RaddarChart.vue

diff --git a/package.json b/package.json
index d6fe7fd..d1db291 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
     "vue": "3.2.26",
     "vue-cropper": "1.0.2",
     "vue-router": "4.0.12",
+    "vue3-number-roll-plus": "^0.1.3",
+    "vue3-seamless-scroll": "^1.2.0",
     "vuex": "4.0.2",
     "wangeditor": "^4.7.15"
   },
diff --git a/src/store/getters.js b/src/store/getters.js
index 5a50d6b..87d7e85 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -12,9 +12,10 @@ const getters = {
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,
   permission_routes: state => state.permission.routes,
-	userinfo: state => state.user.userInfo,
-  topbarRouters:state => state.permission.topbarRouters,
-  defaultRoutes:state => state.permission.defaultRoutes,
-  sidebarRouters:state => state.permission.sidebarRouters,
+  userinfo: state => state.user.userInfo,
+  topbarRouters: state => state.permission.topbarRouters,
+  defaultRoutes: state => state.permission.defaultRoutes,
+  sidebarRouters: state => state.permission.sidebarRouters,
+  onlineUserNum: state => 0
 }
 export default getters
\ No newline at end of file
diff --git a/src/views/dashboard/BarChart.vue b/src/views/dashboard/BarChart.vue
new file mode 100644
index 0000000..c8e141a
--- /dev/null
+++ b/src/views/dashboard/BarChart.vue
@@ -0,0 +1,101 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+// 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'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/LineChart.vue b/src/views/dashboard/LineChart.vue
new file mode 100644
index 0000000..64e8d8b
--- /dev/null
+++ b/src/views/dashboard/LineChart.vue
@@ -0,0 +1,134 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+// import resize from './mixins/resize'
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
new file mode 100644
index 0000000..e137a24
--- /dev/null
+++ b/src/views/dashboard/PanelGroup.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            在线用户
+          </div>
+         <vue-number-roll-plus :number="onlineUserNum" background="transparent" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            消息
+          </div>
+          <vue-number-roll-plus :number="18888" background="transparent" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="money" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            金额
+          </div>
+          <vue-number-roll-plus :number="9288" background="transparent" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            订单
+          </div>
+          <vue-number-roll-plus :number="13500" background="transparent" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import VueNumberRollPlus from 'vue3-number-roll-plus'
+import 'vue3-number-roll-plus/main.css'
+import { mapGetters } from 'vuex'
+export default {
+  components: {
+    VueNumberRollPlus,
+  },
+  computed: {
+    ...mapGetters(['onlineUserNum']),
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 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: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3;
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .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/PieChart.vue b/src/views/dashboard/PieChart.vue
new file mode 100644
index 0000000..169357f
--- /dev/null
+++ b/src/views/dashboard/PieChart.vue
@@ -0,0 +1,78 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+// import resize from './mixins/resize'
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/RaddarChart.vue b/src/views/dashboard/RaddarChart.vue
new file mode 100644
index 0000000..fb6447a
--- /dev/null
+++ b/src/views/dashboard/RaddarChart.vue
@@ -0,0 +1,115 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+// import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index 2d75c9e..9d15fd4 100644
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@@ -39,7 +39,7 @@
                   </el-col>
                 </el-col>
                 <el-col :lg="24" class="mt10">
-                  <el-button size="small" icon="el-icon-edit-outline">
+                  <el-button size="small" icon="edit">
                     <router-link to="/user/profile">修改信息</router-link>
                   </el-button>
                   <!-- <el-button size="small" icon="el-icon-position" type="primary">发布活动</el-button> -->
@@ -49,7 +49,7 @@
           </div>
         </el-card>
       </el-col>
-      <!-- <el-col :md="24" :lg="8" :xl="8" class="mb10">
+      <el-col :md="24" :lg="8" :xl="8" class="mb10">
         <el-card shadow="hover">
           <template #header>
             <div>
@@ -59,25 +59,25 @@
           </template>
 
           <div class="info">
-            <Scroll :data="newArticleList" class="info-scroll" :class-option="optionSingleHeight">
+            <vue3-seamless-scroll :list="newArticleList" class="info-scroll" :step="0.2" :limitScrollNum="2">
               <ul class="info-ul">
                 <li v-for="(v, k) in newArticleList" :key="k" class="info-item">
                   <div class="info-item-left" v-text="v.title"></div>
                   <div class="info-item-right" v-text="parseTime(v.updateTime, '{m}/{d}')"></div>
                 </li>
               </ul>
-            </Scroll>
+            </vue3-seamless-scroll>
           </div>
         </el-card>
-			</el-col>-->
+      </el-col>
     </el-row>
-    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
-    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData" />
-		</el-row>-->
+		</el-row>
 
-    <!-- <el-row :gutter="32">
+   <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <raddar-chart />
@@ -93,17 +93,17 @@
           <bar-chart />
         </div>
       </el-col>
-		</el-row>-->
+		</el-row>
   </div>
 </template>
 
 <script>
-// import PanelGroup from "./dashboard/PanelGroup";
-// import LineChart from "./dashboard/LineChart";
-// import RaddarChart from "./dashboard/RaddarChart";
-// import PieChart from "./dashboard/PieChart";
-// import BarChart from "./dashboard/BarChart";
-// import Scroll from "vue-seamless-scroll";
+import PanelGroup from "./dashboard/PanelGroup";
+import LineChart from "./dashboard/LineChart";
+import RaddarChart from "./dashboard/RaddarChart";
+import PieChart from "./dashboard/PieChart";
+import BarChart from "./dashboard/BarChart";
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import { listNewArticle } from '@/api/system/article.js'
 
 const lineChartData = {
@@ -127,12 +127,12 @@ const lineChartData = {
 export default {
   name: 'Index',
   components: {
-    // PanelGroup,
-    // LineChart,
-    // RaddarChart,
-    // PieChart,
-    // BarChart,
-    // Scroll,
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    Vue3SeamlessScroll,
   },
   computed: {
     photo() {
@@ -154,25 +154,25 @@ export default {
     //     singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
     //     singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
     //     waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
-    //   };
+    //   }
     // },
   },
   data() {
     return {
-      // lineChartData: lineChartData.newVisitis,
-      // newArticleList: [],
+      lineChartData: lineChartData.newVisitis,
+      newArticleList: [],
     }
   },
   created() {
-    // listNewArticle().then((res) => {
-    //   this.newArticleList = res.data;
-    // });
+    listNewArticle().then((res) => {
+      this.newArticleList = res.data
+    })
   },
   methods: {
-    // handleSetLineChartData(type) {
-    //   this.lineChartData = lineChartData[type];
-    // },
-    // onOpenGitee() {},
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type];
+    },
+    onOpenGitee() {},
   },
 }
 </script>
@@ -198,7 +198,7 @@ export default {
     align-items: center;
     .user-item-left {
       width: 100px;
-      height: 130px;
+      height: 100px;
       border-radius: 4px;
       overflow: hidden;
       img {