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-16 17:05:35 +08:00
parent adc9c35963
commit ff4e76f843
13 changed files with 204 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/fonts/font.scss Normal file
View File

@ -0,0 +1,6 @@
@font-face {
font-family: 'zcoolqingkehuangyouti-Regular'; //重命名字体名
src: url('./zcoolqingkehuangyouti-Regular.ttf'); //引入字体
font-weight: normal;
font-style: normal;
}

BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.woff Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/img/choicepart/factory-model-A.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
src/assets/img/choicepart/factory-model-B.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
src/assets/img/choicepart/factory-model-title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

6
src/components/baseContainer/index.vue
View File

@ -77,12 +77,12 @@ export default {
width: 100%;
background-color: rgba($color: #061027, $alpha: 0.15);
position: relative;
border: 2px solid;
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
border: calc(2px * var(--beilv)) solid;
box-shadow: inset 0px 0px calc(20px * var(--beilv)) 0px rgba(255,255,255,0.15);
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
.line {
position: absolute;
border-top: 4px solid #52FFF1;
border-top: calc(4px * var(--beilv)) solid #52FFF1;
width: 2em;
top: -.25em;
left: -.25em;

3
src/components/baseTable.vue
View File

@ -142,6 +142,9 @@ export default {
.visual-base-table-container {
.el-table {
border: 0;
.cell {
line-height: calc(23px * var(--beilv));
}
}
.el-table::before,.el-table--border::after {
background-color: transparent;

1
src/main.js
View File

@ -22,6 +22,7 @@ import router from './router'
import i18n from './lang' // internationalization
import './icons' // icon
import './utils/error-log' // error log
import './assets/fonts/font.scss'
import * as filters from './filters' // global filters
/**

5
src/views/components/statusCell.vue
View File

@ -1,5 +1,5 @@
<template>
<svg-icon :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" style="font-size: 24px" />
<svg-icon class="icon-font" :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" />
</template>
<script>
@ -16,4 +16,7 @@ export default {
</script>
<style lang="scss" scoped>
.icon-font {
font-size: calc(20px * var(--beilv));
}
</style>

339
src/views/factory.vue
View File

@ -6,7 +6,7 @@
</span>
<span class="navbar-title">
<img :src="require(`../assets/img/choicepart/icon.png`)" class="navbar-title-icon" alt="">
合 肥 新 能 源 数 字 工 厂
合肥新能源数字工厂数据采集平台
</span>
<span class="navbar-right">
<span>
@ -18,118 +18,62 @@
<el-row class="container-main">
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }">
<el-col :span="24">
<base-container class="swiper-container" :beilv="beilv" :height="303">
<el-carousel ref="swiper1item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<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 + '1'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
<svg-icon
v-for="(i, index) in wuliuList"
:key="index + '2'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
/>
</el-carousel-item>
</el-carousel>
<div class="swiper-indicator">
<svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperOneLeft" />
<svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperOneRight" />
<el-carousel ref="swiper1text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
</el-carousel-item>
</el-carousel>
<base-container class="swiper-container" :beilv="beilv" :height="298">
<div class="swiper-title">
<span style="">产线A</span>
</div>
<img :style="{width: '90%',height: 191 * beilv - 4 + 'px', margin: 'auto 5%'}" :src="require('../assets/img/choicepart/factory-model-A.png')" alt="">
<svg-icon
v-for="(i, index) in AList"
:key="index + '1'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 22 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: '17px' }">
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: 17 * beilv + 'px' }">
<el-col :span="24">
<base-container class="swiper-container" :beilv="beilv" :height="303">
<el-carousel ref="swiper2item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<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 + '3'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
/>
<svg-icon
v-for="(i, index) in materialList"
:key="index + '4'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
</el-carousel-item>
</el-carousel>
<div class="swiper-indicator">
<svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperTwoLeft" />
<svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperTwoRight" />
<el-carousel ref="swiper2text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
</el-carousel-item>
</el-carousel>
<base-container class="swiper-container" :beilv="beilv" :height="298">
<div class="swiper-title">
<span style="">产线B</span>
</div>
<img :style="{width: '90%',height: 191 * beilv - 4 + 'px', margin: 'auto 5%'}" :src="require('../assets/img/choicepart/factory-model-B.png')" alt="">
<svg-icon
v-for="(i, index) in BList"
:key="index + '2'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 22 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: '17px 0' }">
<el-col :span="12" style="paddingRight: 12px">
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: `${17 * beilv}px 0` }">
<el-col :span="12" :style="{paddingRight: 12 * beilv + 'px'}">
<base-container title-icon="wuliu" title="生产物流仓储设备通讯状态" class="swiper-container" :beilv="beilv" :height="279">
<el-row :gutter="12" style="padding: 0 24px">
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="wuliuList"
/>
</el-col>
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="wuliuList"
/>
</el-col>
<el-row :style="{padding: `0 ${24 * beilv}px`}">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="wuliuList"
/>
</el-row>
</base-container>
</el-col>
<el-col :span="12" style="paddingLeft: 12px">
<el-col :span="12" :style="{paddingLeft: 12 * beilv + 'px'}">
<base-container title-icon="material" title="公用工程设备通信状态" class="swiper-container" :beilv="beilv" :height="279">
<el-row :gutter="12" style="padding: 0 24px">
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="materialList"
/>
</el-col>
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="materialList"
/>
</el-col>
<el-row :style="{padding: `0 ${24 * beilv}px`}">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="materialList"
/>
</el-row>
</base-container>
</el-col>
@ -159,23 +103,92 @@ const tableProp = [
subcomponent: statusCell
}
]
const AList = [
{ equipmentName: '上片1', status: 1, left: 7, top: 22 },
{ equipmentName: '磨边1-1', status: 1, left: 11.5, top: 22 },
{ equipmentName: '磨边1-2', status: 2, left: 16.7, top: 22 },
{ equipmentName: '清洗1-2', status: 1, left: 20, top: 22 },
{ equipmentName: '打孔1', status: 1, left: 25.8, top: 22 },
{ equipmentName: '清洗1-2', status: 1, left: 31.5, top: 22 },
{ equipmentName: '丝印1', status: 1, left: 38.3, top: 22 },
{ equipmentName: '固化1', status: 1, left: 43.9, top: 22 },
{ equipmentName: '储片1', status: 1, left: 47.9, top: 22 },
{ equipmentName: '清洗1-3', status: 1, left: 85.3, top: 31 },
{ equipmentName: '下片1', status: 1, left: 91.8, top: 31 },
{ equipmentName: '上片2', status: 2, left: 7, top: 41 },
{ equipmentName: '磨边2-1', status: 1, left: 11.5, top: 41 },
{ equipmentName: '磨边2-2', status: 2, left: 16.7, top: 41 },
{ equipmentName: '清洗2-2', status: 2, left: 20, top: 41 },
{ equipmentName: '打孔2', status: 2, left: 25.8, top: 41 },
{ equipmentName: '清洗2-2', status: 1, left: 31.5, top: 41 },
{ equipmentName: '丝印2', status: 1, left: 38.3, top: 41 },
{ equipmentName: '固化2', status: 1, left: 43.9, top: 41 },
{ equipmentName: '储片2', status: 1, left: 47.9, top: 41 },
{ equipmentName: '清洗2-3', status: 1, left: 85.3, top: 46.5 },
{ equipmentName: '下片2', status: 1, left: 91.8, top: 46.5 },
{ equipmentName: '上片3', status: 1, left: 7, top: 60 },
{ equipmentName: '磨边3-1', status: 1, left: 11.5, top: 60 },
{ equipmentName: '磨边3-2', status: 1, left: 16.7, top: 60 },
{ equipmentName: '清洗3-2', status: 1, left: 20, top: 60 },
{ equipmentName: '打孔3', status: 1, left: 25.8, top: 60 },
{ equipmentName: '清洗3-2', status: 3, left: 31.5, top: 60 },
{ equipmentName: '丝印3', status: 1, left: 38.3, top: 60 },
{ equipmentName: '固化3', status: 1, left: 43.9, top: 60 },
{ equipmentName: '储片3', status: 1, left: 47.9, top: 60 },
{ equipmentName: '清洗3-3', status: 1, left: 85.3, top: 63 },
{ equipmentName: '下片3', status: 1, left: 91.8, top: 63 },
{ equipmentName: '钢化', status: 1, left: 64.5, top: 63 }
]
const BList = [
{ equipmentName: '上片1', status: 3, left: 7, top: 22 },
{ equipmentName: '磨边1-1', status: 1, left: 11.1, top: 22 },
{ equipmentName: '磨边1-2', status: 1, left: 16.1, top: 22 },
{ equipmentName: '清洗1-2', status: 3, left: 19, top: 22 },
{ equipmentName: '打孔1', status: 3, left: 24.8, top: 22 },
{ equipmentName: '清洗1-2', status: 1, left: 30, top: 22 },
{ equipmentName: '丝印1', status: 1, left: 36.7, top: 22 },
{ equipmentName: '固化1', status: 1, left: 41.9, top: 22 },
{ equipmentName: '储片1', status: 1, left: 45.7, top: 22 },
{ equipmentName: '清洗1-3', status: 1, left: 81, top: 24 },
{ equipmentName: '下片1', status: 1, left: 86.3, top: 27 },
{ equipmentName: '下片2', status: 1, left: 89, top: 27 },
{ equipmentName: '下片3', status: 1, left: 91.8, top: 27 },
{ equipmentName: '上片1', status: 1, left: 7, top: 41 },
{ equipmentName: '磨边1-1', status: 1, left: 11.1, top: 41 },
{ equipmentName: '磨边1-2', status: 1, left: 16.1, top: 41 },
{ equipmentName: '清洗1-2', status: 1, left: 19, top: 41 },
{ equipmentName: '打孔1', status: 1, left: 24.8, top: 41 },
{ equipmentName: '清洗1-2', status: 1, left: 30, top: 41 },
{ equipmentName: '丝印1', status: 1, left: 36.7, top: 41 },
{ equipmentName: '固化1', status: 1, left: 41.9, top: 41 },
{ equipmentName: '储片1', status: 1, left: 45.7, top: 41 },
{ equipmentName: '清洗1-3', status: 1, left: 81, top: 49 },
{ equipmentName: '上片1', status: 1, left: 7, top: 60 },
{ equipmentName: '磨边1-1', status: 1, left: 11.1, top: 60 },
{ equipmentName: '磨边1-2', status: 1, left: 16.1, top: 60 },
{ equipmentName: '清洗1-2', status: 1, left: 19, top: 60 },
{ equipmentName: '打孔1', status: 1, left: 24.8, top: 60 },
{ equipmentName: '清洗1-2', status: 1, left: 30, top: 60 },
{ equipmentName: '丝印1', status: 1, left: 36.7, top: 60 },
{ equipmentName: '固化1', status: 3, left: 41.9, top: 60 },
{ equipmentName: '储片1', status: 3, left: 45.7, top: 60 },
{ equipmentName: '钢化', status: 1, left: 61.5, top: 27 }
]
const wuliuList = [
{ equipmentName: '包装机', status: 1, left: 23, top: 23 },
{ equipmentName: '输送线', status: 2, left: 27, top: 23 },
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 },
{ equipmentName: '包装机', status: 1, left: 51, top: 23 },
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
{ equipmentName: '包装机', status: 1 },
{ equipmentName: '输送线', status: 2 },
{ equipmentName: '堆垛机', status: 3 },
{ equipmentName: 'AGV', status: 3 },
{ equipmentName: 'PDA', status: 1 },
{ equipmentName: 'ERP', status: 2 }
]
const materialList = [
{ equipmentName: '包装机', status: 1, left: 23, top: 23 },
{ equipmentName: '输送线', status: 2, left: 27, top: 23 },
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 },
{ equipmentName: '包装机', status: 1, left: 51, top: 23 },
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
{ equipmentName: '低压配电', status: 1 },
{ equipmentName: '余热发电', status: 2 },
{ equipmentName: '天然气', status: 3 },
{ equipmentName: '水泵', status: 3 },
{ equipmentName: '风机', status: 1 },
{ equipmentName: '氧气', status: 2 }
]
export default {
@ -195,7 +208,9 @@ export default {
beilv: 1,
tableProp,
wuliuList,
materialList
materialList,
AList,
BList
}
},
created() {
@ -208,8 +223,10 @@ export default {
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() {
@ -226,22 +243,6 @@ export default {
},
handleHome() {
this.$router.push('/index')
},
handleSwiperOneLeft() {
this.$refs.swiper1item.prev()
this.$refs.swiper1text.prev()
},
handleSwiperOneRight() {
this.$refs.swiper1item.next()
this.$refs.swiper1text.next()
},
handleSwiperTwoLeft() {
this.$refs.swiper2item.prev()
this.$refs.swiper2text.prev()
},
handleSwiperTwoRight() {
this.$refs.swiper2item.next()
this.$refs.swiper2text.next()
}
}
}
@ -258,66 +259,86 @@ export default {
.factory-navbar {
user-select: none;
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(29px * var(--beilv));
background: url('../assets/img/choicepart/header.png') no-repeat;
background-size: 100% auto;
position: relative;
.navbar-left {
color: #49E1DE;
float: left;
position: relative;
left: 58px;
font-size: 32px;
position: absolute;
font-family: zcoolqingkehuangyouti-Regular;
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;
position: absolute;
font-family: zcoolqingkehuangyouti-Regular;
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;
top: calc(3px * var(--beilv));
right: calc(-56px * var(--beilv));
cursor: pointer;
}
}
}
.navbar-title {
letter-spacing: calc(4px * var(--beilv));
.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));
}
}
}
.container-main {
margin-top: 24px;
margin-top: calc(24px * var(--beilv));
.swiper-container {
position: relative;
user-select: none;
.swiper-title {
line-height: calc(68px * var(--beilv));
height: calc(68px * var(--beilv));
letter-spacing: calc(6px * var(--beilv));
font-size: calc(22px * var(--beilv));
color: #47F8DC;
text-align: center;
span {
display: inline-block;
width: calc(344px * var(--beilv));
background: url('../assets/img/choicepart/factory-model-title.png') no-repeat center;
background-size: calc(344px * var(--beilv)) calc(24px * var(--beilv)) ;
}
}
.swiper-indicator {
position: absolute;
color: #47F8DC;
width: 300px;
width: calc(300px * var(--beilv));
text-align: center;
font-size: 22px;
bottom: 22px;
font-size: calc(22px * var(--beilv));
bottom: calc(22px * var(--beilv));
left: 50%;
transform:translate(-50%);
z-index: 2;
.swiper-indicator-item {
max-width: 300px;
max-width: calc(300px * var(--beilv));
.swiper-indicator-text {
max-width: 300px;
max-width: calc(300px * var(--beilv));
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
@ -332,12 +353,12 @@ export default {
}
.swiper-icon-left {
transform: rotateY(180deg);
margin-right: 12px;
left: -36px;
margin-right: calc(12px * var(--beilv));
left: calc(-36px * var(--beilv));
}
.swiper-icon-right {
margin-left: 12px;
right: -36px;
margin-left: calc(12px * var(--beilv));
right: calc(-36px * var(--beilv));
}
}
}
@ -348,19 +369,19 @@ export default {
}
::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色，还可以设置边框属性
background: rgba(255, 255, 255, 0.1);
background: transparent;
}
::-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;

13
src/views/index.vue
View File

@ -125,21 +125,22 @@ export default {
line-height: 11vh;
text-align: center;
color: #fff;
font-size: calc(30px * var(--beilv));
font-size: calc(29px * var(--beilv));
background: url('../assets/img/choicepart/header.png') no-repeat;
background-size: 100% auto;
position: relative;
.navbar-left {
color: #49E1DE;
float: left;
position: relative;
position: absolute;
font-family: zcoolqingkehuangyouti-Regular;
left: calc(58px * var(--beilv));
font-size: calc(32px * var(--beilv));
line-height: 12vh;
}
.navbar-right {
color: #49E1DE;
float: right;
position: relative;
position: absolute;
font-family: zcoolqingkehuangyouti-Regular;
right: calc(84px * var(--beilv));
font-size: calc(32px * var(--beilv));
line-height: 12vh;
@ -147,7 +148,7 @@ export default {
position: relative;
.item-icon {
position: absolute;
top: 0;
top: calc(3px * var(--beilv));
right: calc(-56px * var(--beilv));
cursor: pointer;
}