暂无描述

huTotal.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. var token = $.cookie("token");
  2. var date; //初始日期
  3. var myChart;
  4. var tabIndex = 0;
  5. var endyear = helper.DateFormat.getNowYear(); //初始化当前年份
  6. $(document).ready(function() {
  7. $('#chooseTime').val(endyear);
  8. layui.use('laydate', function() {
  9. var laydate = layui.laydate;
  10. //日期
  11. laydate.render({
  12. elem: '#chooseTime',
  13. format: 'yyyy',
  14. type: 'year',
  15. theme: '#1ab394',
  16. });
  17. });
  18. //helper.getDropList.getDept($('#bumen'));//获取部门
  19. //tab切换
  20. $('.hu-tab li').click(function() {
  21. $(this).addClass('active')
  22. .siblings().removeClass('active');
  23. tabIndex = $(this).index();
  24. $('.hu-content >div').eq(tabIndex).show()
  25. .siblings().hide();
  26. loadDatas();
  27. });
  28. //柱形图
  29. //基于准备好的dom,初始化echarts实例
  30. myChart = echarts.init(document.getElementById('huData'));
  31. myChart.clear();
  32. myChart.showLoading();
  33. option = {
  34. color: ['#1ab394'],
  35. tooltip: {
  36. trigger: 'axis',
  37. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  38. type: 'line' // 默认为直线,可选为:'line' | 'shadow'
  39. }
  40. },
  41. toolbox: {
  42. show: true,
  43. },
  44. calculable: true,
  45. xAxis: [{
  46. type: 'category',
  47. name: '月份',
  48. splitLine: {
  49. show: false
  50. }, //去除网格线
  51. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  52. axisTick: {
  53. alignWithLabel: true
  54. }
  55. }],
  56. yAxis: [{
  57. type: 'value',
  58. name: '通话量',
  59. nameLocation: 'end',
  60. splitLine: {
  61. show: false
  62. } //去除网格线
  63. }],
  64. series: [{
  65. name: '通话量',
  66. type: 'bar',
  67. barWidth: '30%', //图形宽度
  68. data: [],
  69. itemStyle: {
  70. normal: {
  71. label: {
  72. show: true,
  73. textStyle: {
  74. color: '#800080' //顶部数据颜色
  75. }
  76. }
  77. }
  78. },
  79. label: {
  80. normal: {
  81. show: true,
  82. position: 'top' //顶部数据显示位置
  83. }
  84. }
  85. }
  86. ]
  87. };
  88. // 使用刚指定的配置项和数据显示图表。
  89. myChart.setOption(option);
  90. loadDatas();
  91. //搜索事件
  92. $(".sear").click(function() {
  93. $(".huTable tbody").html('');
  94. date = $("#chooseTime").val();
  95. loadDatas();
  96. });
  97. //按enter搜索
  98. document.onkeydown = function (e) { // 回车提交表单
  99. var theEvent = window.event || e;
  100. var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
  101. if (code == 13) {
  102. $(".huTable tbody").html('');
  103. date = $("#chooseTime").val();
  104. loadDatas();
  105. }
  106. }
  107. })
  108. function getDataList() {
  109. var loadindex = layer.load();
  110. layui.use('table', function() {
  111. var table = layui.table;
  112. //方法级渲染
  113. table.render({
  114. elem: '#t_callTotal',
  115. url: huayi.config.callcenter_url + "TotalCall/GetDataList",
  116. method: 'get', //如果无需自定义HTTP类型,可不加该参数
  117. skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
  118. even: true, //开启隔行背景
  119. size: 'lg', //sm,lg尺寸的表格
  120. where: {
  121. years: date,
  122. //dpt: $('#bumen').val(),
  123. token: token
  124. }, //如果无需传递额外参数,可不加该参数
  125. //request: {}, //如果无需自定义请求参数,可不加该参数
  126. response: {
  127. statusName: 'state', //数据状态的字段名称,默认:code
  128. statusCode: 'success', //成功的状态码,默认:0
  129. msgName: 'message', //状态信息的字段名称,默认:msg
  130. //countName: 'total', //数据总数的字段名称,默认:count
  131. //dataName: 'rows', //数据列表的字段名称,默认:data
  132. }, //如果无需自定义数据响应名称,可不加该参数
  133. cols: [
  134. [{
  135. field: '月份',
  136. title: '月份',
  137. fixed: true,
  138. align: 'center',
  139. width: 200,
  140. }, {
  141. field: '日期',
  142. title: '日期',
  143. align: 'center',
  144. sort: true,
  145. //width: '30%',
  146. }, {
  147. field: '总数',
  148. title: '总数(次)',
  149. align: 'center',
  150. //width: '30%',
  151. }]
  152. ],
  153. height: 'full-230',
  154. done:function(){
  155. layer.close(loadindex);
  156. }
  157. });
  158. });
  159. }
  160. //获取图形数据
  161. function tu() {
  162. $.ajax({
  163. type: "get",
  164. url: huayi.config.callcenter_url + "TotalCall/GetChartData",
  165. async: true,
  166. dataType: 'json',
  167. data: {
  168. years: date,
  169. //dpt: $('#bumen').val(),
  170. token: token,
  171. },
  172. success: function(data) {
  173. myChart.hideLoading();
  174. if(data.data) {
  175. myChart.setOption({
  176. series: [{
  177. data: data.data
  178. }]
  179. });
  180. }
  181. }
  182. });
  183. }
  184. //导出
  185. $('.export').click(function() {
  186. dcexcel(this);
  187. })
  188. function dcexcel(obj) {
  189. var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token");
  190. url += "&years=" + $("#chooseTime").val();
  191. //url += "&dpt=" + $("#bumen").val();
  192. obj.href = url;
  193. }
  194. function loadDatas() {
  195. if(tabIndex == 0) {
  196. tu(); //加载图形
  197. } else if(tabIndex == 1) {
  198. getDataList(); //加载表格
  199. }
  200. }