安图前端代码

huTotal.js 3.9KB

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