handlegroup.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <section id="page-title">
  2. <div class="row">
  3. <div class="col-sm-8">
  4. <h1 class="mainTitle">事件处理组报表<i tooltip='请查看事件处理组报表相关数据。' tooltip-placement="right" class="fa ti-help-alt margin-left-10 fontcolor-five pointfont"></i></h1>
  5. </div>
  6. </div>
  7. </section>
  8. <!-- end: PAGE TITLE -->
  9. <!-- start: BOOTSRAP NAV TREE -->
  10. <style>
  11. .bodybackground {
  12. background: #eee;
  13. }
  14. .know-text-group {
  15. display: inline-block;
  16. box-sizing: border-box;
  17. border-radius: 2px;
  18. /* border: 1px solid #fff; */
  19. /* padding-top: 5px; */
  20. width: 100%;
  21. /* padding-bottom: 5px; */
  22. }
  23. .know-text-group-div {
  24. display: inline-block;
  25. width: 12%;
  26. padding-top: 5px;
  27. padding-bottom: 5px;
  28. overflow: hidden;
  29. white-space: nowrap;
  30. text-overflow: ellipsis;
  31. }
  32. .know-text-group-div:hover {
  33. background-color: #005395 !important;
  34. color: #fff;
  35. }
  36. .know-text-group-div.active,
  37. .know-text-group-div:focus,
  38. .know-text-group-div:hover {
  39. background-color: #005395 !important;
  40. color: #fff;
  41. }
  42. .know-text-color {
  43. padding-left: 14px;
  44. font-size: 14px;
  45. color: #93989e;
  46. }
  47. .know-span {
  48. display: inline-block;
  49. text-align: center;
  50. }
  51. .know-num {
  52. width: 28px;
  53. height: 20px;
  54. line-height: 20px;
  55. font-size: 12px;
  56. border-radius: 10px;
  57. margin-right: 10px;
  58. color: white;
  59. }
  60. .bg-yellow {
  61. background: #005395;
  62. }
  63. .bg-green {
  64. background: #2edbb8;
  65. }
  66. .bg-blue {
  67. background: #6f9ad4;
  68. }
  69. .leftBorder {
  70. border-left: 1px solid #eeeeee;
  71. }
  72. .leftBorder.active,
  73. .leftBorder:focus,
  74. .leftBorder:hover {
  75. border-left: 0px solid #005395;
  76. }
  77. .divRight {
  78. float: right;
  79. }
  80. input[type="text"] {}
  81. .searchInput {
  82. border: none !important;
  83. }
  84. /*
  85. input:focus {
  86. box-shadow: none !important;
  87. border: none !important;
  88. background-color: white !important;
  89. } */
  90. .know-left-div {
  91. width: 706px;
  92. /* margin-top: 15px; */
  93. /* display: inline-block; */
  94. float: left;
  95. margin-right: 20px;
  96. }
  97. .know-right-div {
  98. /* margin-top: 15px; */
  99. /* display: inline-block; */
  100. overflow: hidden;
  101. }
  102. .know-left-up-div {
  103. margin-bottom: 20px;
  104. }
  105. .know-left-div-head {
  106. height: 34px;
  107. line-height: 34px;
  108. background: #e9eff8;
  109. font-size: 14px;
  110. color: #606367;
  111. border-radius: 8px 8px 0 0;
  112. padding-left: 10px;
  113. }
  114. /* .listheight {}
  115. */
  116. .gobutton {
  117. color: 005395;
  118. font-family: "microsoft yahei";
  119. }
  120. .gobutton:hover {
  121. color: #1b3651;
  122. }
  123. .gobutton:focus,
  124. .gobutton:hover {
  125. color: #1b3651;
  126. }
  127. .dash_head {
  128. font-size: 14px;
  129. }
  130. .dash_headborder {
  131. height: 260px;
  132. border: 1px solid #dedede;
  133. border-radius: 2px;
  134. }
  135. .dashheadcolor {
  136. border-bottom: 1px solid #dedede;
  137. border-radius: 2px;
  138. }
  139. .dash_mapborder {
  140. height: 320px;
  141. border: 1px solid #dedede;
  142. border-radius: 2px;
  143. }
  144. .disablecolor {
  145. color: #f3f3f3 !important;
  146. }
  147. .onlyaline {
  148. overflow: hidden;
  149. white-space: nowrap;
  150. text-overflow: ellipsis;
  151. }
  152. .newcolor {
  153. color: #79a3c4;
  154. }
  155. .form-controldash {
  156. color: #93989e;
  157. height: 20px;
  158. border-radius: 2px;
  159. border: 1px solid #d1d1d1;
  160. }
  161. .iconcolorjingji {
  162. color: #BE2636 !important;
  163. }
  164. .iconcoloryanzhong {
  165. color: #f5a623 !important;
  166. }
  167. .iconcoloryiban {
  168. color: #005396 !important;
  169. }
  170. .iconfontkill {
  171. font-family: iconfont!important;
  172. font-size: 18px;
  173. color: #000;
  174. z-index: 1;
  175. -webkit-font-smoothing: antialiased;
  176. -webkit-text-stroke-width: .2px;
  177. }
  178. .monthchoice {
  179. height: 200px;
  180. overflow-x: hidden;
  181. overflow-y: scroll;
  182. line-height: 30px;
  183. text-align: center;
  184. }
  185. .dropdown-menu.monthchoice {
  186. min-width: 30px !important;
  187. }
  188. .backcopycolor {
  189. background: #f9f9f9;
  190. }
  191. .backcolor {
  192. background: #fff;
  193. border: 1px solid #ddd;
  194. }
  195. .table>tbody>tr>th {
  196. vertical-align: middle;
  197. text-align: center;
  198. background: #fafafa;
  199. }
  200. .table>tbody>tr>td {
  201. vertical-align: middle;
  202. text-align: center;
  203. }
  204. .bottomcat {
  205. border-bottom: 1px solid #eaeaea;
  206. }
  207. .table.table-bordered tr {
  208. white-space: inherit;
  209. }
  210. </style>
  211. <div ng-style="bodyheight">
  212. <div class="backcopycolor col-xs-12 padding-15">
  213. <div ng-controller="reporthandlegroupCtrl" class="backcolor padding-left-15 padding-right-15">
  214. <div class="listbote dashheadcolor">
  215. <div class="list-controls clearfix">
  216. <div class="know-text-group">
  217. <form class="col-xs-12 col-sm-12 form-inline schesearchsize">
  218. <div class="row">
  219. <div class="">选择日期:</div>
  220. <div class="form-group">
  221. <input type="text" class="form-control" datepicker-popuptime="yyyy-MM-dd" ng-change="changeForm(parameters.paramDateFrom)" ng-model="parameters.paramDateFrom" max-date="parameters.paramDateTo" is-open="startOpened" hour-time=true ng-init="startOpened = false"
  222. close-text="关闭" ng-click="startOpen($event)" />
  223. </div>
  224. <span>-</span>
  225. <div class="form-group">
  226. <input type="text" class="form-control" datepicker-popuptime="yyyy-MM-dd" ng-change="changeTo(parameters.paramDateTo)" ng-model="parameters.paramDateTo" hour-time=true min-date="parameters.paramDateFrom" is-open="endOpened" ng-init="endOpened = false"
  227. close-text="关闭" ng-click="endOpen($event)" />
  228. </div>
  229. <div class="form-group">
  230. <ui-select class="pull-left" style="width:158px" ng-model="searchkeys.quikly" theme="bootstrap" ng-change="onChangetime(searchkeys.quikly)">
  231. <ui-select-match placeholder="">
  232. {{$select.selected.name}}
  233. </ui-select-match>
  234. <ui-select-choices repeat="item in quikly" refresh="onChangehandling($select.search)">
  235. <div ng-bind-html="item.name | highlight: $select.search"></div>
  236. </ui-select-choices>
  237. </ui-select>
  238. </div>
  239. <div class="form-group pull-right">
  240. <a class="btn btn-default defaultheight" ng-click="restData()" ng-disabled="disabledParentGroup" type="button">重置</a>
  241. </div>
  242. <div class="form-group pull-right margin-right-10">
  243. <button class="btn btn-searchbutton" ng-click="mdxquery('all')" type="button">搜索</button>
  244. </div>
  245. </div>
  246. </form>
  247. </div>
  248. </div>
  249. </div>
  250. <div class="row margin-top-15 margin-bottom-15" style="margin-left:-7px;margin-right:-7px">
  251. <div class="col-xs-6" style="padding-left:8px;padding-right:8px">
  252. <div class="listheight dash_mapborder">
  253. <div class="fenlei col-xs-12 fontsizes-14">
  254. <div class="col-xs-12 bottomcat">
  255. <div class="row fontcolor-two padding-top-15 padding-bottom-15">
  256. <div class="fenleifont pull-left">工作组事件处理总数及占比</div>
  257. <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
  258. </div>
  259. </div>
  260. <div id="reportgroup" style="width: 100%;height: 200px"></div>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="col-xs-6" style="padding-left:8px;padding-right:8px">
  265. <div class="listheight dash_mapborder">
  266. <div class="fenlei col-xs-12" style="height:100%">
  267. <div class="fenleitop fontsizes-14">
  268. <div class="col-xs-12 bottomcat">
  269. <div class="row fontcolor-two padding-top-15 padding-bottom-15">
  270. <div class="fenleifont pull-left">工作组事件按时处理TOP5排名</div>
  271. <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
  272. </div>
  273. </div>
  274. </div>
  275. <div id="faultgroup" class="pull-left" style="width: 100%;
  276. height: 260px"></div>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
  282. <thread>
  283. <tr>
  284. <th rowspan="2">
  285. 序号
  286. </th>
  287. <th rowspan="2">
  288. 工作组
  289. </th>
  290. <th rowspan="2">
  291. 事件总数(件)
  292. </th>
  293. <th rowspan="2">
  294. 事件占比(%)
  295. </th>
  296. <th rowspan="1" colspan='4'>
  297. 响应状况
  298. </th>
  299. <th rowspan="1" colspan='4'>
  300. 解决状况
  301. </th>
  302. <th rowspan="1" colspan='4'>
  303. 满意度
  304. </th>
  305. <th rowspan="1" colspan='9'>
  306. 工单权重(复杂度)
  307. </th>
  308. </tr>
  309. <tr>
  310. <th rowspan="1">
  311. 按时响应
  312. </th>
  313. <th rowspan="1">
  314. 超时响应
  315. </th>
  316. <th rowspan="1">
  317. 平均响应时间(分)
  318. </th>
  319. <th rowspan="1">
  320. 超时响应占比
  321. </th>
  322. <th rowspan="1">
  323. 按时解决
  324. </th>
  325. <th rowspan="1">
  326. 超时解决
  327. </th>
  328. <th rowspan="1">
  329. 平均解决时间(分)
  330. </th>
  331. <th rowspan="1">
  332. 超时解决占比
  333. </th>
  334. <th rowspan="1">
  335. 非常满意
  336. </th>
  337. <th rowspan="1">
  338. 比较满意
  339. </th>
  340. <th rowspan="1">
  341. 较满意
  342. </th>
  343. <th rowspan="1">
  344. 一般满意
  345. </th>
  346. <th rowspan="1">
  347. 1
  348. </th>
  349. <th rowspan="1">
  350. 2
  351. </th>
  352. <th rowspan="1">
  353. 3
  354. </th>
  355. <th rowspan="1">
  356. 4
  357. </th>
  358. <th rowspan="1">
  359. 5
  360. </th>
  361. <th rowspan="1">
  362. 6
  363. </th>
  364. <th rowspan="1">
  365. 7
  366. </th>
  367. <th rowspan="1">
  368. 8
  369. </th>
  370. <th rowspan="1">
  371. 9
  372. </th>
  373. </tr>
  374. </thread>
  375. <tbody class="tbody-hover">
  376. <tr ng-repeat="rowData in rRows">
  377. <td>
  378. {{$index+1}}
  379. </td>
  380. <td>
  381. {{rowData.name}}
  382. </td>
  383. <td>
  384. {{rowData.num}}
  385. </td>
  386. <td>
  387. {{rowData.proportion}}%
  388. </td>
  389. <td>
  390. {{rowData.ontimeresponse}}
  391. </td>
  392. <td>
  393. {{rowData.overtimeresponse}}
  394. </td>
  395. <td>
  396. {{rowData.responsetime}}
  397. </td>
  398. <td>
  399. {{rowData.overtimeresponseProportion}}%
  400. </td>
  401. <td>
  402. {{rowData.ontimesolve}}
  403. </td>
  404. <td>
  405. {{rowData.overtimesolve}}
  406. </td>
  407. <td>
  408. {{rowData.solvetime}}
  409. </td>
  410. <td>
  411. {{rowData.overtimesolveProportion}}%
  412. </td>
  413. <td>
  414. {{rowData.fcmy}}%
  415. </td>
  416. <td>
  417. {{rowData.bymy}}%
  418. </td>
  419. <td>
  420. {{rowData.my}}%
  421. </td>
  422. <td>
  423. {{rowData.ybmy}}%
  424. </td>
  425. <td>
  426. {{rowData.fzd1}}%
  427. </td>
  428. <td>
  429. {{rowData.fzd2}}%
  430. </td>
  431. <td>
  432. {{rowData.fzd3}}%
  433. </td>
  434. <td>
  435. {{rowData.fzd4}}%
  436. </td>
  437. <td>
  438. {{rowData.fzd5}}%
  439. </td>
  440. <td>
  441. {{rowData.fzd6}}%
  442. </td>
  443. <td>
  444. {{rowData.fzd7}}%
  445. </td>
  446. <td>
  447. {{rowData.fzd8}}%
  448. </td>
  449. <td>
  450. {{rowData.fzd9}}%
  451. </td>
  452. </tr>
  453. </tbody>
  454. </table>
  455. </div>
  456. </div>
  457. </div>
  458. <!-- end: BOOTSRAP NAV TREE