<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>GongJiao2F-GD</title>
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<link rel="stylesheet" type="text/css" href="css/Style.css">
|
<script src="js/jquery.min.js"></script>
|
<script src='js/echarts.min.js'></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src='js/bootstrap-table.min.js'></script>
|
<script src='js/bootstrap-table-zh-CN.min.js'></script>
|
<script src="js/jquery.SuperSlide.2.1.3.js"></script>
|
<script src='js/template.js'></script>
|
<script src="js/jquery.qrcode.min.js"></script>
|
|
<style>
|
body {
|
background: #000000 url(img/bg_3.png) no-repeat !important;
|
background-size: cover;
|
width: 100%;
|
height: 100%;
|
}
|
|
.flex {
|
display: flex;
|
display: -webkit-flex;
|
justify-content: space-between;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
|
.flex .flex_item {
|
width: 16%;
|
cursor: pointer;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
height: 171px;
|
background-color: rgba(8, 14, 45, 0.3);
|
border-radius: 5px;
|
}
|
|
.flex .flex_span {
|
width: 25%;
|
text-align: center;
|
border-right: 1px solid #09d1ea;
|
|
|
}
|
|
.m15 {
|
margin-bottom: 15px;
|
}
|
|
.flex .flex_span:nth-child(4) {
|
border-right: none;
|
}
|
|
.flex .flex_span .color_span {
|
color: #09d1ea;
|
font-size: 18px;
|
margin-left: 20px;
|
}
|
|
.flex .flex_span .flex_txt {
|
color: #767877;
|
font-size: 12px;
|
}
|
|
#main_box {
|
padding: 30px;
|
}
|
|
body {
|
padding: 0;
|
}
|
|
.title_t {
|
text-align: left;
|
font-size: 14px;
|
color: #09d1ea;
|
margin-bottom: 20px;
|
}
|
|
.div_left {
|
display: inline-block;
|
width: 32%;
|
vertical-align: top;
|
margin-right: 2%;
|
padding: 20px;
|
border: 3px solid #080c1c;
|
border-radius: 5px;
|
background-color: rgba(8, 14, 45, 0.3);
|
height: 470px;
|
}
|
|
.div_right {
|
display: inline-block;
|
width: 65%;
|
padding: 20px;
|
border: 3px solid #080c1c;
|
border-radius: 5px;
|
background-color: rgba(8, 14, 45, 0.3);
|
height: 470px;
|
overflow: hidden;
|
}
|
|
.mod_top {
|
margin-bottom: 20px;
|
}
|
|
.mod_top .flex_txt {
|
text-align: left;
|
color: #767877;
|
font-size: 14px;
|
|
}
|
|
.mod_top .mode_p {
|
text-align: left;
|
font-size: 20px;
|
margin-bottom: 0;
|
padding-bottom: 10px;
|
border-bottom: 3px solid #080c1c;
|
|
}
|
|
.flex_p {
|
display: inline-block;
|
width: 33%;
|
vertical-align: top;
|
margin-bottom: 20px;
|
}
|
|
.flex_p .flex_txt {
|
text-align: left;
|
color: #767877;
|
font-size: 14px;
|
margin-top: 10px;
|
margin-bottom: 15px;
|
|
}
|
|
.flex_p .flex_name {
|
font-size: 18px;
|
color: #09d1ea;
|
}
|
|
.flex_jd {
|
margin-top: 20px;
|
}
|
|
.flex_jd .flex_txt {
|
color: #767877;
|
font-size: 14px;
|
margin-top: 18px;
|
margin-bottom: 18px;
|
}
|
|
.mod_bottom {
|
border-bottom: 3px solid #080c1c;
|
}
|
|
.flex_jd {
|
position: relative;
|
}
|
|
.flex_jd ul li {
|
display: inline-block;
|
width: 23px;
|
height: 21px;
|
/* background: #4b2dba; */
|
/* background: url(img/li_bg.png) no-repeat !important; */
|
border-radius: 2px;
|
margin-right: 3px;
|
vertical-align: top;
|
|
}
|
|
.flex_jd ul {
|
background: url(img/ul_bg.png) no-repeat !important;
|
position: relative;
|
z-index: 2;
|
height: 41px;
|
}
|
|
.position_s {
|
position: absolute;
|
left: 0px;
|
bottom: 21px;
|
background: #11324b !important;
|
width: 100%;
|
z-index: 1;
|
height: 20px !important;
|
border-radius: 0 !important;
|
width: 98% !important;
|
}
|
|
.position_color {
|
background: #09d1ea !important;
|
border-radius: 0 !important;
|
}
|
|
.position_font {
|
color: #09d1ea !important;
|
text-align: right;
|
position: absolute;
|
right: 1%;
|
bottom: 45px;
|
}
|
|
.change_color {
|
background: #35b8c8 !important;
|
}
|
|
.table>caption+thead>tr:first-child>td,
|
.table>caption+thead>tr:first-child>th,
|
.table>colgroup+thead>tr:first-child>td,
|
.table>colgroup+thead>tr:first-child>th,
|
.table>thead:first-child>tr:first-child>td,
|
.table>thead:first-child>tr:first-child>th {
|
color: #09d1ea;
|
|
|
}
|
|
.fixed-table-container tbody td .th-inner,
|
.fixed-table-container thead th .th-inner {
|
font-size: 14px !important;
|
|
}
|
|
th {
|
background-color: transparent !important;
|
}
|
|
td {
|
background-color: transparent;
|
}
|
|
tr {
|
background-color: transparent
|
}
|
|
.progress {
|
background: #11152f;
|
border-radius: 6px;
|
overflow: hidden !important;
|
}
|
|
.progress-diy-info,
|
.progress-diy-danger {
|
border-radius: 6px;
|
background: #4b2dba;
|
}
|
|
.progress span {
|
display: inline-block;
|
position: absolute;
|
top: -50% !important;
|
/* left: 50%; */
|
right: 0;
|
margin-top: -15px;
|
margin-left: -20px;
|
z-index: 6;
|
color: #4b2dba;
|
}
|
|
#tb_order tr td {
|
color: #cdcdcd;
|
font-size: 14px;
|
}
|
|
.tb_order>tbody>tr {
|
overflow: inherit !important;
|
}
|
|
#tb_order {}
|
|
.title_style li {
|
display: inline-block;
|
font-size: 16px;
|
width: 15%;
|
margin-bottom: 20px;
|
color: #09d1ea
|
}
|
|
.w40 {
|
width: 37% !important;
|
}
|
|
.concet_style .div_co {
|
display: inline-block;
|
font-size: 16px;
|
width: 15%;
|
margin-bottom: 23px;
|
color: #d5d5d6;
|
vertical-align: top;
|
}
|
|
.plus_main {
|
height: 980px;
|
overflow: hidden;
|
}
|
|
.pw {
|
position: relative;
|
}
|
|
.PA {
|
position: absolute;
|
top: 3px;
|
right: -39px;
|
}
|
|
.plus_main li {
|
margin-bottom: 20px;
|
|
|
}
|
</style>
|
<script>
|
var clear;//定义需要清除动画的部分
|
var a;
|
var num = 0;
|
$(function () {
|
Load();
|
var time = 80;
|
if (a != null) {//判断计时器是否为空
|
clearInterval(a);
|
a = null;
|
}
|
a = setInterval(function () {
|
clearInterval(clear);
|
$('#tb_order').bootstrapTable('refresh');
|
Load();
|
}, 60000);
|
});
|
function Load() {
|
//查找本月任务数、本月完成数、累计任务数、累计完成数
|
// $.ajax({
|
// url: 'http://172.16.72.3:86/DaLian/WorkOrderProgress2F',
|
// dataType: "JSON",
|
// type: "POST",
|
// async: true,//使用同步的方式,true为异步方式
|
// success: function (data) {
|
// $("#title-color1").html(data.list[0].MONTHSUM); //本日生产任务数
|
// $("#title-color2").html(data.list[0].MONTHCLOSESUM); //本日完成数量
|
|
// var AA=0;
|
// var BB=0;
|
// //日达成率
|
|
// if (data.list[0].MONTHCLOSESUM == "0" || data.list[0].MONTHSUM == "0") {
|
// AA = 0;
|
// }
|
// else {
|
// AA = (data.list[0].MONTHCLOSESUM / data.list[0].MONTHSUM) * 100;
|
// }
|
|
// if (data.list[0].SUMCLOSE == "0" || data.list[0].SUM == "0") {
|
// BB = 0;
|
// }
|
// else {
|
// BB = (data.list[0].SUMCLOSE / data.list[0].SUM) * 100;
|
// }
|
// $("#title-color3").html(AA.toFixed(2) + "%"); //日计划达成率
|
// $("#title-color4").html(BB.toFixed(2) + "%"); //周计划达成率
|
|
// },
|
// error: function (data) {
|
// // $.iMessager.alert("提示", "" + data.messager + "", "messager-error");
|
// }
|
// })
|
num += 1;
|
let dataJson = {
|
limit: 2,
|
offset: num
|
}
|
$.ajax({
|
url: 'http://172.16.72.3:86/DaLian/WorkMonitor2F',
|
data: dataJson,
|
dataType: "JSON",
|
type: "POST",
|
async: true,//使用同步的方式,true为异步方式
|
success: function (data) {
|
|
var num_total = (data.total) / 2
|
if (num >= num_total) {
|
num = 0
|
}
|
var time = 80;
|
var time1 = 800;
|
var liDiv = "";
|
liDiv += "<ul class='ul_top'>";
|
var data = data.rows
|
for (var i = 0; i < data.length; i++) {
|
liDiv += "<li>";
|
liDiv += "<div class='div_left'>";
|
liDiv += "<div class='mod_top'>";
|
liDiv += "<p class='flex_txt'>工单编号</p>"
|
liDiv += "<p class='mode_p'>" + data[i].WorkCode + "</p>"
|
liDiv += "</div>"
|
|
liDiv += "<div class='mod_bottom flex'>"
|
liDiv += "<div class='flex_p'>"
|
liDiv += "<div class='flex_txt'>产品名称</div>"
|
liDiv += "<div class='flex_name'>" + data[i].PartName + "</div>"
|
liDiv += "</div>"
|
|
liDiv += "<div class='flex_p'>"
|
liDiv += " <div class='flex_txt'>任务数量</div>"
|
liDiv += "<div class='flex_name'>" + data[i].WorkQty + "</div>"
|
liDiv += "</div>"
|
|
liDiv += "<div class='flex_p'>"
|
liDiv += " <div class='flex_txt'>计划开工</div>"
|
liDiv += "<div class='flex_name'>" + data[i].PlanStartDate + "</div>"
|
liDiv += "</div>"
|
|
liDiv += "<div class='flex_p'>"
|
liDiv += " <div class='flex_txt'>计划完工</div>"
|
liDiv += "<div class='flex_name'>" + data[i].PlanEndDate + "</div>"
|
liDiv += "</div>"
|
|
liDiv += "<div class='flex_p'>"
|
liDiv += " <div class='flex_txt'>实际开工</div>"
|
liDiv += "<div class='flex_name'>" + data[i].ActualStartDate + "</div>"
|
liDiv += "</div>"
|
|
liDiv += "<div class='flex_p'>"
|
liDiv += " <div class='flex_txt'>合格数量</div>"
|
liDiv += "<div class='flex_name'>" + data[i].GoodQty + "</div>"
|
liDiv += "</div>"
|
|
liDiv += "</div>"
|
|
liDiv += "<div class='flex_jd'>"
|
liDiv += "<div class='flex_txt'>生产进度</div>"
|
liDiv += "<div>"
|
liDiv += "<ul>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "<li></li>"
|
liDiv += "</ul>"
|
liDiv += "<div class='position_font'>" + ((data[i].WorkProgress) * 1).toFixed(0) + "%</div>"
|
liDiv += "<div class='progress position_s' style='margin-top:4px;'> <div class='progress-bar progress-diy-info position_color' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + ((data[i].WorkProgress) * 1).toFixed(0) + "%;text-align:center;'></div></div>"
|
liDiv += "</div>"
|
liDiv += "</div>"
|
liDiv += "</div>"
|
liDiv += "<div class='div_right'>"
|
liDiv += "<ul class='title_style'>"
|
liDiv += "<li>工序名称</li>"
|
liDiv += "<li>实际开工</li>"
|
liDiv += "<li>合格数量</li>"
|
liDiv += "<li>执行状态</li>"
|
liDiv += "<li class='w40'>生产进度</li>"
|
liDiv += "</ul>"
|
liDiv += "<div class='hd'>"
|
liDiv += "<ul class='concet_style'>"
|
for (var j = 0; j < data[i].children.length; j++) {
|
liDiv += "<li>"
|
liDiv += "<div class='div_co'>" + data[i].children[j].SubStepName + "</div>"
|
liDiv += "<div class='div_co'>" + data[i].children[j].SubActualStartDate + "</div>"
|
liDiv += "<div class='div_co'>" + data[i].children[j].SubGoodQty + "</div>"
|
liDiv += "<div class='div_co'>" + data[i].children[j].SubStus + "</div>"
|
//liDiv+="<div class='w40 div_co'><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:150%;'><span class='sr-only'>150% 完成</span></div></div></div>"
|
liDiv += "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;'>" + ((data[i].children[j].SubWorkProgress) * 1).toFixed(0) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + ((data[i].children[j].SubWorkProgress) * 1).toFixed(0) + "%;text-align:center;'></div></div></div>"
|
liDiv += "</li>"
|
}
|
liDiv += "</ul>"
|
liDiv += "</div>"
|
liDiv += "</div>"
|
liDiv += "</li>"
|
|
|
}
|
|
$('.plus_main').html('')
|
$('.plus_main').append(liDiv)
|
$(".div_right").slide({ mainCell: ".hd ul", autoPlay: true, effect: "topMarquee", opp: false, vis: 6, interTime: time, mouseOverStop: false });
|
}
|
})
|
}
|
</script>
|
</head>
|
|
<body>
|
<div id='main_box'>
|
<!-- 上部分 -->
|
<!-- <div class='flex m15'>
|
<div class='flex_span'>
|
<span class='flex_txt'>今日任务</span><span class='color_span' id="title-color1"></span>
|
</div>
|
<div class='flex_span'>
|
<span class='flex_txt'>当前完成</span><span class='color_span' id="title-color2"></span>
|
</div>
|
<div class='flex_span'>
|
<span class='flex_txt'>日生产进度</span><span class='color_span' id="title-color3"></span>
|
</div>
|
<div class='flex_span'>
|
<span class='flex_txt'>周生产进度</span><span class='color_span' id="title-color4"></span>
|
</div>
|
|
</div> -->
|
<!-- 标题 -->
|
<p class=title_t>工单执行监控</p>
|
<div class='list_style'>
|
<div class='bd plus_main'>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</body>
|
|
</html>
|
