需求简介: 用热力图显示 合并制程展示制程下所有机台、线别的OEE值( OEEValue = (av) * (pf) * (yield) * 100) ）
写的一个小案例，代码写的挺烂的，属性名取得也不标准，请博友多多指点，以下内容仅供参考~
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<!-- JSON -->
<script src="js/res.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 手动改造bootstrap表格样式尽量与echars样式贴合 */
.table>tbody>tr>td,
.table>tfoot>tr>td,
.table>thead>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border: 1px solid #ddd;
text-align: center;
}
/* 表格第一列向右对齐 */
.table>tbody>tr>td:nth-child(1),
.table>tbody>tr>th:nth-child(1),
.table>tfoot>tr>td:nth-child(1),
.table>tfoot>tr>th:nth-child(1),
.table>thead>tr>td:nth-child(1),
.table>thead>tr>th:nth-child(1) {
border: none;
text-align: right;
}
/* 其他内容居中对齐 */
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>th {
text-align: center;
}
/* 当鼠标悬浮在有值的表格时的浮动效果 */
.table>tbody>tr>td.itemC:hover {
box-shadow: rgb(11, 234, 235) 0px 0px 10px;
z-index: 99;
position: relative;
}
/* 提示框样式 */
.tip {
width: 200px;
border: 2px solid #ddd;
padding: 8px;
background: #666666;
opacity: 0.8;
color: #ffffff;
border-radius: 10px;
position: relative;
z-index: 999;
}
/* 颜色拖动条 */
* {
padding: 0;
margin: 0;
}
.slider-panel .slider-box {
background-color: darkgray;
margin-top: 40px;
display: inline-block;
width: 305px;
height: 14px;
position: relative;
border-radius: 5px;
}
/* 滑条划过的宽度，默认值为0 */
.slider-panel .slider-box .slider-value {
background-image: linear-gradient(90deg, #fbe9e7 10%, #ffccbc 20%, #ffab91 30%, #ff8a65 40%, #ff7043 50%, #ff5722 60%, #f4511e 70%, #e64a19 80%, #d84315 90%, #bf360c 100%);
height: 14px;
width: 0;
border-radius: 5px;
}
/* 滑条的样式。默认透明 */
.slider-panel input {
position: absolute;
left: 0;
top: 0;
-webkit-appearance: none;
-ms-appearance: none;
background: transparent;
width: 305px;
height: 14px;
outline: none;
}
/* 圆形滑块的样式 */
.slider-panel input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 22px;
width: 22px;
background-color: #eaecee;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 4px 0 #212B35;
background: #bf360c;
border: 2px solid #FFFFFF;
}
/* 颜色条用的flex布局 */
.cen {
display: flex;
justify-content: center;
align-items: center;
}
/* 颜色条 span值 两端对齐方式 */
.ptl {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="cen">
<div class="slider-panel">
<!--slider-box表示整个滑条的颜色 -->
<div class="slider-box">
<!--slider-value表示滑条划过后的部分用一个颜色显示覆盖slider-box的颜色达到进度作用 -->
<p class="slider-value"></p>
<!-- 滑条的背景颜色透明只有-->
<input type="range" min="0" step="1" max="100" value="100">
</div>
<p class="ptl">
<span>0</span>
<span class="slider-percentage">100</span>
</p>
</div>
</div>
<div class="col-sm-9" style="margin:0 10%;">
<table class="table table-striped">
<thead id="tbThead">
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody id="tbTbody">
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</div>
<div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>
</body>
<script type="text/javascript">
console.log(data)
$(function() {
//绑定鼠标滑动事件
$('.slider-panel input').on('mousemove touchmove touchend click', moveSlider)
$('.slider-value').css('width', '100%');
function moveSlider() {
// 获取当前滑条的动态值
let sliderValue = parseInt($(this).val());
// 将滑条的值赋值给滑条划过后p标签的宽度
$('.slider-value').css('width', sliderValue + '%');
// 显示当前滑条的动态值
$('.slider-percentage').text(sliderValue);
//根据滑动的值筛选单元格
let tdAll = $(".itemC");
tdAll.map((index, item) => {
//获取td内提前保存好的值，与当前颜色滑动获取的值做对比
let targetValue = $(item).attr("value");
//修改透明度达到隐藏显示效果
if (Number(targetValue) >= sliderValue) {
$(item).css("opacity", "0");
} else {
$(item).css("opacity", "1");
};
});
}
})
//显示表格
function showtable() {
var allList = []; //展开子集
var bodyList = []; //列头提取大名称去除#01
for (var i = 0; i < data.length; i++) {
var dl = data[i].lineDetails;
for (var j = 0; j < dl.length; j++) {
allList.push(dl[j]);
}
bodyList.push(tsplit(data[i].processName, 'a'));
}
$.unique(bodyList); //数组去重
//头部
var titleList = [];
for (var i = 0; i < allList.length; i++) {
var add = true;
for (var j = 0; j < titleList.length; j++) {
if (allList[i].line == titleList[j]) {
add = false;
break;
}
}
if (add) {
titleList.push(allList[i].line);
}
}
titleList.sort(); //排序
var hhtml = "<tr><th width='180px'></th>";
for (var i = 0; i < titleList.length; i++) {
hhtml += "<th>" + titleList[i] + "</th>";
}
hhtml += "</tr>";
$("#tbThead").html(hhtml);
//内容
var tdArray = [];
var thtml = "";
for (var i = 0; i < bodyList.length; i++) {
var newID = bodyList[i].replace(/[^0-9a-z]/ig, ""); //去空格做id
thtml += "<tr>";
thtml += "<td class='unon' id='f" + newID + "' onclick='trClick(this,\"" + newID + "\")'>" + bodyList[i] +
"<span id='un" + newID + "' class='glyphicon glyphicon-chevron-down'></span></td>";
//制程也可以放值根据颜色来显示，我这里暂时没，可自行修改
thtml += "<td>制程</td>";
thtml += "<td></td>";
thtml += "<td></td>";
thtml += "</tr>";
for (var j = 0; j < data.length; j++) {
var dprocessName = tsplit(data[j].processName, 'a');
if (bodyList[i] == dprocessName) {
var itemList = data[j].lineDetails;
thtml += "<tr id='" + newID + "" + j + "' style='display: none;'>";
thtml += "<td>" + tsplit(data[j].processName, 'b') + "</td>";
for (var k = 0; k < itemList.length; k++) {
var oeeValue = (itemList[k].av) * (itemList[k].pf) * (itemList[k].yield) * 100;
var index = titleList.indexOf(itemList[k].line);
if (index != -1) {
tdArray[index] = oeeValue.toFixed(2);
}
}
for (var z = 0; z < titleList.length; z++) {
if (tdArray[z]) {
var rcolor = setColor(tdArray[z].toString());
thtml += "<td class='itemC' value=" + tdArray[z] +
" bgColor=" + rcolor.color + " onmouseover='tip.start(this)' tips='" + rcolor.color + ",OEE," + titleList[z] + ": " + tdArray[z] + "' name='color" +
rcolor.number + "' style='background:" + rcolor.color + ";'>" + tdArray[z] + "</td>";
} else {
thtml += "<td></td>";
}
}
thtml += "</tr>";
}
}
}
$("#tbTbody").html(thtml);
}
//制程名与机台名切割 a代表返回制程名，else 返回机台名
function tsplit(v, mark) {
if (mark == 'a') {
var arr = v.split("#");
return arr[0];
} else {
var arr = v.split("#");
return "#" + arr[1];
}
}
//展开箭头切换 a-this指向, id-就是传过来的字符串做了拼接id处理
function trClick(a, id) {
//获取class 如果这里有其他class类型，那可以根据自己的方式改造
var getClass = a.getAttribute("class");
//on展开的情况下箭头向上，unon箭头向下
switch (getClass) {
case "on":
a.setAttribute("class", "unon");
$("#un" + id).removeClass("glyphicon glyphicon-chevron-up");
$("#un" + id).addClass("glyphicon glyphicon-chevron-down");
$("[id^=" + id + "]").hide();
break;
case "unon":
a.setAttribute("class", "on");
$("#un" + id).removeClass("glyphicon glyphicon-chevron-down");
$("#un" + id).addClass("glyphicon glyphicon-chevron-up");
$("[id^=" + id + "]").show();
break;
default:
break;
}
}
//td数值最高为100,分10种颜色范围指定返回
function setColor(value) {
var color = ["#fbe9e7", "#ffccbc", "#ffab91", "#ff8a65", "#ff7043", "#ff5722", "#f4511e", "#e64a19", "#d84315",
"#bf360c"
];
if (value <= 10) {
return {
color: color[0],
number: 10
};
} else if (value > 10 && value <= 20) {
return {
color: color[1],
number: 20
};
} else if (value > 20 && value <= 30) {
return {
color: color[2],
number: 30
};
} else if (value > 30 && value <= 40) {
return {
color: color[3],
number: 40
};
} else if (value > 40 && value <= 50) {
return {
color: color[4],
number: 50
};
} else if (value > 50 && value <= 60) {
return {
color: color[5],
number: 60
};
} else if (value > 60 && value <= 70) {
return {
color: color[6],
number: 70
};
} else if (value > 70 && value <= 80) {
return {
color: color[7],
number: 80
};
} else if (value > 80 && value <= 90) {
return {
color: color[8],
number: 90
};
} else if (value > 90) {
return {
color: color[9],
number: 100
};
} else {
return;
}
}
//信息提示框
var tip = {
$: function(ele) {
if (typeof(ele) == "object")
return ele;
else if (typeof(ele) == "string" || typeof(ele) == "number")
return document.getElementById(ele.toString());
return null;
},
mousePos: function(e) {
var x, y;
var e = e || window.event;
return {
x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
},
start: function(obj) {
var self = this;
var t = self.$("mjs:tip");
obj.onmousemove = function(e) {
var mouse = self.mousePos(e);
t.style.left = mouse.x + 10 + 'px';
t.style.top = mouse.y - 50 + 'px';
//这里可根据情况自己改造，需要什么值就自己设定然后获取用自己的方式处理
var tipSpl = obj.getAttribute("tips").split(',');
t.innerHTML =
`${tipSpl[1]}:<br><span style="display: inline-block;height: 10px; width:10px; background-color: ${tipSpl[0]}; border-radius: 10px;"> </span> ${tipSpl[2]}`;;
t.style.display = '';
};
obj.onmouseout = function() {
t.style.display = 'none';
};
}
}
//方法调用 显示表格
showtable();
</script>
</html>
JSON文件：
var data = [{
processName: "Ring Welding#02",//制程名称+ 机台编码
lineDetails: [{//线别集合
av: 1,
line: "JF-TM-L1",//线别
pf: 0,
processName: "Ring Welding#02",//制程名称+ 机台编码
stationId: "10000288",//id
timeStage: null,
yield: 0
}]
}, {
processName: "Ring Welding#01",
lineDetails: [{
av: 0.6276388888888889,
line: "JF-F112F-GD",
pf: 0.37176366452755033,
processName: "Ring Welding#01",
stationId: "10000511",
timeStage: null,
yield: 1
}, {
av: 0.16652777777777777,
line: "JF-TM-L1",
pf: 0,
processName: "Ring Welding#01",
stationId: "10000007",
timeStage: null,
yield: 0
}]
}, {
processName: "Ground Tape#01",
lineDetails: [{
av: 0.2995833333333333,
line: "JF-F112F-GD",
pf: 1.023643949930459,
processName: "Ground Tape#01",
stationId: "10000508",
timeStage: null,
yield: 1
}]
}, {
processName: "Frame attach#01",
lineDetails: [{
av: 1,
line: "JF-F112F-GD",
pf: 0,
processName: "Frame attach#01",
stationId: "10000344",
timeStage: null,
yield: 0
}, {
av: 1,
line: "JF-TM-L1",
pf: 0,
processName: "Frame attach#01",
stationId: "10000033",
timeStage: null,
yield: 0
}]
}, {
processName: "3D Glue#04",
lineDetails: [{
av: 0.0926388888888889,
line: "JF-F112F-GD",
pf: 0,
processName: "3D Glue#04",
stationId: "10000494",
timeStage: null,
yield: 0
}, {
av: 0.0001388888888888889,
line: "JF-TM-L1",
pf: 0,
processName: "3D Glue#04",
stationId: "10000032",
timeStage: null,
yield: 0
}]
}, {
processName: "3D Glue#03",
lineDetails: [{
av: 0.08574074074074074,
line: "JF-F112F-GD",
pf: 0.19438444924406048,
processName: "3D Glue#03",
stationId: "10000493",
timeStage: null,
yield: 0.9333333333333333
}]
}, {
processName: "3D Glue#02",
lineDetails: [{
av: 0.7335185185185186,
line: "JF-F112F-GD",
pf: 0.048472607927291085,
processName: "3D Glue#02",
stationId: "10000492",
timeStage: null,
yield: 0.9375
}, {
av: 0.000046296296296296294,
line: "JF-TM-L1",
pf: 0,
processName: "3D Glue#02",
stationId: "10000030",
timeStage: null,
yield: 0
}]
}, {
processName: "3D Glue#01",
lineDetails: [{
av: 1,
line: "JF-F112F-GD",
pf: 0,
processName: "3D Glue#01",
stationId: "10000343",
timeStage: null,
yield: 0
}, {
av: 0.1237037037037037,
line: "JF-F112F-GD",
pf: 0.2470059880239521,
processName: "3D Glue#01",
stationId: "10000491",
timeStage: null,
yield: 0.8909090909090909
}]
}, {
processName: "Upper material#01",
lineDetails: [{
av: 1,
line: "JF-F112F-GD",
pf: 0,
processName: "Upper material#01",
stationId: "10000391",
timeStage: null,
yield: 0
}, {
av: 0.3787962962962963,
line: "JF-F112F-GD",
pf: 0.16132974822781715,
processName: "Upper material#01",
stationId: "10000512",
timeStage: null,
yield: 0.7636363636363637
}]
}, {
processName: "L/R PSA#01",
lineDetails: [{
av: 0.5875925925925926,
line: "JF-F112F-GD",
pf: 0.07942010715411282,
processName: "L/R PSA#01",
stationId: "10000509",
timeStage: null,
yield: 1
}]
}, {
processName: "ALS Foam#01",
lineDetails: [{
av: 0.7080555555555555,
line: "JF-F112F-GD",
pf: 0.06590819929384072,
processName: "ALS Foam#01",
stationId: "10000503",
timeStage: null,
yield: 1
}]
}, {
processName: "Extended Foam#01",
lineDetails: [{
av: 0.7558333333333334,
line: "JF-F112F-GD",
pf: 0.06174200661521499,
processName: "Extended Foam#01",
stationId: "10000506",
timeStage: null,
yield: 1
}]
}, {
processName: "DIC Foam#01",
lineDetails: [{
av: 0.7348148148148148,
line: "JF-F112F-GD",
pf: 0.06350806451612903,
processName: "DIC Foam#01",
stationId: "10000505",
timeStage: null,
yield: 1
}]
}, {
processName: "Chin Foam#01",
lineDetails: [{
av: 0.7439814814814815,
line: "JF-F112F-GD",
pf: 0.0627255756067206,
processName: "Chin Foam#01",
stationId: "10000504",
timeStage: null,
yield: 1
}]
}, {
processName: "Mic3+Frame#01",
lineDetails: [{
av: 0.5192592592592593,
line: "JF-F112F-GD",
pf: 0.4087018544935806,
processName: "Mic3+Frame#01",
stationId: "10000429",
timeStage: null,
yield: 0.9162303664921466
}]
}, {
processName: "Flex bending#01",
lineDetails: [{
av: 0.22342592592592592,
line: "JF-F112F-GD",
pf: 0.7061748860339826,
processName: "Flex bending#01",
stationId: "10000507",
timeStage: null,
yield: 1
}]
}, {
processName: "Laser Welding-2#12",
lineDetails: [{
av: 1,
line: "JF-FM-L1",
pf: 0,
processName: "Laser Welding-2#12",
stationId: "10000021",
timeStage: null,
yield: 0
}]
}, {
processName: "Laser Welding-1#12",
lineDetails: [{
av: 0.001851851851851852,
line: "JF-FM-L1",
pf: 0,
processName: "Laser Welding-1#12",
stationId: "10000020",
timeStage: null,
yield: 0
}]
}]
效果图:
1436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
