思念食品 UI

huTotal.js 4.3KB

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