@@ -35,7 +35,7 @@ export default { | |||
const first = matched[0] | |||
if (!this.isDashboard(first)) { | |||
matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched) | |||
matched = [{ path: '/', meta: { title: '首页' }}].concat(matched) | |||
} | |||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | |||
@@ -0,0 +1,96 @@ | |||
<template> | |||
<div v-if="!item.hidden"> | |||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> | |||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> | |||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> | |||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> | |||
</el-menu-item> | |||
</app-link> | |||
</template> | |||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> | |||
<template slot="title"> | |||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> | |||
</template> | |||
<sidebar-item | |||
v-for="(child, index) in item.children" | |||
:key="child.path + index" | |||
:is-nest="true" | |||
:item="child" | |||
:base-path="resolvePath(child.path)" | |||
class="nest-menu" | |||
/> | |||
</el-submenu> | |||
</div> | |||
</template> | |||
<script> | |||
import path from 'path' | |||
import { isExternal } from '@/utils/validate' | |||
import Item from './Item' | |||
import AppLink from './Link' | |||
import FixiOSBug from './FixiOSBug' | |||
export default { | |||
name: 'SidebarItem', | |||
components: { Item, AppLink }, | |||
mixins: [FixiOSBug], | |||
props: { | |||
// route object | |||
item: { | |||
type: Object, | |||
required: true | |||
}, | |||
isNest: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
basePath: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
this.onlyOneChild = null | |||
return {} | |||
}, | |||
methods: { | |||
hasOneShowingChild(children = [], parent) { | |||
if (!children) { | |||
children = []; | |||
} | |||
const showingChildren = children.filter(item => { | |||
if (item.hidden) { | |||
return false | |||
} else { | |||
// Temp set(will be used if only has one showing child) | |||
this.onlyOneChild = item | |||
return true | |||
} | |||
}) | |||
// When there is only one child router, the child router is displayed by default | |||
if (showingChildren.length === 1) { | |||
return true | |||
} | |||
// Show parent if there are no child router to display | |||
if (showingChildren.length === 0) { | |||
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true } | |||
return true | |||
} | |||
return false | |||
}, | |||
resolvePath(routePath) { | |||
if (isExternal(routePath)) { | |||
return routePath | |||
} | |||
if (isExternal(this.basePath)) { | |||
return this.basePath | |||
} | |||
return path.resolve(this.basePath, routePath) | |||
} | |||
} | |||
} | |||
</script> |
@@ -0,0 +1,71 @@ | |||
<template> | |||
<div | |||
:class="{ 'has-logo': showLogo }" | |||
:style="{ | |||
backgroundColor: | |||
settings.sideTheme === 'theme-dark' | |||
? variables.menuBackground | |||
: variables.menuLightBackground, | |||
}"> | |||
<logo v-if="showLogo" :collapse="isCollapse" /> | |||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> | |||
<el-menu | |||
:default-active="activeMenu" | |||
:collapse="isCollapse" | |||
:background-color=" | |||
settings.sideTheme === 'theme-dark' | |||
? variables.menuBackground | |||
: variables.menuLightBackground | |||
" | |||
:text-color=" | |||
settings.sideTheme === 'theme-dark' | |||
? variables.menuColor | |||
: variables.menuLightColor | |||
" | |||
:unique-opened="true" | |||
active-text-color="#fff" | |||
:collapse-transition="false" | |||
mode="vertical"> | |||
<!-- 根据 sidebarRouters 路由,生成菜单 --> | |||
<sidebar-item | |||
v-for="(route, index) in sidebarRouters" | |||
:key="route.path + index" | |||
:item="route" | |||
:base-path="route.path" /> | |||
</el-menu> | |||
</el-scrollbar> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapGetters, mapState } from 'vuex'; | |||
import Logo from './Logo'; | |||
import SidebarItem from './SidebarItem'; | |||
import variables from '@/assets/styles/variables.scss'; | |||
export default { | |||
components: { SidebarItem, Logo }, | |||
computed: { | |||
...mapState(['settings']), | |||
...mapGetters(['sidebarRouters', 'sidebar']), | |||
activeMenu() { | |||
const route = this.$route; | |||
const { meta, path } = route; | |||
// if set path, the sidebar will highlight the path you set | |||
if (meta.activeMenu) { | |||
return meta.activeMenu; | |||
} | |||
return path; | |||
}, | |||
showLogo() { | |||
return this.$store.state.settings.sidebarLogo; | |||
}, | |||
variables() { | |||
return variables; | |||
}, | |||
isCollapse() { | |||
return !this.sidebar.opened; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -28,7 +28,7 @@ | |||
mode="vertical"> | |||
<!-- 根据 sidebarRouters 路由,生成菜单 --> | |||
<sidebar-item | |||
v-for="(route, index) in sidebarRouters" | |||
v-for="(route, index) in routeList" | |||
:key="route.path + index" | |||
:item="route" | |||
:base-path="route.path" /> | |||
@@ -47,7 +47,12 @@ export default { | |||
components: { SidebarItem, Logo }, | |||
computed: { | |||
...mapState(['settings']), | |||
...mapGetters(['sidebarRouters', 'sidebar']), | |||
...mapGetters(['sidebarRouters', 'sidebar', 'choicepart']), | |||
routeList() { | |||
// return [this.partList[this.choicepart]] | |||
// return [this.sidebarRouters[29]] | |||
return [this.sidebarRouters[this.choicepart]] | |||
}, | |||
activeMenu() { | |||
const route = this.$route; | |||
const { meta, path } = route; | |||
@@ -71,17 +71,23 @@ export const constantRoutes = [ | |||
}, | |||
{ | |||
path: '/', | |||
component: Layout, | |||
// redirect: 'core/base/factory', | |||
// children: [{ | |||
// path: 'index', | |||
// redirect: 'core/base/factory', | |||
// component: (resolve) => require(['@/views/index'], resolve), | |||
// name: '首页', | |||
// meta: { title: '首页', icon: 'dashboard', affix: true } | |||
// } | |||
// ] | |||
component: () => import('@/views/choicePart'), | |||
hidden: true, | |||
meta: { requireToken: true } | |||
}, | |||
// { | |||
// path: '/', | |||
// component: Layout, | |||
// // redirect: 'core/base/factory', | |||
// // children: [{ | |||
// // path: 'index', | |||
// // redirect: 'core/base/factory', | |||
// // component: (resolve) => require(['@/views/index'], resolve), | |||
// // name: '首页', | |||
// // meta: { title: '首页', icon: 'dashboard', affix: true } | |||
// // } | |||
// // ] | |||
// }, | |||
{ | |||
path: '/user', | |||
component: Layout, | |||
@@ -17,6 +17,7 @@ const getters = { | |||
topbarRouters:state => state.permission.topbarRouters, | |||
defaultRoutes:state => state.permission.defaultRoutes, | |||
sidebarRouters:state => state.permission.sidebarRouters, | |||
choicepart: state => state.app.choicepart, | |||
// 数据字典 | |||
dict_datas: state => state.dict.dictDatas | |||
} | |||
@@ -8,6 +8,7 @@ const state = { | |||
}, | |||
device: "desktop", | |||
size: localStorage.getItem("size") || "medium", | |||
choicepart: localStorage.getItem('choicepart') || null | |||
}; | |||
const mutations = { | |||
@@ -38,6 +39,10 @@ const mutations = { | |||
SET_SIDEBAR_HIDE: (state, status) => { | |||
state.sidebar.hide = status; | |||
}, | |||
SET_CHOICEPART: (state, choicepart) => { | |||
state.choicepart = choicepart | |||
localStorage.setItem('choicepart', choicepart) | |||
} | |||
}; | |||
const actions = { | |||
@@ -56,6 +61,9 @@ const actions = { | |||
toggleSideBarHide({ commit }, status) { | |||
commit("SET_SIDEBAR_HIDE", status); | |||
}, | |||
setChoicepart({ commit }, choicepart) { | |||
commit('SET_CHOICEPART', choicepart) | |||
} | |||
}; | |||
export default { | |||
@@ -0,0 +1,87 @@ | |||
<template> | |||
<div class="navbar"> | |||
<div style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 13px"> | |||
<img src="../../../assets/images/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" alt=""> | |||
MES | |||
</div> | |||
<div class="right-msg"> | |||
<div class="time-msg"> | |||
<div class="line1">{{timeZone}} {{topTime}}</div> | |||
<div class="line2">{{topDate}}</div> | |||
</div> | |||
<div class="base-msg"> | |||
<div class="avatar"> | |||
<img :src="require(`../../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" /> | |||
</div> | |||
<div class="use-msg"> | |||
<div class="line1">{{userName}}</div> | |||
<div class="line2">角色名11111111111111</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import moment from 'moment' | |||
export default { | |||
name: 'Navbar', | |||
data() { | |||
return { | |||
topDate: '', | |||
topTime: '', | |||
timeZone: '', | |||
timer: '', | |||
userRole:this.$store.getters.name, | |||
userName: this.$store.getters.name | |||
} | |||
}, | |||
mounted() { | |||
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) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.navbar { | |||
height: 64px; | |||
background: rgba(8, 17, 50, 0.25); | |||
.right-msg { | |||
float: right; | |||
height: 100%; | |||
font-size: 14px; | |||
color: #fff; | |||
padding-top: 15px; | |||
padding-right: 38px; | |||
.time-msg { | |||
display: inline-block; | |||
margin-right: 30px; | |||
} | |||
.base-msg { | |||
display: inline-block; | |||
.avatar { | |||
display: inline-block; | |||
margin-right: 10px; | |||
} | |||
.use-msg { | |||
display: inline-block; | |||
} | |||
} | |||
.line2 { | |||
opacity: 0.65; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,312 @@ | |||
<template> | |||
<div class="choicepart-container"> | |||
<navbar /> | |||
<div class="choicepart-wrapper"> | |||
<div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1574px;height:538px;'"> | |||
<div class="choicepart-line1"> | |||
<div | |||
v-for="(item, index) in menuArr1" | |||
:key="index" | |||
class="choicepart-item" | |||
@click="handelClick(item, item.choicepart)" | |||
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" | |||
> | |||
<div> | |||
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> | |||
</div> | |||
<div class="choicepart-item-title">{{item.meta.title}}</div> | |||
</div> | |||
</div> | |||
<div class="choicepart-line2"> | |||
<div | |||
v-for="(item, index) in menuArr2" | |||
:key="index" | |||
class="choicepart-item" | |||
@click="handelClick(item, item.choicepart)" | |||
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" | |||
> | |||
<div> | |||
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> | |||
</div> | |||
<div class="choicepart-item-title">{{item.meta.title}}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="choicepart-footer">© 中建材智能自动化研究院有限公司</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Navbar from './components/Navbar.vue' | |||
import { debounce } from '@/utils/debounce' | |||
export default { | |||
components: { Navbar }, | |||
name: 'choicePart', | |||
data() { | |||
return { | |||
boxReset: '', | |||
scale: 1, | |||
menuArr1: [ | |||
{ | |||
name: 'Core', | |||
title: '基础核心', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Order', | |||
title: '订单管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Equipment', | |||
title: '设备管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Group', | |||
title: '班组管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Quality', | |||
title: '质量管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Warehouse', | |||
title: '仓库管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Energy', | |||
title: '能源管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
} | |||
], | |||
menuArr2: [ | |||
{ | |||
name: 'Packaging', | |||
title: '包装管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Material', | |||
title: '物料管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Extend', | |||
title: '工艺管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Delivery', | |||
title: '成品发货', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Report', | |||
title: '报表管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'System', | |||
title: '系统管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
} | |||
], | |||
} | |||
}, | |||
// computed:{ | |||
// ...mapGetters(['sidebarRouters']) | |||
// }, | |||
mounted() { | |||
this.getMsg() | |||
this.boxReset = debounce(() => { | |||
this.resetSize() | |||
}, 300) | |||
this.boxReset() | |||
window.addEventListener('resize', () => { | |||
this.boxReset() | |||
}) | |||
}, | |||
methods: { | |||
getMsg() { | |||
let menuList = this.$store.state.permission.sidebarRouters | |||
console.log(menuList) | |||
if (menuList.length > 0) { | |||
for (let i = 0; i < menuList.length; i ++) { | |||
for (let k = 0; k < 7; k++) { | |||
if (menuList[i].name === this.menuArr1[k].name) { | |||
this.menuArr1[k].visible = true | |||
this.menuArr1[k].id = menuList[i].id | |||
this.menuArr1[k].choicepart = i | |||
this.menuArr1[k].children = menuList[i].children | |||
this.menuArr1[k].meta = menuList[i].meta | |||
} | |||
} | |||
for (let j = 0; j < 6; j++) { | |||
if (menuList[i].name === this.menuArr2[j].name) { | |||
this.menuArr2[j].visible = true | |||
this.menuArr2[j].id = menuList[i].id | |||
this.menuArr2[j].choicepart = i | |||
this.menuArr2[j].children = menuList[i].children | |||
this.menuArr2[j].meta = menuList[i].meta | |||
} | |||
} | |||
} | |||
} | |||
console.log(this.menuArr1) | |||
console.log(this.menuArr2) | |||
}, | |||
handelClick(item, index) { | |||
// this.$router.push({name: 'SystemUser'}) | |||
this.$store.dispatch('app/setChoicepart', index) | |||
this.toRouter(item) | |||
// if (item.meta.unuse) { | |||
// this.$message.warning(this.$t('暂无数据')) | |||
// } else { | |||
// this.toRouter(item) | |||
// } | |||
}, | |||
toRouter(item) { | |||
console.log(item) | |||
if (item.children) { | |||
this.toRouter(item.children[0]) | |||
} else { | |||
this.$router.push({ name: item.name }) | |||
} | |||
}, | |||
resetSize() { | |||
let choicepartBox = document.querySelector('#choicepartBox') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(choicepartBox.style.width) | |||
let bh = parseFloat(choicepartBox.style.height) | |||
let wx = 0.82/(bw / rw) | |||
let hx = 0.56/(bh / rh) | |||
this.scale = wx > hx ? hx : wx | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.choicepart-container { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
background: url('../../assets/images/choicepart/choicepart-back.png') repeat; | |||
background-size: 100% 100%; | |||
.choicepart-wrapper { | |||
width: 100vw; | |||
height: calc(100vh - 94px); | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.choicepart-box { | |||
// border: 1px solid red; | |||
.choicepart-line1 { | |||
width: 100%; | |||
margin-bottom: 80px; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
} | |||
.choicepart-line2 { | |||
width: 100%; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
justify-content: center; | |||
} | |||
.choicepart-item { | |||
width: 184px; | |||
height: 224px; | |||
background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat; | |||
background-size: 100% 100%; | |||
border-radius: 5px; | |||
overflow: hidden; | |||
cursor: pointer; | |||
position: relative; | |||
margin: 0 20px; | |||
img { | |||
width: 184px; | |||
height: 224px; | |||
} | |||
.choicepart-item-title { | |||
overflow: hidden; | |||
padding: 0 10px; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
position: absolute; | |||
bottom: 0; | |||
left: 2px; | |||
right: 2px; | |||
text-align: center; | |||
color: #fff; | |||
font-size: 16px; | |||
line-height: 40px; | |||
height: 40px; | |||
letter-spacing: 2px; | |||
background-color: rgba($color: #0b58ff, $alpha: 0.45); | |||
} | |||
} | |||
.choicepart-item:hover { | |||
.choicepart-item-title { | |||
background-color: rgba($color: #0b58ff, $alpha: 1); | |||
} | |||
} | |||
} | |||
.choicepart-footer { | |||
position: absolute; | |||
width: 100%; | |||
color: #C7C7C7; | |||
user-select: none; | |||
font-size: 12px; | |||
letter-spacing: 1px; | |||
height: 30px; | |||
display: grid; | |||
place-content: center; | |||
bottom: 0; | |||
opacity: 0.5; | |||
} | |||
} | |||
</style> |
@@ -34,7 +34,7 @@ | |||
<el-button type="primary" size="small" plain v-show="showSetting" @click="cancelSetting">取消</el-button> | |||
</el-form-item> | |||
<el-form-item label="请先选择查询的班组" class="rightItem"> | |||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button> | |||
<!-- <el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button> --> | |||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('2')">班组能源查询</el-button> | |||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('3')">班组检测查询</el-button> | |||
</el-form-item> | |||
@@ -286,22 +286,18 @@ export default { | |||
case '1': | |||
this.$router.push({ | |||
path: '/core/enhance/product-line-24h?startTime='+this.chooseObj.startTime+'&endTime='+this.chooseObj.endTime, | |||
// name: 'ProductionLineData', | |||
// params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime } | |||
}) | |||
break; | |||
case '2': // 能源 | |||
this.$router.push({ | |||
path: '/energy/monitoring/energy-report-search?startTime='+this.chooseObj.startTime+'&endTime='+this.chooseObj.endTime | |||
// name: 'EnergyReportSearch', | |||
// params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime } | |||
}) | |||
break; | |||
default: | |||
this.$router.push({ | |||
path: '/quality/monitoring/quality-statistics', | |||
path: '/quality/base/quality-inspection-data/detection-information/statistical-data?startTime='+this.chooseObj.startTime+'&endTime='+this.chooseObj.endTime, | |||
// name: 'QualityStatistics', | |||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime } | |||
// params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime } | |||
}) | |||
} | |||
} | |||
@@ -332,10 +332,14 @@ export default { | |||
console.log(val) | |||
switch (val.type) { | |||
case 'orderDetail': | |||
this.$router.push({ | |||
path: '/base/coreWorkOrder/detail?orderId='+val.data.orderid | |||
}) | |||
break | |||
case 'qualityDetail': | |||
this.$router.push({ | |||
path: '/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString='+val.data.woIdString, | |||
}) | |||
break | |||
default: | |||
this.$router.push({ | |||