企业推广类网站,十堰做网站公司,网站查外链,透明网站模板#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 动图演示 文末获取源码 数据表格 代码目录 主要代码实现 主页HTML布局
!DOCTYPE html
htmlheadmeta charsetUTF-8title数据大屏/titlelink relstylesheet hrefcss/style.css /script typetext/javascript srcjs/jquery-1.8.0.min.js/script/headbodyheader物联网平台数据统计span idlocaltime style font-size:14px; position: absolute; right: 30px; top:-20px; /span/headerdiv idcontentdiv classcontent_leftdiv classdtuplcdiv classdtudiv idcontainer styleheight: 100%;/div /divdiv classplcdiv idcontainer1 styleheight: 100%/div/div/div!--DTU和PLC完--div classonlinediv classtitleimg srcimages/icon01.png / 设备在线情况/divdiv classonline_con idcontainer2/div/divdiv classindustrydiv classtitleimg srcimages/icon02.png / 接入工厂类型/divdiv classindustry_con idcontainer3/div/div/divdiv classcontent_centerdiv classcenter_topdiv classtitleimg srcimages/icon03.png / 平台数据分布/divdiv classcenter_top_con iddistribution_map/div/divdiv classcenter_bottable classpanel-tablebordercolor#0d48e0 border1thead bgcolor#0e4ae0 aligncenter tr height40th colspan6img srcimages/icon04.png / 监控列表/th/tr/theadtbodytr classaaa aligncentertd v-foritem in factoryHeader stylecolor: #00fcff; font-size: 18px; padding: 5px 0;{{ item.categories }}/td/trtr v-fory in factory.slice(0,6) classaaa stylefont-size: 16px; aligncenter td{{ y.company }}/tdtd{{ y.dtuCnt }}/tdtd{{ y.plcCnt }}/tdtd{{ y.dataCnt }}/tdtd{{ y.alarm }}/tdtd width250button classb1 click_pop报警记录/buttonbutton classb2 click_pop2历史数据/buttonbutton classb3 click_pop3组态应用/button/td/tr/tbody/table/div/divdiv classcontent_rightdiv classreportdiv classreport1p告警信息/psmall{{alarm.alarm}}条/small/divdiv classreport2p故障信息/psmall{{alarm.fault}} 条/small/div/divdiv classnews_reportdiv classtitleimg srcimages/icon05.png / 报警记录/divdiv classnews_listulli v-foritem in almMsg.slice(0,3) classli02{{ item.msg }}/li/ul/div/divdiv classdata_boxdiv classtitleimg srcimages/icon06.png / 数据记录/divdiv classdata_con idcontainer4/div/div/div/div!--遮罩层--div classbgPop/div!--弹出框--div classpopdiv classpop-top报警记录span classpop-close/span/divdiv classpop-contenttable classpanel-table bordercolor#deefff border1thead bgcolor#971212 aligncenter tr height38th字段/thth字段/thth字段/thth字段/thth字段/th/tr/theadtbodytr classaaa stylefont-size: 16px; aligncenter tdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr/tbody/table/divdiv classpop-footinput typebutton value确定 classpop-cancel pop-close/div/divscript$(document).ready(function () {$(.pop-close).click(function () {$(.bgPop,.pop).hide();});$(.click_pop).click(function () {$(.bgPop,.pop).show();});})/script!--遮罩层--div classbgPop2/div!--弹出框--div classpop2div classpop-top历史记录span classpop-close/span/divdiv classpop-contenttable classpanel-table bordercolor#deefff border1thead bgcolor#10aaa5 aligncenter tr height38th字段/thth字段/thth字段/thth字段/thth字段/th/tr/theadtbodytr classaaa stylefont-size: 16px; aligncenter tdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/trtr classaaa stylefont-size: 16px; aligncenter tdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/trtr classaaa stylefont-size: 16px; aligncenter tdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/trtr classaaa stylefont-size: 16px; aligncenter tdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr/tbody/table/divdiv classpop-footinput typebutton value确定 classpop-cancel pop-close/div/div/body
/htmlCSS样式文件
body {margin: 0;padding: 0;height: 100%;
}html {font-family: 微软雅黑;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;
}body {background-color: #0b122e;color: #fff;position: relative;font-family: 微软雅黑;
}
table{border-collapse:collapse;}
img{vertical-align: middle;}
ul { margin: 0; padding: 0;}
.clearfix:before,
.clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;overflow: hidden;
}.clearfix {*zoom: 1;
}
作品来自于网络收集、侵权立删
上面的图片文件以及js文件等需要引入进来 源码获取 大家点赞、收藏、关注、评论啦 、查看微信公众号获取 打卡 文章 更新 58/ 100天 专栏推荐阅读 EChartsHTML5大数据模板《100套》 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
