'update'
Bu işleme şunda yer alıyor:
ebeveyn
4630e292c5
işleme
602f7c3ecf
@ -13,6 +13,11 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<style>
|
||||
:root {
|
||||
--beilv: 1;
|
||||
}
|
||||
</style>
|
||||
<title><%= webpackConfig.name %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
BIN
src/assets/img/choicepart/choice-item-longback.png
Normal dosya
BIN
src/assets/img/choicepart/choice-item-longback.png
Normal dosya
İkili dosya gösterilmiyor.
|
Sonra Genişlik: | Yükseklik: | Boyut: 801 KiB |
@ -24,15 +24,15 @@
|
||||
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
|
||||
<svg-icon
|
||||
v-for="(i, index) in wuliuList"
|
||||
:key="index"
|
||||
:key="index + '1'"
|
||||
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
|
||||
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
|
||||
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
|
||||
/>
|
||||
<svg-icon
|
||||
v-for="(i, index) in wuliuList"
|
||||
:key="index"
|
||||
:key="index + '2'"
|
||||
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
|
||||
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
|
||||
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
|
||||
/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
@ -56,15 +56,15 @@
|
||||
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
|
||||
<svg-icon
|
||||
v-for="(i, index) in materialList"
|
||||
:key="index"
|
||||
:key="index + '3'"
|
||||
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
|
||||
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
|
||||
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
|
||||
/>
|
||||
<svg-icon
|
||||
v-for="(i, index) in materialList"
|
||||
:key="index"
|
||||
:key="index + '4'"
|
||||
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
|
||||
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
|
||||
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
|
||||
/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
@ -144,6 +144,8 @@ import BaseTable from '@/components/baseTable.vue'
|
||||
import statusCell from './components/statusCell.vue'
|
||||
|
||||
let interval = null
|
||||
let eventListener = null
|
||||
|
||||
const tableProp = [
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
@ -206,12 +208,13 @@ export default {
|
||||
this.time = a[1]
|
||||
}, 1000)
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
addEventListener('resize', () => {
|
||||
addEventListener('resize', eventListener = () => {
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(interval)
|
||||
removeEventListener('resize', eventListener)
|
||||
},
|
||||
methods: {
|
||||
getTime() {
|
||||
|
||||
@ -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;
|
||||
|
||||
Yükleniyor…
Yeni konuda referans
Bir kullanıcı engelle