From 0e6a5e69812ed9ebb30ffd2a71be4d4ed9c39bf6 Mon Sep 17 00:00:00 2001
From: piexlmax <qimiaojiangjizhao@gmail.com>
Date: Sat, 18 Sep 2021 17:09:15 +0800
Subject: [PATCH] =?UTF-8?q?dashboard=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashbordTable/dashbordTable.vue           |  54 -----
 web/src/style/main.scss                       |   2 +-
 .../dashboard}/dashbordCharts/echartsLine.vue |  42 ++--
 .../dashboard/dashbordTable/dashbordTable.vue | 112 ++++++++++
 web/src/view/dashboard/index.vue              | 207 ++++++++++--------
 5 files changed, 250 insertions(+), 167 deletions(-)
 delete mode 100644 web/src/components/dashbordTable/dashbordTable.vue
 rename web/src/{components => view/dashboard}/dashbordCharts/echartsLine.vue (71%)
 create mode 100644 web/src/view/dashboard/dashbordTable/dashbordTable.vue

diff --git a/web/src/components/dashbordTable/dashbordTable.vue b/web/src/components/dashbordTable/dashbordTable.vue
deleted file mode 100644
index 13e16174..00000000
--- a/web/src/components/dashbordTable/dashbordTable.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div class="commit-table">
-    <div class="commit-table-title">Gva 仓库commit 记录</div>
-    <el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
-      <el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
-      <el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
-      <el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { Commits } from '@/api/github'
-export default {
-  data() {
-    return {
-      loading: true,
-      dataTimeline: [],
-    }
-  },
-  created() {
-    this.loadCommits()
-  },
-  methods: {
-    loadCommits() {
-      Commits(0).then(({ data }) => {
-        this.loading = false
-        data.forEach((element, index) => {
-          if (element.commit.message && index < 6) {
-            this.dataTimeline.push({
-              from: new Date(element.commit.author.date),
-              title: element.commit.author.name,
-              showDayAndMonth: true,
-              message: element.commit.message,
-            })
-          }
-        })
-      })
-    },
-  }
-}
-</script>
-<style lang="scss" scoped>
-.commit-table{
-    padding: 20px;
-    background-color: #fff;
-    height: 400px;
-    &-title{
-        color: rgb(56,137,206);
-        font-size: 18px;
-        margin-bottom: 20px;
-    }
-}
-</style>
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index 13e491cf..3a5e899b 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -1484,7 +1484,7 @@ $mainHight: 100vh;
     }
     .el-pagination__jump{
         .el-pagination__editor{
-
+                
         }
     }
 }
diff --git a/web/src/components/dashbordCharts/echartsLine.vue b/web/src/view/dashboard/dashbordCharts/echartsLine.vue
similarity index 71%
rename from web/src/components/dashbordCharts/echartsLine.vue
rename to web/src/view/dashboard/dashbordCharts/echartsLine.vue
index cc35da4a..7f184573 100644
--- a/web/src/components/dashbordCharts/echartsLine.vue
+++ b/web/src/view/dashboard/dashbordCharts/echartsLine.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="dashbord-line-box">
-    <div class="dashbord-line-title">Gva 仓库commit 记录</div>
+    <div class="dashbord-line-title">
+      访问趋势
+    </div>
     <div
       ref="echart"
       class="dashbord-line"
@@ -12,8 +14,8 @@ import echarts from 'echarts'
 import 'echarts/theme/macarons'
 
 var dataAxis = []
-for (var i = 1; i < 21; i++) {
-  dataAxis.push(`${i}号`)
+for (var i = 1; i < 13; i++) {
+  dataAxis.push(`${i}月`)
 }
 var data = [
   220,
@@ -28,14 +30,6 @@ var data = [
   321,
   90,
   149,
-  210,
-  122,
-  133,
-  334,
-  198,
-  123,
-  125,
-  220,
 ]
 var yMax = 500
 var dataShadow = []
@@ -71,6 +65,12 @@ export default {
     },
     setOptions() {
       this.chart.setOption({
+        grid: {
+          left: '40',
+          right: '40',
+          top: '40',
+          bottom: '20',
+        },
         xAxis: {
           data: dataAxis,
           axisTick: {
@@ -102,21 +102,14 @@ export default {
         series: [
           {
             type: 'bar',
+            barWidth: 40,
             itemStyle: {
               borderRadius: [5, 5, 0, 0],
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#83bff6' },
-                { offset: 0.5, color: '#188df0' },
-                { offset: 1, color: '#188df0' },
-              ]),
+              color: '#188df0',
             },
             emphasis: {
               itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#2378f7' },
-                  { offset: 0.7, color: '#2378f7' },
-                  { offset: 1, color: '#83bff6' },
-                ]),
+                color: '#188df0',
               },
             },
             data: data,
@@ -129,15 +122,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .dashbord-line-box {
-  padding: 20px;
   .dashbord-line {
     background-color: #fff;
     height: 360px;
-    width: calc(100% - 40px);
+    width: 100%;
   }
   .dashbord-line-title {
-    color: rgb(56, 137, 206);
-    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
   }
 }
 </style>
diff --git a/web/src/view/dashboard/dashbordTable/dashbordTable.vue b/web/src/view/dashboard/dashbordTable/dashbordTable.vue
new file mode 100644
index 00000000..2ff3b204
--- /dev/null
+++ b/web/src/view/dashboard/dashbordTable/dashbordTable.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="commit-table">
+    <div class="commit-table-title">
+      更新日志
+    </div>
+    <div class="log">
+      <div v-for="(item,key) in dataTimeline" :key="key" class="log-item">
+        <div class="flex-1 flex"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
+        <div class="flex-5 flex message">{{ item.message }}</div>
+        <div class="flex-3 flex form">{{ item.from }}</div>
+      </div>
+    </div>
+    <!-- <el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
+      <el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
+      <el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
+      <el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
+    </el-table> -->
+  </div>
+</template>
+
+<script>
+import { Commits } from '@/api/github'
+import { formatTimeToStr } from '@/utils/date.js'
+export default {
+  data() {
+    return {
+      loading: true,
+      dataTimeline: [],
+    }
+  },
+  created() {
+    this.loadCommits()
+  },
+  methods: {
+    loadCommits() {
+      Commits(0).then(({ data }) => {
+        this.loading = false
+        data.forEach((element, index) => {
+          if (element.commit.message && index < 10) {
+            this.dataTimeline.push({
+              from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
+              title: element.commit.author.name,
+              showDayAndMonth: true,
+              message: element.commit.message,
+            })
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.commit-table{
+    background-color: #fff;
+    height: 400px;
+    &-title{
+        font-weight: 600;
+        margin-bottom: 12px;
+    }
+    .log{
+      &-item{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 14px;
+        .key{
+          &.top{
+            background: #314659;
+            color: #FFFFFF;;
+          }
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          background: #F0F2F5;
+          text-align: center;
+          color:rgba($color: #000000, $alpha: 0.65)
+        }
+        .message{
+          color: rgba(0, 0, 0, 0.65);
+        }
+        .form{
+          color: rgba(0, 0, 0, 0.65);
+          margin-left: 12px;
+        }
+        .flex{
+          line-height: 20px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .flex-1{
+          flex:1;
+        }
+        .flex-2{
+          flex:2;
+        }
+        .flex-3{
+          flex:3;
+        }
+        .flex-4{
+          flex:4;
+        }
+        .flex-5{
+          flex:5;
+        }
+      }
+    }
+}
+</style>
diff --git a/web/src/view/dashboard/index.vue b/web/src/view/dashboard/index.vue
index 586bbaf4..d1fcf9c3 100644
--- a/web/src/view/dashboard/index.vue
+++ b/web/src/view/dashboard/index.vue
@@ -1,93 +1,104 @@
 <template>
   <div class="page">
-    <div class="mycard dashbord1">
-      <div class="dashbord1-left">
-        <div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
-        <div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
-        <div class="dashbord1-left-rows">
-          <el-row :gutter="20">
-            <el-col :span="8" :xs="24" :sm="8">
-              <div class="flex-center">
-                <i class="el-icon-sort icon" />今日流量 (1231231)
-              </div>
-            </el-col>
-            <el-col :span="8" :xs="24" :sm="8">
-              <div class="flex-center">
-                <i class="el-icon-s-custom icon" />总用户数 (24001)
-              </div>
-            </el-col>
-            <el-col :span="8" :xs="24" :sm="8">
-              <div class="flex-center">
-                <i class="el-icon-s-comment icon" />好评率 (99%)
-              </div>
-            </el-col>
-          </el-row>
+    <div class="gva-card-box">
+      <div class="gva-card dashbord1">
+        <div class="dashbord1-left">
+          <div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
+          <div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
+          <div class="dashbord1-left-rows">
+            <el-row :gutter="20">
+              <el-col :span="8" :xs="24" :sm="8">
+                <div class="flex-center">
+                  <i class="el-icon-sort icon" />今日流量 (1231231)
+                </div>
+              </el-col>
+              <el-col :span="8" :xs="24" :sm="8">
+                <div class="flex-center">
+                  <i class="el-icon-s-custom icon" />总用户数 (24001)
+                </div>
+              </el-col>
+              <el-col :span="8" :xs="24" :sm="8">
+                <div class="flex-center">
+                  <i class="el-icon-s-comment icon" />好评率 (99%)
+                </div>
+              </el-col>
+            </el-row>
+          </div>
         </div>
+        <img src="@/assets/dashbord.png" class="dashbord1-right" alt>
       </div>
-      <img src="@/assets/dashbord.png" class="dashbord1-right" alt>
     </div>
-    <div class="mycard dashbord2">
-      <div>
-        <div class="dashbord2-item">
-          使用教学：
-          <a
-            style="color:#409EFF"
-            target="view_window"
-            href="https://www.bilibili.com/video/BV1Rg411u7xH/"
-          >https://www.bilibili.com/video/BV1Rg411u7xH</a>
-        </div>
-        <div class="dashbord2-item">
-          插件仓库：
-          <a
-            style="color:#409EFF"
-            target="view_window"
-            href="https://github.com/flipped-aurora/gva-plugins"
-          >https://github.com/flipped-aurora/gva-plugins</a>
+    <div class="gva-card-box">
+      <div class="gva-card dashbord2">
+        <div>
+          <div class="dashbord2-item">
+            使用教学：
+            <a
+              style="color:#409EFF"
+              target="view_window"
+              href="https://www.bilibili.com/video/BV1Rg411u7xH/"
+            >https://www.bilibili.com/video/BV1Rg411u7xH</a>
+          </div>
+          <div class="dashbord2-item">
+            插件仓库：
+            <a
+              style="color:#409EFF"
+              target="view_window"
+              href="https://github.com/flipped-aurora/gva-plugins"
+            >https://github.com/flipped-aurora/gva-plugins</a>
+          </div>
         </div>
       </div>
     </div>
-
-    <el-card class="mycard quick-entrance">
-      <template #header>
-        <div class="card-header">
-          <span>快捷入口</span>
-        </div>
-      </template>
-      <el-row :gutter="20">
-        <el-col
-          v-for="(card, key) in toolCards"
-          :key="key"
-          :span="4"
-          :xs="8"
-          class="quick-entrance-items"
-          @click="toTarget(card.name)"
-        >
-          <div class="quick-entrance-item">
-            <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
-              <i :class="card.icon" :style="{ color: card.color }" />
-            </div>
-            <p>{{ card.label }}</p>
+    <div class="gva-card-box">
+      <el-card class="gva-card quick-entrance">
+        <template #header>
+          <div class="card-header">
+            <span>快捷入口</span>
           </div>
-        </el-col>
-      </el-row>
-    </el-card>
+        </template>
+        <el-row :gutter="20">
+          <el-col
+            v-for="(card, key) in toolCards"
+            :key="key"
+            :span="4"
+            :xs="8"
+            class="quick-entrance-items"
+            @click="toTarget(card.name)"
+          >
+            <div class="quick-entrance-item">
+              <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
+                <i :class="card.icon" :style="{ color: card.color }" />
+              </div>
+              <p>{{ card.label }}</p>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
     <!-- <div class="quick-entrance-title"></div> -->
-
-    <div class="mycard">
-      <el-row :gutter="0">
-        <el-col :xs="24" :sm="16">
-          <echarts-line />
-        </el-col>
-        <el-col :xs="24" :sm="8">
-          <dashbord-table />
-        </el-col>
-      </el-row>
+    </div>
+    <div class="gva-card-box">
+      <div class="gva-card">
+        <div class="card-header">
+          <span>数据统计</span>
+        </div>
+        <div class="echart-box">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="18">
+              <echarts-line />
+            </el-col>
+            <el-col :xs="24" :sm="6">
+              <dashbord-table />
+            </el-col>
+          </el-row>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
-import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
+import echartsLine from '@/view/dashboard/dashbordCharts/echartsLine.vue'
+import dashbordTable from '@/view/dashboard/dashbordTable/dashbordTable.vue'
 export default {
   components: {
     echartsLine,
@@ -157,33 +168,42 @@ export default {
 .page {
     background: #f0f2f5;
     padding: 0;
-
-    .mycard {
+    .gva-card-box{
+      padding: 12px;
+      &+.gva-card-box{
+        padding-top: 0px;
+      }
+    }
+    .gva-card {
+      box-sizing: border-box;
         background-color: #fff;
-        border-radius: 10px;
+        border-radius: 2px;
         height: auto;
-        padding: 10px 30px;
+        padding: 26px 30px;
         overflow: hidden;
-        margin-bottom: 15px;
         box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
     }
     .dashbord1 {
-        height: 120px;
+        height: 196px;
         @include flex-center;
         justify-content: space-between;
         color: #777;
         &-left {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
             &-title {
-                margin-top: 15px;
                 font-size: 22px;
-                color: #000;
+                color: #343844;
             }
             &-dot {
                 font-size: 14px;
-                margin-top: 10px;
+                color: #6B7687;
             }
             &-rows {
                 // margin-top: 15px;
+                color: #6B7687;
                 width: 600px;
                 align-items: center;
             }
@@ -194,11 +214,21 @@ export default {
             margin-top: 28px;
         }
     }
+     ::v-deep(.el-card__header){
+          padding:0;
+          border-bottom: none;
+        }
+        .card-header{
+          padding-bottom: 20px;
+          border-bottom: 1px solid #e8e8e8;
+        }
     .dashbord2 {
         @include flex-center;
         justify-content: flex-start;
-        height: 60px;
         &-item {
+            &+.dashbord2-item{
+              margin-top:24px;
+            }
             line-height: 25px;
         }
     }
@@ -234,6 +264,9 @@ export default {
             }
         }
     }
+    .echart-box{
+      padding: 14px;
+    }
 }
 .icon {
     font-size: 20px;
@@ -249,7 +282,7 @@ export default {
 
 //小屏幕不显示右侧，将登陆框居中
 @media (max-width: 750px) {
-    .mycard {
+    .gva-card {
         padding: 20px 10px !important;
         .dashbord1 {
             height: auto;