修改数据请求

master
夜笙歌 4 years ago
parent 316b1ea859
commit 23697546a1

@ -1960,18 +1960,21 @@ const multipleVerticalBarChart = function (data, id) {
],
};
if (data?.length >= 3) {
if (data?.xName?.length >= 3) {
option.dataZoom.push({
show: true,
type: 'slider',
bottom : '0%',
xAxisIndex: 0,
width: 12,
height: 12,
start: 0,
end: 1 / (data.length / 3) * 100,
end: 1 / (data.xName.length / 3) * 100,
textStyle: {
fontSize: 0,
color:'rgba(0,0,0,0)'
}
})
option.grid.bottom = '7%'
}
charts.setOption(option);
$(window).resize(charts.resize);

@ -2,17 +2,18 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<meta content="width=device-width,initial-scale=1.0"
name="viewport">
<title>发泡SCADA数据平台</title>
<meta name="description" content="U壳钣金SCADA数据平台">
<link href="../../static/css/main-style.css" th:href="@{/css/main-style.css}" rel="stylesheet"/>
<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 name="renderer" content="webkit">
<meta content="webkit" name="renderer">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../../static/css/autoscroll-table.css" th:href="@{/css/autoscroll-table.css}">
<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>
@ -95,7 +96,6 @@
}
#bottom-mid {
position: absolute;
width: 43.3%;
@ -105,7 +105,6 @@
}
#oee {
position: absolute;
top: 14%;
@ -202,8 +201,8 @@
top: 66.4%;
left: 3.5%;
transform: scale(0.5, 0.5);
opacity: 0;
/*transform: scale(0.5, 0.5);*/
/*opacity: 0;*/
transition: transform 0.5s linear, opacity 0.5s linear;
}
@ -246,9 +245,9 @@
<div id="bottom-left" ></div>
</div>
<div class="my-transition2">
<div id="bottom-left-2" ></div>
</div>
<!--<div class="my-transition2">-->
<!-- <div id="bottom-left-2"></div>-->
<!--</div>-->
<!--中间数据-->
<div id="top-mid">
@ -303,12 +302,11 @@
<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>
@ -321,7 +319,7 @@
<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}"/>-->
@ -338,9 +336,7 @@
<!--工程不良-->
<div id="mid-right">
<div id="mid-right-left" style="border:none; width:33%;height:100%; float:left;"></div>
<div id="mid-right-right" style="position: absolute;left:33%;border:none;width:66%;height:100%; float:right;"></div>
</div>
<!--库存-->
@ -359,22 +355,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,14 +395,16 @@
}
}
const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), [], {
// 生产统计数据
const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), ['1','2','3','4','5'], {
width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
})
const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
})
// const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
// width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
// })
// 切换中心运行状态
function updateStatus(id, status) {
const el = document.getElementById(id)
switch (status) {
@ -421,9 +418,21 @@
}
$(() => {
// 订单执行 + 生产统计
autoUpdate('/system/FoamerMes/getOrderInfo2', INTERVAL, data => {
// orderInf.loadData(data, Object.keys(orderInfColumns))
orderInf.loadData(data.map(value => [getSC(value.orderType), value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${orderAgv(value.plannedProduction,value.actualProduction)}%`]), Object.keys(orderInfColumns))
orderInf.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]), Object.keys(orderInfColumns))
modelChart.setOption({
xAxis: {
data: data.map(value => value.plan_code),
},
series: [
{
name: '数量',
data: data.map(value => value.rate),
},
]
})
})
const orderAgv = function (plannedProduction, actualProduction) {
@ -437,6 +446,7 @@
return (actualProduction / plannedProduction * 100).toFixed(1)
}
// 当班计划/实际产量/当班差异
autoUpdate('/system/FoamerMes/getHeader', INTERVAL, data => {
// let p = [data[1], data[0][2], data[0][3]]
let p = [data.plannedProduction, data.actualProduction, data.plannedProduction - data.actualProduction]
@ -446,34 +456,35 @@
}
})
// 生产统计数据
autoUpdate('/system/FoamerMes/getPlanHourInfo', INTERVAL, data => {
// orderInf.loadData(data, Object.keys(orderInfColumns))
let consolidatedRow = ["", "合计", ""]
// 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())
// }
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)
// data.push(consolidatedRow)
planInfo.loadData(data, 19, {
includeHead: true,
@ -515,28 +526,22 @@
})
})
autoUpdate('/system/FoamerMes/getProductPlanInfo', INTERVAL, data => {
modelChart.setOption({
xAxis: {
data: data['xAxisInfo'].map(value => getSC(value)),
},
series: [
{
name: '数量',
data: data['seriesInfo'],
},
// {
// name: '数量_',
// data: data['seriesInfo'],
// }
]
})
// 右侧压力
autoUpdate('/system/FoamerMes/getHeader', INTERVAL, data => {
multipleVerticalBarChart(null,document.getElementById("top-right"))
})
// 右侧温度
autoUpdate('/system/FoamerMes/getHeader', INTERVAL, data => {
multipleVerticalBarChart(null,document.getElementById("mid-right"))
})
// 预装箱体库存
autoUpdate('/system/FoamerMes/getInventoryInfo', INTERVAL, data => {
repertoryChart.setOption({
xAxis: {
data: data['xAxisInfo'].map(value => value.split(",").find(value => /^[Ss][Cc]/.test(value)) ?? value),
data: data.map(value => value.plan_code),
axisLabel: {
rotate: -30,
},
@ -544,12 +549,13 @@
series: [
{
name: '数量',
data: data['seriesInfo'],
data: data.map(value => value.rate),
},
]
})
})
// 发泡线 - 运行状态
autoUpdate('/system/FoamerMes/getDeviceInfo', INTERVAL, data => {
console.log(data)
updateStatus("status-a", data.status)
@ -558,14 +564,13 @@
updateStatus("status-d", data.status4)
})
// 发泡机 - 运行状态
autoUpdate('/system/FoamerMes/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"));
})
@ -604,22 +609,6 @@
value: entry[1],
})
}
pieChart.setOption({
series: [
{
name: '数量',
data: data,
label:{
normal:{
show: true,
position: 'top',
color: '#02FEA9'
}
}
}
]
})
})
})
@ -644,6 +633,19 @@
},
interval: 90,
},
grid: {
left: 10,
top: 20,
right: 10,
bottom: 2,
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
},
series: [
{
name: '数量',
@ -676,22 +678,11 @@
color: '#0F8EEF'
}
}
}],
grid: {
left: 10,
top: 20,
right: 10,
bottom: 2,
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
},
}
],
})
// 预装箱体库存
const repertoryChart = echarts.init(document.getElementById("bottom-right"))
repertoryChart.setOption({
color: ['#4499CE'],
@ -759,102 +750,12 @@
},
},
})
const rejectRatioChart = echarts.init(document.getElementById("mid-right-left"))
rejectRatioChart.setOption({
title: {
text: '不良率',
left: 'center',
bottom: "-1%",
textStyle: {
color: '#ccc',
fontSize: "10%",
}
},
color: [
"#00EAFF",
"#063E63"
],
series: [
{
name: '不良率',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
fontSize: "13%",
color: '#00EAFF',
},
labelLine: {
show: false
},
}
]
})
const pieChart = echarts.init(document.getElementById("mid-right-right"))
pieChart.setOption({
tooltip: {
trigger: 'item'
},
color: [
"#FF5C5D",
"#1FD8F4",
"#5cff2d",
"#d858ff",
"#ffd326",
"#5698ff",
],
series: [
{
name: '数量',
type: 'pie',
radius: ['55%', '70%'],
label: {
show: true,
formatter: '{b}\n{d}%',
textStyle: {
fontSize: '10px',
},
color: '#ddd'
},
labelLine: {
show: true,
length: 2,
length2: 0,
maxSurfaceAngle: 90,
},
labelLayout(params) {
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
function resize() {
orderInf.resize()
planInfo.resize()
planInfo2.resize()
// planInfo2.resize()
modelChart.resize()
repertoryChart.resize()
rejectRatioChart.resize()
pieChart.resize()
}
window.onresize = resize

Loading…
Cancel
Save