MES-WEB-LayUI.git

			@@ -2,33 +2,361 @@
			<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title></title>
			<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:450px;
			height: 150px;
			}

			.content3 {
			height: 595px;
			}

			.content4 {
			height: 640px;
			}

			.cnt {
			border: 1px solid #5FB878;
			height: 100px;
			border-radius:5px;
			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>
			@@ -38,7 +366,7 @@
			<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			<![endif]-->

			<div style="margin: 0 20px;">
			<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">
			@@ -47,23 +375,23 @@
			<div class="layui-content">
			<div class="layui-row layui-col-space10">
			<div class="layui-col-sm12 layui-col-md3">
			<div class="cnt">
			<div class="cnt" id="ts1">

			</div>
			</div>
			<div class="layui-col-sm12 layui-col-md3">
			<div class="cnt">

			<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">

			<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">

			<div class="cnt" id="ts4">

			</div>
			</div>
			</div>
			@@ -74,45 +402,328 @@
			<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">
			<div class="layui-tab layui-tab-card" lay-filter="TabTest">
			<ul class="layui-tab-title">
			<li class="layui-this">工单列表</li>
			<li>效率分析</li>
			<li>不良分析</li>
			<li>SOP</li>
			<li>效率/不良分析</li>
			</ul>
			<div class="layui-tab-content" style="height: 400px;">
			<div class="layui-tab-item layui-show">1</div>
			<div class="layui-tab-item">2</div>
			<div class="layui-tab-item">3</div>
			<div class="layui-tab-item">4</div>
			<div class="layui-tab-item">5</div>
			<div class="layui-tab-item">6</div>
			<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="layui-content">

			<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>
			<script>
			//注意：选项卡依赖 element 模块，否则无法进行功能性操作
			layui.use('element', function () {
			var element = layui.element;
			});
			</script>

			</body>
			</html>