暂存主页+报警
This commit is contained in:
168
src/views/abnormalWarning/components/Navbar.vue
Normal file
168
src/views/abnormalWarning/components/Navbar.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="logo-container">
|
||||
<img
|
||||
src="../../../assets/images/cnbm.png"
|
||||
style="
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
position: relative;
|
||||
top: 9px;
|
||||
margin-right: 8px;
|
||||
"
|
||||
alt="" />
|
||||
MES产品化重构
|
||||
</div>
|
||||
|
||||
<top-nav id="warnmenu-container" class="warnmenu-container" v-if="topNav" />
|
||||
|
||||
<div style="padding-top: 5px; padding-right: 38px">
|
||||
<navbar-right :blackTitle="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import TopNav from './TopNav';
|
||||
import Hamburger from '@/components/Hamburger';
|
||||
import Screenfull from '@/components/Screenfull';
|
||||
import SizeSelect from '@/components/SizeSelect';
|
||||
import Search from '@/components/HeaderSearch';
|
||||
import NotifyMessage from '@/layout/components/Message';
|
||||
// import {getPath} from "@/utils/ruoyi";
|
||||
import NavbarRight from './NavbarRight.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TopNav,
|
||||
Hamburger,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search,
|
||||
NotifyMessage,
|
||||
NavbarRight,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['sidebar', 'avatar', 'nickname', 'device']),
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showSettings',
|
||||
value: val,
|
||||
});
|
||||
},
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar');
|
||||
},
|
||||
async logout() {
|
||||
this.$modal
|
||||
.confirm('确定注销并退出系统吗？', '提示')
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = getPath('/');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 84px; // 56/48
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
.logo-container {
|
||||
line-height: 84px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
font-size: 26px;
|
||||
padding-left: 40px;
|
||||
font-weight: 500;
|
||||
color: #0c0030;
|
||||
}
|
||||
|
||||
.warnmenu-container {
|
||||
position: absolute;
|
||||
left: 290px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 56px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 30px;
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user-nickname {
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/views/abnormalWarning/components/NavbarRight.vue
Normal file
142
src/views/abnormalWarning/components/NavbarRight.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
|
||||
<div class="home-icon" v-if="blackTitle">
|
||||
<!-- <svg-icon
|
||||
icon-class="home"
|
||||
style="font-size: 24px; cursor: pointer"
|
||||
@click="toHome" /> -->
|
||||
<svg-icon
|
||||
icon-class="alarm"
|
||||
style="font-size: 24px; cursor: pointer"
|
||||
@click="toHome" />
|
||||
</div>
|
||||
<!-- <div class="time-msg">
|
||||
<div class="line1">{{timeZone}} {{topTime}}</div>
|
||||
<div class="line2">{{topDate}}</div>
|
||||
</div> -->
|
||||
<div class="base-msg">
|
||||
<div class="avatar">
|
||||
<el-dropdown>
|
||||
<img
|
||||
:src="require(`../../../assets/images/choicepart/avatar.png`)"
|
||||
alt=""
|
||||
width="42"
|
||||
height="42"
|
||||
style="position: relative; top: 4px" />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item>
|
||||
<svg-icon icon-class="helpbtn" />
|
||||
帮助文档
|
||||
</el-dropdown-item> -->
|
||||
<el-dropdown-item @click.native="logout">
|
||||
<svg-icon icon-class="exitbtn" />
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="use-msg">
|
||||
<div class="line1">{{ nickname }}</div>
|
||||
<div class="line2">{{ dept }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import { getUser } from '@/api/system/user.js';
|
||||
import { getPath } from '@/utils/ruoyi';
|
||||
export default {
|
||||
name: 'navRight',
|
||||
data() {
|
||||
return {
|
||||
// topDate: '',
|
||||
// topTime: '',
|
||||
// timeZone: '',
|
||||
timer: '',
|
||||
dept: ' ',
|
||||
nickname: this.$store.getters.nickname,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
blackTitle: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserMsg();
|
||||
// this.getTime();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
// getTime() {
|
||||
// let _this = this;
|
||||
// this.timer = setInterval(function () {
|
||||
// _this.topDate = moment().format('YYYY/MM/DD');
|
||||
// let temp = moment().format('A-hh:mm').split('-');
|
||||
// _this.timeZone = temp[0];
|
||||
// _this.topTime = temp[1];
|
||||
// }, 1000);
|
||||
// },
|
||||
getUserMsg() {
|
||||
let id = this.$store.getters.userId;
|
||||
getUser(id).then((res) => {
|
||||
this.dept = res.data.dept ? res.data.dept.name : '';
|
||||
});
|
||||
},
|
||||
async logout() {
|
||||
this.$modal
|
||||
.confirm('确定注销并退出系统吗？', '提示')
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = getPath('/');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
toHome() {
|
||||
this.$router.push({ path: '/' });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.right-msg {
|
||||
float: right;
|
||||
height: 84px;
|
||||
font-size: 14px;
|
||||
.time-msg {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.home-icon {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
vertical-align: top;
|
||||
line-height: 84px;
|
||||
}
|
||||
.base-msg {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.use-msg {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.line1 {
|
||||
height: 19px;
|
||||
}
|
||||
.line2 {
|
||||
height: 19px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
267
src/views/abnormalWarning/components/TopNav.vue
Normal file
267
src/views/abnormalWarning/components/TopNav.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
mode="horizontal"
|
||||
@select="handleSelect">
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item
|
||||
:style="{ '--theme': theme }"
|
||||
:index="item.path"
|
||||
:key="index"
|
||||
v-if="index < visibleNumber">
|
||||
<!-- <svg-icon :icon-class="item.meta.icon" /> -->
|
||||
<span class="menu-box">
|
||||
<span class="menu-dot"></span>
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<!-- 顶部菜单超出数量折叠 -->
|
||||
<el-submenu
|
||||
:style="{ '--theme': theme }"
|
||||
index="more"
|
||||
v-if="topMenus.length > visibleNumber">
|
||||
<template slot="title">更多菜单</template>
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item
|
||||
:index="item.path"
|
||||
:key="index"
|
||||
v-if="index >= visibleNumber">
|
||||
<!-- <svg-icon :icon-class="item.meta.icon" /> -->
|
||||
<span class="menu-box">
|
||||
<span class="menu-dot"></span>
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { constantRoutes } from '@/router';
|
||||
|
||||
// 隐藏侧边栏路由
|
||||
const hideList = ['/index', '/user/profile'];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 顶部栏初始数
|
||||
visibleNumber: 5,
|
||||
// 当前激活菜单的 index
|
||||
// currentIndex: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['choicepart']),
|
||||
currentIndex() {
|
||||
return this.choicepart;
|
||||
},
|
||||
theme() {
|
||||
return this.$store.state.settings.theme;
|
||||
},
|
||||
// 顶部显示菜单
|
||||
topMenus() {
|
||||
let topMenus = [];
|
||||
this.routers.map((menu) => {
|
||||
if (menu.hidden !== true) {
|
||||
// 兼容顶部栏一级菜单内部跳转
|
||||
if (menu.path === '/') {
|
||||
topMenus.push(menu.children[0]);
|
||||
} else {
|
||||
topMenus.push(menu);
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log('topMenus:', topMenus);
|
||||
return topMenus;
|
||||
},
|
||||
// 所有的路由信息
|
||||
routers() {
|
||||
return this.$store.state.permission.topbarRouters;
|
||||
},
|
||||
// 设置子路由
|
||||
childrenMenus() {
|
||||
const childrenMenus = [];
|
||||
this.routers.map((router) => {
|
||||
for (let item in router.children) {
|
||||
if (router.children[item].parentPath === undefined) {
|
||||
if (router.path === '/') {
|
||||
router.children[item].path = '/' + router.children[item].path;
|
||||
} else {
|
||||
if (!this.ishttp(router.children[item].path)) {
|
||||
router.children[item].path =
|
||||
router.path + '/' + router.children[item].path;
|
||||
}
|
||||
}
|
||||
router.children[item].parentPath = router.path;
|
||||
}
|
||||
childrenMenus.push(router.children[item]);
|
||||
}
|
||||
});
|
||||
return constantRoutes.concat(childrenMenus);
|
||||
},
|
||||
// 默认激活的菜单
|
||||
activeMenu() {
|
||||
const path = this.$route.path;
|
||||
let activePath = path;
|
||||
if (
|
||||
path !== undefined &&
|
||||
path.lastIndexOf('/') > 0 &&
|
||||
hideList.indexOf(path) === -1
|
||||
) {
|
||||
const tmpPath = path.substring(1, path.length);
|
||||
activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
|
||||
if (!this.$route.meta.link) {
|
||||
this.$store.dispatch('app/toggleSideBarHide', false);
|
||||
}
|
||||
} else if (!this.$route.children) {
|
||||
activePath = path;
|
||||
this.$store.dispatch('app/toggleSideBarHide', true);
|
||||
}
|
||||
this.activeRoutes(activePath);
|
||||
return activePath;
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('resize', this.setVisibleNumber);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setVisibleNumber);
|
||||
},
|
||||
mounted() {
|
||||
this.setVisibleNumber();
|
||||
},
|
||||
methods: {
|
||||
// 根据宽度计算设置显示栏数
|
||||
setVisibleNumber() {
|
||||
const width = window.innerWidth - 700;
|
||||
console.log(width);
|
||||
console.log('window.innerWidth:', window.innerWidth);
|
||||
this.visibleNumber = parseInt(width / 120);
|
||||
console.log('this.visibleNumber:', this.visibleNumber);
|
||||
},
|
||||
// 菜单选择事件
|
||||
handleSelect(key, keyPath) {
|
||||
// this.currentIndex = key;
|
||||
const route = this.routers.find((item) => item.path === key);
|
||||
console.log('route:', route);
|
||||
this.$store.dispatch('app/setChoicepart', key);
|
||||
this.toRouter(route);
|
||||
// if (this.ishttp(key)) {
|
||||
// // http(s):// 路径新窗口打开
|
||||
// window.open(key, '_blank');
|
||||
// console.log('aaaaaaaaaaaaaa');
|
||||
// } else if (!route || !route.children) {
|
||||
// // 没有子路由路径内部打开
|
||||
// this.$router.push({ path: key });
|
||||
// this.$store.dispatch('app/toggleSideBarHide', true);
|
||||
// console.log('bbbbbbbbbbbbbbb');
|
||||
// } else {
|
||||
// // 显示左侧联动菜单
|
||||
// this.activeRoutes(key);
|
||||
// if (!this.$route.meta.link) {
|
||||
// this.$store.dispatch('app/toggleSideBarHide', false);
|
||||
// }
|
||||
// console.log('cccccccccccccccc');
|
||||
// }
|
||||
},
|
||||
toRouter(item) {
|
||||
console.log(item);
|
||||
if (item.children) {
|
||||
this.toRouter(item.children[0]);
|
||||
} else {
|
||||
this.$router.push({ name: item.name });
|
||||
}
|
||||
},
|
||||
// 当前激活的路由
|
||||
activeRoutes(key) {
|
||||
const routes = [];
|
||||
if (this.childrenMenus && this.childrenMenus.length > 0) {
|
||||
this.childrenMenus.map((item) => {
|
||||
if (
|
||||
key === item.parentPath ||
|
||||
(key === 'index' && '' === item.path)
|
||||
) {
|
||||
routes.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (routes.length > 0) {
|
||||
this.$store.commit('SET_SIDEBAR_ROUTERS', routes);
|
||||
} else {
|
||||
this.$store.dispatch('app/toggleSideBarHide', true);
|
||||
}
|
||||
},
|
||||
ishttp(url) {
|
||||
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.warnmenu-container.el-menu--horizontal > .el-menu-item {
|
||||
float: left;
|
||||
height: 84px !important;
|
||||
line-height: 84px !important;
|
||||
color: #000 !important;
|
||||
padding: 0 5px !important;
|
||||
font-size: 18px;
|
||||
.menu-box {
|
||||
// color: #fff;
|
||||
}
|
||||
}
|
||||
.warnmenu-container.el-menu--horizontal
|
||||
> .el-menu-item:not(.is-disabled):hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.warnmenu-container.el-menu {
|
||||
background-color: transparent;
|
||||
}
|
||||
.warnmenu-container.el-menu.el-menu--horizontal {
|
||||
border: none;
|
||||
}
|
||||
.warnmenu-container.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* submenu item */
|
||||
.warnmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||||
float: left;
|
||||
height: 84px !important;
|
||||
line-height: 91px !important;
|
||||
color: #000 !important;
|
||||
padding: 0 5px !important;
|
||||
margin: 0 10px !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
.warnmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.warnmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title i {
|
||||
// color: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.menu-box {
|
||||
padding: 3px 10px 5px 10px;
|
||||
border-radius: 30px;
|
||||
color: #000;
|
||||
}
|
||||
.menu-dot {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #0b58ff;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
49
src/views/abnormalWarning/index.vue
Normal file
49
src/views/abnormalWarning/index.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="warning-page">
|
||||
<navbar />
|
||||
<div class="main-box">
|
||||
<div>异常警告</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<img src="../../assets/img/alarm-bg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Navbar from './components/Navbar';
|
||||
export default {
|
||||
name: 'AbnormalWarning',
|
||||
components: { Navbar },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warning-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.main-box {
|
||||
position: relative;
|
||||
width: 64.58%;
|
||||
height: calc(100vh - 160px);
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
margin: 16px auto 0;
|
||||
z-index: 10;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
.footer {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: -3px;
|
||||
z-index: 8;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user