看板系统的表格动态数据显示

最新推荐文章于 2022-10-06 20:55:37 发布
最新推荐文章于 2022-10-06 20:55:37 发布
阅读量218 收藏
点赞数
文章标签： easyui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joeyhhh/article/details/121161493
版权

1.引入需要引入的css、js

    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/css/easyui/easyui.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/css/easyui/icon.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/css/overallShow.css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"> 
    </script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/easyui-lang-zh_CN.js"> 
    </script>

2.html <body>部分

<body>
<button id="btnOpenShow" type="button" class="btn btn-success" style=" margin: 25px 25px 25px 25px;"
        onclick="openView()">点击查看全屏
</button>
<p class="vehicleSpacing"></p>
<div class="horizontalSpacing"></div>
<div id="show">
    <div id="left" class="text-center">
        <h1 id="screen_title" class="text-center">油箱车间生产运行动态管理信息看板</h1>
        <br>
        <h2 id="time">
            <span id="year">0000</span>年<span id="month">00</span>月<span
                id="date">00</span>日&nbsp;&nbsp;<span id="day">000</span>&nbsp;&nbsp;<span
                id="hours">00</span>时<span id="minutes">00</span>分<span
                id="seconds">00</span>秒
        </h2>
        <table class="table table-bordered text-center" style="margin-left:0px">
            <tr id="dayNumber">
                <td class="text-center" colspan='2'>油箱车间安全运行天数：<span
                        id="runningDay">00000</span>天
                </td>
            </tr>
            <tr>
                <td class="text-center" colspan='2'><span id="dayNight">无</span>班计划产量：
                    <span id="planSum">0000</span>件， 实际产量：<span id="realSum">0000</span>件，
                    完成率：<span id="productRate">00000</span>%
                </td>
            </tr>
            <tr id="lineInfo">
                <td id="rate" colspan="1" class="text-center" style="vertical-align: middle;">节拍</td>
            </tr>
            <tr id="latestNews">
                <td id="latestNewsInfo" colspan="1" class="text-center" style="vertical-align: middle;">最新录入</td>
            </tr>
            <tr>
                <td class="text-center" style="vertical-align: middle;">最新通告</td>
                <td class="text-center"><span id="msg"></span></td>
            </tr>
        </table>

    </div>
    <div id="right" class="text-center">
        <h2 id="hourTitle">生产计划表</h2>
        <table class="table  text-center">
            <tr>
                <th class="text-center" style="font-size: 25px">图号(计划)</th>
                <%--                <th class="text-center" style="font-size: 25px">计划</th>--%>
                <th class="text-center" style="font-size: 25px">实际</th>
            </tr>
            <tbody id="right-table-data">
            </tbody>
        </table>
    </div>
</div>
<div class="horizontalSpacing"></div>
<p class="vehicleSpacing"></p>

</body>

3. js部分

<script type="text/javascript">
    //点击按钮
    $(function () {
        if (top.location != self.location) {
            $('#btnOpenShow').show();
        } else {
            $('#btnOpenShow').hide();
        }

        //键盘敲击事件(回车返回)
        $(document).keypress(function (event) {
            value = event.keyCode;
            if (value == 13) {
                $(location).attr('href',
                    '${pageContext.request.contextPath}/main.do');
            }

        });
        //指定时间获取展示内容
        setInterval(show, 1000);
        show();

        //获取整体展示内容
        function show() {
            showModal();
            displayTime();
        }

        //获取展示模块内容
        function showModal() {
            // var lineShow = [];
            $.ajax({
                    type: 'post',
                    url: '${pageContext.request.contextPath}/getTankShow.do',
                    dataType: 'json',
                    async: true,
                    success: function (data) {
                        $("#runningDay").text(data.tankShow.runningDay);
                        $("#dayNight").text(data.tankShow.dayNight);
                        $("#planSum").text(data.tankShow.planSum);
                        $("#realSum").text(data.tankShow.realSum);
                        //完成率
                        var planSum = data.tankShow.planSum;
                        var realSum = data.tankShow.realSum;
                        if (planSum != 0) {
                            var productRate = (parseFloat((realSum / planSum)) * 100).toFixed(2);
                        } else {
                            var productRate = 0;
                        }
                        $("#productRate").text(productRate);
                        var lineShowData = data.tankShow.lineShow; //节拍信息
                        var lineNewsData = data.tankShow.lineNews; //最新录入信息
                        var productNumShow = data.tankShow.productNumShow; //右侧信息
                        var lineRate = $("#lineInfo");
                        var rightTable = $("#right-table-data");
                        var latestNews = $("#latestNews");
                        //节拍
                        $(".line-info-detail").remove();
                        if (lineShowData && lineShowData.length > 0) {
                            $("#rate").attr("rowspan", lineShowData.length + 1);
                            lineShowData.reverse();
                            for (let i = 0; i < lineShowData.length; i++) {
                                lineRate.after("<tr class='line-info-detail' style='font-size: 35px'><td align='left'>" + lineShowData[i].lineCode + "线：<span>" + lineShowData[i].takt + "</span>min/件，实际<span>" + lineShowData[i].realTakt + "</span>min/件（计划：<span>" + lineShowData[i].planSum + "</span>件；已生产：<span>" + lineShowData[i].realSum + "</span>件）</td></tr>")
                            }
                        } else {
                            $("#rate").attr("rowspan", 4);
                            var defaultData = "<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>一线：<span>000</span>min/件，实际<span>000</span>min/件（计划：<span>000</span>，已生产：<span>000</span>件）</td></tr>" +
                                "<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>二线：<span>000</span>min/件，实际<span>000</span>min/件（计划：<span>000</span>，已生产：<span>000</span>件）</td></tr>" +
                                "<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>三线：<span>000</span>min/件，实际<span>000</span>min/件（计划：<span>000</span>，已生产：<span>000</span>件）</td></tr>";
                            lineRate.after(defaultData);
                            // for (let i = 0; i <= 2; i++) {
                            //     lineRate.after("<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>" + lineShowData[i].lineCode + "线：<span>000</span>min/件，实际<span>000</span>min/件（计划：<span>000</span>，已生产：<span>000</span>件）</td></tr>");
                            // }
                        }
                        $("#lineInfo").addClass("text-center");
                        $("#lineInfo").children().addClass('text-center');
                        //最新录入
                        $(".news-info").remove();
                        if (lineNewsData && lineNewsData.length > 0) {
                            $("#latestNewsInfo").attr("rowspan",lineNewsData.length + 1);
                            lineNewsData.reverse();
                            for (let i = 0; i < lineNewsData.length; i++) {
                                latestNews.after("<tr class='news-info'><td class='text-center' style='font-size: 35px'>" + lineNewsData[i].lineCode + "线：<span>" + lineNewsData[i].product.productCode + "</span>（ <span>"+lineNewsData[i].serialNumber+"</span> ) </td></tr>");
                            }
                        } else {
                            $("#latestNewsInfo").attr("rowspan", 4);
                            var defaultData ="<tr class='news-info'><td class='text-center' style='font-size: 35px'>一线：<span>-----型号（流水号）</span></td></tr>"
                                +"<tr class='news-info'><td class='text-center' style='font-size: 35px'>二线：<span>-----型号（流水号）</span></td></tr>"
                                +"<tr class='news-info'><td class='text-center' style='font-size: 35px'>三线：<span>-----型号（流水号）</span></td></tr>";
                            latestNews.after(defaultData);
                        }
                        //右侧数据
                        rightTable.empty();
                        if(productNumShow && productNumShow.length > 0){
                            for(let i=0;i<productNumShow.length;i++){
                                // rightTable.append("<tr><td class='text-center' style='font-size: 30px'>"+productNumShow[i].product.productCode+"</td><td class='text-center' style='font-size: 30px'>"+productNumShow[i].planNum+"</td><td class='text-center' style='font-size: 30px'>"+productNumShow[i].realNum+"</td></tr>");
                                rightTable.append("<tr><td class='text-center' style='font-size: 25px'>"+productNumShow[i].product.productCode+"(<span>"+productNumShow[i].planNum+"</span>)</td><td class='text-center' style='font-size: 30px'><span>"+productNumShow[i].realNum+"</span></td></tr>");
                            }
                        }
                        //最新通告
                        if (data.tankShow.msg) {
                            // $("#msg").html(data.tankShow.msg.replace('/\n/g', "<br>"));
                            $("#msg").html(data.tankShow.msg.replace(/\n/g, "<br>"));
                        }
                    }
                }
            );
        }

        //实时显示时间
        function displayTime() {
            var date = new Date();
            var getYear = date.getFullYear() + 1;
            var getMonth = date.getMonth() + 1;
            getMonth = getMonth > 10 ? getMonth : ++getMonth;
            var getDate = date.getDate();

            var array = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var getDay = date.getDay();
            var getHours = date.getHours();
            getHours = getHours >= 10 ? getHours : "0" + getHours;
            var getMinutes = date.getMinutes();
            getMinutes = getMinutes >= 10 ? getMinutes : "0" + getMinutes;
            var getSeconds = date.getSeconds();
            getSeconds = getSeconds >= 10 ? getSeconds : "0" + getSeconds;

            $("#year").text(getYear);
            $("#month").text(getMonth);
            $("#date").text(getDate);

            $("#day").text(array[getDay]);
            $("#hours").text(getHours);
            $("#minutes").text(getMinutes);
            $("#seconds").text(getSeconds);


        }
    })

    //点击显示全屏
    function openView() {
        if (top.location != self.location) {
            top.location = self.location;
        }
    }


</script>

JOEYHHH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DHTMLX Kanban | 1.1.1JS看板
控件与插件之大全
03-26 1041
Kanban - JavaScript Kanban Board DHTMLX Kanban is a feature-packed JavaScript components library for visually arranging workflows and handling tasks of your project in a clear way via fully customizable boards and cards. This widget can be integrated with
通用的综合大数据数据可视化展示html页面源码
mazai5080的博客
04-30 5524
大家好，今天给大家介绍一款，通用的综合大数据数据可视化展示html页面源码（图1）。送给大家哦，获取方式在本文末尾。 图1 带区域地图（图2） 图2 动态图表（图3） 图3 各类统计图数据展示十分丰富（图4） 图4 代码完整，需要的朋友可以下载学习（图5） 图5 本源码编码：10149，需要的朋友，关注文末公众号，搜索10149，即可获取。 <!DOCTYPE html> <html> <head lang="en">
Verilog-AMS数据类型---wreal
元直的博客
07-27 6437
Verilog-AMS数据类型 --- wreal WREAL 是Verilog-AMS支持的一种新的数值模型。WREAL的特殊之处在于它使用有限的浮点数值的点来模拟一条电路工作曲线。而SPICE和Verilog-A的计算结果是一条理论上可以无限精度，包含无限点的的曲线。从某种程度上，WREAL的实现方式类似于Fast-Spice的查表点工作模式，其目的是进一步简化仿真，从而支持更大规模的模拟系统仿真。 使用WREAL的最大......
Python数据可视化 - 使用flask+echarts+html+Ajax实现数据分析可视化看板(附代码下载)
maiyida123的博客
11-23 3570
1. 介绍 目的：实现动态数据分析可视化看板 方法：使用HTML搭建网页，echarts实现可视化图表，使用Python的flask从后端传输数据通过Ajax实现动态更新 框架： 效果图： 2. 代码 所有代码较长站篇幅，这里仅放部分js与flask的代码 2.1 js 新老客户雷达图js代码 function echarts_l2() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getE
动态销售数据大屏看板.xlsx
最新发布
02-17
企业管理excel模板，人力销售等方面excel模板
电商销售活动数据可视化动态看板.xlsx
01-14
电商销售活动数据可视化动态看板.xlsx
java精益看板系统.zip
05-10
精益看板系统,以看板方法为核心,内嵌精益思想,研发过程中覆盖了丰富的技术实践。 系统在设计上服务端与客户端独立演进。 基础技术点: spring-boot spring-hateoas mybatis+mysql HSQL RSA Gradle Liquibase ...
VUE大屏数据看板面板
06-24
基于VUE写的数据看板，有九个模块，分别为：订单总量（柱状图），生产概况（数字面板），企业宣传（轮播图），产品质量分析（饼状图），客户分布（地图且有标点信息），客户订单排行（上下滚动），企业利润分析（柱...
生产运营数据看板.xlsx
07-02
生产运营数据看板.xlsx
地图数据可视化看板大屏幕模板,大屏数据可视化动态地图,HTML
09-10
地图数据可视化看板大屏幕模板，适用于大数据展示
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。经过大概一周左右的时间完美完成任务，同时也有50多个非常不错的源码案例分享给大家，效果图可以参考 https://blog.csdn.net/daokedream/article/details/110202385，供借鉴，数据展示的形式基本都差不多，拿过去改改就能用，需要的请拿走，有问题也可以一起交流。
easyui + jquery 开发实时看板项目总结
zhsalo的博客
12-28 3027
easyui + jquery 开发实时看板项目总结1 如果easyui 只是负责前台页面的展示，后台URL ： webapi , 这样的方式前台一定不能处理数据源，否则速度非常的慢。 如： 前台只是展示后台url 的部分数据，一开始我用js 即 ：easyui loadfilter 过滤数据。结果：慢 优化后： 我过滤数据源放到ashx 中，用c# lam
easyui动态增加datagrid列_6步制作Excel动态销售月报看板，数据可视化，高端大气一目了然...
weixin_39608748的博客
11-14 834
前面我们分享80个漂亮图表，其中有2个简单动态图表、一页纸仪表板、销售日报看板和周报看板，今天再分享1个漂亮的动态销售月报看板，需要的小伙伴快收藏备用，并及时关注后续课程。一、效果图二、数据源数据源与日报、周报基本一样，为公司2018年1月1日至12月31日的所有销售订单数据，为了方便后续计算月度数据，增加辅助列计算当前日期的月份，公式为I2=MONTH(B2)，函数MONTH可以返回日期中的月份...
easyui 动态设置单元格控件_可选择动态组合图表，数据再多也能清晰呈现，只需三步轻松搞定！...
weixin_39885683的博客
11-25 284
在进行图表数据制作的时候，相信许多朋友都会碰到一个问题，那就是数据维度较多的时候，一张图表不能完全的显示，这里我们就可以通过复选框，制作可选择的动态图表的方式，来清晰的展示我们的数据。从上面的效果图中我们可以看到，当我们勾选或取消上面的按钮的时候，下方的图表就会跟随者自动发生变化。通过这样的可选择动态图表的制作，在多维数组数据中我们就能够快速的进行各种指标的图表切换。下面我们就来具体学习...
数据可视化看板：基于 Echarts + Python Flask 动态实时大屏
Python学习与数据挖掘
10-06 4398
1、形象直观，有利于提高效率 岗位看板可视化使得部门之间、员工之间不必语言沟通，通过观察就可以了解运行流程和状况。而且由于看板可视化管理直观而简单，信息的传递速度大大加快，从而提高了生产效率。2、透明度高，便于配合和监督 岗位看板可视化要求生产管理的公开化。在各个生产环节上，什么人干、干什么、怎么干、干多长时间等问题都被明确。这样一来，各个岗位的员工首先可以做好本职工作，其次可以默契配合、相互监督，促进生产效率的提高。3、传递现场的生产信息，统一思想 生产现场人员众多，而且由于分工的不同导致信息传递不及时的
Excel数据动态看板制作：数据处理、数据分析、看板制作、插入切片器、图表类型
热门推荐
tcs066的博客
10-02 1万+
Excel数据动态看板制作-以教师薪酬统计为例 原始数据如图所示： 一、数据处理 1、工龄计算：=DATEDIF(G3,TODAY(),“Y”) 2、工龄工资计算：=IF(H350>500,500,H350) 3、出勤率计算： （1）插入列：起始日期，结束日期，工作日 （2）起始日期：=DATE(2020,AF3,1) （3）结束日期：=DATE(2020,AF3+1,0) （4）工作日：=NETWORKDAYS(L3,M3) （5）出勤率：=K3/N3（注意改成数字格式） 4、基本工资计算：
将html嵌在桌面实现动态高度可定制的动态桌面，桌面显示上显示动态网页
weixin_54430656的博客
01-02 3374
那种用视频实现的动态桌面壁纸就好比**把雕刻好的石板放在桌面低下**（视频要编辑很麻烦，自定义程度很低） 而用html实现动态桌面就好比把一块屏幕直接放桌面下方，屏幕嘛，想怎么该就怎么该，自定义程度很高
excel动态数据看板
07-28
Excel动态数据看板是指利用Excel软件创建的一个数据报表，可以实时显示和更新数据。通过使用Excel的数据透视表、图表和公式等功能，可以将数据以直观的方式展示出来，并能根据数据的变化实时更新报表。 动态数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值