HTML+CSS+JS数据可视化大屏平台模板实例11-设备监控

共8个文件

js：4个

css：2个

jpg：1个

版权申诉

数据可视化大屏

5星 · 超过95%的资源 166 浏览量 2022-03-25 08:48:35 上传评论 1 收藏 658KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML+CSS+JS数据可视化大屏平台模板实例11-设备监控.rar （8个子文件）

HTML+CSS+JS数据可视化大屏平台模板实例11-设备监控

理工云.html 11KB

HTML+CSS+JS数据可视化大屏平台模板实例11-设备监控.JPG 180KB

理工云_files

jquery-1.4.4.min.js 77KB

echarts.js 2.74MB

bootstrap.css 138KB

new_file.js 16KB

maps.js 13KB

index.css 4KB

<!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> <meta name="renderer" content="webkit"> <title>理工云</title> <link rel="stylesheet" type="text/css" href="./理工云_files/bootstrap.css"> <link rel="stylesheet" href="./理工云_files/index.css"> <script type="text/javascript" src="./理工云_files/jquery-1.4.4.min.js"></script><style type="text/css"></style> </head> <body>  <div class="main clearfix"> <div class="main-left"> <div class="border-container containertop"> <h5 class="name-title tile-size-color"> 设备状态 </h5> <div id="radar"> <div class="radarkong"> <p class="tile-size-color">设备总数 :<span class="Totalequipment"> 660个</span>统计时间 :<span> 2019.03.26 15:28</span></p> </div> <div class="pie-chart" id="pie-chart" _echarts_instance_="ec_1648168798365" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 342px; height: 223px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="513" height="334" style="position: absolute; left: 0px; top: 0px; width: 342px; height: 223px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> <ul class="SiteStatusList"> <li><i class="Statusnormal Statussame"></i>正常：<span>556</span></li> <li><i class="Statusemergency Statussame"></i>告警：<span>40</span></li> <li><i class="StatusOffline Statussame"></i>离线：<span>30</span></li> </ul> </div> </div> <div class="border-container containerbottom"> <div class="name-title tile-size-color"> 设备类型分布 </div> <div class="graduateyear"> <div class="bar-chart" id="bar-chart" _echarts_instance_="ec_1648168798366" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 342px; height: 256px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="513" height="384" style="position: absolute; left: 0px; top: 0px; width: 342px; height: 256px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> <ul class="SiteStatusList"> <li>本周数据</li> <li class="DataSwitch"><i class="ThisweekData Datasame" onclick="DataSwitch(this,1)"></i><i class="ThisweekData" onclick="DataSwitch(this,2)"></i></li> <li class="Defaultgray">本月数据</li> </ul> </div> </div> </div> <div class="main-middle"> <div class="border-container containertop"> <div class="name-title tile-size-color"> 故障设备区域分布情况 </div> <div id="mapadd"> <div class="mapleft"> <div class="progress2-chart" id="progress2-chart" _echarts_instance_="ec_1648168798371" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 179px; height: 273px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="268" height="409" style="position: absolute; left: 0px; top: 0px; width: 179px; height: 273px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div> <a href="http://yuanbaoshuju.com/bigscreen/12/index.html###" class="progressMore">更多></a> </div> <div class="map-chart" id="map-chart" _echarts_instance_="ec_1648168798372" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 353px; height: 273px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="529" height="409" style="position: absolute; left: 0px; top: 0px; width: 353px; height: 273px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas data-zr-dom-id="zr_1" width="529" height="409" style="position: absolute; left: 0px; top: 0px; width: 353px; height: 273px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px "Microsoft YaHei"; padding: 5px; left: 162px; top: 118px; pointer-events: none;"></div></div> <ul class="Devicestatus-List"> <li class="Online2">65.5% <span class="DevicestatusName">在线</span> </li> <li class="Online2">10.5% <span class="DevicestatusName">离线</span> </li> <li class="Online2">10.5% <span class="DevicestatusName">维护</span> </li> <li class="Online2">9.5% <span class="DevicestatusName">故障</span> </li> </ul> </div> </div> <div class="border-container containerbottom borderno-container"> <ul class="teacher-pie clearfix"> <li class="teacherList"> <div class="name-title tile-size-color"> 故障时段分布 </div> <div id="courserate"> <div class="line-chart" id="line-chart" _echarts_instance_="ec_1648168798367" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 271px; height: 256px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="406" height="384" style="position: absolute; left: 0px; top: 0px; width: 271px; height: 256px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> <ul class="SiteStatusList"> <li><i class="Statusnormal Statussame"></i>合计故障次数 <span>556</span></li> </ul> </div> </li> <li class="teacherList"> <div class="name-title tile-size-color"> 故障类型分布 </div> <div class="bars-chart" id="bars-chart" _echarts_instance_="ec_1648168798368" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 265px; height: 256px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="397" height="384" style="position: absolute; left: 0px; top: 0px; width: 265px; height: 256px; user-select: none; -webkit-tap-highlight-color: rg

评论收藏

内容反馈

版权申诉