数据大屏：物联网大数据可视化源码html模板.rar

共80个文件

png：40个

js：30个

html：2个

版权申诉

html

data

5星 · 超过95%的资源 50 浏览量 2022-04-01 21:19:55 上传评论收藏 668KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

数据大屏：物联网大数据可视化源码html模板.rar （80个子文件）

数据大屏：物联网大数据可视化源码html模板

编码LY012大屏物联网大数据可视化源码html模板

css

._style.css 4KB

style.css 6KB

大屏11.jpg 43KB

images

new_list02.png 3KB

._zuo2.png 4KB

._bg_report.png 4KB

._hangye.png 4KB

._icon06.png 4KB

zuoyi.png 3KB

center01.png 17KB

report02.png 13KB

._zuoyi.png 4KB

._icon01.png 4KB

._center01.png 4KB

bg_report.png 8KB

report01.png 15KB

zuo2.png 7KB

hangye.png 9KB

._icon05.png 4KB

._center02.png 4KB

bg_data.png 9KB

icon01.png 4KB

icon03.png 4KB

center02.png 9KB

icon05.png 4KB

._icon02.png 4KB

icon04.png 4KB

._icon04.png 4KB

._new_list01.png 4KB

._line.png 4KB

bottom_line.png 3KB

line.png 3KB

._bg_top.png 4KB

._bottom_line.png 4KB

._report02.png 4KB

icon06.png 4KB

bg_top.png 81KB

icon02.png 4KB

._bg_data.png 4KB

._new_list02.png 4KB

._report01.png 4KB

new_list01.png 3KB

._icon03.png 4KB

._css 4KB

temp

._angular.min.js 4KB

._echarts-gl.js 4KB

echarts-gl.js 9KB

angular.min.js 144KB

._temp 4KB

._index.html 4KB

index.html 10KB

._大屏11.jpg 4KB

jquery.min.js 84KB

industry.js 22KB

._vue.min.js 4KB

index.js 3KB

._map.js 4KB

._echarts.min.js 4KB

online.js 1KB

._data.js 4KB

china.js 59KB

vue.min.js 75KB

DTU.js 2KB

jquery-1.8.0.min.js 90KB

._jquery-1.8.0.min.js 4KB

._china.js 4KB

._times.js 4KB

._DTU.js 4KB

echarts.min.js 701KB

._index.js 4KB

map.js 2KB

._online.js 4KB

._industry.js 4KB

._PLC.js 4KB

times.js 1KB

data.js 3KB

PLC.js 1KB

._jquery.min.js 4KB

._js 4KB

._images 4KB

<!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>  <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>&nbsp

评论收藏

内容反馈

版权申诉