界面很简单,纯HTML+CSS实现据,展示了工厂内厂房的一些信息,设备状态可以更加详细地看到各个设备的当前运行情况。可以编写后端传入活的数据。
设备状态详情页面如下:
没有设备:
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>厂房管理看板</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
.my-navbar{
position: relative;
width: 100%;
height: 50px;
background-color:skyblue;
}
h2{
color:aliceblue;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight:1000;
}
td{
text-align: center;
vertical-align: middle;
padding: 5px;
}
th{
text-align: center;
vertical-align: middle;
}
.my-detail{
border: 2px solid black; /* 设置边框 */
width: 100%; /* 设置div的宽度 */
/*height: 100%;*/
border-radius: 10px; /* 设置圆角 */
padding: 20px;
/* text-align: center; */
}
.my-detail2{
border: 2px solid black; /* 设置边框 */
width: 100%; /* 设置div的宽度 */
height: 100%;
border-radius: 10px; /* 设置圆角 */
padding: 20px;
/* text-align: center; */
}
.in-table-div1{
display: grid;
place-items: center; /* 同时实现水平和垂直居中 */
background-color: #facb6b;
width: 197px;
height: 260px;
padding: 4px;
/* float: left; */
margin-right: 16px;
margin-top: 20px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.30);
display: inline-block;
}
.in-table-div2{
display: grid;
place-items: center; /* 同时实现水平和垂直居中 */
background-color: #9ede4c;
width: 197px;
height: 260px;
padding: 4px;
margin-right: 16px;
margin-top: 20px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.30);
display: inline-block;
}
.in-table{
background-color:rgb(160, 169, 172);
border-collapse: collapse;
width: 188px;
height: 90%;
}
.in-table td{
background-color:honeydew;
}
.align-left{
text-align: left;
}
td{
background-color:antiquewhite;
}
.my-code{
background-color:#facb6b;
}
.my-code td{
font-weight: bold;
}
.my-detail2 table{
width: 100%; /* 设置表格宽度为100%或具体值 */
table-layout: fixed; /* 设置为固定布局 */
}
.my-detail2 tr {
white-space: nowrap; /* 防止文本换行 */
padding: 1px;
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
word-wrap: break-word; /* 在长单词或URL上换行 */
overflow-wrap: break-word; /* 同上,用于更好的兼容性 */
max-width: 50px; /* 确保单元格不会超过其容器的宽度 */
}
.my-detail2 tr {
}
</style>
<body>
<div class="my-navbar bg-info">
<h2>
厂房生产管理看板总表
</h2>
</div>
<div class="container">
<br>
<table class="table table-bordered" style="background-color:cadetblue;">
<thead>
<tr class="my-code" >
<th class="bg-info">厂房编码</th>
<td>A1-001</td>
<td>A1-002</td>
<td>A2-001</td>
<td>A2-002</td>
<td>A2-003</td>
<td>A3-001</td>
<td>C3-001</td>
<td>C3-002</td>
</tr>
<tr>
<th class="bg-info">设备数量</th>
<td>13 架</td>
<td>1 架</td>
<td>0 架</td>
<td>0 架</td>
<td>0 架</td>
<td>0 架</td>
<td>0 架</td>
<td>0 架</td>
</tr>
<tr>
<th class="bg-info">产品数量</th>
<td>107 台</td>
<td>10 台</td>
<td>0 台</td>
<td>0 台</td>
<td>0 台</td>
<td>0 台</td>
<td>0 台</td>
<td>0 台</td>
</tr>
<tr class="my-tr">
<th class="bg-info" style="vertical-align: middle;">设备状态</th>
<td><button class="btn btn-primary" type="submit" data-id="1">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="2">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="3">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="4">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="5">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="6">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="7">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="8">显示</button></td>
</tr>
</thead>
</table>
<div class="my-detail">
</div>
<br>
<table class="table table-bordered" style="background-color:cadetblue;">
<thead>
<tr class="my-code" >
<th class="bg-info">厂房编码</th>
<td>C1-001</td>
<td>C1-002</td>
<td>C1-003</td>
<td>C2-001</td>
<td>C3-001</td>
<td>C4-001</td>
<td>C4-002</td>
<td>C4-003</td>
</tr>
<tr>
<th class="bg-info">设备数量</th>
<td>0 架</td>
<td>0 架</td>
<td>0 架</td>
<td>0 架</td>
<td>3 架</td>
<td>0 架</td>
<td>1 架</td>
<td>0 架</td>
</tr>
<tr>
<th class="bg-info">产品数量</th>
<td>0 台</td>
<td>0 台</td>
<td>0 台</td>
<td>0 台</td>
<td>272 台</td>
<td>0 台</td>
<td>1 台</td>
<td>0 台</td>
</tr>
<tr class="my-tr">
<th class="bg-info" style="vertical-align: middle;">设备状态</th>
<td><button class="btn btn-primary" type="submit" data-id="9">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="10">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="11">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="12">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="13">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="14">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="15">显示</button></td>
<td><button class="btn btn-primary" type="submit" data-id="16">显示</button></td>
</tr>
</thead>
</table>
<div class="my-detail2">
</div>
<br>
</div>
</body>
<script>
const data = [
[
{
code: 'A1C-001',
number: '12台',
oldtime: '230分钟',
runtime: '72分钟',
people: '张三',
run: true
},
{
code: 'A1C-002',
number: '12台',
oldtime: '563分钟',
runtime: '92分钟',
people: '李四',
run: true
},
{
code: 'A1C-003',
number: '12台',
oldtime: '750分钟',
runtime: '86分钟',
people: '王五',
run: true
},
{
code: 'A1C-004',
number: '12台',
oldtime: '60分钟',
runtime: '13分钟',
people: '赵六',
run: true
},
{
code: 'A1C-005',
number: '12台',
oldtime: '36分钟',
runtime: '260分钟',
people: '刘备',
run: true
},
{
code: 'A1C-006',
number: '12台',
oldtime: '45分钟',
runtime: '22分钟',
people: '赵云',
run: true
},
{
code: 'A1C-007',
number: '12台',
oldtime: '30分钟',
runtime: '6分钟',
people: '张飞',
run: true
},
{
code: 'A1C-008',
number: '12台',
oldtime: '30分钟',
runtime: '50分钟',
people: '光羽',
run: false
},
{
code: 'A1C-009',
number: '12台',
oldtime: '453分钟',
runtime: '16分钟',
people: '曹操',
run: true
},
{
code: 'A1C-010',
number: '12台',
oldtime: '960分钟',
runtime: '194分钟',
people: '孙权',
run: true
},
{
code: 'A1C-011',
number: '12台',
oldtime: '36分钟',
runtime: '210分钟',
people: '黄忠',
run: true
},
{
code: 'A1C-012',
number: '12台',
oldtime: '70分钟',
runtime: '58分钟',
people: '诸葛亮',
run: false
},
{
code: 'A1C-013',
number: '12台',
oldtime: '36分钟',
runtime: '49分钟',
people: '蔡文姬',
run: true
},
],
[
{
code: 'B1D-001',
number: '10台',
oldtime: '420分钟',
runtime: '158分钟',
people: '貂蝉',
run: true
}
],
[], [], [], [], [], [], [], [],
[
{
code: 'F3C-001',
number: '109台',
oldtime: '113分钟',
runtime: '17分钟',
people: '西施',
run: false
},
{
code: 'F3C-002',
number: '119台',
oldtime: '180分钟',
runtime: '65分钟',
people: '姜维',
run: true
},
{
code: 'F3C-003',
number: '53台',
oldtime: '421分钟',
runtime: '18分钟',
people: '吕布',
run: true
}
],
[],
[
{
code: 'D3C-001',
number: '1台',
oldtime: '74分钟',
runtime: '123分钟',
people: '孙尚香',
run: true
}
],
[
{
code: 'E3C-001',
number: '10台',
oldtime: '240分钟',
runtime: '84分钟',
people: '刘禅',
run: false
},
{
code: 'E3C-002',
number: '12台',
oldtime: '3600分钟',
runtime: '123分钟',
people: '司马懿',
run: true
}
],
[
{
code: 'G3C-001',
number: '10台',
oldtime: '150分钟',
runtime: '69分钟',
people: '韩信',
run: false
},
{
code: 'G3C-002',
number: '12台',
oldtime: '360分钟',
runtime: '43分钟',
people: '孙策',
run: true
}
],
[]
]
// const btn = document.querySelectorAll('.btn')
// 获取隐藏框
const box1 = document.querySelector('.my-detail')
const box2 = document.querySelector('.my-detail2')
// 隐藏
box1.style.display = 'none';
box2.style.display = 'none';
// 获取按钮
const btn = document.querySelectorAll('.my-tr')
// console.log(btn);
// 获取老化编码
const code = document.querySelectorAll('.my-code td')
// 为两组按钮添加点击事件
for(let i = 0;i<btn.length;i++){
btn[i].addEventListener('click', function(e){
// 点击显示
if (e.target.tagName === 'BUTTON'){
// 获取按钮id
const loc = e.target.dataset.id - 1
// console.log(loc);
// 获取当前点击的按钮
const button = document.querySelector(`button[data-id="${loc + 1}"]`)
console.log('--', button);
if(button.innerHTML === '显示'){
// 移除原来的隐藏
if(document.querySelector('.btn-warning')){
document.querySelector('.btn-warning').innerHTML = '显示'
document.querySelector('.btn-warning').classList.remove('btn-warning')
}
const now_data = data[loc]
console.log();
console.log(now_data);
let ht = `<h3 style="text-align: center;">${code[loc].innerHTML}</h3>`
if (now_data.length > 0){
ht += '<div class="align-left">' +
'<b class="font-lg" style="color: #facb6b;">■</b>:表示正在运行中 <b class="font-lg" style="color: #9ede4c;">■</b>:表示运行暂停' +
'</div>'
for(let i = 0;i < now_data.length;i++){
if (now_data[i]['run']){
ht += '<div class="in-table-div1">'
}else{
ht += '<div class="in-table-div2">'
}
ht +=
'<table class="table table-bordered in-table">' +
'<thead>' +
`<tr><th>设备编码</th><td>${now_data[i]['code']}</td></tr>` +
`<tr><th>产品数量</th><td>${now_data[i]['number']}</td></tr>` +
`<tr><th>运行时间</th><td>${now_data[i]['oldtime']}</td></tr>` +
`<tr><th>剩余时间</th><td>${now_data[i]['runtime']}</td></tr>` +
`<tr><th>管理人员</th><td>${now_data[i]['people']}</td></tr>` +
'</thead>' +
'</table>' +
'</div>'
}
}
else{
// 获取日期
const date = getMyDate()
ht += `<h3 style="color: red;text-align: center;">${date} -> 厂房无设备正在运行,没相关数据输出!</h3>`
}
// 第一排
if (loc < 8){
box1.innerHTML = ht
box1.style.display = 'block';
box2.style.display = 'none';
}
// 第二排
else{
box2.innerHTML = ht
box2.style.display = 'block';
box1.style.display = 'none';
}
// 按钮变为隐藏
button.innerHTML = '关闭'
button.classList.add('btn-warning')
}
else{
box1.style.display = 'none'
box2.style.display = 'none'
// 移除原来的显示是
button.innerHTML = '显示'
button.classList.remove('btn-warning')
button.classList.add('btn-primary')
}
}
})
}
function getMyDate(date = new Date()) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
</script>
</html>