【Axure数据可视化大屏原型合集】之智慧行业智慧物联大数据可视化HTML版（物联网平台数据统计+新能源车联网综合大数据平台模板资源-CSDN文库

共58个文件

png：34个

js：19个

css：3个

版权申诉

axure

可视化

html

54 浏览量 2023-07-13 21:04:16 上传评论收藏 4.29MB ZIP 举报

在IT行业中，数据可视化是一种将复杂数据转化为易于理解的图形或图像表示的技术，它能够帮助用户快速洞察数据背后的模式、趋势和关联。本资源“【Axure数据可视化大屏原型合集】之智慧行业智慧物联大数据可视化HTML版”专注于物联网平台数据统计和新能源车联网综合大数据平台的模板设计，提供了丰富的可视化元素和交互体验，适用于各类企业进行大数据分析与展示。我们要了解Axure。Axure是一款强大的原型设计工具，特别适合制作高保真、交互式的网页和应用原型。通过Axure，设计师可以创建线框图、流程图、原型和规格文档，为开发团队提供清晰的项目需求和界面设计指南。在这个资源包中，"大数据可视化"是指将大量结构化和非结构化数据转换成图表、仪表盘等视觉元素，以便更直观地展示数据的特征。大数据可视化的应用广泛，例如在物联网(IoT)领域，可以实时监控设备状态、预测故障、优化资源配置。新能源车联网则利用大数据技术处理车辆产生的各种数据，如行驶轨迹、能耗、故障信息等，为交通管理、安全预警和智能服务提供支持。 "大屏"通常指的是专用于大型显示屏的数据展示，常用于会议室、控制室等场所，能同时展示多个关键指标，提升决策效率。这类设计通常要求高清晰度、强视觉冲击力以及良好的交互性。 "HTML版"意味着这些原型可以直接在浏览器中预览和测试，无需依赖特定的设计软件。HTML是超文本标记语言，是网页内容的基础结构，结合CSS和JavaScript可以实现动态效果和交互功能。文件名"智慧物联"可能包含的是物联网平台相关的数据统计和可视化模板，涵盖了物联网设备数据的收集、处理、分析和展示，这些模板可以快速应用于实际项目，减少从零开始设计的时间成本。这个资源集合对于需要构建大数据可视化系统的IT专业人士来说非常有价值，无论是物联网行业的数据监控还是新能源车联网的业务分析，都能从中获取到高效、直观的设计参考。通过Axure的原型设计，可以更有效地传达数据故事，推动业务智能化。

资源推荐

资源详情

资源评论

收起资源包目录

【Axure数据可视化大屏原型合集】之智慧行业智慧物联大数据可视化HTML版（物联网平台数据统计+新能源车联网综合大数据平台模板）.zip （58个子文件）

智慧物联

物联网平台数据统计

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

物联网监控平台.png 292KB

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

新能源车联网综合大数据平台

echarts.js 40KB

china.js 60KB

echarts.min.js 691KB

jquery-2.1.1.min.js 82KB

车联网监控平台.png 2.07MB

img

bj-2.png 3KB

info-img-4.png 4KB

bj-1.png 3KB

info-img-3.png 3KB

info-text.png 4KB

info-img-1.png 3KB

bj-4.png 3KB

info-title.png 3KB

bj-3.png 3KB

title.png 12KB

map_bg.png 1002KB

info-img-2.png 5KB

css

common.css 1KB

map.css 6KB

index.html 6KB

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

评论收藏

内容反馈

版权申诉