VisualInspection/VisualInspection/qzd/view/task/taskDetail.html

<div class="container-fluid ">
    <div class="row">
        <h3 style="padding-top: 10px;padding-bottom: 15px;">考核基本信息</h3>
        <div>
            <table style="width:100%;">
                <tr>
                    <td width="20%">考核任务名：<label id="name"></label></td>
                    <td width="20%">考核时间： <label id="checktime"></label></td>
                    <td width="20%">考核部门：<label id="checked_dept"></label></td>
                </tr>
            </table>
        </div>
    </div>
    <hr>
    <div class="row">
        <h3 style="padding-top: 10px;padding-bottom: 15px;">考核任务流程</h3>
        <div id="flow_div">
        </div>
    </div>
    <hr>
    <div class="row">
        <h3 style="padding-top: 10px;padding-bottom: 15px;">考核详细内容</h3>
        <div>
            <div id="score_datatable" data-checkable="true" data-sortable="true"></div>
        </div>
    </div>
    <hr>
    <div class="row" id="appeal_div">
        <h3 style="padding-top: 10px;padding-bottom: 15px;">申诉基本信息</h3>
        <div>
            <table style="width:100%;">
                <tr>
                    <td width="20%">申诉时间：<label id="appeal_time"></label></td>
                    <td width="20%">申诉原因：<label id="appeal_reason"></label></td>
                </tr>
                <tr>
                    <td width="20%">附件：
                        <div class="file-list" id="appeal_file_list">
                        </div>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td width="20%">复核结果：
                        <label id="recheck_result"></label>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="row" style="margin-top:5px;text-align:center">
        <div>
            <button id="submitBtn" style="display:none" type="button" class="btn btn-warning" onclick="submitCheck()">提交</button>
            <button id="confirmBtn" style="display:none" type="button" class="btn btn-warning" onclick="confirmCheck()">确认</button>
            <button id="submitAppealBtn" style="display:none" type="button" class="btn btn-warning" onclick="submitCheck4Appeal()">复核提交</button>
            <button id="confirmAppealBtn" style="display:none" type="button" class="btn btn-warning" onclick="confirmCheck4Appeal()">申诉结果确认</button>
            <button id="appealBtn" style="display:none" type="button" class="btn btn-danger" onclick="showAppeal()">申诉</button>
            <button id="assignBtn" style="display:none" type="button" class="btn btn-danger" onclick="showAssign()">分配</button>
            <button id="backBtn" style="display:none" type="button" class="btn btn-danger" onclick="back2Check()">退回重新稽查</button>
            <button id="backAppealBtn" style="display:none" type="button" class="btn btn-danger" onclick="back2AppealCheck()">退回重新复查</button>
            <button id="backConfirmBtn" style="display:none" type="button" class="btn btn-danger" onclick="back2Confirm()">退回重新确认</button>
        </div>
    </div>
</div>
<div id="form-div" style="display:none;text-align:center;height:300px;padding:5px;">
    <div class="row">
        <div id="img_container" class="cards cards-borderless col-sm-12">
        </div>
    </div>
</div>
<div id="appealDetail-div" style="display:none;text-align:center;">
    <link rel="import" href="/qzd/view/appeal_management/appealDetail.html?__inline">
</div>
<div id="chooseCheckman-div" style="display:none;text-align:center;">
    <link rel="import" href="/qzd/view/task/chooseCheckman.html?__inline">
</div>
<style>
    .line {
        text-align: center;
        font-size: 20px;
        height: 5px;
        margin: 15px 0px;
        width: 100%;
        background: #1296db;
        overflow: hidden;
    }
    
    .timeline_item_station {
        left: 42%;
        /* margin-left: 55px; */
        margin-top: 18px;
        width: 25px;
        height: 25px;
        padding: 15px;
        border-width: 6px;
        background-color: rgb(50, 141, 199);
        position: absolute;
        border-radius: 50%;
        padding: 10px;
        top: 0;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
</style>
<script>
    $(document).ready(function() {
        addBreadMenu("/qzd/view/task/taskDetail.html", "稽查详情");
        checkAuth();
        $("#name").html($.checkTask.name);
        $("#checkman").html($.checkTask.checkman_name);
        $("#checktime").html($.checkTask.start_time);
        $("#checked_dept").html($.checkTask.checked_dept_name);



        if ($.checkTask.appeal) {
            $("#appeal_div").show();
            $("#appeal_time").html($.checkTask.appeal.appeal_time);
            $("#appeal_reason").html($.checkTask.appeal.appeal_reason);
            $("#appeal_file_list").html(genAppeaFiles($.checkTask.appeal.file_src));
            $("#recheck_result").html($.checkTask.appeal.recheck_result);
        } else {
            $("#appeal_div").hide();
        }

        genFlow();
        queryScores();
    });

    //初始化表行按钮
    function initBtns() {
        console.log(getCurrentUser());
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA + "_2", ["#submitBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA + "_3", ["#submitBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA + "_7", ["#submitBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA + "_12", ["#submitAppealBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA + "_13", ["#submitAppealBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA + "_17", ["#submitAppealBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA_ADMIN + "_4", ["#backBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA_ADMIN + "_6", ["#backConfirmBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA_ADMIN + "_14", ["#backAppealBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_JICHA_ADMIN + "_11", ["#assignBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_WRECKER_MANAGER + "_5", ["#confirmBtn", "#appealBtn"]);
        $.zui.store.set("task_detail_btn_" + ROLE_WRECKER_MANAGER + "_15", ["#confirmAppealBtn"]);
    }

    function checkAuth() {
        initBtns();
        showBtn(ROLE_JICHA, $.checkTask.check_status);
        showBtn(ROLE_JICHA_ADMIN, $.checkTask.check_status);
        showBtn(ROLE_WRECKER_MANAGER, $.checkTask.check_status);
    }

    function showBtn(role, status) {
        //   console.log(getCurrentUser());
        if (hasRole(role)) {
            var btnArr = $.zui.store.get("task_detail_btn_" + role + "_" + status);
            if (btnArr) {
                console.log(btnArr);
                for (var i in btnArr) {
                    $(btnArr[i]).show();
                }
            }
        }
    }

    function queryScores() {
        // 使用data参数更新数据：
        var data = {
            "task_id": $.checkTask.id
        }

        var cols = [{
            width: 80,
            text: '序号',
            type: 'number',
            flex: true,
            colClass: 'text-center',
            field: 'num'
        }, {
            width: 60,
            text: '评分记录',
            type: 'string',
            flex: true,
            sort: 'down',
            field: 'content'
        }, {
            width: 80,
            text: '分数',
            type: 'string',
            flex: true,
            colClass: '',
            field: 'check_item_score'
        }, {
            width: 80,
            text: '考核人',
            type: 'string',
            flex: true,
            colClass: '',
            field: 'checked_area_name'
        }, {
            width: 80,
            text: '备注',
            type: 'string',
            flex: true,
            colClass: '',
            field: 'remark'
        }, {
            width: 280,
            text: '图片',
            type: 'imagedd',
            flex: true,
            colClass: '',
            field: 'pics'
        }];
        if (hasRole(ROLE_JICHA) && ($.checkTask.check_status == 2 || $.checkTask.check_status == 2 || $.checkTask.check_status == 12 ||
                $.checkTask.check_status == 13)) {
            var oper = {
                width: 160,
                text: '操作',
                type: 'string',
                flex: true,
                field: 'id',
                oper: [{
                    func: 'showEditScore',
                    text: '修改',
                    icon_class: 'icon-edit'
                }, {
                    func: 'deleteScore',
                    text: '删除',
                    icon_class: 'icon-remove-circle'
                }]
            }
            cols.push(oper);
        }
        $('#score_datatable').mytable({
            'cols': cols,
            'url': "/q/score/getScoreList/",
            'param': data
        });
        $('a.lightbox-toggle').lightbox();
    }
    var curScoreId;

    function showEditScore(id) {

        var rowData = getItemByIdFromArr(id, $('#score_datatable').mytable('getTableData'));
        // alert(rowData.pics);
        curScoreId = rowData.id;
        scoreImageLayer = showPopup4Common('修改图片', updateImg, '600px');
        showTaskDetailPics(rowData.pics);
    }

    function showTaskDetailPics(pics, divId) {
        var picStr = '';
        if (!divId) divId = '#img_container';
        $(divId).html(picStr);
        if (pics) {
            var picArr = pics.split(',');
            for (var i in picArr) {

                var ispic = true;
                var src = picArr[i];
                if (!src.startWith("http"))
                    src = base_image_server_url + src;

                var videosrc = src;
                if (src.indexOf('.avi') != -1) {
                    src = src.split('.avi')[0] + "_screen_0.png"
                    ispic = false;
                }
                if (src.indexOf('.mov') != -1) {
                    src = src.split('.mov')[0] + "_screen_0.png"
                    ispic = false;
                }
                if (src.indexOf('.mp4') != -1) {
                    src = src.split('.mp4')[0] + "_screen_0.png"
                    ispic = false;
                }


                var pic = '<div id="img_item_' + i + '" class="col-md-4 col-sm-6 col-lg-3">' +
                    '<a href="javascript:void(0)" onclick="removeImg(\'#img_item_' + i + '\')" style="float:right;position:absolute;z-index:100;"><span class="label label-danger"><i class="icon icon-remove-circle"></i> 删除</span></a>' +
                    (ispic ? '<a class="card lightbox-toggle" data-group="image-group-1" data-lightbox-group="example-3" href="' + src + '" style="position:absolute">' : '<a class="card" onclick="video_paly(\'' + videosrc + '\')" href="javascript:void(0)" style="position:absolute">') +
                    '<img class="pic-class img-thumbnail" style="width:200px;height:150px;" src="' + src + '" alt="">' + (ispic ? '' : '<i class="icon icon-play-circle" style=" font-size: 30px;position: absolute;top: 40px;left:80px;color: white;"></i>') +
                    '</a>' +
                    '</div>';
                picStr += pic;
            }
            $(divId).html(picStr);
            $('a.lightbox-toggle').lightbox();
        }
    }

    function updateImg() {

        var imgArr = $("#img_container .pic-class");
        var picsStr = "";
        if (imgArr && imgArr.length > 0) {
            for (var i = 0; i < imgArr.length; i++) {
                picsStr += imgArr[i].src + ","
            }
            picsStr = picsStr.substr(0, picsStr.length - 1);
        }
        var param = {
                'id': curScoreId,
                'pics': picsStr
            }
            // alert("dddd");
        addOrUpdateItem4Common(param, "/q/score/update", queryScores);
        curScoreId = "";
    }

    function deleteScore(id) {
        deleteItem4Common(id, "/q/score/delete/", queryScores);
    }

    function genFlow() {
        var data = {
            "id": $.checkTask.id
        };
        post_common_service("/q/task/getStatusById/", data, function(data) {
            if (data) {
                // console.log(data)
                var flowStr = "";

                var color_t = new $.zui.Color("#63B8FF");
                for (var i in data) {
                    var color = new $.zui.Color(color_t.r - i * 10, color_t.g - i * 10, color_t.b - i * 10);

                    var startcolor = new $.zui.Color(color_t.r - i * 10 + 5, color_t.g - i * 10 + 5, color_t.b - i * 10 + 5);

                    var endcolor = new $.zui.Color(color_t.r - i * 10 - 5, color_t.g - i * 10 - 5, color_t.b - i * 10 - 5);

                    var background = "background:-webkit-gradient(linear, 0 % 0 % , 0 % 100 % , from(" + startcolor.hexStr() + "), to(" + endcolor.hexStr() + "));" +
                        "background:-webkit-linear-gradient(top, " + startcolor.hexStr() + ", " + endcolor.hexStr() + ");" + "background:-moz-linear-gradient(top," + startcolor.hexStr() + "," + endcolor.hexStr() + ");"



                    var str = "";
                    if (i == 0) {
                        str = '<div class="col-sm-2" style="text-align:center;padding:0px;width: 87px;margin-left:-60px;">' +
                            '<img src="/images/start.png" style="width: 28px;right:-1px; position: absolute; top:16px;">' +
                            '</div>'
                    }
                    str +=
                        // '<div class="col-sm-2" style="text-align:center;padding:0px;width: 87px;margin-left:-88px;">' +

                        // '   <img src="/images/end.png" style="width: 35px;margin-left: 36px;margin-top: 25px;">' +
                        // '</div>' +

                        '<div class="col-sm-2" style="text-align:center;padding:0px;width: 140px;margin-bottom: 33px;">' +
                        '<div class="row">' +
                        '   <label>' + data[i].check_status_name + '</label>' +
                        '</div>' +
                        '<div class="row line" style="margin-top: 3px;' + background + '">' +
                        '    <div class="timeline_item_station" style="background:' + color.hexStr() + '"></div>' +
                        '</div>' +
                        '<div class="row" style="margin-top: -5px;">' +
                        '   <label style="    font-weight: 400;">' + data[i].update_time + '</label>' +
                        '</div>' +
                        (i == data.length - 1 ? (
                            '<i class="icon icon-angle-right" style="font-size: 45px;right: -5px;position: absolute;top: 6px;color:' + endcolor.hexStr() + '"></i>'
                            // '   <img src="/images/end.png" style="width: 28px;right:-10px; position: absolute; top:16px;">'
                        ) : "") +
                        '</div>';


                    flowStr += str;


                }
                $("#flow_div").html(flowStr);
            }
        })
    }

    function submitCheck() {
        var param = {
            "id": $.checkTask.id,
            "check_status": 4
        }
        no_return_common_service("/q/task/taskEnd/", param, function(data) {
            layer.msg("提交成功", {
                time: 2000 //20s后自动关闭
            });
            redirectLastPage();
        });

    }

    function submitCheck4Appeal() {
        var appeal_result = 1;
        //询问框
        layer.confirm('该申诉是否成功？', {
            btn: ['成功', '失败'] //按钮
        }, function() {
            appeal_result = 1;
            submitAppealResult(appeal_result);
        }, function() {
            appeal_result = 2;
            submitAppealResult(appeal_result);
        });
    }

    function submitAppealResult(appeal_result) {
        var param = {
            "id": $.checkTask.id,
            "check_status": 14,
            "appeal_id": $.checkTask.appeal.id,
            "appeal_result": appeal_result
        }
        no_return_common_service("/q/task/update/", param, function(data) {
            layer.msg("提交成功", {
                time: 2000 //20s后自动关闭
            });
            redirectLastPage();
        });
    }
    var appealLayer;

    function showAppeal() {
        // appealLayer = showPopup4Common('申诉',saveAppeal,'600px','#appealDetail-div');
        layer.open({
            type: 1,
            area: '600px',
            title: '申诉',
            closeBtn: 1,
            shadeClose: true,
            skin: 'layui-layer-lan',
            content: $('#appealDetail-div'),
            btn: '保存',
            btnAlign: 'c', //按钮居中
            shade: 0, //不显示遮罩
            yes: function(index) {
                saveAppeal();
            }
        });
    }

    function confirmCheck() {
        layer.confirm('是否确认该稽查结果？', {
            btn: ['确认', '取消'], //按钮
            offset: 'auto'
        }, function() {
            var param = {
                "id": $.checkTask.id,
                "check_status": 6
            }
            no_return_common_service("/q/task/update/", param, function(data) {
                layer.msg("确认成功", {
                    time: 2000 //20s后自动关闭
                });
                redirectLastPage();
            });
        }, function(index) {
            layer.close(index);
        });

    }

    function confirmCheck4Appeal() {
        layer.confirm('是否确认该申诉结果？', {
            btn: ['确认', '取消'], //按钮
            offset: 'auto'
        }, function() {
            var param = {
                "id": $.checkTask.id,
                "check_status": 16
            }
            no_return_common_service("/q/task/update/", param, function(data) {
                layer.msg("确认成功", {
                    time: 2000 //20s后自动关闭
                });
                redirectLastPage();
            });
        }, function(index) {
            layer.close(index);
        });

    }

    function showAssign() {
        showPopup4Common('分配稽查员', function() {
            saveAssign();
        }, '400px', '#chooseCheckman-div');
        setCheckmanSelect('#choseCheckmanList', null, $.checkTask.checkman,
            function() {
                $('#choseCheckmanList').chosen({
                    // width:'200px',
                    height: '100px',
                    no_results_text: '没有找到', // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
                    search_contains: true // 从任意位置开始检索
                });
            });

    }

    function saveAssign() {
        var param = {
            "id": $.checkTask.id,
            "recheckman": $('#choseCheckmanList').val(),
            "check_status": 12
        }
        no_return_common_service("/q/task/update/", param, function(data) {
            layer.msg("分配成功", {
                time: 2000 //20s后自动关闭
            });
            redirectLastPage();
        });
    }

    function back2Check() {
        //退回到待提交页面
        var param = {
            "id": $.checkTask.id,
            "check_status": 3,
            "check_status_name": "退回"
        }
        no_return_common_service("/q/task/update/", param, function(data) {
            layer.msg("退回成功", {
                time: 2000 //20s后自动关闭
            });
            redirectLastPage();
        });
    }

    function back2Confirm() {
        //退回到待提交页面
        var param = {
            "id": $.checkTask.id,
            "check_status": 5,
            "check_status_name": "退回重新确认"
        }
        no_return_common_service("/q/task/update/", param, function(data) {
            layer.msg("退回成功", {
                time: 2000 //20s后自动关闭
            });
            redirectLastPage();
        });
    }

    function back2AppealCheck() {
        //退回到待提交页面
        var param = {
            "id": $.checkTask.id,
            "check_status": 13,
            "check_status_name": "退回"
        }
        no_return_common_service("/q/task/update/", param, function(data) {
            layer.msg("退回成功", {
                time: 2000 //20s后自动关闭
            });
            redirectLastPage();
        });
    }
</script>