mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-05 11:18:42 +08:00
Merge ca8035fa98c7c48e229ca0e5380c7aed2d297bae into 6858a9ad67483025f6a9432a926beb9327037be3
This commit is contained in:
yayalif
GitHub
commit
99dba28efb
@ -1,16 +1,41 @@
|
||||
const Mock = require('mockjs')
|
||||
const Random = Mock.Random;
|
||||
|
||||
const List = []
|
||||
const count = 100
|
||||
|
||||
const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
|
||||
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
// List.push(Mock.mock({
|
||||
// id: '@increment',
|
||||
// timestamp: +Mock.Random.date('T'),
|
||||
// author: '@first',
|
||||
// reviewer: '@first',
|
||||
// title: '@title(5, 10)',
|
||||
// content_short: 'mock data',
|
||||
// content: baseContent,
|
||||
// forecast: '@float(0, 100, 2, 2)',
|
||||
// importance: '@integer(1, 3)',
|
||||
// 'type|1': ['CN', 'US', 'JP', 'EU'],
|
||||
// 'status|1': ['published', 'draft'],
|
||||
// display_time: '@datetime',
|
||||
// comment_disabled: true,
|
||||
// pageviews: '@integer(300, 5000)',
|
||||
// image_uri,
|
||||
// platforms: ['a-platform']
|
||||
// }))
|
||||
List.push(Mock.mock({
|
||||
id: '@increment',
|
||||
timestamp: +Mock.Random.date('T'),
|
||||
author: '@first',
|
||||
'location|1': ['丰县', '沛县', '睢宁县', '云龙区', '鼓楼区', '泉山区', '铜山区', '贾汪区'],
|
||||
'name|1': ['拖拉机', '无人机', '推土机', '抽水机', '除草机器人'],
|
||||
PurchaseDate: '@datetime',
|
||||
'state|1': ['使用中', '维修中', '未使用', '已报废'],
|
||||
'brand': '@id',
|
||||
description: Random.sentence(),
|
||||
owner: '@cname',
|
||||
reviewer: '@first',
|
||||
title: '@title(5, 10)',
|
||||
content_short: 'mock data',
|
||||
|
||||
14
package.json
14
package.json
@ -15,10 +15,14 @@
|
||||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.21.0",
|
||||
"@toast-ui/editor": "^3.1.3",
|
||||
"axios": "0.18.1",
|
||||
"body-parser": "^1.20.2",
|
||||
"cache-loader": "^4.1.0",
|
||||
"clipboard": "2.0.4",
|
||||
"codemirror": "5.45.0",
|
||||
"core-js": "3.6.5",
|
||||
"core-js": "^3.29.0",
|
||||
"driver.js": "0.9.5",
|
||||
"dropzone": "5.5.1",
|
||||
"echarts": "4.2.1",
|
||||
@ -31,19 +35,22 @@
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"regenerator-runtime": "^0.13.11",
|
||||
"screenfull": "4.2.0",
|
||||
"script-loader": "0.7.2",
|
||||
"sortablejs": "1.8.4",
|
||||
"tui-editor": "1.3.3",
|
||||
"svg-baker-runtime": "^1.4.7",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0",
|
||||
"xlsx": "0.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "^7.21.0",
|
||||
"@vue/cli-plugin-babel": "4.4.4",
|
||||
"@vue/cli-plugin-eslint": "4.4.4",
|
||||
"@vue/cli-plugin-unit-jest": "4.4.4",
|
||||
@ -70,7 +77,8 @@
|
||||
"serve-static": "1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.0",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
"vue-template-compiler": "2.6.10",
|
||||
"webpack": "^4.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@ -4,13 +4,18 @@
|
||||
|
||||
<script>
|
||||
// deps for editor
|
||||
import 'codemirror/lib/codemirror.css' // codemirror
|
||||
import 'tui-editor/dist/tui-editor.css' // editor ui
|
||||
import 'tui-editor/dist/tui-editor-contents.css' // editor content
|
||||
// import 'codemirror/lib/codemirror.css' // codemirror
|
||||
// import 'tui-editor/dist/tui-editor.css' // editor ui
|
||||
// import 'tui-editor/dist/tui-editor-contents.css' // editor content
|
||||
|
||||
import Editor from 'tui-editor'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import '@toast-ui/editor/dist/toastui-editor.css'
|
||||
import Editor from '@toast-ui/editor'
|
||||
import defaultOptions from './default-options'
|
||||
|
||||
// import Editor from 'tui-editor'
|
||||
// import defaultOptions from './default-options'
|
||||
|
||||
export default {
|
||||
name: 'MarkdownEditor',
|
||||
props: {
|
||||
@ -101,10 +106,10 @@ export default {
|
||||
this.editor.off('change')
|
||||
this.editor.remove()
|
||||
},
|
||||
setValue(value) {
|
||||
setMarkdown(value) {
|
||||
this.editor.setValue(value)
|
||||
},
|
||||
getValue() {
|
||||
getMarkdown() {
|
||||
return this.editor.getValue()
|
||||
},
|
||||
setHtml(value) {
|
||||
|
||||
@ -7,7 +7,7 @@ Vue.use(Router)
|
||||
import Layout from '@/layout'
|
||||
|
||||
/* Router Modules */
|
||||
import componentsRouter from './modules/components'
|
||||
// import componentsRouter from './modules/components'
|
||||
import chartsRouter from './modules/charts'
|
||||
import tableRouter from './modules/table'
|
||||
import nestedRouter from './modules/nested'
|
||||
@ -79,49 +79,49 @@ export const constantRoutes = [
|
||||
path: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/documentation/index'),
|
||||
name: 'Documentation',
|
||||
meta: { title: 'Documentation', icon: 'documentation', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/guide',
|
||||
component: Layout,
|
||||
redirect: '/guide/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/guide/index'),
|
||||
name: 'Guide',
|
||||
meta: { title: 'Guide', icon: 'guide', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
component: Layout,
|
||||
redirect: '/profile/index',
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/profile/index'),
|
||||
name: 'Profile',
|
||||
meta: { title: 'Profile', icon: 'user', noCache: true }
|
||||
meta: { title: '实时监控', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
// {
|
||||
// path: '/documentation',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/documentation/index'),
|
||||
// name: 'Documentation',
|
||||
// meta: { title: 'Documentation', icon: 'documentation', affix: true }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: '/guide',
|
||||
// component: Layout,
|
||||
// redirect: '/guide/index',
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/guide/index'),
|
||||
// name: 'Guide',
|
||||
// meta: { title: 'Guide', icon: 'guide', noCache: true }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: '/profile',
|
||||
// component: Layout,
|
||||
// redirect: '/profile/index',
|
||||
// hidden: true,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/profile/index'),
|
||||
// name: 'Profile',
|
||||
// meta: { title: 'Profile', icon: 'user', noCache: true }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
|
||||
/**
|
||||
@ -129,149 +129,149 @@ export const constantRoutes = [
|
||||
* the routes that need to be dynamically loaded based on user roles
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
{
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/page',
|
||||
alwaysShow: true, // will always show the root menu
|
||||
name: 'Permission',
|
||||
meta: {
|
||||
title: 'Permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'page',
|
||||
component: () => import('@/views/permission/page'),
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'Page Permission',
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'directive',
|
||||
component: () => import('@/views/permission/directive'),
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'Directive Permission'
|
||||
// if do not set roles, means: this page does not require permission
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
component: () => import('@/views/permission/role'),
|
||||
name: 'RolePermission',
|
||||
meta: {
|
||||
title: 'Role Permission',
|
||||
roles: ['admin']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/permission',
|
||||
// component: Layout,
|
||||
// redirect: '/permission/page',
|
||||
// alwaysShow: true, // will always show the root menu
|
||||
// name: 'Permission',
|
||||
// meta: {
|
||||
// title: 'Permission',
|
||||
// icon: 'lock',
|
||||
// roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'page',
|
||||
// component: () => import('@/views/permission/page'),
|
||||
// name: 'PagePermission',
|
||||
// meta: {
|
||||
// title: 'Page Permission',
|
||||
// roles: ['admin'] // or you can only set roles in sub nav
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: 'directive',
|
||||
// component: () => import('@/views/permission/directive'),
|
||||
// name: 'DirectivePermission',
|
||||
// meta: {
|
||||
// title: 'Directive Permission'
|
||||
// // if do not set roles, means: this page does not require permission
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: 'role',
|
||||
// component: () => import('@/views/permission/role'),
|
||||
// name: 'RolePermission',
|
||||
// meta: {
|
||||
// title: 'Role Permission',
|
||||
// roles: ['admin']
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/icon',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Icons',
|
||||
meta: { title: 'Icons', icon: 'icon', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/icon',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/icons/index'),
|
||||
// name: 'Icons',
|
||||
// meta: { title: 'Icons', icon: 'icon', noCache: true }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
/** when your routing map is too long, you can split it into small modules **/
|
||||
componentsRouter,
|
||||
// componentsRouter,
|
||||
chartsRouter,
|
||||
nestedRouter,
|
||||
tableRouter,
|
||||
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'Example',
|
||||
icon: 'el-icon-s-help'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'create',
|
||||
component: () => import('@/views/example/create'),
|
||||
name: 'CreateArticle',
|
||||
meta: { title: 'Create Article', icon: 'edit' }
|
||||
},
|
||||
{
|
||||
path: 'edit/:id(\\d+)',
|
||||
component: () => import('@/views/example/edit'),
|
||||
name: 'EditArticle',
|
||||
meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: () => import('@/views/example/list'),
|
||||
name: 'ArticleList',
|
||||
meta: { title: 'Article List', icon: 'list' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/example',
|
||||
// component: Layout,
|
||||
// redirect: '/example/list',
|
||||
// name: 'Example',
|
||||
// meta: {
|
||||
// title: 'Example',
|
||||
// icon: 'el-icon-s-help'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'create',
|
||||
// component: () => import('@/views/example/create'),
|
||||
// name: 'CreateArticle',
|
||||
// meta: { title: 'Create Article', icon: 'edit' }
|
||||
// },
|
||||
// {
|
||||
// path: 'edit/:id(\\d+)',
|
||||
// component: () => import('@/views/example/edit'),
|
||||
// name: 'EditArticle',
|
||||
// meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
|
||||
// hidden: true
|
||||
// },
|
||||
// {
|
||||
// path: 'list',
|
||||
// component: () => import('@/views/example/list'),
|
||||
// name: 'ArticleList',
|
||||
// meta: { title: 'Article List', icon: 'list' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/tab',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/tab/index'),
|
||||
name: 'Tab',
|
||||
meta: { title: 'Tab', icon: 'tab' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/tab',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/tab/index'),
|
||||
// name: 'Tab',
|
||||
// meta: { title: 'Tab', icon: 'tab' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/error',
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'ErrorPages',
|
||||
meta: {
|
||||
title: 'Error Pages',
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '401',
|
||||
component: () => import('@/views/error-page/401'),
|
||||
name: 'Page401',
|
||||
meta: { title: '401', noCache: true }
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: () => import('@/views/error-page/404'),
|
||||
name: 'Page404',
|
||||
meta: { title: '404', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/error',
|
||||
// component: Layout,
|
||||
// redirect: 'noRedirect',
|
||||
// name: 'ErrorPages',
|
||||
// meta: {
|
||||
// title: 'Error Pages',
|
||||
// icon: '404'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: '401',
|
||||
// component: () => import('@/views/error-page/401'),
|
||||
// name: 'Page401',
|
||||
// meta: { title: '401', noCache: true }
|
||||
// },
|
||||
// {
|
||||
// path: '404',
|
||||
// component: () => import('@/views/error-page/404'),
|
||||
// name: 'Page404',
|
||||
// meta: { title: '404', noCache: true }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/error-log',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'log',
|
||||
component: () => import('@/views/error-log/index'),
|
||||
name: 'ErrorLog',
|
||||
meta: { title: 'Error Log', icon: 'bug' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/error-log',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'log',
|
||||
// component: () => import('@/views/error-log/index'),
|
||||
// name: 'ErrorLog',
|
||||
// meta: { title: 'Error Log', icon: 'bug' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/excel',
|
||||
@ -279,7 +279,7 @@ export const asyncRoutes = [
|
||||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
meta: {
|
||||
title: 'Excel',
|
||||
title: '统计分析',
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
@ -287,101 +287,134 @@ export const asyncRoutes = [
|
||||
path: 'export-excel',
|
||||
component: () => import('@/views/excel/export-excel'),
|
||||
name: 'ExportExcel',
|
||||
meta: { title: 'Export Excel' }
|
||||
meta: { title: '云龙区' }
|
||||
},
|
||||
{
|
||||
path: 'export-selected-excel',
|
||||
component: () => import('@/views/excel/select-excel'),
|
||||
name: 'SelectExcel',
|
||||
meta: { title: 'Export Selected' }
|
||||
meta: { title: '鼓楼区' }
|
||||
},
|
||||
{
|
||||
path: 'export-merge-header',
|
||||
component: () => import('@/views/excel/merge-header'),
|
||||
name: 'MergeHeader',
|
||||
meta: { title: 'Merge Header' }
|
||||
meta: {
|
||||
title: '泉山区'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'upload-excel',
|
||||
component: () => import('@/views/excel/upload-excel'),
|
||||
name: 'UploadExcel',
|
||||
meta: { title: 'Upload Excel' }
|
||||
meta: {
|
||||
title: '铜山区'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'analysis-jiawang',
|
||||
component: () => import('@/views/excel/analysis-jiawang'),
|
||||
name: 'AnalyseJiaWang',
|
||||
meta: {
|
||||
title: '贾汪区'
|
||||
}
|
||||
}, {
|
||||
path: 'analysis-jiawang',
|
||||
component: () => import('@/views/excel/analysis-jiawang'),
|
||||
name: 'AnalyseJiaWang',
|
||||
meta: {
|
||||
title: '丰县'
|
||||
}
|
||||
}, {
|
||||
path: 'analysis-jiawang',
|
||||
component: () => import('@/views/excel/analysis-jiawang'),
|
||||
name: 'AnalyseJiaWang',
|
||||
meta: {
|
||||
title: '沛县'
|
||||
}
|
||||
}, {
|
||||
path: 'analysis-jiawang',
|
||||
component: () => import('@/views/excel/analysis-jiawang'),
|
||||
name: 'AnalyseJiaWang',
|
||||
meta: {
|
||||
title: '睢宁县'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/zip',
|
||||
component: Layout,
|
||||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
name: 'Zip',
|
||||
meta: { title: 'Zip', icon: 'zip' },
|
||||
children: [
|
||||
{
|
||||
path: 'download',
|
||||
component: () => import('@/views/zip/index'),
|
||||
name: 'ExportZip',
|
||||
meta: { title: 'Export Zip' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/zip',
|
||||
// component: Layout,
|
||||
// redirect: '/zip/download',
|
||||
// alwaysShow: true,
|
||||
// name: 'Zip',
|
||||
// meta: { title: 'Zip', icon: 'zip' },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'download',
|
||||
// component: () => import('@/views/zip/index'),
|
||||
// name: 'ExportZip',
|
||||
// meta: { title: 'Export Zip' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/pdf',
|
||||
component: Layout,
|
||||
redirect: '/pdf/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/pdf/index'),
|
||||
name: 'PDF',
|
||||
meta: { title: 'PDF', icon: 'pdf' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/pdf/download',
|
||||
component: () => import('@/views/pdf/download'),
|
||||
hidden: true
|
||||
},
|
||||
// {
|
||||
// path: '/pdf',
|
||||
// component: Layout,
|
||||
// redirect: '/pdf/index',
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/pdf/index'),
|
||||
// name: 'PDF',
|
||||
// meta: { title: 'PDF', icon: 'pdf' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: '/pdf/download',
|
||||
// component: () => import('@/views/pdf/download'),
|
||||
// hidden: true
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/theme',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/theme/index'),
|
||||
name: 'Theme',
|
||||
meta: { title: 'Theme', icon: 'theme' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/theme',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/theme/index'),
|
||||
// name: 'Theme',
|
||||
// meta: { title: 'Theme', icon: 'theme' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/clipboard',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/clipboard/index'),
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'Clipboard', icon: 'clipboard' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/clipboard',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// component: () => import('@/views/clipboard/index'),
|
||||
// name: 'ClipboardDemo',
|
||||
// meta: { title: 'Clipboard', icon: 'clipboard' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: 'external-link',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: 'external-link',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
// meta: { title: 'External Link', icon: 'link' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
|
||||
@ -8,7 +8,7 @@ const chartsRouter = {
|
||||
redirect: 'noRedirect',
|
||||
name: 'Charts',
|
||||
meta: {
|
||||
title: 'Charts',
|
||||
title: '历史轨迹',
|
||||
icon: 'chart'
|
||||
},
|
||||
children: [
|
||||
|
||||
@ -8,7 +8,7 @@ const nestedRouter = {
|
||||
redirect: '/nested/menu1/menu1-1',
|
||||
name: 'Nested',
|
||||
meta: {
|
||||
title: 'Nested Routes',
|
||||
title: '维修管理',
|
||||
icon: 'nested'
|
||||
},
|
||||
children: [
|
||||
|
||||
@ -8,33 +8,33 @@ const tableRouter = {
|
||||
redirect: '/table/complex-table',
|
||||
name: 'Table',
|
||||
meta: {
|
||||
title: 'Table',
|
||||
title: '作业任务',
|
||||
icon: 'table'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'dynamic-table',
|
||||
component: () => import('@/views/table/dynamic-table/index'),
|
||||
name: 'DynamicTable',
|
||||
meta: { title: 'Dynamic Table' }
|
||||
},
|
||||
{
|
||||
path: 'drag-table',
|
||||
component: () => import('@/views/table/drag-table'),
|
||||
name: 'DragTable',
|
||||
meta: { title: 'Drag Table' }
|
||||
},
|
||||
{
|
||||
path: 'inline-edit-table',
|
||||
component: () => import('@/views/table/inline-edit-table'),
|
||||
name: 'InlineEditTable',
|
||||
meta: { title: 'Inline Edit' }
|
||||
},
|
||||
// {
|
||||
// path: 'dynamic-table',
|
||||
// component: () => import('@/views/table/dynamic-table/index'),
|
||||
// name: 'DynamicTable',
|
||||
// meta: { title: 'Dynamic Table' }
|
||||
// },
|
||||
// {
|
||||
// path: 'drag-table',
|
||||
// component: () => import('@/views/table/drag-table'),
|
||||
// name: 'DragTable',
|
||||
// meta: { title: 'Drag Table' }
|
||||
// },
|
||||
// {
|
||||
// path: 'inline-edit-table',
|
||||
// component: () => import('@/views/table/inline-edit-table'),
|
||||
// name: 'InlineEditTable',
|
||||
// meta: { title: 'Inline Edit' }
|
||||
// },
|
||||
{
|
||||
path: 'complex-table',
|
||||
component: () => import('@/views/table/complex-table'),
|
||||
name: 'ComplexTable',
|
||||
meta: { title: 'Complex Table' }
|
||||
name: '仓库管理',
|
||||
meta: { title: '仓库管理' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -72,7 +72,6 @@
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
// fix date-picker ui bug in filter-item
|
||||
.el-range-editor.el-input__inner {
|
||||
display: inline-flex !important;
|
||||
|
||||
@ -61,18 +61,18 @@ export default {
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
|
||||
@ -68,7 +68,8 @@ export default {
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: 'date'
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
@ -87,13 +88,14 @@ export default {
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: 'hours'
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
data: ['used']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
name: 'used', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
@ -107,27 +109,28 @@ export default {
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
}
|
||||
// {
|
||||
// name: 'actual',
|
||||
// smooth: true,
|
||||
// type: 'line',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#3888fa',
|
||||
// lineStyle: {
|
||||
// color: '#3888fa',
|
||||
// width: 2
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: '#f3f8ff'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: actualData,
|
||||
// animationDuration: 2800,
|
||||
// animationEasing: 'quadraticOut'
|
||||
// }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,53 +2,57 @@
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
<div class="card-panel-icon-wrapper">
|
||||
拖拉机
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
New Visits
|
||||
使用中/总数
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="102" :duration="2600" class="card-panel-num" />/
|
||||
<count-to :start-val="0" :end-val="322" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
<div class="card-panel-icon-wrapper">
|
||||
无人机
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Messages
|
||||
使用中/总数
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="12" :duration="2600" class="card-panel-num" />/
|
||||
<count-to :start-val="0" :end-val="22" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
<div class="card-panel-icon-wrapper">
|
||||
推土机
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Purchases
|
||||
使用中/总数
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="282" :duration="2600" class="card-panel-num" />/
|
||||
<count-to :start-val="0" :end-val="299" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
<div class="card-panel-icon-wrapper">
|
||||
抽水机
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Shoppings
|
||||
使用中/总数
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="32" :duration="2600" class="card-panel-num" />/
|
||||
<count-to :start-val="0" :end-val="49" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -90,13 +94,13 @@ export default {
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
// .card-panel-icon-wrapper {
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
}
|
||||
// .icon-people {
|
||||
// background: #40c9c6;
|
||||
// }
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
@ -129,8 +133,12 @@ export default {
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
font-weight: bold;
|
||||
// margin: 14px 0 0 14px;
|
||||
font-size: 20px;
|
||||
padding: 16px;
|
||||
height:100%;
|
||||
line-height: 70px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -47,6 +47,10 @@ export default {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '云龙区农机使用统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
@ -68,18 +72,18 @@ export default {
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Technology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
{ name: '拖拉机', max: 10000 },
|
||||
{ name: '推土机', max: 20000 },
|
||||
{ name: '挖掘机', max: 20000 },
|
||||
{ name: '无人机', max: 20000 },
|
||||
{ name: '收割机', max: 20000 },
|
||||
{ name: '抽水机', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
data: ['全市使用时长', '该区使用时长']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
@ -94,17 +98,17 @@ export default {
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
// {
|
||||
// value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
// name: 'Allocated Budget'
|
||||
// },
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
name: '全市使用时长'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
name: '该区使用时长'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner class="github-corner" />
|
||||
<!--<github-corner class="github-corner" />-->
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
@ -9,17 +9,19 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<el-col :span="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<!--
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
-->
|
||||
<el-col :span="16">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
@ -41,11 +43,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
// import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
// import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
@ -73,11 +75,11 @@ const lineChartData = {
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
// GithubCorner,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
// PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
|
||||
90
src/views/excel/analysis-jiawang.vue
Normal file
90
src/views/excel/analysis-jiawang.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
<el-row :gutter="32">
|
||||
<el-col :span="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import GithubCorner from '@/components/GithubCorner'
|
||||
// import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
// import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
// import TransactionTable from './components/TransactionTable'
|
||||
// import TodoList from './components/TodoList'
|
||||
// import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AnalyseJiaWang',
|
||||
components: {
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
// PieChart,
|
||||
BarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
src/views/excel/components/BarChart.vue
Normal file
111
src/views/excel/components/BarChart.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
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.chart.setOption({
|
||||
title: {
|
||||
text: '2023年3月'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
// Try 'horizontal'
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center'
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
data: ['拖拉机', '抽水机', '无人机', '挖掘机', '收割机'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '使用量',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [179, 92, 200, 334, 390],
|
||||
animationDuration
|
||||
}, {
|
||||
name: '闲置量',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 12, 200, 334, 390],
|
||||
animationDuration
|
||||
}, {
|
||||
name: '故障量',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 2, 10, 24, 30],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
138
src/views/excel/components/LineChart.vue
Normal file
138
src/views/excel/components/LineChart.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
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(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
name: 'date'
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
name: 'hours'
|
||||
},
|
||||
legend: {
|
||||
data: ['used']
|
||||
},
|
||||
series: [{
|
||||
name: 'used', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
}
|
||||
// {
|
||||
// name: 'actual',
|
||||
// smooth: true,
|
||||
// type: 'line',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#3888fa',
|
||||
// lineStyle: {
|
||||
// color: '#3888fa',
|
||||
// width: 2
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: '#f3f8ff'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: actualData,
|
||||
// animationDuration: 2800,
|
||||
// animationEasing: 'quadraticOut'
|
||||
// }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
src/views/excel/components/PieChart.vue
Normal file
79
src/views/excel/components/PieChart.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
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.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
125
src/views/excel/components/RaddarChart.vue
Normal file
125
src/views/excel/components/RaddarChart.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
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')
|
||||
const option = {
|
||||
// color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
|
||||
title: {
|
||||
text: '2023年3月'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['全市使用时长', '该区使用时长']
|
||||
},
|
||||
radar: {
|
||||
splitNumber: 4,
|
||||
indicator: [
|
||||
{ name: '拖拉机', max: 500 },
|
||||
{ name: '推土机', max: 500 },
|
||||
{ name: '挖掘机', max: 500 },
|
||||
{ name: '无人机', max: 500 },
|
||||
{ name: '收割机', max: 500 },
|
||||
{ name: '抽水机', max: 500 }
|
||||
],
|
||||
center: ['50%', '50%'],
|
||||
radius: '66%',
|
||||
axisName: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#666',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [420, 470, 490, 460, 390, 470],
|
||||
name: '全市使用时长',
|
||||
symbol: 'rect',
|
||||
symbolSize: 12,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function(params) {
|
||||
return params.value
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: [40, 170, 110, 430, 210, 300],
|
||||
name: '该区使用时长',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
||||
{
|
||||
color: 'rgba(255, 145, 124, 0.1)',
|
||||
offset: 0
|
||||
},
|
||||
{
|
||||
color: 'rgba(255, 145, 124, 0.9)',
|
||||
offset: 1
|
||||
}
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function(params) {
|
||||
return params.value
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,116 +1,90 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<div>
|
||||
<FilenameOption v-model="filename" />
|
||||
<AutoWidthOption v-model="autoWidth" />
|
||||
<BookTypeOption v-model="bookType" />
|
||||
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
|
||||
Export Excel
|
||||
</el-button>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
|
||||
<el-tag type="info">Documentation</el-tag>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
|
||||
<el-table-column align="center" label="Id" width="95">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{ scope.row.author }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.pageviews }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Date" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time" />
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
<el-row :gutter="32">
|
||||
<el-col :span="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from '@/api/article'
|
||||
import { parseTime } from '@/utils'
|
||||
// options components
|
||||
import FilenameOption from './components/FilenameOption'
|
||||
import AutoWidthOption from './components/AutoWidthOption'
|
||||
import BookTypeOption from './components/BookTypeOption'
|
||||
// import GithubCorner from '@/components/GithubCorner'
|
||||
// import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
// import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
// import TransactionTable from './components/TransactionTable'
|
||||
// import TodoList from './components/TodoList'
|
||||
// import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ExportExcel',
|
||||
components: { FilenameOption, AutoWidthOption, BookTypeOption },
|
||||
components: {
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
// PieChart,
|
||||
BarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
downloadLoading: false,
|
||||
filename: '',
|
||||
autoWidth: true,
|
||||
bookType: 'xlsx'
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
fetchList().then(response => {
|
||||
this.list = response.data.items
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
|
||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||
const list = this.list
|
||||
const data = this.formatJson(filterVal, list)
|
||||
excel.export_json_to_excel({
|
||||
header: tHeader,
|
||||
data,
|
||||
filename: this.filename,
|
||||
autoWidth: this.autoWidth,
|
||||
bookType: this.bookType
|
||||
})
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.radio-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 30px;
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,9 +20,11 @@
|
||||
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
||||
Export
|
||||
</el-button>
|
||||
<!--
|
||||
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
|
||||
reviewer
|
||||
</el-checkbox>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
@ -40,42 +42,56 @@
|
||||
<span>{{ row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Date" width="150px" align="center">
|
||||
<el-table-column label="名称" width="110px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="购买日期" width="150px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title" min-width="150px">
|
||||
<el-table-column label="描述" width="110px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.description }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--
|
||||
<el-table-column label="描述" min-width="150px">
|
||||
<template slot-scope="{row}">
|
||||
<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
|
||||
<el-tag>{{ row.type | typeFilter }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="110px" align="center">
|
||||
-->
|
||||
<el-table-column label="负责人" width="110px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.author }}</span>
|
||||
<span>{{ row.owner }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
|
||||
<el-table-column label="位置" width="110px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span style="color:red;">{{ row.reviewer }}</span>
|
||||
<span>{{ row.location }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Imp" width="80px">
|
||||
<el-table-column label="品牌" width="80px">
|
||||
<template slot-scope="{row}">
|
||||
<svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
|
||||
<span>{{ row.brand }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--
|
||||
<el-table-column label="Readings" align="center" width="95">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
|
||||
<span v-else>0</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" class-name="status-col" width="100">
|
||||
-->
|
||||
<el-table-column label="状态" class-name="status-col" width="100">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
<el-tag :type="row.state | statusFilter">
|
||||
{{ row.state }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -84,12 +100,14 @@
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(row)">
|
||||
Edit
|
||||
</el-button>
|
||||
<!--
|
||||
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
|
||||
Publish
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
|
||||
Draft
|
||||
</el-button>
|
||||
-->
|
||||
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
|
||||
Delete
|
||||
</el-button>
|
||||
@ -170,11 +188,20 @@ export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
filters: {
|
||||
// statusFilter(status) {
|
||||
// const statusMap = {
|
||||
// published: 'success',
|
||||
// draft: 'info',
|
||||
// deleted: 'danger'
|
||||
// }
|
||||
// return statusMap[status]
|
||||
// },
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
'维修中': 'warning',
|
||||
'未使用': 'info',
|
||||
'使用中': 'success',
|
||||
'已报废': 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user