zetan-cli-dev-template-vue-element-admin 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +8 -0
- package/template/.editorconfig +14 -0
- package/template/.env.development +5 -0
- package/template/.env.production +6 -0
- package/template/.env.staging +8 -0
- package/template/.eslintignore +4 -0
- package/template/.eslintrc.js +198 -0
- package/template/.travis.yml +5 -0
- package/template/LICENSE +21 -0
- package/template/README.es.md +228 -0
- package/template/README.ja.md +224 -0
- package/template/README.md +250 -0
- package/template/README.zh-CN.md +273 -0
- package/template/babel.config.js +14 -0
- package/template/build/index.js +35 -0
- package/template/jest.config.js +24 -0
- package/template/jsconfig.json +9 -0
- package/template/mock/article.js +116 -0
- package/template/mock/index.js +60 -0
- package/template/mock/mock-server.js +81 -0
- package/template/mock/remote-search.js +51 -0
- package/template/mock/role/index.js +98 -0
- package/template/mock/role/routes.js +530 -0
- package/template/mock/user.js +84 -0
- package/template/mock/utils.js +48 -0
- package/template/package.json +111 -0
- package/template/plop-templates/component/index.hbs +26 -0
- package/template/plop-templates/component/prompt.js +55 -0
- package/template/plop-templates/store/index.hbs +16 -0
- package/template/plop-templates/store/prompt.js +62 -0
- package/template/plop-templates/utils.js +2 -0
- package/template/plop-templates/view/index.hbs +26 -0
- package/template/plop-templates/view/prompt.js +55 -0
- package/template/plopfile.js +9 -0
- package/template/postcss.config.js +5 -0
- package/template/public/favicon.ico +0 -0
- package/template/public/index.html +15 -0
- package/template/src/App.vue +11 -0
- package/template/src/api/article.js +41 -0
- package/template/src/api/qiniu.js +8 -0
- package/template/src/api/remote-search.js +17 -0
- package/template/src/api/role.js +38 -0
- package/template/src/api/user.js +24 -0
- package/template/src/assets/401_images/401.gif +0 -0
- package/template/src/assets/404_images/404.png +0 -0
- package/template/src/assets/404_images/404_cloud.png +0 -0
- package/template/src/assets/custom-theme/fonts/element-icons.ttf +0 -0
- package/template/src/assets/custom-theme/fonts/element-icons.woff +0 -0
- package/template/src/assets/custom-theme/index.css +1 -0
- package/template/src/components/BackToTop/index.vue +111 -0
- package/template/src/components/Breadcrumb/index.vue +82 -0
- package/template/src/components/Charts/Keyboard.vue +155 -0
- package/template/src/components/Charts/LineMarker.vue +227 -0
- package/template/src/components/Charts/MixChart.vue +271 -0
- package/template/src/components/Charts/mixins/resize.js +56 -0
- package/template/src/components/DndList/index.vue +166 -0
- package/template/src/components/DragSelect/index.vue +65 -0
- package/template/src/components/Dropzone/index.vue +297 -0
- package/template/src/components/ErrorLog/index.vue +78 -0
- package/template/src/components/GithubCorner/index.vue +54 -0
- package/template/src/components/Hamburger/index.vue +44 -0
- package/template/src/components/HeaderSearch/index.vue +180 -0
- package/template/src/components/ImageCropper/index.vue +1779 -0
- package/template/src/components/ImageCropper/utils/data2blob.js +19 -0
- package/template/src/components/ImageCropper/utils/effectRipple.js +39 -0
- package/template/src/components/ImageCropper/utils/language.js +232 -0
- package/template/src/components/ImageCropper/utils/mimes.js +7 -0
- package/template/src/components/JsonEditor/index.vue +77 -0
- package/template/src/components/Kanban/index.vue +99 -0
- package/template/src/components/MDinput/index.vue +360 -0
- package/template/src/components/MarkdownEditor/default-options.js +31 -0
- package/template/src/components/MarkdownEditor/index.vue +118 -0
- package/template/src/components/Pagination/index.vue +101 -0
- package/template/src/components/PanThumb/index.vue +142 -0
- package/template/src/components/RightPanel/index.vue +145 -0
- package/template/src/components/Screenfull/index.vue +60 -0
- package/template/src/components/Share/DropdownMenu.vue +103 -0
- package/template/src/components/SizeSelect/index.vue +57 -0
- package/template/src/components/Sticky/index.vue +91 -0
- package/template/src/components/SvgIcon/index.vue +62 -0
- package/template/src/components/TextHoverEffect/Mallki.vue +113 -0
- package/template/src/components/ThemePicker/index.vue +175 -0
- package/template/src/components/Tinymce/components/EditorImage.vue +111 -0
- package/template/src/components/Tinymce/dynamicLoadScript.js +59 -0
- package/template/src/components/Tinymce/index.vue +247 -0
- package/template/src/components/Tinymce/plugins.js +7 -0
- package/template/src/components/Tinymce/toolbar.js +6 -0
- package/template/src/components/Upload/SingleImage.vue +134 -0
- package/template/src/components/Upload/SingleImage2.vue +130 -0
- package/template/src/components/Upload/SingleImage3.vue +157 -0
- package/template/src/components/UploadExcel/index.vue +138 -0
- package/template/src/directive/clipboard/clipboard.js +49 -0
- package/template/src/directive/clipboard/index.js +13 -0
- package/template/src/directive/el-drag-dialog/drag.js +77 -0
- package/template/src/directive/el-drag-dialog/index.js +13 -0
- package/template/src/directive/el-table/adaptive.js +41 -0
- package/template/src/directive/el-table/index.js +13 -0
- package/template/src/directive/permission/index.js +13 -0
- package/template/src/directive/permission/permission.js +31 -0
- package/template/src/directive/sticky.js +91 -0
- package/template/src/directive/waves/index.js +13 -0
- package/template/src/directive/waves/waves.css +26 -0
- package/template/src/directive/waves/waves.js +72 -0
- package/template/src/filters/index.js +68 -0
- package/template/src/icons/index.js +9 -0
- package/template/src/icons/svg/404.svg +1 -0
- package/template/src/icons/svg/bug.svg +1 -0
- package/template/src/icons/svg/chart.svg +1 -0
- package/template/src/icons/svg/clipboard.svg +1 -0
- package/template/src/icons/svg/component.svg +1 -0
- package/template/src/icons/svg/dashboard.svg +1 -0
- package/template/src/icons/svg/documentation.svg +1 -0
- package/template/src/icons/svg/drag.svg +1 -0
- package/template/src/icons/svg/edit.svg +1 -0
- package/template/src/icons/svg/education.svg +1 -0
- package/template/src/icons/svg/email.svg +1 -0
- package/template/src/icons/svg/example.svg +1 -0
- package/template/src/icons/svg/excel.svg +1 -0
- package/template/src/icons/svg/exit-fullscreen.svg +1 -0
- package/template/src/icons/svg/eye-open.svg +1 -0
- package/template/src/icons/svg/eye.svg +1 -0
- package/template/src/icons/svg/form.svg +1 -0
- package/template/src/icons/svg/fullscreen.svg +1 -0
- package/template/src/icons/svg/guide.svg +1 -0
- package/template/src/icons/svg/icon.svg +1 -0
- package/template/src/icons/svg/international.svg +1 -0
- package/template/src/icons/svg/language.svg +1 -0
- package/template/src/icons/svg/link.svg +1 -0
- package/template/src/icons/svg/list.svg +1 -0
- package/template/src/icons/svg/lock.svg +1 -0
- package/template/src/icons/svg/message.svg +1 -0
- package/template/src/icons/svg/money.svg +1 -0
- package/template/src/icons/svg/nested.svg +1 -0
- package/template/src/icons/svg/password.svg +1 -0
- package/template/src/icons/svg/pdf.svg +1 -0
- package/template/src/icons/svg/people.svg +1 -0
- package/template/src/icons/svg/peoples.svg +1 -0
- package/template/src/icons/svg/qq.svg +1 -0
- package/template/src/icons/svg/search.svg +1 -0
- package/template/src/icons/svg/shopping.svg +1 -0
- package/template/src/icons/svg/size.svg +1 -0
- package/template/src/icons/svg/skill.svg +1 -0
- package/template/src/icons/svg/star.svg +1 -0
- package/template/src/icons/svg/tab.svg +1 -0
- package/template/src/icons/svg/table.svg +1 -0
- package/template/src/icons/svg/theme.svg +1 -0
- package/template/src/icons/svg/tree-table.svg +1 -0
- package/template/src/icons/svg/tree.svg +1 -0
- package/template/src/icons/svg/user.svg +1 -0
- package/template/src/icons/svg/wechat.svg +1 -0
- package/template/src/icons/svg/zip.svg +1 -0
- package/template/src/icons/svgo.yml +22 -0
- package/template/src/layout/components/AppMain.vue +57 -0
- package/template/src/layout/components/Navbar.vue +167 -0
- package/template/src/layout/components/Settings/index.vue +108 -0
- package/template/src/layout/components/Sidebar/FixiOSBug.js +26 -0
- package/template/src/layout/components/Sidebar/Item.vue +41 -0
- package/template/src/layout/components/Sidebar/Link.vue +43 -0
- package/template/src/layout/components/Sidebar/Logo.vue +82 -0
- package/template/src/layout/components/Sidebar/SidebarItem.vue +95 -0
- package/template/src/layout/components/Sidebar/index.vue +54 -0
- package/template/src/layout/components/TagsView/ScrollPane.vue +94 -0
- package/template/src/layout/components/TagsView/index.vue +292 -0
- package/template/src/layout/components/index.js +5 -0
- package/template/src/layout/index.vue +102 -0
- package/template/src/layout/mixin/ResizeHandler.js +45 -0
- package/template/src/main.js +53 -0
- package/template/src/permission.js +74 -0
- package/template/src/router/index.js +404 -0
- package/template/src/router/modules/charts.js +36 -0
- package/template/src/router/modules/components.js +102 -0
- package/template/src/router/modules/nested.js +66 -0
- package/template/src/router/modules/table.js +41 -0
- package/template/src/settings.js +35 -0
- package/template/src/store/getters.js +15 -0
- package/template/src/store/index.js +25 -0
- package/template/src/store/modules/app.js +56 -0
- package/template/src/store/modules/errorLog.js +28 -0
- package/template/src/store/modules/permission.js +69 -0
- package/template/src/store/modules/settings.js +35 -0
- package/template/src/store/modules/tagsView.js +160 -0
- package/template/src/store/modules/user.js +131 -0
- package/template/src/styles/btn.scss +99 -0
- package/template/src/styles/element-ui.scss +84 -0
- package/template/src/styles/element-variables.scss +31 -0
- package/template/src/styles/index.scss +191 -0
- package/template/src/styles/mixin.scss +66 -0
- package/template/src/styles/sidebar.scss +226 -0
- package/template/src/styles/transition.scss +48 -0
- package/template/src/styles/variables.scss +35 -0
- package/template/src/utils/auth.js +15 -0
- package/template/src/utils/clipboard.js +32 -0
- package/template/src/utils/error-log.js +35 -0
- package/template/src/utils/get-page-title.js +10 -0
- package/template/src/utils/index.js +357 -0
- package/template/src/utils/open-window.js +25 -0
- package/template/src/utils/permission.js +21 -0
- package/template/src/utils/request.js +85 -0
- package/template/src/utils/scroll-to.js +58 -0
- package/template/src/utils/validate.js +87 -0
- package/template/src/vendor/Export2Excel.js +220 -0
- package/template/src/vendor/Export2Zip.js +24 -0
- package/template/src/views/charts/keyboard.vue +23 -0
- package/template/src/views/charts/line.vue +23 -0
- package/template/src/views/charts/mix-chart.vue +23 -0
- package/template/src/views/clipboard/index.vue +49 -0
- package/template/src/views/components-demo/avatar-upload.vue +61 -0
- package/template/src/views/components-demo/back-to-top.vue +154 -0
- package/template/src/views/components-demo/count-to.vue +218 -0
- package/template/src/views/components-demo/dnd-list.vue +39 -0
- package/template/src/views/components-demo/drag-dialog.vue +61 -0
- package/template/src/views/components-demo/drag-kanban.vue +66 -0
- package/template/src/views/components-demo/drag-select.vue +43 -0
- package/template/src/views/components-demo/dropzone.vue +31 -0
- package/template/src/views/components-demo/json-editor.vue +36 -0
- package/template/src/views/components-demo/markdown.vue +101 -0
- package/template/src/views/components-demo/mixin.vue +169 -0
- package/template/src/views/components-demo/split-pane.vue +67 -0
- package/template/src/views/components-demo/sticky.vue +135 -0
- package/template/src/views/components-demo/tinymce.vue +36 -0
- package/template/src/views/dashboard/admin/components/BarChart.vue +102 -0
- package/template/src/views/dashboard/admin/components/BoxCard.vue +118 -0
- package/template/src/views/dashboard/admin/components/LineChart.vue +135 -0
- package/template/src/views/dashboard/admin/components/PanelGroup.vue +181 -0
- package/template/src/views/dashboard/admin/components/PieChart.vue +79 -0
- package/template/src/views/dashboard/admin/components/RaddarChart.vue +116 -0
- package/template/src/views/dashboard/admin/components/TodoList/Todo.vue +81 -0
- package/template/src/views/dashboard/admin/components/TodoList/index.scss +320 -0
- package/template/src/views/dashboard/admin/components/TodoList/index.vue +127 -0
- package/template/src/views/dashboard/admin/components/TransactionTable.vue +55 -0
- package/template/src/views/dashboard/admin/components/mixins/resize.js +55 -0
- package/template/src/views/dashboard/admin/index.vue +124 -0
- package/template/src/views/dashboard/editor/index.vue +74 -0
- package/template/src/views/dashboard/index.vue +31 -0
- package/template/src/views/documentation/index.vue +57 -0
- package/template/src/views/error-log/components/ErrorTestA.vue +13 -0
- package/template/src/views/error-log/components/ErrorTestB.vue +11 -0
- package/template/src/views/error-log/index.vue +32 -0
- package/template/src/views/error-page/401.vue +99 -0
- package/template/src/views/error-page/404.vue +228 -0
- package/template/src/views/example/components/ArticleDetail.vue +289 -0
- package/template/src/views/example/components/Dropdown/Comment.vue +41 -0
- package/template/src/views/example/components/Dropdown/Platform.vue +46 -0
- package/template/src/views/example/components/Dropdown/SourceUrl.vue +38 -0
- package/template/src/views/example/components/Dropdown/index.js +3 -0
- package/template/src/views/example/components/Warning.vue +13 -0
- package/template/src/views/example/create.vue +13 -0
- package/template/src/views/example/edit.vue +13 -0
- package/template/src/views/example/list.vue +112 -0
- package/template/src/views/excel/components/AutoWidthOption.vue +34 -0
- package/template/src/views/excel/components/BookTypeOption.vue +39 -0
- package/template/src/views/excel/components/FilenameOption.vue +27 -0
- package/template/src/views/excel/export-excel.vue +116 -0
- package/template/src/views/excel/merge-header.vue +101 -0
- package/template/src/views/excel/select-excel.vue +107 -0
- package/template/src/views/excel/upload-excel.vue +42 -0
- package/template/src/views/guide/index.vue +36 -0
- package/template/src/views/guide/steps.js +53 -0
- package/template/src/views/icons/element-icons.js +3 -0
- package/template/src/views/icons/index.vue +101 -0
- package/template/src/views/icons/svg-icons.js +10 -0
- package/template/src/views/login/auth-redirect.vue +15 -0
- package/template/src/views/login/components/SocialSignin.vue +72 -0
- package/template/src/views/login/index.vue +324 -0
- package/template/src/views/nested/menu1/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-1/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-2/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
- package/template/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
- package/template/src/views/nested/menu1/menu1-3/index.vue +5 -0
- package/template/src/views/nested/menu2/index.vue +5 -0
- package/template/src/views/pdf/content.js +58 -0
- package/template/src/views/pdf/download.vue +201 -0
- package/template/src/views/pdf/index.vue +13 -0
- package/template/src/views/permission/components/SwitchRoles.vue +32 -0
- package/template/src/views/permission/directive.vue +111 -0
- package/template/src/views/permission/page.vue +19 -0
- package/template/src/views/permission/role.vue +270 -0
- package/template/src/views/profile/components/Account.vue +38 -0
- package/template/src/views/profile/components/Activity.vue +185 -0
- package/template/src/views/profile/components/Timeline.vue +43 -0
- package/template/src/views/profile/components/UserCard.vue +134 -0
- package/template/src/views/profile/index.vue +68 -0
- package/template/src/views/qiniu/upload.vue +41 -0
- package/template/src/views/redirect/index.vue +12 -0
- package/template/src/views/tab/components/TabPane.vue +103 -0
- package/template/src/views/tab/index.vue +57 -0
- package/template/src/views/table/complex-table.vue +379 -0
- package/template/src/views/table/drag-table.vue +153 -0
- package/template/src/views/table/dynamic-table/components/FixedThead.vue +62 -0
- package/template/src/views/table/dynamic-table/components/UnfixedThead.vue +50 -0
- package/template/src/views/table/dynamic-table/index.vue +24 -0
- package/template/src/views/table/inline-edit-table.vue +149 -0
- package/template/src/views/theme/index.vue +120 -0
- package/template/src/views/zip/index.vue +77 -0
- package/template/tests/unit/.eslintrc.js +5 -0
- package/template/tests/unit/components/Hamburger.spec.js +18 -0
- package/template/tests/unit/components/SvgIcon.spec.js +22 -0
- package/template/tests/unit/utils/formatTime.spec.js +29 -0
- package/template/tests/unit/utils/param2Obj.spec.js +14 -0
- package/template/tests/unit/utils/parseTime.spec.js +37 -0
- package/template/tests/unit/utils/validate.spec.js +28 -0
- package/template/vue.config.js +124 -0
@@ -0,0 +1,111 @@
|
|
1
|
+
<template>
|
2
|
+
<transition :name="transitionName">
|
3
|
+
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
|
4
|
+
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
|
5
|
+
</div>
|
6
|
+
</transition>
|
7
|
+
</template>
|
8
|
+
|
9
|
+
<script>
|
10
|
+
export default {
|
11
|
+
name: 'BackToTop',
|
12
|
+
props: {
|
13
|
+
visibilityHeight: {
|
14
|
+
type: Number,
|
15
|
+
default: 400
|
16
|
+
},
|
17
|
+
backPosition: {
|
18
|
+
type: Number,
|
19
|
+
default: 0
|
20
|
+
},
|
21
|
+
customStyle: {
|
22
|
+
type: Object,
|
23
|
+
default: function() {
|
24
|
+
return {
|
25
|
+
right: '50px',
|
26
|
+
bottom: '50px',
|
27
|
+
width: '40px',
|
28
|
+
height: '40px',
|
29
|
+
'border-radius': '4px',
|
30
|
+
'line-height': '45px',
|
31
|
+
background: '#e7eaf1'
|
32
|
+
}
|
33
|
+
}
|
34
|
+
},
|
35
|
+
transitionName: {
|
36
|
+
type: String,
|
37
|
+
default: 'fade'
|
38
|
+
}
|
39
|
+
},
|
40
|
+
data() {
|
41
|
+
return {
|
42
|
+
visible: false,
|
43
|
+
interval: null,
|
44
|
+
isMoving: false
|
45
|
+
}
|
46
|
+
},
|
47
|
+
mounted() {
|
48
|
+
window.addEventListener('scroll', this.handleScroll)
|
49
|
+
},
|
50
|
+
beforeDestroy() {
|
51
|
+
window.removeEventListener('scroll', this.handleScroll)
|
52
|
+
if (this.interval) {
|
53
|
+
clearInterval(this.interval)
|
54
|
+
}
|
55
|
+
},
|
56
|
+
methods: {
|
57
|
+
handleScroll() {
|
58
|
+
this.visible = window.pageYOffset > this.visibilityHeight
|
59
|
+
},
|
60
|
+
backToTop() {
|
61
|
+
if (this.isMoving) return
|
62
|
+
const start = window.pageYOffset
|
63
|
+
let i = 0
|
64
|
+
this.isMoving = true
|
65
|
+
this.interval = setInterval(() => {
|
66
|
+
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
|
67
|
+
if (next <= this.backPosition) {
|
68
|
+
window.scrollTo(0, this.backPosition)
|
69
|
+
clearInterval(this.interval)
|
70
|
+
this.isMoving = false
|
71
|
+
} else {
|
72
|
+
window.scrollTo(0, next)
|
73
|
+
}
|
74
|
+
i++
|
75
|
+
}, 16.7)
|
76
|
+
},
|
77
|
+
easeInOutQuad(t, b, c, d) {
|
78
|
+
if ((t /= d / 2) < 1) return c / 2 * t * t + b
|
79
|
+
return -c / 2 * (--t * (t - 2) - 1) + b
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
</script>
|
84
|
+
|
85
|
+
<style scoped>
|
86
|
+
.back-to-ceiling {
|
87
|
+
position: fixed;
|
88
|
+
display: inline-block;
|
89
|
+
text-align: center;
|
90
|
+
cursor: pointer;
|
91
|
+
}
|
92
|
+
|
93
|
+
.back-to-ceiling:hover {
|
94
|
+
background: #d5dbe7;
|
95
|
+
}
|
96
|
+
|
97
|
+
.fade-enter-active,
|
98
|
+
.fade-leave-active {
|
99
|
+
transition: opacity .5s;
|
100
|
+
}
|
101
|
+
|
102
|
+
.fade-enter,
|
103
|
+
.fade-leave-to {
|
104
|
+
opacity: 0
|
105
|
+
}
|
106
|
+
|
107
|
+
.back-to-ceiling .Icon {
|
108
|
+
fill: #9aaabf;
|
109
|
+
background: none;
|
110
|
+
}
|
111
|
+
</style>
|
@@ -0,0 +1,82 @@
|
|
1
|
+
<template>
|
2
|
+
<el-breadcrumb class="app-breadcrumb" separator="/">
|
3
|
+
<transition-group name="breadcrumb">
|
4
|
+
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
5
|
+
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
|
6
|
+
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
7
|
+
</el-breadcrumb-item>
|
8
|
+
</transition-group>
|
9
|
+
</el-breadcrumb>
|
10
|
+
</template>
|
11
|
+
|
12
|
+
<script>
|
13
|
+
import pathToRegexp from 'path-to-regexp'
|
14
|
+
|
15
|
+
export default {
|
16
|
+
data() {
|
17
|
+
return {
|
18
|
+
levelList: null
|
19
|
+
}
|
20
|
+
},
|
21
|
+
watch: {
|
22
|
+
$route(route) {
|
23
|
+
// if you go to the redirect page, do not update the breadcrumbs
|
24
|
+
if (route.path.startsWith('/redirect/')) {
|
25
|
+
return
|
26
|
+
}
|
27
|
+
this.getBreadcrumb()
|
28
|
+
}
|
29
|
+
},
|
30
|
+
created() {
|
31
|
+
this.getBreadcrumb()
|
32
|
+
},
|
33
|
+
methods: {
|
34
|
+
getBreadcrumb() {
|
35
|
+
// only show routes with meta.title
|
36
|
+
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
|
37
|
+
const first = matched[0]
|
38
|
+
|
39
|
+
if (!this.isDashboard(first)) {
|
40
|
+
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
|
41
|
+
}
|
42
|
+
|
43
|
+
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
44
|
+
},
|
45
|
+
isDashboard(route) {
|
46
|
+
const name = route && route.name
|
47
|
+
if (!name) {
|
48
|
+
return false
|
49
|
+
}
|
50
|
+
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
|
51
|
+
},
|
52
|
+
pathCompile(path) {
|
53
|
+
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
|
54
|
+
const { params } = this.$route
|
55
|
+
var toPath = pathToRegexp.compile(path)
|
56
|
+
return toPath(params)
|
57
|
+
},
|
58
|
+
handleLink(item) {
|
59
|
+
const { redirect, path } = item
|
60
|
+
if (redirect) {
|
61
|
+
this.$router.push(redirect)
|
62
|
+
return
|
63
|
+
}
|
64
|
+
this.$router.push(this.pathCompile(path))
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}
|
68
|
+
</script>
|
69
|
+
|
70
|
+
<style lang="scss" scoped>
|
71
|
+
.app-breadcrumb.el-breadcrumb {
|
72
|
+
display: inline-block;
|
73
|
+
font-size: 14px;
|
74
|
+
line-height: 50px;
|
75
|
+
margin-left: 8px;
|
76
|
+
|
77
|
+
.no-redirect {
|
78
|
+
color: #97a8be;
|
79
|
+
cursor: text;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
</style>
|
@@ -0,0 +1,155 @@
|
|
1
|
+
<template>
|
2
|
+
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
3
|
+
</template>
|
4
|
+
|
5
|
+
<script>
|
6
|
+
import echarts from 'echarts'
|
7
|
+
import resize from './mixins/resize'
|
8
|
+
|
9
|
+
export default {
|
10
|
+
mixins: [resize],
|
11
|
+
props: {
|
12
|
+
className: {
|
13
|
+
type: String,
|
14
|
+
default: 'chart'
|
15
|
+
},
|
16
|
+
id: {
|
17
|
+
type: String,
|
18
|
+
default: 'chart'
|
19
|
+
},
|
20
|
+
width: {
|
21
|
+
type: String,
|
22
|
+
default: '200px'
|
23
|
+
},
|
24
|
+
height: {
|
25
|
+
type: String,
|
26
|
+
default: '200px'
|
27
|
+
}
|
28
|
+
},
|
29
|
+
data() {
|
30
|
+
return {
|
31
|
+
chart: null
|
32
|
+
}
|
33
|
+
},
|
34
|
+
mounted() {
|
35
|
+
this.initChart()
|
36
|
+
},
|
37
|
+
beforeDestroy() {
|
38
|
+
if (!this.chart) {
|
39
|
+
return
|
40
|
+
}
|
41
|
+
this.chart.dispose()
|
42
|
+
this.chart = null
|
43
|
+
},
|
44
|
+
methods: {
|
45
|
+
initChart() {
|
46
|
+
this.chart = echarts.init(document.getElementById(this.id))
|
47
|
+
|
48
|
+
const xAxisData = []
|
49
|
+
const data = []
|
50
|
+
const data2 = []
|
51
|
+
for (let i = 0; i < 50; i++) {
|
52
|
+
xAxisData.push(i)
|
53
|
+
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
|
54
|
+
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
|
55
|
+
}
|
56
|
+
this.chart.setOption({
|
57
|
+
backgroundColor: '#08263a',
|
58
|
+
grid: {
|
59
|
+
left: '5%',
|
60
|
+
right: '5%'
|
61
|
+
},
|
62
|
+
xAxis: [{
|
63
|
+
show: false,
|
64
|
+
data: xAxisData
|
65
|
+
}, {
|
66
|
+
show: false,
|
67
|
+
data: xAxisData
|
68
|
+
}],
|
69
|
+
visualMap: {
|
70
|
+
show: false,
|
71
|
+
min: 0,
|
72
|
+
max: 50,
|
73
|
+
dimension: 0,
|
74
|
+
inRange: {
|
75
|
+
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
76
|
+
}
|
77
|
+
},
|
78
|
+
yAxis: {
|
79
|
+
axisLine: {
|
80
|
+
show: false
|
81
|
+
},
|
82
|
+
axisLabel: {
|
83
|
+
textStyle: {
|
84
|
+
color: '#4a657a'
|
85
|
+
}
|
86
|
+
},
|
87
|
+
splitLine: {
|
88
|
+
show: true,
|
89
|
+
lineStyle: {
|
90
|
+
color: '#08263f'
|
91
|
+
}
|
92
|
+
},
|
93
|
+
axisTick: {
|
94
|
+
show: false
|
95
|
+
}
|
96
|
+
},
|
97
|
+
series: [{
|
98
|
+
name: 'back',
|
99
|
+
type: 'bar',
|
100
|
+
data: data2,
|
101
|
+
z: 1,
|
102
|
+
itemStyle: {
|
103
|
+
normal: {
|
104
|
+
opacity: 0.4,
|
105
|
+
barBorderRadius: 5,
|
106
|
+
shadowBlur: 3,
|
107
|
+
shadowColor: '#111'
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}, {
|
111
|
+
name: 'Simulate Shadow',
|
112
|
+
type: 'line',
|
113
|
+
data,
|
114
|
+
z: 2,
|
115
|
+
showSymbol: false,
|
116
|
+
animationDelay: 0,
|
117
|
+
animationEasing: 'linear',
|
118
|
+
animationDuration: 1200,
|
119
|
+
lineStyle: {
|
120
|
+
normal: {
|
121
|
+
color: 'transparent'
|
122
|
+
}
|
123
|
+
},
|
124
|
+
areaStyle: {
|
125
|
+
normal: {
|
126
|
+
color: '#08263a',
|
127
|
+
shadowBlur: 50,
|
128
|
+
shadowColor: '#000'
|
129
|
+
}
|
130
|
+
}
|
131
|
+
}, {
|
132
|
+
name: 'front',
|
133
|
+
type: 'bar',
|
134
|
+
data,
|
135
|
+
xAxisIndex: 1,
|
136
|
+
z: 3,
|
137
|
+
itemStyle: {
|
138
|
+
normal: {
|
139
|
+
barBorderRadius: 5
|
140
|
+
}
|
141
|
+
}
|
142
|
+
}],
|
143
|
+
animationEasing: 'elasticOut',
|
144
|
+
animationEasingUpdate: 'elasticOut',
|
145
|
+
animationDelay(idx) {
|
146
|
+
return idx * 20
|
147
|
+
},
|
148
|
+
animationDelayUpdate(idx) {
|
149
|
+
return idx * 20
|
150
|
+
}
|
151
|
+
})
|
152
|
+
}
|
153
|
+
}
|
154
|
+
}
|
155
|
+
</script>
|
@@ -0,0 +1,227 @@
|
|
1
|
+
<template>
|
2
|
+
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
3
|
+
</template>
|
4
|
+
|
5
|
+
<script>
|
6
|
+
import echarts from 'echarts'
|
7
|
+
import resize from './mixins/resize'
|
8
|
+
|
9
|
+
export default {
|
10
|
+
mixins: [resize],
|
11
|
+
props: {
|
12
|
+
className: {
|
13
|
+
type: String,
|
14
|
+
default: 'chart'
|
15
|
+
},
|
16
|
+
id: {
|
17
|
+
type: String,
|
18
|
+
default: 'chart'
|
19
|
+
},
|
20
|
+
width: {
|
21
|
+
type: String,
|
22
|
+
default: '200px'
|
23
|
+
},
|
24
|
+
height: {
|
25
|
+
type: String,
|
26
|
+
default: '200px'
|
27
|
+
}
|
28
|
+
},
|
29
|
+
data() {
|
30
|
+
return {
|
31
|
+
chart: null
|
32
|
+
}
|
33
|
+
},
|
34
|
+
mounted() {
|
35
|
+
this.initChart()
|
36
|
+
},
|
37
|
+
beforeDestroy() {
|
38
|
+
if (!this.chart) {
|
39
|
+
return
|
40
|
+
}
|
41
|
+
this.chart.dispose()
|
42
|
+
this.chart = null
|
43
|
+
},
|
44
|
+
methods: {
|
45
|
+
initChart() {
|
46
|
+
this.chart = echarts.init(document.getElementById(this.id))
|
47
|
+
|
48
|
+
this.chart.setOption({
|
49
|
+
backgroundColor: '#394056',
|
50
|
+
title: {
|
51
|
+
top: 20,
|
52
|
+
text: 'Requests',
|
53
|
+
textStyle: {
|
54
|
+
fontWeight: 'normal',
|
55
|
+
fontSize: 16,
|
56
|
+
color: '#F1F1F3'
|
57
|
+
},
|
58
|
+
left: '1%'
|
59
|
+
},
|
60
|
+
tooltip: {
|
61
|
+
trigger: 'axis',
|
62
|
+
axisPointer: {
|
63
|
+
lineStyle: {
|
64
|
+
color: '#57617B'
|
65
|
+
}
|
66
|
+
}
|
67
|
+
},
|
68
|
+
legend: {
|
69
|
+
top: 20,
|
70
|
+
icon: 'rect',
|
71
|
+
itemWidth: 14,
|
72
|
+
itemHeight: 5,
|
73
|
+
itemGap: 13,
|
74
|
+
data: ['CMCC', 'CTCC', 'CUCC'],
|
75
|
+
right: '4%',
|
76
|
+
textStyle: {
|
77
|
+
fontSize: 12,
|
78
|
+
color: '#F1F1F3'
|
79
|
+
}
|
80
|
+
},
|
81
|
+
grid: {
|
82
|
+
top: 100,
|
83
|
+
left: '2%',
|
84
|
+
right: '2%',
|
85
|
+
bottom: '2%',
|
86
|
+
containLabel: true
|
87
|
+
},
|
88
|
+
xAxis: [{
|
89
|
+
type: 'category',
|
90
|
+
boundaryGap: false,
|
91
|
+
axisLine: {
|
92
|
+
lineStyle: {
|
93
|
+
color: '#57617B'
|
94
|
+
}
|
95
|
+
},
|
96
|
+
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
97
|
+
}],
|
98
|
+
yAxis: [{
|
99
|
+
type: 'value',
|
100
|
+
name: '(%)',
|
101
|
+
axisTick: {
|
102
|
+
show: false
|
103
|
+
},
|
104
|
+
axisLine: {
|
105
|
+
lineStyle: {
|
106
|
+
color: '#57617B'
|
107
|
+
}
|
108
|
+
},
|
109
|
+
axisLabel: {
|
110
|
+
margin: 10,
|
111
|
+
textStyle: {
|
112
|
+
fontSize: 14
|
113
|
+
}
|
114
|
+
},
|
115
|
+
splitLine: {
|
116
|
+
lineStyle: {
|
117
|
+
color: '#57617B'
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}],
|
121
|
+
series: [{
|
122
|
+
name: 'CMCC',
|
123
|
+
type: 'line',
|
124
|
+
smooth: true,
|
125
|
+
symbol: 'circle',
|
126
|
+
symbolSize: 5,
|
127
|
+
showSymbol: false,
|
128
|
+
lineStyle: {
|
129
|
+
normal: {
|
130
|
+
width: 1
|
131
|
+
}
|
132
|
+
},
|
133
|
+
areaStyle: {
|
134
|
+
normal: {
|
135
|
+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
136
|
+
offset: 0,
|
137
|
+
color: 'rgba(137, 189, 27, 0.3)'
|
138
|
+
}, {
|
139
|
+
offset: 0.8,
|
140
|
+
color: 'rgba(137, 189, 27, 0)'
|
141
|
+
}], false),
|
142
|
+
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
143
|
+
shadowBlur: 10
|
144
|
+
}
|
145
|
+
},
|
146
|
+
itemStyle: {
|
147
|
+
normal: {
|
148
|
+
color: 'rgb(137,189,27)',
|
149
|
+
borderColor: 'rgba(137,189,2,0.27)',
|
150
|
+
borderWidth: 12
|
151
|
+
|
152
|
+
}
|
153
|
+
},
|
154
|
+
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
155
|
+
}, {
|
156
|
+
name: 'CTCC',
|
157
|
+
type: 'line',
|
158
|
+
smooth: true,
|
159
|
+
symbol: 'circle',
|
160
|
+
symbolSize: 5,
|
161
|
+
showSymbol: false,
|
162
|
+
lineStyle: {
|
163
|
+
normal: {
|
164
|
+
width: 1
|
165
|
+
}
|
166
|
+
},
|
167
|
+
areaStyle: {
|
168
|
+
normal: {
|
169
|
+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
170
|
+
offset: 0,
|
171
|
+
color: 'rgba(0, 136, 212, 0.3)'
|
172
|
+
}, {
|
173
|
+
offset: 0.8,
|
174
|
+
color: 'rgba(0, 136, 212, 0)'
|
175
|
+
}], false),
|
176
|
+
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
177
|
+
shadowBlur: 10
|
178
|
+
}
|
179
|
+
},
|
180
|
+
itemStyle: {
|
181
|
+
normal: {
|
182
|
+
color: 'rgb(0,136,212)',
|
183
|
+
borderColor: 'rgba(0,136,212,0.2)',
|
184
|
+
borderWidth: 12
|
185
|
+
|
186
|
+
}
|
187
|
+
},
|
188
|
+
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
189
|
+
}, {
|
190
|
+
name: 'CUCC',
|
191
|
+
type: 'line',
|
192
|
+
smooth: true,
|
193
|
+
symbol: 'circle',
|
194
|
+
symbolSize: 5,
|
195
|
+
showSymbol: false,
|
196
|
+
lineStyle: {
|
197
|
+
normal: {
|
198
|
+
width: 1
|
199
|
+
}
|
200
|
+
},
|
201
|
+
areaStyle: {
|
202
|
+
normal: {
|
203
|
+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
204
|
+
offset: 0,
|
205
|
+
color: 'rgba(219, 50, 51, 0.3)'
|
206
|
+
}, {
|
207
|
+
offset: 0.8,
|
208
|
+
color: 'rgba(219, 50, 51, 0)'
|
209
|
+
}], false),
|
210
|
+
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
211
|
+
shadowBlur: 10
|
212
|
+
}
|
213
|
+
},
|
214
|
+
itemStyle: {
|
215
|
+
normal: {
|
216
|
+
color: 'rgb(219,50,51)',
|
217
|
+
borderColor: 'rgba(219,50,51,0.2)',
|
218
|
+
borderWidth: 12
|
219
|
+
}
|
220
|
+
},
|
221
|
+
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
222
|
+
}]
|
223
|
+
})
|
224
|
+
}
|
225
|
+
}
|
226
|
+
}
|
227
|
+
</script>
|