diff --git a/package.json b/package.json index 7a369398..e580f6c2 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "axios": "^0.21.0", "core-js": "^3.6.5", + "echarts": "^5.1.1", "element-plus": "latest", "less": "^3.12.2", "less-loader": "^7.1.0", diff --git a/public/json/user.json b/public/json/user.json index a3b01355..de967c5d 100644 --- a/public/json/user.json +++ b/public/json/user.json @@ -12,7 +12,16 @@ "title": "组件", "icon": "el-icon-takeaway-box" }, - "children": [] + "children": [ + { + "path": "/template/drag", + "name": "drag", + "meta": { + "title": "拖拽排序" + }, + "component": "vab/drag" + } + ] }, { "name": "template", @@ -21,13 +30,22 @@ "title": "模板", "icon": "el-icon-files" }, - "children": [{ + "children": [ + { + "path": "/template/blank", + "name": "blank", + "meta": { + "title": "空白模板" + }, + "component": "template/blank" + }, + { "path": "/template/list", "name": "list", "meta": { "title": "列表" }, - "component": "list" + "component": "template/list" }, { "path": "/template/show/:id", @@ -36,7 +54,7 @@ "title": "详情", "hidden": true }, - "component": "show" + "component": "template/show" } ] }, diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue index 5270705d..23e67ea2 100644 --- a/src/layout/components/head.vue +++ b/src/layout/components/head.vue @@ -17,16 +17,33 @@
- +
- + +
+
+ + 全部标记已读 +
+ +
前往通知中心
+
@@ -37,6 +54,7 @@ @@ -51,7 +69,21 @@ return { breadList: [], 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() { @@ -71,6 +103,9 @@ if(command == "outLogin"){ this.$router.replace({path: '/login'}); } + if(command == "cmd"){ + this.$router.push({path: '/cmd'}); + } }, getBreadcrumb(){ let matched = this.$route.matched; @@ -80,6 +115,10 @@ screen(){ var element = document.documentElement; this.$TOOL.screen(element) + }, + //标记已读 + markRead(){ + this.msgList = [] } } } diff --git a/src/router/index.js b/src/router/index.js index fe9e51e0..27ca832b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -33,6 +33,13 @@ const routes = [{ } ] }, + { + path: "/cmd", + component: () => import(/* webpackChunkName: "login" */ '@/views/other/cmd'), + meta: { + title: "CMD" + } + }, { path: "/login", component: () => import(/* webpackChunkName: "login" */ '@/views/login'), @@ -42,7 +49,7 @@ const routes = [{ } ] -//系统路由 +//系统特殊路由 const routes_404 = { path: "/:pathMatch(.*)*", name: "404", diff --git a/src/style/style.less b/src/style/style.less index 179ed189..4e2ae8b0 100644 --- a/src/style/style.less +++ b/src/style/style.less @@ -1,4 +1,9 @@ #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;} /* 全局滚动条样式 */ @@ -36,7 +41,7 @@ .adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;} .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 .badge .el-badge__content {top:15px} .adminui-header .panel-item:hover {background: #eee;} @@ -45,8 +50,15 @@ .adminui-header .user {display: flex;align-items: center;} .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 li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;} diff --git a/src/utils/echarts-theme-T.js b/src/utils/echarts-theme-T.js new file mode 100644 index 00000000..8dbc7057 --- /dev/null +++ b/src/utils/echarts-theme-T.js @@ -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 diff --git a/src/views/home/components/C3.vue b/src/views/home/components/C3.vue index b8db83a6..514baa00 100644 --- a/src/views/home/components/C3.vue +++ b/src/views/home/components/C3.vue @@ -1,15 +1,61 @@ diff --git a/src/views/home/gridLayout.vue b/src/views/home/gridLayout.vue index 6d8680fa..8cd51389 100644 --- a/src/views/home/gridLayout.vue +++ b/src/views/home/gridLayout.vue @@ -267,7 +267,7 @@ cursor: pointer; } .diy-grid-layout-set div span{ - background: #b1e0ff; + background: #d6efff; } .diy-grid-layout-set .col { display: flex; diff --git a/src/views/home/index.vue b/src/views/home/index.vue index ad44b35a..36ae07c7 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -59,7 +59,7 @@ return {} }, mounted(){ - + }, methods: { diff --git a/src/views/other/cmd.vue b/src/views/other/cmd.vue new file mode 100644 index 00000000..48cb2bc0 --- /dev/null +++ b/src/views/other/cmd.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/views/template/blank.vue b/src/views/template/blank.vue new file mode 100644 index 00000000..2bdcc222 --- /dev/null +++ b/src/views/template/blank.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/src/views/list.vue b/src/views/template/list.vue similarity index 97% rename from src/views/list.vue rename to src/views/template/list.vue index db9570e5..a6bb7717 100644 --- a/src/views/list.vue +++ b/src/views/template/list.vue @@ -24,7 +24,7 @@ - + diff --git a/src/views/show.vue b/src/views/template/show.vue similarity index 100% rename from src/views/show.vue rename to src/views/template/show.vue diff --git a/src/views/vab/drag.vue b/src/views/vab/drag.vue new file mode 100644 index 00000000..77070274 --- /dev/null +++ b/src/views/vab/drag.vue @@ -0,0 +1,117 @@ + + + + +