|
|
|
@@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div class="choicepart-container"> |
|
|
|
<div id="choicepart-container"> |
|
|
|
<div class="choicepart-navbar"> |
|
|
|
<span class="navbar-left"> |
|
|
|
{{ date }} |
|
|
|
@@ -19,6 +19,10 @@ |
|
|
|
<div |
|
|
|
v-for="item in routeList" |
|
|
|
:key="item.path" |
|
|
|
:style="{ |
|
|
|
background: item.title.length > 6 ? `url(${require('../assets/img/choicepart/choice-item-longback.png')}) no-repeat` : `url(${require('../assets/img/choicepart/choice-item-back.png')}) no-repeat`, |
|
|
|
backgroundSize: '100% 100%' |
|
|
|
}" |
|
|
|
class="choicepart-item" |
|
|
|
@click="handelClick(item)" |
|
|
|
> |
|
|
|
@@ -33,7 +37,9 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import Cookie from 'js-cookie' |
|
|
|
|
|
|
|
let interval = null |
|
|
|
let eventListener = null |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'ChoicePart', |
|
|
|
@@ -44,13 +50,14 @@ export default { |
|
|
|
rowNum: 1, |
|
|
|
windowWidth: 0, |
|
|
|
routeList: [ |
|
|
|
{ name: 'factory', path: 'http://www.baidu.com', title: '数字工厂总览' }, |
|
|
|
{ name: 'mes', path: 'http://localhost:9528/#/login', title: 'MES生产管理平台' }, |
|
|
|
{ name: 'wms', path: 'http://a.wms.picaiba.com', title: 'WMS物流仓储管理' }, |
|
|
|
{ name: 'factory', path: 'http://192.168.1.47:9527/#/3d-overview', title: '数字工厂总览' }, |
|
|
|
{ name: 'mes', path: 'http://192.168.1.47:9527/#/login', title: 'MES生产管理平台' }, |
|
|
|
{ name: 'wms', path: 'http://192.168.1.103:9529/#/login', title: 'WMS物流仓储管理' }, |
|
|
|
{ name: 'data', path: 'factory', title: '数据采集平台' } |
|
|
|
], |
|
|
|
date: '', |
|
|
|
time: '' |
|
|
|
time: '', |
|
|
|
beilv: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@@ -62,9 +69,16 @@ export default { |
|
|
|
this.date = a[0] |
|
|
|
this.time = a[1] |
|
|
|
}, 1000) |
|
|
|
this.beilv = document.body.offsetWidth / 1920 |
|
|
|
document.documentElement.style.setProperty('--beilv', this.beilv) |
|
|
|
addEventListener('resize', eventListener = () => { |
|
|
|
this.beilv = document.body.offsetWidth / 1920 |
|
|
|
document.documentElement.style.setProperty('--beilv', this.beilv) |
|
|
|
}) |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
clearInterval(interval) |
|
|
|
removeEventListener('resize', eventListener) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getTime() { |
|
|
|
@@ -76,7 +90,11 @@ export default { |
|
|
|
}, |
|
|
|
handelClick(item) { |
|
|
|
if (item.path.substring(0, 4) === 'http') { |
|
|
|
window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`) |
|
|
|
if (item.path === 'http://192.168.1.47:9527/#/3d-overview') { |
|
|
|
window.open(item.path) |
|
|
|
} else { |
|
|
|
window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`) |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.$router.push({ |
|
|
|
name: item.path |
|
|
|
@@ -92,7 +110,7 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.choicepart-container { |
|
|
|
#choicepart-container { |
|
|
|
user-select: none; |
|
|
|
min-width: 100%; |
|
|
|
min-height: 100vh; |
|
|
|
@@ -102,35 +120,35 @@ export default { |
|
|
|
overflow-x: scroll; |
|
|
|
.choicepart-navbar { |
|
|
|
width: 100%; |
|
|
|
min-width: 1600px; |
|
|
|
min-width: calc(1600px * var(--beilv)); |
|
|
|
height: 11vh; |
|
|
|
line-height: 11vh; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 30px; |
|
|
|
font-size: calc(30px * var(--beilv)); |
|
|
|
background: url('../assets/img/choicepart/header.png') no-repeat; |
|
|
|
background-size: 100% auto; |
|
|
|
.navbar-left { |
|
|
|
color: #49E1DE; |
|
|
|
float: left; |
|
|
|
position: relative; |
|
|
|
left: 58px; |
|
|
|
font-size: 32px; |
|
|
|
left: calc(58px * var(--beilv)); |
|
|
|
font-size: calc(32px * var(--beilv)); |
|
|
|
line-height: 12vh; |
|
|
|
} |
|
|
|
.navbar-right { |
|
|
|
color: #49E1DE; |
|
|
|
float: right; |
|
|
|
position: relative; |
|
|
|
right: 84px; |
|
|
|
font-size: 32px; |
|
|
|
right: calc(84px * var(--beilv)); |
|
|
|
font-size: calc(32px * var(--beilv)); |
|
|
|
line-height: 12vh; |
|
|
|
span { |
|
|
|
position: relative; |
|
|
|
.item-icon { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: -56px; |
|
|
|
right: calc(-56px * var(--beilv)); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
@@ -138,62 +156,65 @@ export default { |
|
|
|
.navbar-title { |
|
|
|
.navbar-title-icon { |
|
|
|
position: relative; |
|
|
|
top: 13px; |
|
|
|
right: 12px; |
|
|
|
top: calc(13px * var(--beilv)); |
|
|
|
right: calc(12px * var(--beilv)); |
|
|
|
} |
|
|
|
img { |
|
|
|
width: calc(34px * var(--beilv)); |
|
|
|
height: calc(46px * var(--beilv)); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.choicepart-box { |
|
|
|
width: 1656px; |
|
|
|
width: calc(1456px * var(--beilv)); |
|
|
|
margin: 0 auto; |
|
|
|
padding-top: 16vh; |
|
|
|
min-height: 88vh; |
|
|
|
.choicepart-item { |
|
|
|
display: inline-block; |
|
|
|
width: 334px; |
|
|
|
height: 444px; |
|
|
|
margin: 40px; |
|
|
|
background: url('../assets/img/choicepart/choice-item-back.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: calc(334px * var(--beilv)); |
|
|
|
height: calc(444px * var(--beilv)); |
|
|
|
margin: calc(15px * var(--beilv)); |
|
|
|
// border: 1px dashed #fff; |
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); |
|
|
|
box-shadow: 0 calc(2px * var(--beilv)) calc(10px * var(--beilv)) rgba(0, 0, 0, 0.5); |
|
|
|
top: 0; |
|
|
|
border-radius: 5px; |
|
|
|
font-size: calc(24px * var(--beilv)); |
|
|
|
border-radius: calc(5px * var(--beilv)); |
|
|
|
overflow: hidden; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
.choicepart-item-border { |
|
|
|
height: 100%; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 0 5px; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 28px; |
|
|
|
border-radius: calc(5px * var(--beilv)); |
|
|
|
padding: 0 calc(5px * var(--beilv)); |
|
|
|
line-height: calc(32px * var(--beilv)); |
|
|
|
font-size: calc(28px * var(--beilv)); |
|
|
|
font-weight: lighter; |
|
|
|
color: #2c6bd8; |
|
|
|
overflow: hidden; |
|
|
|
img { |
|
|
|
width: 158px; |
|
|
|
height: 158px; |
|
|
|
width: calc(158px * var(--beilv)); |
|
|
|
height: calc(158px * var(--beilv)); |
|
|
|
position: relative; |
|
|
|
top: 77px; |
|
|
|
left: 88px; |
|
|
|
top: calc(77px * var(--beilv)); |
|
|
|
left: calc(88px * var(--beilv)); |
|
|
|
} |
|
|
|
} |
|
|
|
.choicepart-item-title { |
|
|
|
overflow: hidden; |
|
|
|
padding: 0 10px; |
|
|
|
padding: 0 calc(10px * var(--beilv)); |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 2px; |
|
|
|
right: 2px; |
|
|
|
left: calc(2px * var(--beilv)); |
|
|
|
right: calc(2px * var(--beilv)); |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 88px; |
|
|
|
height: 103px; |
|
|
|
letter-spacing: 2px; |
|
|
|
font-size: calc(20px * var(--beilv)); |
|
|
|
line-height: calc(88px * var(--beilv)); |
|
|
|
height: calc(103px * var(--beilv)); |
|
|
|
letter-spacing: calc(2px * var(--beilv)); |
|
|
|
transition: all .5s ease; |
|
|
|
} |
|
|
|
} |
|
|
|
@@ -210,15 +231,15 @@ export default { |
|
|
|
} |
|
|
|
::-webkit-scrollbar { |
|
|
|
//滚动条的宽度 |
|
|
|
width: 9px; |
|
|
|
height: 9px; |
|
|
|
width: calc(9px * var(--beilv)); |
|
|
|
height: calc(9px * var(--beilv)); |
|
|
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
//滚动条的设置 |
|
|
|
background-color: #dddddd; |
|
|
|
background-clip: padding-box; |
|
|
|
min-height: 28px; |
|
|
|
border-radius: 9px; |
|
|
|
min-height: calc(28px * var(--beilv)); |
|
|
|
border-radius: calc(9px * var(--beilv)); |
|
|
|
} |
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
|
background-color: #bbb; |
|
|
|
|
