基于html+css+JavaScript网页设计大作业-大屏数据统计+源代码+演示地址资源-CSDN文库

共11个文件

js：4个

png：3个

css：3个

版权申诉

html

javascript

76 浏览量 2024-06-19 02:40:47 上传评论收藏 567KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

057 大屏数据统计.zip （11个子文件）

057 大屏数据统计

echarts.min.js 701KB

monitor_sw.js 11KB

jquery.min.js 91KB

monitor.js 20KB

css

public.css 2KB

jianlixt.css 1017B

jianlisw.css 2KB

大屏数据统计.png 289KB

index.html 7KB

images

title-right.png 3KB

title-left.png 3KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link href="css/public.css" rel="stylesheet" type="text/css"/> <link href="css/jianlisw.css" rel="stylesheet" type="text/css"/> <title>大屏数据统计</title> </head> <body>  <div class="caption-title"> <i class="fl"><img src="images/title-left.png" ></i> <span class="biaoti fl">大屏数据统计</span> <i class="fr"><img src="images/title-right.png" ></i> </div>  <div class="zhenwen"> <div class="left_zs fl">  <div class="data-box1 left_tb fl"> <i class="topL"></i> <i class="topR"></i> <i class="bottomL"></i> <i class="bottomR"></i> <div class="data-title"> <b class="data-title-left fl">[</b> <span>项目概览</span> <b class="data-title-right fr">]</b> </div>  <div class="xmglan"> <ul class="xmgl_heard"> <li>当前</li> <li class="hove">历史</li> </ul> <div id="xmgl_cen"> <div class="xmgl_tb"> <ul class="xm_cszs"> <li>在建项目（个）:<span>100</span>个</li> <li> 在建工地面积（平米）：<span>100</span>万M</li> <li> <p>市政（%）:<span>100</span><cite>%</cite></p> <p>绿化（%）:<span>100</span><cite>%</cite></p> <p>房建（%）<span>100</span><cite>%</cite></p> </li> <li> <p>交建（%）<span>100</span><cite>%</cite></p> <p>其他（%）<span>100</span><cite>%</cite></p> </li> </ul> </div> <div class="xmgl_tb none"> <ul class="xm_cszs"> <li>在建项目（个）:<span>140</span>个</li> <li> 在建工地面积（平米）：<span>120</span>万M</li> <li> <p>市政（%）:<span>110</span><cite>%</cite></p> <p>绿化（%）:<span>140</span><cite>%</cite></p> <p>房建（%）<span>180</span><cite>%</cite></p> </li> <li> <p>交建（%）<span>10</span><cite>%</cite></p> <p>其他（%）<span>140</span><cite>%</cite></p> </li> </ul> </div> </div> </div> </div>  <div class="data-box1 left_tb fl mtop40"> <i class="topL"></i> <i class="topR"></i> <i class="bottomL"></i> <i class="bottomR"></i> <div class="data-title"> <b class="data-title-left fl">[</b> <span>项目人员信息状态</span> <b class="data-title-right fr">]</b> </div>  <div class="xmglan"> <div id="lytj" class="lytj"></div> <div class="wgrytj"> <span class="wgrytj_bt">务工人员工种统计</span> <div class="wgrytj_tb"> <div id="gztj" style="height:163px"></div> </div> </div> <div class="wgrytj"> <span class="wgrytj_bt">各公司现场人员统计</span> <div class="wgrytj_tb"> <div id="xcrytj" style="height:163px"></div> </div> </div> </div> </div> </div>  <div class="center_zs fl"> <div class="data-box1 box1-back"> <i class="topL"></i> <i class="topR"></i> <i class="bottomL"></i> <i class="bottomR"></i> <div class="data-title"> <b class="data-title-left">[</b> <span>仪表盘等展示</span> <b class="data-title-right">]</b> </div> </div> </div>  <div class="right_zs fl">  <div class="data-box1 right_tb "> <i class="topL"></i> <i class="topR"></i> <i class="bottomL"></i> <i class="bottomR"></i> <div class="data-title"> <b class="data-title-left">[</b> <span>巡检风险状态</span> <b class="data-title-right">]</b> </div>  <div class="ryclts"> <div id="xjfxzt" style="height:300px"></div> </div> </div>  <div class="data-box1 right_tb mtop40"> <i class="topL"></i> <i class="topR"></i> <i class="bottomL"></i> <i class="bottomR"></i> <div class="data-title"> <b class="data-title-left">[</b> <span>风险变化趋势</span> <b class="data-title-right">]</b> </div>  <div class="ryclts"> <div class="clearfix"><div id="fxbhqs" style="height:300px"></div></div> <div class="wgrytj"> <div class="wenti_dj"> <div id="wentidj" style="height:100px"></div> </div> <div class="wenti_bg"> <table width="200" border="1"> <tr> <td>类别</td> <td>发现总是</td> <td>重大问题</td> <td>一般问题</td> </tr> <tr> <td>质量问题</td> <td class="green">45</td> <td class="orange">300</td> <td class="green">40</td> </tr> <tr> <td>安全问题</td> <td class="green">36</td> <td class="orange">100</td> <td class="green">78</td> </tr> </table> </div> </div> </div> </div> </div> </div> <div class="h30 clearfix"></div> </body> <script src="js/jquery.min.js"></script> <script src="js/echarts.min.js"></script> <script src="js/monitor_sw.js"></script> <script> $(function(){ //分类选择 $(".xmgl_heard li").click(function(){ $(this).attr("class",""); $(this).siblings().attr("class","hove"); $("#xmgl_cen").find(".xmgl_tb").eq($(this).index()).removeClass("none").siblings().addClass("none") }); }) </script> </html>

评论收藏

内容反馈

版权申诉