Нет описания

widgets.html 28KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <script src="./Script/Common/huayi.load.js"></script>
  7. <script src="./Script/Common/huayi.config.js"></script>
  8. <style>
  9. * {
  10. font-family: "微软雅黑";
  11. }
  12. @font-face {
  13. font-family: 'iconfont';
  14. src: url('fonts/iconfont.eot');
  15. /* IE9*/
  16. src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  17. url('fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  18. url('fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  19. url('fonts/iconfont.svg#iconfont') format('svg');
  20. /* iOS 4.1- */
  21. }
  22. .iconfont {
  23. font-family: "iconfont";
  24. font-size: 25px;
  25. font-style: normal;
  26. }
  27. .fl {
  28. float: left;
  29. }
  30. .fr {
  31. float: right;
  32. }
  33. .bc {
  34. background-color: #F5F5F5;
  35. border: 2px solid #EBEBEB;
  36. padding: 25px 20px;
  37. }
  38. .size-14 {
  39. font-size: 14px;
  40. font-weight: normal;
  41. }
  42. .ba {
  43. background-color: #F5F5F5;
  44. border: 2px solid #EBEBEB;
  45. padding: 0px;
  46. }
  47. .left_box {
  48. background-color: #FFFFFF;
  49. }
  50. .rows {
  51. display: -webkit-box;
  52. }
  53. .lazur {
  54. color: #23c6c8;
  55. }
  56. .bottom_line {
  57. border-bottom: 2px solid #CCCCCC;
  58. }
  59. .clear {
  60. margin: 0;
  61. padding: 0;
  62. margin-top: 2%;
  63. }
  64. .widgets {
  65. padding: 15px 20px;
  66. margin-bottom: 25px;
  67. margin-top: 35px;
  68. }
  69. /*.ss{
  70. background: url(img/huan.png) no-repeat;
  71. background-size: contain;
  72. background-position: center;
  73. margin-left: 20px;
  74. }*/
  75. .fenxian {
  76. border: 2px solid #CCCCCC;
  77. margin-bottom: 10px;
  78. display: inherit;
  79. position: absolute;
  80. width: 100%;
  81. TOP: 50%;
  82. }
  83. .left1 {
  84. LEFT: 15px;
  85. }
  86. .left2 {
  87. right: 15px;
  88. }
  89. .rowTitle {
  90. position: absolute;
  91. font-size: 16px;
  92. top: 40px;
  93. left: 45px;
  94. font-weight: 800;
  95. padding-bottom: 10px;
  96. border-bottom: 2px solid #CCCCCC;
  97. letter-spacing: 4px;
  98. }
  99. .num_box {
  100. background-color: #fefefe;
  101. border: 1px solid #EBEBEB;
  102. border-radius: 5px;
  103. margin-top: 10px;
  104. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  105. height: 318px;
  106. }
  107. .size-16 {
  108. font-size: 16px !important;
  109. }
  110. .size-14 {
  111. font-size: 14px !important;
  112. }
  113. .size-15 {
  114. font-size: 15px !important;
  115. }
  116. .size-12 {
  117. font-size: 12px !important;
  118. }
  119. .min_bottom {
  120. margin-bottom: 5px !important;
  121. }
  122. .fa-4x {
  123. font-size: 3em;
  124. color: #FFFFFF;
  125. background-color: #67cdcb;
  126. padding: 10px;
  127. border-radius: 5px;
  128. }
  129. .bg_green {
  130. background: -webkit-linear-gradient(left, #accafd, #b8dcfc);
  131. background: -moz-linear-gradient(left, #accafd, #b8dcfc);
  132. background: -o-linear-gradient(left, #accafd, #b8dcfc);
  133. background: -webkit-gradient(linear, 100% 0, 0 0, from(#b8dcfc), to(#accafd));
  134. background: linear-gradient(left, #accafd, #b8dcfc); /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  135. }
  136. .bg_blue { /* Safari 5.1 - 6.0 */
  137. background: -webkit-linear-gradient(left, #f26997, #f080ce);
  138. background: -moz-linear-gradient(left, #f26997, #f080ce);
  139. background: -o-linear-gradient(left, #f26997, #f080ce);
  140. background: -webkit-gradient(linear, 100% 0, 0 0, from(#f080ce), to(#f26997));
  141. background: linear-gradient(left, #f26997, #f080ce); /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  142. }
  143. .bg_red {
  144. background: -webkit-linear-gradient(left, #fbc356, #fa9182);
  145. background: -moz-linear-gradient(left, #fbc356, #fa9182);
  146. background: -o-linear-gradient(left, #fbc356, #fa9182);
  147. background: -webkit-gradient(linear, 100% 0, 0 0, from(#fa9182), to(#fbc356));
  148. background: linear-gradient(left, #fbc356, #fa9182); /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  149. }
  150. .bg_black {
  151. background: -webkit-linear-gradient(left, #88eec0, #8bdedd);
  152. background: -moz-linear-gradient(left, #88eec0, #8bdedd);
  153. background: -o-linear-gradient(left, #88eec0, #8bdedd);
  154. background: -webkit-gradient(linear, 100% 0, 0 0, from(#8bdedd), to(#88eec0));
  155. background: linear-gradient(left, #88eec0, #8bdedd); /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  156. }
  157. .bg_wj {
  158. background: -webkit-linear-gradient(left, #6c77da, #7351ac);
  159. background: -moz-linear-gradient(left, #6c77da, #7351ac);
  160. background: -o-linear-gradient(left, #6c77da, #7351ac);
  161. background: -webkit-gradient(linear, 100% 0, 0 0, from(#7351ac), to(#6c77da));
  162. background: linear-gradient(left, #6c77da, #7351ac); /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  163. }
  164. .jg {
  165. letter-spacing: 2px;
  166. margin-top: -3px;
  167. font-weight: bolder;
  168. }
  169. .mt {
  170. margin-top: 10px;
  171. }
  172. .ibox-content {
  173. padding: 20px 20px 95px;
  174. background-color: #fefefe;
  175. border: 1px solid #EBEBEB;
  176. border-radius: 5px;
  177. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  178. box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  179. }
  180. .size-20 {
  181. font-size: 20px;
  182. color: #4078ad;
  183. }
  184. .border_top {
  185. border-top: none;
  186. }
  187. /*.margin-tops{
  188. margin-top:-50px;
  189. }*/
  190. .padding-left-min {
  191. padding-left: 0;
  192. padding-top: 5px;
  193. }
  194. .mins-left {
  195. padding-left: 30px;
  196. padding-right: 0;
  197. }
  198. .widget h2, .widget h3 {
  199. margin-top: 0px;
  200. }
  201. .col-sm-2 {
  202. width: 20%;
  203. }
  204. .col-sm-4 {
  205. width: 29%;
  206. }
  207. .min_right {
  208. margin-right: 15px;
  209. }
  210. .col-xs-3 {
  211. padding-left: 5px;
  212. }
  213. .huan {
  214. background: url(./img/huan.png)no-repeat;
  215. }
  216. .min-padding {
  217. padding-bottom: 10px;
  218. padding-top: 10px;
  219. border-bottom-width: 1px;
  220. border-radius: 5px !important;
  221. padding-left: 10px;
  222. padding-right: 5px;
  223. }
  224. .progress {
  225. height: 5px;
  226. background-color: #CCCCCC;
  227. }
  228. .progress-bar-ff {
  229. background-color: #FFF;
  230. }
  231. .ff {
  232. color: #FFFFFF;
  233. }
  234. .c-bottom {
  235. margin-top: 5px;
  236. }
  237. .bg-purple {
  238. background: -ms-linear-gradient(right, #ea76dd,#8a9cf4);
  239. background: -webkit-gradient(linear, 100% 0, 0 0, from(#ea76dd), to(#8a9cf4));
  240. background: -webkit-linear-gradient(right, #ea76dd, #8a9cf4);
  241. background: -moz-linear-gradient(right, #ea76dd, #8a9cf4);
  242. background: -o-linear-gradient(right, #ea76dd, #8a9cf4);
  243. background: linear-gradient(right, #ea76dd, #8a9cf4);
  244. background: #ea76dd; /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  245. }
  246. .bg-blues {
  247. background: -ms-linear-gradient(right, #67aefe,#67aefe);
  248. background: -webkit-linear-gradient(right, #67aefe, #67aefe);
  249. background: -moz-linear-gradient(right, #67aefe, #7bd7fe);
  250. background: -o-linear-gradient(right, #67aefe, #7bd7fe);
  251. background: -webkit-gradient(linear, 100% 0, 0 0, from(#67aefe), to(#7bd7fe));
  252. background: linear-gradient(right, #67aefe, #7bd7fe);
  253. background: #67aefe; /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  254. }
  255. .bg-yellow {
  256. background: -ms-linear-gradient(right,#f95a84,#f86953);
  257. background: -webkit-linear-gradient(right, #f95a84, #f86953);
  258. background: -moz-linear-gradient(right, #f95a84, #f86953);
  259. background: -o-linear-gradient(right, #f95a84, #f86953);
  260. background: -webkit-gradient(linear, 100% 0, 0 0, from(#f95a84), to(#f86953));
  261. background: linear-gradient(right, #f95a84, #f86953);
  262. background: #f95a84; /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */
  263. }
  264. /*.p-xl{
  265. border-width: 5px;
  266. border-style: solid;
  267. border-color: #69cbd0 #69cbd0 #be8bd6 #47bde3 ;
  268. border-radius: 50%;
  269. }*/
  270. .c-bottom {
  271. width: 29%;
  272. overflow: hidden;
  273. margin-right: 5px;
  274. float: left;
  275. }
  276. .c-bottom ul {
  277. overflow: hidden;
  278. width: 100%;
  279. padding-left: 0px;
  280. list-style: none;
  281. margin-top: 3px;
  282. cursor: pointer;
  283. }
  284. .Text{
  285. width: 100%;
  286. text-align: center;
  287. }
  288. </style>
  289. </head>
  290. <body class="gray-bg">
  291. <div class="wrapper wrapper-content animated fadeInRight">
  292. <div class="row">
  293. <div class="col-sm-2">
  294. <div class="widget style1 bc">
  295. <div class="row">
  296. <div class="col-xs-3 text-center">
  297. <i class="fa iconfont fa-4x bg_black">&#xe732;</i>
  298. </div>
  299. <div class="col-xs-9 text-left mins-left">
  300. <h2 class="size-16 jg min_bottom"> 今日来电 </h2>
  301. <h2 class="font-bold size-15 min_bottom">26</h2>
  302. <h3 class="font-bold size-12 ">总时长:120000M</h3>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. <div class="col-sm-2">
  308. <div class="widget style1 bc ">
  309. <div class="row">
  310. <div class="col-xs-3">
  311. <i class="fa iconfont fa-4x bg_green">&#xe735;</i>
  312. </div>
  313. <div class="col-xs-9 text-left mins-left">
  314. <h2 class="size-16 jg min_bottom"> 今日去电 </h2>
  315. <h2 class="font-bold size-15 min_bottom">26</h2>
  316. <h3 class="font-bold size-12 ">总时长:120000M</h3>
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. <div class="col-sm-2">
  322. <div class="widget style1 bc">
  323. <div class="row">
  324. <div class="col-xs-3">
  325. <i class="fa iconfont fa-4x bg_blue">&#xe606;</i>
  326. </div>
  327. <div class="col-xs-9 text-left mins-left">
  328. <h2 class="size-16 jg min_bottom"> 本月来电 </h2>
  329. <h2 class="font-bold size-15 min_bottom">26</h2>
  330. <h3 class="font-bold size-12 ">总时长:120000M</h3>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. <div class="col-sm-2">
  336. <div class="widget style1 bc ">
  337. <div class="row">
  338. <div class="col-xs-3">
  339. <i class="fa iconfont fa-4x bg_red">&#xe61f;</i>
  340. </div>
  341. <div class="col-xs-9 text-left mins-left">
  342. <h2 class="size-16 jg min_bottom"> 本月去电 </h2>
  343. <h2 class="font-bold size-15 min_bottom">26</h2>
  344. <h3 class="font-bold size-12 ">总时长:120000M</h3>
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. <div class="col-sm-2">
  350. <div class="widget style1 bc ">
  351. <div class="row">
  352. <div class="col-xs-3">
  353. <i class="fa iconfont fa-4x bg_wj">&#xe61f;</i>
  354. </div>
  355. <div class="col-xs-9 text-left mins-left">
  356. <h2 class="size-16 jg min_bottom"> 未接来电</h2>
  357. <h2 class="font-bold size-15 min_bottom">26</h2>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. <div class="row">
  364. <div class="col-sm-8 " style="width: 60%;">
  365. <div class="left_box rows num_box">
  366. <b class="rowTitle">工单信息</b>
  367. <div style="margin-top: 30px; width: 100%;">
  368. <div class="col-md-3 clear">
  369. <div class="widgets p-xl ss" id="hx" style="height: 280px; width: 200px; margin: 0 auto;">
  370. <!--<div style="margin-bottom: 50px;">
  371. <h2 class="text-center">
  372. <span class="lazur size-14">总计</span>
  373. </h2>
  374. <h2 class="m-xs text-center size-14">100000000</h2>
  375. </div>-->
  376. </div>
  377. </div>
  378. <div class="col-md-9 clear">
  379. <div class="widgets p-xl border_left" style="margin-top: 60px;">
  380. <div class="col-sm-4" style="margin-right: 5px;">
  381. <div class="row bc min-padding bg-blues">
  382. <h3 class="ff"><span>300</span>单</h3>
  383. <div class="progress">
  384. <div class="progress-bar progress-bar-ff" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. <div class="col-sm-4 ">
  390. <div class="row bc min-padding bg-purple">
  391. <h3 class="ff"><span>300</span>单</h3>
  392. <div class="progress">
  393. <div class="progress-bar progress-bar-ff" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
  394. </div>
  395. </div>
  396. </div>
  397. </div>
  398. <div class="col-sm-4" style="margin-right: 5px;">
  399. <div class="row bc min-padding bg-yellow">
  400. <h3 class="ff"><span>300</span>单</h3>
  401. <div class="progress">
  402. <div class="progress-bar progress-bar-ff" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
  403. </div>
  404. </div>
  405. </div>
  406. </div>
  407. <div class="c-bottom ">
  408. <ul class="c-b-ul">
  409. <li class="fl Text">今日完成量</li>
  410. </ul>
  411. </div>
  412. <div class="c-bottom ">
  413. <ul class="c-b-ul">
  414. <li class="fl Text">今日待完成量</li>
  415. </ul>
  416. </div>
  417. <div class="c-bottom ">
  418. <ul class="c-b-ul ">
  419. <li class="fl Text">本月待完成量</li>
  420. </ul>
  421. </div>
  422. </div>
  423. </div>
  424. </div>
  425. </div>
  426. </div>
  427. <div class="col-sm-4" style="width: 40%;">
  428. <div class="ibox float-e-margins mt">
  429. <div class="ibox-content">
  430. <div class="flot-chart">
  431. <div class="flot-chart-content" id="flot-pie-chart" style="height: 300px;width: 100%;"></div>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. </div>
  437. <div class="row">
  438. <div class="col-sm-12">
  439. <div class="ibox-content">
  440. <div class="ibox float-e-margins">
  441. <div class="ibox-title border_top padding-left-min">
  442. <div class="ibox-tools margin-tops">
  443. <h3>去年同月相比<strong> ↑ 4.3%</strong></h3>
  444. <!-- <h3 class="size-20">↑ <strong>4.3%</strong></h3>-->
  445. </div>
  446. </div>
  447. <div style="width: 100%;">
  448. <div class="flot-chart-content" id="flot-line-chart" style='height: 400px;'></div>
  449. </div>
  450. </div>
  451. </div>
  452. </div>
  453. </div>
  454. </div>
  455. <script src="./js/jquery-ui-1.10.4.min.js"></script>
  456. <script src="./js/content.min.js?v=1.0.0"></script>
  457. <script src="./js/echarts.common.min.js"></script>
  458. <script src="js/highcharts/highcharts.js"></script>
  459. <script src="js/highcharts/highcharts-zh_CN.js"></script>
  460. <!--<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
  461. <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>-->
  462. <script>
  463. var inval;
  464. $(document).ready(function () {
  465. teltotal();
  466. telhour();
  467. telday();
  468. worktotal();
  469. if (inval) {
  470. clearInterval(inval);
  471. }
  472. inval = setInterval(function () { teltotal(); telhour(); telday(); worktotal(); }, huayi.config.indextime);
  473. })
  474. function teltotal() {
  475. $.getJSON(huayi.config.callcenter_url + 'Index/GetTelRecordsTotal', { "token": $.cookie("token") }, function (result) {
  476. if (result.state.toLowerCase() == "success") {
  477. $(".style1").eq(0).find("h2").eq(1).text(result.data.dayin.count);
  478. $(".style1").eq(0).find("h3").text("总时长:" + result.data.dayin.totaltime + "");
  479. $(".style1").eq(1).find("h2").eq(1).text(result.data.dayout.count);
  480. $(".style1").eq(1).find("h3").text("总时长:" + result.data.dayout.totaltime + "");
  481. $(".style1").eq(2).find("h2").eq(1).text(result.data.monin.count);
  482. $(".style1").eq(2).find("h3").text("总时长:" + result.data.monin.totaltime + "");
  483. $(".style1").eq(3).find("h2").eq(1).text(result.data.monout.count);
  484. $(".style1").eq(3).find("h3").text("总时长:" + result.data.monout.totaltime + "");
  485. $(".style1").eq(4).find("h2").eq(1).text(result.data.daynocon);
  486. }
  487. })
  488. }
  489. //图一
  490. var myChart1 = echarts.init(document.getElementById('flot-pie-chart'));
  491. var option1 = {
  492. title: {
  493. text: '今日每小时的总通话量和接通量',
  494. x: 'left',
  495. textStyle: {
  496. color: '#333',
  497. fontWeight: '500',
  498. fontSize: 18
  499. },
  500. },
  501. legend: {
  502. orient: 'horizontal',
  503. x: 'right',
  504. top: 20,
  505. data: ['总通话量', '接通量']
  506. },
  507. tooltip: {
  508. trigger: 'item',
  509. formatter: "{b}点,{a}为{c}通"
  510. },
  511. xAxis: {
  512. name: '时间',
  513. data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24",],
  514. axisLabel: {
  515. interval: 0,//横轴信息全部显示
  516. rotate: -0,//-30度角倾斜显示
  517. }
  518. },
  519. yAxis: {
  520. name: '数量'
  521. },
  522. series: [{
  523. name: '总通话量',
  524. type: 'bar',
  525. itemStyle: {
  526. normal: {
  527. color: '#d5d5d5'
  528. }
  529. },
  530. barGap: '-100%',
  531. barMaxWidth: '100',
  532. data: [51, 30, 40, 25, 80, 40, 42, 86, 50, 26, 12, 30, 55, 15, 18, 55, 28, 26, 50, 46, 98, 66, 50, 85]
  533. }, {
  534. name: '接通量',
  535. type: 'bar',
  536. itemStyle: {
  537. normal: {
  538. color: '#7abf62'
  539. }
  540. },
  541. barMaxWidth: '100',
  542. data: [5, 20, 36, 10, 15, 20, 28, 36, 20, 36, 5, 20, 36, 10, 15, 20, 28, 36, 20, 36, 88, 46, 30, 45]
  543. }]
  544. };
  545. function telhour() {
  546. $.getJSON(huayi.config.callcenter_url + 'Index/GetTelRecordsByHour', { "token": $.cookie("token") }, function (result) {
  547. if (result.state.toLowerCase() == "success") {
  548. option1.series[0].data = result.data.total;
  549. option1.series[1].data = result.data.count;
  550. myChart1.setOption(option1);
  551. }
  552. })
  553. }
  554. //myChart.setOption(option);
  555. //图3
  556. var option3 = {
  557. title: {
  558. text: '本月话务量及工单量折线图',
  559. x: -20
  560. },
  561. xAxis: {
  562. labels: {
  563. style: {
  564. color: '#19a0f5',//颜色
  565. fontSize: '12px' //字体
  566. }
  567. },
  568. categories: ['01日', '02日', '03日', '04日', '05日', '06日', '07日', '08日', '09日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日',
  569. '19日', '20日', '21日', '22日', '23日', '24日', '25日',
  570. '26日', '27日', '28日', '29日', '30日', '31日']
  571. },
  572. yAxis: {
  573. title: {
  574. text: '单位',
  575. rotation: 0,
  576. y: -180,
  577. style: {
  578. color: '#19a0f5',//颜色
  579. fontSize: '16px' //字体
  580. }
  581. },
  582. labels: {
  583. style: {
  584. color: '#19a0f5',//颜色
  585. fontSize: '14px' //字体
  586. }
  587. },
  588. plotLines: [{
  589. value: 0,
  590. width: 1,
  591. color: '#808080'
  592. }]
  593. },
  594. tooltip: {
  595. valueSuffix: '单'
  596. },
  597. legend: {
  598. align: 'right',
  599. verticalAlign: 'top',
  600. x: 0,
  601. y: 0
  602. },
  603. credits: {
  604. enabled: false
  605. },
  606. series: [{
  607. name: '工单量',
  608. data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3,
  609. 13.9, 9.6, 21.5, 25.2, 26.5, 23.3, 6.9, 9.5, 14.5, 18.2,
  610. 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 9.6, 21.5, 25.2],
  611. color: '#ffaaac'
  612. }, {
  613. name: '话务量',
  614. data: [2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1,
  615. 8.6, 2.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 9.6,
  616. 13.9, 9.6, 21.5, 25.2, 26.5, 23.3, 6.9, 9.5, 18.2, 21.5, 25.2
  617. ],
  618. color: '#d8e7ef'
  619. }]
  620. };
  621. function telday() {
  622. $.getJSON(huayi.config.callcenter_url + 'Index/GetWorkTelByDay', { "token": $.cookie("token") }, function (result) {
  623. if (result.state.toLowerCase() == "success") {
  624. $(".ibox-tools h3 strong").text(result.data.bl);
  625. option3.xAxis.categories = result.data.col;
  626. option3.series[0].data = result.data.worktotal;
  627. option3.series[1].data = result.data.teltotal;
  628. var chart3 = new Highcharts.Chart('flot-line-chart', option3);
  629. }
  630. })
  631. }
  632. //图2
  633. var myChart2 = echarts.init(document.getElementById('hx'));
  634. var option2 = {
  635. color: ['#67aefe', '#ea76dd'],
  636. title: {
  637. text: '总计',
  638. subtext: '10000',
  639. x: 'center',
  640. y: 60,
  641. textStyle: {
  642. fontWeight: 'normal',
  643. fontSize: 16
  644. }
  645. },
  646. legend: {
  647. orient: 'horizontal',
  648. x: 'center',
  649. bottom: 50,
  650. data: ['今日完成量', '今日待完成量']
  651. },
  652. series: [{
  653. type: 'pie',
  654. radius: ['50%', '80%'],
  655. center: ['50%', '30%'],
  656. avoidLabelOverlap: false,
  657. hoverAnimation: false,
  658. label: {
  659. normal: {
  660. show: false,
  661. position: 'center',
  662. formatter: "",
  663. },
  664. emphasis: {
  665. show: true,
  666. textStyle: {
  667. fontSize: '14',
  668. fontWeight: 'bold'
  669. }
  670. }
  671. },
  672. labelLine: {
  673. normal: {
  674. show: false
  675. }
  676. },
  677. data: [{
  678. value: 0,
  679. name: '今日完成量'
  680. }, {
  681. value: 100,
  682. name: '今日待完成量'
  683. },
  684. ]
  685. }]
  686. };
  687. function worktotal() {
  688. $.getJSON(huayi.config.callcenter_url + 'Index/GetWorkTotal', { "token": $.cookie("token") }, function (result) {
  689. if (result.state.toLowerCase() == "success") {
  690. option2.title.subtext = result.data.daywc * 1 + result.data.daywwc * 1;
  691. option2.series[0].data = [{ value: result.data.daywwc, name: '今日待完成量' }, { value: result.data.daywc, name: '今日完成量' }]
  692. $(".bg-blues h3").find("span").text(result.data.daywc);
  693. $(".bg-purple h3").find("span").text(result.data.daywwc);
  694. $(".bg-yellow h3").find("span").text(result.data.monwwc);
  695. myChart2.setOption(option2);
  696. }
  697. })
  698. }
  699. </script>
  700. </body>
  701. <!-- Mirrored from www.zi-han.net/theme/hplus/widgets.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
  702. </html>