首页美化

server/config.yaml

@@ -13,7 +13,7 @@ mysql:
     username: root
     password: 'Aa@6447985'
     path: '127.0.0.1:3306'
-    db-name: 'qmPlus'
+    db-name: 'yx'
     config: 'charset=utf8&parseTime=True&loc=Local'
     max-idle-conns: 10
     max-open-conns: 10

web/package-lock.json

@@ -870,6 +870,14 @@
                 "postcss": "^7.0.0"
             }
         },
+        "@moefe/vue-aplayer": {
+            "version": "2.0.0-beta.5",
+            "resolved": "https://registry.npmjs.org/@moefe/vue-aplayer/-/vue-aplayer-2.0.0-beta.5.tgz",
+            "integrity": "sha512-ytzp4GStzjftuh7H1rIS/ziqwV1FO67iTLSkDxgN0J2bqlO+rBgDDr83Y+pZKBIgRUc30uu/UZHqmE4QiBHHeg==",
+            "requires": {
+                "vue": "^2.5.17"
+            }
+        },
         "@mrmlnc/readdir-enhanced": {
             "version": "2.2.1",
             "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@@ -1280,7 +1288,7 @@
                 "@vue/component-compiler-utils": "^3.0.0",
                 "@vue/preload-webpack-plugin": "^1.1.0",
                 "@vue/web-component-wrapper": "^1.2.0",
-                "acorn": "^6.4.1",
+                "acorn": "^6.1.1",
                 "acorn-walk": "^6.1.1",
                 "address": "^1.0.3",
                 "autoprefixer": "^9.5.1",
@@ -1310,7 +1318,7 @@
                 "lodash.mapvalues": "^4.6.0",
                 "lodash.transform": "^4.6.0",
                 "mini-css-extract-plugin": "^0.6.0",
-                "minimist": "^1.2.3",
+                "minimist": "^1.2.0",
                 "ora": "^3.4.0",
                 "portfinder": "^1.0.20",
                 "postcss-loader": "^3.0.0",
@@ -1331,6 +1339,18 @@
                 "webpack-merge": "^4.2.1"
             },
             "dependencies": {
+                "acorn": {
+                    "version": "6.4.1",
+                    "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+                    "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+                    "dev": true
+                },
+                "minimist": {
+                    "version": "1.2.5",
+                    "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                    "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+                    "dev": true
+                },
                 "semver": {
                     "version": "6.3.0",
                     "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz",
@@ -4059,6 +4079,14 @@
                 "safer-buffer": "^2.1.0"
             }
         },
+        "echarts": {
+            "version": "4.7.0",
+            "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.7.0.tgz",
+            "integrity": "sha512-NlOTdUcAsIyCCG+N4uh0ZEvXtrPW2jvcuqf03RyqYeCKzyPbiOQ4I3MdKXMhxG3lBdqQNdNXVT71SB4KTQjN0A==",
+            "requires": {
+                "zrender": "4.3.0"
+            }
+        },
         "ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12379,6 +12407,11 @@
                     "dev": true
                 }
             }
+        },
+        "zrender": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.0.tgz",
+            "integrity": "sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA=="
         }
     }
-}
+}

web/package.json

@@ -8,8 +8,10 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@moefe/vue-aplayer": "^2.0.0-beta.5",
         "axios": "^0.19.0",
         "core-js": "^2.6.5",
+        "echarts": "^4.7.0",
         "element-ui": "^2.12.0",
         "mavon-editor": "^2.7.7",
         "node-sass": "^4.12.0",

web/src/main.js

@@ -35,8 +35,24 @@ Vue.config.productionTip = false
 // 路由守卫
 import Bus from '@/utils/bus.js'
 Vue.use(Bus)
+
+import APlayer from '@moefe/vue-aplayer';
+
+Vue.use(APlayer, {
+    defaultCover: 'https://github.com/u3u.png',
+    productionTip: true,
+});
+
+
 new Vue({
     render: h => h(App),
     router,
     store
-}).$mount('#app')
+}).$mount('#app')
+
+//引入echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts;
+
+
+

web/src/view/dashboard/component/RaddarChart.vue

@@ -0,0 +1,120 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+    import echarts from 'echarts'
+    require('echarts/theme/macarons') // echarts theme
+
+    const animationDuration = 3000
+
+    export default {
+        name:'RaddarChart',
+        props: {
+            className: {
+                type: String,
+                default: 'chart'
+            },
+            width: {
+                type: String,
+                default: '100%'
+            },
+            height: {
+                type: String,
+                default: '300px'
+            }
+        },
+        data() {
+            return {
+                chart: null
+            }
+        },
+        mounted() {
+            this.initChart()
+           /* this.__resizeHandler = debounce(() => {
+                if (this.chart) {
+                    this.chart.resize()
+                }
+            }, 100)
+            window.addEventListener('resize', this.__resizeHandler)*/
+        },
+        beforeDestroy() {
+            if (!this.chart) {
+                return
+            }
+            // window.removeEventListener('resize', this.__resizeHandler)
+            this.chart.dispose()
+            this.chart = null
+        },
+        methods: {
+            initChart() {
+                this.chart = echarts.init(this.$el, 'light')
+
+                this.chart.setOption({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+                        }
+                    },
+                    radar: {
+                        radius: '66%',
+                        center: ['50%', '42%'],
+                        splitNumber: 8,
+                        splitArea: {
+                            areaStyle: {
+                                color: 'rgba(255,192,203,.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>

web/src/view/dashboard/component/Sunburst.vue

@@ -0,0 +1,391 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+    import echarts from 'echarts'
+    require('echarts/theme/macarons') // echarts theme
+
+    const animationDuration = 3000
+
+    export default {
+        name: "Sunburst",
+        props: {
+            className: {
+                type: String,
+                default: 'chart'
+            },
+            width: {
+                type: String,
+                default: '100%'
+            },
+            height: {
+                type: String,
+                default: '300px'
+            }
+        },
+        data() {
+            return {
+                chart: null,
+                datas:[
+                    {
+                    name: 'Flora',
+                    itemStyle: {
+                        color: '#da0d68'
+                    },
+                    children: [{
+                        name: 'Black Tea',
+                        value: 1,
+                        itemStyle: {
+                            color: '#975e6d'
+                        }
+                    }, {
+                        name: 'Floral',
+                        itemStyle: {
+                            color: '#e0719c'
+                        },
+                        children: [{
+                            name: 'Chamomile',
+                            value: 1,
+                            itemStyle: {
+                                color: '#f99e1c'
+                            }
+                        }, {
+                            name: 'Rose',
+                            value: 1,
+                            itemStyle: {
+                                color: '#ef5a78'
+                            }
+                        }, {
+                            name: 'Jasmine',
+                            value: 1,
+                            itemStyle: {
+                                color: '#f7f1bd'
+                            }
+                        }]
+                    }]
+                },
+                    {
+                    name: 'Fruity',
+                    itemStyle: {
+                        color: '#da1d23'
+                    },
+                    children: [{
+                        name: 'Berry',
+                        itemStyle: {
+                            color: '#dd4c51'
+                        },
+                        children: [{
+                            name: 'Blackberry',
+                            value: 1,
+                            itemStyle: {
+                                color: '#3e0317'
+                            }
+                        }, {
+                            name: 'Raspberry',
+                            value: 1,
+                            itemStyle: {
+                                color: '#e62969'
+                            }
+                        }, {
+                            name: 'Blueberry',
+                            value: 1,
+                            itemStyle: {
+                                color: '#6569b0'
+                            }
+                        }, {
+                            name: 'Strawberry',
+                            value: 1,
+                            itemStyle: {
+                                color: '#ef2d36'
+                            }
+                        }]
+                    }, {
+                        name: 'Dried Fruit',
+                        itemStyle: {
+                            color: '#c94a44'
+                        },
+                        children: [{
+                            name: 'Raisin',
+                            value: 1,
+                            itemStyle: {
+                                color: '#b53b54'
+                            }
+                        }, {
+                            name: 'Prune',
+                            value: 1,
+                            itemStyle: {
+                                color: '#a5446f'
+                            }
+                        }]
+                    }, {
+                        name: 'Other Fruit',
+                        itemStyle: {
+                            color: '#dd4c51'
+                        },
+                        children: [{
+                            name: 'Coconut',
+                            value: 1,
+                            itemStyle: {
+                                color: '#f2684b'
+                            }
+                        }, {
+                            name: 'Cherry',
+                            value: 1,
+                            itemStyle: {
+                                color: '#e73451'
+                            }
+                        }, {
+                            name: 'Pomegranate',
+                            value: 1,
+                            itemStyle: {
+                                color: '#e65656'
+                            }
+                        }, {
+                            name: 'Pineapple',
+                            value: 1,
+                            itemStyle: {
+                                color: '#f89a1c'
+                            }
+                        }, {
+                            name: 'Grape',
+                            value: 1,
+                            itemStyle: {
+                                color: '#aeb92c'
+                            }
+                        }, {
+                            name: 'Apple',
+                            value: 1,
+                            itemStyle: {
+                                color: '#4eb849'
+                            }
+                        }, {
+                            name: 'Peach',
+                            value: 1,
+                            itemStyle: {
+                                color: '#f68a5c'
+                            }
+                        }, {
+                            name: 'Pear',
+                            value: 1,
+                            itemStyle: {
+                                color: '#baa635'
+                            }
+                        }]
+                    }, {
+                        name: 'Citrus Fruit',
+                        itemStyle: {
+                            color: '#f7a128'
+                        },
+                        children: [{
+                            name: 'Grapefruit',
+                            value: 1,
+                            itemStyle: {
+                                color: '#f26355'
+                            }
+                        }, {
+                            name: 'Orange',
+                            value: 1,
+                            itemStyle: {
+                                color: '#e2631e'
+                            }
+                        }, {
+                            name: 'Lemon',
+                            value: 1,
+                            itemStyle: {
+                                color: '#fde404'
+                            }
+                        }, {
+                            name: 'Lime',
+                            value: 1,
+                            itemStyle: {
+                                color: '#7eb138'
+                            }
+                        }]
+                    }]
+                },
+                    {
+                    name: 'Other',
+                    itemStyle: {
+                        color: '#0aa3b5'
+                    },
+                    children: [{
+                        name: 'Papery/Musty',
+                        itemStyle: {
+                            color: '#9db2b7'
+                        },
+                        children: [{
+                            name: 'Stale',
+                            value: 1,
+                            itemStyle: {
+                                color: '#8b8c90'
+                            }
+                        }, {
+                            name: 'Cardboard',
+                            value: 1,
+                            itemStyle: {
+                                color: '#beb276'
+                            }
+                        }, {
+                            name: 'Papery',
+                            value: 1,
+                            itemStyle: {
+                                color: '#fefef4'
+                            }
+                        }, {
+                            name: 'Woody',
+                            value: 1,
+                            itemStyle: {
+                                color: '#744e03'
+                            }
+                        }, {
+                            name: 'Moldy/Damp',
+                            value: 1,
+                            itemStyle: {
+                                color: '#a3a36f'
+                            }
+                        }, {
+                            name: 'Musty/Dusty',
+                            value: 1,
+                            itemStyle: {
+                                color: '#c9b583'
+                            }
+                        }, {
+                            name: 'Musty/Earthy',
+                            value: 1,
+                            itemStyle: {
+                                color: '#978847'
+                            }
+                        }, {
+                            name: 'Animalic',
+                            value: 1,
+                            itemStyle: {
+                                color: '#9d977f'
+                            }
+                        }, {
+                            name: 'Meaty Brothy',
+                            value: 1,
+                            itemStyle: {
+                                color: '#cc7b6a'
+                            }
+                        }, {
+                            name: 'Phenolic',
+                            value: 1,
+                            itemStyle: {
+                                color: '#db646a'
+                            }
+                        }]
+                    }, {
+                        name: 'Chemical',
+                        itemStyle: {
+                            color: '#76c0cb'
+                        },
+                        children: [{
+                            name: 'Bitter',
+                            value: 1,
+                            itemStyle: {
+                                color: '#80a89d'
+                            }
+                        }, {
+                            name: 'Salty',
+                            value: 1,
+                            itemStyle: {
+                                color: '#def2fd'
+                            }
+                        }, {
+                            name: 'Medicinal',
+                            value: 1,
+                            itemStyle: {
+                                color: '#7a9bae'
+                            }
+                        }, {
+                            name: 'Petroleum',
+                            value: 1,
+                            itemStyle: {
+                                color: '#039fb8'
+                            }
+                        }, {
+                            name: 'Skunky',
+                            value: 1,
+                            itemStyle: {
+                                color: '#5e777b'
+                            }
+                        }, {
+                            name: 'Rubber',
+                            value: 1,
+                            itemStyle: {
+                                color: '#120c0c'
+                            }
+                        }]
+                    }]
+                },
+                ]
+            }
+        },
+        mounted() {
+            this.initChart()
+            /* this.__resizeHandler = debounce(() => {
+                 if (this.chart) {
+                     this.chart.resize()
+                 }
+             }, 100)
+             window.addEventListener('resize', this.__resizeHandler)*/
+        },
+        beforeDestroy() {
+            if (!this.chart) {
+                return
+            }
+            // window.removeEventListener('resize', this.__resizeHandler)
+            this.chart.dispose()
+            this.chart = null
+        },
+        methods: {
+            initChart() {
+                this.chart = echarts.init(this.$el, 'macarons')
+
+                this.chart.setOption({
+
+                        series: {
+                            type: 'sunburst',
+                            highlightPolicy: 'ancestor',
+                            data: this.datas,
+                            radius: [0, '95%'],
+                            sort: null,
+                            levels: [{}, {
+                                r0: '15%',
+                                r: '35%',
+                                itemStyle: {
+                                    borderWidth: 2
+                                },
+                                label: {
+                                    rotate: 'tangential'
+                                }
+                            }, {
+                                r0: '35%',
+                                r: '70%',
+                                label: {
+                                    align: 'right'
+                                }
+                            }, {
+                                r0: '70%',
+                                r: '72%',
+                                label: {
+                                    position: 'outside',
+                                    padding: 3,
+                                    silent: false
+                                },
+                                itemStyle: {
+                                    borderWidth: 3
+                                }
+                            }]
+                        },
+                animationDuration: animationDuration
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

web/src/view/dashboard/component/musicPlayer.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div style="width: 100%">
+            <APlayer :audio="audio"></APlayer>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { APlayer } from '@moefe/vue-aplayer';
+    export default {
+        name: "musicPlayer",
+        components:{
+            APlayer
+        },
+        data(){
+            return {
+                audio :[
+                    {
+                        name: '东西（Cover：林俊呈）',
+                        artist: '纳豆',
+                        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
+                        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
+                        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
+                    },
+                    {
+                        name: '响喜乱舞（Cover：MARiA）',
+                        artist: '泠鸢yousa',
+                        url: 'https://cdn.moefe.org/music/mp3/kyoukiranbu.mp3',
+                        cover: 'https://p1.music.126.net/AUGVPQ_rVrngDH9ocQrn3Q==/109951163613037822.jpg?param=300y300', // prettier-ignore
+                        lrc: 'https://cdn.moefe.org/music/lrc/kyoukiranbu.lrc',
+                    },
+                    {
+                        name: '啵唧',
+                        artist: 'Hanser',
+                        url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
+                        cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
+                        lrc: 'https://cdn.moefe.org/music/lrc/kiss.lrc',
+                    },
+                ]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

web/src/view/dashboard/component/stackMap.vue

@@ -0,0 +1,167 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+    import echarts from 'echarts'
+    require('echarts/theme/macarons') // echarts theme
+
+    const animationDuration = 3000
+
+    export default {
+        name: "stackMap",
+        props: {
+            className: {
+                type: String,
+                default: 'chart'
+            },
+            width: {
+                type: String,
+                default: '100%'
+            },
+            height: {
+                type: String,
+                default: '300px'
+            }
+        },
+        data() {
+            return {
+                chart: null
+            }
+        },
+        mounted() {
+            this.initChart()
+            /* this.__resizeHandler = debounce(() => {
+                 if (this.chart) {
+                     this.chart.resize()
+                 }
+             }, 100)
+             window.addEventListener('resize', this.__resizeHandler)*/
+        },
+        beforeDestroy() {
+            if (!this.chart) {
+                return
+            }
+            // window.removeEventListener('resize', this.__resizeHandler)
+            this.chart.dispose()
+            this.chart = null
+        },
+        methods: {
+            initChart() {
+                this.chart = echarts.init(this.$el, 'light')
+
+                this.chart.setOption({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                        }
+                    },
+                    legend: {
+                        data: ['Javascript', 'Java', 'Python', 'Ruby', 'PHP']
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
+                                fontSize : 12     //更改坐标轴文字大小
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLine:{
+                            lineStyle:{
+                                color:'rgb(192,192,192)' //更改坐标轴颜色
+                            }
+                        },
+                    },
+                    yAxis: {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
+                                fontSize: 12     //更改坐标轴文字大小
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: 'rgb(192,192,192)' //更改坐标轴颜色
+                            }
+                        }
+                    },
+                    series: [
+                        {
+                            name: 'Javascript',
+                            type: 'bar',
+                            stack: '总量',
+                            label: {
+                                show: true,
+                                position: 'insideRight'
+                            },
+                            data: [320, 302, 301, 334, 390, 330, 320]
+                        },
+                        {
+                            name: 'Java',
+                            type: 'bar',
+                            stack: '总量',
+                            label: {
+                                show: true,
+                                position: 'insideRight'
+                            },
+                            data: [120, 132, 101, 134, 90, 230, 210]
+                        },
+                        {
+                            name: 'Python',
+                            type: 'bar',
+                            stack: '总量',
+                            label: {
+                                show: true,
+                                position: 'insideRight'
+                            },
+                            data: [220, 182, 191, 234, 290, 330, 310]
+                        },
+                        {
+                            name: 'Ruby',
+                            type: 'bar',
+                            stack: '总量',
+                            label: {
+                                show: true,
+                                position: 'insideRight'
+                            },
+                            data: [150, 212, 201, 154, 190, 330, 410]
+                        },
+                        {
+                            name: 'PHP',
+                            type: 'bar',
+                            stack: '总量',
+                            label: {
+                                show: true,
+                                position: 'insideRight'
+                            },
+                            data: [820, 832, 901, 934, 1290, 1330, 1320]
+                        }
+                    ],
+                    animationDuration: animationDuration
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

web/src/view/dashboard/component/todoList/Todo.vue

@@ -0,0 +1,81 @@
+<template>
+    <li :class="{ completed: todo.done, editing: editing }" class="todo">
+        <div class="view">
+            <input
+                    :checked="todo.done"
+                    class="toggle"
+                    type="checkbox"
+                    @change="toggleTodo( todo)"
+            >
+            <label @dblclick="editing = true" v-text="todo.text" />
+            <button class="destroy" @click="deleteTodo( todo )" />
+        </div>
+        <input
+                v-show="editing"
+                v-focus="editing"
+                :value="todo.text"
+                class="edit"
+                @keyup.enter="doneEdit"
+                @keyup.esc="cancelEdit"
+                @blur="doneEdit"
+        >
+    </li>
+</template>
+
+<script>
+    export default {
+        name: 'Todo',
+        directives: {
+            focus(el, { value }, { context }) {
+                if (value) {
+                    context.$nextTick(() => {
+                        el.focus()
+                    })
+                }
+            }
+        },
+        props: {
+            todo: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            }
+        },
+        data() {
+            return {
+                editing: false
+            }
+        },
+        methods: {
+            deleteTodo(todo) {
+                this.$emit('deleteTodo', todo)
+            },
+            editTodo({ todo, value }) {
+                this.$emit('editTodo', { todo, value })
+            },
+            toggleTodo(todo) {
+                this.$emit('toggleTodo', todo)
+            },
+            doneEdit(e) {
+                const value = e.target.value.trim()
+                const { todo } = this
+                if (!value) {
+                    this.deleteTodo({
+                        todo
+                    })
+                } else if (this.editing) {
+                    this.editTodo({
+                        todo,
+                        value
+                    })
+                    this.editing = false
+                }
+            },
+            cancelEdit(e) {
+                e.target.value = this.todo.text
+                this.editing = false
+            }
+        }
+    }
+</script>

web/src/view/dashboard/component/todoList/index.vue

@@ -0,0 +1,127 @@
+<template>
+    <section class="todoapp">
+        <!-- header -->
+        <header class="header">
+            <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
+        </header>
+        <!-- main section -->
+        <section v-show="todos.length" class="main">
+            <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+            <label for="toggle-all" />
+            <ul class="todo-list">
+                <todo
+                        v-for="(todo, index) in filteredTodos"
+                        :key="index"
+                        :todo="todo"
+                        @toggleTodo="toggleTodo"
+                        @editTodo="editTodo"
+                        @deleteTodo="deleteTodo"
+                />
+            </ul>
+        </section>
+        <!-- footer -->
+        <footer v-show="todos.length" class="footer">
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        {{ remaining | pluralize('item') }} left
+      </span>
+            <ul class="filters">
+                <li v-for="(val, key) in filters" :key="key">
+                    <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
+                </li>
+            </ul>
+            <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+              Clear completed
+            </button> -->
+        </footer>
+    </section>
+</template>
+
+<script>
+    import Todo from './Todo.vue'
+
+    const STORAGE_KEY = 'todos'
+    const filters = {
+        all: todos => todos,
+        active: todos => todos.filter(todo => !todo.done),
+        completed: todos => todos.filter(todo => todo.done)
+    }
+    const defalutList = [
+        { text: 'star this repository', done: false },
+        { text: 'fork this repository', done: false },
+        { text: 'follow author', done: false },
+        { text: 'vue-element-admin', done: true },
+        { text: 'vue', done: true },
+        { text: 'element-ui', done: true },
+        { text: 'axios', done: true },
+        { text: 'webpack', done: true }
+    ]
+    export default {
+        components: { Todo },
+        filters: {
+            pluralize: (n, w) => n === 1 ? w : w + 's',
+            capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+        },
+        data() {
+            return {
+                visibility: 'all',
+                filters,
+                // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+                todos: defalutList
+            }
+        },
+        computed: {
+            allChecked() {
+                return this.todos.every(todo => todo.done)
+            },
+            filteredTodos() {
+                return filters[this.visibility](this.todos)
+            },
+            remaining() {
+                return this.todos.filter(todo => !todo.done).length
+            }
+        },
+        methods: {
+            setLocalStorage() {
+                window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+            },
+            addTodo(e) {
+                const text = e.target.value
+                if (text.trim()) {
+                    this.todos.push({
+                        text,
+                        done: false
+                    })
+                    this.setLocalStorage()
+                }
+                e.target.value = ''
+            },
+            toggleTodo(val) {
+                val.done = !val.done
+                this.setLocalStorage()
+            },
+            deleteTodo(todo) {
+                this.todos.splice(this.todos.indexOf(todo), 1)
+                this.setLocalStorage()
+            },
+            editTodo({ todo, value }) {
+                todo.text = value
+                this.setLocalStorage()
+            },
+            clearCompleted() {
+                this.todos = this.todos.filter(todo => !todo.done)
+                this.setLocalStorage()
+            },
+            toggleAll({ done }) {
+                this.todos.forEach(todo => {
+                    todo.done = done
+                    this.setLocalStorage()
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    /*@import './index.scss';*/
+</style>

web/src/view/dashboard/index.vue

@@ -1,48 +1,204 @@
 <template>
-  <div>
-    <h2 style="text-align:center">gin-vue-admin by 奇淼 And krank666</h2>
-    <h2 style="text-align:center;margin:15px">点击动画获取联系方式</h2>
+ <div class="big">
+     <div class="mid">
+         <el-row :gutter="32">
+             <el-col :xs="24" :sm="24" :lg="8">
+                 <div class="chart-wrapper">
+                     <raddar-chart />
+                 </div>
+             </el-col>
+             <el-col :xs="24" :sm="24" :lg="8">
+                 <div class="chart-wrapper">
+                     <stackMap />
+                 </div>
+             </el-col>
+             <el-col :xs="24" :sm="24" :lg="8">
+                 <div class="chart-wrapper">
+                     <Sunburst/>
+                 </div>
+             </el-col>
+         </el-row>
+     </div>
+     <div class="top">
+         <div id="main" class="chart-container"></div>
+     </div>
+     <div class="bottom">
+         <el-row :gutter="32">
+             <el-col :xs="24" :sm="24" :lg="12">
+                 <div class="chart-player">
+                     <musicPlayer />
+                 </div>
+             </el-col>
+             <el-col :xs="24" :sm="24" :lg="12">
+                 <div  style="background:pink;">
+                 </div>
+             </el-col>
+         </el-row>
+     </div>
+ </div>
 
-    <el-drawer
-      :visible.sync="drawer"
-      title="联系方式"
-    >
-      <div style="text-align:center;margin-top:30px;">
-        <img src="http://qmplusimg.henrongyi.top/yx.jpg" width="180" />
-        <H3>krank666微信</H3>
-      </div>
-      <div style="text-align:center;margin-top:30px;">
-        <img src="http://qmplusimg.henrongyi.top/jjz.jpg" width="180" />
-        <H3>Mr.奇淼微信</H3>
-      </div>
-    </el-drawer>
-    <div @click="drawer = true">
-      <Animition />
-    </div>
-    <h2 style="text-align:right;margin:40px;">
-      当前版本号：v0.1.0
-    </h2>
-  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Animition from '@/view/dashboard/component/animition.vue'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import RaddarChart from "./component/RaddarChart"
+import stackMap from "./component/stackMap"
+import Sunburst from "./component/Sunburst"
+import musicPlayer from "./component/musicPlayer"
 export default {
   name: 'Dashboard',
   data() {
     return {
-      drawer: false
+
     }
   },
-  computed: {
-    ...mapGetters('user', ['userInfo'])
-  },
-  components: {
-    Animition
+    components:{
+        RaddarChart, //雷达图
+        stackMap, //堆叠图
+        Sunburst, //旭日图
+        musicPlayer  //音乐播放器
+    },
+  mounted() {
+      let myChart = echarts.init(document.getElementById('main'),'macarons');
+      // let stackMap = echarts.init(document.getElementById('stackMap'));
+      let  option = {
+          legend: {},
+          tooltip: {
+              trigger: 'axis',
+              showContent: false
+          },
+          dataset: {
+              source: [
+                  ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
+                  ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
+                  ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
+                  ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
+                  ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
+              ]
+          },
+          xAxis: {
+              type: 'category',
+              axisLabel: {
+                  show: true,
+                  textStyle: {
+                      color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
+                      fontSize : 14    //更改坐标轴文字大小
+                  }
+              },
+              axisTick: {
+                  show: false
+              },
+              axisLine:{
+                  lineStyle:{
+                      color:'rgb(192,192,192)' //更改坐标轴颜色
+                  }
+              },
+          },
+          yAxis: {
+              gridIndex:0,
+              axisLabel: {
+                  show: true,
+                  textStyle: {
+                      color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
+                      fontSize: 14    //更改坐标轴文字大小
+                  }
+              },
+              axisTick: {
+                  show: false
+              },
+              axisLine: {
+                  lineStyle: {
+                      color: 'rgb(192,192,192)' //更改坐标轴颜色
+                  }
+              }
+          },
+          grid: {top: '55%'},
+          series: [
+              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+              {
+                  type: 'pie',
+                  id: 'pie',
+                  radius: '30%',
+                  center: ['50%', '25%'],
+                  label: {
+                      formatter: '{b}: {@2012} ({d}%)'
+                  },
+                  encode: {
+                      itemName: 'product',
+                      value: '2012',
+                      tooltip: '2012'
+                  }
+              }
+          ]
+      };
+      //点记标记点时的动效
+      myChart.on('updateAxisPointer', function (event) {
+          var xAxisInfo = event.axesInfo[0];
+          if (xAxisInfo) {
+              var dimension = xAxisInfo.value + 1;
+              myChart.setOption({
+                  series: {
+                      id: 'pie',
+                      label: {
+                          formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+                      },
+                      encode: {
+                          value: dimension,
+                          tooltip: dimension
+                      }
+                  }
+              });
+          }
+      });
+
+      window.addEventListener('resize',function() {myChart.resize()});
+      myChart.setOption(option);
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-</style>
+    .big{
+        width: 100%;
+        .top{
+            width: 98%;
+            height: 360px;
+            margin-top: 20px;
+            overflow: hidden;
+            .chart-container{
+                position: relative;
+                width: 100%;
+                height: 100%;
+                padding: 20px;
+                background-color: #fff;
+            }
+        }
+        .mid{
+            width: 98%;
+            height: 380px;
+            .chart-wrapper {
+                height: 340px;
+                background: #fff;
+                padding: 16px 16px 0;
+                margin-bottom: 32px;
+            }
+        }
+        .bottom{
+            width: 98%;
+            height: 230px;
+            margin-top: 20px;
+            .chart-player{
+                width: 100%;
+                height: 100%;
+                padding: 20px;
+                background-color: #fff;
+            }
+        }
+    }
+
+</style>

web/src/view/layout/index.vue

@@ -60,10 +60,10 @@
               </div>
             </el-dialog>
           </div>
-      
+
         </el-header>
         <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-        <!-- 
+        <!--
         :to="{ path: item.path }" 暂时注释不用-->
         <HistoryComponent />
         <transition mode="out-in" name="el-fade-in-linear">
@@ -114,7 +114,7 @@ export default {
           }
         ]
       },
-      
+
     }
   },
   components: {
@@ -216,6 +216,9 @@ $mainHight: 100vh;
 .dropdown-group {
   min-width: 100px;
 }
+.admin-box{
+  background-color: rgb(243,243,243);
+}
 .el-scrollbar__wrap {
   padding-bottom: 17px;
 }
@@ -318,4 +321,4 @@ $mainHight: 100vh;
     }
   }
 }
-</style>
+</style>