高新区管委会,以5.0标准版为基准,从双汇项目拷贝

workOrderDistribution.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. var bigdataList = null;
  2. var sd = "";
  3. var ed = "";
  4. partpaat(sd, ed);
  5. // 轮播
  6. banner1()
  7. // 轮播
  8. function banner1(){
  9. var i=0;
  10. var Timer;
  11. $(function(){
  12. $(".picImg").eq(0).show().siblings().hide(); //默认第一个div片显示,其他的隐藏
  13. //自动轮播
  14. TimerBanner();
  15. //点击红圈
  16. $(".picImg").hover(function(){ //鼠标移动上去
  17. clearInterval(Timer); //让计时器暂时停止 清除计时器
  18. i=$(this).index(); //获取该圈的索引
  19. showPic(); //调用显示图片的方法,显示该索引对应的图片
  20. },function(){ //鼠标离开
  21. TimerBanner(); //继续轮播 计时器开始
  22. });
  23. $(".tabs .aaa").hover(function(){ //鼠标移动上去
  24. clearInterval(Timer); //让计时器暂时停止 清除计时器
  25. i=$(this).index(); //获取该圈的索引
  26. showPic(); //调用显示图片的方法,显示该索引对应的图片
  27. },function(){ //鼠标离开
  28. TimerBanner(); //继续轮播 计时器开始
  29. });
  30. //点击左右按钮
  31. $(".btn1").click(function(){
  32. clearInterval(Timer);
  33. i--; //往左
  34. if(i==-1){
  35. i=4;
  36. }
  37. showPic();
  38. TimerBanner();
  39. });
  40. $(".btn2").click(function(){
  41. clearInterval(Timer);
  42. i++; //往右
  43. if(i==4){
  44. i=0;
  45. }
  46. showPic();
  47. TimerBanner();
  48. });
  49. });
  50. //轮播部分
  51. function TimerBanner(){
  52. Timer = setInterval(function(){
  53. i++;
  54. if(i==4){
  55. i=0;
  56. }
  57. showPic()
  58. },5000);
  59. }
  60. //显示div
  61. function showPic() {
  62. $(".picImg").eq(i).show().siblings().hide();
  63. $(".bg").hide();
  64. $(".tabs .aaa").eq(i).children(".bg").show();
  65. }
  66. }
  67. function partpaat(sd,ed) {
  68. var myChart = echarts.init(document.getElementById('chart'));
  69. var myChartaaa = echarts.init(document.getElementById('dback'));
  70. var myChartbbb = echarts.init(document.getElementById('mold'));
  71. var myChartppp = echarts.init(document.getElementById('uction'));
  72. var myChreti = echarts.init(document.getElementById('sippu'));
  73. var myKouc = echarts.init(document.getElementById('siupi'));
  74. var myKucot = echarts.init(document.getElementById('siupiac'));
  75. var myTou = echarts.init(document.getElementById('siyi'));
  76. $.ajax({
  77. type: "get",
  78. url: huayi.config.callcenter_url + "Business/GetBigdataList",
  79. async: true,
  80. dataType: "json",
  81. data: {
  82. stime:sd,
  83. endtime:ed,
  84. },
  85. success: function(data) {
  86. if (data.state.toLowerCase() == "success") {
  87. var con = data.data;
  88. var realtime = con.realtime;
  89. var acceptancetimes = con.acceptancetimes;
  90. var states = con.states;
  91. var region = con.region;
  92. //当日工单数量
  93. var type_data_realtime_time = [];
  94. var type_data_realtime_total = [];
  95. $(realtime).each(function(i, n) {
  96. type_data_realtime_time.push(n.time);
  97. type_data_realtime_total.push(n.total);
  98. })
  99. //24小时时段受理量/处理量
  100. var type_data_acceptancetimes_time = [];
  101. var type_data_acceptancetimes_accept = [];
  102. var type_data_acceptancetimes_handle = [];
  103. $(acceptancetimes).each(function(i, n){
  104. type_data_acceptancetimes_time.push(n.time);
  105. type_data_acceptancetimes_accept.push(n.accept);
  106. type_data_acceptancetimes_handle.push(n.handle);
  107. })
  108. //工单个状态数量分布
  109. var type_data_states = [];
  110. $(states).each(function(i, n){
  111. var type_data_states_name_total = {};
  112. type_data_states_name_total.value = n.total;
  113. type_data_states_name_total.name = n.name;
  114. type_data_states.push(type_data_states_name_total);
  115. })
  116. //受理区域
  117. var type_data_region_name = [];
  118. var type_data_region_total = [];
  119. $(region).each(function(i, n){
  120. type_data_region_name.push(n.name);
  121. type_data_region_total.push(n.total);
  122. })
  123. // 当日工单数量
  124. myChreti.setOption({
  125. title: {
  126. text: '当日工单数量',
  127. x: 'center',
  128. textStyle: {
  129. "color": "#FFFFFF"
  130. }
  131. },
  132. tooltip: {
  133. trigger: 'axis'
  134. },
  135. xAxis: {
  136. type: 'category',
  137. data: type_data_realtime_time,
  138. axisLine: {
  139. lineStyle: {
  140. color: '#FFFFFF',//坐标线的颜色
  141. }
  142. },
  143. },
  144. yAxis: {
  145. type: 'value',
  146. axisLine: {
  147. lineStyle: {
  148. color: '#FFFFFF',//坐标线的颜色
  149. }
  150. },
  151. splitLine :{ //网格线
  152. lineStyle:{
  153. type:'dashed' //设置网格线类型 dotted:虚线 solid:实线
  154. },
  155. show:true //隐藏或显示
  156. }
  157. },
  158. series: [{
  159. name: '数量',
  160. data: type_data_realtime_total,
  161. type: 'line',
  162. itemStyle: {
  163. normal: {
  164. color: '#FAD860',
  165. }
  166. },
  167. }]
  168. });
  169. myChartppp.setOption({
  170. tooltip: {
  171. trigger: 'axis'
  172. },
  173. xAxis: {
  174. type: 'category',
  175. data: type_data_realtime_time,
  176. axisLine: {
  177. lineStyle: {
  178. color: '#FFFFFF',//坐标线的颜色
  179. }
  180. },
  181. },
  182. yAxis: {
  183. show: false,
  184. },
  185. series: [{
  186. name: '数量',
  187. data: type_data_realtime_total,
  188. type: 'line',
  189. itemStyle: {
  190. normal: {
  191. color: '#FAD860',
  192. }
  193. },
  194. }]
  195. });
  196. //24小时时段受理量/处理量分布图
  197. myKouc.setOption({
  198. title: {
  199. text: '24小时时段受理量/处理量分布图',
  200. x: 'center',
  201. textStyle: {
  202. "color": "#FFFFFF"
  203. }
  204. },
  205. legend: {
  206. data: ['受理量', '处理量'],
  207. bottom: 5,
  208. textStyle: {
  209. color: "#FFFAF0"
  210. }
  211. },
  212. tooltip: {
  213. trigger: 'axis',
  214. axisPointer: {
  215. type: 'shadow'
  216. }
  217. },
  218. xAxis: {
  219. type: 'category',
  220. data: type_data_acceptancetimes_time,
  221. axisLine: {
  222. lineStyle: {
  223. color: '#FFFFFF',//坐标线的颜色
  224. }
  225. },
  226. },
  227. yAxis: {
  228. type: 'value',
  229. boundaryGap: [0, 0.01],
  230. axisLine: {
  231. lineStyle: {
  232. color: '#FFFFFF',//坐标线的颜色
  233. }
  234. },
  235. splitLine: { //网格线
  236. show: false //隐藏或显示
  237. },
  238. },
  239. series: [
  240. {
  241. name: '受理量',
  242. type: 'bar',
  243. itemStyle: {
  244. normal: {
  245. color: '#1890FF',
  246. }
  247. },
  248. data: type_data_acceptancetimes_accept,
  249. },
  250. {
  251. name: '处理量',
  252. type: 'bar',
  253. itemStyle: {
  254. normal: {
  255. color: '#13C2C2',
  256. }
  257. },
  258. data: type_data_acceptancetimes_handle,
  259. }
  260. ]
  261. })
  262. myChart.setOption({
  263. tooltip: {
  264. trigger: 'axis',
  265. axisPointer: {
  266. type: 'shadow'
  267. }
  268. },
  269. xAxis: {
  270. type: 'category',
  271. data: type_data_acceptancetimes_time,
  272. axisLine: {
  273. lineStyle: {
  274. color: '#FFFFFF',//坐标线的颜色
  275. }
  276. },
  277. },
  278. yAxis: {
  279. show: false,
  280. },
  281. series: [
  282. {
  283. name: '受理量',
  284. type: 'bar',
  285. itemStyle: {
  286. normal: {
  287. color: '#1890FF',
  288. }
  289. },
  290. data: type_data_acceptancetimes_accept,
  291. },
  292. {
  293. name: '处理量',
  294. type: 'bar',
  295. itemStyle: {
  296. normal: {
  297. color: '#13C2C2',
  298. }
  299. },
  300. data: type_data_acceptancetimes_handle,
  301. },
  302. ]
  303. })
  304. //工单各状态数量分布
  305. myKucot.setOption({
  306. title : {
  307. text: '工单各状态数量分布',
  308. x: 'center',
  309. textStyle: {
  310. "color": "#FFFFFF"
  311. }
  312. },
  313. tooltip : {
  314. trigger: 'item',
  315. formatter: "{a} <br/>{b} : {c} ({d}%)"
  316. },
  317. series : [
  318. {
  319. name: '工单各状态数量分布',
  320. type: 'pie',
  321. radius : '55%',
  322. data: type_data_states,
  323. itemStyle: {
  324. normal: {
  325. color: function(params) {
  326. //自定义颜色
  327. var colorList = [
  328. '#1890FF', '#2EC25B', '#FACC14', '#04D9FF', '#8543E0', '#13C2C2',
  329. '#00C0FF', '#05EB78', '#D141D9', '#05EB61', '#2FCDCD', '#BEEB30',
  330. '#EB9005', '#FFFF00', '#FF7F50', '#3CB371', '#00BFFF', '#9932CC',
  331. ];
  332. return colorList[params.dataIndex]
  333. }
  334. }
  335. }
  336. }
  337. ]
  338. })
  339. myChartaaa.setOption({
  340. tooltip : {
  341. trigger: 'item',
  342. formatter: "{a} <br/>{b} : {c} ({d}%)"
  343. },
  344. series : [
  345. {
  346. name: '工单各状态数量分布',
  347. type: 'pie',
  348. radius : '55%',
  349. data: type_data_states,
  350. label: {
  351. normal: {
  352. show: false
  353. }
  354. },
  355. itemStyle: {
  356. normal: {
  357. color: function(params) {
  358. //自定义颜色
  359. var colorList = [
  360. '#1890FF', '#2EC25B', '#FACC14', '#04D9FF', '#8543E0', '#13C2C2',
  361. '#00C0FF', '#05EB78', '#D141D9', '#05EB61', '#2FCDCD', '#BEEB30',
  362. '#EB9005', '#FFFF00', '#FF7F50', '#3CB371', '#00BFFF', '#9932CC',
  363. ];
  364. return colorList[params.dataIndex]
  365. }
  366. }
  367. }
  368. }
  369. ]
  370. })
  371. //受理区域
  372. myTou.setOption({
  373. title: {
  374. text: '受理区域',
  375. x: 'center',
  376. textStyle: {
  377. "color": "#FFFFFF"
  378. }
  379. },
  380. tooltip: {
  381. trigger: 'axis',
  382. axisPointer: {
  383. type: 'shadow'
  384. }
  385. },
  386. xAxis: {
  387. type: 'category',
  388. data: type_data_region_name,
  389. axisLine: {
  390. lineStyle: {
  391. color: '#FFFFFF',//坐标线的颜色
  392. }
  393. },
  394. },
  395. yAxis: {
  396. type: 'value',
  397. boundaryGap: [0, 0.01],
  398. axisLine: {
  399. lineStyle: {
  400. color: '#FFFFFF',//坐标线的颜色
  401. }
  402. },
  403. splitLine: { //网格线
  404. show: false //隐藏或显示
  405. },
  406. },
  407. series: [
  408. {
  409. name: '数量',
  410. type: 'bar',
  411. data: type_data_region_total,
  412. itemStyle: {
  413. normal: {
  414. color: '#1890FF',
  415. }
  416. },
  417. },
  418. ]
  419. })
  420. myChartbbb.setOption({
  421. tooltip: {
  422. trigger: 'axis',
  423. axisPointer: {
  424. type: 'shadow'
  425. }
  426. },
  427. xAxis: {
  428. type: 'category',
  429. data: type_data_region_name,
  430. axisLine: {
  431. lineStyle: {
  432. color: '#FFFFFF',//坐标线的颜色
  433. }
  434. },
  435. },
  436. yAxis: {
  437. show: false,
  438. },
  439. series: [
  440. {
  441. name: '数量',
  442. type: 'bar',
  443. data: type_data_region_total,
  444. itemStyle: {
  445. normal: {
  446. color: '#1890FF',
  447. }
  448. },
  449. }
  450. ]
  451. })
  452. }
  453. }
  454. });
  455. }