HTML+CSS实现一个简单的厂房看板表（附完整代码）

于 2024-07-31 17:28:53 发布
阅读量186 收藏
点赞数 2
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pangaoyang_/article/details/140828072
版权

界面很简单，纯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>
python艺术家~
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于项目监控看板HTML页面设计
chuan6752的博客
01-05 1637
车间内各个线体，各个站别会有各项测试特性需要监控，做一个页面监控，以便发现异常立即显示不同的颜色，系统并会发现异常警报，看板，E-mail等。 1.先上完成图片如下： a.灰色表示无异常 b.红色表示异常未处理 c.黄色表示异常处理中 d.绿色表示已经处理完成 2.HTML代码如下： <div> <table border="1" > <tr style="background-colo...
基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档
04-09
在本项目中，我们主要探讨如何使用HTML、CSS和JavaScript技术来实现一个酷似QQ音乐的界面。这个项目包括了完整的源代码和相关文档，帮助初学者和开发者深入理解前端开发的基本原理和实践技巧。 首先，HTML...
运营中心看板HTML源码
04-24
此看板主要用于生产制造行业进行数据分析及决策，看板数据使用大屏：运营中心看板(html模板源码)，仅供各位参考
基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板
qq_365392777
10-23 1542
前言???? 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，...
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
最新发布
柯晓楠
07-24 1085
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
看板.html
08-27
看板.html
DataGear 使用静态HTML模板快速制作数据可视化看板
datagear的博客
07-28 2935
DataGear看板提供了导入静态HTML模板的功能，使您可以利用现有的HTML模板资源快速制作动态可视化数据看板。 首先，您需要准备一套已设置好布局的静态HTML模板，其中包含的HTML主页及相关资源，例如： index.html css/ |---style.css |---images |---bg.png |---bg_head.png 它的静态效果如下图所示： 然后，将这套静态HTML模板压缩到一个ZIP文件中（注意index.html及其资源要直接放在压缩
html看板娘
m0_58331939的博客
07-23 384
<!DOCTYPE html> <html> <body> <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init ({ "model": { // jsonPath:...
CSS实战---高科技感数据看板（管理层决策大屏演示）
乱世刀疤
03-04 5937
科技感十足的大屏演示数据看板，让老板们更欣赏你的逻辑思维和技术才能。
基于html+css+js实现简易计算器代码实例
11-20
在本实例中，我们将探讨如何使用HTML、CSS和JavaScript实现一个简单的计算器。首先，让我们从HTML结构开始。HTML（超文本标记语言）是网页的基本框架，用于定义页面内容和布局。 ```html <!DOCTYPE html> <html ...
html+css+javascript实现列表循环滚动示例代码
12-13
说明：设置时间定时，在规定的时间内替换前一个节点的内容 1、关键代码：javascript： 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById...
大屏看板HTML模板参考
09-14
智慧城市，智慧交通，智慧气象，智慧物流，智慧医疗，智慧政务
智能大数据看板_大数据动态大屏html模板
07-05
fastest data monitoring & Display platform 智能大数据看板，是html+js+css开发的一套可用于大屏展示的大数据中心，可以接口活动后端数据，通过适当的图标形式动态展现在用户面前。 ## 主要功能 *页面部分数据滚动播放 *部分标签形式数据循环播放 *若有需求，其他静态数据可以定时接口获取并更新 *提供部分功能示例
一个看板源码
07-28
提供一个开源看板程序，项目敏捷管理更高效
大数据看板html5模板demo
05-17
蓝色背景大数据可视化看板通用模板，含html、css及全部素材，各行业通用。
大数据看板.zip
10-25
大数据看板经典样式~深色布局，纯HTML书写，并分块展示各类图表。也可以自定义开发相关模块，动态展示！
个人网页代码HTML+CSS实现的蛮好看的个人空间静态网页.zip
12-11
个人网页代码HTML+CSS实现的蛮好看的个人空间静态网页.zip 个人网页代码HTML+CSS实现的蛮好看的个人空间静态网页.zip 个人网页代码HTML+CSS实现的蛮好看的个人空间静态网页.zip 个人网页代码HTML+CSS实现的蛮好看的...
分享140个HTML公司企业模板，总有一款适合您
zy0412326的专栏
02-24 240
分享140个HTML公司企业模板，总有一款适合您
给html 添加看板娘
学长的猫的博客
01-14 3982
https://www.cnblogs.com/laolieren/p/add_2d_live_for_mediawiki.html <div id="content" class="mw-body" role="main"> 在其后面增加如下代码 <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></sc...
HTML+CSS+JavaScript：汽车报价网站完整代码示例及实现步骤
在这个简单的汽车报价网站的HTML、CSS和JavaScript代码示例中，我们主要关注以下几个关键知识点： 1. **HTML结构**: - `<!DOCTYPE html>` 声明文档类型，表示这是一个HTML5文档。 - `<html>` 根元素，包含了整个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值