|
|
|
@@ -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> |
