Skip to content

G
gin-vue-admin

HeliosJ / gin-vue-admin
与 Fork 源项目一致

Fork自 FLIPPED-AURORA / gin-vue-admin

通知 4
Star 0
Fork 0
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 74aff3ac 编写于 作者: K klausY
浏览文件
操作

首页美化

上级 8f7113f1
隐藏空白更改
内联 并排
Showing with 1185 addition and 41 deletion
server/config.yaml
浏览文件 @ 74aff3ac
......@@ -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
浏览文件 @ 74aff3ac
......@@ -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=="
}
}
}
\ No newline at end of file
}
web/package.json
浏览文件 @ 74aff3ac
......@@ -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
浏览文件 @ 74aff3ac
......@@ -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')
\ No newline at end of file
}).$mount('#app')
//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
web/src/view/dashboard/component/RaddarChart.vue 0 → 100644
浏览文件 @ 74aff3ac
<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 → 100644
浏览文件 @ 74aff3ac
<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 → 100644
浏览文件 @ 74aff3ac
<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 → 100644
浏览文件 @ 74aff3ac
<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 → 100644
浏览文件 @ 74aff3ac
<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 → 100644
浏览文件 @ 74aff3ac
<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
浏览文件 @ 74aff3ac
<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>
\ No newline at end of file
.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
浏览文件 @ 74aff3ac
......@@ -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>
\ No newline at end of file
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或