<!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>
|
<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: 130px;
|
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: 600px; overflow: scroll;"></div>
|
</div>
|
<div class="layui-col-xs9 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<div id="btomleft" style="height:600px;display:block;overflow-y:auto;">
|
|
</div>
|
</div>
|
<div class="layui-col-xs1 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<fieldset style="border: 1px solid #eee; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%); height: 585px;">
|
<legend style="color: #5FB878">操作台</legend>
|
<div class="content4">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="PowerOn(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-pause imgicon"></span>
|
</div>
|
<span class="imgtitle">开机</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="PowerOff(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-logout imgicon"></span>
|
</div>
|
<span class="imgtitle">停机</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="DotCheck(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-list imgicon"></span>
|
</div>
|
<span class="imgtitle">点检记录</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="FaultRegistration(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-list imgicon"></span>
|
</div>
|
<span class="imgtitle">故障登记</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="Maintenance(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-form imgicon"></span>
|
</div>
|
<span class="imgtitle">维修</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="Resume(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-table imgicon"></span>
|
</div>
|
<span class="imgtitle">履历</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="Process(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-file imgicon"></span>
|
</div>
|
<span class="imgtitle">工艺</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="HStatus(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-set imgicon"></span>
|
</div>
|
<span class="imgtitle">状态</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
</div>
|
<div class="layui-row">
|
<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>
|
</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() {
|
var mychart11 = echarts.init(document.getElementById('mychart11'));
|
var mychart22 = echarts.init(document.getElementById('mychart22'));
|
var mychart3 = echarts.init(document.getElementById('mychart3'));
|
var mychart4 = echarts.init(document.getElementById('mychart4'));
|
get_Histogram1(mychart11, '');//柱状图1
|
get_LineChart(mychart22, '');//折线
|
get_Statistics(mychart3, '');//饼图
|
get_Histogram4(mychart4, '');//柱状图4
|
|
//查询
|
get_Display_Tree();
|
}
|
//#endregion
|
|
//查询工单
|
function Check(HDeptID) {
|
wktag = 0;
|
$("#btomleft").html("");
|
$.ajax({
|
url: GetWEBURL() + '/Sc_HEquipStateDistribution/Sc_HEquipStateDistribution_Souce',
|
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_HDeptSouceMOList;
|
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="df' + (i + 1) + '">' + LoadData1[i].生产订单主内码 + '</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="sb' + (i + 1) + '">' + LoadData1[i].设备id + '</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>';
|
html1 += '<p><span>完成数量：</span><span id="wcqty' + (i + 1) + '">' + 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 += '</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 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) {
|
workcode = $("#gd" + i + "").html(); //通过样式ID获取html内容(工单号)
|
HICMOInterID = $("#df" + i + "").html(); //生产订单主内码
|
HICMOEntryID = $("#ds" + i + "").html(); //生产订单子内码
|
HEquipID = $("#sb" + i + "").html(); //设备id
|
HEquipNumber = $("#sbbm" + i + "").html(); //设备编码
|
HEquipName = $("#sbmc" + i + "").html(); //设备名称
|
HSourceID = $("#cs" + i + "").html(); //产线id
|
|
$('.cns').removeClass('check1'); //删除不同父级clss样式相同的所有元素
|
$("#bs" + i + "").addClass('check1'); // 添加当前元素的样式
|
if (workcode != "" && workcode != null) {
|
wktag = 1;
|
}
|
sWhere = {
|
HDeptID: HDeptID
|
, HSourceID: HSourceID
|
}
|
FourReport(JSON.stringify(sWhere));
|
}
|
|
//查询 部门+产线 4个图表 赋值
|
function FourReport(sWhere) {
|
wktag = 0;
|
$.ajax({
|
url: GetWEBURL() + '/Sc_HEquipStateDistribution/Get_EquipStateDistribution_FourReport',
|
type: "GET",
|
data: { "sWhere": sWhere, "user": sessionStorage["HUserName"], "OrganizationID": sessionStorage["OrganizationID"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
var chartData = data.data.h_p_Sc_FourStateDistributionReport;
|
var chartData1 = data.data.h_p_Sc_FourStateDistributionReport1;
|
var chartData2 = data.data.h_p_Sc_FourStateDistributionReport2;
|
var chartData3 = data.data.h_p_Sc_FourStateDistributionReport3;
|
var mychart11 = echarts.init(document.getElementById('mychart11'));
|
var mychart22 = echarts.init(document.getElementById('mychart22'));
|
var mychart3 = echarts.init(document.getElementById('mychart3'));
|
var mychart4 = echarts.init(document.getElementById('mychart4'));
|
|
get_Histogram1(mychart11, chartData);
|
get_LineChart(mychart22, chartData1);
|
get_Statistics(mychart3, chartData2);
|
get_Histogram4(mychart4, chartData3);
|
|
},
|
error: function (err) {
|
layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
});
|
}
|
|
//柱状图
|
function get_Histogram1(mychart11, chartData) {
|
// 默认的option结构
|
var option = {
|
title: {
|
text: '产能', // 默认标题为空
|
left: 'center',
|
top: '10%', // 调整标题位置，放到最上面
|
textStyle: {
|
fontSize: 18,
|
color: '#ff0000'
|
}
|
},
|
grid: {
|
top: '25%', // 调整grid的top值，给标题留出空间
|
bottom: '20%',
|
left: '10%',
|
right: '10%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [] // 默认x轴数据为空
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [], // 默认series数据为空
|
type: 'bar'
|
}
|
]
|
};
|
|
// 如果有数据，更新option的内容
|
if (chartData && chartData.length > 0) {
|
option.title.text = '产能'; // 正常数据时没有标题
|
option.xAxis.data = chartData.map(item => item.日期); // 设置x轴数据
|
option.series[0].data = chartData.map(item => item['生产总数']); // 设置y轴数据
|
|
option.series[0].label = {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
};
|
|
option.series[0].itemStyle = {
|
normal: {
|
color: '#15b1fa',
|
label: {
|
show: true // 在柱状图上显示数据
|
}
|
}
|
};
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
option.title.text = '暂无数据';
|
}
|
|
// 更新图表
|
mychart11.setOption(option);
|
}
|
|
//折线图
|
function get_LineChart(mychart22, chartData1) {
|
// 默认的option结构
|
var option = {
|
title: {
|
text: '不良原因', // 默认标题为空
|
left: 'center',
|
top: '10%', // 调整标题位置，放到最上面
|
textStyle: {
|
fontSize: 18,
|
color: '#ff0000'
|
}
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#15b1fa',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 1;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
grid: {
|
top: '25%', // 调整grid的top值，给标题留出空间
|
bottom: '20%',
|
left: '10%',
|
right: '10%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [] // 默认x轴数据为空
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [], // 默认series数据为空
|
type: 'line', // 将柱状图改为折线图
|
smooth: true, // 使折线图平滑
|
lineStyle: {
|
color: '#15b1fa' // 设置线条颜色
|
},
|
label: {
|
show: true, // 在折线图上显示数据
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
}
|
]
|
};
|
|
// 如果有数据，更新option的内容
|
if (chartData1 && chartData1.length > 0) {
|
option.title.text = '不良原因'; // 正常数据时没有标题
|
option.xAxis.data = chartData1.map(item => item.不良原因); // 设置x轴数据
|
option.series[0].data = chartData1.map(item => item['数量']); // 设置y轴数据
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
option.title.text = '暂无数据';
|
}
|
|
mychart22.setOption(option);
|
}
|
|
//饼图
|
function get_Statistics(mychart3, chartData2) {
|
// 如果 chartData2 为空，提供一个“无数据”提示
|
if (chartData2.length === 0) {
|
mychart3.setOption({
|
title: {
|
text: '暂无数据',
|
left: 'center',
|
top: '10%',
|
textStyle: {
|
color: 'red', // 设置标题颜色为红色
|
fontSize: 18,
|
fontWeight: 'bold'
|
}
|
},
|
series: [], // 清空数据
|
graphic: [] // 清空图形中的文本
|
});
|
return;
|
}
|
|
// 状态颜色映射
|
const statusColorMap = {
|
'开机': '#28a745', // 绿色
|
'故障': '#ff63a5', // 桃红色
|
'停机': '#f0ad4e', // 黄色
|
'未知': '#6c757d' // 灰色
|
};
|
|
// 计算开机率
|
const totalDevices = chartData2.reduce((sum, item) => sum + item.数量, 0);
|
const onlineDevices = chartData2.find(item => item.状态 === '开机')?.数量 || 0;
|
const onlineRate = totalDevices === 0 ? 0 : (onlineDevices / totalDevices * 100).toFixed(2);
|
|
// 动态生成饼图数据，并根据状态设置颜色
|
var data = chartData2.map(function (item) {
|
// 获取当前状态的颜色，默认为灰色
|
var color = statusColorMap[item.状态] || statusColorMap['未知'];
|
|
return {
|
value: item.数量,
|
name: item.状态,
|
itemStyle: {
|
color: color // 为每个状态设置对应的颜色
|
}
|
};
|
});
|
|
// 图表的配置项
|
var option = {
|
title: {
|
text: '设备状态分析对比',
|
left: 'center',
|
top: '10%', // 将标题放置到顶部
|
textStyle: {
|
color: 'red', // 设置标题字体颜色为红色
|
fontSize: 18,
|
fontWeight: 'bold'
|
}
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left'
|
},
|
series: [
|
{
|
name: '设备状态',
|
type: 'pie',
|
radius: '50%',
|
data: data, // 使用动态生成的数据
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
],
|
graphic: [{
|
type: 'text',
|
left: 'center',
|
top: '85%', // 调整文本位置，让其稍微更往下
|
style: {
|
text: `开机率: ${onlineRate}%`, // 显示开机率
|
font: '16px Arial',
|
fill: '#00aaff' // 使用浅蓝色显示开机率
|
}
|
}]
|
};
|
|
// 设置图表的配置项
|
mychart3.setOption(option);
|
}
|
|
//柱状图4
|
function get_Histogram4(mychart4, chartData3) {
|
// 默认的option结构
|
var option = {
|
title: {
|
text: '维修', // 默认标题为空
|
left: 'center',
|
top: '10%', // 调整标题位置，放到最上面
|
textStyle: {
|
fontSize: 18,
|
color: '#ff0000'
|
}
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#15b1fa',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 1;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
grid: {
|
top: '25%', // 调整grid的top值，给标题留出空间
|
bottom: '20%',
|
left: '10%',
|
right: '10%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [] // 默认x轴数据为空
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [], // 默认series数据为空
|
type: 'bar'
|
}
|
]
|
};
|
|
// 如果有数据，更新option的内容
|
if (chartData3 && chartData3.length > 0) {
|
option.title.text = '维修'; // 正常数据时没有标题
|
option.xAxis.data = chartData3.map(item => item.维修项目); // 设置x轴数据
|
option.series[0].data = chartData3.map(item => item['维修次数']); // 设置y轴数据
|
|
option.series[0].label = {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
};
|
|
option.series[0].itemStyle = {
|
normal: {
|
color: '#15b1fa',
|
label: {
|
show: true // 在柱状图上显示数据
|
}
|
}
|
};
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
option.title.text = '暂无数据';
|
}
|
|
// 更新图表
|
mychart4.setOption(option);
|
}
|
|
|
|
//#region 操作台按钮点击事件
|
|
//开机按钮点击事件
|
function PowerOn(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增开机单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/设备开机单/Sb_EquipBeginBill.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//停机按钮点击事件
|
function PowerOff(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增停机单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/设备停机单/Sb_EquipStopBill.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//点检记录按钮点击事件
|
function DotCheck(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备月点检记录',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../车间管理/启动点检单/Sc_WorkDotCheckBillList_Day.html?OperationType=设备&linterid=' + HEquipID + '',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID,
|
"HEquipType": "设备"
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
|
},
|
});
|
}
|
|
//故障登记按钮点击事件
|
function FaultRegistration(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增故障登记单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/Sb_Add_EqpConkBookBillList.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//维修记录按钮点击事件
|
function Maintenance(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增维修记录单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/Sb_Add_EqpMaintenanceBillList.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//履历按钮点击事件
|
function Resume(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备履历',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/设备报表/Sb_EquipResumeCheckQuery.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID,
|
"HEquipNumber": HEquipNumber,
|
"HEquipName": HEquipName
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//工艺按钮点击事件
|
function Process(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备工艺参数',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../生产管理/订单状态分布/Sc_EquipmentProcessList.html?OperationType=4&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID,
|
"HICMOInterID": HICMOInterID,
|
"HICMOEntryID": HICMOEntryID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
|
},
|
});
|
}
|
|
//状态按钮点击事件
|
function HStatus(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备OEE',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../生产管理/订单状态分布/Sc_OEEStatusReport.html?OperationType=4&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipNumber": HEquipNumber
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
|
},
|
});
|
}
|
|
|
//#endregion
|
|
</script>
|
