list.html 8.9 KB
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设备列表</title>
		<link href="/equipment/css/font-awesome.css" rel="stylesheet">
		<link href="/equipment/css/bootstrap.css" rel="stylesheet">
		<link href="/equipment/css/style-responsive.css" rel="stylesheet">
		<link href="/equipment/css/default-theme.css" rel="stylesheet">
		<link href="/equipment/css/style.css" rel="stylesheet">
		<link href="/equipment/css/bootstrap-reset.css" rel="stylesheet">
		<!-- 自增样式表 -->
		<link rel="stylesheet" type="text/css" href="/equipment/css/other.css" />
		<link rel="stylesheet" href="/layui/css/layui.css" media="all">
		<script src="/layui/layui.js" charset="utf-8"></script>
	</head>
	<body class="sticky-header">
		<!-- 头部 -->
		<div id="head">{include file="common/_header"}</div>
		<!-- 头部 -->
		<section>
			<!-- 导航 -->
			<div class="sidebar-left">{include file="common/_leftnav"}</div>
			<!-- 导航 -->
			<div class="body-content">
				<!-- 当前位置 -->
				<div class="page-head clearfix">
					<ol class="breadcrumb pull-left">
						<li><i class="fa fa-home"></i>主页</li>
						<li>设备管理</li>
						<li class="active">设备列表</li>
					</ol>
					<div class="pull-right breadcrumbtn"> </div>
				</div>
				<!-- 当前位置 -->
				<div class="wrapper" style="padding-top: 0; padding-left: 0;">
					<ul class="row" style="background-color: #fff;">
						<li class="col-xs-3  sblbs" style="border-right: 1px solid #eee;">
							<div class="zkdleft">
								<div class="search sblb">
									<input class="form-control">
									<a href="#"><i class="fa fa-search"></i></a>
								</div>

							</div>
							<h4 class="addtitle lxbot"> <i class="fa fa-ellipsis-v"></i>设备类型</h4>
							<div class="tree totrees">
								<ul>
									{volist name='level' id='item'}
									<li>
										<span onclick="list({$item.id})">{if isset($item.son)}<i
												class="fa fa-plus-square-o"></i>{/if}{$item.name}</span>
										{if isset($item.son)}
										{volist name="$item.son" id='item2'}
										<ul>
											<li>
												<span onclick="list({$item.id},{$item2.id})">{if isset($item2.son)}<i
														class="fa fa-plus-square-o"></i>{/if}{$item2.name}</span> <a
													href=""></a>
												{if isset($item2.son)}
												{volist name="$item2.son" id='item3'}
												<ul>
													<li>
														<span onclick="list({$item.id},{$item2.id},{$item3.id})">{if
															isset($item3.son)}<i
																class="fa fa-plus-square-o"></i>{/if}{$item3.name}</span>
														<a href=""></a>
														{if isset($item3.son)}
														<ul>
															{volist name="$item3.son" id='item4'}
															<li>
																<a href="#"
																	onclick="list({$item.id},{$item2.id},{$item3.id},{$item4.id})"><span>{$item4.name}</span>
																</a>
															</li>
															{/volist}
														</ul>
														{/if}
													</li>

												</ul>
												{/volist}
												{/if}
											</li>
										</ul>
										{/volist}
										{/if}
									</li>
									{/volist}

								</ul>
							</div>
						</li>
						<li class="col-xs-9 zkdright">

							<ul class="row zkdhead">
								<li class="col-xs-12">
									<header class="panel-heading head-border topbox">
										<div class="getint">
											<a style="display:none;" href="/equipment/manage/add"
												class="btn btn-success">新增</a>
											<a href="#" class="btn btn-danger">批量删除</a>
											<a href="#" class="btn btn-success" data-toggle="modal"
												data-target="#mymodal-data">生成二维码</a>
											<span class="tips">已选12项</span>
										</div>
										<div class="searchs">
											<form action="" method="">
												<input type="search" name="" required="" placeholder="请输入搜索内容"
													lang="zh-CN">
												<a href="#" class="btn btn-success">查询</a>
											</form>
										</div>
									</header>


								</li>
								<li class="col-xs-12">
									<div class="listall wxjl sblb">

										<ul style="width: 30%;" class="one_nav">
											<li class="header">
												<span>
													<input name="checkbox1" type="checkbox">
												</span>
												<span>设备编号</span>
												<span>设备名称</span>
											</li>
											<div id='box'></div>
										</ul>
										<ul style="width: 73%;" class="scroll">
											<li class="header">
												<span>设备型号</span>
												<span>设备类型</span>
												<span>总功率</span>
												<span>制造厂家</span>
												<span>存放地点</span>
												<span>负责人</span>
												<span>操作人</span>
												<span>更新时间</span>
												<span>启用时间</span>
												<span>备注</span>
											</li>
											<div id='box2'></div>
										</ul>
									</div>
								</li>
							</ul>
						</li>
						<div id='page'></div>
					</ul>
					<script>
						list();
						function list(a, b, c, d, page = 1) {
							var data = {
								page: page,
								a: a,
								b: b,
								c: c,
								d: d
							};
							$.ajax({
								url: '/equipment/manage/list',
								data: data,
								type: 'POST',
								async: false,
								success: function(res) {
									layui.use('laypage', function() {
										var laypage = layui.laypage;
										laypage.render({
											elem: 'page',
											count: res.total,
											limit: 1,
											curr:page,
											jump: function(obj, first) {
												if (!first) {
													list(a, b, c, d, obj.curr);
												}
											}
										});
									});
									let html = '';
									let html2 = '';
									$.each(res.data, function(index, item) {
										html += '<li><span><input name="checkbox1" type="checkbox"></span>';
										html += '<span>'+item.id+'</span>';
										html += '<span>'+item.name+'</span></li>';

										html2 += '<li><span>' + item.manage_type + '</span>';
										html2 += '<span>' + type(item.type_child_name) + '</span>';
										html2 += '<span>' + item.power + '</span>';
										html2 += '<span>' + item.make + '</span>';
										html2 += '<span>' + item.reservoircounty.name + '</span>';
										html2 += '<span>' + item.reservoirlist.user_name + '</span>';
										html2 += '<span>张某某</span>';
										html2 += '<span>' + totime(item.createtime) + '</span>';
										html2 += '<span>' + totime(item.createtime) + '</span>';
										html2 += '<span>' + item.remark + '</span></li>';
									});
									$('#box').empty();
									$('#box2').empty();
									$('#box').html(html);
									$('#box2').html(html2);
								}
							});
						}
						function type(nums) {
							if (nums == 1) {
								return '球机';
							}
							return '枪机';
						}

						function totime(nS) {
							return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
						}
					</script>
				</div>


			</div>
		</section>

		<div class="modal right fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
			aria-hidden="true">
			<div class="codebox">
				<section class="panel add">
					<header class="panel-heading head-border" style="background-color: #eee;">设备二维码</header>

					<div class="panel-body">
						<img src="/equipment/images/code.png">
					</div>

				</section>
				<div class="btn " style="width: 100%;padding-bottom:30px;">
					<a href="" class="btn btn-danger">关闭</a>
					<a href="" class="btn btn-success">打印</a>
				</div>
			</div>
		</div>

		<!-- 模态框 -->
		<style type="text/css">
			.codebox {
				width: 50%;
				margin: 10% auto;
				background-color: #fff;
				border-radius: 8px;
			}

			.codebox .panel-body {
				width: 100%;
				text-align: center;
			}
		</style>
		<!-- 模态框 -->


		<script src="/equipment/js/bootstrap.js"></script>
		<script src="/equipment/js/echarts.min.js"></script>
		<script src="/equipment/js/scripts.js"></script>


		<script type="text/javascript">
			$(function() {
				$(".btn").click(function() {
					$("#mymodal").modal("toggle");
				});
			});
		</script>
		<!-- 树形 -->
		<script type="text/javascript">
			$(function() {
				$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
				$('.tree li.parent_li > span').on('click', function(e) {
					var children = $(this).parent('li.parent_li').find(' > ul > li');
					if (children.is(":visible")) {
						children.hide('fast');
						$(this).attr('title', 'Expand this branch').find(' > i').addClass('fa-plus-square-o')
							.removeClass('fa-minus-square-o');
					} else {
						children.show('fast');
						$(this).attr('title', 'Collapse this branch').find(' > i').addClass('fa-minus-square-o')
							.removeClass('fa-plus-square-o');
					}
					e.stopPropagation();
				});
			});
		</script>
	</body>
</html>