修改界面

master
夜笙歌 3 years ago
parent 7ae72fc90e
commit b9b275df0a

@ -8,14 +8,9 @@
padding: 0.6% 0;
}
.autoscroll-table td {
font-size: 88%;
text-align: center;
padding: 0.8% 0;
}
.autoscroll-table > thead {
position: fixed;
position: sticky;
background-color: #103BBD;
color: #FFFFFF;
outline: #103BBD solid 1px;
@ -90,12 +85,14 @@
/* Font size readjust */
.autoscroll-table th {
font-size: 10%;
font-size: 0.85vw;
}
.autoscroll-table td {
font-size: 0.75vw;
white-space:nowrap;
text-align: center;
padding: 0;
}
.autoscroll-table caption {

@ -234,6 +234,7 @@ class AutoScrollTable {
}
resize() {
const parent = this.el.querySelector(".autoscroll-table").parentNode
const thead = this.el.querySelector(".autoscroll-table .autoscroll-table_thead");
const theadRow = thead.children[0]
let tbody = this.el.querySelector(".autoscroll-table .autoscroll-table_tbody1");
@ -256,14 +257,19 @@ class AutoScrollTable {
}
thead.style.width = window.getComputedStyle(tbody).width
shadow.style.height = window.getComputedStyle(theadRow).height
thead.style.top = window.getComputedStyle(this.el).top
let tr = this.el.querySelectorAll(".autoscroll-table .autoscroll-table_tbody1 tr")
tr.forEach(val => {
val.style.lineHeight = `${(parseFloat(window.getComputedStyle(parent).height) - parseFloat(window.getComputedStyle(theadRow).height))/5}px`
})
shadow.style.display ='none'
thead.style.top = '0'
if (caption) {
caption.style.width = thead.style.width
const captionHeight = parseFloat(window.getComputedStyle(caption).height)
thead.style.top = `${parseFloat(thead.style.top) + captionHeight}px`
thead.style.top = '0'
shadow.style.height = `${parseFloat(shadow.style.height) + captionHeight}px`
}
}

@ -1412,12 +1412,12 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yDataOne: new Fun().randomNum(),
yDataTwo: new Fun().randomNum(),
yDataThree: new Fun().randomNum(),
yDataOneName: '制氢量',
yDataTwoName: '发电量',
yDataThreeName: '充装量',
}
}
let max = Math.round(Math.max(...data.yDataOne,...data.yDataTwo))
let min = Math.round(Math.min(...data.yDataOne,...data.yDataTwo))
let option = {
tooltip: {
@ -1459,7 +1459,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
},
axisLabel: {
show: true,
color: '#fff'
color: '#fff',
interval:0,
},
data: data.xData,
},
@ -1470,7 +1471,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
axisTick: {
show: false,
},
min:15,
max:max+0.5,
min:min - 1,
axisLine: {
lineStyle: {
color: "#57617B",
@ -1478,7 +1480,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
},
axisLabel: {
show: true,
color: '#fff'
color: '#fff',
interval:0.5,
},
splitLine: {
show: false,

@ -38,15 +38,7 @@
left: 3.4%;
}
#bottom-left {
position: absolute;
border: 0px solid red;
width: 68%;
height: 25%;
top: 66.4%;
left: 3.5%;
font-size: 1vw;
}
.total {
flex-wrap: nowrap;
@ -197,22 +189,24 @@
height: 100%;
}
#bottom-left .autoscroll-table td {
padding-top: 0.3%;
padding-bottom: 0.3%;
.my-transition{
position: absolute;
border: 0px solid red;
width: 68%;
height: 25%;
top: 66.4%;
left: 3.5%;
transform: scale(0.5, 0.5);
opacity: 0;
transition: transform 0.5s linear, opacity 0.5s linear;
}
#bottom-left-2 .autoscroll-table td {
padding-top: 0.3%;
padding-bottom: 0.3%;
}
.my-transition2 {
position: absolute;
border: 0px solid red;
width: 68%;
height: 29.6%;
height: 25%;
top: 66.4%;
left: 3.5%;
transform: scale(0.5, 0.5);
@ -222,6 +216,7 @@
.my-click-transiton {
opacity: 1;
z-index: 2 ;
transform: scale(1, 1);
}
</style>
@ -243,14 +238,12 @@
<!--生产统计数据-->
<div class="my-transition">
<div id="bottom-left"></div>
<div class="total" id="total"></div>
<div class="my-transition" id="my-transition">
</div>
<!--<div class="my-transition2">-->
<!-- <div id="bottom-left-2"></div>-->
<!--</div>-->
<div class="my-transition2" id="my-transition2">
</div>
<div class="total" id="total"></div>
<!--中间数据-->
<div id="top-mid">
@ -359,21 +352,21 @@
<script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
<script>
//夹具生产计划切换
// showalert();
//
// window.setInterval(showalert, 1000 * 30);
//
// function showalert() {
// var myTransition = $('.my-transition');
// var myTransition2 = $('.my-transition2');
// if (myTransition.hasClass('my-click-transiton')) {
// // myTransition.removeClass('my-click-transiton');
// $('.my-transition2').addClass('my-click-transiton');
// } else {
// // myTransition2.removeClass('my-click-transiton');
// $('.my-transition').addClass('my-click-transiton');
// }
// }
showalert();
window.setInterval(showalert, 1000 * 30);
function showalert() {
var myTransition = $('.my-transition');
var myTransition2 = $('.my-transition2');
if (myTransition.hasClass('my-click-transiton')) {
myTransition.removeClass('my-click-transiton');
$('.my-transition2').addClass('my-click-transiton');
} else {
myTransition2.removeClass('my-click-transiton');
$('.my-transition').addClass('my-click-transiton');
}
}
const orderInfColumns = [
@ -400,13 +393,13 @@
}
// 生产统计数据
// const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'], {
// width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"],
// })
const planInfo = new AutoScrollTable(document.getElementById("my-transition"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:00'], {
width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"],
})
// const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
// width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"],
// })
const planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:00'], {
width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"],
})
// 切换中心运行状态
function updateStatus(id, status) {
@ -467,23 +460,22 @@
// ]
// 生产统计数据
autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => {
$('#bottom-left').remove()
$('.my-transition').append('<div class="bottom-left" id="bottom-left"></div>')
dynamicTable({
el: '#bottom-left',
rowNum: 7,
timeout: 0,
header: ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:00'],
data: data.map(value => [value.station_no, value.name, value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]),
index: false,
fontColor: '#B4B7BF ',
indexBGC: '#86F3FF',
headerBGC: 'rgba(8,36,75,0.2)',
oddRowBGC: 'rgba(8,36,75,0.2)',
evenRowBGC: 'rgba(6,25,57,0.2)',
colWidth: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"]
});
// orderInf.loadData(data, Object.keys(orderInfColumns))
// $('#bottom-left').remove()
// $('.my-transition').append('<div class="bottom-left" id="bottom-left"></div>')
// dynamicTable({
// el: '#bottom-left',
// rowNum: 7,
// timeout: 0,
// header: ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:00'],
// data: data.map(value => [value.station_no, value.name, value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]),
// index: false,
// fontColor: '#B4B7BF ',
// indexBGC: '#86F3FF',
// headerBGC: 'rgba(8,36,75,0.2)',
// oddRowBGC: 'rgba(8,36,75,0.2)',
// evenRowBGC: 'rgba(6,25,57,0.2)',
// colWidth: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"]
// });
// let consolidatedRow = ["", "合计", ""]
//
// for (let i = 3; i < 19; i++) {
@ -508,47 +500,18 @@
//
// consolidatedRow.push(sum.toString())
// }
//
// data.push(consolidatedRow)
// planInfo.loadData(data.map(value => [value.station_no, value.name, '正常', '0', value.plan_number,value.qty,`${value.rate}%`,value.h1,value.h2,value.h3,value.h4,value.h5,value.h6,value.h7,value.h8,value.h9,value.h10,value.h11,value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00']))
//data.map(value => [value.orderType, value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${(value.actualProduction / value.plannedProduction * 100).toFixed(2)}%`]
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00']))
data.map(value => [value.orderType, value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${(value.actualProduction / value.plannedProduction * 100).toFixed(2)}%`])
})
flip('#bottom-left')
// flip('#bottom-left')
// autoUpdate('/system/FoamerMes/getPlanHourInfo2', INTERVAL, data => {
// // orderInf.loadData(data, Object.keys(orderInfColumns))
// let consolidatedRow = ["", "合计", ""]
//
// for (let i = 3; i < 19; i++) {
// if (i === 6) {
// consolidatedRow.push(`${(consolidatedRow[5] / consolidatedRow[4] * 100).toFixed(1)}%`)
// continue
// }
//
// let sum = 0
//
// for (let j = 1; j < data.length; j++) {
// let d = data[j][i]
// if (!d || d === '') {
// continue
// }
// if (typeof d === 'string') {
// d = parseInt(d)
// }
//
// sum += d
// }
//
// consolidatedRow.push(sum.toString())
// }
//
// data.push(consolidatedRow)
//
// planInfo2.loadData(data, 19, {
// includeHead: true,
// })
// })
autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => {
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00']))
})
// 右侧压力 + 右侧温度

Loading…
Cancel
Save