|
|
|
@ -23,7 +23,13 @@ |
|
|
|
<link rel="stylesheet" href="../static/css/jquery.scrollbar.min.css" th:href="@{/css/jquery.scrollbar.min.css}"> |
|
|
|
<link rel="stylesheet" href="../static/css/feather.css" th:href="@{/css/feather.css}"> |
|
|
|
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
|
|
|
<th:block th:include="include :: header('仪表盘')"/> |
|
|
|
<th:block th:include="include :: datetimepicker-css"/> |
|
|
|
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script> |
|
|
|
<style> |
|
|
|
.body{ |
|
|
|
background-color: #F9F9F9; |
|
|
|
} |
|
|
|
i{ |
|
|
|
padding-top: 6px; |
|
|
|
padding-left: 9px; |
|
|
|
@ -37,23 +43,25 @@ |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
.container{ |
|
|
|
background-color: #F0F0F0; |
|
|
|
margin: 2% 3%; |
|
|
|
width: 100%; |
|
|
|
background-color: #F9F9F9; |
|
|
|
} |
|
|
|
.style1{ |
|
|
|
margin: 10px; |
|
|
|
height: 200px; |
|
|
|
height: 300px; |
|
|
|
border-radius:5%; |
|
|
|
background-color: #FFFFFF; |
|
|
|
} |
|
|
|
.style2 { |
|
|
|
display: inline-block; |
|
|
|
height: 30%; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #F0F0F0; |
|
|
|
} |
|
|
|
.style3{ |
|
|
|
display: inline-block; |
|
|
|
width: 70px; |
|
|
|
height: 30%; |
|
|
|
font-size: 10px; |
|
|
|
text-align: center; |
|
|
|
vertical-align: middle; |
|
|
|
@ -74,55 +82,103 @@ |
|
|
|
color: #a0a7e6; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
.inputss{ |
|
|
|
width: 100px; |
|
|
|
height: 15px; |
|
|
|
font-size: 10px; |
|
|
|
} |
|
|
|
th{ |
|
|
|
border: 0.5px solid silver; |
|
|
|
} |
|
|
|
.row{ |
|
|
|
margin: 1% 2%; |
|
|
|
border: 0.5px solid #0a2730; |
|
|
|
} |
|
|
|
.table-scrollable .table-scrollable-borderless{ |
|
|
|
height: 40%; |
|
|
|
} |
|
|
|
p{ |
|
|
|
margin: 2% |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
<body class="gray-bg"> |
|
|
|
<body class="gray-bg body scroll-content"> |
|
|
|
<div class="container"> |
|
|
|
<div class="row" > |
|
|
|
<div class="col-xs-6 col-sm-3 p-0" style="display: flex;"> |
|
|
|
<div class="style1"> |
|
|
|
<div class="row" style="padding-top: 60px"> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div style="padding-left: 40px"> |
|
|
|
<div class="style2"><i class="fa fa-file-text-o icon1"></i></div> |
|
|
|
<div class="style3" style="color: #3fb1e3;"> |
|
|
|
生产订单数<br> |
|
|
|
10 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="container form-control-sm"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div style="border:1px solid darkgrey; text-align: center "> |
|
|
|
<h2 style="font-size: 30px" id="oderNolist">10</h2> |
|
|
|
<!-- <div class="style2"><i class="fa fa-file-text-o icon1"></i></div>--> |
|
|
|
<div style="color: #3fb1e3;"> |
|
|
|
<p style="font-size: 20px;">进行中 - 生产订单数</p><br> |
|
|
|
</div> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div style="padding-left: 10px"> |
|
|
|
<div class="style2"><i class="fa fa-file-text-o icon2"></i></div> |
|
|
|
<div class="style3" style="color: #6be6c1;"> |
|
|
|
生产工单数<br> |
|
|
|
15 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div style="padding-left: 40px"> |
|
|
|
<div class="style2"><i class="fa fa-file-text-o icon3"></i></div> |
|
|
|
<div class="style3" style="color: #626c91;"> |
|
|
|
开工工单数<br> |
|
|
|
15 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div style="border:1px solid darkgrey; text-align: center "> |
|
|
|
<h2 style="font-size: 30px" id="oderlist">15</h2> |
|
|
|
<!-- <div class="style2"><i class="fa fa-file-text-o icon2"></i></div>--> |
|
|
|
<div > |
|
|
|
<p style="color: #6be6c1;font-size: 20px">已完成 - 生产订单数</p><br> |
|
|
|
</div> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div style="padding-left: 10px"> |
|
|
|
<div class="style2"><i class="fa fa-file-text-o icon4"></i></div> |
|
|
|
<div class="style3" style="color: #a0a7e6;"> |
|
|
|
完工工单数<br> |
|
|
|
15 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-6 col-sm-6 p-0"> |
|
|
|
<div class="table-scrollable table-scrollable-borderless"> |
|
|
|
<div class="style1"> |
|
|
|
<p>成品料号分析统计</p> |
|
|
|
<p> |
|
|
|
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/> |
|
|
|
<button class="inputss" >top10</button><button class="inputss">top50</button> |
|
|
|
</p> |
|
|
|
<table class="table table-hover table-light" style="width: 100%;font-size: 16px"> |
|
|
|
<thead> |
|
|
|
<tr class="uppercase"> |
|
|
|
<th style="width: 33%">料号</th> |
|
|
|
<th style="width: 33%;">物料名称</th> |
|
|
|
<th style="width: 25%">占比</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tr> |
|
|
|
<td><a href="javascript:;" class="primary-link">3325454555</a></td> |
|
|
|
<td>yk测试-原材料</td> |
|
|
|
<td><span class="bold theme-font">80%</span></td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td><a href="javascript:;" class="primary-link">1000000000</a></td> |
|
|
|
<td>yk测试-原材料2</td> |
|
|
|
<td><span class="bold theme-font">67%</span></td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td><a href="javascript:;" class="primary-link">3325454564</a></td> |
|
|
|
<td>yk测试-原材料3</td> |
|
|
|
<td><span class="bold theme-font">98%</span></td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td><a href="javascript:;" class="primary-link">3325454554</a></td> |
|
|
|
<td>yk测试-原材料4</td> |
|
|
|
<td><span class="bold theme-font">58%</span></td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xs-6 col-sm-6 p-0"> |
|
|
|
<div class="style1"> |
|
|
|
<p>周产量</p> |
|
|
|
<p> |
|
|
|
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/> |
|
|
|
</p> |
|
|
|
<div id="classificationPassRate" style="width:100%;text-align: center;height: 80%"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xs-6 col-sm-3 p-0" style="display: flex;"> |
|
|
|
<!-- <div class="col-xs-6 col-sm-3 p-0" style="display: flex;"> |
|
|
|
<div class="style1"> |
|
|
|
<div class="row" style="padding-top: 60px"> |
|
|
|
<div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
@ -163,13 +219,85 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<div class="col-sm-12 p-0" style="height: 40%"> |
|
|
|
<div class="row"> |
|
|
|
<p>生产订单周期</p> |
|
|
|
<p> |
|
|
|
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/> |
|
|
|
<label class="col-form-label">生产订单号:</label> <input class="form-control-sm" type="text" /> |
|
|
|
</p> |
|
|
|
<table class=" table table-hover table-light" id="qualitlist"> |
|
|
|
<thead> |
|
|
|
<tr class="uppercase"> |
|
|
|
<th style="width: 12%;">生产订单</th> |
|
|
|
<th style="width: 12%;">料号</th> |
|
|
|
<th style="width: 12%">物业名称</th> |
|
|
|
<th style="width: 12%">业务部</th> |
|
|
|
<th style="width: 12%;">工程部</th> |
|
|
|
<th style="width: 12%">采购部</th> |
|
|
|
<th style="width: 12%">品质部(来料)</th> |
|
|
|
<th style="width: 12%">生产部</th> |
|
|
|
<th style="width: 12%">品质(生产)</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tr> |
|
|
|
<td rowspan="2" style="border-right:0.5px solid #f0f0f0 ;">PO122242342</td> |
|
|
|
<td><a href="javascript:;" class="primary-link">3325454555</a></td> |
|
|
|
<td>yk测试-原材料</td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td><a href="javascript:;" class="primary-link">1000000000</a></td> |
|
|
|
<td>yk测试-原材料2</td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td rowspan="2" style="border-right:0.5px solid #f0f0f0 ;">PO122242342</td> |
|
|
|
<td><a href="javascript:;" class="primary-link">3325454235</a></td> |
|
|
|
<td>yk测试-原材料3</td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td><a href="javascript:;" class="primary-link">3325454554</a></td> |
|
|
|
<td>yk测试-原材料4</td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
<td><span class="bold theme-font">/</span></td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<div class="col-xs-6 col-sm-3 p-0"> |
|
|
|
</div> |
|
|
|
<div class="col-sm-12 p-0" style="height:100px"> |
|
|
|
</div> |
|
|
|
<!-- <div class="col-xs-12 col-sm-6 p-0"> |
|
|
|
<div class="style1"> |
|
|
|
<p>产品产量分布统计</p> |
|
|
|
<div id="productYield" style="width: 100%;height: 200px;">productYield</div> |
|
|
|
<div id="dailyGrowthTrend" style="width: 100%;height: 200px;">Daily growth trend</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="table-scrollable table-scrollable-borderless"> |
|
|
|
<table id="qualitylist" class="table table-hover table-light"></table> |
|
|
|
</div> |
|
|
|
<div class="col-xs-6 col-sm-3 p-0"> |
|
|
|
<div class="style1"> |
|
|
|
<p>产品分类产量分布统计</p> |
|
|
|
@ -203,14 +331,7 @@ |
|
|
|
<p>产品合格率统计</p> |
|
|
|
<div id="passRate" style="width: 100%;height: 200px;">Pass rate</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xs-6 col-sm-3 p-0"> |
|
|
|
<div class="style1"> |
|
|
|
<p>产品分类合格率统计</p> |
|
|
|
<div id="classificationPassRate" style="width: 100%;height: 200px;">Classification pass rate</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<script th:src="@{/js/jquery.min.js}"></script> |
|
|
|
@ -218,6 +339,43 @@ |
|
|
|
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script> |
|
|
|
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> |
|
|
|
<script th:src="@{/js/walden.js}"></script> |
|
|
|
<script th:src="@{/js/pcoded.min.js}"></script> |
|
|
|
<th:block th:include="include :: footer"/> |
|
|
|
<th:block th:include="include :: datetimepicker-js"/> |
|
|
|
<!-- 进行中订单数量--> |
|
|
|
<script type="text/javascript"> |
|
|
|
var oderprefix = ctx + "system/makeorder"; |
|
|
|
$.ajax({ |
|
|
|
url: oderprefix + "/ByNoFinsh", |
|
|
|
method:'get', |
|
|
|
contentType:'application/json;charset=utf-8', |
|
|
|
dataType:'json', |
|
|
|
success:function (data){ |
|
|
|
console.log(data); |
|
|
|
$("#oderNolist").val(data); |
|
|
|
}, |
|
|
|
error:function (){ |
|
|
|
$.modal.error("服务器出错，请联系管理员"); |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<!-- 已完成订单数量--> |
|
|
|
<script type="text/javascript"> |
|
|
|
var oderprefix = ctx + "system/makeorder"; |
|
|
|
$.ajax({ |
|
|
|
url: oderprefix + "/ByFinsh", |
|
|
|
type:'get', |
|
|
|
contentType:'application/json;charset=utf-8', |
|
|
|
dataType:'json', |
|
|
|
success:function (data){ |
|
|
|
console.log(data); |
|
|
|
$("#oderNolist").val(data); |
|
|
|
}, |
|
|
|
error:function (){ |
|
|
|
$.modal.error("服务器出错，请联系管理员"); |
|
|
|
} |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<!-- 产品产量分布统计--> |
|
|
|
<script type="text/javascript"> |
|
|
|
var productYieldDom = document.getElementById('productYield'); |
|
|
|
@ -713,30 +871,100 @@ |
|
|
|
useDirtyRect: false |
|
|
|
}); |
|
|
|
var classificationPassRateOption = { |
|
|
|
title: { |
|
|
|
textStyle: { |
|
|
|
align: 'center', |
|
|
|
color: '#fff', |
|
|
|
fontSize: 20, |
|
|
|
}, |
|
|
|
top: '5%', |
|
|
|
left: '5%', |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
type: "shadow", |
|
|
|
label: { |
|
|
|
show: true |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
name:'时间', |
|
|
|
type: 'category', |
|
|
|
data: ['分类1 ','分类2','分类3','分类4'], |
|
|
|
axisTick: {show:false}, |
|
|
|
data: ['11.13~11-19','11.20~11-26','11-27~12-03','12.04~12-10'], |
|
|
|
axisTick: {show:true}, |
|
|
|
axisLabel: { |
|
|
|
fontSize: 8 //设置坐标轴文本标签的字体大小 |
|
|
|
} |
|
|
|
show: true, |
|
|
|
fontSize: 10, //设置坐标轴文本标签的字体大小 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
symbol: ['none','arrow'], |
|
|
|
symbolSize: [4, 4], |
|
|
|
show: true, //隐藏X轴轴线 |
|
|
|
lineStyle: { |
|
|
|
color: 'blue' |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
name:'数量', |
|
|
|
top: "1%", |
|
|
|
axisTick: { |
|
|
|
show: true //隐藏X轴刻度 |
|
|
|
}, |
|
|
|
type: 'value', |
|
|
|
axisLabel: { |
|
|
|
fontSize: 8 //设置坐标轴文本标签的字体大小 |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
symbol: ['none','arrow'], |
|
|
|
symbolSize: [4, 4], |
|
|
|
show: true, //隐藏X轴轴线 |
|
|
|
lineStyle: { |
|
|
|
color: 'blue' |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ["折线图", "柱状图"], |
|
|
|
right:"1%", |
|
|
|
top: "1%", |
|
|
|
textStyle: { |
|
|
|
color: "black" |
|
|
|
} |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top:'10%', |
|
|
|
left:'15%', |
|
|
|
right: '10%', |
|
|
|
bottom:'20%', |
|
|
|
bottom:'15%', |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: [120, 200, 150, 80], |
|
|
|
type: 'bar', |
|
|
|
name: "折线图", |
|
|
|
type: "line", |
|
|
|
barWidth: '20%', |
|
|
|
"itemStyle": { |
|
|
|
"normal": { |
|
|
|
"color": "blue", |
|
|
|
"barBorderRadius": 20, |
|
|
|
"label": { |
|
|
|
"show": true, |
|
|
|
"position": "top", |
|
|
|
formatter: function(p) { |
|
|
|
return p.value > 0 ? (p.value) : ''; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [441, 453, 486, 534] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "柱状图", |
|
|
|
type: "bar", |
|
|
|
barWidth: '20%', |
|
|
|
areaStyle:{ |
|
|
|
color: "black" |
|
|
|
}, |
|
|
|
data: [441, 453, 486, 534] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
@ -745,5 +973,65 @@ |
|
|
|
} |
|
|
|
window.addEventListener('resize', classificationPassRate.resize); |
|
|
|
</script> |
|
|
|
<!-- <script th:inline="javascript"> |
|
|
|
var editFlag = [[${@permission.hasPermi('system:makeorder:edit')}]]; |
|
|
|
var removeFlag = [[${@permission.hasPermi('system:makeorder:remove')}]]; |
|
|
|
var cancelFlag = [[${@permission.hasPermi('system:makeorder:cancel')}]]; |
|
|
|
var restoreFlag = [[${@permission.hasPermi('system:makeorder:restore')}]]; |
|
|
|
var makeStatusDatas = [[${@dict.getType('sys_erp_makeStatus')}]]; |
|
|
|
var eceiptStatusDatas = [[${@dict.getType('eceiptStatus')}]]; |
|
|
|
var qualityStatusDatas = [[${@dict.getType('qualityStatus')}]]; |
|
|
|
var useStatusDatas = [[${@dict.getType('useStatus')}]]; |
|
|
|
var prefix = ctx + "system/makeorder"; |
|
|
|
$(function() { |
|
|
|
var options = { |
|
|
|
url: prefix + "/list", |
|
|
|
exportUrl: prefix + "/export", |
|
|
|
modalName: "生产订单周期", |
|
|
|
columns: [{ |
|
|
|
checkbox: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: 'id', |
|
|
|
title: '生产订单id', |
|
|
|
visible: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: 'makeNo', |
|
|
|
title: '生产单号' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: 'materialNo', |
|
|
|
title: '料号' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: '', |
|
|
|
title: '业务部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: '', |
|
|
|
title: '工程部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: '', |
|
|
|
title: '采购部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: '', |
|
|
|
title: '品质部(来料)' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: '', |
|
|
|
title: '生产部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: '', |
|
|
|
title: '品质部(生产)' |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
$.table("#qualitlist").init(options); |
|
|
|
}); |
|
|
|
</script> --> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|
zhangsiqi
9 months ago