|
|
<!DOCTYPE html><html><head> <title></title> <link href="~/Content/css/framework-font.css" rel="stylesheet" /> <link href="~/Content/css/framework-ui.css" rel="stylesheet" /> <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script> <link href="~/Content/css/framework-theme.css" rel="stylesheet" /> <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/css/framework-theme.css" rel="stylesheet" /> <script src="~/Content/js/charts/Chart.js"></script> <script> $(function () { GetSalaryChart(); GetLeaveChart();
var speed = 10//速度数值越大速度越慢 var demo2 = document.getElementById("demo2"); var demo = document.getElementById("demo"); var demo1 = document.getElementById("demo1"); demo2.innerHTML = demo1.innerHTML function Marquee() { if (demo2.offsetWidth - demo.scrollLeft <= 0) demo.scrollLeft -= demo1.offsetWidth else { demo.scrollLeft++ } } var MyMar = setInterval(Marquee, speed) demo.onmouseover = function () { clearInterval(MyMar) } demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } }); function GetSalaryChart() { var randomScalingFactor = function () { return Math.round(Math.random() * 100) }; var lineChartData = { labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] } ] } //var ctx = document.getElementById("salarychart").getContext("2d"); //window.myLine = new Chart(ctx).Line(lineChartData, { // responsive: false, // bezierCurve: false //}); } function GetLeaveChart() { var randomScalingFactor = function () { return Math.round(Math.random() * 100) }; var a_value = randomScalingFactor(); var b_value = randomScalingFactor(); var c_value = randomScalingFactor(); var d_value = randomScalingFactor(); var doughnutData = [ { value: a_value, color: "#F7464A", highlight: "#FF5A5E", label: "事假" }, { value: b_value, color: "#46BFBD", highlight: "#5AD3D1", label: "病假" }, { value: c_value, color: "#FDB45C", highlight: "#FFC870", label: "公休假" }, { value: d_value, color: "#949FB1", highlight: "#A8B3C5", label: "调休假" } ]; //var ctx = document.getElementById("leavechart").getContext("2d"); //window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false }); //$("#a_value").html(a_value + "小时"); //$("#b_value").html(b_value + "小时"); //$("#c_value").html(c_value + "小时"); //$("#d_value").html(d_value + "小时"); }
</script></head><body> <div id="areascontent"> <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;"> <div class="panel panel-default"> <div class="panel-heading"> <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>欢迎页面 <div style="float: right; position: relative; top: -4px; right: 0px;"> <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="400" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> </div> @*<div class="panel-body"> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #fc8675;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-user fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #6bafbd;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-hdd-o fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #f3ce85;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-shopping-cart fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #949FB1;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-gavel fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #65cea7; margin-right: 0px;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-truck fa-3x"></i> </div> </div> </div> </div>*@ </div> </div> <div class="rows" style="margin-bottom: 1%; "> <div style="float: left; width: 100%;height:60%"> <div style=" border: 1px solid #e6e6e6; background-color: #fff;"> @*<img src="~/Content/img/banner3.jpg" />*@ <DIV id=demo style="OVERFLOW: hidden;height:60% "> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id=demo1> <!-- 要循环滚动的图片 --> <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <a> <img src="~/Content/img/banner1.jpg" border="0" style="height:550px" /> </a> </td> <td align="center" > <a> <img src="~/Content/img/banner2.jpg" border="0" style="height:550px" /> </a> </td> <td align="center"> <a > <img src="~/Content/img/banner3.jpg" border="0" style="height:550px" /> </a> </td> @*<td align="center"> <a> <img src="~/Content/img/banner4.jpg" border="0" style="height:90%" /> </a> </td>*@ </tr> </table> </td> <TD id=demo2 width=1></TD> </tr> </table> </DIV> </div> </div> @*<div style="float: right; width: 30%;"> <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>请假统计</div> <div class="panel-body" style="padding-top: 20px;"> <canvas id="leavechart" style="height: 160px; width: 100%;"></canvas> <div style="text-align: center; padding-top: 20px;"> <span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>事假</span> <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>病假</span> <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>公休假</span> <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #949FB1; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>调休假</span> </div> <div style="margin-top: 20px; padding-top: 18px; height: 60px; border-top: 1px solid #e6e6e6;"> <div style="width: 25%; text-align: center; float: left;"> <span id="a_value">16.5小时</span> <p style="color: #a1a1a1">事假</p> </div> <div style="width: 25%; text-align: center; float: left;"> <span id="b_value">7.5小时</span> <p style="color: #a1a1a1">病假</p> </div> <div style="width: 25%; text-align: center; float: left;"> <span id="c_value">13小时</span> <p style="color: #a1a1a1">公休假</p> </div> <div style="width: 25%; text-align: center; float: left;"> <span id="d_value">19小时</span> <p style="color: #a1a1a1">调休假</p> </div> </div> </div> </div> </div> </div>*@ </div> @*<div class="rows" style="overflow: hidden;"> <div style="float: left; width: 34%; margin-right: 1%;"> <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-thumbs-o-up fa-lg" style="padding-right: 5px;"></i>最新签约</div> <div class="panel-body"> <ul> <li><a href="#">南京森鹿皮件服饰有限公司</a><span class="time">2016-07-21</span></li> <li><a href="#">曲靖市绿能燃气运输有限公司</a><span class="time">2016-07-20</span></li> <li><a href="#">青海航天信息有限公司</a><span class="time">2016-07-19</span></li> <li><a href="#">吉林省蔬菜花卉科学研究院</a><span class="time">2016-07-17</span></li> <li><a href="#">青海省广播电视信息网络股份有限公司</a><span class="time">2016-07-17</span></li> <li><a href="#">国营长空精密机械制造公司</a><span class="time">2016-07-13</span></li> <li><a href="#">广东友元国土信息工程有限公司</a><span class="time">2016-07-12</span></li> <li><a href="#">广东友元国土信息工程有限公司</a><span class="time">2016-07-12</span></li> </ul> </div> </div> </div> </div> <div style="float: left; width: 34%; margin-right: 1%;"> <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>通知公告</div> <div class="panel-body"> <ul> <li><a href="#">【通知】新版员工守则，即日执行</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】OA办公使用指南</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】劳动节集体出游指南</a><span class="time">2016-07-21</span></li> <li><a href="#">【通知】2016年G20财长和央行行</a><span class="time">2016-07-21</span></li> <li><a href="#">【通知】2016年G20财长和央行行</a><span class="time">2016-07-21</span></li> <li><a href="#">【通知】品牌价值的最佳选择</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】采购商城全新升级自营业正品</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】采购商城全新升级自营业正品</a><span class="time">2016-07-21</span></li> </ul> </div> </div> </div> </div> <div style="float: right; width: 30%;"> <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>企业文化</div> <div class="panel-body"> <ul> <li><a href="#">创新企业党建思想政治工作</a><span class="time">2016-07-02</span></li> <li><a href="#">现代国有企业道德体系初构</a><span class="time">2016-06-18</span></li> <li><a href="#">国有企业文化问题根源及文化重塑任务分析</a><span class="time">2016-06-26</span></li> <li><a href="#">国有企业文化建设必须突出员工文化</a><span class="time">2016-04-20</span></li> <li><a href="#">加强企业公民建设 推进企业和谐发展</a><span class="time">2016-03-08</span></li> <li><a href="#">不断提升大庆精神 实现企业持续发展</a><span class="time">2016-02-22</span></li> <li><a href="#">科学发展作指导 人水和谐路更宽</a><span class="time">2016-02-15</span></li> <li><a href="#">科学发展作指导 人水和谐路更宽</a><span class="time">2016-02-15</span></li> </ul> </div> </div> </div> </div> </div>*@ </div> <style> #copyrightcontent { height: 30px; line-height: 29px; overflow: hidden; position: absolute; top: 100%; margin-top: -30px; width: 100%; background-color: #fff; border: 1px solid #e6e6e6; padding-left: 10px; padding-right: 10px; }
.dashboard-stats { float: left; width: 20%; }
.dashboard-stats-item { position: relative; overflow: hidden; color: #fff; cursor: pointer; height: 105px; margin-right: 25px; margin-bottom: 10px; padding: 20px 20px; }
.dashboard-stats-item .m-top-none { margin-top: 2px; }
.dashboard-stats-item h2 { font-size: 35px; font-family: inherit; line-height: 1.1; font-weight: 500; }
.dashboard-stats-item h5 { font-size: 14px; font-family: inherit; margin-top: 3px; line-height: 1.1; }
.dashboard-stats-item .stat-icon { position: absolute; top: 10px; right: 10px; font-size: 30px; opacity: .3; }
.dashboard-stats i.fa.stats-icon { width: 50px; padding: 20px; font-size: 50px; text-align: center; color: #fff; height: 50px; border-radius: 10px; }
.panel-default { border: none; border-radius: 0px; margin-bottom: 0px; box-shadow: none; -webkit-box-shadow: none; }
.panel-default > .panel-heading { color: #777; background-color: #fff; border-color: #e6e6e6; padding: 10px 10px; }
.panel-default > .panel-body { padding: 10px; padding-bottom: 0px; }
.panel-default > .panel-body ul { overflow: hidden; padding: 0; margin: 0px; margin-top: -5px; }
.panel-default > .panel-body ul li { line-height: 27px; list-style-type: none; white-space: nowrap; text-overflow: ellipsis; }
.panel-default > .panel-body ul li .time { color: #a1a1a1; float: right; padding-right: 5px; } </style></body></html>
|
