修改显示

master
夜笙歌 9 months ago
parent ff28928c97
commit e16bb50217

@ -53,6 +53,15 @@ body {
height: 31vw; height: 31vw;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.centerInfoDiv{
position: absolute;
top: 45%;
left: 50%;
width: 57vw;
height: 31vw;
transform: translate(-50%, -50%);
z-index: 2000;
}
.winDiv { .winDiv {
background-image: url("../../board/img/winBG.png"); background-image: url("../../board/img/winBG.png");

@ -126,8 +126,8 @@ body {
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
width: 10vw; /*width: 10vw;*/
height: 4vw; /*height: 4vw;*/
transform: translateX(-50%); transform: translateX(-50%);
} }

@ -16,32 +16,33 @@ $(() => {
}) })
$.get(ctx + 'broad/home/queryParam', {name}, (e) => { let request = () =>{
$.get(ctx + 'broad/home/queryParam', {name}, (e) => {
let enumArr = { let enumArr = {
'转速': ' rpm', '转速': ' rpm',
'电流': ' A', '电流': ' A',
'温度': ' ℃', '温度': ' ℃',
'压力': ' MPa', '压力': ' MPa',
} }
let data = e.data let data = e.data
let arrNum = Array.from(new Set([...e.data.map(e => e.order_by)])) let arrNum = Array.from(new Set([...e.data.map(e => e.order_by)]))
let arr = arrNum.map(e => { let arr = arrNum.map(e => {
let data1 = data.filter(val => val.order_by === e) let data1 = data.filter(val => val.order_by === e)
let obj = {} let obj = {}
data1.forEach((e, i) => { data1.forEach((e, i) => {
obj.left = e.location_x + '%' obj.left = e.location_x + '%'
obj.top = e.location_y + '%' obj.top = e.location_y + '%'
obj.name = e.name obj.name = e.name
obj['data' + (i + 1)] = e.pointname obj['data' + (i + 1)] = e.pointname
obj['num' + (i + 1)] = e.data obj['num' + (i + 1)] = e.data
obj['unit' + (i + 1)] = enumArr[e.pointname] obj['unit' + (i + 1)] = enumArr[e.pointname]
})
return obj
}) })
return obj arr.forEach(val => {
}) let html = `
arr.forEach(val => { <div class="centerInfo" style="top: ${val.top};left:${val.left};z-index:2000">
let html = `
<div class="centerInfo" style="top: ${val.top};left:${val.left}">
<div class="win" style="display: none"> <div class="win" style="display: none">
<div class="title">${val.name}</div> <div class="title">${val.name}</div>
<div class="span1">${val.data1}: ${val.num1 || 0}${val.unit1}</div> <div class="span1">${val.data1}: ${val.num1 || 0}${val.unit1}</div>
@ -50,44 +51,50 @@ $(() => {
<div class="icon" onclick="show(this)"></div> <div class="icon" onclick="show(this)"></div>
</div> </div>
` `
$("#centerInfoDiv").append(html) $("#centerInfoDiv").append(html)
}) })
}) })
$.get(ctx + 'broad/home/queryDeviceState', {name}, (data) => { $.get(ctx + 'broad/home/queryDeviceState', {name}, (data) => {
let imgSrc = (name) => { let imgSrc = (name) => {
switch (name) { switch (name) {
case '运行': case '运行':
return 'green' return 'green'
case '停机': case '停机':
return 'yellow' return 'yellow'
case '故障': case '故障':
return 'red' return 'red'
}
} }
} let po = [
let po = [ {
{ top: 33,
top: 33, left: 73
left: 73 },
}, {
{ top: 33,
top: 33, left: 38
left: 38 },
}, ]
] console.log(data)
console.log(data) let html = ``
let html = `` po.forEach((e, i) => {
po.forEach((e, i) => { html += `<div class="status" style="top:${e.top}%;left:${e.left}%">
html += `<div class="status" style="top:${e.top}%;left:${e.left}%">
<div class="icon" style="background-image: url('../../board/img/${imgSrc(data.data[i].state)}.png');"></div> <div class="icon" style="background-image: url('../../board/img/${imgSrc(data.data[i].state)}.png');"></div>
<!-- <span>${data.data[i].state}</span>--> <!-- <span>${data.data[i].state}</span>-->
</div> </div>
` `
})
$("#statusD").html(html)
}) })
$("#statusD").html(html) }
request()
}) setInterval(() => {
request()
}, 1000 * 60)
}) })
let chart = null let chart = null

@ -196,26 +196,6 @@
<div class="bottomBtn" id="bottomBtn3" onclick="bottomBtnInfo(3,this)" style="left: 62.5vw;">实时监控</div> <div class="bottomBtn" id="bottomBtn3" onclick="bottomBtnInfo(3,this)" style="left: 62.5vw;">实时监控</div>
<div class="centerImg"> <div class="centerImg">
<div id="centerInfoDiv">
<!-- <div class="centerInfo" onclick="showModal()" style="top: 35%;left:40%">-->
<!-- <div class="win">-->
<!-- <div class="title">位置1</div>-->
<!-- <div class="span1">转速: 50n/s</div>-->
<!-- <div class="span2">电流: 45A</div>-->
<!-- </div>-->
<!-- <div class="icon"></div>-->
<!-- </div>-->
<!-- <div class="centerInfo" onclick="showModal()" style="top: 45%;left:71%">-->
<!-- <div class="win">-->
<!-- <div class="title">位置1</div>-->
<!-- <div class="span1">转速: 50n/s</div>-->
<!-- <div class="span2">电流: 45A</div>-->
<!-- </div>-->
<!-- <div class="icon"></div>-->
<!-- </div>-->
</div>
</div> </div>
@ -230,6 +210,9 @@
</div> </div>
</div> </div>
</div>
<div id="centerInfoDiv" class="centerInfoDiv" >
</div> </div>
<div id="statusD"> <div id="statusD">
</div> </div>

@ -201,27 +201,12 @@
<div class="bottomBtn" id="bottomBtn3" onclick="bottomBtnInfo(3,this)" style="left: 62.5vw;">实时监控</div> <div class="bottomBtn" id="bottomBtn3" onclick="bottomBtnInfo(3,this)" style="left: 62.5vw;">实时监控</div>
<div class="centerImg"> <div class="centerImg">
<div id="centerInfoDiv">
<!-- <div class="centerInfo" onclick="showModal()" style="top: 35%;left:40%">--> </div>
<!-- <div class="win">--> <div id="centerInfoDiv" class="centerInfoDiv" >
<!-- <div class="title">位置1</div>-->
<!-- <div class="span1">转速: 50n/s</div>-->
<!-- <div class="span2">电流: 45A</div>-->
<!-- </div>-->
<!-- <div class="icon"></div>-->
<!-- </div>-->
<!-- <div class="centerInfo" onclick="showModal()" style="top: 45%;left:71%">-->
<!-- <div class="win">-->
<!-- <div class="title">位置1</div>-->
<!-- <div class="span1">转速: 50n/s</div>-->
<!-- <div class="span2">电流: 45A</div>-->
<!-- </div>-->
<!-- <div class="icon"></div>-->
<!-- </div>-->
</div>
</div>
<div id="statusD">
</div> </div>
<div id="rightInfo" style="display: none"> <div id="rightInfo" style="display: none">
@ -236,8 +221,6 @@
</div> </div>
</div> </div>
<div id="statusD">
</div>
<div class="eqModal" id="eqModal"> <div class="eqModal" id="eqModal">
<div class="shade" onclick="hideModal1()"></div> <div class="shade" onclick="hideModal1()"></div>

Loading…
Cancel
Save