12345市长热线标准版-前端

widgets.html 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936
  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 0px;
  66. margin-bottom: 25px;
  67. margin-top: 25px;
  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);
  135. /* Opera 11.1 - 12.0 */
  136. /* Firefox 3.6 - 15 */
  137. /* 标准的语法 */
  138. }
  139. .bg_blue {
  140. /* Safari 5.1 - 6.0 */
  141. background: -webkit-linear-gradient(left, #f26997, #f080ce);
  142. background: -moz-linear-gradient(left, #f26997, #f080ce);
  143. background: -o-linear-gradient(left, #f26997, #f080ce);
  144. background: -webkit-gradient(linear, 100% 0, 0 0, from(#f080ce), to(#f26997));
  145. background: linear-gradient(left, #f26997, #f080ce);
  146. /* Opera 11.1 - 12.0 */
  147. /* Firefox 3.6 - 15 */
  148. /* 标准的语法 */
  149. }
  150. .bg_red {
  151. background: -webkit-linear-gradient(left, #fbc356, #fa9182);
  152. background: -moz-linear-gradient(left, #fbc356, #fa9182);
  153. background: -o-linear-gradient(left, #fbc356, #fa9182);
  154. background: -webkit-gradient(linear, 100% 0, 0 0, from(#fa9182), to(#fbc356));
  155. background: linear-gradient(left, #fbc356, #fa9182);
  156. /* Opera 11.1 - 12.0 */
  157. /* Firefox 3.6 - 15 */
  158. /* 标准的语法 */
  159. }
  160. .bg_black {
  161. background: -webkit-linear-gradient(left, #88eec0, #8bdedd);
  162. background: -moz-linear-gradient(left, #88eec0, #8bdedd);
  163. background: -o-linear-gradient(left, #88eec0, #8bdedd);
  164. background: -webkit-gradient(linear, 100% 0, 0 0, from(#8bdedd), to(#88eec0));
  165. background: linear-gradient(left, #88eec0, #8bdedd);
  166. /* Opera 11.1 - 12.0 */
  167. /* Firefox 3.6 - 15 */
  168. /* 标准的语法 */
  169. }
  170. .bg_wj {
  171. background: -webkit-linear-gradient(left, #6c77da, #7351ac);
  172. background: -moz-linear-gradient(left, #6c77da, #7351ac);
  173. background: -o-linear-gradient(left, #6c77da, #7351ac);
  174. background: -webkit-gradient(linear, 100% 0, 0 0, from(#7351ac), to(#6c77da));
  175. background: linear-gradient(left, #6c77da, #7351ac);
  176. /* Opera 11.1 - 12.0 */
  177. /* Firefox 3.6 - 15 */
  178. /* 标准的语法 */
  179. }
  180. .jg {
  181. letter-spacing: 2px;
  182. margin-top: -3px;
  183. font-weight: bolder;
  184. }
  185. .mt {
  186. margin-top: 10px;
  187. }
  188. .ibox-content {
  189. padding: 20px 20px 95px;
  190. background-color: #fefefe;
  191. border: 1px solid #EBEBEB;
  192. border-radius: 5px;
  193. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  194. box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  195. }
  196. .size-20 {
  197. font-size: 20px;
  198. color: #4078ad;
  199. }
  200. .border_top {
  201. border-top: none;
  202. }
  203. /*.margin-tops{
  204. margin-top:-50px;
  205. }*/
  206. .padding-left-min {
  207. padding-left: 0;
  208. padding-top: 5px;
  209. }
  210. .mins-left {
  211. padding-left: 30px;
  212. padding-right: 0;
  213. }
  214. .widget h2,
  215. .widget h3 {
  216. margin-top: 0px;
  217. }
  218. .col-sm-2 {
  219. width: 20%;
  220. }
  221. .col-sm-4 {
  222. width: 29%;
  223. }
  224. .min_right {
  225. margin-right: 15px;
  226. }
  227. .col-xs-3 {
  228. padding-left: 5px;
  229. }
  230. .huan {
  231. background: url(./img/huan.png)no-repeat;
  232. }
  233. .min-padding {
  234. padding-bottom: 10px;
  235. padding-top: 10px;
  236. border-bottom-width: 1px;
  237. border-radius: 5px !important;
  238. padding-left: 10px;
  239. padding-right: 5px;
  240. }
  241. .progress {
  242. height: 5px;
  243. background-color: #CCCCCC;
  244. }
  245. .progress-bar-ff {
  246. background-color: #FFF;
  247. }
  248. .ff {
  249. color: #FFFFFF;
  250. }
  251. .c-bottom {
  252. margin-top: 5px;
  253. }
  254. .bg-purple {
  255. background: -ms-linear-gradient(right, #ea76dd, #8a9cf4);
  256. background: -webkit-gradient(linear, 100% 0, 0 0, from(#ea76dd), to(#8a9cf4));
  257. background: -webkit-linear-gradient(right, #ea76dd, #8a9cf4);
  258. background: -moz-linear-gradient(right, #ea76dd, #8a9cf4);
  259. background: -o-linear-gradient(right, #ea76dd, #8a9cf4);
  260. background: linear-gradient(right, #ea76dd, #8a9cf4);
  261. background: #ea76dd;
  262. /* Opera 11.1 - 12.0 */
  263. /* Firefox 3.6 - 15 */
  264. /* 标准的语法 */
  265. }
  266. .bg-blues {
  267. background: -ms-linear-gradient(right, #67aefe, #67aefe);
  268. background: -webkit-linear-gradient(right, #67aefe, #67aefe);
  269. background: -moz-linear-gradient(right, #67aefe, #7bd7fe);
  270. background: -o-linear-gradient(right, #67aefe, #7bd7fe);
  271. background: -webkit-gradient(linear, 100% 0, 0 0, from(#67aefe), to(#7bd7fe));
  272. background: linear-gradient(right, #67aefe, #7bd7fe);
  273. background: #67aefe;
  274. /* Opera 11.1 - 12.0 */
  275. /* Firefox 3.6 - 15 */
  276. /* 标准的语法 */
  277. }
  278. .bg-yellow {
  279. background: -ms-linear-gradient(right, #f95a84, #f86953);
  280. background: -webkit-linear-gradient(right, #f95a84, #f86953);
  281. background: -moz-linear-gradient(right, #f95a84, #f86953);
  282. background: -o-linear-gradient(right, #f95a84, #f86953);
  283. background: -webkit-gradient(linear, 100% 0, 0 0, from(#f95a84), to(#f86953));
  284. background: linear-gradient(right, #f95a84, #f86953);
  285. background: #f95a84;
  286. /* Opera 11.1 - 12.0 */
  287. /* Firefox 3.6 - 15 */
  288. /* 标准的语法 */
  289. }
  290. /*.p-xl{
  291. border-width: 5px;
  292. border-style: solid;
  293. border-color: #69cbd0 #69cbd0 #be8bd6 #47bde3 ;
  294. border-radius: 50%;
  295. }*/
  296. .c-bottom {
  297. width: 29%;
  298. overflow: hidden;
  299. margin-right: 5px;
  300. float: left;
  301. }
  302. .c-bottom ul {
  303. overflow: hidden;
  304. width: 100%;
  305. padding-left: 0px;
  306. list-style: none;
  307. margin-top: 3px;
  308. cursor: pointer;
  309. }
  310. .Text {
  311. width: 100%;
  312. padding-bottom: 30px;
  313. }
  314. .c-b-ul {
  315. list-style: none;
  316. padding-left: 0;
  317. }
  318. .Announcement_title span {
  319. font-size: 16px;
  320. font-weight: 800;
  321. line-height: 80px;
  322. }
  323. .rl {
  324. float: right;
  325. }
  326. .Announcement_common {
  327. font-size: 14px;
  328. }
  329. .Announcement_common li {
  330. margin-bottom: 10px;
  331. }
  332. .At_time {
  333. padding-right: 25px;
  334. }
  335. .Announcement_common li a {
  336. color: #000;
  337. }
  338. .Announcement_common li a:hover {
  339. color: #00a1cb;
  340. }
  341. .new_title {
  342. height: 100%;
  343. line-height: 30px;
  344. padding: 0 15px;
  345. }
  346. .new_title h1 {
  347. margin: 0;
  348. padding: 0;
  349. font-weight: normal;
  350. line-height: 30px;
  351. white-space: nowrap;
  352. overflow: hidden;
  353. text-overflow: ellipsis;
  354. float: left;
  355. width: 55%;
  356. }
  357. .new_list li {
  358. height: 30px;
  359. }
  360. li {
  361. list-style-type: none;
  362. }
  363. .new_title a {
  364. color: #000;
  365. display: block;
  366. width: 100%;
  367. color: #666;
  368. white-space: nowrap;
  369. overflow: hidden;
  370. text-overflow: ellipsis;
  371. }
  372. .s-14 {
  373. font-size: 14px;
  374. }
  375. .new_title em {
  376. font-style: normal;
  377. }
  378. .Widths{
  379. width: 50%;
  380. margin-top: 8%;
  381. }
  382. </style>
  383. </head>
  384. <body class="gray-bg">
  385. <div class="wrapper wrapper-content animated fadeInRight">
  386. <div class="row LISTS" style="display: none;">
  387. <div class="col-sm-2">
  388. <div class="widget style1 bc">
  389. <div class="row">
  390. <div class="col-xs-3 text-center">
  391. <i class="fa iconfont fa-4x bg_black">&#xe732;</i>
  392. </div>
  393. <div class="col-xs-9 text-left mins-left">
  394. <h2 class="size-16 jg min_bottom"> 今日来电 </h2>
  395. <h2 class="font-bold size-15 min_bottom">0</h2>
  396. <h3 class="font-bold size-12 ">总时长:0M</h3>
  397. </div>
  398. </div>
  399. </div>
  400. </div>
  401. <div class="col-sm-2">
  402. <div class="widget style1 bc ">
  403. <div class="row">
  404. <div class="col-xs-3">
  405. <i class="fa iconfont fa-4x bg_green">&#xe735;</i>
  406. </div>
  407. <div class="col-xs-9 text-left mins-left">
  408. <h2 class="size-16 jg min_bottom"> 今日去电 </h2>
  409. <h2 class="font-bold size-15 min_bottom">0</h2>
  410. <h3 class="font-bold size-12 ">总时长:0M</h3>
  411. </div>
  412. </div>
  413. </div>
  414. </div>
  415. <div class="col-sm-2">
  416. <div class="widget style1 bc">
  417. <div class="row">
  418. <div class="col-xs-3">
  419. <i class="fa iconfont fa-4x bg_blue">&#xe606;</i>
  420. </div>
  421. <div class="col-xs-9 text-left mins-left">
  422. <h2 class="size-16 jg min_bottom"> 本月来电 </h2>
  423. <h2 class="font-bold size-15 min_bottom">0</h2>
  424. <h3 class="font-bold size-12 ">总时长:0M</h3>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. <div class="col-sm-2">
  430. <div class="widget style1 bc ">
  431. <div class="row">
  432. <div class="col-xs-3">
  433. <i class="fa iconfont fa-4x bg_red">&#xe61f;</i>
  434. </div>
  435. <div class="col-xs-9 text-left mins-left">
  436. <h2 class="size-16 jg min_bottom"> 本月去电 </h2>
  437. <h2 class="font-bold size-15 min_bottom">0</h2>
  438. <h3 class="font-bold size-12 ">总时长:0M</h3>
  439. </div>
  440. </div>
  441. </div>
  442. </div>
  443. <div class="col-sm-2">
  444. <div class="widget style1 bc ">
  445. <div class="row">
  446. <div class="col-xs-3">
  447. <i class="fa iconfont fa-4x bg_wj">&#xe61f;</i>
  448. </div>
  449. <div class="col-xs-9 text-left mins-left">
  450. <h2 class="size-16 jg min_bottom"> 未接来电</h2>
  451. <h2 class="font-bold size-15 min_bottom">0</h2>
  452. </div>
  453. </div>
  454. </div>
  455. </div>
  456. </div>
  457. <div class="row">
  458. <div class="col-sm-4 LIST_">
  459. <div class="left_box rows num_box">
  460. <div class="Announcement_box" style="width: 100%;">
  461. <div class="Announcement_title clearfix">
  462. <span class="fl" style="padding-left: 25px;">通知公告</span>
  463. <span class="rl" style="padding-right: 25px;">
  464. <a href="Announcement/AnnManagement.html">更多&gt;&gt;</a>
  465. </span>
  466. </div>
  467. <div class="Announcement_common">
  468. <ul style="padding: 0;" class="Ann">
  469. <!--<li>
  470. <div class="new_title clearfix">
  471. <h1 class="fl s-14">
  472. <a ><strong>·</strong> &nbsp;&nbsp;关于有关政策落实情况汇报</a>
  473. </h1>
  474. <em class="rl s-14">2017-5-21</em>
  475. </div>
  476. </li>
  477. <li>
  478. <div class="new_title clearfix">
  479. <h1 class="fl s-14">
  480. <a ><strong>·</strong> &nbsp;&nbsp;关于有关政策落实情况汇报</a>
  481. </h1>
  482. <em class="rl s-14">2017-5-21</em>
  483. </div>
  484. </li>
  485. <li>
  486. <div class="new_title clearfix">
  487. <h1 class="fl s-14">
  488. <a ><strong>·</strong> &nbsp;&nbsp;关于有关政策落实情况汇报</a>
  489. </h1>
  490. <em class="rl s-14">2017-5-21</em>
  491. </div>
  492. </li>
  493. <li>
  494. <div class="new_title clearfix">
  495. <h1 class="fl s-14">
  496. <a ><strong>·</strong> &nbsp;&nbsp;关于有关政策落实情况汇报</a>
  497. </h1>
  498. <em class="rl s-14">2017-5-21</em>
  499. </div>
  500. </li>
  501. <li>
  502. <div class="new_title clearfix">
  503. <h1 class="fl s-14">
  504. <a ><strong>·</strong> &nbsp;&nbsp;关于有关政策落实情况汇报</a>
  505. </h1>
  506. <em class="rl s-14">2017-5-21</em>
  507. </div>
  508. </li>-->
  509. </ul>
  510. </div>
  511. </div>
  512. </div>
  513. </div>
  514. <div class="col-sm-4 LIST_ ">
  515. <div class="left_box rows num_box">
  516. <div style="margin-top: 30px; width: 100%;">
  517. <div style="padding-left: 25px;font-size: 16px;font-weight: 800">
  518. <span>工单信息</span>
  519. </div>
  520. <div class="col-md-7 clear">
  521. <div class="widgets p-xl ss" id="hx" style="height: 300px;">
  522. </div>
  523. </div>
  524. <div class="col-md-5 clear">
  525. <div class="widgets p-xl border_left" style="margin-top: 60px;">
  526. <ul class="c-b-ul clearfix">
  527. <li class="fl Text">今日完成量</li>
  528. <li class="fl Text">今日待完成量</li>
  529. <li class="fl Text">今日待完成量</li>
  530. </ul>
  531. </div>
  532. </div>
  533. </div>
  534. </div>
  535. </div>
  536. <div class="col-sm-4 LISTS" style="width: 40%;display: none;">
  537. <div class="ibox float-e-margins mt">
  538. <div class="ibox-content">
  539. <div class="flot-chart">
  540. <div class="flot-chart-content" id="flot-pie-chart" style="height: 300px;width: 100%;"></div>
  541. </div>
  542. </div>
  543. </div>
  544. </div>
  545. </div>
  546. <div class="row LISTS"style="display: none;">
  547. <div class="col-sm-12">
  548. <div class="ibox-content">
  549. <div class="ibox float-e-margins">
  550. <div class="ibox-title border_top padding-left-min">
  551. <div class="ibox-tools margin-tops">
  552. <h3>去年同月相比<strong> ↑ 4.3%</strong></h3>
  553. <!-- <h3 class="size-20">↑ <strong>4.3%</strong></h3>-->
  554. </div>
  555. </div>
  556. <div style="width: 100%;">
  557. <div class="flot-chart-content" id="flot-line-chart" style='height: 400px;'></div>
  558. </div>
  559. <input type="hidden" id="RoleCode" />
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564. </div>
  565. <script src="./js/content.min.js?v=1.0.0"></script>
  566. <script src="./js/echarts.common.min.js"></script>
  567. <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
  568. <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
  569. <script>
  570. var inval;
  571. $(document).ready(function() {
  572. teltotal();
  573. telhour();
  574. telday();
  575. worktotal();
  576. Ann();
  577. DL();
  578. if(inval) {
  579. clearInterval(inval);
  580. }
  581. inval = setInterval(function() {
  582. teltotal();
  583. telhour();
  584. telday();
  585. worktotal();
  586. }, huayi.config.indextime);
  587. })
  588. function DL() {
  589. $.getJSON(huayi.config.callcenter_url + 'UserAccount/GetNowUser', {
  590. "token": $.cookie("token")
  591. }, function(result) {
  592. if(result.state.toLowerCase() == "success") {
  593. console.log(result);
  594. $("#RoleCode").val(result.data.user.F_RoleCode);
  595. console.log($("#RoleCode").val());
  596. if(result.data.user.F_RoleCode=="ZXLD"||result.data.user.F_RoleCode=="GLY"){
  597. $(".LISTS").show();
  598. }else {
  599. $(".LISTS").hide();
  600. $(".LIST_").addClass("Widths")
  601. }
  602. }
  603. })
  604. }
  605. function Ann() {
  606. $.getJSON(huayi.config.callcenter_url + 'Notice/GetListTop', {
  607. top: 5,
  608. "token": $.cookie("token")
  609. }, function(result) {
  610. console.log(result);
  611. var a;
  612. $(result.rows).each(function(i, n) {
  613. console.log(n.F_CreateOn);
  614. var T = n.F_CreateOn.substring(0, n.F_CreateOn.indexOf(' '));
  615. a = '<li>' +
  616. '<div class="new_title clearfix">' +
  617. '<h1 class="fl s-14">' +
  618. '<a href="Announcement/AnnD.html?wid=' + n.F_NoticeId + '"><strong>·</strong> &nbsp;&nbsp;' + n.F_Title + '</a>' +
  619. '</h1>' +
  620. '<em class="rl s-14">' + T + '</em>' +
  621. '</div>' +
  622. '</li>'
  623. $(a).appendTo($(".Ann"));
  624. })
  625. });
  626. }
  627. function teltotal() {
  628. $.getJSON(huayi.config.callcenter_url + 'Index/GetTelRecordsTotal', {
  629. "token": $.cookie("token")
  630. }, function(result) {
  631. if(result.state.toLowerCase() == "success") {
  632. $(".style1").eq(0).find("h2").eq(1).text(result.data.dayin.count);
  633. $(".style1").eq(0).find("h3").text("总时长:" + result.data.dayin.totaltime + "s");
  634. $(".style1").eq(1).find("h2").eq(1).text(result.data.dayout.count);
  635. $(".style1").eq(1).find("h3").text("总时长:" + result.data.dayout.totaltime + "s");
  636. $(".style1").eq(2).find("h2").eq(1).text(result.data.monin.count);
  637. $(".style1").eq(2).find("h3").text("总时长:" + result.data.monin.totaltime + "s");
  638. $(".style1").eq(3).find("h2").eq(1).text(result.data.monout.count);
  639. $(".style1").eq(3).find("h3").text("总时长:" + result.data.monout.totaltime + "s");
  640. $(".style1").eq(4).find("h2").eq(1).text(result.data.daynocon);
  641. }
  642. })
  643. }
  644. //图一
  645. var myChart1 = echarts.init(document.getElementById('flot-pie-chart'));
  646. var option1 = {
  647. tooltip: {},
  648. xAxis: {
  649. 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", ],
  650. axisLabel: {
  651. interval: 0, //横轴信息全部显示
  652. rotate: -0, //-30度角倾斜显示
  653. }
  654. },
  655. yAxis: {},
  656. series: [{
  657. name: '业绩',
  658. type: 'bar',
  659. itemStyle: {
  660. normal: {
  661. color: '#d5d5d5'
  662. }
  663. },
  664. barGap: '-100%',
  665. barMaxWidth: '100',
  666. 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]
  667. }, {
  668. name: '销量',
  669. type: 'bar',
  670. itemStyle: {
  671. normal: {
  672. color: '#7abf62'
  673. }
  674. },
  675. barMaxWidth: '100',
  676. 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]
  677. }]
  678. };
  679. function telhour() {
  680. $.getJSON(huayi.config.callcenter_url + 'Index/GetTelRecordsByHour', {
  681. "token": $.cookie("token")
  682. }, function(result) {
  683. if(result.state.toLowerCase() == "success") {
  684. option1.series[0].data = result.data.total;
  685. option1.series[1].data = result.data.count;
  686. myChart1.setOption(option1);
  687. }
  688. })
  689. }
  690. //myChart.setOption(option);
  691. //图3
  692. var option3 = {
  693. title: {
  694. text: '本月话务量及工单量折线图',
  695. x: -20
  696. },
  697. xAxis: {
  698. labels: {
  699. style: {
  700. color: '#19a0f5', //颜色
  701. fontSize: '12px' //字体
  702. }
  703. },
  704. categories: ['01日', '02日', '03日', '04日', '05日', '06日', '07日', '08日', '09日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日',
  705. '19日', '20日', '21日', '22日', '23日', '24日', '25日',
  706. '26日', '27日', '28日', '29日', '30日', '31日'
  707. ]
  708. },
  709. yAxis: {
  710. title: {
  711. text: '单位',
  712. rotation: 0,
  713. y: -180,
  714. style: {
  715. color: '#19a0f5', //颜色
  716. fontSize: '16px' //字体
  717. }
  718. },
  719. labels: {
  720. style: {
  721. color: '#19a0f5', //颜色
  722. fontSize: '14px' //字体
  723. }
  724. },
  725. plotLines: [{
  726. value: 0,
  727. width: 1,
  728. color: '#808080'
  729. }]
  730. },
  731. tooltip: {
  732. valueSuffix: '单'
  733. },
  734. legend: {
  735. align: 'right',
  736. verticalAlign: 'top',
  737. x: 0,
  738. y: 0
  739. },
  740. credits: {
  741. enabled: false
  742. },
  743. series: [{
  744. name: '工单量',
  745. data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3,
  746. 13.9, 9.6, 21.5, 25.2, 26.5, 23.3, 6.9, 9.5, 14.5, 18.2,
  747. 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 9.6, 21.5, 25.2
  748. ],
  749. color: '#ffaaac'
  750. }, {
  751. name: '话务量',
  752. data: [2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1,
  753. 8.6, 2.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 9.6,
  754. 13.9, 9.6, 21.5, 25.2, 26.5, 23.3, 6.9, 9.5, 18.2, 21.5, 25.2
  755. ],
  756. color: '#d8e7ef'
  757. }]
  758. };
  759. function telday() {
  760. $.getJSON(huayi.config.callcenter_url + 'Index/GetWorkTelByDay', {
  761. "token": $.cookie("token")
  762. }, function(result) {
  763. if(result.state.toLowerCase() == "success") {
  764. $(".ibox-tools h3 strong").text(result.data.bl);
  765. option3.xAxis.categories = result.data.col;
  766. option3.series[0].data = result.data.worktotal;
  767. option3.series[1].data = result.data.teltotal;
  768. var chart3 = new Highcharts.Chart('flot-line-chart', option3);
  769. }
  770. })
  771. }
  772. //图2
  773. var myChart2 = echarts.init(document.getElementById('hx'));
  774. var option2 = {
  775. title: {
  776. text: '总计',
  777. subtext: '10000',
  778. x: 'center',
  779. y: 60,
  780. textStyle: {
  781. fontWeight: 'normal',
  782. fontSize: 16
  783. }
  784. },
  785. color: ['#bf8bd5', '#68cbcf'],
  786. series: [{
  787. type: 'pie',
  788. radius: ['40%', '60%'],
  789. center: ['50%', '30%'],
  790. avoidLabelOverlap: false,
  791. hoverAnimation: false,
  792. label: {
  793. normal: {
  794. show: false,
  795. position: 'center',
  796. formatter: "",
  797. },
  798. emphasis: {
  799. show: true,
  800. textStyle: {
  801. fontSize: '14',
  802. fontWeight: 'bold'
  803. }
  804. }
  805. },
  806. labelLine: {
  807. normal: {
  808. show: false
  809. }
  810. },
  811. data: [{
  812. value: 335,
  813. name: '直接访问'
  814. },
  815. {
  816. value: 210,
  817. name: '邮件营销'
  818. }
  819. ]
  820. }]
  821. };
  822. function worktotal() {
  823. $.getJSON(huayi.config.callcenter_url + 'Index/GetWorkTotal', {
  824. "token": $.cookie("token")
  825. }, function(result) {
  826. if(result.state.toLowerCase() == "success") {
  827. option2.title.subtext = result.data.daywc * 1 + result.data.daywwc * 1;
  828. option2.series[0].data = [{
  829. value: result.data.daywwc,
  830. name: '今日待完成量'
  831. }, {
  832. value: result.data.daywc,
  833. name: '今日完成量'
  834. }]
  835. $(".bg-blues h3").find("span").text(result.data.daywc);
  836. $(".bg-purple h3").find("span").text(result.data.daywwc);
  837. $(".bg-yellow h3").find("span").text(result.data.monwwc);
  838. myChart2.setOption(option2);
  839. }
  840. })
  841. }
  842. </script>
  843. </body>
  844. <!-- 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 -->
  845. </html>