master
夜笙歌 3 years ago
parent 359e114942
commit 5f99eb09b2

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箱壳可视化看板</title>
</head>
<body>
HelloWorld !!!
</body>
</html>

@ -0,0 +1,3 @@
artifactId=deviceboard
groupId=com.scada
version=0.0.1-SNAPSHOT

@ -0,0 +1,2 @@
com\deviceboard\DeviceBoardApplication.class
com\deviceboard\controller\TestController.class

@ -0,0 +1,2 @@
C:\Users\ADMIN\Desktop\新建文件夹 (4)\scada-visual-board\deviceboard\src\main\java\com\deviceboard\DeviceBoardApplication.java
C:\Users\ADMIN\Desktop\新建文件夹 (4)\scada-visual-board\deviceboard\src\main\java\com\deviceboard\controller\TestController.java

@ -1,13 +1,13 @@
# DataSource Config
spring:
datasource:
# driver-class-name: oracle.jdbc.OracleDriver
# url: jdbc:oracle:thin:@10.100.71.119:1521:ORCL
# username: system
# password: aucma
url: jdbc:oracle:thin:@124.70.0.226:1521/scada
username: aucma
password: 123456
driver-class-name: oracle.jdbc.OracleDriver
url: jdbc:oracle:thin:@10.100.71.119:1521:ORCL
username: system
password: aucma
# url: jdbc:oracle:thin:@124.70.0.226:1521/scada
# username: aucma
# password: 123456
mybatis-plus:
mapper-locations: classpath*:/mapper/**Mapper.xml

@ -0,0 +1,28 @@
const tableAnimation = (el) => {
const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)';
const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)';
const trEvenCSS = {
display: "flex",
background: evenRowBGC
};
const trOddCSS = {
display: "flex",
background: oddRowBGC
};
let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
setInterval(function () {
$(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () {
switch (oddORevenCheck) {
case 'even':
$(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'odd';
break;
case 'odd':
$(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'even';
break;
}
$(this).remove();
});
}, 2000);
}

@ -46,9 +46,6 @@ $(() => {
});
//生产计划
let isUpdata = false
const getTable = () => {
$.ajax({
url: '/storage/getProductionPlan',
type: 'GET',
@ -59,7 +56,7 @@ $(() => {
Res.data.forEach(val => {
val[0] = 'SHEBEI452736'
val[1] = 'AGYM45HH23'
val[2] = Math.random()*30
val[2] = Math.random() * 30
val[3] = '2021.01.01 10:00:00'
delete val[4]
});
@ -84,22 +81,7 @@ $(() => {
console.log(e)
}
});
}
getTable()
setInterval(() => {
console.log(123123);
if (isUpdata) {
console.log($('#productionPlan'));
clearInterval(animation);
animation = null
$('.scrollTable').html('<div class="productionPlan" id="productionPlan"></div>')
getTable()
}
}, 2000);
setInterval(() => {
isUpdata = !isUpdata
}, 4000);
tableAnimation('#productionPlan')
/*数据信息*/
$.getJSON('/tankShellDevice/getDataInformation', function (result) {
dataInformationFunction(result)

@ -12,6 +12,7 @@
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
<script src="../../../js/common/tableAnimation.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
</head>

@ -0,0 +1,15 @@
# DataSource Config
spring:
datasource:
driver-class-name: oracle.jdbc.OracleDriver
url: jdbc:oracle:thin:@10.100.71.119:1521:ORCL
username: system
password: aucma
# url: jdbc:oracle:thin:@124.70.0.226:1521/scada
# username: aucma
# password: 123456
mybatis-plus:
mapper-locations: classpath*:/mapper/**Mapper.xml
server:
port: 6069

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.scada.productionboard.mapper.BasicScadaDeviceinfoMapper">
</mapper>

@ -0,0 +1,35 @@
body {
background-color: aquamarine;
background: url(../../img/adsorptionTank/adsorptionTankbackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.statisticalOutputByModel{
border: 0px solid red;;
position: absolute;
width: 45.5%;
height: 32%;
bottom: 4.5%;
left: 3.5%;
}
.inventoryStatistics{
border: 0px solid red;;
position: absolute;
width: 45.5%;
height: 32%;
bottom: 4.5%;
right: 3.5%;
}
.hourlyOutputStatistics{
border: 0px solid red;;
position: absolute;
width: 93%;
height: 32%;
top: 23%;
left: 3.5%;
}

@ -0,0 +1,69 @@
body {
background-color: aquamarine;
background: url(../../img/aluminumLiner/aluminumLiner.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.dataInformation{
border: 0px solid red;
position: absolute;
width: 24%;
height: 22%;
top: 14%;
left: 3.3%;
font-size: 16px !important;
}
.synthetic{
font-size: 16px !important;
}
.OEEStatistics {
border: 0px solid red;
position: absolute;
width: 42%;
height: 26%;
top: 71.5%;
left: 28.6%;
}
.inventory {
border: 0px solid red;
position: absolute;
width: 28%;
height: 25%;
top: 70%;
left: 1%;
}
.loss {
border: 0px solid red;
position: absolute;
width: 28%;
height: 25%;
top: 41%;
left: 71%;
}
.equipmentFailure {
border: 0px solid red;
position: absolute;
width: 28%;
height: 22%;
top: 75%;
left: 70%;
}
.productionPlan {
position: absolute;
border: 0px solid red;
width: 24%;
height: 21%;
top: 44.5%;
left: 3.5%;
font-size: 9%;
}

@ -0,0 +1,35 @@
body {
background-color: aquamarine;
background: url(../../img/aluminumTank/aluminumTankbackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.statisticalOutputByModel{
border: 0px solid red;
position: absolute;
width: 45.5%;
height: 32%;
top: 23%;
left: 3.5%;
}
.inventoryStatistics{
border: 0px solid red;
position: absolute;
width: 45.5%;
height: 32%;
top: 23%;
right: 3.5%;
}
.hourlyOutputStatistics{
border: 0px solid red;
position: absolute;
width: 93%;
height: 32%;
bottom: 4.5%;
left: 3.5%;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,43 @@
.onDutyPlan{
width: 13%;
height: 5.6%;
position: absolute;
top: 9.8%;
letter-spacing: 1px;
font-size: 12%;
color: #FFC700;
}
.display-blocks {
text-align: center;
font-size: 16% !important;
}
.display-blocks span {
margin-top: 5%;
margin-right: 16%;
}
.display-blocks span:last-child {
margin-right: 0;
}
.theCurrentTeam{
left: 9.8%;
color: #6ACBFE;
}
.scheduledProduction{
left: 34.4%;
color: #FFAE00;
}
.actualOutPut{
left: 59%;
color:#A0FF00;
}
.differenceValue{
left: 83.6%;
color: #F51F1E;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,156 @@
/*发泡看板CSS样式*/
body {
background-color: aquamarine;
background: url(../../img/foamBox/foamBoxbackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.theCurrentTeam {
display: none;
}
.onDutyPlan {
border: 0px solid red;
width: 10.9%;
position: absolute;
top: 14.8%;
letter-spacing: -1px;
}
.scheduledProduction {
left: 30%;
}
.actualOutPut {
left: 44.5%;
}
.differenceValue {
left: 59%;
}
.foamingLineRunStatus {
position: absolute;
width: 40%;
height: 27%;
top: 10.5%;
left: 30.1%;
}
.inventoryStatistics {
border: 0px solid red;
position: absolute;
width: 23.5%;
height: 23.3%;
top: 14.5%;
left: 3.5%;
}
.statisticalOutputByModel {
border: 0px solid red;
position: absolute;
width: 23.5%;
height: 49%;
top: 46%;
left: 3.5%;
}
.hourlyOutputStatistics {
border: 0px solid red;
position: absolute;
width: 68%;
height: 20%;
bottom: 5%;
right: 3.5%;
}
.foamingParameters {
border: 0px solid red;
position: absolute;
width: 23.5%;
height: 23.3%;
top: 14.5%;
right: 3.5%;
}
.deviceRunStatus {
/*position: absolute;
width: 38%;
height: 10%;
top: 25.5%;
left: 33%;
border: 1px solid red;
color: white;
font-size: 12px;*/
position: absolute;
width: 40%;
height: 10%;
top: 25.5%;
left: 30.2%;
border: 0px solid red;
color: white;
font-size: 12px;
}
.temperatureOne {
width: 100%;
height: 100%;
}
.temperatureTwo {
width: 100%;
height: 100%;
}
.temperatureThree {
width: 100%;
height: 100%;
}
.temperatureFour {
width: 100%;
height: 100%;
}
.swiperModule {
position: absolute;
width: 23%;
height: 19%;
top: 46%;
left: 73%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* background: #fff; */
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

@ -0,0 +1,35 @@
body {
background-color: aquamarine;
background: url(../../img/preassemble/preassemblebackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.statisticalOutputByModel{
border: 0px solid red;
position: absolute;
width: 45.5%;
height: 32%;
bottom: 4.5%;
left: 3.5%;
}
.inventoryStatistics{
border: 0px solid red;
position: absolute;
width: 45.5%;
height: 32%;
bottom: 4.5%;
right: 3.5%;
}
.hourlyOutputStatistics{
border: 0px solid red;
position: absolute;
width: 93%;
height: 32%;
top: 23%;
left: 3.5%;
}

@ -0,0 +1,110 @@
body {
background-color: aquamarine;
background: url(../../img/storage/storagebackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.onDutyPlan {
width: 11%;
height: 5.6%;
position: absolute;
top: 24.5%;
letter-spacing: -1px;
font-size: 12%;
border: 0px solid;
}
.theCurrentTeam {
left: 42%;
color: #6ACBFE;
}
.scheduledProduction {
left: 55.2%;
color:#A0FF00;
}
.actualOutPut {
left: 69.7%;
color: #6ACBFE;
}
.differenceValue {
left: 82.9%;
color:#A0FF00;
}
.productionPlan{
position: absolute;
border: 0px solid red;
width: 33%;
height: 36%;
top: 14.5%;
left: 3.5%;
font-size: 12%;
}
.theCurrentInventory{
position: absolute;
border: 0px solid red;
width: 33%;
height: 36%;
bottom: 5%;
left: 3.5%;
font-size: 12%;
}
.emptyLocation{
position: absolute;
border: 0px solid red;
width: 4%;
height: 4%;
top: 48.3%;
color:#6BFF71;
font-size: 14%;
display: flex;
align-items: center;
justify-content: center;
}
.haveUsedLocation{
position: absolute;
border: 0px solid red;
width: 4%;
height: 4%;
top: 65%;
color:#FF9768;
font-size: 14%;
display: flex;
align-items: center;
justify-content: center;
}
.emptyLocationRatio{
position: absolute;
border: 0px solid red;
width: 4%;
height: 4%;
bottom: 10%;
color:#FF9768;
font-size: 14%;
display: flex;
align-items: center;
justify-content: center;
}
.haveUsedLocationRatio{
position: absolute;
border: 0px solid red;
width: 4%;
height: 4%;
bottom: 10%;
color:#FF9768;
font-size: 14%;
display: flex;
align-items: center;
justify-content: center;
}

@ -0,0 +1,127 @@
body {
background-color: aquamarine;
background: url(../../img/tankShell/tankShellDeviceBackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.dataInformation {
border: 0px solid red;
position: absolute;
width: 24%;
height: 22%;
top: 14%;
left: 3.3%;
font-size: 17% !important;
}
.energyProductionStatistics {
border: 0px solid red;
position: absolute;
width: 42%;
height: 6%;
top: 8%;
left: 29%;
font-size: 16px !important;
}
.runParamStatistics {
border: 0px solid red;
position: absolute;
width: 42%;
height: 7.5%;
top: 25%;
left: 29%;
font-size: 16px !important;
}
.runParamStatistics div {
border: 0px solid red;
position: absolute;
top: 4%;
width: 13%;
height: 96%;
color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
/* font-size: 16px !important; */
}
.lossParam {
border: 0px solid yellowgreen;
position: absolute;
width: 8.8%;
height: 4.5%;
top: 12.5%;
right: 6%;
display: flex;
justify-content: center;
align-items: center;
color: #8FB7D1;
font-size: 175% !important;
}
.meterParam {
border: 0px solid yellowgreen;
position: absolute;
width: 8.8%;
height: 4.5%;
top: 27.4%;
right: 6%;
display: flex;
justify-content: center;
align-items: center;
color: #A5E3B1;
font-size: 175% !important;
}
.OEEStatistics {
border: 0px solid red;
position: absolute;
width: 35%;
height: 26%;
top: 71.5%;
left: 36%;
}
.equipmentFailure {
border: 0px solid red;
position: absolute;
width: 28%;
height: 22%;
top: 75%;
left: 70%;
}
.loss {
border: 0px solid red;
position: absolute;
width: 28%;
height: 25%;
top: 41%;
left: 71%;
}
.productionPlan {
position: absolute;
border: 0px solid red;
width: 33%;
height: 21%;
top: 73.5%;
left: 3.5%;
font-size: 9%;
}
.energyConsumption {
position: absolute;
border: 0px solid red;
width: 26%;
height: 20%;
top: 46%;
left: 2%;
font-size: 9%;
}

@ -0,0 +1,35 @@
body {
background-color: aquamarine;
background: url(../../img/tankShell/tankshellbackground.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.statisticalOutputByModel{
border: 0px solid red;
position: absolute;
width: 45.5%;
height: 32%;
top: 23%;
left: 3.5%;
}
.inventoryStatistics{
border: 0px solid red;
position: absolute;
width: 45.5%;
height: 32%;
top: 23%;
right: 3.5%;
}
.hourlyOutputStatistics{
border: 0px solid red;
position: absolute;
width: 93%;
height: 32%;
bottom: 4.5%;
left: 3.5%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

@ -0,0 +1,18 @@
$(()=>{
onDutyPlan(1234,1202,33);
//按型号统计产量
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
horizontalBarChart(result,document.getElementById("statisticalOutputByModel"));
});
//小时产量
brokenLineAreaDiagram(null,document.getElementById("hourlyOutputStatistics"));
//库存统计
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
threeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

@ -0,0 +1,77 @@
$(() => {
//数据信息
$.getJSON('/aluminumLiner/getDataInformation', function (result) {
const statusArray = [1, 0, 0, 0, 0];
if (result.length > 0) {
statusArray[0] = result[0].deviceStatus == "正常" ? 0 : 1;
statusArray[1] = result[0].devicePower;
statusArray[2] = result[0].deviceEnergy;
}
dataInformationFunction(statusArray);
});
$.getJSON('/aluminumLiner/getRunParameters', function (result) {
synthetic(result)
});
//loss/aluminumLiner/getLossStatistics
$.getJSON('/aluminumLiner/getLossStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
//设备OEE统计
$.getJSON('/aluminumLiner/getOeeStatistics', function (result) {
OEEStatistics(result, document.getElementById("OEEStatistics"));
});
//库存情况
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
inventory(result, document.getElementById("inventory"));
});
//生产计划
$.ajax({
url: '/storage/getProductionPlan',
type: 'GET',
dataType: 'JSON',
success: function (res) {
let Res = res
Res.data.forEach(val => {
val[0] = 'sc-228NE'
val[1] = '431'
val[2] = '0'
val[3] = '431'
val[4] = '0%'
});
Res.header = ['型号', '计划数', '完成数', '差异数', '执行进度']
dynamicTable({
el: '#productionPlan',
rowNum: 5,
timeout: 0,
header: Res.header,
data: Res.data,
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: ['100%', '100%', '100%', '100%', '100%']
});
},
error: function (e) {
console.log(e)
}
});
//设备故障排名
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
equipmentFailure(result, document.getElementById("equipmentFailure"));
});
})

@ -0,0 +1,18 @@
$(()=>{
//班组统计
onDutyPlan(1234,1202,33);
//按型号统计产量
$.getJSON('/aluminumTank/getStatisticalOutputByModel', function (result) {
horizontalBarChart(result,document.getElementById("statisticalOutputByModel"));
});
//小时产量
bluePolygonHistogram(null,document.getElementById("hourlyOutputStatistics"));
//库存统计
$.getJSON('/aluminumTank/getInventoryStatistics', function (result) {
multipleThreeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

@ -0,0 +1,77 @@
document.write('<div style="position:absolute;width:4.2%;height:2%;top: 2.4%;left: 84.14%;border: 0 solid red;color:#71D7FF;font-size:0.08rem;">\n' +
' <span id="timeinfo"></span>\n' +
'</div>\n' +
'\n' +
'<div style="position:absolute;width:4.2%;height:2%;top: 2.4%;left: 92%;border: 0 solid red;color:#71D7FF;font-size:0.08rem;">\n' +
' <span id="dateinfo"></span>\n' +
'</div>\n')
/*alert($(window).height());
var sonStyle = document.getElementsByClassName("son");
sonStyle.style.height = $(window).height()-500 + "px";*/
let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
let rootDom = document.querySelector('html');
rootDom.style.fontSize = rootWidth / 10 + 'px';
getnow();
function getnow(){
//1、获得当前时间格式化时间
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
if(month<10){
month="0"+month;
}
var date=now.getDate();
if(date<10){
date="0"+date;
}
var hour=now.getHours();
if(hour<10){
hour="0"+hour;
}
var minute=now.getMinutes();
if(minute<10){
minute="0"+minute;
}
var second=now.getSeconds();
if(second<10){
second="0"+second;
}
var nowstr=year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
//alert(nowstr);
//alert(nowstr);
//2、显示时间 html
//获得标签对象
/*var nowspan=document.getElementById("nowspan");
nowspan.innerHTML=nowstr;*/
//2021-09-30 12:00:00
$("#dateinfo").html(nowstr.slice(0,10));
$("#timeinfo").html(nowstr.slice(11,19));
//3、使时间动起来
setTimeout("getnow()", 1000);
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

@ -0,0 +1,66 @@
/*当前班组统计封装*/
$(() =>{
let html = `<div id="theCurrentTeam" class="onDutyPlan display-blocks theCurrentTeam">
<span>-</span>
<span>-</span>
<span>-</span>
<span>-</span>
</div>
<div id="scheduledProduction" class="onDutyPlan display-blocks scheduledProduction">
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
</div>
<div id="actualOutPut" class="onDutyPlan display-blocks actualOutPut">
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
</div>
<div id="differenceValue" class="onDutyPlan display-blocks differenceValue">
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
</div>`;
$('body').append(html);
})
let onDutyPlan = (scheduledProductionNumber,actualOutPutNumber,differenceValueNumber) =>{
const scheduledProduction = [];
const actualOutPut = [];
const differenceValue = [];
for (let i = 1; i <= 4; i++) {
scheduledProduction.push(`#scheduledProduction :nth-child(${i})`);
actualOutPut.push(`#actualOutPut :nth-child(${i})`);
differenceValue.push(`#differenceValue :nth-child(${i})`);
}
updateSplitBlocks(scheduledProductionNumber, scheduledProduction);
updateSplitBlocks(actualOutPutNumber, actualOutPut);
updateSplitBlocks(differenceValueNumber, differenceValue);
}
let storageStatistics = (leftInStoreNumber,leftOutStoreNumber,rightInStoreNumber,rightOutStoreNumber) =>{
const leftInStore = [];
const leftOutStore = [];
const rightInStore = [];
const rightOutStore = [];
for (let i = 1; i <= 4; i++) {
leftInStore.push(`#theCurrentTeam :nth-child(${i})`);
leftOutStore.push(`#scheduledProduction :nth-child(${i})`);
rightInStore.push(`#actualOutPut :nth-child(${i})`);
rightOutStore.push(`#differenceValue :nth-child(${i})`);
}
updateSplitBlocks(leftInStoreNumber, leftInStore);
updateSplitBlocks(leftOutStoreNumber, leftOutStore);
updateSplitBlocks(rightInStoreNumber, rightInStore);
updateSplitBlocks(rightOutStoreNumber, rightOutStore);
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,43 @@
const dataInformationFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px"></span>` : `<span style="color:red;margin-left: 10px"></span>`}</td>
<td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td>
</tr>
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 50%;color: white;">${statusArray[2]}kW·h</td>
<td style="border:0px solid red;text-align:center;width: 50%;color: #D18DA2;">${statusArray[3]}</td>
</tr>
</table>`;
$("#dataInformation").append(info);
}
const synthetic = (statusArray) => {
console.log(statusArray);
let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;font-size:175%;text-align:center;width: 23%;color: #99C4EF;">${statusArray[0] || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #7CED92;">${statusArray[1] || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #99C4EF;">${statusArray[2] || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 19%;color: #7CED92;">${statusArray[3] || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 15%;"></td>
</tr>
</table>
<table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 7%;"></td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #70C0EC;">${statusArray[4] || 0}</td>
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #DB718D;">${statusArray[5] || 0}</td>
<td style="border:0px solid red;text-align:center;width: 12%;"></td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #8CEF92;">${statusArray[6] || 0}</td>
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #ECE790;">${statusArray[7] || 0}</td>
<td style="border:0px solid red;text-align:center;width: 0%;"></td>
</tr>
</table>
<span style="position: absolute;font-size:175%;top: 12%;left: 85%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #D2E5F7, #8CBAE4);color: transparent;display:inline-block;-webkit-background-clip: text;">${statusArray[8] || 0}</span>
<span style="position: absolute;font-size:175%;top: 26.7%;left: 85%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #F1FFFF, #7FE782);color: transparent;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
`;
$("#synthetic").append(info);
}

@ -0,0 +1,28 @@
const tableAnimation = (el) => {
const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)';
const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)';
const trEvenCSS = {
display: "flex",
background: evenRowBGC
};
const trOddCSS = {
display: "flex",
background: oddRowBGC
};
let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
setInterval(function () {
$(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () {
switch (oddORevenCheck) {
case 'even':
$(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'odd';
break;
case 'odd':
$(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'even';
break;
}
$(this).remove();
});
}, 2000);
}

@ -0,0 +1,20 @@
function updateSplitBlocks(num, selectors) {
const numStr = numberPad(num, selectors.length, true)
for (let index in numStr) {
document.querySelector(selectors[index]).innerText = numStr[index].toString()
}
}
function numberPad(num, length, abs = false) {
if (isNaN(num)) {
num = 0
}
const negative = num < 0 && !abs
const outStr = Math.abs(num).toString().padStart(length, '0')
if (negative) {
return '-' + outStr
}
return outStr
}

@ -0,0 +1,139 @@
$(() => {
//班组计划统计
onDutyPlan(1234, 1202, 33);
//设备运行状态
let statusArray = [0, 0, 0, 0, 1, 0];
deviceStatus(statusArray);
//库存统计
$.getJSON('/foamBox/getInventoryStatistics', function (result) {
threeDimensionalCylindrical(result, document.getElementById("inventoryStatistics"));
});
//按型号统计产量
$.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
horizontalBarChart(result, document.getElementById("statisticalOutputByModel"));
});
//小时产量
brokenLineAreaDiagram(null, document.getElementById("hourlyOutputStatistics"));
//发泡参数
multipleBrokenLineAreaDiagram(null, document.getElementById("foamingParameters"));
// 模具温度1
const temperature = (res, ids) => {
let mycharts = echarts.init(ids);
let option = {
grid: {
top: '10%',
left: '6%',
right: '6%',
bottom: '0',
containLabel: true
},
xAxis: [
{
interval: 0,
type: 'category',
data: ['066', '066', '066', '066', '066'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
splitLine: {
show: false,
},
type: 'value',
name: 'Precipitation',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value} ml'
}
},
{
splitLine: {
show: false,
},
type: 'value',
name: 'Temperature',
min: 0,
max: 5,
interval: 1,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6
]
},
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7
]
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
$.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
temperature(result, document.getElementById("temperatureOne"));
});
$.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
temperature(result, document.getElementById("temperatureTwo"));
});
$.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
temperature(result, document.getElementById("temperatureThree"));
});
$.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
temperature(result, document.getElementById("temperatureFour"));
});
})
const deviceStatus = (statusArray) => {
let info = `<table style="width: 100%;height:100%;">
<tr style="width: 100%;">
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[0] == 0 ? "deviceopen.png" : "deviceclose.png"}" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[1] == 0 ? "deviceopen.png" : "deviceclose.png"}" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[2] == 0 ? "deviceopen.png" : "deviceclose.png"}" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[3] == 0 ? "deviceopen.png" : "deviceclose.png"}" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:right;padding-right: 12px;"><img src="../../img/foamBox/${statusArray[4] == 0 ? "deviceopen.png" : "deviceclose.png"}" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:right;"><img src="../../img/foamBox/${statusArray[5] == 0 ? "deviceopen.png" : "deviceclose.png"}" width="40%" height="50%"/></td>
</tr>
</table>`;
$("#deviceRunStatus").append(info);
}

@ -0,0 +1,18 @@
$(()=>{
onDutyPlan(1234,1202,33);
//按型号统计产量
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
console.log(result);
horizontalBarChart(result,document.getElementById("statisticalOutputByModel"));
});
//小时产量
greenPolygonalHistogram(null,document.getElementById("hourlyOutputStatistics"));
//库存统计
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
threeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

@ -0,0 +1,45 @@
$(()=>{
//单日出入库统计
storageStatistics(123,233,211,124);
//生产计划
$.ajax({
url: '/storage/getProductionPlan',
type: 'GET',
dataType: 'JSON',
success: function(res) {
dynamicTable({
el: '#productionPlan',
rowNum: 5,
timeout: 0,
header: res.header,
data: res.data,
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: ['100%', '100%', '100%', '100%','100%']
});
},
error: function(e) {
console.log(e)
}
});
//当前库存统计
multipleThreeDimensionalCylindrical(null,document.getElementById("theCurrentInventory"));
//库存统计
$("#emptyLocation-left").text(123);
$("#emptyLocation-right").text(456);
$("#haveUsedLocation-left").text(789);
$("#haveUsedLocation-right").text(1234);
//库位占比
$("#emptyLocationNumber").text(68);
$("#emptyLocationRatio").text("39%");
$("#haveUsedLocationNumber").text(132);
$("#haveUsedLocationRatio").text("61%");
})

@ -46,9 +46,6 @@ $(() => {
});
//生产计划
let isUpdata = false
const getTable = () => {
$.ajax({
url: '/storage/getProductionPlan',
type: 'GET',
@ -59,7 +56,7 @@ $(() => {
Res.data.forEach(val => {
val[0] = 'SHEBEI452736'
val[1] = 'AGYM45HH23'
val[2] = Math.random()*30
val[2] = Math.random() * 30
val[3] = '2021.01.01 10:00:00'
delete val[4]
});
@ -84,22 +81,7 @@ $(() => {
console.log(e)
}
});
}
getTable()
setInterval(() => {
console.log(123123);
if (isUpdata) {
console.log($('#productionPlan'));
clearInterval(animation);
animation = null
$('.scrollTable').html('<div class="productionPlan" id="productionPlan"></div>')
getTable()
}
}, 2000);
setInterval(() => {
isUpdata = !isUpdata
}, 10000);
tableAnimation('#productionPlan')
/*数据信息*/
$.getJSON('/tankShellDevice/getDataInformation', function (result) {
dataInformationFunction(result)

@ -0,0 +1,18 @@
$(()=>{
//班组统计
onDutyPlan(1234,1202,33);
//按型号统计产量
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
horizontalBarChart(result,document.getElementById("statisticalOutputByModel"));
});
//小时产量
brokenLineAreaDiagram(null,document.getElementById("hourlyOutputStatistics"));
//库存统计
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
multipleThreeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸附内胆数据监控平台</title>
<link rel="stylesheet" href="../../../css/adsorptionTank/style.css">
<link rel="stylesheet" href="../../../css/common/ondutyplan.css">
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/ondutyplan.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
</head>
<body>
<!--小时产量统计-->
<div class="hourlyOutputStatistics" id="hourlyOutputStatistics"></div>
<!--型号产量统计-->
<div class="statisticalOutputByModel" id="statisticalOutputByModel"></div>
<!--库存统计-->
<div class="inventoryStatistics" id="inventoryStatistics"></div>
</body>
<script src="../../../js/adsorptionTank/index.js"></script>
</html>

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>铝内胆数据监控平台</title>
<link rel="stylesheet" href="../../../css/aluminumLiner/style.css">
<link rel="stylesheet" href="../../../css/common/fontawesome-all.min.css">
<script src="../../../js/common/fontawesome-all.min.js"></script>
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
</head>
<body>
<!--数据信息-->
<div class="dataInformation" id="dataInformation"></div>
<!--能耗产量统计-->
<div class="synthetic" id="synthetic"></div>
<!--设备OEE统计-->
<div class="OEEStatistics" id="OEEStatistics"></div>
<!--库存情况-->
<div class="inventory" id="inventory"></div>
<!--生产计划-->
<div class="productionPlan" id="productionPlan"></div>
<!--loss-->
<div class="loss" id="loss"></div>
<!--设备故障排名-->
<div class="equipmentFailure" id="equipmentFailure"></div>
</body>
<script src="../../../js/common/synthetic.js"></script>
<script src="../../../js/aluminumLiner/index.js"></script>
</html>

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>铝内胆数据监控平台</title>
<link rel="stylesheet" href="../../../css/aluminumTank/style.css">
<link rel="stylesheet" href="../../../css/common/ondutyplan.css">
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/ondutyplan.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
</head>
<body>
<!--按型号统计产量-->
<div class="statisticalOutputByModel" id="statisticalOutputByModel"></div>
<!--库存统计-->
<div class="inventoryStatistics" id="inventoryStatistics"></div>
<!--小时产量-->
<div class="hourlyOutputStatistics" id="hourlyOutputStatistics"></div>
</body>
<script src="../../../js/aluminumTank/index.js"></script>
</html>

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发泡和发泡线数据展示平台</title>
<link rel="stylesheet" href="../../../css/common/ondutyplan.css">
<link rel="stylesheet" href="../../../css/foamBox/style.css">
<link rel="stylesheet" href="../../../css/common/swiper-bundle.min.css">
<script src="../../../js/common/swiper-bundle.min.js"></script>
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/ondutyplan.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
</head>
<body>
<!--库存统计-->
<div class="inventoryStatistics" id="inventoryStatistics"></div>
<!--型号产量统计-->
<div class="statisticalOutputByModel" id="statisticalOutputByModel"></div>
<!--小时产量统计-->
<div class="hourlyOutputStatistics" id="hourlyOutputStatistics"></div>
<!--发泡参数-->
<div class="foamingParameters" id="foamingParameters"></div>
<!--设备运行状态-->
<div class="foamingLineRunStatus">
<table style="width: 100%;height:100%;">
<tr style="width: 100%;">
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/deviceopen.png" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/deviceopen.png" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/deviceopen.png" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/deviceopen.png" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:right;padding-right: 12px;"><img src="../../img/foamBox/deviceopen.png" width="40%" height="50%"/></td>
<td style="border:0px solid red;text-align:right;"><img src="../../img/foamBox/deviceopen.png" width="40%" height="50%"/></td>
</tr>
</table>
</div>
<!-- 轮播 -->
<div class="swiperModule">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="temperatureOne" id="temperatureOne"></div>
</div>
<div class="swiper-slide">
<div class="temperatureTwo" id="temperatureTwo"></div>
</div>
<div class="swiper-slide">
<div class="temperatureThree" id="temperatureThree"></div>
</div>
<div class="swiper-slide">
<div class="temperatureFour" id="temperatureFour"></div>
</div>
</div>
</div>
</body>
<script src="../../../js/foamBox/index.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
// loop: true,
centeredSlides: true,
autoplay: {
delay: 15000,
disableOnInteraction: false,
},
});
</script>
</html>

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>澳柯玛可视化看板</title>
</head>
<body>
<p> <a href="/adsorptionTank">吸附内胆</a></p>
<p> <a href="/aluminumTank">铝内胆生产数据监控</a></p>
<p><a href="/aluminumLiner">铝内胆成型线设备看板</a></p>
<p> <a href="/preassemble">吸附内胆预装</a></p>
<p> <a href="/tankShell">箱壳自动成型线生产看板</a></p>
<p> <a href="/tankShellDevice">箱壳自动成型线设备看板</a></p>
<p> <a href="/foamBox">发泡</a></p>
<p> <a href="/storage">门体库</a></p>
<p> <a href="/aluminumLiner">铝内胆成型线</a></p>
</body>
</html>

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸附内胆预装数据监控平台</title>
<link rel="stylesheet" href="../../../css/preassemble/style.css">
<link rel="stylesheet" href="../../../css/common/ondutyplan.css">
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/ondutyplan.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
</head>
<body>
<!--小时产量统计-->
<div class="hourlyOutputStatistics" id="hourlyOutputStatistics"></div>
<!--型号产量统计-->
<div class="statisticalOutputByModel" id="statisticalOutputByModel"></div>
<!--库存统计-->
<div class="inventoryStatistics" id="inventoryStatistics"></div>
</body>
<script src="../../../js/preassemble/index.js"></script>
</html>

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>门体库仓储看板</title>
<link rel="stylesheet" href="../../../css/common/ondutyplan.css">
<link rel="stylesheet" href="../../../css/storage/style.css">
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/ondutyplan.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
</head>
<body>
<!--生产计划-->
<div class="productionPlan" id="productionPlan"></div>
<!--当前库存-->
<div class="theCurrentInventory" id="theCurrentInventory"></div>
<!--库位统计-左库-->
<div class="emptyLocation" style="left:43%" id="emptyLocation-left"></div>
<div class="haveUsedLocation" style="left:43%" id="haveUsedLocation-left"></div>
<!--库位统计-右库-->
<div class="emptyLocation" style="right:8%" id="emptyLocation-right"></div>
<div class="haveUsedLocation" style="right:8%" id="haveUsedLocation-right"></div>
<!--库位占比-->
<div class="emptyLocationRatio" style="left: 55.5%;" id="emptyLocationNumber"></div>
<div class="emptyLocationRatio" style="left: 60.7%;" id="emptyLocationRatio"></div>
<div class="haveUsedLocationRatio" style="right: 20.8%;" id="haveUsedLocationNumber"></div>
<div class="haveUsedLocationRatio" style="right: 15.5%;" id="haveUsedLocationRatio"></div>
</body>
<script src="../../../js/storage/index.js"></script>
</html>

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save