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.
934 lines
32 KiB
HTML
934 lines
32 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;
|
|
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="运行状态" c="../../static/img/runImg.png" id="status-a" sr style="width: 3vw"
|
|
th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:23%">
|
|
<img alt="运行状态" c="../../static/img/runImg.png" id="status-b" sr style="width: 3vw"
|
|
th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:39%">
|
|
<img alt="运行状态" c="../../static/img/runImg.png" id="status-c" sr style="width: 3vw"
|
|
th:src="@{/img/runImg.png}"/>
|
|
</div>
|
|
|
|
<div class="top-mid-Text" style="position: absolute;top:73%;left:55%">
|
|
<img alt="运行状态" c="../../static/img/runImg.png" id="status-d" sr style="width: 3vw"
|
|
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" style="width: 3vw"
|
|
th:src="@{/img/runImg.png}"/>
|
|
<!--<img alt="运行状态" src="../../stati style="width: 3vw" c/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" style="width: 3vw"
|
|
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>
|
|
//夹具生产计划切换
|
|
let tableData = []
|
|
let classes = 0
|
|
let dayClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30']
|
|
let nightClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30']
|
|
let tableWidth = ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"]
|
|
showalert();
|
|
|
|
setTimeout(() => {
|
|
window.setInterval(showalert, 1000 * 15);
|
|
},1000)
|
|
let isFirst = true
|
|
let times = 1
|
|
const getTable = (state,data) => {
|
|
if (state === 0) {
|
|
planInfo = new AutoScrollTable(document.getElementById("my-transition"), dayClass, {
|
|
width: tableWidth,
|
|
}, 7)
|
|
|
|
planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, {
|
|
width: tableWidth,
|
|
}, 7)
|
|
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30' ,'8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30']))
|
|
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30' ,'8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30']))
|
|
} else {
|
|
planInfo = new AutoScrollTable(document.getElementById("my-transition"), nightClass, {
|
|
width: tableWidth,
|
|
}, 7)
|
|
|
|
planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), nightClass, {
|
|
width: tableWidth,
|
|
}, 7)
|
|
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30',]))
|
|
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6: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');
|
|
}
|
|
if (tableData.length === 0) return
|
|
let dataTwo = tableData.slice(times * 7, times * 7 + 7)
|
|
getTable(classes,dataTwo)
|
|
if (times < 3) {
|
|
times += 1
|
|
} else {
|
|
times = 0
|
|
}
|
|
}
|
|
|
|
|
|
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 = []
|
|
}
|
|
}
|
|
|
|
// 生产统计数据
|
|
let planInfo = new AutoScrollTable(document.getElementById("my-transition"), dayClass, {
|
|
width: tableWidth,
|
|
}, 7)
|
|
|
|
let planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, {
|
|
width: tableWidth,
|
|
}, 7)
|
|
|
|
// 切换中心运行状态
|
|
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
|
|
}
|
|
}
|
|
|
|
$(async () => {
|
|
let totalNum = 0
|
|
area()
|
|
// 当班计划/实际产量/当班差异
|
|
await autoUpdate('/broad/fp/selectFpOrderInfo', INTERVAL, data => {
|
|
// let p = [data[1], data[0][2], data[0][3]]
|
|
totalNum = data.find(val => val.name == '当班计划').qty
|
|
let now = data.find(val => val.name == '实际产量').qty
|
|
let p = [totalNum, now, totalNum - now]
|
|
|
|
for (let i in p) {
|
|
updateSplitBlocks(p[i], selectors[i])
|
|
}
|
|
})
|
|
// 订单执行 + 生产统计
|
|
autoUpdate('/broad/fp/selectOrderExecutionPlan', INTERVAL, data => {
|
|
orderInf.loadData(data.map(value => [value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number, `${value.rate == 0 ? value.rate : value.rate + '%'}`]), Object.keys(orderInfColumns))
|
|
|
|
})
|
|
autoUpdate('/broad/fp/selectOrderExecution', INTERVAL, data => {
|
|
modelChart.setOption({
|
|
xAxis: {
|
|
data: data.map(value => value.name),
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
data: data.map(value => value.actual_number),
|
|
},
|
|
]
|
|
})
|
|
})
|
|
|
|
// 获取班次
|
|
autoUpdate('/broad/fp/selectTeamGroups', INTERVAL, data => {
|
|
classes = data[`班组`]
|
|
})
|
|
// 生产统计数据
|
|
autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => {
|
|
tableData = data
|
|
let dataOne = []
|
|
if (isFirst) {
|
|
dataOne = data.slice(0, 7)
|
|
isFirst = false
|
|
} else {
|
|
times--
|
|
dataOne = data.slice(times * 7, times * 7 + 7)
|
|
times++
|
|
}
|
|
getTable(classes,dataOne)
|
|
total(
|
|
Number((data.filter(val => val.status === '生产中').length / 28) * 100).toFixed(2) + '%',
|
|
totalNum,
|
|
eval(data.map(val => val.qty).join('+')),
|
|
(Number(eval(data.map(val => val.qty).join('+')) / totalNum) * 100).toFixed(2)+ '%',
|
|
eval(data.map(val => val.h1).join('+')),
|
|
eval(data.map(val => val.h2).join('+')),
|
|
eval(data.map(val => val.h3).join('+')),
|
|
eval(data.map(val => val.h4).join('+')),
|
|
eval(data.map(val => val.h5).join('+')),
|
|
eval(data.map(val => val.h6).join('+')),
|
|
eval(data.map(val => val.h7).join('+')),
|
|
eval(data.map(val => val.h8).join('+')),
|
|
eval(data.map(val => val.h9).join('+')),
|
|
eval(data.map(val => val.h10).join('+')),
|
|
eval(data.map(val => val.h11).join('+')),
|
|
eval(data.map(val => val.h12).join('+')),
|
|
)
|
|
})
|
|
|
|
// 右侧压力 + 右侧温度
|
|
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>
|
|
`
|
|
$("body").append(html)
|
|
}
|
|
const total = (val1 = 0, val2 = 0, val3 = 0, val4 = 0, val5 = 0, val6 = 0, val7 = 0, val8 = 0, val9 = 0, val10 = 0, val11 = 0, val12 = 0, val13 = 0, val14 = 0, val15 = 0, val16 = 0) => {
|
|
const html = `
|
|
<span style="margin: auto;text-align:center;width:5.2%;font-size: 0.85vw;"> </span>
|
|
<span style="margin: auto;text-align:center;width:10.2%;font-size: 0.85vw;">合计</span>
|
|
<span style="margin: auto;text-align:center;width:7.2%;font-size: 0.85vw;">${val1}</span>
|
|
<span style="margin: auto;text-align:center;width:5.2%;font-size: 0.85vw;"> </span>
|
|
<span style="margin: auto;text-align:center;width:5.2%;font-size: 0.85vw;">${val2}</span>
|
|
<span style="margin: auto;text-align:center;width:5.2%;font-size: 0.85vw;">${val3}</span>
|
|
<span style="margin: auto;text-align:center;width:8.2%;font-size: 0.85vw;">${val4}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val5}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val6}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val7}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val8}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val9}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val10}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val11}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val12}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val13}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val14}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val15}</span>
|
|
<span style="margin: auto;text-align:center;width:4%;font-size: 0.85vw;">${val16}</span>
|
|
`
|
|
$("#total").html(html)
|
|
}
|
|
</script>
|
|
|
|
</html> |