<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<title>设备状态分布</title>
|
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
<script src="../../../layuiadmin/layui/layui.js"></script>
|
<script src="../../../layuiadmin/layui/layui.js"></script>
|
<script src="../../../layuiadmin/Scripts/json2.js"></script>
|
<script src="../../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../../../layuiadmin/Scripts/webConfig.js"></script>
|
<script src="../../../layuiadmin/layui/layui1.js"></script>
|
<script src="../../../layuiadmin/echarts.min.js"></script>
|
<script src="../../../layuiadmin/common.js"></script>
|
<script src="../../../layuiadmin/PubCustom.js"></script>
|
<link href="../../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
|
|
<style>
|
/*树状图点击高亮变色*/
|
.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
|
background: #aef0f7;
|
}
|
|
.cnt {
|
border: 1px solid #5FB878;
|
height: 50px;
|
border-radius: 5px;
|
/*background: -webkit-gradient(linear, 0% 0%, 0% 50%,from(#262525), to(#262525));*/ /*谷歌*/
|
}
|
|
.bottomright {
|
cursor: pointer; /*鼠标变成手指样式*/
|
transition: all 0.1s; /*所有属性变化在0.6秒内执行动画*/
|
}
|
|
.bottomright:hover {
|
transform: scale(1.3); /*鼠标放上之后元素变成1.4倍大小*/
|
}
|
|
.imgtitle {
|
width: 70%;
|
height: 50px;
|
text-align: center;
|
display: block;
|
font-size: 15px;
|
float: left;
|
line-height: 50px;
|
}
|
|
.cns {
|
border: 1px solid #5FB878;
|
height: auto;
|
border-radius: 5px;
|
}
|
|
.cns p {
|
font-size: 12px;
|
line-height: 18px;
|
margin: 0 5px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.check1 {
|
cursor: pointer; /*鼠标变成手指样式*/
|
-webkit-transition: border linear .1s,-webkit-box-shadow linear .5s;
|
border-color: rgba(0,148, 255,.75);
|
-webkit-box-shadow: 0 0 18px rgba(0,148,255);
|
}
|
|
.prs {
|
font-family: "微软雅黑";
|
font-weight: bold;
|
line-height: 30px;
|
margin: 0 0px 0px 10px;
|
float: left;
|
}
|
|
.layui-progress {
|
width: 45%;
|
float: left;
|
top: 6px;
|
}
|
|
.tr1-1, .tr1-2, .tr1-3, .tr1-4 {
|
margin-left: 3%;
|
margin-top: 4%;
|
height: 310px;
|
border: 1px solid rgb(0 0 0 / 10%);
|
width: 95%;
|
}
|
|
.btnM {
|
width: 30%;
|
height: 50px;
|
line-height: 50px;
|
float: left;
|
text-align: right;
|
}
|
|
.layui-icon {
|
font-size: 20px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-col-md12">
|
<div class="layui-card" style="padding: 1px">
|
<div class="layui-card-body" style="padding: 1px;">
|
<form class="layui-form" action="" lay-filter="component-form-group">
|
<div class="layui-row">
|
<!-- 模具仓库父类选择 -->
|
<div class="layui-col-xs2 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<div id="TreeTable" class="demo-tree demo-tree-box"
|
style="height: 500px; overflow: scroll;"></div>
|
</div>
|
<!-- 卡片显示面板 -->
|
<div class="layui-col-xs10 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<div id="btomleft" style="height:500px;display:block;overflow-y:auto;">
|
</div>
|
</div>
|
</div>
|
<div class="layui-row">
|
<div class="layui-tab">
|
<ul class="layui-tab-title">
|
<li class="layui-this">履历</li>
|
</ul>
|
<div class="layui-tab-content">
|
<div class="layui-tab-item layui-show">
|
<table class="" id="mainTable" lay-filter="mainTable"></table>
|
</div>
|
|
</div>
|
</div>
|
<!--<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-1" id="mychart11"> </div>
|
</div>
|
<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-2" id="mychart22"> </div>
|
</div>
|
<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-3" id="mychart3"> </div>
|
</div>
|
<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-4" id="mychart4"> </div>
|
</div>-->
|
<!-- 子表查询 -->
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/html" id="toolbarDemo">
|
<div class="layui-btn-container my-btn-container">
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="get_Refresh"><i class="layui-icon layui-icon-refresh-3"></i>刷新</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="get_Exit"><i class="layui-icon layui-icon-logout"></i>退出</button>
|
<!--<button type="button" class="layui-btn layui-btn-sm" lay-event="get_Search"><i class="layui-icon layui-icon-search"></i>列设置</button>-->
|
</div>
|
</script>
|
</body>
|
|
</html>
|
<script>
|
var selectedMouldId = -1
|
var params = get_UrlVars();
|
layui.config({
|
base: '../../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index', //主入口模块
|
}).use(['index', 'form', 'table', 'element', 'laypage', 'laydate', 'tree', 'soulTable'], function () {
|
//#region 公用变量
|
var $ = layui.$
|
, admin = layui.admin
|
, layer = layui.layer
|
, table = layui.table
|
, form = layui.form
|
, element = layui.element
|
, laypage = layui.laypage
|
, laydate = layui.laydate
|
, tree = layui.tree
|
, soulTable = layui.soulTable
|
|
var titleData = ["HInterID", "HBillType"];
|
//#endregion
|
|
//#region 进入页面即加载
|
|
//初始化界面
|
set_ClearBill();
|
|
//#endregion
|
|
//#region 触发事件：包括form.on(){}格式的所有点击事件、选择事件等
|
|
//#endregion
|
|
//#region 本页面被调用的所有方法
|
function set_ClearBill() {
|
|
//初始化表格
|
set_InitGrid();
|
|
get_Display_Tree()
|
|
get_DisplayResume(selectedMouldId)
|
}
|
|
//查询模具清单 生成卡片
|
function Check(HWHID) {
|
wktag = 0;
|
debugger
|
$("#btomleft").html("");
|
$.ajax({
|
url: GetWEBURL() + '/Web/Get_Sc_MouldStatusAnalysisList',
|
type: "GET",
|
data: { "sWhere": " and HWHID = " + HWHID , "user": sessionStorage["HUserName"], "Organization": sessionStorage["Organization"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
var LoadData1 = data.data;
|
if (LoadData1.length > 0) //工单列表数据
|
{
|
|
for (var i = 0; i < LoadData1.length; i++) {
|
var html1 = '';
|
html1 += '<div class="layui-col-sm12 layui-col-md2" style="margin: 6px;width: 180px;">';
|
html1 += '<div class="cns" data-index=' + (i + 1) + ' id="bs' + (i + 1) + '">';
|
html1 += '<dl>';
|
html1 += '<dd class="tcenter">';
|
html1 += '<h1 style="display:none;"><span>模具ID：</span><span id="md' + (i + 1) + '">' + LoadData1[i].HInterID + '</span></h1>';
|
//html1 += '<h1 style="display:none;"><span>生产订单子ID：</span><span id="ds' + (i + 1) + '">' + LoadData1[i].生产订单子内码 + '</span></h1>';
|
//html1 += '<h1 style="display:none;"><span>产线ID：</span><span id="cs' + (i + 1) + '">' + LoadData1[i].HSourceID + '</span></h1>';
|
html1 += '<h1 style="display:none;"><span>仓库ID：</span><span id="wh' + (i + 1) + '">' + LoadData1[i].HWHID + '</span></h1>';
|
|
html1 += '<p><span>模具编号：</span><span id="mdno' + (i + 1) + '">' + LoadData1[i].模具编号 + '</span></p>';
|
html1 += '<p><span>模具名称：</span><span id="mdname' + (i + 1) + '">' + LoadData1[i].模具名称 + '</span></p>';
|
html1 += '<p><span>仓库：</span><span id="whname' + (i + 1) + '">' + LoadData1[i].仓库 + '</span></p>';
|
html1 += '<p><span>使用状态：</span><span id="ustatus' + (i + 1) + '">' + LoadData1[i].使用状态 + '</span></p>';
|
html1 += '<p><span>设计寿命：</span><span id="dlife' + (i + 1) + '">' + LoadData1[i].设计寿命 + '</span></p>';
|
html1 += '<p><span>使用寿命：</span><span id="ulife' + (i + 1) + '">' + LoadData1[i].使用寿命 + '</span></p>';
|
html1 += '<p><span>剩余寿命：</span><span id="rlife' + (i + 1) + '">' + (LoadData1[i].设计寿命 - LoadData1[i].使用寿命) + '</span></p>';
|
switch (LoadData1[i].模具状态) {
|
case "在库":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border6"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
case "故障维修":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border4"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
case "领出":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border3"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
case "保养":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border2"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
case "维修中":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border5"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
case "故障":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border1"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
case "维修完成":
|
html1 += '<p><span>当前状态：</span><span class="gj_icon color_border7"></span><span>' + LoadData1[i].模具状态 + '</span></p>';
|
break;
|
default:
|
html1 += '<p><span>当前状态：</span><span></span><span>' + LoadData1[i].模具状态 +'</span></p>';
|
break;
|
|
}
|
html1 += '</dd>';
|
html1 += '</dl>';
|
html1 += '</div>';
|
html1 += '</div>';
|
$("#btomleft").append(html1);
|
}
|
}
|
},
|
error: function (err) {
|
layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
});
|
}
|
|
function set_InitGrid() {
|
optionResume = {
|
elem: '#mainTable'
|
, toolbar: '#toolbarDemo'
|
, height: 'full-130'
|
, page: true
|
, totalRow: true
|
, cellMinWidth: 90
|
, limit: 50
|
, limits: [50, 500, 5000, 20000]
|
, cellMinWidth: 100
|
, done: function (res, curr, count) {
|
soulTable.render(this);
|
}
|
}
|
}
|
|
table.on('toolbar(mainTable)', function (obj) {
|
switch (obj.event) {
|
case "get_Refresh": set_Refresh(); break;
|
case "get_Exit": set_Exit(); break;
|
}
|
})
|
|
//#region 点击行选中高亮
|
table.on('row(mainTable)', function (obj) {
|
//选中行改变颜色
|
var flag = !obj.tr.find(':checkbox:first').prop('checked');
|
obj.tr.find(':checkbox').prop('checked', flag);
|
if (flag) {
|
obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked'); //设置复选框选中样式
|
$(obj.tr.selector).attr({ "style": "background:#ceedfa;color:black" });//改变当前tr背景颜色和字体颜色
|
} else {
|
obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');//取消复选框选中样式
|
$(obj.tr.selector).attr({ "style": "background:" });//取消当前tr颜色
|
}
|
//mainTable 为表格ID 注意此处如果ID不正确将导致你在监听复选框时获取不到你选择的数据，前面的只是添加或删除选中未选中样式以及设置背景色，字体颜色
|
layui.each(table.cache.mainTable, function (i, l) {
|
if (obj.tr.index() == l.LAY_TABLE_INDEX) {
|
l.LAY_CHECKED = flag;
|
}
|
});
|
})
|
//#endregion
|
|
|
//#region 查询模具履历
|
function get_DisplayResume(HInterID) {
|
var ajaxLoad = layer.load();
|
$.ajax({
|
url: GetWEBURL() + '/Gy_MouldFileMain/GetMouldResumeList',
|
type: "GET",
|
data: { "HInterID": HInterID, "user": sessionStorage["HUserName"] },
|
success: function (data1) {
|
if (data1.code == 1) {
|
var data = [];
|
var col = [];
|
var totalArray = ["数量", "关联数量", "未关联数量", "打印条码数量", "未打印条码数量", "实收数量", "金额", "计划金额"];
|
//给空的数组赋值
|
for (var key in data1.list) {
|
data.push({ "id": data1.list[key].ColmCols, "name": data1.list[key].ColmCols, "Type": data1.list[key].ColmType });
|
}
|
//在列表左边添加勾选框
|
col.push({ type: 'checkbox', fixed: 'left', totalRowText: '合计' });
|
for (var i = 0; i < data.length; i++) {
|
// if (data[i].name == 'HInterID' || data[i].name == 'HBillType' || data[i].name == 'hmainid') {
|
if ($.inArray(data[i].name, titleData) > -1) {
|
col.push({ field: data[i].id, title: data[i].name, align: 'center', hide: true }); //隐藏id列
|
}
|
else if ($.inArray(data[i].name, totalArray) > -1) { //添加计算列
|
col.push({ field: data[i].id, title: data[i].name, align: 'center', sort: true, totalRow: true, width: 120 });
|
} else {
|
switch (data[i].Type) {
|
//int
|
case 'DateTime':
|
col.push({ field: data[i].id, title: data[i].name, align: 'center', sort: true, templet: "<div>{{d." + data[i].name + " == null ?'':layui.util.toDateString(d." + data[i].name + ", 'yyyy-MM-dd HH:mm:ss')}}</div>", width: 200 });
|
break;
|
default:
|
col.push({ field: data[i].id, title: data[i].name, align: 'center', sort: true, width: 200 });
|
}
|
}
|
}
|
optionResume.cols = [col];
|
optionResume.data = data1.data;
|
|
table.render(optionResume);
|
layer.close(ajaxLoad);
|
//layer.alert("查询成功", { icon: 1 });
|
} else {
|
layer.close(ajaxLoad);
|
layer.alert(data1.code + data1.Message, { icon: 5 });
|
}
|
}, error: function () {
|
layer.close(ajaxLoad);
|
layer.alert("接口请求失败!", { icon: 5 });
|
}
|
});
|
|
}
|
|
function get_Display_Tree() {
|
//var sWhere = " and 仓库类型=N'模具仓库'";
|
let sWhere = ""
|
var ajaxLoad = layer.load();
|
$.ajax({
|
url: GetWEBURL() + '/Gy_Warehouse/listTree',
|
data: { "sWhere": sWhere, "user": sessionStorage["HUserName"], "Organization": sessionStorage["Organization"] },
|
type: "GET",
|
success: function (data1) {
|
if (data1.count == 1) {
|
layer.close(ajaxLoad);
|
var data = JSON.parse(data1.data);
|
MenuMain(data);
|
} else {
|
layer.close(ajaxLoad);
|
layer.alert(data1.code + data1.Message, { icon: 5 });
|
}
|
}, error: function () {
|
layer.close(ajaxLoad);
|
layer.alert("接口请求失败!", { icon: 5 });
|
}
|
});
|
}
|
|
//遍历生成主菜单
|
function MenuMain(data) {
|
var liStr = '[';
|
//遍历生成主菜单
|
for (var i = 0; i < data.length; i++) {
|
|
// 判断是否存在子菜单
|
if (data[i].children != null && data[i].children.length > 0) {
|
liStr += '{"title": "' + data[i].Number + "-" + data[i].Title + '", "id": "' + data[i].Id + '","spread":true, "children":[ ';
|
// 遍历获取子菜单
|
for (var k = 0; k < data[i].children.length; k++) {
|
liStr += getChildMenu(data[i].children[k], 0);
|
}
|
liStr = liStr.substring(0, liStr.length - 1);
|
liStr += ']},';
|
} else {
|
liStr += '{"title": "' + data[i].Number + "-" + data[i].Title + '", "id": "' + data[i].Id + '"},';
|
}
|
};
|
liStr = liStr.substring(0, liStr.length - 1);
|
liStr += "]";
|
var treeTable = JSON.parse(liStr);
|
tree.render({
|
elem: '#TreeTable' //默认是点击节点可进行收缩
|
, data: treeTable
|
, click: function (obj) {
|
//高亮变色
|
$(".layui-tree-set").removeClass('layui-tree-set-active');
|
obj.elem.addClass('layui-tree-set-active');
|
|
var data = obj.data; //获取当前点击的节点数据
|
HWHID = 0;
|
if (data.id == "0") {
|
|
} else {
|
HWHID = data.id;
|
}
|
Check(HWHID); // 查询仓库中的清单
|
}
|
});
|
}
|
|
// 递归生成子菜单
|
function getChildMenu(subMenu, num) {
|
num++;
|
var subStr = '';
|
if (subMenu.children != null && subMenu.children.length > 0) {
|
subStr += '{"title": "' + subMenu.Number + "-" + subMenu.Title + '", "id": "' + subMenu.Id + '", "children":[';
|
for (var j = 0; j < subMenu.children.length; j++) {
|
subStr += getChildMenu(subMenu.children[j], num);
|
if (j + 1 == subMenu.children.length) {
|
subStr = subStr.substring(0, subStr.length - 1);
|
}
|
}
|
subStr += ']},';
|
} else {
|
subStr += '{"title": "' + subMenu.Number + "-" + subMenu.Title + '", "id": "' + subMenu.Id + '"},';
|
}
|
return subStr;
|
}
|
//#endregion
|
|
function set_Exit() {
|
layer.confirm('您确定要退出吗？', { icon: 3, title: '提示' }, function (index) {
|
let exitMode = isEmpty(params[params['openType']]) === false ? 1 : 2;
|
debugger
|
Pub_Close(exitMode);
|
});
|
}
|
|
function set_Refresh() {
|
get_DisplayResume(selectedMouldId)
|
}
|
|
$("#btomleft").on("click", function (e) {
|
|
let tar = e.target
|
let ct = $(tar).closest(".cns ")
|
if (ct.length > 0) {
|
let i = $(ct[0]).data('index');
|
|
selectedMouldId = $("#md" + i)[0].innerText
|
|
// 添加样式
|
$('.cns').removeClass('check1'); //删除不同父级clss样式相同的所有元素
|
$("#bs" + i + "").addClass('check1'); // 添加当前元素的样式
|
|
get_DisplayResume(selectedMouldId);
|
}
|
})
|
|
|
|
// 以上是layui模块
|
});
|
</script>
|
