You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
922 lines
30 KiB
HTML
922 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width,initial-scale=1.0"
|
|
name="viewport">
|
|
<title>发泡SCADA数据平台</title>
|
|
<meta content="U壳钣金SCADA数据平台" name="description">
|
|
<link href="../../static/css/main-style.css" rel="stylesheet" th:href="@{/css/main-style.css}"/>
|
|
<!-- <link href="../../static/css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet"/>-->
|
|
<!-- 360浏览器急速模式 -->
|
|
<meta content="webkit" name="renderer">
|
|
<!-- 避免IE使用兼容模式 -->
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
|
<script src="../../static/js/echartsCommon.js" th:src="@{/js/echartsCommon.js}"></script>
|
|
<link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
|
|
|
|
</head>
|
|
<style>
|
|
#top-left {
|
|
border: 0px solid red;
|
|
position: absolute;
|
|
width: 23.5%;
|
|
height: 20%;
|
|
top: 14.85%;
|
|
left: 3.4%;
|
|
/*font-size: 12%;*/
|
|
/*padding-left: 1%;
|
|
padding-top: 0.7%;*/
|
|
}
|
|
|
|
#mid-left {
|
|
position: absolute;
|
|
border: 0px solid red;
|
|
width: 23.5%;
|
|
height: 16%;
|
|
top: 42.5%;
|
|
left: 3.4%;
|
|
}
|
|
|
|
|
|
|
|
.total {
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
display: flex;
|
|
position: absolute;
|
|
border: 1px solid red;
|
|
width: 68%;
|
|
height: 3.9%;
|
|
top: 91.4%;
|
|
left: 3.5%;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
#top-mid {
|
|
position: absolute;
|
|
border: 0px solid red;
|
|
width: 40%;
|
|
height: 19.8%;
|
|
top: 14%;
|
|
left: 30%;
|
|
}
|
|
|
|
.top-mid-Text {
|
|
height: 26.5%;
|
|
width: 5%;
|
|
border: 0px solid black;
|
|
font-size: 16%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: justify;
|
|
}
|
|
|
|
#top-right {
|
|
position: absolute;
|
|
border: 0px solid red;
|
|
width: 23.5%;
|
|
height: 20%;
|
|
top: 14.85%;
|
|
left: 73%;
|
|
}
|
|
|
|
#mid-right {
|
|
position: absolute;
|
|
border: 0px solid red;
|
|
width: 23.5%;
|
|
height: 16%;
|
|
top: 42.5%;
|
|
left: 73%;
|
|
}
|
|
|
|
#bottom-right {
|
|
outline: #00a65a 0px solid;
|
|
border: 0px solid red;
|
|
position: absolute;
|
|
width: 23.5%;
|
|
height: 29.6%;
|
|
top: 66.4%;
|
|
left: 73%;
|
|
}
|
|
|
|
|
|
#bottom-mid {
|
|
position: absolute;
|
|
width: 43.3%;
|
|
height: 21%;
|
|
top: 74%;
|
|
left: 28.2%;
|
|
}
|
|
|
|
|
|
#oee {
|
|
position: absolute;
|
|
top: 14%;
|
|
left: 32.8%;
|
|
font-size: 22%;
|
|
color: #56B2F5;
|
|
text-shadow: 0 0 2px #56B2F5;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
#production {
|
|
position: absolute;
|
|
top: 14%;
|
|
left: 54%;
|
|
font-size: 22%;
|
|
color: #57F4AD;
|
|
text-shadow: 0 0 2px #57F4AD;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
#expected-pace {
|
|
position: absolute;
|
|
top: 26.6%;
|
|
left: 32.8%;
|
|
font-size: 22%;
|
|
color: #CCF456;
|
|
text-shadow: 0 0 2px #CCF456;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
#actual-pace {
|
|
position: absolute;
|
|
top: 26.6%;
|
|
left: 54%;
|
|
font-size: 22%;
|
|
color: #F58756;
|
|
text-shadow: 0 0 2px #F58756;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.status-table * {
|
|
|
|
}
|
|
|
|
.status-table td {
|
|
padding: 1.6% 0;
|
|
}
|
|
|
|
.status-table_item {
|
|
color: #0E72BE;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.status-table_content {
|
|
color: #8DA9C1;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
#energy-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#relay-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#power-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#contactor-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
.my-transition2 {
|
|
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;
|
|
}
|
|
|
|
.my-click-transiton {
|
|
opacity: 1;
|
|
z-index: 2 ;
|
|
transform: scale(1, 1);
|
|
}
|
|
</style>
|
|
<body class="Foamer2" style="display:flex;">
|
|
|
|
<!--界面跳转-->
|
|
<!--
|
|
<div style="border: 0px solid red;width: 24%;height: 0.2rem;top: 0%;margin-left:38%;cursor: pointer;" onclick="window.location.href = 'http://10.100.71.101:8012/system/Foamer?id=0';return false"></div>
|
|
-->
|
|
|
|
<!--订单执行-->
|
|
<div id="top-left">
|
|
</div>
|
|
|
|
<!--生产统计-->
|
|
<div id="mid-left">
|
|
</div>
|
|
|
|
<!--生产统计数据-->
|
|
|
|
|
|
<div class="my-transition" id="my-transition">
|
|
</div>
|
|
|
|
<div class="my-transition2" id="my-transition2">
|
|
</div>
|
|
<div class="total" id="total"></div>
|
|
|
|
<!--中间数据-->
|
|
<div id="top-mid">
|
|
<!--当时计划-->
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;color: #6fd4ff;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:7.7%;color: #6fd4ff;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:14.9%;color: #6fd4ff;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:22.3%;color: #6fd4ff;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<!--当前计划-->
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:36.5%; color: #6fff85;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:43.8%; color: #6fff85;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:51.1%; color: #6fff85;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:58.4%; color: #6fff85;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<!--实际产量-->
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:72.3%; color: #ffff6d;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:79.9%; color: #ffff6d;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:87.3%; color: #ffff6d;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:2%;left:94.6%; color: #ffff6d;">
|
|
<span>-</span>
|
|
</div>
|
|
|
|
<!--发泡线 - 状态-->
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left: 7%;">
|
|
<img alt="运行状态" id="status-a" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:23%">
|
|
<img alt="运行状态" id="status-b" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:39%">
|
|
<img alt="运行状态" id="status-c" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:55%">
|
|
<img alt="运行状态" id="status-d" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<!--发泡机 - 状态-->
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:77%">
|
|
<img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
|
<!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
|
|
</div>
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:95%">
|
|
<img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
|
<!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
|
|
</div>
|
|
</div>
|
|
|
|
<!--发泡参数-->
|
|
<div id="top-right">
|
|
</div>
|
|
|
|
<!--工程不良-->
|
|
<div id="mid-right">
|
|
|
|
</div>
|
|
|
|
<!--库存-->
|
|
<div id="bottom-right">
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
|
|
<script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
|
|
<th:block th:include="include :: footer"/>
|
|
<th:block th:include="include :: echarts-js"/>
|
|
<script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
|
|
<script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
|
|
<script src="../../static/js/scrollTable.js" th:src="@{/js/scrollTable.js}"></script>
|
|
|
|
<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');
|
|
}
|
|
}
|
|
|
|
|
|
const orderInfColumns = [
|
|
"型号",
|
|
"计划数",
|
|
"完成数",
|
|
"差异数",
|
|
"执行进度"
|
|
];
|
|
const orderInf = new AutoScrollTable(document.getElementById("top-left"), orderInfColumns, {
|
|
width: ['30%', '14.5%', '14.5%', '14.5%', '14.5%']
|
|
})
|
|
|
|
let selectors = []
|
|
let tmp = []
|
|
|
|
for (let i = 0; i < 12; i++) {
|
|
tmp.push(`#top-mid .top-mid-Text:nth-child(${i + 1}) span`)
|
|
|
|
if (tmp.length >= 4) {
|
|
selectors.push(tmp)
|
|
tmp = []
|
|
}
|
|
}
|
|
|
|
// 生产统计数据
|
|
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("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) {
|
|
const el = document.getElementById(id)
|
|
switch (status) {
|
|
case 0:
|
|
el.setAttribute("src", el.getAttribute("src").replace("runImg", "stopImg"))
|
|
break
|
|
case 1:
|
|
el.setAttribute("src", el.getAttribute("src").replace("stopImg", "runImg"))
|
|
break
|
|
}
|
|
}
|
|
|
|
$(() => {
|
|
area()
|
|
total()
|
|
// 订单执行 + 生产统计
|
|
autoUpdate('/broad/fp/selectOrderExecution', INTERVAL, data => {
|
|
orderInf.loadData(data.map(value => [value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.rate]), Object.keys(orderInfColumns))
|
|
|
|
modelChart.setOption({
|
|
xAxis: {
|
|
data: data.map(value => value.name),
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
data: data.map(value => value.actual_number),
|
|
},
|
|
]
|
|
})
|
|
})
|
|
|
|
const orderAgv = function (plannedProduction, actualProduction) {
|
|
if (plannedProduction == 0) {
|
|
return 0;
|
|
}
|
|
if (actualProduction == 0) {
|
|
return 0;
|
|
}
|
|
|
|
return (actualProduction / plannedProduction * 100).toFixed(1)
|
|
}
|
|
|
|
// 当班计划/实际产量/当班差异
|
|
autoUpdate('/broad/fp/selectFpOrderInfo', INTERVAL, data => {
|
|
// let p = [data[1], data[0][2], data[0][3]]
|
|
let p = [data.planned_number, data.quantity_number, data.planned_number - data.quantity_number]
|
|
|
|
for (let i in p) {
|
|
updateSplitBlocks(p[i], selectors[i])
|
|
}
|
|
})
|
|
let a = [
|
|
{name: '当班计划', qty: '123'},
|
|
{name: '实际产量', qty: '123'},
|
|
]
|
|
// 生产统计数据
|
|
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%"]
|
|
// });
|
|
// 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)
|
|
|
|
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')
|
|
|
|
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']))
|
|
})
|
|
|
|
|
|
// 右侧压力 + 右侧温度
|
|
autoUpdate('/broad/fp/selectDeviceStation', INTERVAL, data => {
|
|
// 右侧压力
|
|
multipleVerticalBarChart(
|
|
{
|
|
xName: data.map(value => value.station_no),
|
|
yDataOne: data.map(value => value.pol_yl),
|
|
yDataOneName: "POL压力",
|
|
yDataTwo: data.map(value => value.so_yl),
|
|
yDataTwoName: "ISO压力",
|
|
}, document.getElementById("top-right"))
|
|
// 右侧温度
|
|
multipleBrokenLineAreaDiagram(
|
|
{
|
|
xData: data.map(value => value.station_no),
|
|
yDataOne: data.map(value => value.pol_wd),
|
|
yDataOneName: "POL温度",
|
|
yDataTwo: data.map(value => value.so_wd),
|
|
yDataTwoName: "ISO温度",
|
|
}, document.getElementById("mid-right"))
|
|
})
|
|
|
|
|
|
// 预装箱体库存
|
|
autoUpdate('/broad/fp/selectFpStock', INTERVAL, data => {
|
|
console.log()
|
|
repertoryChart.setOption({
|
|
xAxis: {
|
|
data: data.map(val => val.name),
|
|
axisLabel: {
|
|
interval: 0,
|
|
// rotate: -30,
|
|
},
|
|
},
|
|
yAxis: {
|
|
// max: Math.max(...data.map(val => val.qty)) + 5
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
data: data.map(val => val.qty),
|
|
},
|
|
]
|
|
})
|
|
})
|
|
|
|
// 发泡线 - 运行状态
|
|
// autoUpdate('/broad/fp/getDeviceInfo', INTERVAL, data => {
|
|
// console.log(data)
|
|
// updateStatus("status-a", data.status)
|
|
// updateStatus("status-b", data.status2)
|
|
// updateStatus("status-c", data.status3)
|
|
// updateStatus("status-d", data.status4)
|
|
// })
|
|
|
|
// 发泡机 - 运行状态
|
|
// autoUpdate('/broad/fp/getFoamDeviceInfo?deviceId=' + "HF202009858", INTERVAL, data => {
|
|
// updateStatus("status-sys1", data.status)
|
|
// updateStatus("status-sys2", data.status2)
|
|
// })
|
|
|
|
// autoUpdate('/system/FoamerMes/getFoamTemp', INTERVAL, res => {
|
|
// myEcharts(res, document.getElementById("top-right"));
|
|
// })
|
|
|
|
// autoUpdate("/system/FoamerMes/flawRate", INTERVAL, data => {
|
|
// const total = data[0]
|
|
// const flaw = data[1]
|
|
// const rate = flaw / total
|
|
//
|
|
// rejectRatioChart.setOption({
|
|
// series: [
|
|
// {
|
|
// name: '不良率',
|
|
// data: [
|
|
// {value: 22, name: `3%`},
|
|
// {value: 78, name: ''},
|
|
// ],
|
|
// }
|
|
// ]
|
|
// })
|
|
// })
|
|
//
|
|
// autoUpdate("/system/FoamerMes/flawInfo", INTERVAL, data => {
|
|
// let d = {}
|
|
// for (let entry of data) {
|
|
// if (!d[entry.itemName]) {
|
|
// d[entry.itemName] = 0
|
|
// }
|
|
//
|
|
// d[entry.itemName] += parseFloat(entry.count)
|
|
// }
|
|
//
|
|
// data = []
|
|
// for (let entry of Object.entries(d)) {
|
|
// data.push({
|
|
// name: entry[0],
|
|
// value: entry[1],
|
|
// })
|
|
// }
|
|
// })
|
|
})
|
|
|
|
const modelChart = echarts.init(document.getElementById("mid-left"))
|
|
modelChart.setOption({
|
|
color: ['#4499CE'],
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
fontSize: '10',
|
|
interval: 0,
|
|
rotate: -30,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
interval: 90,
|
|
},
|
|
grid: {
|
|
left: 10,
|
|
top: 20,
|
|
right: 10,
|
|
bottom: 2,
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#0F8EEF'},
|
|
{offset: 1, color: '#0E35EF'}
|
|
]
|
|
)
|
|
},
|
|
emphasis: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#0F8EEF'},
|
|
{offset: 1, color: '#0E35EF'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#0F8EEF'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
})
|
|
|
|
// 预装箱体库存
|
|
const repertoryChart = echarts.init(document.getElementById("bottom-right"))
|
|
repertoryChart.setOption({
|
|
grid:{
|
|
top:'1%',
|
|
bottom:'10%',
|
|
left:'1%',
|
|
right:'1%',
|
|
},
|
|
color: ['#4499CE'],
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
fontSize: '10px',
|
|
interval: 0,
|
|
color: '#ffffff',
|
|
rotate: -30,
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
interval: 15,
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#2FDE80'},
|
|
{offset: 1, color: '#2FDECA'}
|
|
]
|
|
)
|
|
},
|
|
emphasis: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#2FDECA'},
|
|
{offset: 1, color: '#2FDE80'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#02FEA9'
|
|
}
|
|
}
|
|
}],
|
|
grid: {
|
|
left: 10,
|
|
top: 20,
|
|
right: 15,
|
|
bottom: 2,
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
})
|
|
|
|
function resize() {
|
|
orderInf.resize()
|
|
// planInfo.resize()
|
|
// planInfo2.resize()
|
|
modelChart.resize()
|
|
repertoryChart.resize()
|
|
}
|
|
|
|
window.onresize = resize
|
|
$(() => {
|
|
resize()
|
|
})
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
const myEcharts = (res, ids) => {
|
|
let charts = echarts.init(ids);
|
|
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "5%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
icon: "rect",
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: res.legend,
|
|
right: "4%",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
data: res.xAxis,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "℃",
|
|
nameTextStyle: {
|
|
color: 'rgba(219,225,255,1)'
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: "rgba(219,225,255,1)",
|
|
margin: 15
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(219,225,255,1)",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
splitLine: {//分割线配置
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgba(219,225,255,1)",
|
|
}
|
|
},
|
|
interval: 20,
|
|
},
|
|
],
|
|
series: res.series,
|
|
};
|
|
charts.setOption(option);
|
|
$(window).resize(charts.resize);
|
|
}
|
|
</script>
|
|
<script>
|
|
const area = () => {
|
|
const html = `
|
|
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">箱体发泡线生产数据平台</span>
|
|
<span style="position: absolute;top:30%;left:31%;font-size: 1vw;"> A1</span>
|
|
<span style="position: absolute;top:30%;left:37%;font-size: 1vw;"> A2</span>
|
|
<span style="position: absolute;top:30%;left:43%;font-size: 1vw;"> B1</span>
|
|
<span style="position: absolute;top:30%;left:50%;font-size: 1vw;"> B2</span>
|
|
<span style="position: absolute;top:30%;left:56%;font-size: 1vw;"> 1#发泡机</span>
|
|
<span style="position: absolute;top:30%;left:63%;font-size: 1vw;"> 2#发泡机</span>
|
|
<span style="position: absolute;top:38.6%;left:33.2%;font-size: 1vw;"> A1</span>
|
|
<span style="position: absolute;top:37.6%;left:56%;font-size: 1vw;"> B2</span>
|
|
<span style="position: absolute;top:46%;left:51%;font-size: 1vw;"> B1</span>
|
|
<span style="position: absolute;top:40.7%;left:65%;font-size: 1vw;"> A2</span>
|
|
<span style="position: absolute;top: 10.5%;left: 74.6%;color: #CFD2D0;font-size: 0.8vw">发泡注料压力监控</span>
|
|
<span style="position: absolute;top: 38.5%;left: 74.6%;color: #CFD2D0;font-size: 0.8vw">发泡注料温度监控</span>
|
|
`
|
|
$("body").append(html)
|
|
}
|
|
const total = () => {
|
|
const html = `
|
|
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:10%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:7%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:8%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
|
|
`
|
|
$("#total").append(html)
|
|
}
|
|
</script>
|
|
|
|
</html> |