安图前端代码

haoDuanChaXun.html 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../../Script/Common/huayi.load.js"></script>
  6. <script src="../../Script/Common/huayi.http.js"></script>
  7. <script src="../../Script/Common/huayi.config.js"></script>
  8. <link rel="stylesheet" href="../css/jquery-ui.css" />
  9. <link rel="stylesheet" href="../css/tpkerjqui.css" />
  10. <link rel="stylesheet" href="../css/timePicker.css" />
  11. <link rel="stylesheet" href="../css/stty.css" />
  12. <link rel="stylesheet" href="../css/init.css" />
  13. <link rel="stylesheet" href="../css/taskDetail.css" />
  14. <title>已呼号段查询</title>
  15. <style type="text/css">
  16. .m-kuang{
  17. width: 134px;
  18. background-color: #ffffff;
  19. background-image: none !important;
  20. filter: none !important;
  21. border: 1px solid #e5e5e5;
  22. outline: none;
  23. height: 34px !important;
  24. line-height: 30px;
  25. padding: 4px 6px;
  26. }
  27. .tool{
  28. margin: 20px 0;
  29. }
  30. .tool table{
  31. width: 100%;
  32. }
  33. .tool table td{
  34. width: 33%;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="container-fluid">
  40. <div class="daoHang clearfix">
  41. <div class="dhLeft">
  42. <sapn><i class="syIcon"></i>位置:
  43. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  44. <!--<a href="javaScript:;">系统管理</a>&gt;-->
  45. <a href="javaScript:;" style="color: #1ab394;">已呼号段查询</a>
  46. </sapn>
  47. </div>
  48. </div>
  49. <div class="tool">
  50. <table >
  51. <tr>
  52. <td><b>号段:</b><input type="text" placeholder="请输入号段" class="m-kuang" /></td>
  53. <td><b>开始时间:</b><input type="text" id="strTime" class="m-kuang" /></td>
  54. <td><b>结束时间:</b><input type="text" id="endTime" class="m-kuang" /></td>
  55. </tr>
  56. </table>
  57. </div>
  58. <div class="detCon">
  59. <div class="anniu" style="margin: 20px 0;">
  60. <button class="btns"><i class="fa fa-search"></i>查询</button>
  61. <button class="btns"><i class="fa fa-sign-in"></i>导出</button>
  62. </div>
  63. <table id="table1" data-row-style="rowStyle" data-query-params="queryParams">
  64. <thead>
  65. <tr>
  66. <!--<th data-align="center" data-formatter="setCode1">#</th>-->
  67. <th data-field="code" data-align="center">统计日期</th>
  68. <th data-field="name" data-align="center">号段</th>
  69. <th data-field="num" data-align="center">所属省份</th>
  70. <th data-field="finish" data-align="center">所属地市</th>
  71. <th data-field="giveup" data-align="center">应答率%</th>
  72. <th data-field="sheng" data-align="center">拨打次数</th>
  73. <th data-field="binfa" data-align="center">接通次数</th>
  74. <th data-field="huihua" data-align="center">应答次数</th>
  75. <th data-field="zuoxi" data-align="center"> 转座席</th>
  76. <th data-field="luyin" data-align="center">座席应答</th>
  77. <th data-field="luyin" data-align="center">任务编号</th>
  78. <th data-field="luyin" data-align="center">ENT</th>
  79. </tr>
  80. </thead>
  81. </table>
  82. </div>
  83. </div>
  84. <script src="../js/jquery-ui.js"></script>
  85. <script src="../js/timePicker.js"></script>
  86. <script>
  87. var setting = {
  88. dateFormat: 'yy-mm-dd', //日期格式
  89. clearText: "清除", //清除日期的按钮名称
  90. closeText: "关闭", //关闭选择框的按钮名称
  91. yearSuffix: '年', //年的后缀
  92. showMonthAfterYear: true, //是否把月放在年的后面
  93. monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  94. dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  95. dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  96. dayNamesMin: ['日', '一', '二', '三', '四', '五', '六']
  97. }
  98. $("#strTime").datepicker(setting); //开始时间
  99. $("#endTime").datepicker(setting); //结束时间
  100. //==============**号码段开始****========================================================
  101. var table1 = $('#table1');
  102. initTable1()
  103. function initTable1() {
  104. //先销毁表格
  105. table1.bootstrapTable('destroy');
  106. //初始化表格,动态从服务器加载数据
  107. table1.bootstrapTable({
  108. method: "get", //使用get请求到服务器获取数据
  109. // url: huayi.config.callcenter_url+"Log/GetList", //获取数据的Servlet地址
  110. url: "../table1.json", //获取数据的Servlet地址
  111. contentType: 'application/x-www-form-urlencoded',
  112. striped: true, //表格显示条纹
  113. pagination: false, //启动分页
  114. pageSize: 10, //每页显示的记录数
  115. pageNumber: 1, //当前第几页
  116. pageList: [10,15,25, 50, 100], //记录数可选列表
  117. search: false, //是否启用查询
  118. showColumns: false, //显示下拉框勾选要显示的列
  119. showRefresh: false, //显示刷新按钮
  120. sidePagination: "server", //表示服务端请求
  121. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  122. //设置为limit可以获取limit, offset, search, sort, order
  123. queryParamsType: "undefined",
  124. queryParams: function queryParams(params) { //设置查询参数
  125. var param = {
  126. pageindex: params.pageNumber,
  127. pagesize: params.pageSize,
  128. };
  129. return param;
  130. },
  131. onLoadSuccess: function() { //加载成功时执行
  132. //layer.msg("加载成功");
  133. },
  134. onLoadError: function() { //加载失败时执行
  135. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  136. }
  137. });
  138. }
  139. function setCode1(val, row, index) {
  140. return index + 1;
  141. }
  142. </script>
  143. </body>
  144. </html>