<!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">X</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">X</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> 
没有合适的资源?快使用搜索试试~ 我知道了~
【前端素材】大数据模板-013设备统计.zip
共37个文件
png:20个
js:15个
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 77 浏览量
2024-03-26
22:03:41
上传
评论
收藏 631KB ZIP 举报
温馨提示
大数据分析展示页面是一种专门用于呈现、分析和解读大数据的可视化界面,它结合了数据可视化技术、交互设计、数据分析算法以及用户界面设计等多方面的技术。通过大数据分析展示页面,用户能够直观地理解数据的分布情况、趋势变化以及潜在价值,从而做出更明智的决策。 大数据分析展示页面通过丰富的图表类型(如柱状图、折线图、饼图、散点图、热力图等)将大数据转化为直观、易于理解的图形展示。这些图表能够清晰地展示数据的分布、趋势和关联关系,帮助用户快速识别数据中的关键信息和模式。用户可以通过不同的颜色、大小、形状等视觉元素,快速把握数据的整体情况,发现潜在的风险和机会。 大数据分析展示页面提供了丰富的交互功能,使用户能够更深入地探索和分析数据。用户可以通过点击、拖动、缩放等操作,对数据进行筛选、排序、对比等操作,以获取更详细的信息和洞察。同时,用户还可以调整图表的参数和设置,根据需求自定义展示方式和分析角度。这种交互性分析功能使得用户可以更加灵活地操作数据,发现更多有价值的信息。
资源推荐
资源详情
资源评论
收起资源包目录
【前端素材】大数据模板-013设备统计.zip (37个子文件)
013设备统计
js
data.js 3KB
times.js 1KB
online.js 1KB
map.js 2KB
DTU.js 2KB
china.js 59KB
industry.js 22KB
echarts.min.js 701KB
jquery-1.8.0.min.js 90KB
index.js 3KB
PLC.js 1KB
jquery.min.js 84KB
vue.min.js 75KB
temp
echarts-gl.js 9KB
angular.min.js 144KB
css
style.css 6KB
index.html 10KB
images
icon01.png 4KB
bg_report.png 8KB
report01.png 15KB
center02.png 9KB
icon06.png 4KB
zuoyi.png 3KB
zuo2.png 7KB
center01.png 17KB
icon03.png 4KB
line.png 3KB
report02.png 13KB
new_list02.png 3KB
bg_data.png 9KB
bg_top.png 81KB
icon04.png 4KB
new_list01.png 3KB
icon05.png 4KB
bottom_line.png 3KB
hangye.png 9KB
icon02.png 4KB
共 37 条
- 1
资源评论
枫蜜柚子茶
- 粉丝: 7397
- 资源: 5103
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功