<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>设备维修工单</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<!--引用layui样式文件-->
|
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
|
<link href="../layuiadmin/layui/css/global.css" rel="stylesheet" />
|
<!--引用layui js文件-->
|
<script src="../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../layuiadmin/layui/layui.js"></script>
|
<script src="../layuiadmin/echarts.min.js"></script>
|
<script src="../layuiadmin/Scripts/json2.js"></script>
|
<script src="../layuiadmin/Scripts/webConfig.js"></script>
|
<script src="../layuiadmin/zgqCustom/zgqCustom.js"></script>
|
<!--自定义样式-->
|
<style>
|
body {
|
background-color: #ffffff;
|
}
|
|
.layui-tab-card > .layui-tab-title {
|
background-color: #ffffff;
|
}
|
|
.layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
|
border-color: #eee;
|
}
|
|
.layui-content {
|
height: 150px;
|
}
|
|
.content3 {
|
height: 595px;
|
}
|
|
.content4 {
|
height: 640px;
|
}
|
|
.cnt {
|
border: 1px solid #5FB878;
|
height: 150px;
|
border-radius: 5px;
|
}
|
|
.cns {
|
border: 1px solid #5FB878;
|
height: 140px;
|
border-radius: 5px;
|
}
|
|
.topright dt img {
|
display: block;
|
height: 145px;
|
width: 100%;
|
}
|
|
dt {
|
height: 145px;
|
width: 20%;
|
border: 1px solid rgb(0 0 0 / 10%);
|
}
|
|
dl {
|
overflow: hidden;
|
margin: 2px 0px;
|
}
|
|
.topright > dd {
|
padding: 0px 10px;
|
width: 50%;
|
}
|
|
dt, dd {
|
float: left;
|
}
|
|
.cnt h1, .cns h1 {
|
line-height: 30px;
|
margin: 0 10px;
|
}
|
|
h1 span {
|
font-family: "微软雅黑";
|
font-weight: bold;
|
}
|
|
.cnt, .cns dl dd {
|
margin: 0 auto;
|
/*text-align:center;*/
|
}
|
|
.layui-show {
|
padding: 5px 10px;
|
}
|
|
.color_border1 {
|
border: 0.4em solid #ffd800;
|
background-color: #ffd800;
|
}
|
|
.color_border2 {
|
border: 0.4em solid #09d1ea;
|
background-color: #09d1ea;
|
}
|
|
.color_border3 {
|
border: 0.4em solid #808080;
|
background-color: #808080;
|
}
|
|
.gj_icon {
|
border-radius: 0.4em;
|
width: 1px;
|
height: 1px;
|
display: inline-block;
|
vertical-align: 0px;
|
margin-right: 14px;
|
}
|
|
.imgicon {
|
height: 100px;
|
display: block;
|
text-align: center;
|
}
|
|
.imgtitle {
|
text-align: center;
|
display: block;
|
font-size: 30px;
|
}
|
|
.layui-icon {
|
font-size: 90px;
|
}
|
|
.imgicon0 {
|
height: 100px;
|
display: block;
|
text-align: center;
|
margin: 0.2em auto;
|
width: 100px;
|
}
|
.imgicon0:hover {
|
cursor: pointer; /*鼠标变成手指样式*/
|
background: #5FB878;
|
}
|
|
.bottomright {
|
cursor: pointer; /*鼠标变成手指样式*/
|
transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
|
}
|
|
.bottomright:hover {
|
transform: scale(1.3); /*鼠标放上之后元素变成1.4倍大小*/
|
}
|
|
#mychart1, #mychart2 {
|
width: 100%;
|
height: 320px;
|
}
|
|
.delete {
|
width: 20px;
|
height: 20px;
|
border-radius: 60%;
|
position: absolute;
|
top: 5px;
|
right: 15px;
|
font-size: 30px;
|
}
|
|
.delete:hover {
|
cursor: pointer; /*鼠标变成手指样式*/
|
}
|
</style>
|
<script>
|
|
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
|
layui.use(['element', 'table'], function () {
|
var $ = layui.jquery,
|
table = layui.table,
|
element = layui.element;
|
var mychart1 = echarts.init(document.getElementById('mychart1'));
|
var mychart2 = echarts.init(document.getElementById('mychart2'));
|
|
element.on('tab(TabTest)', function (data) {
|
console.log(data);
|
Mychart(mychart1, mychart2);
|
mychart1.resize();
|
mychart2.resize();
|
})
|
|
TSLoad();
|
});
|
function TSLoad() {
|
var aSearch = [];
|
$.ajax({
|
url: "../layuiadmin/json/Test.json",
|
type: "GET",
|
data: { "UserId": "001" },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
|
data.forEach(function (ele) {//循环外层数组
|
if (ele.UserId == "001") {
|
aSearch = aSearch.concat(ele); // 将符合要求的数组合并到aSearch;
|
}
|
});
|
|
for (var i = 1; i <= 4; i++) {
|
if (i <= aSearch.length) {
|
var html1 = "";
|
html1 += "<dl>";
|
html1 += "<dd>";
|
html1 += "<h1><span>设备编号：</span><span id=\"eqp" + i + "\">SB000001</span></h1>";
|
html1 += "<h1><span>当前工单：</span><span>PO2021063000001</span></h1>";
|
html1 += "<h1><span>负责人：</span><span>张三</span></h1>";
|
html1 += "</dd>";
|
html1 += "</dl>";
|
$("#ts" + i + "").append(html1);
|
$("#ts" + i + "").append("<span class=\"layui-icon layui-icon-delete delete\" onclick=\"Delete(this," +i + ")\"></span>"); //在当前div后追加加一个span删除
|
}
|
else
|
{
|
var html1 = "";
|
html1 += "<span class=\"layui-icon layui-icon-addition imgicon0\" onclick=\"Add(this)\"></span>";
|
$("#ts" + i + "").append(html1);
|
}
|
}
|
|
|
}
|
});
|
}
|
function Add(obj)
|
{
|
//获取父级id
|
var partid = $(obj).parent().attr("id");
|
var html1 = "";
|
html1 += "<dl>";
|
html1 += "<dd>";
|
html1 += "<h1><span>设备编号：</span><span>SB000001</span></h1>";
|
html1 += "<h1><span>当前工单：</span><span>PO2021063000001</span></h1>";
|
html1 += "<h1><span>负责人：</span><span>张三</span></h1>";
|
html1 += "</dd>";
|
html1 += "</dl>";
|
$("#" + partid + "").empty(); //清除添加图标
|
$("#" + partid+"").append(html1); //填充添加的数据
|
}
|
function Delete(obj,i)
|
{
|
//获取父级id
|
var partid = $(obj).parent().attr("id");
|
//获取指定设备ID的编号
|
var eqpid = "eqp" + i;
|
//通过样式ID获取html内容(设备编号)
|
var value = $("#" + eqpid + "").html();
|
//逻辑删除方法
|
layer.confirm("确认要删除吗，删除后不能恢复", { title: "删除确认" }, function (index) {
|
layer.msg(value, { time: 1 * 1000, icon: 1 }, function () {
|
|
//修改为功后刷新界面
|
window.location.reload();
|
});
|
})
|
}
|
function Mychart(mychart1, mychart2) {
|
option1 = {
|
title: {
|
text: '当前设备日生产效率'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['当前设备日生产效率']
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
name: '当前设备日生产效率',
|
type: 'line',
|
stack: '总量',
|
data: [120, 132, 101, 134, 90, 230, 210]
|
}
|
]
|
};
|
|
option2 = {
|
title: {
|
text: '当前设备当日不良原因对比'
|
},
|
legend: {
|
data: ['不良原因']
|
},
|
grid: {
|
left: '3%',
|
right: '3%',
|
bottom: '15%',
|
containLabel: true
|
},
|
xAxis: {
|
data: ['不良1', '不良二', '不良三', '不良四']
|
},
|
yAxis: {},
|
series: [{
|
type: 'bar',
|
name: '不良原因',
|
itemStyle: {
|
normal: {
|
color: function (params) {
|
var colorList = ['#2eddc1', '#FCCE10', '#E87C25', '#27727B', '#9efdc6'];
|
return colorList[params.dataIndex]
|
},
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}'
|
}
|
}
|
},
|
data: [220, 182, 191, 234]
|
}]
|
};
|
|
|
mychart1.setOption(option1);
|
mychart2.setOption(option2);
|
window.onresize = function () {
|
mychart1.resize();
|
mychart2.resize();
|
}
|
}
|
</script>
|
</head>
|
|
<body>
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
<!--[if lt IE 9]>
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
|
<div style="margin: 20px 20px;">
|
<!--<blockquote class="layui-elem-quote">注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。</blockquote>-->
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md8">
|
<fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
|
<legend style="color: #5FB878">生产资源</legend>
|
<div class="layui-content">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt" id="ts1">
|
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt" id="ts2">
|
<!--<span class="layui-icon layui-icon-addition imgicon0"></span>-->
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt" id="ts3">
|
<!--<span class="layui-icon layui-icon-addition imgicon0"></span>-->
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt" id="ts4">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
|
<legend style="color: #5FB878">当前状态</legend>
|
<div class="layui-content">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md12">
|
<dl class="topright">
|
<dt>
|
<img src="http://pic.weather.com.cn/images/cn/photo/2019/03/22/20190322154300F54F89B020C984044C290524D80230B2_s.jpg" onError="this.src='../layuiadmin/layui/images/erro.png';">
|
</dt>
|
<dd>
|
<h1><span>当前设备：</span><span>A线</span></h1>
|
<h1><span>当前订单：</span><span>SC0000001</span></h1>
|
<h1><span>计划数量：</span><span>10000</span></h1>
|
<h1><span>以汇报数量：</span><span>4500</span></h1>
|
<h1><span>进度：</span><span>40%</span></h1>
|
<h1><span>本单运行时间：</span><span>00:56:34</span></h1>
|
<h1><span>本资源运行时间：</span><span>07:56:34</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md8">
|
<div class="layui-tab layui-tab-card" lay-filter="TabTest">
|
<ul class="layui-tab-title">
|
<li class="layui-this">工单列表</li>
|
<li>效率/不良分析</li>
|
</ul>
|
<div class="layui-tab-content content3">
|
<div class="layui-tab-item layui-show">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border1'></span><span>执行中</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border3'></span><span>已关闭</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cns">
|
<dl>
|
<dd>
|
<h1><span>工单号：</span><span>PO2021063000001</span></h1>
|
<h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
|
<h1><span>生产进度：</span><span>张三</span></h1>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-tab-item">
|
<div class="layui-row">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md12">
|
<div id="mychart1"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md12">
|
<div id="mychart2"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
|
<legend style="color: #5FB878">操作台</legend>
|
<div class="content4">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright OpenWork">
|
<span class="layui-icon layui-icon-pause imgicon"></span>
|
<span class="imgtitle">开工</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-list imgicon"></span>
|
<span class="imgtitle">汇报</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-logout imgicon"></span>
|
<span class="imgtitle">完工</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-search imgicon"></span>
|
<span class="imgtitle">首检</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-search imgicon"></span>
|
<span class="imgtitle">巡检</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-search imgicon"></span>
|
<span class="imgtitle">过程检验</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-release imgicon"></span>
|
<span class="imgtitle">报检申请</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-engine imgicon"></span>
|
<span class="imgtitle">上料防呆</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-chart imgicon"></span>
|
<span class="imgtitle">不良采集</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-play imgicon"></span>
|
<span class="imgtitle">停工</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-unlink imgicon"></span>
|
<span class="imgtitle">异常</span>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<div class="cnt bottomright">
|
<span class="layui-icon layui-icon-close imgicon"></span>
|
<span class="imgtitle">退出</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
