wangh
/
aucma-benchmarking-factory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改数据请求

Browse Source
master
夜笙歌 4 years ago
parent 316b1ea859
commit 23697546a1
2 changed files with 158 additions and 254 deletions
Show Stats Download Patch File Download Diff File

9
ruoyi-admin/src/main/resources/static/js/echartsCommon.js
Unescape Escape View File

@ -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);

403
ruoyi-admin/src/main/resources/templates/broad/fp.html
Unescape Escape View File

@ -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"/>
<!-- <link href="../../static/css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.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>
@ -55,10 +56,10 @@
left: 30%;
}
.top-mid-Text{
.top-mid-Text {
height: 26.5%;
width:5%;
border:0px solid black;
width: 5%;
border: 0px solid black;
font-size: 16%;
display: flex;
align-items: center;
@ -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,69 +245,68 @@
<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">
<!--当时计划-->
<div class="top-mid-Text" style="position: absolute;top:2%;color: #6fd4ff;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:7.7%;color: #6fd4ff;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:14.9%;color: #6fd4ff;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:22.3%;color: #6fd4ff;">
<span >-</span>
<span>-</span>
</div>
<!--当前计划-->
<div class="top-mid-Text" style="position: absolute;top:2%;left:36.5%; color: #6fff85;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:43.8%; color: #6fff85;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:51.1%; color: #6fff85;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:58.4%; color: #6fff85;">
<span >-</span>
<span>-</span>
</div>
<!--实际产量-->
<div class="top-mid-Text" style="position: absolute;top:2%;left:72.3%; color: #ffff6d;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:79.9%; color: #ffff6d;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:87.3%; color: #ffff6d;">
<span >-</span>
<span>-</span>
</div>
<div class="top-mid-Text" style="position: absolute;top:2%;left:94.6%; color: #ffff6d;">
<span >-</span>
<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>
<!--库存-->
@ -351,30 +347,29 @@
<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" />
<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/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,22 +418,35 @@
}
$(() => {
// 订单执行 + 生产统计
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) {
if(plannedProduction == 0){
const orderAgv = function (plannedProduction, actualProduction) {
if (plannedProduction == 0) {
return 0;
}
if(actualProduction == 0){
if (actualProduction == 0) {
return 0;
}
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,15 +564,14 @@
updateStatus("status-d", data.status4)
})
autoUpdate('/system/FoamerMes/getFoamDeviceInfo?deviceId='+"HF202009858", INTERVAL, data => {
// 发泡机 - 运行状态
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"));
myEcharts(res, document.getElementById("top-right"));
})
autoUpdate("/system/FoamerMes/flawRate", INTERVAL, data => {
@ -604,22 +609,6 @@
value: entry[1],
})
}
pieChart.setOption({
series: [
{
name: '数量',
data: data,
label:{
normal:{
show: true,
position: 'top',
color: '#02FEA9'
}
}
}
]
})
})
})
@ -630,7 +619,7 @@
type: 'category',
axisLabel: {
color: '#ffffff',
fontSize:'10',
fontSize: '10',
rotate: -30,
},
},
@ -642,12 +631,25 @@
splitLine: {
show: false,
},
interval:90,
interval: 90,
},
series : [
grid: {
left: 10,
top: 20,
right: 10,
bottom: 2,
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
series: [
{
name:'数量',
type:'bar',
name: '数量',
type: 'bar',
barWidth: 16,
itemStyle: {
normal: {
@ -669,36 +671,25 @@
)
}
},
label:{
normal:{
label: {
normal: {
show: true,
position: 'top',
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'],
xAxis: {
type: 'category',
axisLabel: {
fontSize:'10px',
fontSize: '10px',
color: '#ffffff'
}
},
@ -710,12 +701,12 @@
splitLine: {
show: false,
},
interval:15,
interval: 15,
},
series : [
series: [
{
name:'数量',
type:'bar',
name: '数量',
type: 'bar',
barWidth: 16,
itemStyle: {
normal: {
@ -737,8 +728,8 @@
)
}
},
label:{
normal:{
label: {
normal: {
show: true,
position: 'top',
color: '#02FEA9'
@ -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
@ -864,7 +765,7 @@
</script>
<script type="text/javascript">
const myEcharts = (res,ids) =>{
const myEcharts = (res, ids) => {
let charts = echarts.init(ids);
let option = {
@ -908,7 +809,7 @@
splitLine: {
show: false,
},
axisLabel:{
axisLabel: {
show: true,
},
axisTick: {
@ -920,9 +821,9 @@
yAxis: [
{
type: "value",
name:"℃",
nameTextStyle:{
color:'rgba(219,225,255,1)'
name: "℃",
nameTextStyle: {
color: 'rgba(219,225,255,1)'
},
axisLabel: {
textStyle: {
@ -942,12 +843,12 @@
},
},
splitLine: {//分割线配置
show:false,
show: false,
lineStyle: {
color: "rgba(219,225,255,1)",
}
},
interval:20,
interval: 20,
},
],
series: res.series,

Write Preview
Loading…
Cancel
Save