event_form.html 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102
  1. <section id="page-title">
  2. <div class="row">
  3. <div class="col-sm-8">
  4. <h1 class="mainTitle">事件报表
  5. <i tooltip='请点击对应报表名称,查看相关数据。' tooltip-placement="right"
  6. class="fa ti-help-alt margin-left-10 fontcolor-five pointfont"></i>
  7. </h1>
  8. </div>
  9. </div>
  10. </section>
  11. <div class="col-md-12 col-sm-12">
  12. <div class="row deck_body" ng-controller="event_formCtrl">
  13. <div class="deck_head">
  14. <div class="deck_head_L" ng-class="{ac:tap=='SJZS'}" ng-click="active('SJZS')">
  15. <span>事件总数</span>
  16. </div>
  17. <div class="deck_head_L" ng-class="{ac:tap=='SJLX'}" ng-click="active('SJLX')">
  18. <span>事件类型</span>
  19. </div>
  20. <div class="deck_head_L" ng-class="{ac:tap=='CLRZ'}" ng-click="active('CLRZ')">
  21. <span>处理人/组</span>
  22. </div>
  23. <div class="deck_head_L" ng-class="{ac:tap=='QYDD'}" ng-click="active('QYDD')">
  24. <span>区域地点</span>
  25. </div>
  26. <div class="deck_head_L" ng-class="{ac:tap=='SJLY'}" ng-click="active('SJLY')">
  27. <span>事件来源</span>
  28. </div>
  29. </div>
  30. <div class="deck_cont">
  31. <!-- 筛选条件 -->
  32. <div class="deck_cont_head">
  33. <form class="col-xs-12 col-sm-12 form-inline P-0 clearfix">
  34. <!-- 按日/月/年统计 -->
  35. <div class="count fl" ng-if="tap=='SJZS'">
  36. <div class="dateItem dayBy" ng-click="dateItemClick('day')"
  37. ng-class="{active:dateItem == 'day'}">按日统计</div>
  38. <div class="dateItem monthBy" ng-click="dateItemClick('month')"
  39. ng-class="{active:dateItem == 'month'}">按月统计</div>
  40. <div class="dateItem yearBy" ng-click="dateItemClick('year')"
  41. ng-class="{active:dateItem == 'year'}">按年统计</div>
  42. </div>
  43. <!-- 选择日期 -->
  44. <div class="selectDate P-0 fl">
  45. <div class="selectDate-hd clearfix">
  46. <p class="fl">选择日期:</p>
  47. <div class="lastDate fr">
  48. <span ng-class="{active:searchstate=='year3'}" ng-click="chooseDate('year3')"
  49. ng-if="dateItem == 'year'">近三年</span>
  50. <strong ng-if="dateItem == 'year'">|</strong>
  51. <span ng-class="{active:searchstate=='year5'}" ng-click="chooseDate('year5')"
  52. ng-if="dateItem == 'year'">近五年</span>
  53. <span ng-class="{active:searchstate=='month3'}" ng-click="chooseDate('month3')"
  54. ng-if="dateItem == 'month'">近三月</span>
  55. <strong ng-if="dateItem == 'month'">|</strong>
  56. <span ng-class="{active:searchstate=='month6'}" ng-click="chooseDate('month6')"
  57. ng-if="dateItem == 'month'">近六月</span>
  58. <span ng-class="{active:searchstate=='week1'}" ng-click="chooseDate('week1')"
  59. ng-if="dateItem == 'day'">上一周</span>
  60. <strong ng-if="dateItem == 'day'">|</strong>
  61. <span ng-class="{active:searchstate=='month1'}" ng-click="chooseDate('month1')"
  62. ng-if="dateItem == 'day'">上一月</span>
  63. <strong ng-if="tap=='SJLY'">|</strong>
  64. <span ng-class="{active:searchstate=='year1'}" ng-click="chooseDate('year1')"
  65. ng-if="tap=='SJLY'">上一年</span>
  66. </div>
  67. </div>
  68. <div class="clearfix">
  69. <div class="form-group fl">
  70. <input type="text" ng-readonly="true" ng-change="timesChange(datepickerOptionsStart.datepickerMode)" ng-required="true" class="form-control smallline" uib-datepicker-popup="{{datepickerPopuptime}}" ng-model="starttimesModel" is-open="startOpened" ng-init="startOpened = false" ng-click="startOpen($event)" datepicker-options="datepickerOptionsStart" show-button-bar="false" />
  71. <i class="iconfont icon-yuqixinxiu form-dataIcon"></i>
  72. </div>
  73. <span class="form-line fl">一</span>
  74. <div class="form-group fl">
  75. <input type="text" ng-readonly="true" ng-change="timesChange(datepickerOptionsEnd.datepickerMode)" ng-required="true" class="form-control smallline" uib-datepicker-popup="{{datepickerPopuptime}}" ng-model="endtimesModel" is-open="endOpened" ng-init="endOpened = false" ng-click="endOpen($event)" datepicker-options="datepickerOptionsEnd" show-button-bar="false" />
  76. <i class="iconfont icon-yuqixinxiu form-dataIcon"></i>
  77. </div>
  78. </div>
  79. </div>
  80. <!-- 事件分类级别 -->
  81. <div class="selectSj P-0 fl" ng-if="tap=='SJLX'">
  82. <div class="selectSj-hd">
  83. <p>事件分类级别:</p>
  84. </div>
  85. <ui-select class="sj-select" ng-model="sjSelectedOne.value" theme="bootstrap">
  86. <ui-select-match placeholder="一级分类">
  87. {{$select.selected.name}}
  88. </ui-select-match>
  89. <ui-select-choices repeat="item in sjSelected">
  90. <div ng-bind-html="item.name"></div>
  91. </ui-select-choices>
  92. </ui-select>
  93. </div>
  94. <!-- 选择处理人/组 -->
  95. <div class="selectSj P-0 fl" ng-if="tap=='CLRZ'">
  96. <div class="selectSj-hd">
  97. <p>选择处理人/组:</p>
  98. </div>
  99. <ui-select class="sj-select" ng-model="groupSelectedOne.value" theme="bootstrap">
  100. <ui-select-match placeholder="全部">
  101. {{$select.selected.groupName}}
  102. </ui-select-match>
  103. <ui-select-choices repeat="item in groupSelected">
  104. <div ng-bind-html="item.groupName"></div>
  105. </ui-select-choices>
  106. </ui-select>
  107. </div>
  108. <!-- 区域地点 -->
  109. <div class="selectSj P-0 fl" ng-if="tap=='QYDD'">
  110. <div class="selectSj-hd">
  111. <p>区域/地点:</p>
  112. </div>
  113. <ui-select class="sj-select" ng-model="areaSelectedOne.value" theme="bootstrap">
  114. <ui-select-match placeholder="区域">
  115. {{$select.selected.name}}
  116. </ui-select-match>
  117. <ui-select-choices repeat="item in areaSelected">
  118. <div ng-bind-html="item.name"></div>
  119. </ui-select-choices>
  120. </ui-select>
  121. </div>
  122. <!-- 搜索重置 -->
  123. <div class="col-xs-3 col-sm-3 pull-right P-0 searchBtnBox">
  124. <div class="btn btn_search fl" ng-click="mdxquery()">搜索</div>
  125. <div class="btn btn_reset fl" ng-click="reload()" ng-disabled="disabledParentGroup">重置</div>
  126. <div class="btn btn_export fl" ng-click="export()" id="exportToExcel"
  127. ng-disabled="disabledParentGroup">导出</div>
  128. </div>
  129. </form>
  130. </div>
  131. <!-- 事件总数 -->
  132. <div class="deck_cont_body" ng-if="tap=='SJZS'">
  133. <div class="deck_cont_body_TB1" ng-if="isArrays(sjzs_list)&&sjzs_list.length>0">
  134. <div class="TB">
  135. <div class="TB_head">
  136. <div class="TB_head_L">
  137. <div class="TB_LDZH fl">
  138. <p>事件总数</p>
  139. <span>{{sjzs_num}}</span>
  140. </div>
  141. <div class="TB_ITEMS fl">
  142. <div class="TB_ITEM">
  143. <p>平均响应时间</p>
  144. <span>{{sjzs_responseTime}}</span>
  145. </div>
  146. <div class="TB_ITEM">
  147. <p>平均解决时间</p>
  148. <span>{{sjzs_resolvedTime}}</span>
  149. </div>
  150. <div class="TB_ITEM">
  151. <p>满意度</p>
  152. <span>{{sjzs_satisfactionRatio}}%</span>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <div class="TB_cont">
  158. <table class="jry_table jry_table_head" cellspacing="0" cellpadding="16"
  159. style="font-weight:normal !important;table-layout:fixed">
  160. <thead>
  161. <tr>
  162. <th style="width:6%">
  163. 序号
  164. </th>
  165. <th style="width:10%">
  166. 时间
  167. </th>
  168. <th style="width:8%">
  169. <strong>
  170. 事件数量
  171. <em class="sort-wrap">
  172. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'sumtop'}" ng-click="tableSort('sum','desc','top')"></i>
  173. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'sumbottom'}" ng-click="tableSort('sum','asc','bottom')"></i>
  174. </em>
  175. </strong>
  176. </th>
  177. <th style="width:18%">
  178. <strong>
  179. 平均响应时间
  180. <em class="sort-wrap">
  181. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'responseTimetop'}" ng-click="tableSort('responseTime','desc','top')"></i>
  182. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'responseTimebottom'}" ng-click="tableSort('responseTime','asc','bottom')"></i>
  183. </em>
  184. </strong>
  185. </th>
  186. <th style="width:18%">
  187. <strong>
  188. 平均解决时间
  189. <em class="sort-wrap">
  190. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'resolvedTimetop'}" ng-click="tableSort('resolvedTime','desc','top')"></i>
  191. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'resolvedTimebottom'}" ng-click="tableSort('resolvedTime','asc','bottom')"></i>
  192. </em>
  193. </strong>
  194. </th>
  195. <th style="width:10%">
  196. 完全解决
  197. </th>
  198. <th style="width:10%">
  199. 部分解决
  200. </th>
  201. <th style="width:6%">
  202. 其他
  203. </th>
  204. <th style="width:14%">
  205. <strong>
  206. 满意度(%)
  207. <em class="sort-wrap">
  208. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'satisfactionRatiotop'}" ng-click="tableSort('satisfactionRatio','desc','top')"></i>
  209. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'satisfactionRatiobottom'}" ng-click="tableSort('satisfactionRatio','asc','bottom')"></i>
  210. </em>
  211. </strong>
  212. </th>
  213. </tr>
  214. </thead>
  215. </table>
  216. <div class="jry_table_wrap" ng-nicescroll nice-scroll-end="topEndComplete()">
  217. <table class="jry_table jry_table_body" cellspacing="0" cellpadding="16"
  218. style="font-weight:normal !important;margin-bottom: 16px;table-layout:fixed">
  219. <tbody class="tbody-hover">
  220. <tr ng-repeat="rowData in sjzs_list">
  221. <td style="width:6%">
  222. {{$index+1}}
  223. </td>
  224. <td style="width:10%">
  225. {{rowData.accdate}}
  226. </td>
  227. <td style="width:8%">
  228. {{rowData.sum}}
  229. </td>
  230. <td style="width:18%">
  231. {{rowData.responseTime}}
  232. </td>
  233. <td style="width:18%">
  234. {{rowData.resolvedTime}}
  235. </td>
  236. <td style="width:10%">
  237. {{rowData.allresult}}
  238. </td>
  239. <td style="width:10%">
  240. {{rowData.partresult}}
  241. </td>
  242. <td style="width:6%">
  243. {{rowData.otherresult}}
  244. </td>
  245. <td style="width:14%">
  246. {{rowData.satisfactionRatio}}%
  247. </td>
  248. </tr>
  249. </tbody>
  250. </table>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. <div class="noData" ng-if="isArrays(sjzs_list)&&sjzs_list.length==0">查询无记录</div>
  256. <div class="noData" ng-if="!isArrays(sjzs_list)"><img src="/assets/images/loading.gif" alt=""></div>
  257. </div>
  258. <!-- 事件类型 -->
  259. <div class="deck_cont_body" ng-if="tap=='SJLX'">
  260. <div class="deck_cont_body_TB1" ng-if="isArrays(sjlx_list)&&sjlx_list.length>0">
  261. <div class="TB">
  262. <div class="TB_head">
  263. <div class="TB_head_L">
  264. <div class="TB_LDZH fl">
  265. <p>事件总数</p>
  266. <span>{{sjlx_num}}</span>
  267. </div>
  268. </div>
  269. </div>
  270. <div class="TB_cont">
  271. <table class="jry_table jry_table_head" cellspacing="0" cellpadding="16"
  272. style="font-weight:normal !important;table-layout:fixed">
  273. <thead>
  274. <tr>
  275. <th style="width:6%">
  276. 序号
  277. </th>
  278. <th style="width:22%">
  279. 事件类型
  280. </th>
  281. <th style="width:10%">
  282. <strong>
  283. 类型数量
  284. <em class="sort-wrap">
  285. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'sumtop'}" ng-click="tableSort('sum','desc','top')"></i>
  286. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'sumbottom'}" ng-click="tableSort('sum','asc','bottom')"></i>
  287. </em>
  288. </strong>
  289. </th>
  290. <th style="width:10%">
  291. 类型占比
  292. </th>
  293. <th style="width:14%">
  294. <strong>
  295. 平均响应时间
  296. <em class="sort-wrap">
  297. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'responseTimetop'}" ng-click="tableSort('responseTime','desc','top')"></i>
  298. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'responseTimebottom'}" ng-click="tableSort('responseTime','asc','bottom')"></i>
  299. </em>
  300. </strong>
  301. </th>
  302. <th style="width:14%">
  303. <strong>
  304. 平均解决时间
  305. <em class="sort-wrap">
  306. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'resolvedTimetop'}" ng-click="tableSort('resolvedTime','desc','top')"></i>
  307. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'resolvedTimebottom'}" ng-click="tableSort('resolvedTime','asc','bottom')"></i>
  308. </em>
  309. </strong>
  310. </th>
  311. <th style="width:8%">
  312. 完全解决
  313. </th>
  314. <th style="width:8%">
  315. 部分解决
  316. </th>
  317. <th style="width:8%">
  318. 其他
  319. </th>
  320. </tr>
  321. </thead>
  322. </table>
  323. <div class="jry_table_wrap" ng-nicescroll>
  324. <table class="jry_table jry_table_body" cellspacing="0" cellpadding="16"
  325. style="font-weight:normal !important;margin-bottom: 16px;table-layout:fixed">
  326. <tbody class="tbody-hover">
  327. <tr
  328. ng-repeat="rowData in sjlx_list">
  329. <td style="width:6%">
  330. {{$index+1}}
  331. </td>
  332. <td style="width:22%">
  333. {{rowData.category}}
  334. </td>
  335. <td style="width:10%">
  336. {{rowData.sum}}
  337. </td>
  338. <td style="width:10%">
  339. {{rowData.proportion}}
  340. </td>
  341. <td style="width:14%">
  342. {{rowData.responseTime}}
  343. </td>
  344. <td style="width:14%">
  345. {{rowData.resolvedTime}}
  346. </td>
  347. <td style="width:8%">
  348. {{rowData.allresult}}
  349. </td>
  350. <td style="width:8%">
  351. {{rowData.partresult}}
  352. </td>
  353. <td style="width:8%">
  354. {{rowData.otherresult}}
  355. </td>
  356. </tr>
  357. </tbody>
  358. </table>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. <div class="noData" ng-if="isArrays(sjlx_list)&&sjlx_list.length==0">查询无记录</div>
  364. <div class="noData" ng-if="!isArrays(sjlx_list)"><img src="/assets/images/loading.gif" alt=""></div>
  365. </div>
  366. <!-- 处理人/组 -->
  367. <div class="deck_cont_body" ng-if="tap=='CLRZ'">
  368. <div class="deck_cont_body_TB1" ng-if="isArrays(clrz_list)&&clrz_list.length>0">
  369. <div class="TB">
  370. <div class="TB_head">
  371. <div class="TB_head_L">
  372. <div class="TB_LDZH fl">
  373. <p>事件总数</p>
  374. <span>{{clrz_num}}</span>
  375. </div>
  376. <div class="TB_ITEMS fl">
  377. <div class="TB_ITEM">
  378. <p>平均响应时间</p>
  379. <span>{{clrz_responseTime}}</span>
  380. </div>
  381. <div class="TB_ITEM">
  382. <p>平均解决时间</p>
  383. <span>{{clrz_resolvedTime}}</span>
  384. </div>
  385. <div class="TB_ITEM">
  386. <p>满意度</p>
  387. <span>{{clrz_satisfactionRatio}}%</span>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392. <div class="TB_cont">
  393. <table class="jry_table jry_table_head" cellspacing="0" cellpadding="16"
  394. style="font-weight:normal !important;table-layout:fixed">
  395. <tbody>
  396. <tr>
  397. <td style="width:6%" rowspan="2">
  398. 序号
  399. </td>
  400. <td style="width:7%" rowspan="2">
  401. 处理{{tableGroupSelectedOne == 1?'组':'人'}}
  402. </td>
  403. <td style="width:7%" rowspan="2">
  404. <strong>
  405. 事件数量
  406. <em class="sort-wrap">
  407. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'sumtop'}" ng-click="tableSort('sum','desc','top')"></i>
  408. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'sumbottom'}" ng-click="tableSort('sum','asc','bottom')"></i>
  409. </em>
  410. </strong>
  411. </td>
  412. <td style="width:7%" rowspan="2">
  413. 事件占比
  414. </td>
  415. <td style="width:32%" colspan="4">
  416. 按时响应
  417. </td>
  418. <td style="width:32%" colspan="4">
  419. 按时解决
  420. </td>
  421. <td style="width:7%" rowspan="2">
  422. 满意度(%)
  423. </td>
  424. </tr>
  425. <tr>
  426. <td style="width:8%">
  427. 按时响应
  428. </td>
  429. <td style="width:8%">
  430. 超时响应
  431. </td>
  432. <td style="width:8%">
  433. 平均响应时间
  434. </td>
  435. <td style="width:8%">
  436. 超时响应占比
  437. </td>
  438. <td style="width:8%">
  439. 按时解决
  440. </td>
  441. <td style="width:8%">
  442. 超时解决
  443. </td>
  444. <td style="width:8%">
  445. 平均解决时间
  446. </td>
  447. <td style="width:8%">
  448. 超时解决占比
  449. </td>
  450. </tr>
  451. </tbody>
  452. </table>
  453. <div class="jry_table_wrap jry_table_wrap2" ng-nicescroll>
  454. <table class="jry_table jry_table_body" cellspacing="0" cellpadding="16"
  455. style="font-weight:normal !important;margin-bottom: 16px;table-layout:fixed">
  456. <tbody class="tbody-hover">
  457. <tr
  458. ng-repeat="rowData in clrz_list">
  459. <td style="width:6%">
  460. {{$index+1}}
  461. </td>
  462. <td style="width:7%">
  463. {{rowData.name}}
  464. </td>
  465. <td style="width:7%">
  466. {{rowData.sum}}
  467. </td>
  468. <td style="width:7%">
  469. {{rowData.proportion}}
  470. </td>
  471. <td style="width:8%">
  472. {{rowData.responseOnTime}}
  473. </td>
  474. <td style="width:8%">
  475. {{rowData.responseOverTime}}
  476. </td>
  477. <td style="width:8%">
  478. {{rowData.responseTime}}
  479. </td>
  480. <td style="width:8%">
  481. {{rowData.overTimeProportion}}%
  482. </td>
  483. <td style="width:8%">
  484. {{rowData.resolvedOnTime}}
  485. </td>
  486. <td style="width:8%">
  487. {{rowData.resolvedOverTime}}
  488. </td>
  489. <td style="width:8%">
  490. {{rowData.resolvedTime}}
  491. </td>
  492. <td style="width:8%">
  493. {{rowData.resolvedTimeProportion}}%
  494. </td>
  495. <td style="width:7%">
  496. {{rowData.satisfactionRatio}}%
  497. </td>
  498. </tr>
  499. </tbody>
  500. </table>
  501. </div>
  502. </div>
  503. </div>
  504. </div>
  505. <div class="noData" ng-if="isArrays(clrz_list)&&clrz_list.length==0">查询无记录</div>
  506. <div class="noData" ng-if="!isArrays(clrz_list)"><img src="/assets/images/loading.gif" alt=""></div>
  507. </div>
  508. <!-- 区域地点 -->
  509. <div class="deck_cont_body" ng-if="tap=='QYDD'">
  510. <div class="deck_cont_body_TB1" ng-if="isArrays(qydd_list)&&qydd_list.length>0">
  511. <div class="TB">
  512. <div class="TB_head">
  513. <div class="TB_head_L">
  514. <div class="TB_LDZH fl">
  515. <p>事件总数</p>
  516. <span>{{qydd_num}}</span>
  517. </div>
  518. </div>
  519. </div>
  520. <div class="TB_cont">
  521. <table class="jry_table jry_table_head" cellspacing="0" cellpadding="16"
  522. style="font-weight:normal !important;table-layout:fixed">
  523. <thead>
  524. <tr>
  525. <th style="width:10%">
  526. 序号
  527. </th>
  528. <th style="width:30%">
  529. 区域/地点
  530. </th>
  531. <th style="width:30%">
  532. <strong>
  533. 事件数量
  534. <em class="sort-wrap">
  535. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'sumtop'}" ng-click="tableSort('sum','desc','top')"></i>
  536. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'sumbottom'}" ng-click="tableSort('sum','asc','bottom')"></i>
  537. </em>
  538. </strong>
  539. </th>
  540. <th style="width:30%">
  541. 事件占比
  542. </th>
  543. </tr>
  544. </thead>
  545. </table>
  546. <div class="jry_table_wrap" ng-nicescroll>
  547. <table class="jry_table jry_table_body" cellspacing="0" cellpadding="16"
  548. style="font-weight:normal !important;margin-bottom: 16px;table-layout:fixed">
  549. <tbody class="tbody-hover">
  550. <tr
  551. ng-repeat="rowData in qydd_list">
  552. <td style="width:10%">
  553. {{$index+1}}
  554. </td>
  555. <td style="width:30%">
  556. {{rowData.name}}
  557. </td>
  558. <td style="width:30%">
  559. {{rowData.sum}}
  560. </td>
  561. <td style="width:30%">
  562. {{rowData.proportion}}
  563. </td>
  564. </tr>
  565. </tbody>
  566. </table>
  567. </div>
  568. </div>
  569. </div>
  570. </div>
  571. <div class="noData" ng-if="isArrays(qydd_list)&&qydd_list.length==0">查询无记录</div>
  572. <div class="noData" ng-if="!isArrays(qydd_list)"><img src="/assets/images/loading.gif" alt=""></div>
  573. </div>
  574. <!-- 事件来源 -->
  575. <div class="deck_cont_body" ng-if="tap=='SJLY'">
  576. <div class="deck_cont_body_TB1" ng-if="isArrays(sjly_list)&&sjly_list.length>0">
  577. <div class="TB">
  578. <div class="TB_head">
  579. <div class="TB_head_L">
  580. <div class="TB_LDZH fl">
  581. <p>事件总数</p>
  582. <span>{{sjly_num}}</span>
  583. </div>
  584. </div>
  585. </div>
  586. <div class="TB_cont">
  587. <table class="jry_table jry_table_head" cellspacing="0" cellpadding="16"
  588. style="font-weight:normal !important;table-layout:fixed">
  589. <thead>
  590. <tr>
  591. <th style="width:10%">
  592. 序号
  593. </th>
  594. <th style="width:30%">
  595. 事件来源
  596. </th>
  597. <th style="width:30%">
  598. <strong>
  599. 事件数量
  600. <em class="sort-wrap">
  601. <i class="sortItem iconfont icon-xiangshang" ng-class="{active:sortActive == 'sumtop'}" ng-click="tableSort('sum','desc','top')"></i>
  602. <i class="sortItem iconfont icon-xiangxia" ng-class="{active:sortActive == 'sumbottom'}" ng-click="tableSort('sum','asc','bottom')"></i>
  603. </em>
  604. </strong>
  605. </th>
  606. <th style="width:30%">
  607. 事件来源占比
  608. </th>
  609. </tr>
  610. </thead>
  611. </table>
  612. <div class="jry_table_wrap" ng-nicescroll>
  613. <table class="jry_table jry_table_body" cellspacing="0" cellpadding="16"
  614. style="font-weight:normal !important;margin-bottom: 16px;table-layout:fixed">
  615. <tbody class="tbody-hover">
  616. <tr
  617. ng-repeat="rowData in sjly_list">
  618. <td style="width:10%">
  619. {{$index+1}}
  620. </td>
  621. <td style="width:30%">
  622. {{rowData.name}}
  623. </td>
  624. <td style="width:30%">
  625. {{rowData.sum}}
  626. </td>
  627. <td style="width:30%">
  628. {{rowData.proportion}}
  629. </td>
  630. </tr>
  631. </tbody>
  632. </table>
  633. </div>
  634. </div>
  635. </div>
  636. </div>
  637. <div class="noData" ng-if="isArrays(sjly_list)&&sjly_list.length==0">查询无记录</div>
  638. <div class="noData" ng-if="!isArrays(sjly_list)"><img src="/assets/images/loading.gif" alt=""></div>
  639. </div>
  640. </div>
  641. </div>
  642. </div>
  643. </div>
  644. <style>
  645. p {
  646. margin-bottom: 0;
  647. }
  648. em,
  649. i,
  650. strong {
  651. font-style: normal;
  652. font-weight: normal;
  653. }
  654. .searchBtnBox {
  655. padding-top: 30px;
  656. }
  657. .deck_body {
  658. height: 100%;
  659. background: #f9f9f9;
  660. padding: 16px;
  661. }
  662. .deck_head {
  663. height: 50px;
  664. width: 100%
  665. }
  666. .deck_head .deck_head_L {
  667. float: left;
  668. width: 20%;
  669. height: 100%;
  670. text-align: center;
  671. border-top: 5px solid #EAEAEA;
  672. color: #717171;
  673. font-size: 14px;
  674. line-height: 45px;
  675. cursor: pointer;
  676. }
  677. .deck_head .deck_head_R {
  678. float: left;
  679. width: 50%;
  680. height: 100%;
  681. text-align: center;
  682. border-top: 5px solid #EAEAEA;
  683. color: #717171;
  684. font-size: 14px;
  685. line-height: 45px;
  686. cursor: pointer;
  687. }
  688. .ac {
  689. background: #E6EEF4;
  690. color: #353535 !important;
  691. border-top: 5px solid #79A3C4 !important;
  692. }
  693. .deck_cont {
  694. width: 100%;
  695. height: 100%;
  696. padding: 16px;
  697. background: #fff;
  698. border-width: 0px 1px 1px 1px;
  699. border-width: 0px 1px 1px 1px;
  700. border-color: #EAEAEA;
  701. border-style: solid;
  702. }
  703. .deck_cont_head {
  704. border-bottom: 1px solid #EAEAEA;
  705. padding: 16px 10px 16px 10px;
  706. zoom: 1;
  707. }
  708. .deck_cont_head::after {
  709. content: "";
  710. display: block;
  711. height: 0;
  712. clear: both;
  713. visibility: hidden;
  714. }
  715. .P-0 {
  716. padding-left: 0px;
  717. padding-right: 0px;
  718. }
  719. .P-T-15 {
  720. padding-top: 16px;
  721. }
  722. .form-control.smallline {
  723. width: 120px;
  724. height: 34px;
  725. padding-left: 8px;
  726. padding-right: 8px;
  727. color: #999;
  728. font-size: 12px;
  729. }
  730. .deck_cont_body_TB1 {
  731. padding-top: 16px;
  732. }
  733. .deck_cont_body_TB2 {
  734. padding-top: 16px;
  735. }
  736. .TB_head {
  737. width: 100%;
  738. height: 54px
  739. }
  740. .TB_head_L {
  741. float: left;
  742. height: 100%;
  743. border-left: 8px solid #005395;
  744. padding: 0px 16px;
  745. }
  746. .TB_head_R {
  747. float: left;
  748. height: 100%;
  749. border-left: 8px solid #49A9EE;
  750. padding: 0px 16px;
  751. }
  752. .TB_ITEM {
  753. float: left;
  754. margin-right: 16px;
  755. }
  756. .MR_15 {
  757. margin-right: 16px;
  758. }
  759. .TB_ITEM p {
  760. font-size: 12px;
  761. color: #666
  762. }
  763. .TB_ITEM span {
  764. font-size: 24px;
  765. color: #333;
  766. line-height: 1.2;
  767. }
  768. .TB_LDZH p {
  769. font-size: 14px;
  770. color: #666
  771. }
  772. .TB_LDZH span {
  773. font-size: 32px;
  774. color: #333;
  775. line-height: 1.2;
  776. }
  777. .TB_ZHL {
  778. height: 100%;
  779. padding-top: 22px;
  780. }
  781. .TB_ZHL p {
  782. font-size: 12px;
  783. color: #7B7B7B
  784. }
  785. .TB_ZHL span {
  786. font-weight: 600;
  787. font-size: 22px;
  788. }
  789. .TB_cont {
  790. height: 350px;
  791. width: 100%;
  792. /* overflow-x: hidden; */
  793. /* overflow-y: auto; */
  794. }
  795. .TB_cont #ldzh {
  796. height: 100%;
  797. }
  798. .TB_cont #sjfx {
  799. height: 100%;
  800. }
  801. .TB_cont #sjqs {
  802. height: 100%;
  803. }
  804. .TB_cont #sjpd {
  805. height: 100%;
  806. }
  807. .TB_head_R1 {
  808. border-color: #005395;
  809. }
  810. .TB_LB {
  811. height: 100%;
  812. width: 100%;
  813. border: 1px solid #EAEAEA;
  814. }
  815. .TB_LB_head {
  816. height: 50px;
  817. background: #FAFAFA;
  818. border-bottom: 1px solid #EAEAEA;
  819. color: #333;
  820. font-size: 14px;
  821. }
  822. .TB_LB_body {
  823. height: 40px;
  824. border-bottom: 1px solid #EAEAEA;
  825. color: #7B7B7B;
  826. }
  827. .TB_LB_item {
  828. height: 100%;
  829. float: left;
  830. text-align: center;
  831. line-height: 40px;
  832. border-right: 1px solid #EAEAEA;
  833. }
  834. .TB_LB_head .TB_LB_item {
  835. line-height: 50px;
  836. font-weight: 600;
  837. }
  838. .btn-default {
  839. height: 30px;
  840. }
  841. .form-line {
  842. height: 34px;
  843. line-height: 34px;
  844. padding-left: 8px;
  845. padding-right: 8px;
  846. color: #979797;
  847. }
  848. .form-dataIcon {
  849. color: #ddd;
  850. font-size: 16px;
  851. position: absolute;
  852. right: 8px;
  853. top: 50%;
  854. transform: translateY(-50%);
  855. }
  856. .selectDate {
  857. width: 270px;
  858. }
  859. .selectDate .selectDate-hd {
  860. margin-bottom: 8px;
  861. }
  862. .selectDate .lastDate {
  863. color: #ddd;
  864. }
  865. .selectDate .lastDate span {
  866. margin-left: 4px;
  867. margin-right: 4px;
  868. color: #005395;
  869. font-size: 12px;
  870. cursor: pointer;
  871. }
  872. .selectDate .lastDate span.active {
  873. border-bottom: 1px solid #005395;
  874. }
  875. .selectDate .lastDate span:last-child {
  876. margin-right: 0;
  877. }
  878. .searchBtnBox .btn {
  879. width: 60px;
  880. height: 34px;
  881. line-height: 26px;
  882. margin: 0 0 0 8px;
  883. }
  884. .btn_search {
  885. background-color: #005395;
  886. }
  887. .btn_reset {
  888. background-color: #fff;
  889. border: 1px solid #ddd;
  890. }
  891. .btn_reset:hover {
  892. border: 1px solid #999;
  893. color: #666;
  894. }
  895. .btn_export {
  896. padding: 3px 16px;
  897. background-color: #e6eef4;
  898. border: 1px #005395 solid;
  899. color: #005395;
  900. }
  901. .btn_export:hover {
  902. color: #79a3c4;
  903. border-color: #79a3c4;
  904. }
  905. .TB_ITEMS {
  906. margin-left: 24px;
  907. margin-top: 10px;
  908. }
  909. /* table */
  910. .jry_table_wrap {
  911. margin-top: -1px;
  912. height: 311px;
  913. overflow-x: hidden;
  914. overflow-y: auto;
  915. }
  916. .jry_table_wrap2 {
  917. height: 280px;
  918. }
  919. .jry_table {
  920. border: 1px solid #ddd;
  921. text-align: center;
  922. width: 100%;
  923. position: relative;
  924. font-size: 13px;
  925. }
  926. .jry_table_head {
  927. margin-top: 16px;
  928. background-color: #f9f9f9;
  929. }
  930. .jry_table_head * {
  931. font-weight: bold;
  932. }
  933. .jry_table_body .tbody-hover {
  934. width: 100%;
  935. }
  936. .jry_table th,
  937. .jry_table td {
  938. word-wrap: break-word;
  939. padding: 6px 2px;
  940. border: 1px solid #ddd;
  941. }
  942. .jry_table th {
  943. text-align: center;
  944. }
  945. .jry_table strong {
  946. position: relative;
  947. }
  948. .sort-wrap {
  949. position: absolute;
  950. right: -12px;
  951. top: 50%;
  952. transform: translateY(-50%);
  953. width: 12px;
  954. display: flex;
  955. flex-direction: column;
  956. justify-content: center;
  957. line-height: normal;
  958. }
  959. .sortItem {
  960. font-size: 12px;
  961. color: #ddd;
  962. height: 12px;
  963. cursor: pointer;
  964. position: absolute;
  965. }
  966. .sortItem.active {
  967. color: #999;
  968. }
  969. .sortItem.icon-xiangshang {
  970. bottom: -2px;
  971. }
  972. .sortItem.icon-xiangxia {
  973. top: -2px;
  974. }
  975. /* 按年月日统计 */
  976. .count {
  977. margin-top: 28px;
  978. margin-right: 16px;
  979. }
  980. .count .dateItem {
  981. width: 80px;
  982. height: 34px;
  983. text-align: center;
  984. line-height: 34px;
  985. border: 1px solid #ddd;
  986. float: left;
  987. cursor: pointer;
  988. }
  989. .count .dateItem:hover {
  990. border-color: #e6eef4;
  991. background-color: #e6eef4;
  992. }
  993. .count .dateItem.active {
  994. border-color: #005395;
  995. background-color: #e6eef4;
  996. color: #005395;
  997. }
  998. /* 事件分类级别 */
  999. .selectSj {
  1000. width: 258px;
  1001. margin-left: 16px;
  1002. }
  1003. .selectSj .selectSj-hd {
  1004. margin-bottom: 8px;
  1005. }
  1006. .selectSj .sj-select {
  1007. width: 100%;
  1008. }
  1009. .selectSj .sj-select .ui-select-match-text {
  1010. color: #999;
  1011. }
  1012. /* 查询无记录 */
  1013. .noData{
  1014. font-size: 16px;
  1015. text-align: center;
  1016. font-weight: bold;
  1017. margin-top: 16px;
  1018. width: 100%;
  1019. min-height: 420px;
  1020. }
  1021. .form-control.smallline{
  1022. background-color: #fff;
  1023. }
  1024. </style>