博主主页：猫头鹰源码
博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作
主要内容：毕业设计(Javaweb项目|小程序|Python|HTML|数据可视化|SSM|SpringBoot|Vue|Jsp|PHP等)、简历模板、学习资料、面试题库、技术咨询、文档编写和辅导、论文降重、长期答辩答疑辅导、腾讯会议一对一专业讲解辅导答辩
☑️ 文末联系获取👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟
2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅
2024最新精品毕业设计项目，已整理自取
感兴趣可以先收藏起来，以防走丢，有任何选题、文档编写、代码问题也可以咨询我们
动图演示：文末白嫖源码
代码结构
主要代码实现
index.html布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据大屏</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> </head> <body> <header> 物联网平台数据统计 <span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span> </header> <div id="content"> <div class="content_left"> <div class="dtuplc"> <div class="dtu"> <div id="container" style="height: 100%;"></div> </div> <div class="plc"> <div id="container1" style="height: 100%"></div> </div> </div> <!-- DTU和PLC完 --> <div class="online"> <div class="title"><img src="images/icon01.png" /> 设备在线情况</div> <div class="online_con" id="container2"> </div> </div> <div class="industry"> <div class="title"><img src="images/icon02.png" /> 接入工厂类型</div> <div class="industry_con" id="container3"></div> </div> </div> <div class="content_center"> <div class="center_top"> <div class="title"><img src="images/icon03.png" /> 平台数据分布</div> <div class="center_top_con" id="distribution_map"> </div> </div> <div class="center_bot"> <table class="panel-table"bordercolor="#0d48e0" border="1"> <thead bgcolor="#0e4ae0" align="center" > <tr height="40"> <th colspan="6"><img src="images/icon04.png" /> 监控列表</th> </tr> </thead> <tbody> <tr class="aaa" align="center"> <td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td> </tr> <tr v-for="y in factory.slice(0,6)" class="aaa" style="font-size: 16px;" align="center" > <td>{{ y.company }}</td> <td>{{ y.dtuCnt }}</td> <td>{{ y.plcCnt }}</td> <td>{{ y.dataCnt }}</td> <td>{{ y.alarm }}</td> <td width="250"> <button class="b1 click_pop">报警记录</button> <button class="b2 click_pop2">历史数据</button> <button class="b3 click_pop3">组态应用</button> </td> </tr> </tbody> </table> </div> </div> <div class="content_right"> <div class="report"> <div class="report1"> <p>告警信息</p> <small>{{alarm.alarm}}条</small> </div> <div class="report2"> <p>故障信息</p> <small>{{alarm.fault}} 条</small> </div> </div> <div class="news_report"> <div class="title"><img src="images/icon05.png" /> 报警记录</div> <div class="news_list"> <ul> <li v-for="item in almMsg.slice(0,3)" class="li02"> {{ item.msg }} </li> </ul> </div> </div> <div class="data_box"> <div class="title"><img src="images/icon06.png" /> 数据记录</div> <div class="data_con" id="container4"> </div> </div> </div> </div> <!--遮罩层--> <div class="bgPop"></div> <!--弹出框--> <div class="pop"> <div class="pop-top"> 报警记录 <span class="pop-close">Ｘ</span> </div> <div class="pop-content"> <table class="panel-table" bordercolor="#deefff" border="1"> <thead bgcolor="#971212" align="center" > <tr height="38"> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> </tr> </thead> <tbody> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> </div> <div class="pop-foot"> <input type="button" value="确定" class="pop-cancel pop-close"> </div> </div> <script> $(document).ready(function () { $('.pop-close').click(function () { $('.bgPop,.pop').hide(); }); $('.click_pop').click(function () { $('.bgPop,.pop').show(); }); }) </script> <!--遮罩层--> <div class="bgPop2"></div> <!--弹出框--> <div class="pop2"> <div class="pop-top"> 历史记录 <span class="pop-close">Ｘ</span> </div> <div class="pop-content"> <table class="panel-table" bordercolor="#deefff" border="1"> <thead bgcolor="#10aaa5" align="center" > <tr height="38"> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> </tr> </thead> <tbody> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aaa" style="font-size: 16px;" align="center" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> </div> <div class="pop-foot"> <input type="button" value="确定" class="pop-cancel pop-close"> </div> </div> <script> $(document).ready(function () { $('.pop-close').click(function () { $('.bgPop2,.pop2').hide(); }); $('.click_pop2').click(function () { $('.bgPop2,.pop2').show(); }); }) </script> <!--遮罩层--> <div class="bgPop3"></div> <!--弹出框--> <div class="pop3"> <div class="pop-top"> 组态应用 <span class="pop-close">Ｘ</span> </div> <div class="pop-content"> 组态应用 </div> <div class="pop-foot"> <input type="button" value="确定" class="pop-cancel pop-close"> </div> </div> <script> $(document).ready(function () { $('.pop-close').click(function () { $('.bgPop3,.pop3').hide(); }); $('.click_pop3').click(function () { $('.bgPop3,.pop3').show(); }); }) </script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript" src="js/map.js"></script> <script type="text/javascript" src="js/times.js"></script> <script type="text/javascript" src="js/DTU.js"></script> <script type="text/javascript" src="js/PLC.js"></script> <script type="text/javascript" src="js/online.js"></script> <script type="text/javascript" src="js/industry.js"></script> <script type="text/javascript" src="js/data.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
css文件：
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; } header{width:100%; height: 90px; background: url(../images/bg_top.png) center no-repeat ; text-align: center; font-size: 36px; color: #00f6ff; line-height: 90px; margin: 0 auto;} #content{width: 1860px; height: 100%; margin: 20px auto 0 auto;} #content .content_left{width: 385px; height: 100%; float: left;} .content_left .dtuplc{width: 355px; height: 180px; padding: 15px 15px 0 15px; background: url(../images/zuoyi.png) top no-repeat;} .dtu{width: 177px; height: 180px; float: left;} .plc{width: 177px; height: 180px; float: left;} .content_left .online{width: 385px; height: 330px; float: left; background: url(../images/zuo2.png) no-repeat;} .content_left .title{width: 385px; height: 70px; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom no-repeat; text-align: center;} .content_left .title img{vertical-align: middle;} .online .online_con{width: 365px; height: 240px; padding: 10px; float: left;} .content_left .industry{width: 385px; height: 425px; float: left; background: url(../images/hangye.png) no-repeat; margin-top: 20px;} .industry .industry_con{width: 365px; height: 335px; padding: 10px; float: left;} #content .content_center{width: 1050px; height: 100%; float: left; margin-left: 20px;} .content_center .center_top{width: 1050px; height: 650px; float: left; background: url(../images/center01.png) no-repeat;} .content_center .title{width: 1050px; height: 70px; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom center no-repeat; text-align: center;} .content_center .title img{vertical-align: middle;} .content_center .center_top_con{ height: 550px; width: 1000px; padding: 10px; float: left;} .panel-table {text-align: left;color: #ccc;margin: 0 auto !important;width: 96%; margin-top: 20px !important;padding: 0.5rem 0 !important;font-size: 1.2rem;} .content_center .center_bot{width: 990px; height: 280px; float: left; background: url(../images/center02.png) no-repeat; margin-top: 20px; padding: 10px 30px;} tr.aaa:hover{background: #1d3152; cursor: pointer;} .b1{width: 70px; height: 25px; background: #FF0000; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;} .b2{width: 70px; height: 25px; background: #2897c4; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;} .b3{width: 70px; height: 25px; background: #36791a; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;} #content .content_right{width: 385px; height: 100%; float: right;} .content_right .report{width: 325px; height: 145px; line-height: 20px; float: left; background:url(../images/zuoyi.png) top no-repeat; padding: 35px 30px 0 30px;} .report1{width: 134px; height: 110px; background: url(../images/report01.png) center no-repeat; float: left; text-align: center; padding-top: 24px;} .report2{width: 134px; height: 110px; background: url(../images/report02.png) center no-repeat; float: right; text-align: center; padding-top: 24px;} .report p{ font-weight: bold; font-size: 18px; color: #ff0000;} .report small{font-size: 24px;} .content_right .news_report{width: 385px; height: 330px; margin-top: 20px; float: left; background: url(../images/bg_report.png) no-repeat;} .content_right .title{width: 385px; height: 70px; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom no-repeat; text-align: center;} .content_right .title img{vertical-align: middle;} .news_list{width: 350px; height: 240px; padding: 10px; font-size: 16px; float: left; overflow: hidden;} .news_list ul{list-style: none;} .news_list ul li{width:100%; height: 38px; float: left; line-height: 38px; padding-left: 15px;} .li01{background: url(../images/new_list01.png) left center no-repeat;} .li02{background: url(../images/new_list02.png) left center no-repeat; color: #FF0000;} .content_right .data_box{width: 385px; height: 420px; margin-top: 20px; float: left; background: url(../images/bg_data.png) no-repeat;} .data_con{width: 365px; height: 330px; float: left; padding: 10px;} /*弹窗*/ .pop,.pop2,.pop3 {display: none; width: 800px; min-height: 570px; max-height: 750px; height:570px; position: absolute; left: 0; right: 0; margin:auto; padding: 25px; z-index: 130; border-radius: 3px; background-color: #23509a; border: #fff solid 1px; box-shadow: 0 5px 18px rgba(100, 0, 0, .5); } .pop-top{ text-align: center; font-size: 20px; font-weight:bold; color: #ff6f05; height:40px; width:100%; background: url(../images/line.png) no-repeat bottom center;} .pop-top span{ float: right; cursor: pointer; color: #fff; font-weight: bold; display:black} .pop-foot{ height:50px; line-height:50px; width:100%; border-top: 1px #5682dc solid; text-align: right; } .pop-cancel{ padding:8px 15px; margin:15px 5px; border: none; border-radius: 5px; background-color: #ff6f05; color: #fff; cursor:pointer; } .pop-content{ height: 480px;} .bgPop,.bgPop2,.bgPop3{ display: none; position: absolute; z-index: 129; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2);}
作品来自于网络收集、侵权立删
由于js和css过多，上面只粘主页代码，其它的自行下载即可
源码获取
大家点赞、收藏、关注、评论啦 、联系下方获取👇🏻👇🏻👇🏻
专栏推荐阅读：
2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅
2024最新精品毕业设计项目，已整理自取
