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

2023-3-20

Browse Source
master
xy 3 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
})
}
},
}
</script>

427
src/layout/index.vue
Unescape View File

@ -2,11 +2,21 @@
<div :class="classObj" class="app-wrapper">
<div class="top-head-bar">
<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>
<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>
<div class="top-head-bar__user">
@ -17,31 +27,40 @@
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
系统首页
</el-dropdown-item>
<el-dropdown-item> 系统首页 </el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;">退出</span>
<el-dropdown-item divided @click.native="logout">
<span style="display: block">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</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'">
<el-scrollbar style="padding-top: 50px;height: 100%;">
<el-scrollbar style="padding-top: 50px; height: 100%">
<worker></worker>
</el-scrollbar>
</template>
<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 v-else>
<sidebar class="sidebar-container" />
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}" v-if="false">
<div :class="{ 'fixed-header': fixedHeader }" v-if="false">
<navbar />
</div>
<el-scrollbar style="height: 100%">
@ -53,231 +72,247 @@
</template>
<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,
Sidebar,
AppMain
} from './components'
import ResizeMixin from './mixin/ResizeHandler'
import worker from "./components/worker/index.vue"
export default {
name: 'Layout',
components: {
Navbar,
Sidebar,
AppMain,
worker
AppMain,
worker,
},
mixins: [ResizeMixin],
data() {
return {
active: 0,
};
},
computed: {
sidebar() {
return this.$store.state.app.sidebar;
},
device() {
return this.$store.state.app.device;
},
mixins: [ResizeMixin],
data(){
fixedHeader() {
return this.$store.state.settings.fixedHeader;
},
classObj() {
return {
active:0
}
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
computed: {
sidebar() {
return this.$store.state.app.sidebar
},
device() {
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: {
async logout() {
await this.$store.dispatch("user/logout");
this.$router.push(`/login?redirect=${this.$route.fullPath}`);
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', {
withoutAnimation: false
})
},
menuClick(item){
this.$router.push(item.path)
console.log(this.$route.path)
}
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", {
withoutAnimation: false,
});
},
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>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.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";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
z-index: 9999;
&.mobile.openSidebar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
}
&__logo{
height: 50px;
grid-area:logo;
display: flex;
align-items: center;
.top-head-bar {
background: #338de3ff;
height: 50px;
filter: drop-shadow(0 1px 1px #49a0f3);
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;
}
@media screen and (max-width: 1000px){
&__logo{
display: none;
}
}
z-index: 9999;
position: fixed;
top: 0;
left: 0;
right: 0;
&__user{
grid-area: user;
&__logo {
height: 50px;
grid-area: logo;
display: flex;
align-items: center;
padding: 0 20px;
}
@media screen and (max-width: 1000px) {
&__logo {
display: none;
}
}
ul{
grid-area:menu;
height: 100%;
display: flex;
justify-self: flex-end;
align-items: flex-end;
&__user {
grid-area: user;
}
li{
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;
ul {
grid-area: menu;
height: 100%;
display: flex;
justify-self: flex-end;
align-items: flex-end;
padding: 0 20px;
position: relative;
li {
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{
content:"";
background: #338DE3FF;
height: 3px;
width: 0;
border-radius: 1px;
transition: all 300ms ease-out;
padding: 0 20px;
position: relative;
position: absolute;
left: 6px;
bottom: 2px;
}
&+li{
margin-left: 20px;
}
&:hover{
background: #fff;
color:rgb(100,100,100);
&::after {
content: "";
background: #338de3ff;
height: 3px;
width: 0;
border-radius: 1px;
transition: all 300ms ease-out;
&::after{
width: calc(100% - 12px);
}
}
position: absolute;
left: 6px;
bottom: 2px;
}
& + li {
margin-left: 20px;
}
.li-active{
&:hover {
background: #fff;
color:rgb(100,100,100);
color: rgb(100, 100, 100);
&::after{
&::after {
width: calc(100% - 12px);
}
}
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.li-active {
background: #fff;
color: rgb(100, 100, 100);
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
&::after {
width: calc(100% - 12px);
}
}
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px)
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.mobile .fixed-header {
width: 100%;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.avatar-container {
height: 100%;
margin-right: 30px;
.mobile .fixed-header {
width: 100%;
}
.avatar-wrapper{
height: 100%;
display: flex;
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;
.avatar-container {
height: 100%;
margin-right: 30px;
padding: 0 6px;
}
.el-icon-caret-bottom {
cursor: pointer;
color: #FFF;
position: absolute;
right: -20px;
font-size: 12px;
}
.avatar-wrapper {
height: 100%;
display: flex;
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;
}
.el-icon-caret-bottom {
cursor: pointer;
color: #fff;
position: absolute;
right: -20px;
font-size: 12px;
}
}
}
</style>

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

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

8
src/utils/auth.js
Unescape View File

@ -1,8 +1,8 @@
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)
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);
return Cookies.set(TokenKey, token)
}
export function removeToken() {
export function removeToken(TokenKey = 'hjjc_workerbench_web_token') {
sessionStorage.clear();
return Cookies.remove(TokenKey)

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

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

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

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

Write Preview
Loading…
Cancel
Save