增加称重页面3-调整页面布局UI

czt

2026-02-26 c7e17f74474198316a39b9bf7afde5d403a49c56

增加称重页面3-调整页面布局UI

 fzzy-igdss-web/src/main/java/com/fzzy/inout/InoutController.java

@@ -300,6 +300,9 @@
        if ("2".equals(viewTag)) {
            viewStr = prefix + "/weight2";
        }
        if ("3".equals(viewTag)) {
            viewStr = prefix + "/weight3";
        }
        return viewStr;
    }


 fzzy-igdss-web/src/main/resources/static/inout/inout-weight3.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,694 @@
//称重-包括空车和满车称重
var layer;
var form;
var table;
var page = 1;
var limit = 10;
var recordData = null;// ä¸šåŠ¡æ•°æ®ä¿¡æ¯
var snapData;//系统抓拍对象信息
var timerWeight;
var curProgress = null;

$(function () {
    layui.use(['layer', 'laydate', 'form', 'table', 'util'], function () {
        layer = layui.layer;
        form = layui.form;
        table = layui.table;
        layui.laydate.render({
            elem: '#test1',
            theme: '#7b8e9f'
        });

        //监听选择数据事件
        table.on('tool(tableListProgressData)', function (obj) {
            var data = obj.data;
            if (obj.event === 'select') {
                //清空表单
                resetForm();
                flushData(data.id, null);
                // $("#listProgressData").css("display", "none");
                // layer.closeAll();
            }
        });


        //监听仓库选择,选择后自动调用仓库的粮食品种信息
        form.on('select(select_depotId)', function (obj) {
            updateFoodVarietyByDepot(obj.value);
        })

        selectByHand();
    });

    //显示流程环节
    updateEditAndProgress();

    // ç›‘听重量变化
    $(".weight").blur(function () {
        deAuto(this.name);
    });
});

window.onload = function () {
    //自动连接地磅信息，2.5秒获取一次地磅重量信息
    clearInterval(timerWeight);
    timerWeight = setInterval(function () {
        flushWeight();
    }, 2500);

    // åŠ è½½è§†é¢‘
    initVideo(snapDto1, snapDto2, snapDto3);

    //设置地磅
    $("#scaleName").val(weightDto.sort);

    //监听地磅选择
    $("#scaleName").change(function () {
        layer.confirm('调整地磅需重新加载页面，确定调整？', {
            btn: ['确定', '取消']
        }, function () {
            updateWeight();
        });
    });
};

//根据选择的仓库信息,更新粮食品种
function updateFoodVarietyByDepot(selectId) {
    var selectDepot;
    $.each(listDepot, function (index, data) {
        if (data.id === selectId) {
            selectDepot = data;
            return false;
        }
    });

    if (selectDepot) {
        form.val("form-data", {
            foodVariety: selectDepot.foodVariety
        });
        form.render();
    }
}

/**
 * ç§°é‡åŠæŠ“拍
 */
function weight() {
    // å¦‚果是空车称重
    if (InoutProgress.WEIGHT_EMPTY === curProgress) {
        form.val("form-data", {
            emptyWeight: weightDto.weight
        });
        form.render();
    }
    // å¦‚果是满车称重
    if (InoutProgress.WEIGHT_FULL === curProgress) {
        form.val("form-data", {
            fullWeight: weightDto.weight
        });
        form.render();
    }

    var data = form.val("form-data");
    if (!data.plateNum) {
        alertError("提示：填写登记车牌信息");
        return;
    }

    // ç‚¹å‡»ç§°é‡è‡ªåŠ¨è°ƒç”¨æŠ“拍
    snapData = {
        companyId: companyId,
        deptId: deptId,
        progress: curProgress,
        bizType: type,
        id1: snapDto1.id,
        id2: snapDto2.id,
        id3: snapDto3.id,
        sort: $("#scaleName").val()
    };
    if (!gatewaySer) {
        layer.msg("未获取到库区网关信息，抓图失败！");
        return;
    }
    var url = "http://" + gatewaySer.ip + ":" + gatewaySer.apiPort + gatewaySer.snapUrl;
    //当前AJAX服务为同步服务，返回数据包装照片信息
    var index = layer.load();
    $.ajax({
        sync: false,
        type: "POST",
        url: url,
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(snapData),
        success: function (result) {
            layer.close(index);
            if (result.code != "0000") {
                alertError(result.msg);
            } else {
                layer.msg("抓拍成功");
                snapData = result.data;
            }
        },
        error: function () {
            layer.close(index);
            alertError("后台调用截图失败，请重新尝试");
        }
    });
}

/**
 * ç§°é‡æäº¤
 */
function submit() {

    var data = form.val("form-data");
    if (!data.depotId) {
        alertError("提示：装卸仓库必填");
        return;
    }
    if (!data.customerName) {
        alertError("提示：通知单信息必填");
        return;
    }
    if (!data.foodVariety) {
        alertError("提示：粮食品种必填");
        return;
    }

    // æ ¡éªŒ-入库满车称重
    if (InoutProgress.WEIGHT_FULL === curProgress) {
        if (data.fullWeight <= 0.0) {
            alertError("提示：满车称重信息必填");
            return;
        }
    }
    if (InoutProgress.WEIGHT_EMPTY === curProgress) {
        if (data.emptyWeight <= 0.0) {
            alertError("提示：空车称重信息必填");
            return;
        }
    }

    if(recordData){
        //合并数据
        Object.assign(recordData, data);
    }else {
        recordData = data;
    }
    recordData.progress = curProgress;

    // èŽ·å–照片
    var files = [{
        fileName: snapData.fileName1
    }, {
        fileName: snapData.fileName2
    }, {
        fileName: snapData.fileName3
    }];
    recordData.files = files;
    var index = layer.load();
    $.ajax({
        type: "POST",
        url: "/basic/inout/submit-weight",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(recordData),
        success: function (result) {
            if (result.code != "0000") {
                alertError(result.msg);
            } else {
                selectByHand();
                notify("数据提交成功", result.data);
                //第一次称重后，刷新页面
                if (recordData.recordWeight <= 0.0) {
                    resetForm();
                }
            }
            layer.close(index);
        },
        error: function () {
            layer.close(index);
            alertError("提交失败，请重新尝试");
        }
    });
}

/**
 * ç‚¹å‡»æ‰“印，系统判断是否已经执行完成，如果已经完成，直接打印，如果未完成则先执行完成
 */
function printBill() {
    if (!recordData) {
        alertError("没有获取到业务数据，打印被拒绝！");
        return;
    }

    var index = layer.load();
    $.ajax({
        type: "POST",
        url: "/basic/print/bill-weight",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(recordData),
        success: function (result) {
            layer.close(index);
            if (result.code != "0000") {
                alertError(result.msg);
            } else {
                layer.msg("开始渲染打印单……");
                printWeight(result.data);
            }
        },
        error: function () {
            layer.close(index);
            alertError("获取打印模版失败，请联系管理员查看原因");
        }
    });
}

/**
 * åœ°ç£…数据刷新
 */
function flushWeight() {
    var ip = "127.0.0.1";
    if (weightDto.ip) {
        ip = weightDto.ip;
    }
    var port = "9111";
    if (weightDto.port) {
        port = weightDto.port;
    }
    var sn = "WEIGHT";
    if (weightDto.sn) {
        sn = weightDto.sn;
    }
    var url = "http://" + ip + ":" + port + "/" + sn;
    $.ajax({
        type: "GET",
        async: true,
        timeout: 2000,
        url: url,
        data: {},
        dataType: "json",
        success: function (json) {
            var data = json.content;
            if (!data) data = 0.0;
            weightDto.weight = data;
            $("#weightValue").text(data);
            $("#img_scale_statule").attr("src", "/img/web/inout/icon-gree.png");
        },
        error: function () {
            weightDto.weight = 0.0;
            $("#weightValue").text("0.0");
            $("#img_scale_statule").attr("src", "/img/web/inout/icon-red.png");
        }
    });
}

/**
 * è¯»å–身份证
 */
function flushIdCard() {
    var index = layer.load();
    $.ajax({
        type: "GET",
        async: true,
        url: "http://127.0.0.1:9111/IDCARD",
        data: {},
        dataType: "json",
        success: function (json) {
            layer.close(index);
            var data = json;
            if (data.code === "200" || data.code == 200) {
                // ä¸´æ—¶èµ‹å€¼
                $("#userName").val(data.cnName);
                $("#userAddress").val(data.address);
                $("#userId").val(data.idNum);
            } else {
                alertError("没有获取到身份证信息！");
                return;
            }
        },
        error: function () {
            layer.alert("身份证读取失败！", {
                offset: ['300px', '300px']
            });
            layer.close(index);
        }
    });
}

/**
 * è¯»å–车牌号
 */
function flushPlateNum() {
    if (!gatewaySer) {
        layer.msg("未获取到库区网关信息，车牌读取失败！");
        return;
    }
    var url = "http://" + gatewaySer.ip + ":" + gatewaySer.apiPort + gatewaySer.plateNumUrl;
    var param = JSON.stringify(snapDto1);
    var index = layer.load();
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: param,
        success: function (result) {
            if (result.code != "0000") {
                alertError(result.msg);
            } else {
                $("#plateNum").val(result.data.plateNum);
            }
            layer.close(index);
        },
        error: function () {
            layer.close(index);
            alertError("车牌识别失败！");
        }
    });
}

/**
 * æ‰‹åŠ¨é€‰æ‹©ï¼ŒèŽ·å–待称重的数据，弹出选择
 */
// function selectByHand() {
//     var param = {
//         deptId: deptId,
//         type: type,
//         timer: Math.random()
//     };
//     $.ajax({
//         type: "POST",
//         url: "/basic/inout/list-weight-data",
//         dataType: "json",
//         contentType: "application/json;charset=UTF-8",
//         data: JSON.stringify(param),
//         success: function (result) {
//             if (result.code != "0000") {
//                 layer.msg(result.msg);
//             } else {
//                 renderTableProgressData(result.data);
//             }
//         },
//         error: function () {
//             layer.msg("系统获取数据出现异常，重新尝试");
//         }
//     });
// }

/**
 * è¡¨å•æ•°æ®é‡ç½®
 */
function resetForm() {

    $("#form-data")[0].reset();
    form.render();
    recordData = null;
    curProgress = null;
    weightDto.weight = 0.0;
    $("#weightValue").text("0.0");
    $("#img_scale_statule").attr("src", "/img/web/inout/icon-red.png");

    $("#text-param").val(null);
}

/**
 * é¡µé¢åˆ·æ–°
 */
function flushPage() {
    layer.confirm('确定要刷新页面吗？', {icon: 3, title: '提示'}, function (index) {
        resetForm();
        selectByHand();
        layer.close(index);
    });
}

/**
 * æŸ¥è¯¢æ•°æ®
 * @param id
 * @param plateNum
 */
function flushData(id, plateNum) {
    var index = layer.load();
    var param = {
        type: type,
        progress: curProgress,
        id: id,
        plateNum: plateNum
    };
    $.ajax({
        type: "POST",
        url: "/basic/inout/inout-query",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(param),
        success: function (result) {
            layer.close(index);
            if (result.code != "0000") {
                notifyProgress(result.msg, result.data);
            } else {
                recordData = result.data;
                curProgress = recordData.progress;
                // è¿”回的数据进行赋值
                form.val("form-data", recordData);
                form.render();

                updateEditAndProgress();
            }
        },
        error: function () {
            layer.close(index);
            alertError("查询失败，请重新尝试");
        }
    });
}

/**
 * æ ¹æ®ä¸šåŠ¡æ•°æ®æ›´æ–°é¡µé¢ä¸­çš„状态
 */
function updateEditAndProgress() {
    //当前流程节点
    if (curProgress == null) {
        if (type === "IN") {
            curProgress = "WEIGHT_FULL";
        }
        if (type === "OUT") {
            curProgress = "WEIGHT_EMPTY";
        }
    }
    //显示当前流程
    if (type === "IN") {
        $("#rk-progress-register").addClass("active");
        if (curProgress === InoutProgress.WEIGHT_FULL) {
            $("#rk-progress-fullWeight").addClass("active");
            $("#rk-progress-hand").removeClass("active");
            $("#rk-progress-emptyWeight").removeClass("active");

            //满车重量可编辑
            $("#fullWeight").removeClass("rkbk-search-input");
            $("#fullWeight").attr("disabled", false);

            //空车重量不能编辑
            $("#emptyWeight").addClass("rkbk-search-input");
            $("#emptyWeight").attr("disabled", true);
        }
        if (curProgress === InoutProgress.WEIGHT_EMPTY) {
            $("#rk-progress-fullWeight").addClass("active");
            $("#rk-progress-hand").addClass("active");
            $("#rk-progress-emptyWeight").addClass("active");

            //满车重量不能编辑
            $("#fullWeight").addClass("rkbk-search-input");
            $("#fullWeight").attr("disabled", true);

            //空车重量可编辑
            $("#emptyWeight").removeClass("rkbk-search-input");
            $("#emptyWeight").attr("disabled", false);
        }
    }
    if (type === "OUT") {
        $("#ck-progress-register").addClass("active");
        if (curProgress === InoutProgress.WEIGHT_EMPTY) {
            $("#ck-progress-emptyWeight").addClass("active");
            $("#ck-progress-hand").removeClass("active");
            $("#ck-progress-fullWeight").removeClass("active");

            //满车重量不能编辑
            $("#fullWeight").addClass("rkbk-search-input");
            $("#fullWeight").attr("disabled", true);

            //空车重量可编辑
            $("#emptyWeight").removeClass("rkbk-search-input");
            $("#emptyWeight").attr("disabled", false);
        }
        if (curProgress === InoutProgress.WEIGHT_FULL) {
            $("#ck-progress-emptyWeight").addClass("active");
            $("#ck-progress-hand").addClass("active");
            $("#ck-progress-fullWeight").addClass("active");

            //满车重量可编辑
            $("#fullWeight").removeClass("rkbk-search-input");
            $("#fullWeight").attr("disabled", false);

            //空车重量不能编辑
            $("#emptyWeight").addClass("rkbk-search-input");
            $("#emptyWeight").attr("disabled", true);
        }
    }
    //流程显示
    if (inoutProgress) {
        if (inoutProgress.indexOf("REGISTER") === -1) {
            $("#rk-progress-register").css("display", "none");
            $("#ck-progress-register").css("display", "none");
        }
        if (inoutProgress.indexOf("WEIGHT_FULL") === -1) {
            $("#rk-progress-fullWeight").css("display", "none");
            $("#ck-progress-fullWeight").css("display", "none");
        }
        if (inoutProgress.indexOf("HANDLE") === -1) {
            $("#rk-progress-hand").css("display", "none");
            $("#ck-progress-hand").css("display", "none");
        }
        if (inoutProgress.indexOf("WEIGHT_EMPTY") === -1) {
            $("#rk-progress-emptyWeight").css("display", "none");
            $("#ck-progress-emptyWeight").css("display", "none");
        }
        if (inoutProgress.indexOf("CARD_BACK") === -1) {
            $("#rk-progress-cardBack").css("display", "none");
            $("#ck-progress-cardBack").css("display", "none");
        }

        if (type === "IN") {
            $("#rk_progress").css("display", "block");
            $("#ck_progress").css("display", "none");
        }
        if (type === "OUT") {
            $("#ck_progress").css("display", "block");
            $("#rk_progress").css("display", "none");
        }
    }
    //根据配置信息设置地磅是否可编辑
    if (weightEditTag && weightEditTag == 'N') {
        $("#fullWeight").addClass("rkbk-search-input");
        $("#fullWeight").attr("disabled", true);

        $("#emptyWeight").addClass("rkbk-search-input");
        $("#emptyWeight").attr("disabled", true);
    }
}

/**
 * å¼¹å‡ºæé†’框
 * @param msg æé†’信息
 * @param data æ•°æ®ä¿¡æ¯ï¼Œå¯èƒ½ä¸ºç©º
 */
function notify(msg, data) {
    if (data) {
        //赋值
        $("#resultMsg").text(msg);
        $("#resultUserName").text(data.userName);
        $("#resultPlateNum").text(data.plateNum);
        if ("IN" == data.type) {
            $("#resultType").text("入库-" + INOUT_PROGRESS_MSG(data.progress));
        } else {
            $("#resultType").text("出库-" + INOUT_PROGRESS_MSG(data.progress));
        }
        $("#resultIntelCard").text(data.intelCard);

        layer.open({
            type: 1,
            offset: ['150px', '200px'],
            area: '450px;',
            shade: 0.8,
            id: 'dialog_notify_info',
            btn: ['确定'],
            content: $('#dialog-from-notify'),
            yes: function (index) {
                layer.closeAll();
            }
        });
    } else {
        layer.alert(msg, {offset: ['300px', '300px']});
    }
}

/**
 * è½¦è¾†é€‰æ‹©å¼¹çª—
 * @param list
 */
function selectByHand() {
    var param = {
        deptId: deptId,
        type: type,
        timer: Math.random()
    };
    // æ¸…空数据
    $("#tableListProgressData").empty();
    table.render({
        elem: '#tableListProgressData',
        url: '/basic/inout/page-inout-data',
        page: false,
        limit: 1000,
        even: true,
        method: 'POST',
        contentType: "application/json;charset=UTF-8",
        cols: [[
            {
                type: 'numbers',
                title: '序号',
                width: '15%'
            }, {
                field: 'id',
                title: '单据号',
                align: 'center',
                width: '25%'
            }, {
                field: 'userName',
                title: '承运人',
                align: 'center',
                width: '15%'
            }, {
                field: 'plateNum',
                title: '车牌号',
                align: 'center',
                width: '15%'
            }, {
                field: 'progress',
                title: '状态',
                align: 'center',
                width: '15%',
                style: 'font-weight: bold',
                templet: function (item) {
                    return INOUT_PROGRESS_MSG(item.progress);
                }
            }, {
                fixed: 'right',
                title: '选择车辆',
                align: 'center',
                width: '15%',
                toolbar: '#barSelectProgress'
            }
        ]],
        where: param,
        parseData: function (res) {
            if ("0000" === res.code) {
                return {
                    "code": "0",
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.records
                }
            } else {
                return {
                    "code": "1",
                    "msg": res.msg
                }
            }
        }
    });
    $("thead tr").css({
        "border-bottom": "2px solid #53adce",
        "background": "#eff4f6"
    });
}

 fzzy-igdss-web/src/main/resources/templates/inout/weight3.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,834 @@
<!DOCTYPE html>
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>出入库管理-入库称重</title>

    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/inout/inout-style.css}">

    <!--使用打印插件 éšè—å½“前插件 -->
    <script th:src="@{/js/plugins/lodop/LodopFuncs.js}"></script>

    <style>
        .kccz-r-btnbox {
            width: 86px !important;
        }

        .layui-table-body {
            max-height: 400px;
        }

        .kccz-r-btn {
            width: 86px !important;
        }

        #text-param {
            font-size: 14px;
            color: red;
            padding-left: 10px;
        }

        .display-none {
            display: none;
        }

        .cursor {
            cursor: pointer;
        }

        .kccz-czxx-dl dt {
            width: 25px;
            height: 24px;
            color: #000;
            font-size: 18px;
        }

        .kccz-left-box2 {
            height: 570px;
        }

        .color-red {
            color: red !important;
        }

        .layui-table td {
            font-weight: bold;
        }

        .layui-select-disabled .layui-disabled {
            color: #000 !important;
        }

        .depot-food input {
            line-height: 34px;
            padding-right: 10px;
            font-size: 16px;
            color: #666;
            background: #eff4f6;
        }

        .rk-step-wrap {
            padding: 0px;
            border-bottom: 0px;
            text-align: center;
        }

        .rkbk-quick {
            margin-top: 15px !important;
        }

        .kccz-con {
            margin: 10px 0px;
        }

        .border-no {
            border: 0px;
        }

        .qyzj-btnbox {
            margin-top: 10px;
        }

        .kccz-data-btnbox {
            min-height: 38px;
            padding-top: 2px;
        }

        .layui-layer-title {
            font-weight: bold;
        }

        .rkbk-search-btn {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
        }

        .r-360 {
            right: 360px;
        }

        .r-240 {
            right: 240px;
        }

        .r-120 {
            right: 120px;
        }

        .rkbk-search-input {
            background: #e7eaec !important;
        }

        #scaleName {
            width: 130px;
            height: 28px;
        }

        .layui-table, .layui-table-view {
            margin: 0 0;
        }

        .layui-table-body {
            max-height: 430px;
        }

        .video {
            width: 100%;
            height: 100%;
        }

        .layui-form-radio {
            margin: unset;
            margin-top: 5px;
            padding-right: unset;
        }

        .rk-step li {
            width: 60px;
            height: 40px;
            display: inline-block;
            margin: 0 20px;
            position: relative;
        }

        .kccz-r-con {
            height: 160px;
            position: relative;
        }

        .kccz-r-vedio {
            width: 100%;
            height: 100%;
            background: #5f5f5f;
        }

        .kccz-r-item {
            height: 210px;
            width: 33.333%;
            float: left;
            background: unset;
        }
        .kccz-left {
            width: 52%;
        }
        .kccz-right {
            width: 47.4%;
        }
        .kccz-r-box {
            padding: 0 5px;
        }
        .rkbk-quick-btn {
            height: 55px;
            min-width: 100px;
            display: inline-block;
            line-height: 40px;
            font-size: 20px;
            margin-top: -15px;
        }
    </style>

</head>

<body>

<div class="l-container layui-clear">
    <div class="rk-main">
        <div class="qyzj-btnbox layui-clear">

            <div class="rkbk-quick fl">
                <button id="btn-weight" class="rkbk-quick-btn layui-btn btn-blue"
                        onclick="weight()">
                    <i><img th:src="@{/img/web/inout/icon-chengzhong.png}"/></i>步骤1：称重
                </button>
                <button id="btn-submit"
                        class="rkbk-quick-btn layui-btn btn-green" onclick="submit()">
                    <i><img th:src="@{/img/web/inout/icon-ok.png}"/></i>步骤2：提交
                </button>
                <button id="btn-printBill"
                        class="rkbk-quick-btn layui-btn btn-blue" onclick="printBill()">
                    <i><img th:src="@{/img/web/inout/icon-dayin.png}"/></i>打印磅单
                </button>
                <button class="rkbk-quick-btn layui-btn btn-violet"
                        onclick="flushPage()">
                    <i><img th:src="@{/img/web/inout/icon-shuaxin2.png}"/></i>刷新页面
                </button>
            </div>
            <!-- æµç¨‹å¼•å¯¼ -->
            <div class="rk-step-wrap fr">
                <ul class="rk-step" id="rk_progress" style="display: none;">
                    <li id="rk-progress-register" class="rk-step-first">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-dengji.png}"/>
                        </span>
                        <p>入库登记</p>
                    </li>
                    <li id="rk-progress-fullWeight">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-chengzhong.png}"/>
                        </span>
                        <p>满车称重</p>
                    </li>
                    <li id="rk-progress-hand">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-xiehuo.png}"/>
                        </span>
                        <p>入库值仓</p>
                    </li>
                    <li id="rk-progress-emptyWeight">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-chengzhong.png}"/>
                        </span>
                        <p>空车称重</p>
                    </li>
                    <li id="rk-progress-cardBack">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-banli.png}"/>
                        </span>
                        <p>离库确认</p>
                    </li>
                </ul>
                <ul class="rk-step" id="ck_progress" style="display: none;">
                    <li id="ck-progress-register" class="rk-step-first">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-dengji.png}"/>
                        </span>
                        <p>出库登记</p>
                    </li>
                    <li id="ck-progress-emptyWeight">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-chengzhong.png}"/>
                        </span>
                        <p>空车称重</p>
                    </li>
                    <li id="ck-progress-hand">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-xiehuo.png}"/>
                        </span>
                        <p>出库值仓</p>
                    </li>
                    <li id="ck-progress-fullWeight">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-chengzhong.png}"/>
                        </span>
                        <p>满车称重</p>
                    </li>
                    <li id="ck-progress-cardBack">
                        <span class="rk-step-span">
                            <img th:src="@{/img/web/inout/icon-banli.png}"/>
                        </span>
                        <p>离库确认</p>
                    </li>
                </ul>
            </div>
            <!-- æµç¨‹å¼•å¯¼EDN -->
        </div>
        <div class="kccz-con">
            <div class="kccz-left fl">
                <div class="kccz-left-box1 radius-6">
                    <div class="rkbk-tit">
                        <i></i>
                        <div>
                            <h3 style="width: 150px; float: left;">称重信息</h3>
                            <div style="float: right;">
                                <div class="kccz-czxx-left fl">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">当前地磅</label>
                                        <div class="layui-input-block">
                                            <select name="depotId" id="scaleName" lay-filter="select_scaleName">
                                                <option th:each="dto,weightSet:${listWeight}"
                                                        th:value="${dto.sort}" th:text="${dto.name}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="kccz-czxx-right fr">
                                    <dl class="kccz-czxx-dl" style="padding-left: 15px;">
                                        <dt>
                                            <i><img id="img_scale_statule"
                                                    th:src="@{/img/web/inout/icon-red.png}"/></i>
                                        </dt>
                                    </dl>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="kccz-czxx-wrap">
                        <div class="kccz-czxx-num">
                            <span id="weightValue">0.00</span><em>KG</em>
                        </div>

                    </div>
                    <!--kccz-czxx-wrap end-->

                </div>
                <!--kccz-left-box1 end-->

                <div class="kccz-left-box2 mt-10 radius-6">
                    <div class="rkbk-tit">
                        <i></i>
                        <h3>业务数据<span id="text-param"></span></h3>
                    </div>
                    <div class="kccz-data-form layui-row">
                        <form class="layui-form" action="" id="form-data"
                              lay-filter="form-data">
                            <div class="layui-form-item display-none">
                                <label class="layui-form-label">隐藏-单据号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="id" autocomplete="off"
                                           class="layui-input rkbk-search-input">
                                </div>
                            </div>
                            <div class="layui-form-item display-none">
                                <label class="layui-form-label">隐藏-流程节点</label>
                                <div class="layui-input-block">
                                    <input type="text" name="progress" autocomplete="off"
                                           class="layui-input rkbk-search-input">
                                </div>
                            </div>
                            <div class="layui-form-item display-none">
                                <label class="layui-form-label">隐藏-通知单号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="noticeId" autocomplete="off"
                                           class="layui-input rkbk-search-input">
                                </div>
                            </div>
                            <div class="layui-form-item display-none">
                                <label class="layui-form-label">隐藏-产地</label>
                                <div class="layui-input-block">
                                    <input type="text" name="foodLocationId"
                                           autocomplete="off" class="layui-input rkbk-search-input">
                                </div>
                            </div>
                            <div class="layui-form-item display-none">
                                <label class="layui-form-label">隐藏-类型</label>
                                <div class="layui-input-block">
                                    <input type="text" name="type" th:value="${type}"
                                           autocomplete="off" class="layui-input rkbk-search-input">
                                </div>
                            </div>

                            <div class="layui-col-xs8">
                                <div class="layui-form-item">
                                    <label class="layui-form-label color-red">通知单</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="customerName" placeholder="请选择"
                                               autocomplete="off" class="layui-input" disabled="disabled"> <em
                                            class="kccz-data-dw cursor" onclick="showNotice()">……</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" id="depotIdLabel">装卸仓库</label>
                                    <div class="layui-input-block">
                                        <select name="depotId" id="depotId" lay-filter="select_depotId">
                                            <option value=""></option>
                                            <option th:each="depot,depotSet:${listDepot}"
                                                    th:value="${depot.id}" th:text="${depot.name}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label color-red">毛重(满车)</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="fullWeight" id="fullWeight" autocomplete="off"
                                               placeholder="地磅自动带入" class="layui-input weight rkbk-search-input"
                                               disabled>
                                        <em
                                                class="kccz-data-dw">KG</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label color-red">皮重(空车)</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="emptyWeight" id="emptyWeight" autocomplete="off"
                                               placeholder="地磅自动带入" class="layui-input weight rkbk-search-input"
                                               disabled>
                                        <em
                                                class="kccz-data-dw">KG</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">净&nbsp;&nbsp;&nbsp;&nbsp;重</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="netWeight" autocomplete="off"
                                               placeholder="自动计算" class="layui-input rkbk-search-input"
                                               disabled> <em class="kccz-data-dw">KG</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">粮食品种</label>
                                    <div class="layui-input-block">
                                        <select name="foodVariety" id="foodVariety">
                                            <option value=""></option>
                                            <option th:each="dic,dicSet:${listFoodVariety}"
                                                    th:value="${dic.dictValue}" th:text="${dic.dictLabel}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">æ°´&nbsp;&nbsp;&nbsp;&nbsp;分</label>
                                    <div class="layui-input-block">
                                        <input id="perWet" type="text" name="perWet" autocomplete="off"
                                               placeholder="请输入" class="layui-input weight"> <em
                                            class="kccz-data-dw">%</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">扣&nbsp;&nbsp;&nbsp;&nbsp;重</label>
                                    <div class="layui-input-block">
                                        <input id="deOther" type="text" name="deOther" autocomplete="off"
                                               placeholder="请输入" class="layui-input weight"> <em
                                            class="kccz-data-dw">KG</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">单&nbsp;&nbsp;&nbsp;&nbsp;ä»·</label>
                                    <div class="layui-input-block">
                                        <input id="price" type="text" name="price" autocomplete="off"
                                               placeholder="请输入" class="layui-input weight"> <em
                                            class="kccz-data-dw">元</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">杂&nbsp;&nbsp;&nbsp;&nbsp;è´¨</label>
                                    <div class="layui-input-block">
                                        <input id="perImpurity" type="text" name="perImpurity" autocomplete="off"
                                               placeholder="请输入" class="layui-input weight"> <em
                                            class="kccz-data-dw">%</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4 display-none">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">入库重量</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="recordWeight" placeholder="自动计算"
                                               autocomplete="off" class="layui-input rkbk-search-input"
                                               disabled> <em class="kccz-data-dw">KG</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">结算重量</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="settleWeight" placeholder="自动计算"
                                               autocomplete="off" class="layui-input rkbk-search-input"
                                               disabled> <em class="kccz-data-dw">KG</em>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注说明</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="remarks" placeholder="请输入内容"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <div class="line-container" style="margin: 10px 0 0 0;">
                                    <div class="line"></div>
                                    <div class="line-text" style="font-size: 16px">以下为登记信息</div>
                                    <div class="line"></div>
                                </div>

                            </div>
                            <div class="layui-col-xs12">
                                <div style="height: 40px">
                                    <input type="button" value="读身份证"
                                           style="height: 34px;line-height: 34px;right: 120px;"
                                           class="rkbk-search-btn layui-btn" onclick="flushIdCard()">
                                    <input type="button" value="读车牌" style="height: 34px;line-height: 34px"
                                           class="rkbk-search-btn layui-btn" onclick="flushPlateNum()">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label color-red">承运人</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="userName" placeholder="请输入" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label color-red">身份证号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="userId" id="userId" placeholder="请输入"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label color-red">车牌号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="plateNum" id="plateNum" placeholder="请输入"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="userContact" id="userContact" placeholder="请输入"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs8">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="userAddress" id="userAddress" placeholder="请输入"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-xs12" style="padding-left: 50px;color: #2ab5ad;">
                                è¯´æ˜Žï¼š
                                <span style="color: #2ab5ad;">
                                        1. å‡€é‡=毛重-皮重；入库重量=结算重量=净重-扣重；
                                    </span>
                                <br>
                                <span style="padding-left: 46px;color: #2ab5ad;">
                                        2. æµç¨‹ä¸­è½¦è¾†å¯ç‚¹å‡»è½¦è¾†é€‰æ‹©ï¼Œè¿›è¡Œç§°é‡ï¼›æœªç™»è®°è½¦è¾†ï¼Œå¯å¡«å†™ç›¸å…³ä¿¡æ¯ï¼Œç›´æŽ¥ç§°é‡ï¼›
                                    </span>
                            </div>
                        </form>
                    </div>
                </div>
                <!--kccz-left-box2 end-->

            </div>
            <!--kccz-left end-->
            <div class="kccz-right fr">
                <div class="kccz-left-box2 radius-6" style="height: 515px;padding: 1px 5px 0px 10px;">
                    <div class="rkbk-tit" style="margin-left: 15px;">
                        <i></i>
                        <h3>称重数据<span></span></h3>
                    </div>
                    <!-- æµç¨‹æ•°æ®ä¿¡æ¯ -->
                    <div class="layui-tab-content" id="listProgressData" style="padding: 0">
                        <table class="layui-table tableListProgressData" id="tableListProgressData"
                               lay-filter="tableListProgressData">
                            <thead>
                            <tr class="qyzj-table-tit">
                                <th>单据号</th>
                                <th>承运人</th>
                                <th>车牌号</th>
                                <th>状态</th>
                                <th>选择车辆</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="kccz-left-box2 mt-10 radius-6" style="height: 210px;padding: 5px;">
                    <div class="kccz-r-item radius-6">
                        <div class="kccz-r-box">
                            <div class="rkbk-tit">
                                <i></i>
                                <h3>过程视频1</h3>
                            </div>
                            <div class="kccz-r-con">
                                <div class="kccz-r-vedio" id="kccz-r-video1">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--kccz-r-item end-->

                    <div class="kccz-r-item radius-6">
                        <div class="kccz-r-box">
                            <div class="rkbk-tit">
                                <i></i>
                                <h3>过程视频2</h3>
                            </div>
                            <div class="kccz-r-con">
                                <div class="kccz-r-vedio" id="kccz-r-video2">

                                </div>
                            </div>
                        </div>
                    </div>
                    <!--kccz-r-item end-->

                    <div class="kccz-r-item radius-6">
                        <div class="kccz-r-box">
                            <div class="rkbk-tit">
                                <i></i>
                                <h3>过程视频3</h3>
                            </div>
                            <div class="kccz-r-con">
                                <div class="kccz-r-vedio" id="kccz-r-video3">

                                </div>
                            </div>
                        </div>
                    </div>
                    <!--kccz-r-item end-->
<!--                    <div class="kccz-r-item radius-6">-->
<!--                        <div class="kccz-r-box">-->
<!--                            <div class="rkbk-tit">-->
<!--                                <i style="margin: 8px 3px 0 3px"></i>-->
<!--                                <h3>车牌识别视频</h3>-->
<!--                            </div>-->
<!--                            <div class="kccz-r-con">-->
<!--                                <div class="kccz-r-vedio" id="kccz-r-video1">-->
<!--                                </div>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->
<!--                    &lt;!&ndash;kccz-r-item end&ndash;&gt;-->

<!--                    <div class="kccz-r-item radius-6 mt-10">-->
<!--                        <div class="kccz-r-box">-->
<!--                            <div class="rkbk-tit">-->
<!--                                <i style="margin: 8px 3px 0 3px"></i>-->
<!--                                <h3>车顶抓拍视频</h3>-->
<!--                            </div>-->
<!--                            <div class="kccz-r-con">-->
<!--                                <div class="kccz-r-vedio" id="kccz-r-video2">-->


<!--                                </div>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->
<!--                    &lt;!&ndash;kccz-r-item end&ndash;&gt;-->

<!--                    <div class="kccz-r-item radius-6 mt-10">-->
<!--                        <div class="kccz-r-box">-->
<!--                            <div class="rkbk-tit">-->
<!--                                <i style="margin: 8px 3px 0 3px"></i>-->
<!--                                <h3>车尾抓拍视频</h3>-->
<!--                            </div>-->
<!--                            <div class="kccz-r-con">-->
<!--                                <div class="kccz-r-vedio" id="kccz-r-video3">-->


<!--                                </div>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->
                </div>

                <!--kccz-r-item end-->

            </div>
        </div>
        <!--kccz-con end-->

    </div>
    <!--rk-main end-->

</div>
<!--l-container end-->

<script th:inline="javascript">
    //流程环节
    var inoutProgress = [[${inoutProgress}]];
    var progress = [[${progress}]];
    var deptId = [[${deptId}]];
    var listDepot = [[${listDepot}]];
    var weightEditTag = [[${weightEditTag}]];
    //userId
    var userId = [[${loginUser.loginName}]];
    //出入库类型
    var type = [[${type}]];
    var companyId = [[${loginUser.companyId}]];

    //地磅信息
    var weightDto = [[${weightDto}]];

    //过程摄像头
    var snapDto1 = [[${snapDto1}]];
    var snapDto2 = [[${snapDto2}]];
    var snapDto3 = [[${snapDto3}]];
    //网关信息
    var gatewaySer = [[${gatewaySer}]];

</script>

<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/common/constant.js}"></script>
<script th:src="@{/common/igds-common.js}"></script>
<script th:src="@{/inout/inout-common.js}"></script>
<script th:src="@{/inout/inout-print.js}"></script>
<script th:src="@{/inout/video-play.js}"></script>
<script th:src="@{/inout/weight.js}"></script>
<script th:src="@{/inout/inout-weight3.js}"></script>

</body>

<!-- å¼¹å‡ºé€šçŸ¥å• -->
<div class="layui-tab-content" id="listNotice" style="display: none;">
    <table class="layui-table" lay-skin="nob" id="tableNotice"
           lay-filter="tableNotice" style="margin: 0px;"></table>
</div>

<!-- å¼¹å‡ºç²®é£Ÿäº§åœ° -->
<div class="layui-tab-content" id="listFoodLocation" style="display: none;">
    <table class="layui-table" lay-skin="nob" id="tableFoodLoaction"
           lay-filter="tableFoodLoaction" style="margin: 0px;"></table>
</div>

<!--&lt;!&ndash; æµç¨‹æ•°æ®ä¿¡æ¯ &ndash;&gt;-->
<!--<div class="layui-tab-content" id="listProgressData" style="display: none;">-->
<!--    <table class="layui-table tableListProgressData" id="tableListProgressData"-->
<!--           lay-filter="tableListProgressData">-->
<!--        <thead>-->
<!--        <tr class="qyzj-table-tit">-->
<!--            <th>单据号</th>-->
<!--            <th>承运人</th>-->
<!--            <th>车牌号</th>-->
<!--            <th>操作</th>-->
<!--        </tr>-->
<!--        </thead>-->
<!--        <tbody>-->
<!--        </tbody>-->
<!--    </table>-->
<!--</div>-->

<!-- å¼¹å‡ºæ¡†çš„信息 -->
<div class="layui-tab-content" id="dialog-from-notify" style="display: none;">
    <table class="layui-table">
        <colgroup>
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>返回信息</td>
            <td id="resultMsg" style="color: red;font-weight: bold;"></td>
        </tr>
        <tr>
            <td>承运人</td>
            <td id="resultUserName" style="font-weight: bold;"></td>
        </tr>
        <tr>
            <td>车牌号</td>
            <td id="resultPlateNum" style="font-weight: bold;"></td>
        </tr>
        <tr>
            <td>下一步</td>
            <td id="resultType" style="font-weight: bold;"></td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/html" id="toolbarFoodLocaton">
    <div class="">
        <div class="layui-col-xs6">
            <input type="text" id="key2" placeholder="输入编码或者名称……" class="layui-input">
        </div>
        <div class="layui-col-xs6" style="padding-left: 10px;">
            <button class="layui-btn layui-btn-sm" onclick="flushFoodLocation()">查询</button>
        </div>
    </div>
</script>

<script type="text/html" id="barSelectProgress">
    <a class="layui-btn layui-btn-xs" style="width: 80px;height: 30px;line-height: 30px;border-radius: 6px;" lay-event="select">选择</a>
</script>

</html>