<!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/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>
|
</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();
|
})
|
|
|
|
//#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 yAxisData = [$("#HDeptName").val()]
|
var seriesData = chartData1.map(item => [
|
item.StartTime,
|
item.EndTime,
|
item.EquipName,
|
item.Status
|
]);
|
// 默认的option结构
|
chartsOption = {
|
// 标题
|
title: {
|
text: '设备运行时序',
|
left: 'left',
|
show: false
|
},
|
// 图例（右上角的状态标识）
|
legend: {
|
data: ['运行', '开机', '停机', '告警', '关机'],
|
right: 10,
|
top: 5,
|
show: true
|
},
|
// 提示框（鼠标悬浮时显示）
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// params 是一个数组，这里只有一条数据
|
const data = params[0];
|
const start = new Date(data.value[0]);
|
const end = new Date(data.value[1]);
|
// 格式化时间显示
|
return `${data.name}<br/>${start.toLocaleTimeString()} ~ ${end.toLocaleTimeString()}`;
|
}
|
},
|
// 网格（调整图表内边距，给Y轴和X轴标签留出空间）
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
// X轴配置：时间轴
|
xAxis: {
|
type: 'time', // 关键：时间类型轴
|
min: baseTime, // 固定最小时间：14:00
|
max: endTime, // 固定最大时间：次日12:00
|
axisLabel: {
|
// 格式化X轴标签显示为 14:00, 16:00 格式
|
formatter: function (value) {
|
const date = new Date(value);
|
return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
|
},
|
interval: 2 * 3600 * 1000 // 每2小时显示一个刻度（对应14, 16, 18...）
|
},
|
axisLine: { show: true },
|
splitLine: { show: true }
|
},
|
// Y轴配置：类目轴
|
yAxis: {
|
type: 'category',
|
data: yAxisData,
|
axisLine: { show: false },
|
axisTick: { show: false } // 隐藏Y轴刻度线
|
},
|
// 系列数据
|
series: [
|
{
|
name: ['运行', '开机', '停机', '告警', '关机'],
|
type: 'bar', // 使用柱状图实现甘特图效果
|
barWidth: '80%', // 柱子高度
|
// 数据映射：将时间戳数据关联到X轴
|
encode: {
|
x: [0, 1], // value 的第0项作为起始，第1项作为结束
|
y: 2 // value 的第2项作为Y轴类目
|
},
|
// 具体数据
|
data: seriesData,
|
// 状态颜色映射
|
itemStyle: {
|
color: function (params) {
|
// 根据数据名称匹配颜色
|
const name = params.data[2];
|
const colorMap = {
|
'运行': '#67C23A',
|
'运行中': '#67C23A',
|
'开机': '#409EFF',
|
'停机': '#E6A23C',
|
'告警': '#F56C6C',
|
'关机': '#909399',
|
'维修中': '#F56C6C',
|
'维护中': '#F56C6C'
|
};
|
return colorMap[name] || '#ccc';
|
}
|
},
|
// 柱子上不显示文字标签
|
label: { show: false }
|
}
|
]
|
};
|
|
|
// 如果有数据，更新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() + '/SB_EquipRunningStatus/ReportByID',
|
type: "GET",
|
data: { "HEquipID": HEquipID, "sWhere": sWhere2, "user": sessionStorage["HUserName"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
console.log(data)
|
|
if (data.count == 1) {
|
var EquipRunningStatusCharts = echarts.init(document.getElementById("EquipRunningStatusCharts"))
|
get_LineChart(EquipRunningStatusCharts, data.data);//折线
|
} 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
|
|
})
|
</script>
|
</body>
|
|
|
|
</html>
|
