352 lines
14 KiB
Vue
352 lines
14 KiB
Vue
<template>
|
|
<div ref="centerTopBox" class='centerTopBox'>
|
|
<div>
|
|
<video src="/static/videos/01.webm" muted autoplay loop class='videoStyle'></video>
|
|
<div
|
|
class='eqTipBox'
|
|
v-show='showTooltip'
|
|
:style="'left:'+tooltipStyle.left+'px;top:'+tooltipStyle.top+'px;'"
|
|
>
|
|
<p><span class='eqTipTitle'>设备名称:</span><span class='eqTipNum'>{{eqTipMsg.name}}</span></p>
|
|
<p><span class='eqTipTitle'>进口数量:</span><span class='eqTipNum'>{{eqTipMsg.input}}</span></p>
|
|
<p><span class='eqTipTitle'>出口数量:</span><span class='eqTipNum'>{{eqTipMsg.output}}</span></p>
|
|
<p><span class='eqTipTitle'>报警状态:</span>
|
|
<span class='eqTipNum'>
|
|
<img v-show='eqTipMsg.alarm' :src='dotY' width='16'/>
|
|
<img v-show='!eqTipMsg.alarm' :src='dotG' width='16'/>
|
|
{{eqTipMsg.alarm?'报警':'未报警'}}
|
|
</span>
|
|
</p>
|
|
<p><span class='eqTipTitle'>在线状态:</span>
|
|
<span class='eqTipNum'>
|
|
<img v-show='eqTipMsg.status' :src='dotG' width='16'/>
|
|
<img v-show='!eqTipMsg.status' :src='dotR' width='16'/>
|
|
{{eqTipMsg.status?'在线':'离线'}}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<!-- 设备 -->
|
|
<div class='eqBox'>
|
|
<!-- line-从上到下-从右往左 -->
|
|
<span
|
|
v-for='(item,index) in eqList'
|
|
:key='index'
|
|
:style="'width:'+item.w+'px;height:'+item.h+'px;left:'+item.l+'px;top:'+item.t+'px'"
|
|
@mouseenter="handleMouseEnter(item, $event)"
|
|
@mouseleave="handleMouseLeave"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div class='centerTopTopBox'>
|
|
<div style='display: inline-block;'>
|
|
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
|
|
<p class='num'>{{dataObj?.productRate || '-'}}%</p>
|
|
<p class='title'>成品率</p>
|
|
</div>
|
|
<div style='display: inline-block;'>
|
|
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
|
|
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'}}</p>
|
|
<p class='title' style='color:#FFB625'>今日产量</p>
|
|
</div>
|
|
<div style='display: inline-block;'>
|
|
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
|
|
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'}}</p>
|
|
<p class='title' style='color:#FFB625'>本月产量</p>
|
|
</div>
|
|
<div style='display: inline-block;'>
|
|
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
|
|
<p class='num'>{{dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-'}}</p>
|
|
<p class='title'>设备报警数</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'CenterTop',
|
|
data() {
|
|
return {
|
|
showTooltip:false,
|
|
tooltipStyle: {
|
|
left: 0,
|
|
top: 0
|
|
},
|
|
dotY:require('../../../../assets/images/dataBoard/dotY.png'),
|
|
dotR:require('../../../../assets/images/dataBoard/dotR.png'),
|
|
dotG:require('../../../../assets/images/dataBoard/dotG.png'),
|
|
eqList:[
|
|
{name:'A1-磨边机-1',id:100301,w:70,h:18,l:830,t:160},
|
|
{name:'A1-磨边机-2',id:100302,w:70,h:18,l:830,t:183},
|
|
{name:'A1-磨边机-3',id:100303,w:70,h:18,l:832,t:206},
|
|
{name:'A1-磨边后清洗机-1',id:100401,w:30,h:15,l:798,t:160},
|
|
{name:'A1-磨边后清洗机-2',id:100402,w:30,h:15,l:798,t:183},
|
|
{name:'A1-磨边后清洗机-3',id:100403,w:30,h:15,l:800,t:206},
|
|
{name:'A1-打孔机-1',id:100501,w:13,h:12,l:730,t:163},
|
|
{name:'A1-打孔机-2',id:100502,w:13,h:12,l:730,t:187},
|
|
{name:'A1-打孔机-3',id:100503,w:13,h:12,l:730,t:210},
|
|
{name:'A1-打孔后清洗机-1',id:100601,w:32,h:15,l:665,t:160},
|
|
{name:'A1-打孔后清洗机-2',id:100602,w:32,h:15,l:665,t:183},
|
|
{name:'A1-打孔后清洗机-3',id:100603,w:32,h:15,l:665,t:206},
|
|
{name:'A1-丝印机-1',id:100701,w:30,h:12,l:605,t:163},
|
|
{name:'A1-丝印机-2',id:100702,w:30,h:12,l:605,t:187},
|
|
{name:'A1-丝印机-3',id:100703,w:30,h:12,l:605,t:210},
|
|
{name:'A1-丝印后固化机-1',id:101301,w:37,h:12,l:558,t:163},
|
|
{name:'A1-丝印后固化机-2',id:101302,w:37,h:12,l:558,t:187},
|
|
{name:'A1-丝印后固化机-3',id:101303,w:37,h:12,l:558,t:210},
|
|
{name:'A1-钢化炉',id:101401,w:75,h:15,l:382,t:209},
|
|
{name:'A1-包装清洗机-1',id:101501,w:30,h:15,l:228,t:173},
|
|
{name:'A1-包装清洗机-2',id:101502,w:30,h:15,l:228,t:206},
|
|
{name:'A1-铺纸机-1',id:101601,w:18,h:15,l:188,t:175},
|
|
{name:'A1-铺纸机-2',id:101602,w:18,h:15,l:188,t:206},
|
|
|
|
{name:'A2-磨边机-1',id:200301,w:70,h:18,l:832,t:233},
|
|
{name:'A2-磨边机-2',id:200302,w:70,h:18,l:833,t:257},
|
|
{name:'A2-磨边机-3',id:200303,w:70,h:18,l:834,t:281},
|
|
{name:'A2-磨边后清洗机-1',id:200401,w:30,h:15,l:800,t:233},
|
|
{name:'A2-磨边后清洗机-2',id:200402,w:30,h:15,l:801,t:257},
|
|
{name:'A2-磨边后清洗机-3',id:200403,w:30,h:15,l:802,t:281},
|
|
{name:'A2-打孔机-1',id:200501,w:13,h:12,l:731,t:240},
|
|
{name:'A2-打孔机-2',id:200502,w:13,h:12,l:731,t:262},
|
|
{name:'A2-打孔机-3',id:200503,w:13,h:12,l:731,t:285},
|
|
{name:'A2-打孔后清洗机-1',id:200601,w:32,h:15,l:666,t:234},
|
|
{name:'A2-打孔后清洗机-2',id:200602,w:32,h:15,l:666,t:258},
|
|
{name:'A2-打孔后清洗机-3',id:200603,w:32,h:15,l:666,t:282},
|
|
{name:'A2-丝印机-1',id:200701,w:30,h:12,l:605,t:238},
|
|
{name:'A2-丝印机-2',id:200702,w:30,h:12,l:605,t:262},
|
|
{name:'A2-丝印机-3',id:200703,w:30,h:12,l:605,t:286},
|
|
{name:'A2-丝印后固化机-1',id:201301,w:37,h:12,l:558,t:238},
|
|
{name:'A2-丝印后固化机-2',id:201302,w:37,h:12,l:558,t:262},
|
|
{name:'A2-丝印后固化机-3',id:201303,w:37,h:12,l:558,t:286},
|
|
{name:'A2-钢化炉',id:201401,w:75,h:15,l:382,t:238},
|
|
{name:'A2-包装清洗机-1',id:201501,w:30,h:15,l:228,t:234},
|
|
{name:'A2-包装清洗机-2',id:201502,w:30,h:15,l:228,t:267},
|
|
{name:'A2-铺纸机-1',id:201601,w:18,h:15,l:187,t:234},
|
|
{name:'A2-铺纸机-2',id:201602,w:18,h:15,l:186,t:267},
|
|
|
|
{name:'A3-磨边机-1',id:300301,w:70,h:18,l:834,t:318},
|
|
{name:'A3-磨边机-2',id:300302,w:70,h:18,l:834,t:342},
|
|
{name:'A3-磨边后清洗机-1',id:300401,w:30,h:15,l:802,t:319},
|
|
{name:'A3-磨边后清洗机-2',id:300402,w:30,h:15,l:802,t:342},
|
|
{name:'A3-打孔机-1',id:300501,w:13,h:12,l:731,t:324},
|
|
{name:'A3-打孔机-2',id:300502,w:13,h:12,l:731,t:348},
|
|
{name:'A3-打孔后清洗机-1',id:300601,w:32,h:15,l:666,t:320},
|
|
{name:'A3-打孔后清洗机-2',id:300602,w:32,h:15,l:666,t:342},
|
|
{name:'A3-丝印机-1',id:300701,w:30,h:12,l:605,t:324},
|
|
{name:'A3-丝印机-2',id:300702,w:30,h:12,l:605,t:348},
|
|
{name:'A3-一次镀膜机-1',id:300801,w:20,h:15,l:553,t:322},
|
|
{name:'A3-一次镀膜机-2',id:300802,w:20,h:15,l:553,t:346},
|
|
{name:'A3-丝印后固化机-1',id:301301,w:37,h:12,l:506,t:324},
|
|
{name:'A3-丝印后固化机-2',id:301302,w:37,h:12,l:506,t:347},
|
|
{name:'A3-钢化炉',id:301401,w:75,h:15,l:340,t:346},
|
|
{name:'A3-包装清洗机-1',id:301501,w:30,h:15,l:240,t:343},
|
|
{name:'A3-铺纸机-1',id:301601,w:18,h:15,l:200,t:343},
|
|
{name:'A3-铺纸机-2',id:301602,w:18,h:15,l:170,t:343},
|
|
|
|
{name:'A4-磨边机-1',id:400301,w:70,h:18,l:838,t:380},
|
|
{name:'A4-磨边机-2',id:400302,w:70,h:18,l:838,t:405},
|
|
{name:'A4-磨边机-3',id:400303,w:70,h:18,l:839,t:428},
|
|
{name:'A4-磨边后清洗机-1',id:400401,w:30,h:15,l:804,t:380},
|
|
{name:'A4-磨边后清洗机-2',id:400402,w:30,h:15,l:805,t:405},
|
|
{name:'A4-磨边后清洗机-3',id:400403,w:30,h:15,l:806,t:427},
|
|
{name:'A4-一次镀膜机-1',id:400801,w:20,h:15,l:707,t:381},
|
|
{name:'A4-一次镀膜机-2',id:400802,w:20,h:15,l:707,t:407},
|
|
{name:'A4-一次镀膜机-3',id:400803,w:20,h:15,l:707,t:429},
|
|
{name:'A4-一次固化机-1',id:401001,w:37,h:12,l:660,t:383},
|
|
{name:'A4-一次固化机-2',id:401002,w:37,h:12,l:660,t:409},
|
|
{name:'A4-一次固化机-3',id:401003,w:37,h:12,l:660,t:431},
|
|
{name:'A4-二次镀膜机-1',id:401101,w:20,h:15,l:605,t:382},
|
|
{name:'A4-二次镀膜机-2',id:401102,w:20,h:15,l:605,t:408},
|
|
{name:'A4-二次镀膜机-3',id:401103,w:20,h:15,l:605,t:430},
|
|
{name:'A4-二次固化机-1',id:401201,w:37,h:12,l:557,t:383},
|
|
{name:'A4-二次固化机-2',id:401202,w:37,h:12,l:557,t:409},
|
|
{name:'A4-二次固化机-3',id:401203,w:37,h:12,l:557,t:431},
|
|
{name:'A4-钢化炉',id:401401,w:75,h:15,l:379,t:381},
|
|
{name:'A4-包装清洗机-1',id:401501,w:30,h:15,l:220,t:379},
|
|
{name:'A4-包装清洗机-2',id:401502,w:30,h:18,l:220,t:410},
|
|
{name:'A4-铺纸机-1',id:401601,w:18,h:15,l:180,t:381},
|
|
{name:'A4-铺纸机-2',id:401602,w:18,h:15,l:180,t:414},
|
|
|
|
{name:'A5-磨边机-1',id:500301,w:70,h:18,l:817,t:465},
|
|
{name:'A5-磨边机-2',id:500302,w:70,h:18,l:817,t:488},
|
|
{name:'A5-磨边机-3',id:500303,w:70,h:18,l:819,t:512},
|
|
{name:'A5-磨边后清洗机-1',id:500401,w:30,h:15,l:784,t:462},
|
|
{name:'A5-磨边后清洗机-2',id:500402,w:30,h:15,l:784,t:488},
|
|
{name:'A5-磨边后清洗机-3',id:500403,w:30,h:15,l:785,t:512},
|
|
{name:'A5-一次镀膜机-1',id:500801,w:20,h:15,l:685,t:466},
|
|
{name:'A5-一次镀膜机-2',id:500802,w:20,h:15,l:685,t:490},
|
|
{name:'A5-一次镀膜机-3',id:500803,w:20,h:15,l:685,t:513},
|
|
{name:'A5-一次固化机-1',id:501001,w:37,h:12,l:638,t:468},
|
|
{name:'A5-一次固化机-2',id:501002,w:37,h:12,l:638,t:491},
|
|
{name:'A5-一次固化机-3',id:501003,w:37,h:12,l:638,t:514},
|
|
{name:'A5-二次镀膜机-1',id:501101,w:20,h:15,l:584,t:468},
|
|
{name:'A5-二次镀膜机-2',id:501102,w:20,h:15,l:584,t:490},
|
|
{name:'A5-二次镀膜机-3',id:501103,w:20,h:15,l:584,t:513},
|
|
{name:'A5-二次固化机-1',id:501201,w:37,h:12,l:535,t:468},
|
|
{name:'A5-二次固化机-2',id:501202,w:37,h:12,l:535,t:492},
|
|
{name:'A5-二次固化机-3',id:501203,w:37,h:12,l:535,t:514},
|
|
{name:'A5-钢化炉',id:501401,w:75,h:15,l:344,t:513},
|
|
{name:'A5-包装清洗机-1',id:501501,w:30,h:18,l:185,t:473},
|
|
{name:'A5-包装清洗机-2',id:501502,w:30,h:18,l:185,t:511},
|
|
{name:'A5-铺纸机-1',id:501601,w:18,h:15,l:144,t:475},
|
|
{name:'A5-铺纸机-2',id:501602,w:18,h:15,l:144,t:511}
|
|
],
|
|
eqTipMsg:{
|
|
name:'',
|
|
input:null,
|
|
output:null,
|
|
alarm:'未报警',
|
|
status:'在线'
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
scaleNum: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
dataObj: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
watch: {
|
|
scaleNum(val) {
|
|
this.scaleNum = val
|
|
},
|
|
dataObj(val) {
|
|
val.equipmentDets && val.equipmentDets.forEach(item => {
|
|
this.eqList.forEach(eq => {
|
|
if (eq.id == item.id) {
|
|
eq.name = item.name
|
|
eq.input = item.input
|
|
eq.output = item.output
|
|
eq.alarm = item.isError
|
|
eq.status = item.isRun
|
|
}
|
|
})
|
|
})
|
|
}
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
// 鼠标hover事件
|
|
handleMouseEnter(item, event) {
|
|
this.showTooltip = true;
|
|
this.eqTipMsg.name = item.name;
|
|
this.eqTipMsg.input = item.input;
|
|
this.eqTipMsg.output = item.output;
|
|
this.eqTipMsg.alarm = item.alarm;
|
|
this.eqTipMsg.status = item.status;
|
|
this.updateTooltipPosition(event);
|
|
},
|
|
handleMouseLeave() {
|
|
this.showTooltip = false;
|
|
},
|
|
updateTooltipPosition(event) {
|
|
const rect = this.$refs.centerTopBox.getBoundingClientRect()
|
|
const offset = 15;
|
|
const tooltipWidth = 315*this.scaleNum;
|
|
const tooltipHeight = 170*this.scaleNum;
|
|
const startX = rect.left;
|
|
const startY = rect.top;
|
|
const endX = rect.width;
|
|
const endY = rect.height;
|
|
let posX = event.clientX-startX + offset;
|
|
let posY = event.clientY-startY + offset;
|
|
if (posX + tooltipWidth > endX) {
|
|
posX = event.clientX-startX - tooltipWidth - offset;
|
|
}
|
|
if (posY + tooltipHeight > endY) {
|
|
posY = event.clientY -startY - tooltipHeight - offset;
|
|
}
|
|
this.tooltipStyle.left = posX/this.scaleNum;
|
|
this.tooltipStyle.top = posY/this.scaleNum;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
p{
|
|
margin: 0;
|
|
}
|
|
.centerTopBox {
|
|
width: 1041px;
|
|
height: 600px;
|
|
background: url('../../../../assets/images/dataBoard/center-top.png') no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
left: 440px;
|
|
top:113px;
|
|
overflow: hidden;
|
|
.videoStyle {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: absolute;
|
|
left:-440px;
|
|
top:-113px;
|
|
}
|
|
.eqTipBox {
|
|
width: 315px;
|
|
height: 170px;
|
|
background: url('../../../../assets/images/dataBoard/eq-tip.png') no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
padding-top: 10px;
|
|
z-index: 1;
|
|
span{
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 1px;
|
|
vertical-align: middle;
|
|
}
|
|
.eqTipTitle {
|
|
width: 112px;
|
|
height: 30px;
|
|
padding-left: 15px;
|
|
}
|
|
.eqTipNum {
|
|
width: 190px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.eqBox {
|
|
span{
|
|
display: inline-block;
|
|
// border: 1px solid red;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.centerTopTopBox {
|
|
padding-left: 48px;
|
|
position: absolute;
|
|
top:30px;
|
|
.num {
|
|
width: 203px;
|
|
height: 65px;
|
|
line-height: 65px;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
font-weight: 500;
|
|
font-size: 38px;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
|
text-align: center;
|
|
position: absolute;
|
|
top:0px;
|
|
}
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
color: #00C8F7;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |