This commit is contained in:
sc
parent
00c727d9f1
commit
6af98ff122
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.21.0",
|
"axios": "^0.21.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
"echarts": "^5.1.1",
|
||||||
"element-plus": "latest",
|
"element-plus": "latest",
|
||||||
"less": "^3.12.2",
|
"less": "^3.12.2",
|
||||||
"less-loader": "^7.1.0",
|
"less-loader": "^7.1.0",
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,16 @@
|
||||||
"title": "组件",
|
"title": "组件",
|
||||||
"icon": "el-icon-takeaway-box"
|
"icon": "el-icon-takeaway-box"
|
||||||
},
|
},
|
||||||
"children": []
|
"children": [
|
||||||
|
{
|
||||||
|
"path": "/template/drag",
|
||||||
|
"name": "drag",
|
||||||
|
"meta": {
|
||||||
|
"title": "拖拽排序"
|
||||||
|
},
|
||||||
|
"component": "vab/drag"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "template",
|
"name": "template",
|
||||||
|
|
@ -21,13 +30,22 @@
|
||||||
"title": "模板",
|
"title": "模板",
|
||||||
"icon": "el-icon-files"
|
"icon": "el-icon-files"
|
||||||
},
|
},
|
||||||
"children": [{
|
"children": [
|
||||||
|
{
|
||||||
|
"path": "/template/blank",
|
||||||
|
"name": "blank",
|
||||||
|
"meta": {
|
||||||
|
"title": "空白模板"
|
||||||
|
},
|
||||||
|
"component": "template/blank"
|
||||||
|
},
|
||||||
|
{
|
||||||
"path": "/template/list",
|
"path": "/template/list",
|
||||||
"name": "list",
|
"name": "list",
|
||||||
"meta": {
|
"meta": {
|
||||||
"title": "列表"
|
"title": "列表"
|
||||||
},
|
},
|
||||||
"component": "list"
|
"component": "template/list"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/template/show/:id",
|
"path": "/template/show/:id",
|
||||||
|
|
@ -36,7 +54,7 @@
|
||||||
"title": "详情",
|
"title": "详情",
|
||||||
"hidden": true
|
"hidden": true
|
||||||
},
|
},
|
||||||
"component": "show"
|
"component": "template/show"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -17,16 +17,33 @@
|
||||||
<div class="setting panel-item">
|
<div class="setting panel-item">
|
||||||
<i class="el-icon-setting"></i>
|
<i class="el-icon-setting"></i>
|
||||||
</div>
|
</div>
|
||||||
<el-popover placement="bottom" :width="300" trigger="click">
|
<el-popover placement="bottom" :width="360" trigger="click">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<div class="msg panel-item">
|
<div class="msg panel-item">
|
||||||
<el-badge :value="1" class="badge" type="danger">
|
<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
|
||||||
<i class="el-icon-bell"></i>
|
<i class="el-icon-bell"></i>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div>
|
<div>
|
||||||
<el-empty description="暂无消息"></el-empty>
|
<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
|
||||||
|
<div v-else class="msgList">
|
||||||
|
<header>
|
||||||
|
<label>通知</label>
|
||||||
|
<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
|
||||||
|
</header>
|
||||||
|
<ul>
|
||||||
|
<el-scrollbar>
|
||||||
|
<li v-for="item in msgList" v-bind:key="item.id">
|
||||||
|
<a :href="item.link" target="_blank">
|
||||||
|
<h2>{{item.title}}</h2>
|
||||||
|
<p>{{item.describe}}</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</el-scrollbar>
|
||||||
|
</ul>
|
||||||
|
<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<el-dropdown trigger="click" @command="handleUser">
|
<el-dropdown trigger="click" @command="handleUser">
|
||||||
|
|
@ -37,6 +54,7 @@
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item command="userInfo">个人设置</el-dropdown-item>
|
<el-dropdown-item command="userInfo">个人设置</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="cmd">CMD</el-dropdown-item>
|
||||||
<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
|
<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -51,7 +69,21 @@
|
||||||
return {
|
return {
|
||||||
breadList: [],
|
breadList: [],
|
||||||
userName: "",
|
userName: "",
|
||||||
userNameF: ""
|
userNameF: "",
|
||||||
|
msgList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "关于版本发布的通知",
|
||||||
|
describe: "当前版本号Ver0.1.0,最后更新日期2021年4月27日",
|
||||||
|
link: "https://gitee.com/lolicode/scui"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "感谢登录SCUI Admin",
|
||||||
|
describe: "Vue 3.0 + Vue-Router 4.0 + Element-Plus + Axios 后台管理系统。",
|
||||||
|
link: "https://gitee.com/lolicode/scui"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -71,6 +103,9 @@
|
||||||
if(command == "outLogin"){
|
if(command == "outLogin"){
|
||||||
this.$router.replace({path: '/login'});
|
this.$router.replace({path: '/login'});
|
||||||
}
|
}
|
||||||
|
if(command == "cmd"){
|
||||||
|
this.$router.push({path: '/cmd'});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getBreadcrumb(){
|
getBreadcrumb(){
|
||||||
let matched = this.$route.matched;
|
let matched = this.$route.matched;
|
||||||
|
|
@ -80,6 +115,10 @@
|
||||||
screen(){
|
screen(){
|
||||||
var element = document.documentElement;
|
var element = document.documentElement;
|
||||||
this.$TOOL.screen(element)
|
this.$TOOL.screen(element)
|
||||||
|
},
|
||||||
|
//标记已读
|
||||||
|
markRead(){
|
||||||
|
this.msgList = []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,13 @@ const routes = [{
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/cmd",
|
||||||
|
component: () => import(/* webpackChunkName: "login" */ '@/views/other/cmd'),
|
||||||
|
meta: {
|
||||||
|
title: "CMD"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/login",
|
path: "/login",
|
||||||
component: () => import(/* webpackChunkName: "login" */ '@/views/login'),
|
component: () => import(/* webpackChunkName: "login" */ '@/views/login'),
|
||||||
|
|
@ -42,7 +49,7 @@ const routes = [{
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
//系统路由
|
//系统特殊路由
|
||||||
const routes_404 = {
|
const routes_404 = {
|
||||||
path: "/:pathMatch(.*)*",
|
path: "/:pathMatch(.*)*",
|
||||||
name: "404",
|
name: "404",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,9 @@
|
||||||
#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
|
#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
|
||||||
|
a {color: #333;text-decoration: none;}
|
||||||
|
a:hover, a:focus {color: #000;text-decoration: none;}
|
||||||
|
a:link {text-decoration: none;}
|
||||||
|
a:-webkit-any-link {text-decoration: none;}
|
||||||
|
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
|
* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
|
||||||
|
|
||||||
/* 全局滚动条样式 */
|
/* 全局滚动条样式 */
|
||||||
|
|
@ -36,7 +41,7 @@
|
||||||
.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
|
.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
|
||||||
.adminui-header .right-panel {display: flex;align-items: center;}
|
.adminui-header .right-panel {display: flex;align-items: center;}
|
||||||
|
|
||||||
.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 20px;cursor: pointer;}
|
.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 10px;cursor: pointer;}
|
||||||
.adminui-header .panel-item i {font-size: 16px;}
|
.adminui-header .panel-item i {font-size: 16px;}
|
||||||
.adminui-header .panel-item .badge .el-badge__content {top:15px}
|
.adminui-header .panel-item .badge .el-badge__content {top:15px}
|
||||||
.adminui-header .panel-item:hover {background: #eee;}
|
.adminui-header .panel-item:hover {background: #eee;}
|
||||||
|
|
@ -45,8 +50,15 @@
|
||||||
.adminui-header .user {display: flex;align-items: center;}
|
.adminui-header .user {display: flex;align-items: center;}
|
||||||
.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
|
.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
|
||||||
|
|
||||||
|
.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
|
||||||
|
.msgList footer {height:35px;line-height: 35px;text-align:center;}
|
||||||
|
.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;padding:10px 0;}
|
||||||
|
.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border-radius: 4px;border: 1px solid transparent;cursor:pointer;}
|
||||||
|
.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
|
||||||
|
.msgList ul li h2 i {margin-right: 10px;}
|
||||||
|
.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
|
||||||
|
.msgList ul li a:hover {background: #ecf5ff;border: 1px solid #d9ecff;}
|
||||||
|
.msgList ul li a:hover h2 {color: #409EFF;}
|
||||||
|
|
||||||
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
|
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
|
||||||
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
|
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,500 @@
|
||||||
|
const T = {
|
||||||
|
"color": [
|
||||||
|
"#3fb1e3",
|
||||||
|
"#6be6c1",
|
||||||
|
"#626c91",
|
||||||
|
"#a0a7e6",
|
||||||
|
"#c4ebad",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
"backgroundColor": "rgba(252,252,252,0)",
|
||||||
|
"textStyle": {},
|
||||||
|
"title": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#666666"
|
||||||
|
},
|
||||||
|
"subtextStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'grid': {
|
||||||
|
'left': '3%',
|
||||||
|
'right': '3%',
|
||||||
|
'bottom': '5%',
|
||||||
|
'containLabel': true
|
||||||
|
},
|
||||||
|
"line": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"normal": {
|
||||||
|
"width": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'areaStyle': {
|
||||||
|
'opacity': 0.5
|
||||||
|
},
|
||||||
|
"symbolSize": "8",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"radar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"normal": {
|
||||||
|
"width": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolSize": "8",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"bar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"barBorderWidth": "0",
|
||||||
|
"barBorderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"barBorderWidth": "0",
|
||||||
|
"barBorderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pie": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scatter": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boxplot": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"parallel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sankey": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"funnel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gauge": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"candlestick": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"color": "#e6a0d2",
|
||||||
|
"color0": "transparent",
|
||||||
|
"borderColor": "#e6a0d2",
|
||||||
|
"borderColor0": "#3fb1e3",
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"graph": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "0",
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"normal": {
|
||||||
|
"width": "1",
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolSize": "8",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true,
|
||||||
|
"color": [
|
||||||
|
"#1e9fff",
|
||||||
|
"#009688",
|
||||||
|
"#2f4056",
|
||||||
|
"#ffb800",
|
||||||
|
"#ff5722",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"map": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"areaColor": "#eeeeee",
|
||||||
|
"borderColor": "#aaaaaa",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"areaColor": "rgba(63,177,227,0.25)",
|
||||||
|
"borderColor": "#3fb1e3",
|
||||||
|
"borderWidth": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "rgb(63,177,227)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"geo": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"areaColor": "#eeeeee",
|
||||||
|
"borderColor": "#aaaaaa",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"areaColor": "rgba(63,177,227,0.25)",
|
||||||
|
"borderColor": "#3fb1e3",
|
||||||
|
"borderWidth": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "rgb(63,177,227)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"categoryAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(255,255,255,0.01)",
|
||||||
|
"rgba(0,0,0,0.01)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"valueAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(255,255,255,0.01)",
|
||||||
|
"rgba(0,0,0,0.01)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"logAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(255,255,255,0.01)",
|
||||||
|
"rgba(0,0,0,0.01)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(255,255,255,0.01)",
|
||||||
|
"rgba(0,0,0,0.01)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"iconStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderColor": "#999999"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderColor": "#666666"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"axisPointer": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"crossStyle": {
|
||||||
|
"color": "#cccccc",
|
||||||
|
"width": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeline": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#626c91",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"color": "#626c91",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"color": "#626c91"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"controlStyle": {
|
||||||
|
"normal": {
|
||||||
|
"color": "#626c91",
|
||||||
|
"borderColor": "#626c91",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"color": "#626c91",
|
||||||
|
"borderColor": "#626c91",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"checkpointStyle": {
|
||||||
|
"color": "#3fb1e3",
|
||||||
|
"borderColor": "rgba(63,177,227,0.15)"
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#626c91"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#626c91"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"visualMap": {
|
||||||
|
"color": [
|
||||||
|
"#2a99c9",
|
||||||
|
"#afe8ff"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dataZoom": {
|
||||||
|
"backgroundColor": "rgba(255,255,255,0)",
|
||||||
|
"dataBackgroundColor": "rgba(222,222,222,1)",
|
||||||
|
"fillerColor": "rgba(114,230,212,0.25)",
|
||||||
|
"handleColor": "#cccccc",
|
||||||
|
"handleSize": "100%",
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"markPoint": {
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default T
|
||||||
|
|
@ -1,15 +1,61 @@
|
||||||
<template>
|
<template>
|
||||||
<el-empty description="描述文字"></el-empty>
|
<div style="height: 200px" ref="demo"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import T from '@/utils/echarts-theme-T.js';
|
||||||
|
echarts.registerTheme('T', T);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title:"模块3",
|
title:"模块3",
|
||||||
|
components: {
|
||||||
|
echarts
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
msg: String
|
msg: String
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
console.log("加载C3");
|
|
||||||
|
const myChart = echarts.init(this.$refs.demo, 'T');
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 50,
|
||||||
|
right: 20,
|
||||||
|
bottom: 30,
|
||||||
|
left: 30,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['预购队列', '最新成交价'],
|
||||||
|
right: 13,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '价格',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '预购队列',
|
||||||
|
barWidth: 16,
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '最新成交价',
|
||||||
|
type: 'line',
|
||||||
|
data: [15, 20, 16, 20, 30, 8],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -267,7 +267,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.diy-grid-layout-set div span{
|
.diy-grid-layout-set div span{
|
||||||
background: #b1e0ff;
|
background: #d6efff;
|
||||||
}
|
}
|
||||||
.diy-grid-layout-set .col {
|
.diy-grid-layout-set .col {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<el-main>
|
||||||
|
<el-alert title="注意:此页面为系统调试页面,可控制系统所有缓存以及一些本地设置,如不熟悉操作请勿操作" type="warning" show-icon></el-alert>
|
||||||
|
<h2 style="margin:20px 0">{{ title }}</h2>
|
||||||
|
|
||||||
|
<el-button @click="clear_all()">清除所有</el-button>
|
||||||
|
<el-button @click="clear_user()">清除登录状态</el-button>
|
||||||
|
<el-button @click="clear_grid()">清除首页自定义布局数据</el-button>
|
||||||
|
|
||||||
|
<el-tabs>
|
||||||
|
<el-tab-pane label="user">
|
||||||
|
<pre class="code">{{json.user}}</pre>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="grid">
|
||||||
|
<pre class="code">{{json.grid}}</pre>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="config">
|
||||||
|
<pre class="code">{{json.config}}</pre>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
|
||||||
|
</el-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'blank',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: "CMD",
|
||||||
|
json: {
|
||||||
|
user: null,
|
||||||
|
grid: null,
|
||||||
|
config: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.json.user = this.$TOOL.data.get("user");
|
||||||
|
this.json.grid = this.$TOOL.data.get("grid")||'null';
|
||||||
|
this.json.config = this.$CONFIG;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clear_all(){
|
||||||
|
this.$TOOL.data.clear()
|
||||||
|
this.$message.success("清除所有成功")
|
||||||
|
},
|
||||||
|
clear_user(){
|
||||||
|
this.$TOOL.data.remove("user")
|
||||||
|
this.$message.success("清除登录状态成功")
|
||||||
|
},
|
||||||
|
clear_grid(){
|
||||||
|
this.$TOOL.data.remove("grid")
|
||||||
|
this.$message.success("清除grid成功")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.code {height:400px;overflow: auto;background: #333;color: #999;padding:20px;font-size: 14px;font-family: "small fonts";line-height: 1.8;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<template>
|
||||||
|
<el-main>
|
||||||
|
<h2>{{ title }}</h2>
|
||||||
|
</el-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'blank',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: "BLANK PAGE :)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
<el-main id="tableMain">
|
<el-main id="tableMain">
|
||||||
<el-card shadow="never" v-loading="loading">
|
<el-card shadow="never" v-loading="loading">
|
||||||
<el-table :data="tableData" row-key="name" stripe default-expand-all :height="tableHeight">
|
<el-table :data="tableData" row-key="name" stripe :height="tableHeight">
|
||||||
<el-table-column type="selection" width="50"></el-table-column>
|
<el-table-column type="selection" width="50"></el-table-column>
|
||||||
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
|
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
|
||||||
<el-table-column label="图标" width="80">
|
<el-table-column label="图标" width="80">
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<el-main>
|
||||||
|
<el-alert title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next" type="success" style="margin-bottom:20px;"></el-alert>
|
||||||
|
<div class="dragList">
|
||||||
|
<draggable v-model="listA" animation="200" item-key="id" group="people">
|
||||||
|
<template #item="{ element }">
|
||||||
|
<div class="item">{{element.text}}</div>
|
||||||
|
</template>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
<div class="dragList">
|
||||||
|
<draggable v-model="listB" animation="200" item-key="id" group="people">
|
||||||
|
<template #item="{ element }">
|
||||||
|
<div class="item">{{element.text}}</div>
|
||||||
|
</template>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
export default {
|
||||||
|
name: 'drag',
|
||||||
|
components: {
|
||||||
|
draggable
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listA: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: 'A1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: 'A2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: 'A3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
text: 'A4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
text: 'A5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
text: 'A6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
text: 'A7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
text: 'A8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
text: 'A9'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
listB: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: 'B1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: 'B2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: 'B3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
text: 'B4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
text: 'B5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
text: 'B6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
text: 'B7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
text: 'B8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
text: 'B9'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dragList {overflow: auto;}
|
||||||
|
.item {cursor: move;float: left;background: #fff;width:100px;height: 100px;line-height: 100px;text-align: center;margin:0 15px 15px 0;border: 1px solid #e6e6e6;}
|
||||||
|
.dragList .sortable-ghost {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue