HTML+CSS+JS数据可视化大屏平台模板实例7-智慧建筑资源-CSDN文库

共5个文件

js：2个

jpg：1个

html：1个

版权申诉

数据可视化大屏

5星 · 超过95%的资源 129 浏览量 2022-03-25 08:30:16 上传评论收藏 370KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML+CSS+JS数据可视化大屏平台模板实例7-智慧建筑.rar （5个子文件）

HTML+CSS+JS数据可视化大屏平台模板实例7-智慧建筑

建筑智慧工地管控.html 31KB

HTML+CSS+JS数据可视化大屏平台模板实例7-智慧建筑.JPG 250KB

建筑智慧工地管控_files

app.css 4KB

jdjh.js 18KB

echarts.min.js 455KB

<!DOCTYPE html>  <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <title>建筑智慧工地管控</title> <link rel="stylesheet" href="./建筑智慧工地管控_files/app.css"> <script type="text/javascript" src="./建筑智慧工地管控_files/echarts.min.js"></script><style type="text/css"></style> <script type="text/javascript" src="./建筑智慧工地管控_files/jdjh.js"></script> <script type="text/javascript"> function getCurDate() { var d = new Date(); var week; switch (d.getDay()) { case 1: week = "星期一"; break; case 2: week = "星期二"; break; case 3: week = "星期三"; break; case 4: week = "星期四"; break; case 5: week = "星期五"; break; case 6: week = "星期六"; break; default: week = "星期天"; } var years = d.getFullYear(); var month = add_zero(d.getMonth() + 1); var days = add_zero(d.getDate()); var hours = add_zero(d.getHours()); var minutes = add_zero(d.getMinutes()); var seconds = add_zero(d.getSeconds()); var ndate = years + "年" + month + "月" + days + "日 " + hours + ":" + minutes + ":" + seconds + " " + week; var divT = document.getElementById("logInfo"); divT.innerHTML = ndate; } function add_zero(temp) { if (temp < 10) return "0" + temp; else return temp; } setInterval("getCurDate()", 100); </script> </head> <body class="bg01"> <div class="header"> <h1 class="header-title">建筑智慧工地管控</h1> <div id="logInfo" style="text-align: left;color: #fff;position: relative;left: 10px;">2022年03月25日 08:22:28 星期五</div> </div> <div class="wrapper"> <div class="content"> <div class="col col-l"> <div class="xpanel-wrapper xpanel-wrapper-55"> <div class="xpanel xpanel-l-t"> <div class="title">项目概况</div> <div class="bcontent"> <ul> <li class="leftrt">工程名称：</li> <li class="rightrt">新建工程</li> <li class="leftrt">工程类型：</li> <li class="rightrt">水电</li> <li class="leftrt">工程状态：</li> <li class="rightrt">正在施工</li> <li class="leftrt">业主单位：</li> <li class="rightrt">项目管理中心</li> <li class="leftrt">施工单位：</li> <li class="rightrt">输变电分公司</li> <li class="leftrt">建管单位：</li> <li class="rightrt">建设部</li> <li class="leftrt">监理单位：</li> <li class="rightrt">**监理有限公司</li> <li class="leftrt">计划开始时间：</li> <li class="rightrt">2019-10-21</li> <li class="leftrt">计划完成时间：</li> <li class="rightrt">2019-10-21</li> <li class="leftrt">实际开始时间：</li> <li class="rightrt">2019-10-21</li> <li class="leftrt">实际完成时间：</li> <li class="rightrt">2019-10-21</li> </ul> </div> </div> </div> <div class="xpanel-wrapper xpanel-wrapper-45"> <div class="xpanel xpanel-l-b"> <div class="title">项目人员出勤率</div> <div id="ryCharts" class="bcontent" _echarts_instance_="ec_1648167712388" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"><div style="position: relative; overflow: hidden; width: 313px; height: 224px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="469" height="336" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 313px; height: 224px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> </div> </div> <div class="col col-c"> <div class="xpanel-wrapper xpanel-wrapper-55"> <div class="xpanel xpanel-c-b"> <div class="title title-long" style="padding-left:25px">项目进度甘特图</div> <div id="gCharts" class="bcontent" style="height: 92%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1648167712387"><div style="position: relative; overflow: hidden; width: 598px; height: 266px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="897" height="399" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 598px; height: 266px; 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: 355px; top: 96px;">综合楼基础:<br>开始时间：NaN.NaN.NaN<br>结束时间：-<br>计划开始时间：2019.3.8<br>计划完成时间：2019.4.17</div></div> </div> </div> <div class="xpanel-wrapper xpanel-wrapper-45"> <div class="xpanel xpanel-c-b"> <div class="title title-long" style="padding-left:25px">双代号时标网络图</div> <div id="container" class="bcontent" style="height: 85%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1648167712386"><div style="position: relative; overflow: hidden; width: 598px; height: 201px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="897" height="301" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 598px; height: 201px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> </div> </div> <div class="col col-r"> <div class="xpanel-wrapper xpanel-wrapper-25"> <div class="xpanel xpanel-r-t"> <div class="title">机具管控出勤率</div> <div id="jqCharts" class="bcontent" _echarts_instance_="ec_1648167712389" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"><div style="position: relative; overflow: hidden; width: 313px; height: 135px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="469" height="202" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 313px; height: 135px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> </div> <div class="xpanel-wrapper xpanel-wrapper-25"> <div class="xpanel xpanel-r-m"> <div class="title">违章情况分析率</div> <div id="wzCharts" class="bcontent" _echarts_instance_="ec_1648167712390" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"><div style="position: relative; overflow: hidden; width: 313px; height: 135px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="469" height="202" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 313px; height: 135px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> </div>

评论收藏

内容反馈

版权申诉