Merge remote-tracking branch 'gitee/master'

master
wangh 4 years ago
commit 65bbaa00b3

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

@ -234,6 +234,7 @@ class AutoScrollTable {
} }
resize() { resize() {
const parent = this.el.querySelector(".autoscroll-table").parentNode
const thead = this.el.querySelector(".autoscroll-table .autoscroll-table_thead"); const thead = this.el.querySelector(".autoscroll-table .autoscroll-table_thead");
const theadRow = thead.children[0] const theadRow = thead.children[0]
let tbody = this.el.querySelector(".autoscroll-table .autoscroll-table_tbody1"); let tbody = this.el.querySelector(".autoscroll-table .autoscroll-table_tbody1");
@ -256,14 +257,19 @@ class AutoScrollTable {
} }
thead.style.width = window.getComputedStyle(tbody).width thead.style.width = window.getComputedStyle(tbody).width
shadow.style.height = window.getComputedStyle(theadRow).height let tr = this.el.querySelectorAll(".autoscroll-table .autoscroll-table_tbody1 tr")
thead.style.top = window.getComputedStyle(this.el).top 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) { if (caption) {
caption.style.width = thead.style.width caption.style.width = thead.style.width
const captionHeight = parseFloat(window.getComputedStyle(caption).height) 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` 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月'], xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yDataOne: new Fun().randomNum(), yDataOne: new Fun().randomNum(),
yDataTwo: new Fun().randomNum(), yDataTwo: new Fun().randomNum(),
yDataThree: new Fun().randomNum(),
yDataOneName: '制氢量', yDataOneName: '制氢量',
yDataTwoName: '发电量', yDataTwoName: '发电量',
yDataThreeName: '充装量',
} }
} }
let max = Math.round(Math.max(...data.yDataOne,...data.yDataTwo))
let min = Math.round(Math.min(...data.yDataOne,...data.yDataTwo))
let option = { let option = {
tooltip: { tooltip: {
@ -1459,7 +1459,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: '#fff' color: '#fff',
interval:0,
}, },
data: data.xData, data: data.xData,
}, },
@ -1470,7 +1471,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
axisTick: { axisTick: {
show: false, show: false,
}, },
min:15, max:max+0.5,
min:min - 1,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#57617B", color: "#57617B",
@ -1478,7 +1480,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: '#fff' color: '#fff',
interval:0.5,
}, },
splitLine: { splitLine: {
show: false, show: false,

@ -18,6 +18,9 @@
<style> <style>
.hide-scrollbar .autoscroll-table td:nth-child(6n + 2){
text-align: left;
}
.mid { .mid {
background: url(../img/mid.png) no-repeat; background: url(../img/mid.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -364,11 +367,11 @@
<script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script> <script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script>
<script> <script>
const occupancy = (val1=0,val2=0) => { const occupancy = (val1=0,val2=0) => {
const html = `内胆库库存占有率:${val1}%,箱壳库库存占有率${val2}%` const html = `内胆库存占用率:${val1}% &nbsp;&nbsp;&nbsp;&nbsp; 箱壳库存占用率${val2}%`
$('#occupancy').html(html) $('#occupancy').html(html)
} }
const planWorkOrderColumns = [ const planWorkOrderColumns = [
"序号", "型号","计划数量", "完成数量", "完成率", "时间", "序号", "型号","计划数量", "完成数量", "生产进度", "开始时间",
] ]
const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','40%', '10%', '10%', '10%', '20%']}) const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','40%', '10%', '10%', '10%', '20%']})
// const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], { // const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], {

@ -38,15 +38,7 @@
left: 3.4%; 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 { .total {
flex-wrap: nowrap; flex-wrap: nowrap;
@ -197,22 +189,24 @@
height: 100%; 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 { .my-transition2 {
position: absolute; position: absolute;
border: 0px solid red; border: 0px solid red;
width: 68%; width: 68%;
height: 29.6%; height: 25%;
top: 66.4%; top: 66.4%;
left: 3.5%; left: 3.5%;
transform: scale(0.5, 0.5); transform: scale(0.5, 0.5);
@ -222,6 +216,7 @@
.my-click-transiton { .my-click-transiton {
opacity: 1; opacity: 1;
z-index: 2 ;
transform: scale(1, 1); transform: scale(1, 1);
} }
</style> </style>
@ -243,14 +238,12 @@
<!--生产统计数据--> <!--生产统计数据-->
<div class="my-transition"> <div class="my-transition" id="my-transition">
<div id="bottom-left"></div>
<div class="total" id="total"></div>
</div> </div>
<!--<div class="my-transition2">--> <div class="my-transition2" id="my-transition2">
<!-- <div id="bottom-left-2"></div>--> </div>
<!--</div>--> <div class="total" id="total"></div>
<!--中间数据--> <!--中间数据-->
<div id="top-mid"> <div id="top-mid">
@ -359,21 +352,21 @@
<script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script> <script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
<script> <script>
//夹具生产计划切换 //夹具生产计划切换
// showalert(); showalert();
//
// window.setInterval(showalert, 1000 * 30); window.setInterval(showalert, 1000 * 30);
//
// function showalert() { function showalert() {
// var myTransition = $('.my-transition'); var myTransition = $('.my-transition');
// var myTransition2 = $('.my-transition2'); var myTransition2 = $('.my-transition2');
// if (myTransition.hasClass('my-click-transiton')) { if (myTransition.hasClass('my-click-transiton')) {
// // myTransition.removeClass('my-click-transiton'); myTransition.removeClass('my-click-transiton');
// $('.my-transition2').addClass('my-click-transiton'); $('.my-transition2').addClass('my-click-transiton');
// } else { } else {
// // myTransition2.removeClass('my-click-transiton'); myTransition2.removeClass('my-click-transiton');
// $('.my-transition').addClass('my-click-transiton'); $('.my-transition').addClass('my-click-transiton');
// } }
// } }
const orderInfColumns = [ 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'], { 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%", null, "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], 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"), [], { 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%", null, "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"],
// }) })
// 切换中心运行状态 // 切换中心运行状态
function updateStatus(id, status) { function updateStatus(id, status) {
@ -467,23 +460,22 @@
] ]
// 生产统计数据 // 生产统计数据
autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => { autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => {
$('#bottom-left').remove() // $('#bottom-left').remove()
$('.my-transition').append('<div class="bottom-left" id="bottom-left"></div>') // $('.my-transition').append('<div class="bottom-left" id="bottom-left"></div>')
dynamicTable({ // dynamicTable({
el: '#bottom-left', // el: '#bottom-left',
rowNum: 7, // rowNum: 7,
timeout: 0, // 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'], // 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]), // 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, // index: false,
fontColor: '#B4B7BF ', // fontColor: '#B4B7BF ',
indexBGC: '#86F3FF', // indexBGC: '#86F3FF',
headerBGC: 'rgba(8,36,75,0.2)', // headerBGC: 'rgba(8,36,75,0.2)',
oddRowBGC: 'rgba(8,36,75,0.2)', // oddRowBGC: 'rgba(8,36,75,0.2)',
evenRowBGC: 'rgba(6,25,57,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%"] // 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))
// let consolidatedRow = ["", "合计", ""] // let consolidatedRow = ["", "合计", ""]
// //
// for (let i = 3; i < 19; i++) { // for (let i = 3; i < 19; i++) {
@ -508,47 +500,18 @@
// //
// consolidatedRow.push(sum.toString()) // consolidatedRow.push(sum.toString())
// } // }
//
// data.push(consolidatedRow) // 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'])) 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)}%`] 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 => { autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => {
// // orderInf.loadData(data, Object.keys(orderInfColumns))
// let consolidatedRow = ["", "合计", ""] 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']))
// })
// 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,
// })
// })
// 右侧压力 + 右侧温度 // 右侧压力 + 右侧温度

Loading…
Cancel
Save