mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

看板页面

Browse Source
This commit is contained in:
朱菊兰
2025-04-17 16:23:47 +08:00
parent bbd9972761
commit 2c1e1845f4
46 changed files with 1716 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
src/views/base/dataBoard/components/CenterTop.vue Normal file
View File

@@ -0,0 +1,323 @@
<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 :src='dotY' width='16'/>{{eqTipMsg.alarm}}</span></p>
<p><span class='eqTipTitle'>在线状态:</span><span class='eqTipNum'><img :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'>88%</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;'>8,984</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;'>12,948,984</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'>59</p>
<p class='title'>设备报警数</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CenterTop',
data() {
return {
showTooltip:false,
tooltipStyle: {
left: 0,
top: 0
},
scaleNum:1,
dotY:require('../../../../assets/images/dataBoard/dotY.png'),
dotR:require('../../../../assets/images/dataBoard/dotR.png'),
dotG:require('../../../../assets/images/dataBoard/dotG.png'),
eqList:[
{name:'磨边机1',id:'1',w:70,h:18,l:830,t:160},
{name:'磨边机2',id:'2',w:70,h:18,l:830,t:183},
{name:'磨边机3',id:'3',w:70,h:18,l:832,t:206},
{name:'清洗机1',id:'4',w:30,h:15,l:798,t:160},
{name:'清洗机2',id:'5',w:30,h:15,l:798,t:183},
{name:'清洗机3',id:'6',w:30,h:15,l:800,t:206},
{name:'打孔机1',id:'7',w:13,h:12,l:730,t:163},
{name:'打孔机2',id:'8',w:13,h:12,l:730,t:187},
{name:'打孔机3',id:'9',w:13,h:12,l:730,t:210},
{name:'清洗机1',id:'10',w:32,h:15,l:665,t:160},
{name:'清洗机2',id:'11',w:32,h:15,l:665,t:183},
{name:'清洗机3',id:'12',w:32,h:15,l:665,t:206},
{name:'丝印机1',id:'13',w:30,h:12,l:605,t:163},
{name:'丝印机2',id:'14',w:30,h:12,l:605,t:187},
{name:'丝印机3',id:'15',w:30,h:12,l:605,t:210},
{name:'固化炉1',id:'16',w:37,h:12,l:558,t:163},
{name:'固化炉2',id:'17',w:37,h:12,l:558,t:187},
{name:'固化炉3',id:'18',w:37,h:12,l:558,t:210},
{name:'钢化炉',id:'19',w:75,h:15,l:382,t:209},
{name:'清洗机1',id:'20',w:30,h:15,l:228,t:173},
{name:'清洗机2',id:'21',w:30,h:15,l:228,t:206},
{name:'铺纸机1',id:'22',w:18,h:15,l:188,t:175},
{name:'铺纸机2',id:'23',w:18,h:15,l:188,t:206},
{name:'磨边机1',id:'24',w:70,h:18,l:832,t:233},
{name:'磨边机2',id:'25',w:70,h:18,l:833,t:257},
{name:'磨边机3',id:'26',w:70,h:18,l:834,t:281},
{name:'清洗机1',id:'27',w:30,h:15,l:800,t:233},
{name:'清洗机2',id:'28',w:30,h:15,l:801,t:257},
{name:'清洗机3',id:'29',w:30,h:15,l:802,t:281},
{name:'打孔机1',id:'30',w:13,h:12,l:731,t:240},
{name:'打孔机2',id:'31',w:13,h:12,l:731,t:262},
{name:'打孔机3',id:'32',w:13,h:12,l:731,t:285},
{name:'清洗机1',id:'33',w:32,h:15,l:666,t:234},
{name:'清洗机2',id:'34',w:32,h:15,l:666,t:258},
{name:'清洗机3',id:'35',w:32,h:15,l:666,t:282},
{name:'丝印机1',id:'36',w:30,h:12,l:605,t:238},
{name:'丝印机2',id:'37',w:30,h:12,l:605,t:262},
{name:'丝印机3',id:'38',w:30,h:12,l:605,t:286},
{name:'固化炉1',id:'39',w:37,h:12,l:558,t:238},
{name:'固化炉2',id:'40',w:37,h:12,l:558,t:262},
{name:'固化炉3',id:'41',w:37,h:12,l:558,t:286},
{name:'钢化炉',id:'42',w:75,h:15,l:382,t:238},
{name:'清洗机1',id:'43',w:30,h:15,l:228,t:234},
{name:'清洗机2',id:'44',w:30,h:15,l:228,t:267},
{name:'铺纸机1',id:'45',w:18,h:15,l:187,t:234},
{name:'铺纸机2',id:'46',w:18,h:15,l:186,t:267},
{name:'磨边机1',id:'47',w:70,h:18,l:834,t:318},
{name:'磨边机2',id:'48',w:70,h:18,l:834,t:342},
{name:'清洗机1',id:'49',w:30,h:15,l:802,t:319},
{name:'清洗机2',id:'50',w:30,h:15,l:802,t:342},
{name:'打孔机1',id:'51',w:13,h:12,l:731,t:324},
{name:'打孔机2',id:'52',w:13,h:12,l:731,t:348},
{name:'清洗机1',id:'53',w:32,h:15,l:666,t:320},
{name:'清洗机2',id:'54',w:32,h:15,l:666,t:342},
{name:'丝印机1',id:'55',w:30,h:12,l:605,t:324},
{name:'丝印机2',id:'56',w:30,h:12,l:605,t:348},
{name:'镀膜机1',id:'57',w:20,h:15,l:553,t:322},
{name:'镀膜机2',id:'58',w:20,h:15,l:553,t:346},
{name:'固化炉1',id:'59',w:37,h:12,l:506,t:324},
{name:'固化炉2',id:'60',w:37,h:12,l:506,t:347},
{name:'钢化炉',id:'61',w:75,h:15,l:340,t:346},
{name:'清洗机1',id:'62',w:30,h:15,l:240,t:343},
{name:'铺纸机1',id:'63',w:18,h:15,l:200,t:343},
{name:'铺纸机2',id:'64',w:18,h:15,l:170,t:343},
{name:'磨边机1',id:'65',w:70,h:18,l:838,t:380},
{name:'磨边机2',id:'66',w:70,h:18,l:838,t:405},
{name:'磨边机3',id:'67',w:70,h:18,l:839,t:428},
{name:'清洗机1',id:'68',w:30,h:15,l:804,t:380},
{name:'清洗机2',id:'69',w:30,h:15,l:805,t:405},
{name:'清洗机3',id:'70',w:30,h:15,l:806,t:427},
{name:'镀膜机1',id:'71',w:20,h:15,l:707,t:381},
{name:'镀膜机2',id:'72',w:20,h:15,l:707,t:407},
{name:'镀膜机3',id:'73',w:20,h:15,l:707,t:429},
{name:'固化炉1',id:'74',w:37,h:12,l:660,t:383},
{name:'固化炉2',id:'75',w:37,h:12,l:660,t:409},
{name:'固化炉3',id:'76',w:37,h:12,l:660,t:431},
{name:'镀膜机1',id:'77',w:20,h:15,l:605,t:382},
{name:'镀膜机2',id:'78',w:20,h:15,l:605,t:408},
{name:'镀膜机3',id:'79',w:20,h:15,l:605,t:430},
{name:'固化炉1',id:'80',w:37,h:12,l:557,t:383},
{name:'固化炉2',id:'81',w:37,h:12,l:557,t:409},
{name:'固化炉3',id:'82',w:37,h:12,l:557,t:431},
{name:'钢化炉',id:'83',w:75,h:15,l:379,t:381},
{name:'清洗机1',id:'84',w:30,h:15,l:220,t:379},
{name:'清洗机2',id:'85',w:30,h:18,l:220,t:410},
{name:'铺纸机1',id:'86',w:18,h:15,l:180,t:381},
{name:'铺纸机2',id:'87',w:18,h:15,l:180,t:414},
{name:'磨边机1',id:'88',w:70,h:18,l:817,t:465},
{name:'磨边机2',id:'89',w:70,h:18,l:817,t:488},
{name:'磨边机3',id:'90',w:70,h:18,l:819,t:512},
{name:'清洗机1',id:'91',w:30,h:15,l:784,t:462},
{name:'清洗机2',id:'92',w:30,h:15,l:784,t:488},
{name:'清洗机3',id:'93',w:30,h:15,l:785,t:512},
{name:'镀膜机1',id:'94',w:20,h:15,l:685,t:466},
{name:'镀膜机2',id:'95',w:20,h:15,l:685,t:490},
{name:'镀膜机3',id:'96',w:20,h:15,l:685,t:513},
{name:'固化炉1',id:'97',w:37,h:12,l:638,t:468},
{name:'固化炉2',id:'98',w:37,h:12,l:638,t:491},
{name:'固化炉3',id:'99',w:37,h:12,l:638,t:514},
{name:'镀膜机1',id:'100',w:20,h:15,l:584,t:468},
{name:'镀膜机2',id:'101',w:20,h:15,l:584,t:490},
{name:'镀膜机3',id:'102',w:20,h:15,l:584,t:513},
{name:'固化炉1',id:'103',w:37,h:12,l:535,t:468},
{name:'固化炉2',id:'104',w:37,h:12,l:535,t:492},
{name:'固化炉3',id:'105',w:37,h:12,l:535,t:514},
{name:'钢化炉',id:'106',w:75,h:15,l:344,t:513},
{name:'清洗机1',id:'107',w:30,h:18,l:185,t:473},
{name:'清洗机2',id:'108',w:30,h:18,l:185,t:511},
{name:'铺纸机1',id:'109',w:18,h:15,l:144,t:475},
{name:'铺纸机2',id:'110',w:18,h:15,l:144,t:511}
],
eqTipMsg:{
name:'',
input:null,
output:null,
alarm:'未报警',
status:'在线'
}
}
},
props: {
scaleNum: {
type: Number,
default: 1
}
},
watch: {
scaleNum(val) {
this.scaleNum = val
}
},
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 = 230*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: 230px;
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: 112px;
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>