task_detail.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  4. layout:decorator="main">
  5. <head>
  6. <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
  7. <link rel="stylesheet" type="text/css" href="/static/css/app_info.css" />
  8. <!-- dataTables -->
  9. <link rel="stylesheet" type="text/css"
  10. href="/static/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"/>
  11. <!-- Select2 -->
  12. <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/select2/dist/css/select2.min.css" />
  13. </head>
  14. <body>
  15. <!--<th:block >-->
  16. <th:block layout:fragment="sidebar">
  17. <li class="treeview menu-open" id="crowdSidebar" th:fragment="crowdSidebar">
  18. <a href="#">
  19. <i class="fa fa-users"></i>
  20. <span>
  21. 众包测试
  22. </span>
  23. </a>
  24. <ul class="treeview-menu" id="crowdSidebarMenu" style="display: block;">
  25. <li id="crowdSidebarMenu-taskList">
  26. <a href="/crowdTask">
  27. <i class="fa fa-align-justify"></i>任务列表
  28. </a>
  29. </li>
  30. <li id="crowdSidebar-taskDetail">
  31. <a th:href="'/task_detail?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
  32. <i class="glyphicon glyphicon-book"></i>
  33. <span>
  34. 任务详情
  35. </span>
  36. </a>
  37. </li>
  38. <li id="crowdSidebar-finalReport">
  39. <a th:href="'/final_reports?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
  40. <i class="fa fa-calendar-check-o"></i>
  41. <span>预交付报告</span>
  42. </a>
  43. </li>
  44. <li id="crowdSidebar-reportReview" class="treeview menu-open">
  45. <a href="#">
  46. <i class="glyphicon glyphicon-edit"></i>
  47. <span>
  48. 报告审核
  49. </span>
  50. </a>
  51. <ul class="treeview-menu" id="crowdSidebar-reportReviewMenu" style="display: block" >
  52. <li id="crowdSidebar-reportReview-allReport">
  53. <a th:href="'/review_report?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
  54. <i class="fa fa-files-o" style="color: #51b2ea"></i>
  55. <span>全部视图</span>
  56. </a>
  57. </li>
  58. <li id="crowdSidebar-reportReview-aggrReport" >
  59. <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}">
  60. <i class="fa fa-sitemap " style="color: rgba(214,182,27,0.7)"></i>
  61. <span>聚合视图</span>
  62. </a>
  63. <ul class="treeview-menu" id="crowdSidebar-reportReview-aggrReportMenu" th:if="${task!=null}">
  64. <li id="crowdSidebar-reportReview-aggrReportMenu-all">
  65. <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}">
  66. <i class="fa fa-circle-o"></i>
  67. <span>全部报告</span>
  68. <span class="badge pull-right all-number" th:text="${task.numOfTotalBug}">199</span>
  69. </a>
  70. </li>
  71. <li id="crowdSidebar-reportReview-aggrReportMenu-yes">
  72. <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}+'&amp;status=1'">
  73. <i class="fa fa-check-circle-o text-success"></i>
  74. <span>已审核报告</span>
  75. <span class="badge badge-success pull-right assigned-number" th:text="${task.numOfTotalBug - task.numOfUndeal}">50</span>
  76. </a>
  77. </li>
  78. <li id="crowdSidebar-reportReview-aggrReportMenu-no">
  79. <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}+'&amp;status=0'">
  80. <i class="fa fa-clock-o text-danger"></i>
  81. <span>未审核报告</span>
  82. <span class="badge badge-danger pull-right unassign-number" th:text="${task.numOfUndeal}">149</span>
  83. </a>
  84. </li>
  85. </ul>
  86. </li>
  87. <li id="crowdSidebar-reportReview-treeReport">
  88. <a th:href="'/history/tree_list?examId='+${examId}+'&amp;caseId='+${caseId}">
  89. <!--写死的参数,-->
  90. <!--<a th:href="'/history/getTrees2?examId='+${caseId}+'">-->
  91. <i class="glyphicon glyphicon-tree-conifer" style="color: rgba(65,214,66,0.7)"></i>
  92. <span>树状视图</span>
  93. </a>
  94. </li>
  95. <li id="crowdSidebar-reportReview-singleReport">
  96. <a th:href="'/task_detail?examId='+${examId}+'&amp;caseId='+${caseId}">
  97. <i class="fa fa-file-o " style="color: rgba(218,247,0,0.72)"></i>
  98. <span>单一视图</span>
  99. </a>
  100. </li>
  101. </ul>
  102. </li>
  103. <li id="crowdSidebarMenu-addCrowdTask">
  104. <a href="/addCrowdTask">
  105. <i class="fa fa-plus"></i>新建众测任务
  106. </a>
  107. </li>
  108. <li id="crowdSidebarMenu-importData">
  109. <a href="/importData">
  110. <i class="fa fa-file-excel-o"></i>数据导入
  111. </a>
  112. </li>
  113. </ul>
  114. </li>
  115. <!-- <li class="treeview">-->
  116. <!-- <a href="#">-->
  117. <!-- <i class="fa fa-list"></i>-->
  118. <!-- <span>Reports</span>-->
  119. <!-- <span class="pull-right-container">-->
  120. <!-- <i class="fa fa-angle-left pull-right"></i>-->
  121. <!-- </span>-->
  122. <!-- </a>-->
  123. <!-- <ul class="treeview-menu" style="display: block;">-->
  124. <!-- <li>-->
  125. <!-- <a href="#">-->
  126. <!-- <i class="fa fa-circle-o"></i>-->
  127. <!-- <span>全部报告</span>-->
  128. <!-- <span class="badge pull-right all-number" th:text="${task.numOfTotalBug}">199</span>-->
  129. <!-- </a>-->
  130. <!-- </li>-->
  131. <!-- <li>-->
  132. <!-- <a href="#">-->
  133. <!-- <i class="fa fa-check-circle-o text-success"></i>-->
  134. <!-- <span>已审核报告</span>-->
  135. <!-- <span class="badge badge-success pull-right assigned-number" th:text="${task.numOfTotalBug - task.numOfUndeal}">50</span>-->
  136. <!-- </a>-->
  137. <!-- </li>-->
  138. <!-- <li>-->
  139. <!-- <a href="#">-->
  140. <!-- <i class="fa fa-clock-o text-danger"></i>-->
  141. <!-- <span>未审核报告</span>-->
  142. <!-- <span class="badge badge-danger pull-right unassign-number" th:text="${task.numOfUndeal}">149</span>-->
  143. <!-- </a>-->
  144. <!-- </li>-->
  145. <!-- </ul>-->
  146. <!-- </li>-->
  147. </th:block>
  148. <th:block layout:fragment="maincontent">
  149. <section class="content-header">
  150. <h1>Dashboard<small th:text="${task.name}">{{ app.name }}</small></h1>
  151. <ol class="breadcrumb">
  152. <li>
  153. <a href="/home">
  154. <i class="fa fa-dashboard"></i>
  155. 全部任务
  156. </a>
  157. </li>
  158. <li class="active" th:text="|${task.name} Dashboard|">
  159. </li>
  160. </ol>
  161. </section>
  162. <section class="content container-fluid">
  163. <!-- Today Summary -->
  164. <div class="row">
  165. <div class="col-md-4 col-sm-6 col-xs-12">
  166. <div class="info-box bg-aqua all">
  167. <span class="info-box-icon">
  168. </span>
  169. <div class="info-box-content">
  170. <span class="info-box-text">全部报告</span>
  171. <span class="info-box-number" th:text="${task.numOfTotalBug}">{{ count_all }}</span>
  172. </div>
  173. </div>
  174. </div>
  175. <div class="col-md-4 col-sm-6 col-xs-12">
  176. <div class="info-box bg-green assigned">
  177. <span class="info-box-icon">
  178. </span>
  179. <div class="info-box-content">
  180. <span class="info-box-text">已审核</span>
  181. <span class="info-box-number">
  182. <b th:text="${task.numOfTotalBug - task.numOfUndeal}">{{ count_assigned }} </b>
  183. (
  184. <span th:if="${task.numOfTotalBug==0}" >0</span>
  185. <span th:if="${task.numOfTotalBug!=0}" th:text="${#numbers.formatDecimal((1 - task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100, 1, 0)}">40</span>
  186. %)
  187. </span>
  188. <!-- Progress Bar -->
  189. <div class="progress">
  190. <div class="progress-bar" th:if="${task.numOfTotalBug!=0}" th:style="'width: '+${(1 - task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100}+'%;'"></div>
  191. <div class="progress-bar" th:if="${task.numOfTotalBug==0}" style="width: 0%"></div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="col-md-4 col-sm-6 col-xs-12">
  197. <div class="info-box bg-red unassign">
  198. <span class="info-box-icon">
  199. </span>
  200. <div class="info-box-content">
  201. <span class="info-box-text">未审核</span>
  202. <span class="info-box-number">
  203. <b th:text="${task.numOfUndeal}"></b>
  204. (
  205. <span th:if="${task.numOfTotalBug!=0}" class="" th:text="${#numbers.formatDecimal((task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100, 1, 0)}"></span>
  206. <span th:if="${task.numOfTotalBug==0}" class="" >100</span>
  207. %)
  208. </span>
  209. <!-- Progress Bar -->
  210. <div class="progress">
  211. <div th:if="${task.numOfTotalBug!=0}" class="progress-bar" th:style="'width: '+${(task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100}+'%;'"></div>
  212. <div th:if="${task.numOfTotalBug==0}" class="progress-bar" style="width: 100%"></div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <!-- Report List Table -->
  219. <div class="assign-div pull-right">
  220. <!-- <button id="distribute-btn" class="btn btn-sm btn-assign pull-right">-->
  221. <!-- <i class="fa fa-coffee" style="margin-right: 3px;"></i>-->
  222. <!-- <span>人员分配</span>-->
  223. <!-- </button>-->
  224. <!-- <button id="blockChain-btn" class="btn btn-sm btn-assign pull-right">-->
  225. <!-- <i class="fa fa-coffee" style="margin-right: 3px;"></i>-->
  226. <!-- <span>导入数据到区块链</span>-->
  227. <!-- </button>-->
  228. <!-- <button t id="taskUrl-btn" class="btn btn-sm btn-assign pull-right" onclick="copyUrl()">-->
  229. <!-- <i class="fa fa-coffee" style="margin-right: 3px;"></i>-->
  230. <!-- <span>复制服务序列号</span>-->
  231. <!-- </button>-->
  232. <a id="dt-btn" class="btn btn-sm btn-assign pull-right" th:href="${dtUrl}">
  233. <i class="fa fa-coffee" style="margin-right: 3px;"></i>
  234. <span>查看大盘</span>
  235. </a>
  236. <button th:if="${!aggregated}" id="assign-btn" class="btn btn-sm btn-assign pull-right">
  237. <i class="fa fa-coffee" style="margin-right: 3px;"></i>
  238. <span>自动融合</span>
  239. </button>
  240. <a th:if="${aggregated}" id="agg-view" class="btn btn-sm btn-assign pull-right" th:href="'/agg_report_list?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
  241. <i class="fa fa-eye" style="margin-right: 3px;"></i>
  242. <span>聚合视图</span>
  243. </a>
  244. <button id="deliver-btn" class="btn btn-sm btn-assign pull-right">
  245. <i class="fa fa-coffee" style="margin-right: 3px;"></i>
  246. <span>全部交付</span>
  247. </button>
  248. <button id="export-btn" onclick="exportTask()" class="btn btn-sm btn-assign pull-right">
  249. <i class="fa fa-coffee" style="margin-right: 3px;"></i>
  250. <span>导出任务</span>
  251. </button>
  252. </div>
  253. <table id="report-list" class="table table-striped table-bordered" cellpadding="0" width="100%">
  254. <thead>
  255. <tr>
  256. <th>ID</th>
  257. <th>可复现程度</th>
  258. <th>分类</th>
  259. <th>严重程度</th>
  260. <th>描述</th>
  261. <!-- <th>Aggregated Report</th> -->
  262. <th>审核状态</th>
  263. <th>审核人</th>
  264. <th>所属聚合报告</th>
  265. <th>所属树状报告</th>
  266. </tr>
  267. </thead>
  268. <tbody>
  269. <th:block th:each="report : ${allReports}">
  270. <tr th:class="|row-${report.id}|">
  271. <td class="report-id" th:value="${report.id}" th:text="|ML-${report.id.substring(10)}|"></td>
  272. <td>
  273. <span th:text="${recurrent2String.get(report.recurrent)}"></span>
  274. </td>
  275. <td>
  276. <!--<i class="fa fa-square" style="color: {{ report.print_bug_category_color }};"></i>-->
  277. <span th:text="${report.bugCategory}"></span>
  278. </td>
  279. <td>
  280. <img th:alt="|${severity2String.get(report.severity)} Image|" height="14" th:src="'/static/images/icons/priorities/' + ${report.severity} + '.png'" />
  281. <span th:text="${severity2String.get(report.severity)}"></span>
  282. </td>
  283. <td style="width: 300px;">
  284. <div th:id="'ab-content-' + ${report.id}" data-toggle="collapse" th:attr="data-target='#full-content-' + ${report.id}" class="trunc collapse in" th:text="${report.description}">
  285. </div>
  286. <div th:id="'full-content-' + ${report.id}" data-toggle="collapse" th:attr="data-target='#ab-content-' + ${report.id}" class="full-content collapse">
  287. <span th:text="${report.description}"></span>
  288. <br/>
  289. <!--<img class="my-img-thumbnail pointer" th:src="${imgUrl}"-->
  290. <!--th:each="imgUrl,iterStat : ${report.getImgUrls()}"-->
  291. <!--th:onclick="'javascript:showimage(\''+${imgUrl}+'\');'"/>-->
  292. </div>
  293. </td>
  294. <td>
  295. <label class="label label-warning" th:if="${report.status == 0}">待审核</label>
  296. <label class="label label-success" th:if="${report.status == 1}">已审核</label>
  297. </td>
  298. <td class="report-assignee">
  299. <span th:if="${report.reviewerId != null}" th:text="${reviewMap.get(report.reviewerId)}"></span>
  300. </td>
  301. <td class="report-aggregator">
  302. <span th:if="${!aggregated}">暂无</span>
  303. <!-- 是否已经聚合-->
  304. <a th:if="${aggregated}" th:text="|ML-AG-${report.masterId.substring(10)}|" th:href="'/report?masterId='+${report.masterId}+'&amp;examId='+${examId}+'&amp;caseId='+${caseId}"></a>
  305. </td>
  306. <td>
  307. <span th:if="(${report.getTreeId()==null}) or ${report.getTreeId().length()==4}">暂无</span>
  308. <a th:if="${report.getTreeId()!=null} and ${report.getTreeId().length()!=4}" th:text="|ML-TR-${report.treeId.substring(10)}|" th:href="'/history/report?treeId='+${report.treeId}+'&amp;examId='+${examId}+'&amp;caseId='+${caseId}"></a>
  309. </td>
  310. </tr>
  311. </th:block>
  312. </tbody>
  313. </table>
  314. </section>
  315. <!-- section howModal -->
  316. <div id="howModal" class="modal fade" tabindex="-1" role="dialog">
  317. <div class="modal-dialog">
  318. <div class="modal-content">
  319. <div class="modal-header" style="background-color: #3c8dbc;">
  320. <span style="color: #fff;" class="pull-left"><b>How does system aggregate report <span id="reportId"></span> to <span id="aggReportId"></span>?</b></span>
  321. <button class="close pull-right" data-dismiss="modal">&times;</button>
  322. </div>
  323. <div class="modal-body">
  324. <img src="" class="img-responsive" />
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. </th:block>
  330. </body>
  331. </html>
  332. <div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
  333. aria-labelledby="myLargeModalLabel">
  334. <div class="modal-dialog modal-lg" style="display: inline-block; width: 300px;">
  335. <div class="modal-content">
  336. <img id="imgInModalID"
  337. class="carousel-inner img-responsive img-rounded"
  338. onclick="closeImageViewer()"
  339. onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
  340. onmouseout="this.style.cursor='default'"
  341. />
  342. </div>
  343. </div>
  344. </div>
  345. <script src="/static/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
  346. <script src="/static/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  347. <script src="/static/AdminLTE/bower_components/select2/dist/js/select2.min.js"></script>
  348. <script src="/static/js/app_info.js"></script>
  349. <script src="/static/AdminLTE/bower_components/bootstrap-notify/dist/bootstrap-notify.min.js"></script>
  350. <script type="text/javascript" src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>
  351. <script type="text/javascript" xmlns:th="http://www.thymeleaf.org" th:inline="javascript">
  352. /*<![CDATA[*/
  353. var reportHost = [[${reportHost}]]
  354. // var encodedReportDetailUrl = [[${encodedUrl}]]
  355. var caseId = [[${caseId}]]
  356. /*]]>*/
  357. $(document).ready(function(){
  358. $('#crowdSidebar').addClass('active');
  359. $('#crowdSidebar-taskDetail').addClass('active');
  360. var table = $('#report-list').DataTable({
  361. destroy:true,
  362. language: {
  363. "sProcessing": "处理中...",
  364. "sLengthMenu": "显示 _MENU_ 项数据",
  365. "sZeroRecords": "没有匹配结果",
  366. "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
  367. "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
  368. "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
  369. "sInfoPostFix": "",
  370. "sSearch": "搜索:",
  371. "sUrl": "",
  372. "sEmptyTable": "表中数据为空",
  373. "sLoadingRecords": "载入中...",
  374. "sInfoThousands": ",",
  375. "oPaginate": {
  376. "sFirst": "首页",
  377. "sPrevious": "上页",
  378. "sNext": "下页",
  379. "sLast": "末页"
  380. },
  381. "oAria": {
  382. "sSortAscending": ": 以升序排列此列",
  383. "sSortDescending": ": 以降序排列此列"
  384. }
  385. },
  386. searching: true,
  387. pageLength: 25,
  388. "order": []
  389. });
  390. });
  391. exportTask = function(){
  392. var data = new FormData();
  393. data.append('caseId',caseId);
  394. $.ajax({
  395. url: '/exportTask',
  396. data:data,
  397. type: 'POST',
  398. processData: false,
  399. contentType: false,
  400. success: function (result) {
  401. if(result != 'success'){
  402. $.notify({
  403. message: result
  404. },{
  405. // settings
  406. delay: 100,
  407. timer: 1000,
  408. type: 'error'
  409. });
  410. }else {
  411. $.notify({
  412. message: '导出成功'
  413. },{
  414. // settings
  415. delay: 100,
  416. timer: 3000,
  417. type: 'success'
  418. });
  419. }
  420. }
  421. });
  422. }
  423. copyUrl = function(){
  424. var clipboard = new Clipboard('#taskUrl-btn', {
  425. text: function() {
  426. return encodedReportDetailUrl;
  427. }
  428. });
  429. clipboard.on('success', function(e) {
  430. $.notify({
  431. // options
  432. message: '已成功复制到你的剪切板'
  433. },{
  434. // settings
  435. delay: 100,
  436. timer: 3000,
  437. type: 'success'
  438. });
  439. });
  440. clipboard.on('error', function(e) {
  441. console.log(e);
  442. });
  443. }
  444. </script>