Bez popisu

zhiShiChenDian.html 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>知识沉淀情况</title>
  7. <!--[if lt IE 9]>
  8. <meta http-equiv="refresh" content="0;ie.html" />
  9. <![endif]-->
  10. <meta name="keywords" content="">
  11. <meta name="description" content="">
  12. <link href="./css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
  13. <link href="./css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  14. <link href="./css/animate.min.css" rel="stylesheet">
  15. <link href="./css/style.min862f.css?v=4.1.0" rel="stylesheet">
  16. <link rel="stylesheet" href="./css/laydate/need/laydate.css" />
  17. <link rel="stylesheet" href="./css/huTotal.css" />
  18. <style>
  19. .clearfix:after {
  20. content: "";
  21. display: block;
  22. clear: both;
  23. }
  24. .zhishi{
  25. font-size: 12px;
  26. }
  27. .kpi-top{
  28. background: #f3f3f4;
  29. height: 60px;
  30. padding: 10px 20px;
  31. }
  32. .topCon{
  33. float: right;
  34. margin-right: 45px;
  35. }
  36. .kpi-content h2{
  37. font-size: 18px;
  38. margin-bottom: 20px;
  39. }
  40. .topCon input{
  41. width: 128px;
  42. padding: 2px 2PX 2PX 10PX;
  43. height: 28px;
  44. border: 1px solid #ebebeb;
  45. color: #1ab394;
  46. outline: none;
  47. vertical-align: middle;
  48. }
  49. .topCon .btn{
  50. background: #1ab394;
  51. color: #fff;
  52. padding: 3px 10px;
  53. outline: none;
  54. font-size: 12px;
  55. }
  56. .kpi-content{
  57. width: 90%;
  58. margin: 0 auto;
  59. }
  60. .kpi-table table{
  61. font-size: 12px;
  62. }
  63. .kpi-table table thead tr td {
  64. background: #1ab394;
  65. color: #fff;
  66. font-size: 14px;
  67. }
  68. </style>
  69. </head>
  70. <body class="gray-bg" style="background: #fefefe;">
  71. <div class="zhishi">
  72. <div class="kpi-top clearfix">
  73. <div class="topCon">
  74. 开始时间:
  75. <input type="text" class="laydate-icon" id="startTime"/>
  76. 结束时间:
  77. <input type="text" class="laydate-icon" id="endTime"/>
  78. <button class="btn sear">搜索</button>
  79. <button class="btn daochu ">导出</button>
  80. <button class="btn dayin" onclick="jquery.print()">打印</button>
  81. </div>
  82. </div>
  83. <div class="kpi-content">
  84. <div class="kpi-table">
  85. <h2 style="text-align: center;">知识沉淀情况</h2>
  86. <table class="table table-bordered text-center table-hover" style="width: 100%;">
  87. <thead>
  88. <tr>
  89. <td>工程师姓名</td>
  90. <td>需要形成的数量</td>
  91. <td>完成的数量</td>
  92. <td>完成率</td>
  93. </tr>
  94. </thead>
  95. <tbody class="tbody">
  96. <tr>
  97. <td>张三</td>
  98. <td>1</td>
  99. <td>90</td>
  100. <td>0</td>
  101. </tr>
  102. <tr>
  103. <td>张三</td>
  104. <td>1</td>
  105. <td>90</td>
  106. <td>0</td>
  107. </tr>
  108. <tr>
  109. <td>张三</td>
  110. <td>1</td>
  111. <td>90</td>
  112. <td>0</td>
  113. </tr>
  114. <tr>
  115. <td>张三</td>
  116. <td>1</td>
  117. <td>90</td>
  118. <td>0</td>
  119. </tr>
  120. <tr>
  121. <td>张三</td>
  122. <td>1</td>
  123. <td>90</td>
  124. <td>0</td>
  125. </tr>
  126. <tr>
  127. <td>张三</td>
  128. <td>1</td>
  129. <td>90</td>
  130. <td>0</td>
  131. </tr>
  132. <tr>
  133. <td>张三</td>
  134. <td>1</td>
  135. <td>90</td>
  136. <td>0</td>
  137. </tr>
  138. <tr>
  139. <td>张三</td>
  140. <td>1</td>
  141. <td>90</td>
  142. <td>0</td>
  143. </tr>
  144. <tr>
  145. <td>张三</td>
  146. <td>1</td>
  147. <td>90</td>
  148. <td>0</td>
  149. </tr>
  150. </tbody>
  151. <tfoot>
  152. <tr>
  153. <td>总计</td>
  154. <td>1</td>
  155. <td>90</td>
  156. <td>0</td>
  157. </tr>
  158. </tfoot>
  159. </table>
  160. <div style="color: red;">
  161. 注:默认显示当月1号0:00:00至当日23:59:59的数据
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <script src="./js/jquery.min.js"></script>
  167. <script src="./js/bootstrap.min.js?v=3.3.6"></script>
  168. <script src="./css/laydate/laydate.js"></script>
  169. <script src="./js/echarts.common.min.js"></script>
  170. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  171. <!--需要保存导出功能模块文件是在 highcharts.js 之后引入-->
  172. <!--<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>-->
  173. <!-- 客户端导出功能模块为可选选项 -->
  174. <!--<script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>-->
  175. <script>
  176. $(function(){
  177. laydate.skin('molv');
  178. laydate({
  179. elem: '#startTime',
  180. event: 'focus',
  181. format: 'YYYY-MM-DD', // 分隔符可以任意定义,该例子表示只显示年月
  182. // festival: true, //显示节日
  183. choose: function(datas){ //选择日期完毕的回调
  184. // alert('得到:'+datas);
  185. }
  186. });
  187. laydate({
  188. elem: '#endTime',
  189. event: 'focus',
  190. format: 'YYYY-MM-DD', // 分隔符可以任意定义,该例子表示只显示年月
  191. // festival: true, //显示节日
  192. choose: function(datas){ //选择日期完毕的回调
  193. // alert('得到:'+datas);
  194. }
  195. });
  196. })
  197. </script>
  198. </body>
  199. </html>