<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<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/layui1.js"></script>
|
<script src="../../layuiadmin/Scripts/json2.js"></script>
|
<script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../../layuiadmin/PubCustom.js"></script>
|
<script src="../../layuiadmin/zgqCustom/zgqCustom.js"></script>
|
<script src="../../layuiadmin/HideButton.js"></script>
|
<script src="../../layuiadmin/soulTable.slim.js"></script>
|
<script src="../../layuiadmin/PageTitle.js"></script>
|
<script src="../../layuiadmin/echarts.min.js"></script>
|
<script src="../../layuiadmin/dayjs.min.js"></script>
|
<script src="../../layuiadmin/Scripts/webConfig.js"></script>
|
|
<style type="text/css">
|
#deviceRunningInfo {
|
background: #ffffff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
padding: 22px 20px;
|
margin: 15px 0;
|
border: 1px solid #f0f0f0;
|
}
|
|
#deviceRunningInfo .layui-form-label {
|
text-align: left;
|
font-weight: 500;
|
color: #555;
|
padding-left: 0;
|
width: auto;
|
}
|
|
#deviceRunningInfo .layui-form-static {
|
border: 1px solid #e8e8e8;
|
border-radius: 6px;
|
padding: 0 12px;
|
line-height: 38px;
|
background-color: #fafbfc;
|
color: #333;
|
font-size: 14px;
|
transition: all 0.2s;
|
}
|
|
#deviceRunningInfo .layui-form-static:hover {
|
background-color: #f5f7fa;
|
border-color: #dcdfe6;
|
}
|
|
#deviceRunningInfo .layui-form-item {
|
margin-bottom: 18px;
|
}
|
|
.zy-sub-title {
|
font-size: large;
|
padding: 20px;
|
font-weight: bold;
|
}
|
|
#EquipRunningStatusCharts {
|
height: 230px;
|
}
|
</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-collapse">
|
<div class="layui-colla-item">
|
<div class="layui-form-item">
|
<div class="layui-inline">
|
<label class="layui-form-label">日期范围</label>
|
<div class="layui-inline" id="ID-laydate-range">
|
<div class="layui-input-inline">
|
<input type="text" autocomplete="off" id="HBeginDate"
|
class="layui-input" placeholder="开始日期">
|
</div>
|
<div class="layui-form-mid">-</div>
|
<div class="layui-input-inline">
|
<input type="text" autocomplete="off" id="HEndDate" class="layui-input"
|
placeholder="结束日期">
|
</div>
|
</div>
|
<button class="layui-btn layuiadmin-btn-order" type="button" lay-submit=""
|
lay-filter="btnSearch" id="btnSearch">
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
</button>
|
<button class="layui-btn layuiadmin-btn-order" type="button" lay-submit=""
|
lay-filter="btnExit" id="btnExit">
|
退出
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 设备运行信息 -->
|
|
<div class="layui-form-item" id="deviceRunningInfo">
|
<label class="zy-sub-title" style="padding: 0;">设备运行信息<label
|
id="deviceRunningDate"></label></label>
|
<div class="layui-row" style="padding-top: 20px;">
|
<!-- 占比 2/12 (约1/6)，用于放标签 -->
|
<div class="layui-col-xs1 layui-col-md1">
|
<label class="layui-form-label"
|
style="text-align: left; padding-left: 0;">设备名称</label>
|
</div>
|
<!-- 占比 4/12 (约1/3)，用于放值 -->
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="layui-form-static" id="HEquipName"></div>
|
</div>
|
|
<!-- 占位空列，用于隔开左右两组数据 -->
|
<div class="layui-col-xs1 layui-col-md1"> </div>
|
|
<!-- 第二列标签：所属区域 -->
|
<div class="layui-col-xs1 layui-col-md1">
|
<label class="layui-form-label"
|
style="text-align: left; padding-left: 0;">所属区域</label>
|
</div>
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="layui-form-static" id="HDeptName"></div>
|
</div>
|
</div>
|
<div class="layui-row">
|
<!-- 占比 2/12 (约1/6)，用于放标签 -->
|
<div class="layui-col-xs1 layui-col-md1">
|
<label class="layui-form-label"
|
style="text-align: left; padding-left: 0;">设备状态</label>
|
</div>
|
<!-- 占比 4/12 (约1/3)，用于放值 -->
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="layui-form-static" id="HEquipStatus"></div>
|
</div>
|
|
<!-- 占位空列，用于隔开左右两组数据 -->
|
<div class="layui-col-xs1 layui-col-md1"> </div>
|
|
<!-- 第二列标签：所属区域 -->
|
<div class="layui-col-xs1 layui-col-md1">
|
<label class="layui-form-label"
|
style="text-align: left; padding-left: 0;">日期</label>
|
</div>
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="layui-form-static" id="HDate"></div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 设备运行信息(时序) echarts 实现-->
|
<div>
|
<label class="zy-sub-title">设备运行时序</label>
|
<div class="layui-row">
|
<div class="layui-col-xs12 layui-inline">
|
<div id="EquipRunningStatusCharts"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 安灯(警报)记录 maintable -->
|
<div>
|
<label class="zy-sub-title">最近10条警报记录</label>
|
<table class="" id="mainTable" lay-filter="mainTable"></table>
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index', //主入口模块
|
}).use(['index', 'form', 'table', 'element', 'laypage', 'laydate', 'tree', 'util'], 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
|
, util = layui.util;
|
|
//查询条件
|
var sWhere = "";
|
var option = [];
|
var chartsOption = {}
|
var params = getUrlVars()
|
var HEquipID = params[params[0]]
|
//#endregion
|
|
//#region 进入页面即加载
|
|
//初始化界面
|
set_ClearBill();
|
|
//#endregion
|
|
//#region 触发事件：包括form.on(){}格式的所有点击事件、选择事件等
|
form.on("submit(btnSearch)", function (data) {
|
get_Display();
|
})
|
|
//退出
|
form.on('submit(btnExit)', function (data) {
|
if (HEquipID == undefined) {
|
//关闭页签
|
Pub_Close(2);
|
}
|
else {
|
//关闭页签
|
Pub_Close(1);
|
}
|
});
|
|
|
//#endregion
|
|
|
// #region 本页面调用的所有方法
|
function set_ClearBill() {
|
// 初始化日期选择器
|
initDateSelector()
|
|
// 初始化echarts
|
set_InitCharts()
|
|
//初始化表格
|
set_InitGrid();
|
|
// 获取数据
|
get_Display();
|
}
|
|
function initDateSelector() {
|
// 默认日期为今天
|
var yesterdaySameTime = new Date();
|
yesterdaySameTime.setDate(yesterdaySameTime.getDate() - 1);
|
$("#HBeginDate").val(util.toDateString(yesterdaySameTime, 'yyyy-MM-dd HH:mm:ss'))
|
$("#HEndDate").val(util.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss'))
|
// 初始化日期范围选择
|
|
laydate.render({
|
elem: '#ID-laydate-range',
|
range: ['#HBeginDate', '#HEndDate'],
|
type: 'datetime',
|
});
|
}
|
|
function set_InitCharts() {
|
var EquipRunningStatusCharts = echarts.init(document.getElementById("EquipRunningStatusCharts"))
|
get_LineChart(EquipRunningStatusCharts, []);//折线
|
}
|
|
function set_InitGrid() {
|
option = {
|
elem: '#mainTable'
|
// , toolbar: '#toolbarDemo'
|
, height: 'full-50'
|
, page: true
|
, cellMinWidth: 90
|
, totalRow: true
|
, limit: 50
|
, limits: [50, 500, 5000, 20000]
|
, done: function (res, curr, count) {
|
// soulTable.render(this);
|
}
|
, cols: [[
|
{ type: 'checkbox', fixed: 'left', totalRowText: '合计行' }
|
, { field: '警报代码', title: '警报代码' }
|
, { field: '持续时间', title: '持续时间' }
|
, { field: '原因', title: '原因' }
|
, {
|
field: '时间', title: '时间', templet: function (d) {
|
return layui.util.toDateString(d.时间, 'yyyy-MM-dd HH:mm:ss');
|
}
|
}
|
]],
|
data: []
|
};
|
|
table.render(option)
|
}
|
|
function get_LineChart(mychart22, chartData1) {
|
var baseTime = $("HBeginDate").val()
|
var endTime = $("HEndDate").val()
|
var startTime = dayjs(baseTime).valueOf();
|
var endTime = dayjs(endTime).valueOf();
|
var yAxisData = [$("#HDeptName").val()]
|
if (chartData1.length == 0) {
|
return
|
}
|
var categories = [chartData1[0]["生产资源"]];
|
var types = [
|
{ name: '正常运行', color: '#73cc3f' },
|
{ name: '离线', color: '#9b9a9b' },
|
{ name: '待机', color: '#f2a439' },
|
];
|
|
var getColor = function (name) {
|
for (var i = 0; i < types.length; i++) {
|
if (name == types[i].name) {
|
return types[i].color
|
}
|
}
|
}
|
|
var chartDataTimeline = []
|
for (var cursor = 0; cursor < chartData1.length; cursor++) {
|
chartDataTimeline.push({
|
"name": chartData1[cursor]["HResult"],
|
"value": [
|
0,
|
dayjs(chartData1[cursor]["时间"]).valueOf(),
|
dayjs(chartData1[cursor]["时间"]).add(5, 'm').valueOf(),
|
300000
|
],
|
"itemStyle": {
|
"normal": {
|
"color": getColor(chartData1[cursor]["HResult"])
|
}
|
}
|
})
|
}
|
var chartsOption = {
|
tooltip: {
|
formatter: function (params) {
|
return params.marker + params.name;
|
}
|
},
|
grid: {
|
top: 0,
|
bottom: 0,
|
left: 20, // 给Y轴文字留一点位置
|
right: 20,
|
containLabel: true
|
},
|
xAxis: {
|
type: 'time',
|
min: startTime, // 开始时间戳
|
max: endTime, // 结束时间戳
|
minInterval: 7200000, // 间隔两小时
|
scale: true,
|
axisLabel: {
|
formatter: function (val) {
|
return echarts.format.formatTime('hh:mm', val);
|
}
|
},
|
axisLine: {
|
show: false // 隐藏 x 轴轴线
|
}
|
},
|
yAxis: {
|
data: categories,
|
axisLine: {
|
show: false // 隐藏 y 轴轴线
|
},
|
name: "",
|
axisLabel: { show: false }, // 隐藏Y轴标签
|
},
|
series: [
|
{
|
type: 'custom',
|
renderItem: renderItem,
|
itemStyle: {
|
opacity: 0.8
|
},
|
encode: {
|
x: [1, 2],
|
y: 0
|
},
|
data: chartDataTimeline
|
}
|
]
|
}
|
|
|
// 如果有数据，更新option的内容
|
if (chartData1 && chartData1.length > 0) {
|
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
chartsOption.title.text = '暂无数据';
|
}
|
|
// 更新图表
|
mychart22.setOption(chartsOption);
|
}
|
|
|
function get_Display() {
|
var HBeginDate = $("#HBeginDate").val()
|
var HEndDate = $("#HEndDate").val()
|
sWhere = get_sWhere()
|
var sWhere2 = ""
|
|
if (HBeginDate && HEndDate) {
|
sWhere2 += " and StartTime BETWEEN CAST('" + HBeginDate + "' AS DATETIME)" +
|
" AND DATEADD(MILLISECOND, -3, DATEADD(DAY, 1, CAST('" + HEndDate + "' AS DATETIME))) "
|
}
|
// 获取设备档案
|
$.ajax({
|
url: GetWEBURL() + '/Gy_EquipFileMain/GetList',
|
type: "GET",
|
data: { "user": sessionStorage["HUserName"], sWhere: " and hmainid = " + HEquipID },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
if (data.count == 1) {
|
$("#HEquipName").text(data.data[0]["设备名称"])
|
$("#HDeptName").text(data.data[0]["使用部门"])
|
$("#HEquipStatus").text(data.data[0]["当前状态"])
|
$("#HDate").text(util.toDateString(new Date(), 'MM月dd日'))
|
}
|
else {
|
layer.alert(data.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
},
|
error: function (err) {
|
layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
});
|
|
// 获取设备运行时序信息
|
$.ajax({
|
url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList2_DAQ',
|
type: "GET",
|
data: { "HEquipID": HEquipID, HDeptID: 0, HBeginDate: util.toDateString(HBeginDate, 'yyyy-MM-dd'), HEndDate: util.toDateString(HEndDate, 'yyyy-MM-dd'), "user": sessionStorage["HUserName"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
if (data.count == 1) {
|
var dataInstance = []
|
for (var key in data.data) {
|
$.merge(dataInstance, data.data[key])
|
}
|
var EquipRunningStatusCharts = echarts.init(document.getElementById("EquipRunningStatusCharts"))
|
get_LineChart(EquipRunningStatusCharts, dataInstance);//折线
|
} else {
|
layer.alert(data.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
|
},
|
error: function (err) {
|
layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
});
|
|
// 获取最近10条安灯(警报记录)
|
$.ajax({
|
url: GetWEBURL() + '/Sc_MESTransFerWorkBill/Get_TransFerBillListByHEquipID',
|
type: "GET",
|
data: { "HEquipID": HEquipID, sWhere: sWhere },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
|
var LoadData1 = data.data.OA_ErrMsgBackBillMain;
|
if (data.code == 1) //工单列表数据
|
{
|
option.data = LoadData1;
|
table.render(option)
|
} else {
|
layer.alert(data.msg, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
},
|
error: function (err) {
|
layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
});
|
}
|
|
function get_sWhere() {
|
var sWhereStr = ""
|
var HBeginDate = $("#HBeginDate").val()
|
var HEndDate = $("#HEndDate").val()
|
|
if (HBeginDate && HEndDate) {
|
sWhereStr += " and a.HDate BETWEEN CAST('" + HBeginDate + "' AS DATETIME)" +
|
" AND DATEADD(MILLISECOND, -3, DATEADD(DAY, 1, CAST('" + HEndDate + "' AS DATETIME))) "
|
}
|
return sWhereStr
|
}
|
|
// #endregion
|
|
function getUrlVars() {
|
var vars = [], hash;
|
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
for (var i = 0; i < hashes.length; i++) {
|
hash = hashes[i].split('=');
|
vars.push(hash[0]);
|
vars[hash[0]] = hash[1];
|
}
|
return vars;
|
}
|
//#endregion
|
|
})
|
|
function renderItem(params, api) {
|
var categoryIndex = api.value(0);
|
var start = api.coord([api.value(1), categoryIndex]);
|
var end = api.coord([api.value(2), categoryIndex]);
|
var height = api.size([0, 1])[1] * 0.6;
|
var rectShape = echarts.graphic.clipRectByRect(
|
{
|
x: start[0],
|
y: start[1] - height / 2,
|
width: end[0] - start[0],
|
height: height
|
},
|
{
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
}
|
);
|
return (
|
rectShape && {
|
type: 'rect',
|
transition: ['shape'],
|
shape: rectShape,
|
style: api.style()
|
}
|
);
|
}
|
</script>
|
</body>
|
|
|
|
</html>
|
