增加 泡前库 pqk
wangh
4 years ago
parent
969c408024
commit
9174695dae
Binary file not shown.
|
After Width: | Height: | Size: 475 B |
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
@ -0,0 +1,960 @@
|
||||
<!DOCTYPE html>
|
||||
<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">
|
||||
<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"/>-->
|
||||
<!-- 360浏览器急速模式 -->
|
||||
<meta name="renderer" content="webkit">
|
||||
<!-- 避免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}">
|
||||
|
||||
</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%;
|
||||
}
|
||||
|
||||
/*#bottom-left {
|
||||
position: absolute;
|
||||
border: 1px solid red;
|
||||
width: 68%;
|
||||
height: 29.6%;
|
||||
top: 66.4%;
|
||||
left: 3.5%;
|
||||
}*/
|
||||
|
||||
#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%;
|
||||
}
|
||||
|
||||
#bottom-left .autoscroll-table td {
|
||||
padding-top: 0.3%;
|
||||
padding-bottom: 0.3%;
|
||||
}
|
||||
|
||||
#bottom-left-2 .autoscroll-table td {
|
||||
padding-top: 0.3%;
|
||||
padding-bottom: 0.3%;
|
||||
}
|
||||
|
||||
.my-transition {
|
||||
position: absolute;
|
||||
border: 0px solid red;
|
||||
width: 68%;
|
||||
height: 29.6%;
|
||||
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: 29.6%;
|
||||
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;
|
||||
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">
|
||||
<div id="bottom-left" ></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>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:7.7%;color: #6fd4ff;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:14.9%;color: #6fd4ff;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:22.3%;color: #6fd4ff;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<!--当前计划-->
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:36.5%; color: #6fff85;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:43.8%; color: #6fff85;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:51.1%; color: #6fff85;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:58.4%; color: #6fff85;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<!--实际产量-->
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:72.3%; color: #ffff6d;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:79.9%; color: #ffff6d;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:87.3%; color: #ffff6d;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:2%;left:94.6%; color: #ffff6d;">
|
||||
<span >-</span>
|
||||
</div>
|
||||
|
||||
<!--当日计划-->
|
||||
<div class="top-mid-Text" style="position: absolute;top:73%;left: 7%;">
|
||||
<img alt="运行状态" id="status-a" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
||||
</div>
|
||||
|
||||
<!--当前计划-->
|
||||
<div class="top-mid-Text" style="position: absolute;top:73%;left:23%">
|
||||
<img alt="运行状态" id="status-b" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:73%;left:39%">
|
||||
<img alt="运行状态" id="status-c" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
||||
</div>
|
||||
|
||||
<div class="top-mid-Text" style="position: absolute;top:73%;left:55%">
|
||||
<img alt="运行状态" id="status-d" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
||||
</div>
|
||||
|
||||
<!--运行状态-->
|
||||
<div class="top-mid-Text" style="position: absolute;top:73%;left:77%">
|
||||
<img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
||||
<!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
|
||||
</div>
|
||||
<div class="top-mid-Text" style="position: absolute;top:73%;left:95%">
|
||||
<img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
|
||||
<!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--发泡参数-->
|
||||
<div id="top-right">
|
||||
</div>
|
||||
|
||||
<!--工程不良-->
|
||||
<div id="mid-right">
|
||||
<div 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>
|
||||
|
||||
<!--库存-->
|
||||
<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/auto-update.js" th:src="@{/js/auto-update.js}"></script>
|
||||
<script>
|
||||
//夹具生产计划切换
|
||||
showalert();
|
||||
|
||||
window.setInterval(showalert, 1000*30);
|
||||
function showalert()
|
||||
{
|
||||
var myTransition = $('.my-transition');
|
||||
var myTransition2 = $('.my-transition2');
|
||||
if (myTransition.hasClass('my-click-transiton')) {
|
||||
myTransition.removeClass('my-click-transiton');
|
||||
$('.my-transition2').addClass('my-click-transiton');
|
||||
} else {
|
||||
myTransition2.removeClass('my-click-transiton');
|
||||
$('.my-transition').addClass('my-click-transiton');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const orderInfColumns = [
|
||||
"型号",
|
||||
"计划数",
|
||||
"完成数",
|
||||
"差异数",
|
||||
"执行进度"
|
||||
];
|
||||
const orderInf = new AutoScrollTable(document.getElementById("top-left"), orderInfColumns, {
|
||||
width: ['30%', '14.5%', '14.5%', '14.5%', '14.5%']
|
||||
})
|
||||
|
||||
let selectors = []
|
||||
let tmp = []
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
tmp.push(`#top-mid .top-mid-Text:nth-child(${i + 1}) span`)
|
||||
|
||||
if (tmp.length >= 4) {
|
||||
selectors.push(tmp)
|
||||
tmp = []
|
||||
}
|
||||
}
|
||||
|
||||
const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), [], {
|
||||
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) {
|
||||
case 0:
|
||||
el.setAttribute("src", el.getAttribute("src").replace("runImg", "stopImg"))
|
||||
break
|
||||
case 1:
|
||||
el.setAttribute("src", el.getAttribute("src").replace("stopImg", "runImg"))
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
$(() => {
|
||||
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))
|
||||
})
|
||||
|
||||
const orderAgv = function (plannedProduction,actualProduction) {
|
||||
if(plannedProduction == 0){
|
||||
return 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]
|
||||
|
||||
for (let i in p) {
|
||||
updateSplitBlocks(p[i], selectors[i])
|
||||
}
|
||||
})
|
||||
|
||||
autoUpdate('/system/FoamerMes/getPlanHourInfo', INTERVAL, data => {
|
||||
// orderInf.loadData(data, Object.keys(orderInfColumns))
|
||||
let consolidatedRow = ["", "合计", ""]
|
||||
|
||||
for (let i = 3; i < 19; i++) {
|
||||
if (i === 6) {
|
||||
consolidatedRow.push(`${(consolidatedRow[5] / consolidatedRow[4] * 100).toFixed(1)}%`)
|
||||
continue
|
||||
}
|
||||
|
||||
let sum = 0
|
||||
|
||||
for (let j = 1; j < data.length; j++) {
|
||||
let d = data[j][i]
|
||||
if (!d || d === '') {
|
||||
continue
|
||||
}
|
||||
if (typeof d === 'string') {
|
||||
d = parseInt(d)
|
||||
}
|
||||
|
||||
sum += d
|
||||
}
|
||||
|
||||
consolidatedRow.push(sum.toString())
|
||||
}
|
||||
|
||||
data.push(consolidatedRow)
|
||||
|
||||
planInfo.loadData(data, 19, {
|
||||
includeHead: true,
|
||||
})
|
||||
//data.map(value => [value.orderType, value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${(value.actualProduction / value.plannedProduction * 100).toFixed(2)}%`]
|
||||
})
|
||||
|
||||
autoUpdate('/system/FoamerMes/getPlanHourInfo2', INTERVAL, data => {
|
||||
// orderInf.loadData(data, Object.keys(orderInfColumns))
|
||||
let consolidatedRow = ["", "合计", ""]
|
||||
|
||||
for (let i = 3; i < 19; i++) {
|
||||
if (i === 6) {
|
||||
consolidatedRow.push(`${(consolidatedRow[5] / consolidatedRow[4] * 100).toFixed(1)}%`)
|
||||
continue
|
||||
}
|
||||
|
||||
let sum = 0
|
||||
|
||||
for (let j = 1; j < data.length; j++) {
|
||||
let d = data[j][i]
|
||||
if (!d || d === '') {
|
||||
continue
|
||||
}
|
||||
if (typeof d === 'string') {
|
||||
d = parseInt(d)
|
||||
}
|
||||
|
||||
sum += d
|
||||
}
|
||||
|
||||
consolidatedRow.push(sum.toString())
|
||||
}
|
||||
|
||||
data.push(consolidatedRow)
|
||||
|
||||
planInfo2.loadData(data, 19, {
|
||||
includeHead: true,
|
||||
})
|
||||
})
|
||||
|
||||
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/getInventoryInfo', INTERVAL, data => {
|
||||
repertoryChart.setOption({
|
||||
xAxis: {
|
||||
data: data['xAxisInfo'].map(value => value.split(",").find(value => /^[Ss][Cc]/.test(value)) ?? value),
|
||||
axisLabel: {
|
||||
rotate: -30,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
data: data['seriesInfo'],
|
||||
},
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
autoUpdate('/system/FoamerMes/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('/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"));
|
||||
})
|
||||
|
||||
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],
|
||||
})
|
||||
}
|
||||
|
||||
pieChart.setOption({
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
data: data,
|
||||
label:{
|
||||
normal:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#02FEA9'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const modelChart = echarts.init(document.getElementById("mid-left"))
|
||||
modelChart.setOption({
|
||||
color: ['#4499CE'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
fontSize:'10',
|
||||
rotate: -30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
interval:90,
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
}],
|
||||
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',
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
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'
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
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()
|
||||
modelChart.resize()
|
||||
repertoryChart.resize()
|
||||
rejectRatioChart.resize()
|
||||
pieChart.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,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
data: res.xAxis,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:"℃",
|
||||
nameTextStyle:{
|
||||
color:'rgba(219,225,255,1)'
|
||||
},
|
||||
axisLabel: {
|
||||
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>
|
||||
|
||||
</html>
|
||||
@ -1,76 +1,60 @@
|
||||
package com.ruoyi.system.domain;
|
||||
|
||||
import java.util.Date;
|
||||
|
||||
public class OrderInfo {
|
||||
|
||||
private String orderType;
|
||||
private String plan_code;
|
||||
private String name;
|
||||
private int plan_number;
|
||||
private int actual_number;
|
||||
private double rate;
|
||||
private String day;
|
||||
|
||||
private String materialType;
|
||||
|
||||
private long plannedProduction;
|
||||
|
||||
private long actualProduction;
|
||||
|
||||
private long recordTime;
|
||||
|
||||
private Date endTime;
|
||||
|
||||
private String planDate;
|
||||
|
||||
public String getOrderType() {
|
||||
return orderType;
|
||||
public String getName() {
|
||||
return name;
|
||||
}
|
||||
|
||||
public void setOrderType(String orderType) {
|
||||
this.orderType = orderType;
|
||||
public void setName(String name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
public String getMaterialType() {
|
||||
return materialType;
|
||||
public double getRate() {
|
||||
return rate;
|
||||
}
|
||||
|
||||
public void setMaterialType(String materialType) {
|
||||
this.materialType = materialType;
|
||||
public void setRate(double rate) {
|
||||
this.rate = rate;
|
||||
}
|
||||
|
||||
public long getPlannedProduction() {
|
||||
return plannedProduction;
|
||||
public String getPlan_code() {
|
||||
return plan_code;
|
||||
}
|
||||
|
||||
public void setPlannedProduction(long plannedProduction) {
|
||||
this.plannedProduction = plannedProduction;
|
||||
public void setPlan_code(String plan_code) {
|
||||
this.plan_code = plan_code;
|
||||
}
|
||||
|
||||
public long getActualProduction() {
|
||||
return actualProduction;
|
||||
public int getPlan_number() {
|
||||
return plan_number;
|
||||
}
|
||||
|
||||
public void setActualProduction(long actualProduction) {
|
||||
this.actualProduction = actualProduction;
|
||||
public void setPlan_number(int plan_number) {
|
||||
this.plan_number = plan_number;
|
||||
}
|
||||
|
||||
public long getRecordTime() {
|
||||
return recordTime;
|
||||
public int getActual_number() {
|
||||
return actual_number;
|
||||
}
|
||||
|
||||
public void setRecordTime(long recordTime) {
|
||||
this.recordTime = recordTime;
|
||||
public void setActual_number(int actual_number) {
|
||||
this.actual_number = actual_number;
|
||||
}
|
||||
|
||||
public Date getEndTime() {
|
||||
return endTime;
|
||||
public String getDay() {
|
||||
return day;
|
||||
}
|
||||
|
||||
public void setEndTime(Date endTime) {
|
||||
this.endTime = endTime;
|
||||
}
|
||||
|
||||
public String getPlanDate() {
|
||||
return planDate;
|
||||
}
|
||||
|
||||
public void setPlanDate(String planDate) {
|
||||
this.planDate = planDate;
|
||||
public void setDay(String day) {
|
||||
this.day = day;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue