美化dashbord

dd67b51d · 范庆磊 · 1c0e1412 · dd67b51d · dd67b51d · dd67b51d
6 changed file
--- a/web/package.json
+++ b/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",

--- a/web/src/components/dashbordCharts/echartsLine.vue
+++ b/web/src/components/dashbordCharts/echartsLine.vue
+<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>
\ No newline at end of file
--- a/web/src/components/dashbordTable/dashbordTable.vue
+++ b/web/src/components/dashbordTable/dashbordTable.vue
+<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>
\ No newline at end of file
--- a/web/src/view/dashboard/index.vue
+++ b/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;
 }

 //小屏幕不显示右侧，将登陆框居中

--- a/web/vue.config.js
+++ b/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字符串删除

--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -3433,6 +3433,13 @@ ecc-jsbn@~0.1.1:
    jsbn "~0.1.0"
    safer-buffer "^2.1.0"

+echarts@4.9.0:
+  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"
+
 ee-first@1.1.1:
  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"
+
+zrender@4.3.2:
+  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=