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

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>月<spanid="date">00</span>日&nbsp;&nbsp;<span id="day">000</span>&nbsp;&nbsp;<spanid="hours">00</span>时<span id="minutes">00</span>分<spanid="seconds">00</span>秒</h2><table class="table table-bordered text-center" style="margin-left:0px"><tr id="dayNumber"><td class="text-center" colspan='2'>油箱车间安全运行天数：<spanid="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>

看板系统的表格动态数据显示相关推荐

【高级PDF库】上海道宁为您提供先进的.Net库，完全控制您的PDF创建工作流程，在WEB或任何服务器系统上创建动态PDF
Pdfium.Net SDK是先进的.Net library 用于生成.操作和查看可移植文档格式的文件道宁专注于软件工具经销为您带来高级PDF库可完全控制您的PDF创建工作流程提供高级c# ...
java POI对word中的表格动态插入固定数据，以及插入不确定数量的的数据
java POI对word中的表格动态插入固定数据,以及插入不具体的数据遇到个项目本来是用Execl导出的,相对简单,客户要求用Word导出,并按照他们给的模板进行导出: 从网上百度了一下,然后自己 ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
php 动态添加表格行,jQuery给html表格动态添加行方法总结
这次给大家带来jQuery给html表格动态添加行方法总结,jQuery给html表格动态添加行的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了jQuery实现html表格动态添加新 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
FusionChart实现柱状图、饼状图的动态数据显示附Demo
最近做的项目中需要用饼状图显示--'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
android 系统gpu 调试_基于Android系统的GPU动态调频方案 | Imagination中文技术社区
针对移动终端上GPU的高功耗问题,提出一种基于Android系统的GPU动态调频方案.方案根据各种应用对GPU的性能需求,引入了GPU的频率一性能模型,包括选择工作频率和测量相对性能的方法.动态调频算 ...
Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据
目录 Vue 格式formatter 1.Vue表格列表数据显示百分号% 2.Vue显示数字改为自定义内容 Vue element-ui 数据表头下拉,点击筛选数据 Vue 格式formatter 初 ...

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

看板系统的表格动态数据显示相关推荐

最新文章

热门文章