<!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/Scripts/json2.js"></script>
|
<script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../../layuiadmin/layui/layui1.js"></script>
|
<script src="../../layuiadmin/echarts.min.js"></script>
|
<link href="../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
|
<script src="../../layuiadmin/Scripts/webConfig.js"></script>
|
<style>
|
/* 全局基础样式 */
|
html, body {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
/* 树状图选中高亮 */
|
.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
|
background: #aef0f7;
|
}
|
/* 在原有<style>标签内修改/新增以下样式 */
|
/* 设备卡片样式 - 调整高度+溢出处理 */
|
.cns {
|
border: 1px solid #5FB878;
|
height: 220px; /* 原130px → 调整为220px，容纳图片+文字 */
|
border-radius: 5px;
|
width: 100%;
|
box-sizing: border-box;
|
cursor: pointer;
|
padding: 5px; /* 增加内边距，避免内容贴边 */
|
overflow: hidden; /* 防止极端情况溢出 */
|
}
|
|
.cns p {
|
font-size: 12px;
|
line-height: 18px;
|
margin: 0 5px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
/* 新增：图片容器样式，居中显示图片 */
|
.img-container {
|
width: 100%; /* 卡片宽度180px → 图片160px，居中 */
|
text-align: center;
|
margin: 5px 0; /* 上下间距，分隔文字和图片 */
|
}
|
|
/* 设备卡片选中样式 */
|
.check1 {
|
border-color: rgba(0, 148, 255, .75);
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-col-md12">
|
<div class="layui-card" style="padding: 0; height: 100%;">
|
<div class="layui-card-body" style="padding: 0; height: 100%;">
|
<form class="layui-form" action="" lay-filter="component-form-group">
|
<div class="layui-row" style="width: 100%; height: 100%;">
|
<!-- 左侧树状图：layui-col-xs2 改为 layui-col-lg2（适配大屏），高度100%，移除inline -->
|
<div class="layui-col-lg2" style="border: solid 1.5px #e0d6d64d; height: 100%; float: left;">
|
<div id="TreeTable" class="demo-tree demo-tree-box" style="height: 100%; width: 100%; overflow: auto;"></div>
|
</div>
|
<!-- 右侧设备列表：layui-col-xs10 改为 layui-col-lg10，高度100%，移除inline -->
|
<div class="layui-col-lg10" style="border: solid 1.5px #e0d6d64d; height: 100%; float: left;">
|
<div id="btomleft" style="height: 100%; width: 100%; display:block;overflow-y:auto;"></div>
|
</div>
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
</html>
|
<script>
|
var wktag = 0;
|
var HEquipID = 0;//设备id
|
var HEquipNumber = "";//设备编码
|
var HEquipName = "";//设备名称
|
var HSourceID = "";//产线id
|
var HDeptID = "";
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index', //主入口模块
|
}).use(['index', 'form', 'table', 'element', 'laypage', 'laydate', 'tree'], 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
|
//#endregion
|
|
//#region 进入页面即加载
|
|
//初始化界面
|
set_ClearBill();
|
|
//#endregion
|
|
//#region 触发事件：包括form.on(){}格式的所有点击事件、选择事件等
|
|
|
|
|
//#endregion
|
|
|
//#region 本页面被调用的所有方法
|
|
//#region 初始化界面
|
function set_ClearBill() {
|
//查询
|
get_Display_Tree();
|
}
|
//#endregion
|
|
//查询部门设备
|
function Check(HDeptID) {
|
wktag = 0;
|
$("#btomleft").html("");
|
$.ajax({
|
url: GetWEBURL() + '/Sc_HEquipStateDistribution/Get_HEquipStateList',
|
type: "GET",
|
data: { "HDeptID": HDeptID, "user": sessionStorage["HUserName"], "OrganizationID": sessionStorage["OrganizationID"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
|
var LoadData1 = data.data.h_p_sc_HDeptEquipList;
|
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" id="bs' + (i + 1) + '" onclick="CheckBtom(this,' + (i + 1) + ')">';
|
html1 += '<dl>';
|
html1 += '<dd class="tcenter">';
|
html1 += '<h1 style="display:none;"><span>设备ID：</span><span id="sb' + (i + 1) + '">' + LoadData1[i].HEquipID + '</span></h1>';
|
html1 += '<p><span>设备编码：</span><span id="sbbm' + (i + 1) + '">' + LoadData1[i].设备编码 + '</span></p>';
|
html1 += '<p><span>设备名称：</span><span id="sbmc' + (i + 1) + '">' + LoadData1[i].设备名称 + '</span></p>';
|
html1 += '<p><span>运行时长：</span><span id="cxmc' + (i + 1) + '">' + LoadData1[i].运行时间 + '</span></p>';
|
html1 += '<p><span>停机时长：</span><span id="gd' + (i + 1) + '">' + LoadData1[i].停机时间 + '</span></p>';
|
html1 += '<p><span>关机时长：</span><span id="ddqty' + (i + 1) + '">' + LoadData1[i].关机时间 + '</span></p>';
|
switch (LoadData1[i].当前状态) {
|
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_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_border1"></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_border3"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
|
break;
|
default:
|
}
|
html1 += '<img src="../../layuiadmin/images/ZSJ.png" style="width:160px; height:80px; object-fit:contain;" alt="注塑机图片">';
|
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 get_Display_Tree() {
|
var sWhere = " and HWorkShopFlag =1 and HUSEORGID=" + sessionStorage["OrganizationID"];
|
var ajaxLoad = layer.load();
|
$.ajax({
|
url: GetWEBURL() + '/Gy_Department/Gy_DepartmentTreeList',
|
data: { "sWhere": sWhere },
|
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].id + "-" + 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].id + "-" + 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; //获取当前点击的节点数据
|
HDeptID = 0;
|
if (data.id == "0") {
|
|
} else {
|
HDeptID = data.id;
|
}
|
Check(HDeptID);
|
}
|
});
|
}
|
|
// 递归生成子菜单
|
function getChildMenu(subMenu, num) {
|
num++;
|
var subStr = '';
|
if (subMenu.children != null && subMenu.children.length > 0) {
|
subStr += '{"title": "' + subMenu.id + "-" + 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.id + "-" + subMenu.title + '", "id": "' + subMenu.id + '"},';
|
}
|
return subStr;
|
}
|
|
});
|
//#endregion
|
|
//工单列表选中
|
function CheckBtom(obj, i) {
|
HEquipID = $("#sb" + i + "").html(); //设备id
|
HEquipNumber = $("#sbbm" + i + "").html(); //设备编码
|
HEquipName = $("#sbmc" + i + "").html(); //设备名称
|
|
$('.cns').removeClass('check1'); //删除不同父级clss样式相同的所有元素
|
$("#bs" + i + "").addClass('check1'); // 添加当前元素的样式
|
if (HEquipID != "" && HEquipID != null) {
|
wktag = 1;
|
}
|
|
/* 点击 设备 开启设备详情弹窗，设备状态详情页面
|
*详情页面：日期过滤、设备运行分析、警报（可以先取值为最近的安灯管理）取值用 设备运行状态表 Sb_EquipRunningStatus(设备当前状态效率分析)
|
*/
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '设备详情',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: './DAQ_EvidenceEquipmentCockpitDetail.html?HEquipID=' + HEquipID,
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
|
},
|
});
|
}
|
|
|
</script>
|
