美化dashbord

web/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
+    "echarts": "4.9.0",
     "element-plus": "^1.1.0-beta.4",
     "highlight.js": "^10.6.0",
     "marked": "^2.0.0",

web/src/components/dashbordCharts/echartsLine.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="dashbord-line" style="height: 400px;width: 100%;"></div>
+</template>
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons");
+
+
+var dataAxis = [];
+for (var i = 1 ; i < 21 ; i++){
+    dataAxis.push(`${i}号`)
+}
+var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
+var yMax = 500;
+var dataShadow = [];
+
+for (var i = 0; i < data.length; i++) {
+    dataShadow.push(yMax);
+}
+
+export default {
+    name: "line",
+    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, "macarons");
+            this.setOptions();
+        },
+        setOptions() {
+            this.chart.setOption({
+                title: {
+                    text: 'GVA 图标示例',
+                },
+                xAxis: {
+                    data: dataAxis,
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    z: 10
+                },
+                yAxis: {
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                dataZoom: [
+                    {
+                        type: 'inside'
+                    }
+                ],
+                series: [
+                    {
+                        type: 'bar',
+                        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' }
+                                ]
+                            ),
+
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 0, 0, 1,
+                                    [
+                                        { offset: 0, color: '#2378f7' },
+                                        { offset: 0.7, color: '#2378f7' },
+                                        { offset: 1, color: '#83bff6' }
+                                    ]
+                                )
+                            }
+                        },
+                        data: data
+                    }
+                ]
+            });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.dashbord-line {
+    margin: 20px 0;
+    padding: 20px;
+    background-color: #fff;
+}
+</style>

web/src/components/dashbordTable/dashbordTable.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="commit-table">
+        <div class="commit-table-title">Gva 仓库commit 记录</div>
+        <el-table :data="dataTimeline" style="width: 100%" v-loading="loading">
+        <el-table-column prop="from" show-overflow-tooltip label="日期" width="180"></el-table-column>
+        <el-table-column prop="title" show-overflow-tooltip label="推送者" width="120"></el-table-column>
+        <el-table-column prop="message" show-overflow-tooltip label="commit 信息"></el-table-column>
+    </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{
+    margin: 20px 0;
+    padding: 20px;
+    background-color: #fff;
+    height: 400px;
+    &-title{
+        color: rgb(56,137,206);
+        font-size: 18px;
+        margin: 20px 0;
+
+    }
+}
+</style>

web/src/view/dashboard/index.vue

@@ -7,17 +7,17 @@
                 <div class="dashbord1-left-rows">
                     <el-row :gutter="20">
                         <el-col :span="8" :xs="24" :sm="8">
-                            <div class>
+                            <div class="flex-center">
                                 <i class="el-icon-sort icon"></i>今日流量 (1231231)
                             </div>
                         </el-col>
                         <el-col :span="8" :xs="24" :sm="8">
-                            <div class>
+                            <div class="flex-center">
                                 <i class="el-icon-s-custom icon"></i>总用户数 (24001)
                             </div>
                         </el-col>
                         <el-col :span="8" :xs="24" :sm="8">
-                            <div class>
+                            <div class="flex-center">
                                 <i class="el-icon-s-comment icon"></i>好评率 (99%)
                             </div>
                         </el-col>
@@ -47,8 +47,13 @@
             </div>
         </div>
 
-        <div class="mycard quick-entrance">
-            <el-row :gutter="20">
+            <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"
@@ -58,21 +63,37 @@
                     class="quick-entrance-items"
                 >
                     <div class="quick-entrance-item">
-                        <div
-                            class="quick-entrance-item-icon"
-                            :style="{ backgroundColor: card.bg }"
-                        >
+                        <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></echarts-line>
+                </el-col>
+                <el-col :xs="24" :sm="8">
+                    <dashbord-table></dashbord-table>
+                </el-col>
+            </el-row>
         </div>
     </div>
 </template>
 <script>
+import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
+import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
 export default {
+    components: {
+        echartsLine,
+        dashbordTable
+    },
     data() {
         return {
             toolCards: [
@@ -81,53 +102,62 @@ export default {
                     icon: 'el-icon el-icon-monitor',
                     name: 'user',
                     color: '#ff9c6e',
-                    bg :'rgba(255, 156, 110,.3)'
+                    bg: 'rgba(255, 156, 110,.3)'
                 },
                 {
                     label: '角色管理',
                     icon: 'el-icon el-icon-setting',
                     name: 'authority',
                     color: '#69c0ff',
-                    bg :'rgba(105, 192, 255,.3)'
+                    bg: 'rgba(105, 192, 255,.3)'
                 },
                 {
                     label: '菜单管理',
                     icon: 'el-icon el-icon-menu',
                     name: 'menu',
                     color: '#b37feb',
-                    bg :'rgba(179, 127, 235,.3)'
+                    bg: 'rgba(179, 127, 235,.3)'
                 },
                 {
                     label: '代码生成器',
                     icon: ' el-icon-cpu',
                     name: 'autoCode',
                     color: '#ffd666',
-                    bg :'rgba(255, 214, 102,.3)'
+                    bg: 'rgba(255, 214, 102,.3)'
                 },
                 {
                     label: '表单生成器',
                     icon: 'el-icon-document-checked',
                     name: 'formCreate',
                     color: '#ff85c0',
-                    bg :'rgba(255, 133, 192,.3)'
+                    bg: 'rgba(255, 133, 192,.3)'
                 },
                 {
                     label: '关于我们',
                     icon: ' el-icon-user',
                     name: 'about',
                     color: '#5cdbd3',
-                    bg :'rgba(92, 219, 211,.3)'
+                    bg: 'rgba(92, 219, 211,.3)'
                 }
             ]
         }
+    },
+    methods: {
+        toTarget(name) {
+            this.$router.push({ name })
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+}
 .page {
-    background: #f8f8f8;
-    padding: 10px;
+    background: #f0f2f5;
+    padding: 0;
 
     .mycard {
         background-color: #fff;
@@ -135,16 +165,17 @@ export default {
         height: auto;
         padding: 10px 30px;
         overflow: hidden;
-        margin-bottom: 20px;
+        margin-bottom: 15px;
+        box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
     }
     .dashbord1 {
-        height: 150px;
-        display: flex;
-        align-items: center;
+        height: 120px;
+        @include flex-center;
         justify-content: space-between;
         color: #777;
         &-left {
             &-title {
+                margin-top: 15px;
                 font-size: 22px;
                 color: #000;
             }
@@ -153,7 +184,7 @@ export default {
                 margin-top: 10px;
             }
             &-rows {
-                margin-top: 15px;
+                // margin-top: 15px;
                 width: 600px;
                 align-items: center;
             }
@@ -165,46 +196,56 @@ export default {
         }
     }
     .dashbord2 {
-        display: flex;
-        align-items: center;
+        @include flex-center;
         justify-content: flex-start;
         height: 60px;
         &-item {
             line-height: 25px;
         }
     }
-
+    .quick-entrance-title {
+        height: 30px;
+        font-size: 22px;
+        color: #333;
+        width: 100%;
+        border-bottom: 1px solid #eee;
+    }
     .quick-entrance-items {
-        display: flex;
-        align-items: center;
+        @include flex-center;
         justify-content: center;
         text-align: center;
         color: #333;
         .quick-entrance-item {
             height: auto;
+            text-align: center;
+            // align-items: center;
             &-icon {
                 width: 50px;
                 height: 50px !important;
                 border-radius: 8px;
-                display: flex;
-                align-items: center;
+                @include flex-center;
                 justify-content: center;
-                i{
+                margin: 0 auto;
+                i {
                     font-size: 24px;
                 }
             }
-            p{
+            p {
                 margin-top: 10px;
             }
         }
     }
 }
 .icon {
-    font-size: 22px;
+    font-size: 20px;
     color: rgb(85, 160, 248);
     width: 30px;
     height: 30px;
     margin-right: 10px;
+    @include flex-center;
+}
+.flex-center {
+    @include flex-center;
 }
 
 //小屏幕不显示右侧，将登陆框居中

web/vue.config.js

@@ -25,8 +25,7 @@ module.exports = {
       // 把key的路径代理到target位置
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: { // 需要代理的路径   例如 '/api'
-        // target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
-        target: `https://demo.gin-vue-admin.com/api/`, // 代理到 目标路径
+        target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
         changeOrigin: true,
         pathRewrite: { // 修改路径数据
           ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除

web/yarn.lock

@@ -3433,6 +3433,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
[email protected]:
+  version "4.9.0"
+  resolved "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1630472181626&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
+  integrity sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=
+  dependencies:
+    zrender "4.3.2"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.nlark.com/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -7395,10 +7402,10 @@ sass-loader@^8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sass@^1.34.1:
-  version "1.38.2"
-  resolved "https://registry.nlark.com/sass/download/sass-1.38.2.tgz#970045d9966180002a8c8f3820fc114cddb42822"
-  integrity sha1-lwBF2ZZhgAAqjI84IPwRTN20KCI=
+sass@^1.26.5:
+  version "1.39.0"
+  resolved "https://registry.nlark.com/sass/download/sass-1.39.0.tgz#6c64695d1c437767c8f1a4e471288e831f81d035"
+  integrity sha1-bGRpXRxDd2fI8aTkcSiOgx+B0DU=
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
 
@@ -8972,3 +8979,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
[email protected]:
+  version "4.3.2"
+  resolved "https://registry.nlark.com/zrender/download/zrender-4.3.2.tgz?cache=0&sync_timestamp=1630140956807&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fzrender%2Fdownload%2Fzrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
+  integrity sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY=