crowd-test-service
/
moooc_review


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
							<!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="'/final_reports?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
            <i class="fa fa-calendar-check-o"></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">
<!--        <button id="backButton" onclick="showMainReport()"  style="display: none; " >返回</button>-->
        <h1 id="mainTitle">融合报告详情
            <small th:text="${aggReportId}"></small>

            <button id="backButton" type="button" class="btn btn-default" onclick="showMainReport()"  style="display: none; " >返回</button>
        </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="${aggReportId}">

            </li>
        </ol>
    </section>

    <section  class="content container-fluid">
        <div style="overflow: auto;" class="row">
            <div class="col-md-8" id="summary" th:fragment="masterBody">
                <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="${aggReportId}">

                        </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 th:each="severityCount : ${severityCounts}" >
                                    <span th:text="${severityCount.key}"></span>
                                    <span class="badge" th:text="${severityCount.value}"></span>
                                </span>
                                <span th:if="${severityCounts.size()}==0">
                                    该报告没有补充报告
                                </span>
                            </td>
                        </tr>

                        <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 th:each="categoryCount : ${categoryCounts}">
                                    <span th:text="${categoryCount.key}"></span>
                                    <span class="badge" th:text="${categoryCount.value}"></span>
                                </span>
                                <span th:if="${categoryCounts.size()}==0">
                                    该报告没有补充报告
                                </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 th:each="pageCount : ${pageCounts}">
                                    <span th:text="${pageCount.key}"></span>
                                    <span class="badge" th:text="${pageCount.value}"></span>
                                </span>
                                <span th:if="${pageCounts.size()}==0">
                                    该报告没有补充报告
                                </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 th:each="recurrentCount : ${recurrentCounts}">
                                    <span th:text="${recurrentCount.key}"></span>
                                    <span class="badge" th:text="${recurrentCount.value}"></span>
                                </span>
                                <span th:if="${recurrentCounts.size()}==0">
                                    该报告没有补充报告
                                </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="${masterReport.getDescription()}"></span><br/>
                                <img class="my-img-thumbnail pointer to-add" th:src="${imgUrl}"
                                     th:each="imgUrl,iterStat : ${masterReport.getImgUrls()}"
                                     th:onclick="'javascript:showimage(\''+${imgUrl}+'\');'"/>

                            </td>
                        </tr>
                        <tr>
                            <td class="attr-title">补充点</td>
                            <td class="dup-supplementary" colspan="3">
                                <ul id="sup-list" class="list-group"
                                    style="max-height: 450px; margin-bottom: 0px; overflow: scroll;">

                                    <li class="list-group-item" style="padding: 3px 3px;"
                                        th:each="supplement, iterStat : ${supplements}">

                                        <p style="border-bottom: 1px solid #ddd; margin: 0 0 1px;">
                                            <b><a href="#" th:text="'补充点 ' + ${iterStat.count}"> </a></b>
                                            <a th:href="'#sup-' + ${iterStat.count}"
                                               class="glyphicon glyphicon-menu-hamburger pull-right sup-collapse"
                                               data-toggle="collapse" style="color: #000;"></a>
                                        </p>
                                        <div class="sup-title">
                                            <!-- 如果有文字，则仅显示top 1的diff_sentence，并且不展示图片 -->

                                            <span th:if="${supplement.hasTxt}"
                                                  th:text="'...' + ${supplement.topTxt} + '...'"></span>

                                            <img th:if="${!supplement.hasTxt}" class="my-img-thumbnail pointer to-add"
                                                 th:src="${imgUrl}" th:each="imgUrl,iterStat : ${supplement.top3Img}"
                                                 th:onclick="'javascript:showimage(\''+${imgUrl}+'\');'"/>


                                        </div>
                                        <div th:id="'sup-' + ${iterStat.count}" class="collapse">
                                            <ul class="list-group" style="margin-bottom: 0px;">
                                                <li class="list-group-item" style="padding: 3px 3px;"
                                                    th:each="report : ${supplement.bugs}">
                                                <span class="glyphicon glyphicon-file"
                                                      style="color: #3c8dbc; margin-right: 5px;"></span>
                                                    <a th:href="'/report/'+${report.id}+'?examId=' + ${examId} + '&amp;caseId=' + ${caseId}" style="margin-right: 5px;" th:text="${report.id}"></a>
                                                    <!--查看树状报告-->
                                                    <span th:if="${single2root.get(report.id)!=null}"  th:onclick="'changeToTree('+${single2root.get(report.id)}+')'"

                                                           class="glyphicon glyphicon-tree-conifer"
                                                           style="color: #07b309; margin-right: 5px;" >
                                                    </span>

                                                    <!-- de scription -->

                                                    <th:block th:each="sent, iterStat : ${report.taggedSentences}">
                                                        <span th:if="${sent.isDiff()}" th:text="${sent.sentence}"
                                                              style="color: red; font-weight: bold;"></span>
                                                        <span th:unless="${sent.isDiff()}"
                                                              th:text="${sent.sentence}"></span>
                                                    </th:block>

                                                    <br/>

                                                    <!-- imgs -->
                                                    <th:block th:each="img, iterStat : ${report.taggedImgs}">

                                                        <img class="my-img-thumbnail pointer to-add"
                                                             th:style="${img.isDiff()? 'border: 2px solid red;' : ''}"
                                                             th:src="${img.imgUrl}"
                                                             th:onclick="'javascript:showimage(\''+${img.imgUrl}+'\');'"/>

                                                    </th:block>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="treePart">

            </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>

                                </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>
                                </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>
                                </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:onclick="'javascript:showimage(\''+${imgUrl}+'\');'"/>
                                    </li>

                                </th:block>

                            </ul>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div style="overflow: auto;" class="row tree-container">
            <div class="col-md-8 tree-wrapper">

                <div class="box box-info pull-left svg-div" style="background-color: rgb(247, 247, 247); ">
                    <h4 style="padding-left: 10px;" class="pull-left">聚合图</h4>
                    <svg class="graph" id="tree" width="100%" height="420" viewBox="0 0 700 350">
                        <g transform="translate(10,20)" id="tree-g">
                            <g class="links"></g>
                            <g class="nodes"></g>
                        </g>
                    </svg>

                </div>
            </div>
            <div class="col-md-4">

                <div class="detail-div"
                     style="height: 459px; max-height: 459px; font-size: 10px; overflow: scroll;">

                </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/agg_report_new.js"></script>
<script type="text/javascript" src="/static/js/tree_report_new.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 word_list = /*[[${wordList}]]*/;  //源代码如此
    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');
    /*]]>*/
    word_list = JSON.parse(word_list)

    var images = [];
    $(function () {
        // $("#my_favorite_latin_words").jQCloud(word_list,
        //     {
        //         shape: "rectangular",
        //         autoResize: true
        //     });
        //去除掉报告详情界面的词云
        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': masterId,
            'reviewerId': 1,
            'examId': examId,
            'caseId': caseId,
            'imgUrls': images
        }
        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("新建报告")
                    // location.reload()
                    loadPartReports();
                }
            });
        }
    }


    //展示树状报告
    changeToTree = function (treeId) { //
        // alert(treeId);
        // $('#summary').hide();
        /*<![CDATA[*/
        $('#summary').hide();
        $("#treePart").load("/history/report_part?treeId="+treeId+"&caseId="+ caseId +"&examId="+ examId);
        //$('#new-report-create-block').load("/created_reports_form");
        $("#backButton").show();
        $('#treePart').show();
        initTree(treeId);
        initTreeReport();
    }

    initTreeReport = function(){
        $('.sup-collapse').click(function () {
            var dupTitle = $(this).parents('li').find('.sup-title');
            dupTitle.toggle();
        });
        $(".to-add").on("dragend", function (e) {
            var src = $(e.target).attr("src");
            if (images.indexOf(src) < 0) {
                images.push(src);
                var $img = createImg(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)
            }
        });
    }

    //创建Img
    function createImg(src) {
        var $img = $('<img />')
        $img.attr("src", src);
        $img.attr("class", "my-img-thumbnail pointer to-delete");
        $img.on("click", function (){
            showimage(src);
        });
        return $img;
    }

    showMainReport  = function () {
        $('#summary').show();
        $('#treePart').hide();
        $('#backButton').hide();
        initMaster();
    }

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

    }

    function loadPartReports() {
        console.log("局部刷新")
        /*<![CDATA[*/
        $('#new-created-reports-panel').load("/created_reports?masterId="+ masterId +"&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){
  h          /*<![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='+masterId+'&finalReportId='+finalId,
            type: 'GET',
            success: function (result) {
                console.log(result); //
                finalReportId = finalId;
                fillNewReportBlock(result)
                showCreateBlock();
            }
        });
        /*]]>*/

    }

    function reviewConfirm() {
        $.ajax({
            url: '/bug_review?masterId='+masterId,
            type: 'PUT',
            success: function (result) {
                alert("确认审核成功，修改报告状态为已审核");
                location.reload();
            }
        });
    }
</script>