zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sc 2021-04-27 15:51:10 +08:00
parent 00c727d9f1
commit 6af98ff122
14 changed files with 839 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

26
public/json/user.json
View File

@ -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"
}
]
},

47
src/layout/components/head.vue
View File

@ -17,16 +17,33 @@
<div class="setting panel-item">
<i class="el-icon-setting"></i>
</div>
<el-popover placement="bottom" :width="300" trigger="click">
<el-popover placement="bottom" :width="360" trigger="click">
<template #reference>
<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>
</el-badge>
</div>
</template>
<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>
</el-popover>
<el-dropdown trigger="click" @command="handleUser">
@ -37,6 +54,7 @@
<template #dropdown>
<el-dropdown-menu>
<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-menu>
</template>
@ -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 = []
}
}
}

9
src/router/index.js
View File

@ -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",

18
src/style/style.less
View File

@ -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;}

500
src/utils/echarts-theme-T.js Normal file
View File

@ -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

50
src/views/home/components/C3.vue
View File

@ -1,15 +1,61 @@
<template>
<el-empty description="描述文字"></el-empty>
<div style="height: 200px" ref="demo"></div>
</template>
<script>
import * as echarts from 'echarts';
import T from '@/utils/echarts-theme-T.js';
echarts.registerTheme('T', T);
export default {
title:"模块3",
components: {
echarts
},
props: {
msg: String
},
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>

2
src/views/home/gridLayout.vue
View File

@ -267,7 +267,7 @@
cursor: pointer;
}
.diy-grid-layout-set div span{
background: #b1e0ff;
background: #d6efff;
}
.diy-grid-layout-set .col {
display: flex;

2
src/views/home/index.vue
View File

@ -59,7 +59,7 @@
return {}
},
mounted(){
},
methods: {

63
src/views/other/cmd.vue Normal file
View File

@ -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>

19
src/views/template/blank.vue Normal file
View File

@ -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>

2
src/views/list.vue → src/views/template/list.vue
View File

@ -24,7 +24,7 @@
<el-main id="tableMain">
<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 label="显示名称" prop="meta.title" width="200"></el-table-column>
<el-table-column label="图标" width="80">

0
src/views/show.vue → src/views/template/show.vue
View File

117
src/views/vab/drag.vue Normal file
View File

@ -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>