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-28 16:44:41 +08:00
parent 4c3f7b4815
commit f315950d78
14 changed files with 259 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/json/user.json
View File

@ -20,6 +20,14 @@
"title": "拖拽排序"
},
"component": "vab/drag"
},
{
"path": "/template/chart",
"name": "chart",
"meta": {
"title": "图表 Echarts"
},
"component": "vab/chart"
}
]
},

15
src/api/index.js
View File

@ -1,11 +1,22 @@
import config from "@/config";
import http from "@/utils/request";
/**
* 所有接口集合
* 每个接口对象需含有以下字段
* @url 接口的URL地址
* @name 接口名称
* @get|post 返回请求接口的函数
*/
const api = {
user: {
info: async function(){
return await http.get(`${config.apiUrl}/json/user.json`);
info: {
url: `${config.apiUrl}/json/user.json`,
name: "登录获取用户菜单和权限",
get: async function(){
return await http.get(this.url);
}
}
}
}

1
src/components/scEcharts/index.vue
View File

@ -8,6 +8,7 @@
echarts.registerTheme('T', T);
export default {
...echarts,
name: "scEcharts",
props: {
height: { type: String, default: "100%" },

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

@ -53,7 +53,7 @@
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="userInfo">个人设置</el-dropdown-item>
<el-dropdown-item command="uc">个人设置</el-dropdown-item>
<el-dropdown-item command="cmd">CMD</el-dropdown-item>
<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
</el-dropdown-menu>
@ -100,6 +100,9 @@
methods: {
//个人信息
handleUser(command) {
if(command == "uc"){
this.$router.push({path: '/usercenter'});
}
if(command == "outLogin"){
this.$router.replace({path: '/login'});
}

11
src/layout/components/tags.vue
View File

@ -18,6 +18,7 @@
<li @click="closeOtherTabs()"><i class="el-icon-folder-delete"></i>关闭其他标签</li>
<hr>
<li @click="screen()"><i class="el-icon-full-screen"></i>全屏当前标签</li>
<li @click="openWindow()"><i class="el-icon-copy-document"></i>在新的窗口中打开</li>
</ul>
</transition>
</template>
@ -193,6 +194,16 @@
}
var element = document.getElementById('adminui-main')
this.$TOOL.screen(element)
},
//新窗口打开
openWindow(){
var nowTag = this.contextMenuItem;
var url = nowTag.href || '/';
if(!nowTag.meta.affix){
this.closeSelectedTag(nowTag)
}
window.open(url);
this.contextMenuVisible = false
}
}
}

10
src/router/index.js
View File

@ -27,7 +27,15 @@ const routes = [{
title: "控制台",
affix: true
},
component: () => import(/* webpackChunkName: "home" */ '@/views/home/index'),
component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
},
{
name: "userCenter",
path: "/usercenter",
meta: {
title: "个人信息"
},
component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
}
]
}

12
src/style/style.less
View File

@ -73,6 +73,18 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
/* USERCENTER */
.user-info {padding:20px 40px;}
.user-info-top {text-align: center;}
.user-info-top h2 {margin-top:10px;font-size: 24px;}
.user-info-top p {color: #999;margin-top:5px;}
.user-info-top button {margin-top:10px;}
.user-info-main {padding:20px 0;}
.user-info-main li {list-style-type:none;line-height: 2;font-size: 14px;}
.user-info-main li i {margin-right: 10px;}
.user-info-bottom {border-top: 1px solid #e6e6e6;}
.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
.el-menu {border: none!important;}
.el-menu-item.is-active {background: #ecf5ff;}
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}

42
src/views/home/components/C1.vue
View File

@ -28,10 +28,6 @@
tooltip: {
trigger: 'axis'
},
legend: {
data: ['支出', '收入'],
right: 13,
},
xAxis: {
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六'],
@ -43,39 +39,29 @@
"show": false
}
}],
series: [{
name: '支出',
type: 'line',
symbolSize: 6,
smooth: true,
lineStyle: {
normal: {
shadowColor: 'rgba(0,0,0,0.2)',
shadowBlur: 15,
shadowOffsetY: 20
}
},
'areaStyle': {
'opacity': 0.2
},
data: [35, 10, 36, 5, 5, 20],
},
series: [
{
name: '收入',
type: 'line',
symbolSize: 6,
smooth: true,
lineStyle: {
normal: {
shadowColor: 'rgba(0,0,0,0.2)',
shadowBlur: 15,
shadowOffsetY: 20
}
width: 8,
shadowColor: 'rgba(0,0,0,0.2)',
shadowBlur: 15,
shadowOffsetY: 15,
color: new scEcharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#409EFF'
}, {
offset: 1,
color: '#36CE9E'
}])
},
'areaStyle': {
'opacity': 0.2
'opacity': 0
},
data: [15, 15, -25, 20, 20, 8],
data: [15, 15, 35, 5, 35, 15],
},
],
};

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

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

2
src/views/login.vue
View File

@ -99,7 +99,7 @@
})
},
login: async function() {
var userInfo = await this.$API.user.info();
var userInfo = await this.$API.user.info.get();
this.$TOOL.data.set("user", userInfo.data);
this.$router.replace({
path: '/'

7
src/views/other/cmd.vue
View File

@ -17,6 +17,9 @@
<el-tab-pane label="config">
<pre class="code">{{json.config}}</pre>
</el-tab-pane>
<el-tab-pane label="api">
<pre class="code">{{json.api}}</pre>
</el-tab-pane>
</el-tabs>
@ -32,7 +35,8 @@
json: {
user: null,
grid: null,
config: null
config: null,
api: null,
}
}
},
@ -40,6 +44,7 @@
this.json.user = this.$TOOL.data.get("user");
this.json.grid = this.$TOOL.data.get("grid")||'null';
this.json.config = this.$CONFIG;
this.json.api = this.$API;
},
methods: {
clear_all(){

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

@ -90,7 +90,7 @@
Show
},
async created() {
var userInfo = await this.$API.user.info();
var userInfo = await this.$API.user.info.get();
var _this = this;
setTimeout(function() {
_this.tableData = userInfo.data.menuList;

115
src/views/userCenter/index.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<el-main>
<el-row :gutter="15">
<el-col :span="8">
<el-card shadow="never">
<div class="user-info">
<div class="user-info-top">
<el-avatar :size="80" src="images/avatar.jpg"></el-avatar>
<h2>{{ form.name||'-' }}</h2>
<p>{{ form.about||'无签名' }}</p>
<el-button type="primary" round icon="el-icon-collection-tag" size="medium">Administrator</el-button>
</div>
<div class="user-info-main">
<ul>
<li><label><i class="el-icon-user"></i></label><span>81883387@qq.com</span></li>
<li><label><i class="el-icon-present"></i></label><span>1988-05-07</span></li>
<li><label><i class="el-icon-male"></i></label><span>男</span></li>
<li><label><i class="el-icon-location-outline"></i></label><span>中国/上海/金山</span></li>
<li><label><i class="el-icon-office-building"></i></label><span>集团/上海分公司/软件研发部/摸鱼组</span></li>
<li><label><i class="el-icon-coin"></i></label><span>超级管理员</span></li>
</ul>
</div>
<div class="user-info-bottom">
<h2>标签</h2>
<el-space wrap>
<el-tag>HTML</el-tag>
<el-tag>CSS</el-tag>
<el-tag>JavaScript</el-tag>
<el-tag>NodeJs</el-tag>
<el-tag>Vue</el-tag>
<el-tag>Photoshop</el-tag>
</el-space>
</div>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-card shadow="never">
<el-tabs tab-position="top">
<el-tab-pane label="基本信息">
<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
<el-form-item label="账号">
<el-input v-model="form.user" disabled></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="保密" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="个性签名">
<el-input v-model="form.about" type="textarea"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">保存</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="个人设置">
<el-form ref="form" :model="form" label-width="120px" style="width: 460px;margin-top:20px;">
<el-form-item label="布局">
<el-select v-model="config.theme" placeholder="请选择">
<el-option label="常规" value="0"></el-option>
<el-option label="分栏" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="控制台自由布局">
<el-switch v-model="config.diy"></el-switch>
</el-form-item>
<el-form-item label="多标签">
<el-switch v-model="config.tags"></el-switch>
</el-form-item>
<el-form-item label="系统通知">
<el-switch v-model="config.msg"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary">保存</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
export default {
name: 'userCenter',
data() {
return {
form: {
user: "81883387@qq.com",
name: "Sakuya",
sex: "1",
about: "正所谓富贵险中求"
},
config: {
theme: '1',
diy: true,
tags: true,
msg: true
}
}
}
}
</script>
<style>
</style>

62
src/views/vab/chart.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<el-main>
<el-alert title="感谢百度Echarts组件, SCUI经过封装后在VUE里使用更方便而且暴露Echarts所有方法,具体请查看本文件" type="success" style="margin-bottom:20px;"></el-alert>
<el-card shadow="never">
<scEcharts height="300px" :option="option"></scEcharts>
</el-card>
</el-main>
</template>
<script>
import scEcharts from '@/components/scEcharts';
/**
* 引入组件 @/components/scEcharts
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
* 支持props包括 height，width，option
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
*/
export default {
name: 'chart',
components: {
scEcharts
},
data() {
return {
option: {
title: {
text: 'Echarts Demo',
subtext: '优雅的经过scEcharts组件封装',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '20px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '20px',
}]
}
}
}
}
</script>
<style>
</style>