商丘12345 前端

Census.html 33KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173
  1. <!doctype html>
  2. <html lang="en" class="feedback">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>数据统计</title>
  7. <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  8. <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
  9. <style>
  10. .mui-control-content {
  11. background-color: white;
  12. min-height: 215px;
  13. }
  14. .mui-control-content .mui-loading {
  15. margin-top: 50px;
  16. }
  17. .chart {
  18. height: 260px;
  19. margin: 0px;
  20. padding: 0px;
  21. }
  22. .mui-slider .mui-slider-group {
  23. height: 500px;
  24. }
  25. #CS {
  26. position: absolute;
  27. right: 0;
  28. height: 100%;
  29. padding: 0;
  30. padding-left: 5px;
  31. border: none;
  32. z-index: 30;
  33. width: 100%;
  34. }
  35. .mui-scroll {
  36. height: 100%;
  37. }
  38. #lineChart {
  39. position: absolute;
  40. top: 0;
  41. right: 0;
  42. bottom: 0;
  43. left: 0;
  44. padding: 10px;
  45. -webkit-box-sizing: border-box;
  46. box-sizing: border-box;
  47. }
  48. .mui-grid-bottom {
  49. height: 2px;
  50. background-color: #57cebf;
  51. display: block;
  52. width: 20px;
  53. margin: 0 auto;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <header class="mui-bar mui-bar-nav">
  59. <h1 id="title" class="mui-title">区域报表</h1>
  60. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
  61. </header>
  62. <div class="mui-content ">
  63. <form id='login-form' class="mui-input-group">
  64. <!--logo-->
  65. <div class="mui-input-row">
  66. <label>区域:</label>
  67. <select name="" class="mui-select">
  68. </select>
  69. </div>
  70. <div class="mui-input-row mui-password">
  71. <label>时间:</label>
  72. <!--<input id='password' type="datetime-local" class=" mui-input" >-->
  73. <input id='demo1' data-options='{}' type="text" class="mui-input-clear btn contact" />
  74. </div>
  75. </form>
  76. <div id="slider" class="mui-slider">
  77. <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
  78. <a class="mui-control-item mui-active" href="#item1mobile" index="1">
  79. 日报
  80. </a>
  81. <a class="mui-control-item" href="#item2mobile" index="2">
  82. 周报
  83. </a>
  84. <a class="mui-control-item" href="#item3mobile" index="3">
  85. 月报
  86. </a>
  87. </div>
  88. <div class="mui-slider-group">
  89. <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
  90. <div id="scroll1" class="mui-scroll-wrapper">
  91. <div class="mui-scroll">
  92. <div class="chart" id="pieChart"></div>
  93. <div>
  94. <ul class="mui-table-view mui-grid-view mui-grid-9">
  95. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  96. <a href="#">
  97. <span class="size-20" id="jsblrate"></span>
  98. <div class="mui-media-body size-14">即时办理率</div>
  99. </a>
  100. <span class="mui-grid-bottom"></span>
  101. </li>
  102. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  103. <a href="#">
  104. <span class="size-20" id="wlzbrate"></span>
  105. <div class="mui-media-body size-14">转办率</div>
  106. </a>
  107. <span class="mui-grid-bottom"></span>
  108. </li>
  109. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  110. <a href="#">
  111. <span class="size-20" id="zbbjrate"></span>
  112. <div class="mui-media-body size-14">转办办结率</div>
  113. </a>
  114. <span class="mui-grid-bottom"></span>
  115. </li>
  116. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  117. <a href="#">
  118. <span class="size-20" id="bjrate"></span>
  119. <div class="mui-media-body size-14">办结率</div>
  120. </a>
  121. <span class="mui-grid-bottom"></span>
  122. </li>
  123. </ul>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <div id="item2mobile" class="mui-slider-item mui-control-content">
  129. <div id="scroll2" class="mui-scroll-wrapper">
  130. <div class="mui-scroll">
  131. <div class="chart" id="barChart"></div>
  132. <div>
  133. <ul class="mui-table-view mui-grid-view mui-grid-9">
  134. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  135. <a href="#">
  136. <span class="size-20" id="week-jsblrate"></span>
  137. <div class="mui-media-body size-14">即时办理率</div>
  138. </a>
  139. </li>
  140. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  141. <a href="#">
  142. <span class="size-20" id="week-wlzbrate"></span>
  143. <div class="mui-media-body size-14">转办率</div>
  144. </a>
  145. </li>
  146. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  147. <a href="#">
  148. <span class="size-20" id="week-zbbjrate"></span>
  149. <div class="mui-media-body size-14">转办办结率</div>
  150. </a>
  151. </li>
  152. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  153. <a href="#">
  154. <span class="size-20" id="week-bjrate"></span>
  155. <div class="mui-media-body size-14">办结率</div>
  156. </a>
  157. </li>
  158. </ul>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <div id="item3mobile" class="mui-slider-item mui-control-content">
  164. <div id="scroll2" class="mui-scroll-wrapper">
  165. <div class="mui-scroll">
  166. <div class="chart" id="Chart">5555</div>
  167. <div>
  168. <ul class="mui-table-view mui-grid-view mui-grid-9">
  169. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  170. <a href="#">
  171. <span class="size-20" id="month-jsblrate"></span>
  172. <div class="mui-media-body size-14">即时办理率</div>
  173. </a>
  174. </li>
  175. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  176. <a href="#">
  177. <span class="size-20" id="month-wlzbrate"></span>
  178. <div class="mui-media-body size-14">转办率</div>
  179. </a>
  180. </li>
  181. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  182. <a href="#">
  183. <span class="size-20" id="month-zbbjrate"></span>
  184. <div class="mui-media-body size-14">转办办结率</div>
  185. </a>
  186. </li>
  187. <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
  188. <a href="#">
  189. <span class="size-20" id="month-bjrate"></span>
  190. <div class="mui-media-body size-14">办结率</div>
  191. </a>
  192. </li>
  193. </ul>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <script src="../js/zepto.js"></script>
  202. <script src="../js/mui.min.js"></script>
  203. <script src="../js/echarts.common.min.js"></script>
  204. <script src="../js/huayi.config.js"></script>
  205. <script src="../js/mui.picker.min.js"></script>
  206. <script type="text/javascript">
  207. mui.init();
  208. window.onload = function() {
  209. mui('.mui-scroll-wrapper').scroll({
  210. deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
  211. });
  212. }
  213. var goodslist;
  214. var index_=1;
  215. //本周图表
  216. var xAxis = [];
  217. var yAxis = [];
  218. var yAxiss = [];
  219. //本月
  220. var xAxis_math = [];
  221. var yAxis_math = [];
  222. var yAxiss_math = []
  223. mui.plusReady(function() {
  224. var wv = plus.webview.currentWebview();
  225. var index = wv.index;
  226. plus.nativeUI.closeWaiting();
  227. //显示当前页面
  228. mui.currentWebview.show();
  229. //下拉框
  230. $.ajax({
  231. type: "get",
  232. url: huayi.config.callcenter_url + '/APP/GetAreaList',
  233. async: false,
  234. dataType: 'json',
  235. data: {
  236. usercode: 8000
  237. },
  238. success: function(data) {
  239. console.log(data.state);
  240. if(data.state == "success") {
  241. goodslist = data.data;
  242. bindseat($(".mui-select"));
  243. }
  244. },
  245. error: function(data) {
  246. console.log(data.message);
  247. }
  248. });
  249. //下拉框
  250. function bindseat(obj) {
  251. obj.empty();
  252. obj.append('<option value="0" selected="true">所有区域</option>');
  253. $(goodslist).each(function(i, n) {
  254. obj.append('<option value="' + n.F_AreaId + '">' + n.F_AreaName + '</option>');
  255. })
  256. }
  257. //日期
  258. var dates = new Date();
  259. var time = dates.getFullYear() + "-" + (dates.getMonth() + 1) + '-' + dates.getDate();
  260. $("#demo1").val(time);
  261. //时间选择
  262. var btns = mui('.btn');
  263. btns.each(function(i, btn) {  
  264. btn.addEventListener('tap', function() {   
  265. var dtPicker = new mui.DtPicker({    
  266. type: "date", //设置日历初始视图模式
  267.   
  268. });  
  269. dtPicker.show(function(e) {
  270. $("#demo1").val(e);
  271. AreaL();//日报
  272. AreaLs();//周报
  273. }); 
  274. }, false);
  275. })
  276. AreaL();
  277. $(".mui-select").on('change', function() {
  278. console.log($('.mui-select').val());
  279. AreaL();//日报
  280. AreaLs();//周报
  281. Month();//月报
  282. })
  283. //日报的数据
  284. function AreaL() {
  285. console.log($('.mui-select').val());
  286. $.ajax({
  287. type: "get",
  288. url: huayi.config.callcenter_url + '/app/GetAPPWorkReportSingle',
  289. async: true,
  290. dataType: 'json',
  291. data: {
  292. usercode: 8080,
  293. datetype: index_,
  294. date: $("#demo1").val(),
  295. datatype:index,
  296. dataid: $('.mui-select').val()
  297. },
  298. success: function(data) {
  299. if(data.state == "success") {
  300. var Data = data.data.APPDayWeekMonthReportSingle[0];
  301. alert(JSON.stringify(Data));
  302. $("#bjrate").text(Data.bjrate)
  303. $("#jsblrate").text(Data.jsblrate);
  304. $("#wlzbrate").text(Data.wlzbrate);
  305. $("#zbbjrate").text(Data.zbbjrate);
  306. var option = {
  307. tooltip: {
  308. formatter: "{b} : {c} ({d}%)"
  309. },
  310. legend: {
  311. orient: 'vertical',
  312. top: 'middle',
  313. x: 'top',
  314. left: 10,
  315. top: 3,
  316. data: ['即时办结', '网络转办', '转办办结']
  317. },
  318. series: [{
  319. type: 'pie',
  320. radius: '55%',
  321. selectedMode: 'single',
  322. center: ['50%', '60%'],
  323. label: {
  324. normal: {
  325. formatter: "{b} : {c} ",
  326. }
  327. },
  328. labelLine: {
  329. normal: {
  330. show: false
  331. }
  332. },
  333. data: [{
  334. value: data.data.APPDayWeekMonthReportSingle[0].jsblcount,
  335. name: '即时办结',
  336. },
  337. {
  338. value: data.data.APPDayWeekMonthReportSingle[0].wlzbcount,
  339. name: '网络转办',
  340. },
  341. {
  342. value: data.data.APPDayWeekMonthReportSingle[0].zbbjcount,
  343. name: '转办办结',
  344. }
  345. ],
  346. }]
  347. };
  348. echartsPie = echarts.init(document.getElementById('pieChart'));
  349. echartsPie.setOption(option);
  350. }
  351. },
  352. error: function(data) {
  353. console.log(data.message);
  354. }
  355. });
  356. }
  357. AreaLs();
  358. Month();
  359. //周报
  360. function AreaLs() {
  361. console.log($('.mui-select').val());
  362. $.ajax({
  363. type: "get",
  364. url: huayi.config.callcenter_url + '/app/GetAPPWorkReportSingle',
  365. async: true,
  366. dataType: 'json',
  367. data: {
  368. usercode: 8080,
  369. datetype: 2,
  370. date: $("#demo1").val(),
  371. datatype:index,
  372. dataid: $('.mui-select').val()
  373. },
  374. success: function(data) {
  375. if(data.state == "success") {
  376. var Data = data.data.APPDayWeekMonthReportSingle[0];
  377. alert(JSON.stringify(Data));
  378. $("#week-bjrate").text(Data.bjrate)
  379. $("#week-jsblrate").text(Data.jsblrate);
  380. $("#week-wlzbrate").text(Data.wlzbrate);
  381. $("#week-zbbjrate").text(Data.zbbjrate);
  382. var option = {
  383. tooltip: {
  384. formatter: "{b} : {c} ({d}%)"
  385. },
  386. legend: {
  387. orient: 'vertical',
  388. top: 'middle',
  389. x: 'left',
  390. left: 5,
  391. top: 5,
  392. data: ['即时办结', '网络转办', '转办办结']
  393. },
  394. series: [{
  395. type: 'pie',
  396. radius: '55%',
  397. selectedMode: 'single',
  398. center: ['50%', '60%'],
  399. label: {
  400. normal: {
  401. formatter: "{a} {b} : {c} ",
  402. }
  403. },
  404. labelLine: {
  405. normal: {
  406. show: false
  407. }
  408. },
  409. data: [{
  410. value: data.data.APPDayWeekMonthReportSingle[0].jsblcount,
  411. name: '即时办结',
  412. },
  413. {
  414. value: data.data.APPDayWeekMonthReportSingle[0].wlzbcount,
  415. name: '网络转办',
  416. },
  417. {
  418. value: data.data.APPDayWeekMonthReportSingle[0].zbbjcount,
  419. name: '转办办结',
  420. }
  421. ],
  422. }]
  423. };
  424. echartsPie = echarts.init(document.getElementById('barChart'));
  425. echartsPie.setOption(option);
  426. }
  427. },
  428. error: function(data) {
  429. console.log(data.message);
  430. }
  431. });
  432. }
  433. //月报
  434. function Month(){
  435. console.log($('.mui-select').val());
  436. $.ajax({
  437. type: "get",
  438. url: huayi.config.callcenter_url + '/app/GetAPPWorkReportSingle',
  439. async: true,
  440. dataType: 'json',
  441. data: {
  442. usercode: 8080,
  443. datetype: 3,
  444. date: $("#demo1").val(),
  445. datatype:index,
  446. dataid: $('.mui-select').val()
  447. },
  448. success: function(data) {
  449. if(data.state == "success") {
  450. var Data = data.data.APPDayWeekMonthReportSingle[0];
  451. alert(JSON.stringify(Data));
  452. $("#month-bjrate").text(Data.bjrate)
  453. $("#month-jsblrate").text(Data.jsblrate);
  454. $("#month-wlzbrate").text(Data.wlzbrate);
  455. $("#month-zbbjrate").text(Data.zbbjrate);
  456. var option = {
  457. tooltip: {
  458. formatter: "{a} <br/>{b} : {c} ({d}%)"
  459. },
  460. legend: {
  461. orient: 'vertical',
  462. x: 'left',
  463. left: 10,
  464. top: 10,
  465. data: ['即时办结', '网络转办', '转办办结']
  466. },
  467. series: [{
  468. type: 'pie',
  469. radius: '55%',
  470. selectedMode: 'single',
  471. center: ['50%', '60%'],
  472. label: {
  473. normal: {
  474. formatter: "{a} {b} : {c} ",
  475. }
  476. },
  477. labelLine: {
  478. normal: {
  479. show: false
  480. }
  481. },
  482. data: [{
  483. value: data.data.APPDayWeekMonthReportSingle[0].jsblcount,
  484. name: '即时办结',
  485. },
  486. {
  487. value: data.data.APPDayWeekMonthReportSingle[0].wlzbcount,
  488. name: '网络转办',
  489. },
  490. {
  491. value: data.data.APPDayWeekMonthReportSingle[0].zbbjcount,
  492. name: '转办办结',
  493. }
  494. ],
  495. }]
  496. };
  497. echartsPie = echarts.init(document.getElementById('Chart'));
  498. echartsPie.setOption(option);
  499. }
  500. },
  501. error: function(data) {
  502. console.log(data.message);
  503. }
  504. });
  505. }
  506. //切换
  507. $(".mui-control-item").on('tap',function(){
  508. var indexs=$(this).attr('index');
  509. index_=indexs;
  510. AreaL();
  511. AreaLs();
  512. Month();
  513. })
  514. //本周
  515. // $.ajax({
  516. // type: "get",
  517. // url: huayi.config.callcenter_url + 'WorkOrder/GetWeekReport',
  518. // async: true,
  519. // dataType: 'json',
  520. // data: {
  521. // openid: 'oKOqcv31fh76rtNmJDjKc39oIsfA'
  522. // },
  523. // success: function(data) {
  524. // console.log(data.state);
  525. // if(data.state == "success") {
  526. // console.log(data.data[0].unfinish);
  527. // $("#Workfinish").text(data.data[7].finish);
  528. // $("#Workunfinifh").text(data.data[7].unfinish);
  529. // $("#WorkTotal").text(data.data[7].finish + data.data[0].unfinish);
  530. // for(var i = 0; i < data.data.length; i++) {
  531. // xAxis.push(data.data[i].ID);
  532. //
  533. // yAxis.push(data.data[i].unfinish);
  534. // yAxiss.push(data.data[i].finish)
  535. // }
  536. //
  537. // var option = {
  538. // grid: {
  539. // x: 35,
  540. // x2: 10,
  541. // y: 30,
  542. // y2: 25,
  543. // borderWidth: 0
  544. // },
  545. // toolbox: {
  546. // show: false,
  547. // feature: {
  548. // mark: {
  549. // show: true
  550. // },
  551. // dataView: {
  552. // show: true,
  553. // readOnly: false
  554. // },
  555. // magicType: {
  556. // show: true,
  557. // type: ['line', 'bar']
  558. // },
  559. // restore: {
  560. // show: true
  561. // },
  562. // saveAsImage: {
  563. // show: true
  564. // }
  565. // }
  566. // },
  567. // legend: {
  568. // top: 20,
  569. // data: ['已完成', '未完成', ]
  570. // },
  571. //
  572. // calculable: false,
  573. // xAxis: [{
  574. // axisLabel: {
  575. // interval: 0
  576. // },
  577. //
  578. // splitArea: {
  579. // show: false,
  580. // },
  581. // splitLine: {
  582. // show: false
  583. // }, //去除网格线
  584. // type: 'category',
  585. // data: xAxis
  586. // }],
  587. // yAxis: [{
  588. // show: false,
  589. // splitLine: {
  590. // show: false
  591. // }, //去除网格线
  592. // type: 'value',
  593. // splitArea: {
  594. // show: false,
  595. // }
  596. // }],
  597. // series: [{
  598. // name: '已完成',
  599. // type: 'bar',
  600. // barWidth: 10, //柱图宽度
  601. // itemStyle: {
  602. // normal: {
  603. // label: {
  604. // show: true
  605. // }
  606. // }
  607. // },
  608. // data: yAxis
  609. // }, {
  610. // name: '未完成',
  611. // type: 'bar',
  612. // barWidth: 10, //柱图宽度
  613. // itemStyle: {
  614. // normal: {
  615. // label: {
  616. // show: true
  617. // }
  618. // }
  619. // },
  620. // data: yAxiss
  621. // }]
  622. // };
  623. // echartsPie = echarts.init(document.getElementById('barChart'));
  624. // echartsPie.setOption(option);
  625. // }
  626. //
  627. // },
  628. // error: function(data) {
  629. // console.log(data.message);
  630. // }
  631. // });
  632. //本月
  633. // $.ajax({
  634. // type: "get",
  635. // url: huayi.config.callcenter_url + 'WorkOrder/GetMonthReport',
  636. // async: true,
  637. // dataType: 'json',
  638. // data: {
  639. // openid: 'oKOqcv31fh76rtNmJDjKc39oIsfA'
  640. // },
  641. // success: function(data) {
  642. // console.log(data.state);
  643. // if(data.state == "success") {
  644. // console.log(data.data[0].unfinish);
  645. // $("#Workfinish").text(data.data[7].finish);
  646. // $("#Workunfinifh").text(data.data[7].unfinish);
  647. // $("#WorkTotal").text(data.data[7].finish + data.data[0].unfinish);
  648. // for(var i = 0; i < data.data.length; i++) {
  649. // xAxis_math.push(data.data[i].ID);
  650. //
  651. // yAxis_math.push(data.data[i].unfinish);
  652. // yAxiss_math.push(data.data[i].finish)
  653. // }
  654. //
  655. // // var option = {
  656. // // grid: {
  657. // // x: 35,
  658. // // x2: 10,
  659. // // y: 30,
  660. // // y2: 50,
  661. // // borderWidth: 0
  662. // // },
  663. // // toolbox: {
  664. // // show: false,
  665. // // feature: {
  666. // // mark: {
  667. // // show: true
  668. // // },
  669. // // dataView: {
  670. // // show: true,
  671. // // readOnly: false
  672. // // },
  673. // // magicType: {
  674. // // show: true,
  675. // // type: ['line', 'bar']
  676. // // },
  677. // // restore: {
  678. // // show: true
  679. // // },
  680. // // saveAsImage: {
  681. // // show: true
  682. // // }
  683. // // }
  684. // // },
  685. // // legend: {
  686. // //
  687. // // data: ['已完成', '未完成', ]
  688. // // },
  689. // //
  690. // // calculable: false,
  691. // // xAxis: [{
  692. // // axisLabel: {
  693. // // interval: 10
  694. // // },
  695. // // axisLabel: {
  696. // // rotate: 45, //字体倾斜度数
  697. // // interval: 0, //interval 是指间隔多少个类别画栅格,为 0 时则每个数据都画,为 1 时间隔 1 个画,以此类推
  698. // // textStyle: {
  699. // // color: "red", //字体颜色
  700. // // fontSize: 10 //字体大小
  701. // // }
  702. // // },
  703. // // splitArea: {
  704. // // show: false,
  705. // // },
  706. // // splitLine: {
  707. // // show: false
  708. // // }, //去除网格线
  709. // // type: 'category',
  710. // // data:xAxis_math
  711. // // }],
  712. // // yAxis: [{
  713. // // show: false,
  714. // // splitLine: {
  715. // // show: false
  716. // // }, //去除网格线
  717. // // type: 'value',
  718. // // splitArea: {
  719. // // show: false,
  720. // // }
  721. // // }],
  722. // // series: [{
  723. // // name: '已完成',
  724. // // type: 'bar',
  725. // // barWidth: 10, //柱图宽度
  726. // // itemStyle: {
  727. // // normal: {
  728. // // label: {
  729. // // show: true
  730. // // }
  731. // // }
  732. // // },
  733. // // data: yAxis_math,
  734. // //
  735. // // },
  736. // // {
  737. // // name: '未完成',
  738. // // type: 'bar',
  739. // // barWidth: 5, //柱图宽度
  740. // // itemStyle: {
  741. // // normal: {
  742. // // label: {
  743. // // show: true
  744. // // }
  745. // // }
  746. // // },
  747. // // data: yAxiss_math,
  748. // //
  749. // // }
  750. // // ]
  751. // // };
  752. //
  753. // var option = {
  754. // tooltip: {
  755. // trigger: 'axis',
  756. // axisPointer: {
  757. // type: 'shadow'
  758. // }
  759. // },
  760. // legend: {
  761. // data: ['未完成', '已完成']
  762. // },
  763. // grid: {
  764. // left: '3%',
  765. // right: '4%',
  766. // bottom: '3%',
  767. // containLabel: true
  768. // },
  769. // xAxis: {
  770. // type: 'value',
  771. // boundaryGap: [0, 0.01]
  772. // },
  773. // yAxis: {
  774. // type: 'category',
  775. // data: xAxis_math
  776. // },
  777. // series: [{
  778. // name: '未完成',
  779. // type: 'bar',
  780. // barWidth: 10,
  781. // data: yAxis_math
  782. // },
  783. // {
  784. // name: '已完成',
  785. // type: 'bar',
  786. // barWidth: 10,
  787. // data: yAxiss_math
  788. // }
  789. // ]
  790. // };
  791. // echartsPie = echarts.init(document.getElementById('lineChart'));
  792. // echartsPie.setOption(option);
  793. // }
  794. //
  795. // },
  796. // error: function(data) {
  797. // console.log(data.message);
  798. // }
  799. // });
  800. ///全部
  801. // $.ajax({
  802. // type: "get",
  803. // url: huayi.config.callcenter_url + 'WorkOrder/GetTotalReport',
  804. // async: true,
  805. // dataType: 'json',
  806. // data: {
  807. // openid: 'oKOqcv31fh76rtNmJDjKc39oIsfA'
  808. // },
  809. // success: function(data) {
  810. // console.log(data.state);
  811. // if(data.state == "success") {
  812. // console.log(data.data[0].unfinish);
  813. // $("#finish").text(data.data[0].finish);
  814. // $("#unfinifh").text(data.data[0].unfinish);
  815. // $("#RTotal").text(data.data[0].finish + data.data[0].unfinish);
  816. // var option = {
  817. // tooltip: {
  818. // formatter: "{a} <br/>{b} : {c} ({d}%)"
  819. // },
  820. // legend: {
  821. // orient: 'vertical',
  822. // // top: 'middle',
  823. //
  824. // x: 'left',
  825. // left: 25,
  826. // top: 80,
  827. // data: ['未完成', '已完成']
  828. // },
  829. // series: [{
  830. // type: 'pie',
  831. // radius: '65%',
  832. // center: ['50%', '50%'],
  833. // selectedMode: 'single',
  834. // data: [
  835. //
  836. // {
  837. // value: data.data[0].unfinish,
  838. // name: '未完成',
  839. // label: {
  840. // normal: {
  841. // formatter: "{b}: {c} ({d}%)"
  842. // }
  843. // }
  844. // },
  845. // {
  846. // value: data.data[0].finish,
  847. // name: '已完成',
  848. // label: {
  849. // normal: {
  850. // formatter: "{b}: {c} ({d}%)"
  851. // }
  852. // }
  853. // }
  854. //
  855. // ],
  856. // itemStyle: {
  857. // emphasis: {
  858. // shadowBlur: 10,
  859. // shadowOffsetX: 0,
  860. // shadowColor: 'rgba(0, 0, 0, 0.5)'
  861. // }
  862. // }
  863. // }]
  864. // };
  865. //
  866. // echartsPie = echarts.init(document.getElementById('lineCharts'));
  867. // echartsPie.setOption(option);
  868. // }
  869. //
  870. // },
  871. // error: function(data) {
  872. // console.log(data.message);
  873. // }
  874. // });
  875. //分类
  876. // $.ajax({
  877. // type: "get",
  878. // url: huayi.config.callcenter_url + 'WorkOrder/GetReportByFL',
  879. // async: true,
  880. // dataType: 'json',
  881. // data: {
  882. // openid: 'oKOqcv31fh76rtNmJDjKc39oIsfA'
  883. // },
  884. // success: function(data) {
  885. // console.log(data.state);
  886. // if(data.state == "success") {
  887. // console.log(data.data[0].unfinish);
  888. // var xAxis_fl = [];
  889. // var yAxis_ = [];
  890. // var yAxiss_ = [];
  891. // // $("#Workfinish").text(data.data[7].finish);
  892. // // $("#Workunfinifh").text(data.data[7].unfinish);
  893. // // $("#WorkTotal").text(data.data[7].finish + data.data[0].unfinish);
  894. // for(var i = 0; i < data.data.length; i++) {
  895. // xAxis_fl.push(data.data[i].fl);
  896. // yAxis_.push(data.data[i].unfinish);
  897. // yAxiss_.push(data.data[i].finish)
  898. // }
  899. // console.log(yAxis_);
  900. // var option = {
  901. // grid: {
  902. // x: 35,
  903. // x2: 10,
  904. // y: 30,
  905. // y2: 50,
  906. // borderWidth: 0
  907. // },
  908. // toolbox: {
  909. // show: false,
  910. // feature: {
  911. // mark: {
  912. // show: true
  913. // },
  914. // dataView: {
  915. // show: true,
  916. // readOnly: false
  917. // },
  918. // magicType: {
  919. // show: true,
  920. // type: ['line', 'bar']
  921. // },
  922. // restore: {
  923. // show: true
  924. // },
  925. // saveAsImage: {
  926. // show: true
  927. // }
  928. // }
  929. // },
  930. // legend: {
  931. // top: 20,
  932. // data: ['已完成', '未完成', ]
  933. // },
  934. //
  935. // calculable: false,
  936. // xAxis: [{
  937. // axisLabel: {
  938. // interval: 0
  939. // },
  940. // axisLabel: {
  941. // rotate: 40, //字体倾斜度数
  942. // interval: 0, //interval 是指间隔多少个类别画栅格,为 0 时则每个数据都画,为 1 时间隔 1 个画,以此类推
  943. // textStyle: {
  944. // color: "red", //字体颜色
  945. // fontSize: 10 //字体大小
  946. // }
  947. // },
  948. // splitArea: {
  949. // show: false,
  950. // },
  951. // splitLine: {
  952. // show: false
  953. // }, //去除网格线
  954. // type: 'category',
  955. // data: xAxis_fl
  956. // }],
  957. // yAxis: [{
  958. // show: false,
  959. // splitLine: {
  960. // show: false
  961. // }, //去除网格线
  962. // type: 'value',
  963. // splitArea: {
  964. // show: false,
  965. // }
  966. // }],
  967. // series: [{
  968. // name: '已完成',
  969. // type: 'bar',
  970. // barWidth: 10, //柱图宽度
  971. // itemStyle: {
  972. // normal: {
  973. // label: {
  974. // show: true
  975. // }
  976. // }
  977. // },
  978. // data: yAxiss_
  979. // }, {
  980. // name: '未完成',
  981. // type: 'bar',
  982. // barWidth: 10, //柱图宽度
  983. // itemStyle: {
  984. // normal: {
  985. // label: {
  986. // show: true
  987. // }
  988. // }
  989. // },
  990. // data: yAxis_
  991. // }]
  992. // };
  993. // echartsPie = echarts.init(document.getElementById('bar-Chart'));
  994. // echartsPie.setOption(option);
  995. // }
  996. //
  997. // },
  998. // error: function(data) {
  999. // console.log(data.message);
  1000. // }
  1001. // });
  1002. //部门
  1003. // $.ajax({
  1004. // type: "get",
  1005. // url: huayi.config.callcenter_url + 'WorkOrder/GetReportByDept',
  1006. // async: true,
  1007. // dataType: 'json',
  1008. // data: {
  1009. // openid: 'oKOqcv31fh76rtNmJDjKc39oIsfA'
  1010. // },
  1011. // success: function(data) {
  1012. // console.log(data.state);
  1013. // if(data.state == "success") {
  1014. // console.log(data.data[0].unfinish);
  1015. // var xAxis_fl = [];
  1016. // var yAxis_ = [];
  1017. // var yAxiss_ = [];
  1018. // // $("#Workfinish").text(data.data[7].finish);
  1019. // // $("#Workunfinifh").text(data.data[7].unfinish);
  1020. // // $("#WorkTotal").text(data.data[7].finish + data.data[0].unfinish);
  1021. // for(var i = 0; i < data.data.length; i++) {
  1022. // xAxis_fl.push(data.data[i].dept);
  1023. // yAxis_.push(data.data[i].unfinish);
  1024. // yAxiss_.push(data.data[i].finish)
  1025. // }
  1026. //
  1027. // var option = {
  1028. // grid: {
  1029. // x: 35,
  1030. // x2: 10,
  1031. // y: 30,
  1032. // y2: 50,
  1033. // borderWidth: 0
  1034. // },
  1035. // toolbox: {
  1036. // show: false,
  1037. // feature: {
  1038. // mark: {
  1039. // show: true
  1040. // },
  1041. // dataView: {
  1042. // show: true,
  1043. // readOnly: false
  1044. // },
  1045. // magicType: {
  1046. // show: true,
  1047. // type: ['line', 'bar']
  1048. // },
  1049. // restore: {
  1050. // show: true
  1051. // },
  1052. // saveAsImage: {
  1053. // show: true
  1054. // }
  1055. // }
  1056. // },
  1057. // legend: {
  1058. // top: 20,
  1059. // data: ['已完成', '未完成', ]
  1060. // },
  1061. //
  1062. // calculable: false,
  1063. // xAxis: [{
  1064. // axisLabel: {
  1065. // interval: 0
  1066. // },
  1067. // axisLabel: {
  1068. // rotate: 40, //字体倾斜度数
  1069. // interval: 0, //interval 是指间隔多少个类别画栅格,为 0 时则每个数据都画,为 1 时间隔 1 个画,以此类推
  1070. // textStyle: {
  1071. // color: "red", //字体颜色
  1072. // fontSize: 10 //字体大小
  1073. // }
  1074. // },
  1075. // splitArea: {
  1076. // show: false,
  1077. // },
  1078. // splitLine: {
  1079. // show: false
  1080. // }, //去除网格线
  1081. // type: 'category',
  1082. // data: xAxis_fl
  1083. // }],
  1084. // yAxis: [{
  1085. // show: false,
  1086. // splitLine: {
  1087. // show: false
  1088. // }, //去除网格线
  1089. // type: 'value',
  1090. // splitArea: {
  1091. // show: false,
  1092. // }
  1093. // }],
  1094. // series: [{
  1095. // name: '已完成',
  1096. // type: 'bar',
  1097. // barWidth: 10, //柱图宽度
  1098. // itemStyle: {
  1099. // normal: {
  1100. // label: {
  1101. // show: true
  1102. // }
  1103. // }
  1104. // },
  1105. // data: yAxis_
  1106. // }, {
  1107. // name: '未完成',
  1108. // type: 'bar',
  1109. // barWidth: 10, //柱图宽度
  1110. // itemStyle: {
  1111. // normal: {
  1112. // label: {
  1113. // show: true
  1114. // }
  1115. // }
  1116. // },
  1117. // data: yAxiss_
  1118. // }]
  1119. // };
  1120. // echartsPie = echarts.init(document.getElementById('bar-Chart2'));
  1121. // echartsPie.setOption(option);
  1122. // }
  1123. //
  1124. // },
  1125. // error: function(data) {
  1126. // console.log(data.message);
  1127. // }
  1128. // });
  1129. //获取区域
  1130. });
  1131. </script>
  1132. </body>
  1133. </html>