mt-fe-group/11-main
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'update'

Browse Source
This commit is contained in:
gtz 2022-11-03 15:40:52 +08:00
parent 4630e292c5
commit 602f7c3ecf
4 changed files with 81 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/index.html
View File

@ -13,6 +13,11 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<style>
:root {
--beilv: 1;
}
</style>
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
</head> </head>
<body> <body>

BIN
src/assets/img/choicepart/choice-item-longback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 KiB

21
src/views/factory.vue
View File

@ -24,15 +24,15 @@
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt=""> <img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<svg-icon <svg-icon
v-for="(i, index) in wuliuList" v-for="(i, index) in wuliuList"
:key="index" :key="index + '1'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'" :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 <svg-icon
v-for="(i, index) in wuliuList" v-for="(i, index) in wuliuList"
:key="index" :key="index + '2'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'" :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-item>
</el-carousel> </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=""> <img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<svg-icon <svg-icon
v-for="(i, index) in materialList" v-for="(i, index) in materialList"
:key="index" :key="index + '3'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'" :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 <svg-icon
v-for="(i, index) in materialList" v-for="(i, index) in materialList"
:key="index" :key="index + '4'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'" :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-item>
</el-carousel> </el-carousel>
@ -144,6 +144,8 @@ import BaseTable from '@/components/baseTable.vue'
import statusCell from './components/statusCell.vue' import statusCell from './components/statusCell.vue'
let interval = null let interval = null
let eventListener = null
const tableProp = [ const tableProp = [
{ {
prop: 'equipmentName', prop: 'equipmentName',
@ -206,12 +208,13 @@ export default {
this.time = a[1] this.time = a[1]
}, 1000) }, 1000)
this.beilv = document.body.offsetWidth / 1920 this.beilv = document.body.offsetWidth / 1920
addEventListener('resize', () => { addEventListener('resize', eventListener = () => {
this.beilv = document.body.offsetWidth / 1920 this.beilv = document.body.offsetWidth / 1920
}) })
}, },
destroyed() { destroyed() {
clearInterval(interval) clearInterval(interval)
removeEventListener('resize', eventListener)
}, },
methods: { methods: {
getTime() { getTime() {

107
src/views/index.vue
View File

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