wangyifang
/
hjjc-workbench-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-3-20

Browse Source
dev
xy 4 years ago
parent 7533ce5a48
commit 1b6e53f30d
8 changed files with 278 additions and 214 deletions
Show Stats Download Patch File Download Diff File

13
src/api/system/ossLogin.js
Unescape View File

@ -0,0 +1,13 @@
import request from "@/utils/request";
import store from '@/store';
export function ossLogin(){
return request({
isLoading:false,
method:'post',
url:'/api/admin/auth/oss-login',
data:{
id:store.state.user.userId,
username:store.state.user.username
}
})
}

2
src/layout/components/worker/index.vue
Unescape View File

@ -80,7 +80,7 @@ export default {
}) })
return item return item
}) })
} },
} }
</script> </script>

427
src/layout/index.vue
Unescape View File

@ -2,11 +2,21 @@
<div :class="classObj" class="app-wrapper"> <div :class="classObj" class="app-wrapper">
<div class="top-head-bar"> <div class="top-head-bar">
<div class="top-head-bar__logo"> <div class="top-head-bar__logo">
<img style="height: 20px;" src="../assets/logo.png" alt="logo"> <img style="height: 20px" src="../assets/logo.png" alt="logo" />
</div> </div>
<ul> <ul>
<li v-for="item in $store.state.permission.rootMenu" :class="{'li-active':new RegExp(`^${item.path}`).test($route.path) && $route.path !== '/contract/system/menu'}" @click="menuClick(item)">{{ item.name }}</li> <li
v-for="item in $store.state.permission.rootMenu"
:class="{
'li-active':
new RegExp(`^${item.path}`).test($route.path) &&
$route.path !== '/contract/system/menu',
}"
@click="menuClick(item)"
>
{{ item.name }}
</li>
</ul> </ul>
<div class="top-head-bar__user"> <div class="top-head-bar__user">
@ -17,31 +27,40 @@
</div> </div>
<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/"> <router-link to="/">
<el-dropdown-item> <el-dropdown-item> 系统首页 </el-dropdown-item>
系统首页
</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item divided> <el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出</span> <span style="display: block">退出</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <div
v-if="device === 'mobile' && sidebar.opened"
class="drawer-bg"
@click="handleClickOutside"
/>
<template v-if="$route.path === '/worker'"> <template v-if="$route.path === '/worker'">
<el-scrollbar style="padding-top: 50px;height: 100%;"> <el-scrollbar style="padding-top: 50px; height: 100%">
<worker></worker> <worker></worker>
</el-scrollbar> </el-scrollbar>
</template> </template>
<template v-else-if="$route.path === '/bookmanage'"> <template v-else-if="$route.path === '/bookmanage'">
<iframe ref="bookIframe" style="width: 100%;height: 100%;padding-top: 50px;" src="http://localhost:8014/admin/#/">你的浏览器不支持该iframe</iframe> <div style="width: 100%; height: 100%;padding-top: 50px;overflow-x: hidden;">
<iframe
ref="bookIframe"
style="width: calc(100% + 12px); height: 100%;"
src="http://localhost:8014/admin/#/"
>你的浏览器不支持该iframe</iframe
>
</div>
</template> </template>
<template v-else> <template v-else>
<sidebar class="sidebar-container" /> <sidebar class="sidebar-container" />
<div class="main-container"> <div class="main-container">
<div :class="{'fixed-header':fixedHeader}" v-if="false"> <div :class="{ 'fixed-header': fixedHeader }" v-if="false">
<navbar /> <navbar />
</div> </div>
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
@ -53,231 +72,247 @@
</template> </template>
<script> <script>
import { import { ossLogin } from "@/api/system/ossLogin";
import { Navbar, Sidebar, AppMain } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import worker from "./components/worker/index.vue";
export default {
name: "Layout",
components: {
Navbar, Navbar,
Sidebar, Sidebar,
AppMain AppMain,
} from './components' worker,
import ResizeMixin from './mixin/ResizeHandler' },
import worker from "./components/worker/index.vue" mixins: [ResizeMixin],
export default { data() {
name: 'Layout', return {
components: { active: 0,
Navbar, };
Sidebar, },
AppMain, computed: {
worker sidebar() {
return this.$store.state.app.sidebar;
},
device() {
return this.$store.state.app.device;
}, },
mixins: [ResizeMixin], fixedHeader() {
data(){ return this.$store.state.settings.fixedHeader;
},
classObj() {
return { return {
active:0 hideSidebar: !this.sidebar.opened,
} openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
}, },
computed: { },
sidebar() { methods: {
return this.$store.state.app.sidebar async logout() {
}, await this.$store.dispatch("user/logout");
device() { this.$router.push(`/login?redirect=${this.$route.fullPath}`);
return this.$store.state.app.device
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
},
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
}
}, },
methods: { handleClickOutside() {
handleClickOutside() { this.$store.dispatch("app/closeSideBar", {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false,
withoutAnimation: false });
})
},
menuClick(item){
this.$router.push(item.path)
console.log(this.$route.path)
}
}, },
mounted() {
menuClick(item) {
this.$router.push(item.path);
}, },
} },
mounted() {},
watch: {
"$route.path": {
handler: function (url) {
if (url === "/bookmanage") {
this.$nextTick(() => {
setTimeout(() => {
this.$refs["bookIframe"].contentWindow.postMessage(
{
key: "login",
data: {
id:this.$store.state.user.userId,
username:this.$store.state.user.username
},
},
"*"
);
},500)
});
}
},
immediate: true,
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/styles/mixin.scss"; @import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss"; @import "~@/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar { .app-wrapper {
position: fixed; @include clearfix;
top: 0; position: relative;
} height: 100%;
} width: 100%;
.top-head-bar{
background: #338DE3FF;
height: 50px;
filter: drop-shadow(0 1px 1px #49a0f3);
display: grid;
grid-template-columns: auto .5fr 6fr .2fr 1fr;
grid-template-rows: 50px;
grid-template-areas:
"logo . menu . user";
z-index: 9999; &.mobile.openSidebar {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; }
right: 0; }
&__logo{ .top-head-bar {
height: 50px; background: #338de3ff;
grid-area:logo; height: 50px;
display: flex; filter: drop-shadow(0 1px 1px #49a0f3);
align-items: center; display: grid;
grid-template-columns: auto 0.5fr 6fr 0.2fr 1fr;
grid-template-rows: 50px;
grid-template-areas: "logo . menu . user";
padding:0 20px; z-index: 9999;
} position: fixed;
@media screen and (max-width: 1000px){ top: 0;
&__logo{ left: 0;
display: none; right: 0;
}
}
&__user{ &__logo {
grid-area: user; height: 50px;
grid-area: logo;
display: flex;
align-items: center;
padding: 0 20px;
}
@media screen and (max-width: 1000px) {
&__logo {
display: none;
} }
}
ul{ &__user {
grid-area:menu; grid-area: user;
height: 100%; }
display: flex;
justify-self: flex-end;
align-items: flex-end;
li{ ul {
color:#fff; grid-area: menu;
height: 40px; height: 100%;
line-height: 40px; display: flex;
list-style: none; justify-self: flex-end;
transition: all 300ms ease-out; align-items: flex-end;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
padding: 0 20px; li {
position: relative; color: #fff;
height: 40px;
line-height: 40px;
list-style: none;
transition: all 300ms ease-out;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
&::after{ padding: 0 20px;
content:""; position: relative;
background: #338DE3FF;
height: 3px;
width: 0;
border-radius: 1px;
transition: all 300ms ease-out;
position: absolute; &::after {
left: 6px; content: "";
bottom: 2px; background: #338de3ff;
} height: 3px;
&+li{ width: 0;
margin-left: 20px; border-radius: 1px;
} transition: all 300ms ease-out;
&:hover{
background: #fff;
color:rgb(100,100,100);
&::after{ position: absolute;
width: calc(100% - 12px); left: 6px;
} bottom: 2px;
} }
& + li {
margin-left: 20px;
} }
.li-active{ &:hover {
background: #fff; background: #fff;
color:rgb(100,100,100); color: rgb(100, 100, 100);
&::after{ &::after {
width: calc(100% - 12px); width: calc(100% - 12px);
} }
} }
} }
} .li-active {
.drawer-bg { background: #fff;
background: #000; color: rgb(100, 100, 100);
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header { &::after {
position: fixed; width: calc(100% - 12px);
top: 0; }
right: 0; }
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
} }
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.hideSidebar .fixed-header { .fixed-header {
width: calc(100% - 54px) position: fixed;
} top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.mobile .fixed-header { .hideSidebar .fixed-header {
width: 100%; width: calc(100% - 54px);
} }
.avatar-container { .mobile .fixed-header {
height: 100%; width: 100%;
margin-right: 30px; }
.avatar-wrapper{ .avatar-container {
height: 100%; height: 100%;
display: flex; margin-right: 30px;
align-items: center;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
&__name{
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px; .avatar-wrapper {
} height: 100%;
.el-icon-caret-bottom { display: flex;
cursor: pointer; align-items: center;
color: #FFF; .user-avatar {
position: absolute; cursor: pointer;
right: -20px; width: 40px;
font-size: 12px; height: 40px;
} border-radius: 10px;
} }
} &__name {
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px;
}
.el-icon-caret-bottom {
cursor: pointer;
color: #fff;
position: absolute;
right: -20px;
font-size: 12px;
}
}
}
</style> </style>

16
src/store/modules/user.js
Unescape View File

@ -16,7 +16,9 @@ import {
const getDefaultState = () => { const getDefaultState = () => {
return { return {
token: getToken(), token: getToken(),
userId:'',
name: '', name: '',
username:'',
avatar: '', avatar: '',
roles: [] roles: []
} }
@ -34,6 +36,12 @@ const mutations = {
SET_NAME: (state, name) => { SET_NAME: (state, name) => {
state.name = name state.name = name
}, },
SET_USERNAME:(state,username) => {
state.username = username
},
SET_USERID:(state,id) => {
state.userId = id
},
SET_AVATAR: (state, avatar) => { SET_AVATAR: (state, avatar) => {
state.avatar = avatar state.avatar = avatar
}, },
@ -58,7 +66,7 @@ const actions = {
}).then(response => { }).then(response => {
//console.log(response) //console.log(response)
const { const {
data data
} = response; } = response;
@ -111,13 +119,15 @@ const actions = {
} }
response["roles"] = ["admin"]; response["roles"] = ["admin"];
const { const {
id,
roles, roles,
name, name,
username,
avatar avatar
} = response } = response
commit('SET_USERNAME',username)
commit('SET_USERID',id)
commit('SET_ROLES', roles) commit('SET_ROLES', roles)
commit('SET_NAME', name) commit('SET_NAME', name)
commit('SET_AVATAR', avatar) commit('SET_AVATAR', avatar)

8
src/utils/auth.js
Unescape View File

@ -1,8 +1,8 @@
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
const TokenKey = 'HeTongGuanli_hjjc_token' //const TokenKey = 'HeTongGuanli_hjjc_token'
export function getToken() { export function getToken(TokenKey = 'hjjc_workerbench_web_token') {
//return Cookies.get(TokenKey) //return Cookies.get(TokenKey)
if (Cookies.get(TokenKey)) { if (Cookies.get(TokenKey)) {
@ -12,12 +12,12 @@ export function getToken() {
} }
} }
export function setToken(token) { export function setToken(token,TokenKey = 'hjjc_workerbench_web_token') {
sessionStorage.setItem(TokenKey, token); sessionStorage.setItem(TokenKey, token);
return Cookies.set(TokenKey, token) return Cookies.set(TokenKey, token)
} }
export function removeToken() { export function removeToken(TokenKey = 'hjjc_workerbench_web_token') {
sessionStorage.clear(); sessionStorage.clear();
return Cookies.remove(TokenKey) return Cookies.remove(TokenKey)

12
src/views/system/worker.vue
Unescape View File

@ -2,7 +2,7 @@
<div style="padding: 0 10px 20px 10px"> <div style="padding: 0 10px 20px 10px">
<el-row :gutter="4"> <el-row :gutter="4">
<el-col :span="4"> <el-col :span="4">
<Card style="height: 100%"> <Card style="height: 100%;" :style="{'opacity':isDrag ? '0.4' : '1' }">
<template v-slot:title> <template v-slot:title>
<p>组件</p> <p>组件</p>
</template> </template>
@ -11,10 +11,11 @@
:class="{ 'cpn-name__item--disable': statusFormat(item.i) }" :class="{ 'cpn-name__item--disable': statusFormat(item.i) }"
v-for="item in layout" v-for="item in layout"
:draggable="!statusFormat(item.i)" :draggable="!statusFormat(item.i)"
@dragstart="isDrag = true"
@dragend="dragEnd(item, $event)" @dragend="dragEnd(item, $event)"
> >
<i class="el-icon-folder-remove"></i> <i class="el-icon-folder-remove"></i>
<span>{{ item.i }}</span> <span>{{ item.component.name }}</span>
<Button <Button
v-show="statusFormat(item.i)" v-show="statusFormat(item.i)"
type="error" type="error"
@ -28,7 +29,7 @@
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<Card> <Card >
<template v-slot:title> <template v-slot:title>
<div style="display: flex;justify-content: space-between;align-items: center;"> <div style="display: flex;justify-content: space-between;align-items: center;">
<p>布局</p> <p>布局</p>
@ -109,7 +110,7 @@ export default {
return { return {
layout, layout,
layoutList: [], layoutList: [],
isDragEnter: false, isDrag: false,
grid: { grid: {
x: 0, x: 0,
@ -119,6 +120,7 @@ export default {
}, },
methods: { methods: {
dragEnd(item, e) { dragEnd(item, e) {
this.isDrag = false
if (e.clientX >= this.grid.x && e.clientY >= this.grid.y) { if (e.clientX >= this.grid.x && e.clientY >= this.grid.y) {
this.layoutList.push(item); this.layoutList.push(item);
} }
@ -205,6 +207,8 @@ export default {
} }
} }
.fade-in { .fade-in {
animation: fade-in 800ms cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in 800ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
} }

4
src/views/system/workerComponents/card1.vue
Unescape View File

@ -5,11 +5,9 @@
<i class="el-icon-more" style="float: right;font-size: 20px;"></i> <i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div> </div>
<div> <div style="display: flex;flex-wrap: wrap;align-items: center;justify-content: space-evenly;align-content: center;">
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress>
</div>
<div>
<el-progress type="circle" :percentage="70" status="warning"></el-progress> <el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>
</div> </div>

10
src/views/system/workerComponents/card4.vue
Unescape View File

@ -1,11 +1,11 @@
<template> <template>
<el-card class="box-card" shadow="hover"> <el-card id="line-chart-card" class="box-card" shadow="hover">
<div slot="header"> <div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表1</span> <span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表1</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i> <i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div> </div>
<div id="line-chart" style="width: 100%;height: 200px;"> <div id="line-chart" style="width: 100%;">
</div> </div>
</el-card> </el-card>
</template> </template>
@ -27,6 +27,7 @@ export default {
}, },
data() { data() {
return { return {
height:200,
lineChartOption: { lineChartOption: {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
@ -93,12 +94,15 @@ export default {
}, },
methods: { methods: {
initChart(id,options){ initChart(id,options){
let cardDom = document.getElementById('line-chart-card');
let cardTitleH = 58;
let dom = document.getElementById(id) let dom = document.getElementById(id)
echarts.init(dom,"macarons").setOption(options) echarts.init(dom,"macarons").setOption(options)
const elementResize = ElementResize({ const elementResize = ElementResize({
strategy:'scroll' strategy:'scroll'
}) })
elementResize.listenTo(dom,ele => { elementResize.listenTo(cardDom,ele => {
dom.style.height = cardDom.getBoundingClientRect().height - 40 - cardTitleH + 'px'
echarts.init(dom).resize(); echarts.init(dom).resize();
}) })
} }

Write Preview
Loading…
Cancel
Save