crowd-test-service
/
moooc_review


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="main">
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/agg_report_new.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/word_cloud.css"/>
</head>
<body>
<th:block layout:fragment="sidebar">

    <li>
        <a th:href="'/task_detail?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
            <i class="glyphicon glyphicon-book"></i>
            <span>
                任务详情
            </span>
        </a>
    </li>
    <li>
        <a th:href="'/final_reports?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
            <i class="fa fa-calendar-check-o"></i>
            <span>预交付报告</span>
        </a>
    </li>
    <li>
        <a th:href="'/review_report?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
            <i class="glyphicon glyphicon-edit"></i>
            <span>
                报告审核
            </span>
        </a>
    </li>
<!--    <li class="treeview">-->
<!--        <a href="#">-->
<!--            <i class="fa fa-list"></i>-->
<!--            <span>Reports</span>-->
<!--            <span class="pull-right-container">-->
<!--			<i class="fa fa-angle-left pull-right"></i>-->
<!--		</span>-->
<!--        </a>-->
<!--        <ul class="treeview-menu" style="display: block;">-->
<!--            <li>-->
<!--                <a th:href="'/task_detail?examId='+${examId}+'&amp;caseId='+${caseId}">-->
<!--                    <i class="fa fa-sticky-note text-success"></i>-->
<!--                    <span>默认视图</span>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li>-->
<!--                <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}">-->
<!--                    <i class="fa fa-sitemap text-warning"></i>-->
<!--                    <span>聚合视图</span>-->
<!--                </a>-->
<!--            </li>-->


<!--        </ul>-->
<!--    </li>-->
</th:block>
<th:block layout:fragment="maincontent">

    <section class="content-header">
        <h1>报告详情
            <small th:text="${singleReport.getId()}"></small>
        </h1>
        <!-- <h1>Summary for report 0-5</h1> -->
        <!-- <small style="font-style: italic;">at 50% report-level and 25% supplementary level</small> -->

        <ol class="breadcrumb">
            <!-- style="margin-right: 173px;" -->
            <li>
                <a href="/home">
                    <i class="fa fa-dashboard"></i>
                    全部任务
                </a>
            </li>
            <li>
                <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}">
                    审核列表
                </a>
            </li>
            <li class="active" th:text="${singleReport.getId()}">

            </li>
        </ol>
    </section>
    <section class="content container-fluid">
        <div style="overflow: auto;" class="row">
            <div class="col-md-8" id="summary">
                <div class="box box-info detail-table">
                    <div class="box-header with-border" style="padding: 4px;">
                        <i class="fa fa-object-group" style="color: #00c0ef;"></i>
                        <h3 class="box-title" th:text="${singleReport.getId()}">

                        </h3>

                        <button  class="btn-xs btn-primary pull-right" id="create_bug" style="margin-left: 5px;display: none" onclick="showCreateBlock()" >
                            创建缺陷报告
                        </button>
                        <button class="btn-xs btn-primary pull-right" id="review_confirm" th:unless="${reviewed}" onclick="reviewConfirm()">确认审核</button>

                        <span th:if="${reviewed}" class="pull-right label label-success">
                            <span class="glyphicon glyphicon-ok"></span>
                            已审核
                        </span>

                    </div>
                    <table class="table table-reponsive">
                        <tbody>
                        <tr>
                            <td class="attr-title">创建时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td class="dup-create-time" th:text="${#dates.format(createTime, 'yyyy-MM-dd')}"></td>
                            <td class="attr-title">Bug 严重性</td>
                            <td class="dup-severity">
                                <span  >
                                    <span th:text="${severity2String.get(singleReport.getSeverity())}"></span>
<!--                                    <span class="badge" th:text="${severityCount.value}"></span>-->
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="attr-title">聚合报告</td>
                            <td class="dup-assignee" colspan="3">

                                <a th:href="@{${masterUrl}}" th:text="${masterName}" style="margin-right: 5px;">

                                </a>
                            </td>
                        </tr><!-- Attribute -->
                        <tr>
                            <td class="attr-title">树状报告</td>
                            <td class="dup-assignee" colspan="3">

                                <a th:href="@{${treeUrl}}" th:text="${treeName}" style="margin-right: 5px;">

                                </a>
                            </td>
                        </tr><!-- Attribute -->
                        <tr>
                            <td class="attr-title">Bug分类&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td class="dup-category" colspan="3">

                                <!--<i class="fa fa-square" style="color: {{ category.category_color  }};"></i>-->
                                <span >
                                    <span th:text="${singleReport.getBugCategory()}"></span>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="attr-title">三级页面&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td class="dup-category" colspan="3">

                                <!--<i class="fa fa-square" style="color: {{ category.category_color  }};"></i>-->
                                <span>
                                    <span th:text="${singleReport.getBug_page()}"></span>
<!--                                    <span class="badge" th:text="${pageCount.value}"></span>-->
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="attr-title">复现程度&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td class="dup-category" colspan="3">

                                <!--<i class="fa fa-square" style="color: {{ category.category_color  }};"></i>-->
                                <span >
                                    <span th:text="${recurrent2String.get(singleReport.getRecurrent())}"></span>
<!--                                    <span class="badge" th:text="${recurrentCount.value}"></span>-->
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="attr-title">审核人</td>
                            <td class="dup-assignee" colspan="3">

                                <a href="#" style="margin-right: 5px;">
                                    <i class="fa fa-vcard"></i>
                                    admin
                                </a>


                            </td>
                        </tr><!-- Attribute -->

                        <!-- Start Content -->
                        <tr>
                            <td class="attr-title">报告内容<span class="glyphicon glyphicon-star"
                                                            style="margin-left: 5px;"></span></td>
                            <td class="dup-master" colspan="3">
                                <span th:text="${singleReport.getDescription()}"></span><br/>
                                <img class="my-img-thumbnail pointer to-add" th:src="${imgUrl}"
                                     th:each="imgUrl,iterStat : ${singleReport.getImgUrls()}"
                                     th:imgUrl="${imgUrl}" th:onclick="javascript : showimage(this.getAttribute('imgUrl'))"/>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-4 pull-right" >
                <!--<div id="my_favorite_latin_words" class="box box-info" style="margin-bottom: 5px; min-height: 182px;"></div>-->

                <div th:fragment="create_reports" class="box box-danger source-table" id="new-report-create-block" style="display: none">
                    <div class="box-header" style="border-bottom: 1px #f4f4f4 solid;">
                        <h3 class="box-title">
                            编辑报告
                        </h3>
                        <button class="btn-xs btn-primary pull-right" style="margin-left: 5px"
                                onclick="createOrUpdateFinalReport()">保存
                        </button>
                        <button class="btn-xs btn-primary pull-right" onclick="hideCreateBlock()">取消</button>
                    </div>
                    <div id="new-report" class="box-body"
                         style="font-size: 12px; max-height: 340px; overflow: scroll;">
                        <form role="form">

                            <!-- select -->
                            <div class="form-group">
                                <label>Bug 复现程度</label>
                                <select id="recurrent" name="recurrent" class="form-control">
<!--                                    <option th:each="mapItem : ${recurrent2String}"-->
<!--                                            th:value="${mapItem.key}" th:text="${mapItem.value}">必现</option>-->
                                    <option value="1">其他</option>
                                    <option value="2">无规律复现</option>
                                    <option value="3">小概率复现</option>
                                    <option value="4">大概率复现</option>
                                    <option value="5">必现</option>
                                </select>
                            </div>
                            <!-- select -->
                            <div class="form-group">
                                <label>Bug 严重性</label>
                                <select id="severity" name="severity" class="form-control">
<!--                                    <option th:each="mapItem : ${severity2String}"-->
<!--                                            th:value="${mapItem.key}" th:text="${mapItem.value}">必现</option>-->
                                    <option value="1">待定</option>
                                    <option value="2">较轻</option>
                                    <option value="3">一般</option>
                                    <option value="4">严重</option>
                                    <option value="5">紧急</option>
                                </select>
                            </div>

                            <!-- select -->
                            <div class="form-group">
                                <label>Bug 分类</label>
                                <select id="category" class="form-control">
<!--                                    <option th:each="mapItem : ${category2String}"-->
<!--                                            th:value="${mapItem.key}" th:text="${mapItem.value}">必现</option>-->
                                    <option value="1">安全</option>
                                    <option value="2">功能不完整</option>
                                    <option value="3">性能</option>
                                    <option value="4">页面布局缺陷</option>
                                    <option value="5">用户体验</option>
                                    <option value="6">不正常退出</option>
                                    <option value="7">其他</option>
                                </select>
                            </div>

                            <!-- textarea -->
                            <div class="form-group">
                                <label>Bug 描述</label>
                                <textarea id="bug-description" name="description" class="form-control" rows="3"
                                          placeholder="Enter ..."></textarea>
                            </div>
                            <div class="form-group">
                                <label>Bug 截图</label>
                                <div id="new-report-img"></div>
                            </div>

                        </form>

                    </div>
                </div>

                <div class="box box-info source-table" id="new-report-list-block" >
                    <div class="box-header">
                        <h3 class="box-title">
                            已创建报告
                        </h3>
                    </div>
                    <div th:fragment="ul_reports" id="new-created-reports-panel">
                        <div  id="new-created-reports" class="box-body"
                              style="font-size: 12px; max-height: 340px; overflow: scroll;">
                            <div th:if="${finalReports.size() == 0}" style="font-size: 20px">
                                暂无 <a onclick="showCreateBlock()" style="cursor: pointer">立即创建报告</a>
                            </div>
                            <ul class="list-group">

                                <!-- other reports -->
                                <th:block th:each="finalReport : ${finalReports}">
                                    <li class="list-group-item">
                                        <div style="overflow: auto;">
                                            <span th:text="${finalReport.id}"></span>
                                            <span class="pull-right">
<!--                                            <a href="#" th:onclick="'editReport('+${finalReport.id}+')'" >编辑</a>-->
                                            <a href="#" th:onclick="'deleteReport('+ ${finalReport.id} +')'">删除</a>
                                        </span>
                                        </div>

                                        <div>
                                        <span>
                                            复现程度：<span th:text="${recurrent2String.get(finalReport.recurrent)}"></span>
                                        </span>
                                            <span class="pull-right">
                                            分类：<span th:text="${category2String.get(finalReport.category)}"></span>
                                        </span>
                                        </div>
                                        <div>
                                            严重程度：<span th:text="${severity2String.get(finalReport.severity)}"></span>
                                        </div>
                                        <br/>
                                        <span th:text="${finalReport.description}"></span>
                                        <br/>
                                        <img class="my-img-thumbnail pointer to-add" th:src="${imgUrl}"
                                             th:each="imgUrl,iterStat : ${finalReport.getImgUrls()}"
                                             th:imgUrl = "${imgUrl}"
                                             th:onclick="'javascript:showimage(this.getAttribute('imgUrl'));'"/>
                                    </li>

                                </th:block>

                            </ul>
                        </div>

                    </div>
                </div>

            </div>
        </div>


    </section>
</th:block>


</body>
</html>


<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">

    <div class="modal-dialog modal-lg" style="display: inline-block; max-width: 900px; max-height: 600px">
        <div class="modal-content" style="background:  transparent">
            <center>
                <img id="imgInModalID"
                     class="carousel-inner img-responsive "
                     onclick="closeImageViewer()"
                     onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
                     onmouseout="this.style.cursor='default'"
                     style="max-height: 90vh;
                     max-width: 90vw;
                     object-fit: contain;"
                />
            </center>
        </div>
    </div>
</div>
<script type="text/javascript">
    //显示大图
    function showimage(source) {
        $("#imgModal").find("#imgInModalID").attr("src", source);
        $("#imgModal").modal();
    }

    //关闭
    function closeImageViewer() {
        $("#imgModal").modal('hide');
    }
</script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="/static/js/single_report.js"></script>
<script type="text/javascript" src="/static/js/jqcloud-1.0.4.min.js"></script>
<!--<script type="text/javascript" src="/static/js/partload.js"></script>-->
<script type="text/javascript" xmlns:th="http://www.thymeleaf.org" th:inline="javascript">
    /*<![CDATA[*/
    var urlParams = new URLSearchParams(window.location.search);
    var masterId = urlParams.get('masterId');
    var examId = urlParams.get('examId');
    var caseId = urlParams.get('caseId');
    var finalReportId = urlParams.get('finalReportId');
    var reportId = /*[[${reportId}]]*/;
    /*]]>*/


    var images = [];
    $(function () {

        var urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get("finalReportId")) {
            showCreateBlock()
            /*<![CDATA[*/
            var editReport = /*[[${editReport}]]*/;
            /*]]>*/
            fillNewReportBlock(editReport);
        }
        if(finalReportId == null){
            $('#create_bug').css('display','block');
        }
    });

    function createOrUpdateFinalReport() {

        var report = {
            'description': $("#bug-description").val(),
            'severity': $("#severity").val(),
            'recurrent': $("#recurrent").val(),
            'category': $("#category").val(),
            'sourceId': reportId,
            'reviewerId': 1,
            'examId': examId,
            'caseId': caseId,
            'imgUrls': images
        }
        console.log("-----")
        if (finalReportId) {
            report.id = finalReportId
            $.ajax({
                type: "PUT",
                url: '/final_report/'+finalReportId,
                data: JSON.stringify(report),
                contentType: "application/json",
                success: function (data) {
                    //修改成功的情况
                    console.log("修改报告")
                    loadPartReports();

                    /*<![CDATA[*/
                    // window.location.href='report?masterId='+masterId+'&examId='+examId+'&caseId='+caseId
                    /*]]>*/
                }
            });
        } else {
            //  向服务器新建一个
            $.ajax({
                type: "POST",
                url: '/final_report',
                data: JSON.stringify(report),
                contentType: "application/json",
                success: function (data) {
                    console.log("新建报告")
                    console.log(report)
                    console.log("接下来是data")
                    console.log(data)
                    // location.reload()
                    loadPartReports();
                }
            });
        }
    }

    function showCreateButton() {
        $("#create_bug").show()

    }


    function loadPartReports() {
        console.log("局部刷新")
        /*<![CDATA[*/
        $('#new-created-reports-panel').load("/created_reports_single?masterId="+ reportId +"&caseId="+ caseId +"&examId="+ examId );
        //$('#new-report-create-block').load("/created_reports_form");
        finalReportId = null
        /*]]>*/
        showCreateButton()
        $("#new-report-create-block").hide()
        $("#new-report-list-block").show()
    }


    // function  syncCreatedReports(){
    //     syncCreatedReportsWithParams(masterId,examId,caseId);
    // }


    function showCreateBlock() {
        // console.log("show create block")
        $("#new-report-create-block").show()
        // console.log("show create yse")
        $("#new-report-list-block").hide()
        console.log("show create three")

    }
    function hideCreateBlock() {
        if (finalReportId){
                     /*<![CDATA[*/
            // window.location.href='report?masterId='+masterId+'&examId='+examId+'&caseId='+caseId
            // loadPartReports()
            $("#create_bug").show()
            $("#bug-description").text("")
            finalReportId = null
            /*]]>*/
        }
        $("#new-report-create-block").hide()
        $("#new-report-list-block").show()

    }


    function fillNewReportBlock(editReport) {
        console.log(editReport);
        console.log("开始填充报告页面。")
        $("#recurrent").val(editReport.recurrent);
        $("#severity").val(editReport.severity);
        $("#category").val(editReport.category);
        $("#bug-description").val(editReport.description);
        var $new_report_img = $("#new-report-img");
        $new_report_img.empty()
        images = [];
        /*<![CDATA[*/
        for (var i=0;editReport.imgUrls!=null&&i<editReport.imgUrls.length;i++) {
            var src = editReport.imgUrls[i]
            images.push(src);
            var $img = $('<img />')
            $img.attr("src", src);
            $img.attr("class", "my-img-thumbnail pointer to-delete");
            $img.on("click", function (){
                showimage(src);
            });
            $img.on("dragend", function (e) {
                var src = $(e.target).attr("src");
                var idx = images.indexOf(src);
                if (idx >= 0) {
                    images.splice(idx, 1);
                }

                $(e.target).remove();
            });
            $new_report_img.append($img)
        }
        /*]]>*/
    }
    function deleteReport(finalReportId) {
        $.ajax({
            url: '/final_report/' + finalReportId,
            type: 'DELETE',
            success: function (result) {
                // Do something with the result
                alert("删除成功");
                loadPartReports();
            }
        });
    }

    function editReport (finalId){
        //填充编辑表单页面。
        /*<![CDATA[*/
        $.ajax({
            url: '/editReportData?masterId='+reportId+'&finalReportId='+finalId,
            type: 'GET',
            success: function (result) {
                console.log(result); //
                finalReportId = finalId;
                fillNewReportBlock(result)
                showCreateBlock();
            }
        });
        /*]]>*/
    }

    function reviewConfirm() {
        $.ajax({
            url: '/single_bug_review?reportId='+reportId,
            type: 'PUT',
            success: function (result) {
                if(result=="success"){
                    alert("确认审核成功，修改报告状态为已审核");
                    location.reload();
                }else {
                    alert("还有所属该报告的聚合报告或树状报告尚未审核")
                }
            }
        });
    }
</script>