igds-dzhwk-web/src/main/java/com/fzzy/igds/dzhwk/controller/WebController.java

@@ -148,6 +148,16 @@
    }

    /**
     * ä»“储保管作业-通风控制
     * @param view
     * @return
     */
    @RequestMapping("/recir-control")
    public String recirControl(ModelMap view) {
        return prefix + "recir-control";
    }

    /**
     * ä»“储保管作业-气调作业
     * @param view
     * @return
@@ -159,6 +169,16 @@
    }

    /**
     * ä»“储保管作业-通风控制
     * @param view
     * @return
     */
    @RequestMapping("/n2-control")
    public String n2Control(ModelMap view) {
        return prefix + "n2-control";
    }

    /**
     * ä»“储保管作业-安全管理
     * @param view
     * @return

 igds-dzhwk-web/src/main/resources/static/dzhwk/common.js

@@ -54,14 +54,6 @@
 * @param tag
 */
function toPage(tag) {
    if(tag == "recir"){
        layer.msg("暂未开放！");
        return;
    }
    if(tag == "n2"){
        layer.msg("暂未开放！");
        return;
    }
    if(tag == "security"){
        layer.msg("暂未开放！");
        return;

 igds-dzhwk-web/src/main/resources/static/dzhwk/n2/n2-control.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,434 @@
.fl {
    float: left;
}

.flex {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
}

.qifa {
    background: url(../../img/dzhwk/n2/bgt2.jpg) no-repeat;
}

.qifa ul {
    padding: 0;
    margin: 0;
}

.qifa li {
    list-style-type: none;
}

.qifa a {
    text-decoration: none;
}

.qifa .qf_box1 {
    height: 138px;
    color: #fff;
    justify-content: space-between;
    padding: 10px 10px 0 20px;
}

.qifa .qf_box1 .qf1_bx1 {
    width: 20%;
    float: left;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 25px 10px 25px;
    background: #7B8E9F;
    box-shadow: 0px 5px 20px 0px rgba(85, 85, 85, 0.2);
    border-radius: 10px;
}

.qifa .qf_box1 .qf1_bx1 .layui-form-select dl dd {
    color: #333;
}

.qifa .qf_box1 .qf1_bx1 .layui-form-select dl dd.layui-this {
    background: #7b8e9f;
    color: #fff;
}

.qifa .qf_box1 .qf1_bx1 .layui-form-label {
    text-align: left;
    width: 60px;
    padding-left: 0;
}

.qifa .qf_box1 .qf1_bx1 .layui-input-block {
    margin-left: 90px;
}

.qifa .qf_box1 .qf1_bx1 .switch {
    margin-top: 15px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #FAFAFA;
    border-radius: 25px;
    color: #000;
    font-size: 18px;
}

.qifa .qf_box1 .qf1_bx1 .switch span {
    display: block;
    float: left;
    width: 50%;
    border-radius: 26px;
    cursor: pointer;
}

.qifa .qf_box1 .qf1_bx1 .switch span.on {
    height: 52px;
    line-height: 52px;
    background: #F49F0B;
    color: #fff;
}

.qifa .qf_box1 .qf1_bx2 {
    width: 32.5%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    background: url(../../img/dzhwk/n2/bg_qf2.png) no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 8px 20px;
}

.qifa .qf_box1 .qf1_bx3 {
    width: 25%;
    float: left;
    height: 100%;
    box-sizing: border-box;
    background: url(../../img/dzhwk/n2/bg_qf3.png) no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 12px 20px;
}

.qifa .qf_box1 .qf1_bx4 {
    width: 16.2%;
    float: left;
    height: 100%;
    box-sizing: border-box;
    background: url(../../img/dzhwk/n2/bg_qf4.png) no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 12px 20px;
    text-align: center;
}

.qifa .qf_box1 .qf1_bx4 .icon {
    margin: 15px 0 0 0;
}

.qifa .qf_box1 .qf1_tit {
    font-size: 18px;
    margin-bottom: 6px;
    position: relative;
    text-align: left;
    padding-left: 18px;
}

.qifa .qf_box1 .qf1_tit::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.qifa .qf_box1 .qf1_time {
    text-align: center;
    color: #fff;
}

.qifa .qf_box1 .qf1_time li {
    float: left;
    position: relative;
}

.qifa .qf_box1 .qf1_time li::after {
    content: "";
    width: 1px;
    height: 80px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.qifa .qf_box1 .qf1_time li:last-child::after {
    display: none;
}

.qifa .qf_box1 .qf1_time .num {
    font-size: 20px;
    margin: 6px 0 12px 0;
}

.qifa .qf_box1 .qf1_time .num.din {
    font-size: 34px;
    font-family: 'din';
}

.qifa .qf_box1 .qf1_time p {
    font-size: 14px;
    margin: 0;
}

.qifa .qf_box1 .qf1_time .x4 li {
    width: 25%;
}

.qifa .qf_box1 .qf1_time .x3 li {
    width: 33.33%;
}

.qifa .qf_box1 .qf1_time .x3 li .num {
    margin: 16px 0 15px;
}

.qifa .qf_box2 {
    padding: 10px 28px;
}

.qifa .qf_box2 .qf_tit {
    font-size: 20px;
    color: #000;
    margin-bottom: 15px;
    position: relative;
    margin-left: -30px;
    margin-top: -5px;
    font-weight: bold;
    padding-left: 18px;
}

.qifa .qf_box2 .qf_tit::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #2F8AD1;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.qifa .qf_box2 .qf2_left {
    float: left;
    max-width: 55%;
    padding-left: 65px;
    box-sizing: border-box;
}

.qifa .qf_box2 .qf2_left .qf2_charts {
    height: 140px;
    margin: -20px 0 20px;
}

.qifa .qf_box2 .qf2_left .qf2_charts .start {
    width: 80px;
    margin-right: 25px;
    float: left;
    margin-top: 15px;
    text-align: center;
    /*cursor: pointer;*/
}

.qifa .qf_box2 .qf2_left .qf2_charts .start .p1 {
    font-size: 14px;
    margin: 6px 0 3px;
}

.qifa .qf_box2 .qf2_left .qf2_charts .start .p2 {
    font-size: 18px;
    font-weight: bold;
}

.qifa .qf_box2 .qf2_left .qf2_charts .start:hover .p2 {
    color: #2F8AD1;
}

.qifa .qf_box2 .qf2_left .qf2_charts .chart_ul {
    width: 100%;
    max-width: 510px;
    float: left;
}

.qifa .qf_box2 .qf2_left .qf2_charts li {
    width: 33.33%;
    float: left;
    text-align: center;
}

.qifa .qf_box2 .qf2_left .qf2_charts li .charts {
    width: 144px;
    height: 144px;
    margin: 0 auto;
    position: relative;
    background: url(../../img/dzhwk/n2/bg_ky.png) no-repeat center;
}

.qifa .qf_box2 .qf2_left .qf2_img {
    position: relative;
    margin: 6px 0 0 0;
}

.qifa .qf_box2 .qf2_left .qf2_img .xt {
    position: absolute;
    bottom: 14px;
    z-index: 1;
    right: -90px;
}

.qifa .qf_box2 .qf2_right {
    width: 45%;
    float: left;
    padding-left: 70px;
    box-sizing: border-box;
}

.qifa .qf_box2 .qf2_right .qf2_img img {
    margin-top: -15px;
}

.floatBar {
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 2;
}

.floatBar li {
    width: 95px;
    height: 95px;
    background: #fff;
    text-align: center;
    box-shadow: 0px 5px 15px 0px rgba(50, 66, 81, 0.05);
    border-radius: 10px;
    margin-bottom: 10px;
}

.floatBar li i {
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    float: left;
    margin: 16px 0 6px;
}

.floatBar li p {
    font-size: 14px;
    color: #324251;
    font-weight: bold;
}

.floatBar li:nth-child(1) i {
    background-image: url(../../img/dzhwk/n2/icon_sd1.png);
}

.floatBar li:nth-child(1).on i {
    background-image: url(../../img/dzhwk/n2/icon_sd01.png);
}

.floatBar li:nth-child(2) i {
    background-image: url(../../img/dzhwk/n2/icon_sd2.png);
}

.floatBar li:nth-child(2).on i {
    background-image: url(../../img/dzhwk/n2/icon_sd02.png);
}

.floatBar li:nth-child(3) i {
    background-image: url(../../img/dzhwk/n2/icon_sd3.png);
}

.floatBar li:nth-child(3).on i {
    background-image: url(../../img/dzhwk/n2/icon_sd03.png);
}

.floatBar li:nth-child(4) i {
    background-image: url(../../img/dzhwk/n2/icon_sd4.png);
}

.floatBar li:nth-child(4).on i {
    background-image: url(../../img/dzhwk/n2/icon_sd04.png);
}

.floatBar li:nth-child(5) i {
    background-image: url(../../img/dzhwk/n2/icon_sd5.png);
}

.floatBar li:nth-child(5).on i {
    background-image: url(../../img/dzhwk/n2/icon_sd05.png);
}

.floatBar li:nth-child(6) i {
    background-image: url(../../img/dzhwk/n2/icon_sd4.png);
}

.floatBar li:nth-child(6).on i {
    background-image: url(../../img/dzhwk/n2/icon_sd04.png);
}

.floatBar li.on {
    background: #53ADCE;
    box-shadow: 0px 5px 15px 0px rgba(50, 66, 81, 0.05);
}

.floatBar li.on a {
    color: #fff;
}


.floatBar li.on a p {
    color: #fff;
}

.sdft-btn-group {
    display: block;
}

.sdft-topbtn {
    background: #fff;
    font-size: 16px;
    color: #969ca6;
    border: 0;
}

.sdft-topbtn.active {
    background: #efd17a;
    color: #283a48;
    font-weight: bold;
}

.sdft-topbtn:hover,
.sdft-topbtn.active:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    color: #283a48;
}

.tit {
    font-size: 16px;
    font-weight: bold;
    color: red;
}

.c-hand{
    cursor: pointer;
}

 igds-dzhwk-web/src/main/resources/static/dzhwk/n2/n2-control.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,609 @@
var layer;
var form;
var viewAB = "01";//01-正面
var curTask;
var myChart1;
var myChart2;
var myChart3;
var option1;
var option2;
var option3;

/**
 * æ°”调动作
 * 01-抽负压
 * 02-排气
 * 03-充氮
 * 04-均氮
 * 30-气密性检测
 */
var MODE_TAG = {
    TAG_01: "01",
    TAG_02: "02",
    TAG_03: "03",
    TAG_04: "04",
    TAG_30: "30"
};

$(function () {
    layui.use(['layer', 'form'], function () {
        form = layui.form;
        layer = layui.layer;

        // ç›‘听仓库选择
        form.on('select(select_depotId)', function (obj) {
            return onDepotChange(obj);
        });

        initChart();

        // flushN2Mac();
    });

    // æ·»åŠ åˆ‡æ¢åŠ¨ä½œ
    $(".js-tf-btn").click(
        function () {
            $(this).addClass("active").siblings(".js-tf-btn").removeClass(
                "active");
        });

});

//socket信息返回處理
function socketOnMessage(pocket) {

};

// æŒ‰é’®äº‹ä»¶åˆ‡æ¢æ­£åé¢
function toCut(target) {
    viewAB = target;
    depotId = $("#depotId").val();
    if (!depotId) {
        layer.alert("请选择仓库");
        return;
    }

    var imgPath = "../../img/dzhwk/n2/3_box_00.png";
    if (target == "02") {
        imgPath = "../../img/dzhwk/n2/3_box_01.gif";
    }
    //根据任务调整图片
    if (curTask) {
        imgPath = imgPath.replace(imgName, imgName.substr(0, 1) + "box_" + curTask.modeTag + ".gif");
    }
    $("#n2_box_img").attr("src", imgPath);
};

//切换仓库，判断仓库类型，刷新当前仓库最新气体检测信息
function onDepotChange(obj) {
    var selectDepotType = obj.elem[obj.elem.selectedIndex].getAttribute('type');
    if (selectDepotType == depotType) {
        renderInfo();
        renderStatus();
        toCut(viewAB);
    } else {
        changeView(selectDepotType);
    }
};

/**
 * é€‰æ‹©ä»“库后更新当前仓库的状态，主要是气调状态
 */
function renderStatus() {
    depotId = $("#depotId").val();
    layer.load(1);
    var param = {
        companyId: companyId,
        deptId: deptId,
        depotId: depotId
    };
    $.ajax({
        type: "POST",
        url: "../../basic/n2/query-task-status",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(param),
        success: function (result) {
            layer.closeAll();
            console.log(result);
            if (result.code == "0000") {
                curTask = result.data;
                $("#text_status").text(curTask.autoName);
            } else {
                layer.msg("没有获取到当前仓库气调相关状态");
            }
        },
        error: function () {
            layer.closeAll();
            layer.msg("没有获取到当前仓库气调相关状态");
        }
    });
}


/**
 * é€‰æ‹©ä»“库后相关信息更新
 */
function renderInfo() {
    depotId = $("#depotId").val();
    layer.load(1);
    var param = {
        companyId: companyId,
        deptId: deptId,
        depotId: depotId
    };
    $.ajax({
        type: "POST",
        url: "../../basic/gas/flush-gas-depot",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(param),
        success: function (result) {
            layer.closeAll();
            if (result.code == "0000") {
                if (result.data.perN2 > 0) {
                    $("#text_checkDate").text(result.data.receiveDate);
                    $("#text_n2Max").text(result.data.perN2Max);
                    $("#text_n2Min").text(result.data.perN2Min);
                    $("#text_n2Ave").text(result.data.perN2);
                    $("#text_pressure").text(result.data.pressure);
                }
                //仓库信息
                if (result.data.depotData) {
                    $("#text_foodVariety").text(result.data.depotData.foodVarietyName);
                    $("#text_storeKeeper").text(result.data.depotData.storeKeeperName);
                }
            } else {
                layer.msg("没有获取到当前仓库气体检测信息");
            }
        },
        error: function (result) {
            layer.closeAll();
            layer.msg("没有获取到当前仓库气体检测信息");
        }
    });
}

//企业页面
function changeView(selectDepotType) {
    //类型改变，自动切换页面
    if (socket) {
        socket.close();
    }
    depotId = $("#depotId").val();
    window.location.href = "../../basic/n2/gateway?depotId=" + depotId + "&depotType=" + selectDepotType + "&deptId=" + deptId;
}

/** è§†é¢‘查看直接跳转到视频概览页面**/
function showVideo() {
    window.parent.openTab("./basic/security/aerial-video?t=1", "视频鸟瞰", "aerial-video");
};


//刷新制氮机信息
function flushN2Mac() {
    var param = {
        companyId: companyId,
        deptId: deptId
    };
    $.ajax({
        type: "POST",
        url: "../../basic/n2/get-mac",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(param),
        success: function (result) {
            if (result.code == "0000") {
                renderMac(result.data);
            } else {
                layer.alert("没有获取到制氮机信息");
            }
        },
        error: function (result) {
            layer.alert("没有获取到制氮机信息");
        }
    });
}


function renderMac(macData) {
    if (!macData) {
        layer.alert("没有获取到制氮机信息");
        return;
    }
    $("#mac_name").text("制氮机#" + macData.name);
    if ("Y" == macData.runStatus) {
        $("#mac_runStatus").text("开启");
        $("#mac_img").attr("src", "../../static/img/dzhwk/n2/mac.gif");
    }
    if ("N" == macData.runStatus) {
        $("#mac_runStatus").text("关闭");
        $("#mac_img").attr("src", "../../static/img/dzhwk/n2/mac.png");
    }
    if (macData.purity) {
        option1.title[0].text = macData.purity + "%";
        myChart1.setOption(option1);
    }
    if (macData.pressure) {
        option2.title[0].text = macData.pressure + "bar";
        myChart2.setOption(option2);
    }
    if (macData.flow) {
        option3.title[0].text = macData.flow + "Nm³/h";
        myChart3.setOption(option3);
    }
}


/**
 * æ ¹æ®åŠ¨ä½œæ ‡ç­¾æ‰§è¡Œæ°”调动作
 *
 * @param modeTag
 */
function doExe(modeTag) {
    layer.msg("暂未对接设备！");
    return;
    depotId = $("#depotId").val();
    if (!depotId) {
        layer.alert("请选择仓库");
        return;
    }
    var param = {
        depotId: depotId,
        modeTag: modeTag,
        companyId: companyId,
        deptId: deptId
    };
    layer.load(1);
    $.ajax({
        type: "POST",
        url: "../../basic/n2/run-auto",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(param),
        success: function (result) {
            layer.closeAll();
            if (result.code == "ORDER_SUCCESS") {
                addTextStatus(modeTag, null);
            } else {
                layer.alert(result.msg);
            }
        },
        error: function (result) {
            layer.closeAll();
            layer.alert("执行失败：" + result.msg);
        }
    });
}

/**
 * æ ‡è®°å½“前仓库状态
 * @param modeTag  å¦‚果有标记则根据标记执行
 * @param msg å¦‚果有信息则直接显示信息
 */
function addTextStatus(modeTag, msg) {
    if (msg) {
        $("#text_status").text(msg);
    } else {
        if (modeTag) {
            if (MODE_TAG.TAG_01 == modeTag) {
                msg = "抽负压执行中……"
            }
            if (MODE_TAG.TAG_02 == modeTag) {
                msg = "排气执行中……"
            }
            if (MODE_TAG.TAG_03 == modeTag) {
                msg = "充氮执行中……"
            }
            if (MODE_TAG.TAG_04 == modeTag) {
                msg = "均氮执行中……"
            }
            if (MODE_TAG.TAG_30 == modeTag) {
                msg = "气密性检测执行中……"
            }
            $("#text_status").text(msg);
        }
    }
}

//弹出制氮机控制窗口,直接用一个新页面
function showMacControl() {
    layer.msg("暂未对接设备！");
    return;
    layer.open({
        type: 2,
        title: "制氮机远程操作",
        area: ['485px', '210px'],
        shade: 0,
        content: "../../basic/n2/mac-control",
        btn: 0,
        closeBtn: 2
    });
}

//初始化图表
function initChart() {
    myChart1 = echarts.init(document.getElementById('chart1'));
    myChart2 = echarts.init(document.getElementById('chart2'));
    myChart3 = echarts.init(document.getElementById('chart3'));
    var getmax = 100;
    var getvalue = 98;
    option1 = {
        tooltip: [],
        title: [{
            text: '99%',
            top: '45%',
            x: 'center',
            textStyle: {
                fontSize: 14,
                color: '#000'
            }
        }, {
            text: '氮气纯度',
            top: '62%',
            x: 'center',
            textStyle: {
                fontSize: 14,
                color: '#000'
            }
        }],
        angleAxis: {
            show: false,
            max: getmax * 360 / 250, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 215, //极坐标初始角度
            splitLine: {
                show: false
            }
        },
        barMaxWidth: 10, //圆环宽度
        radiusAxis: {
            show: false,
            type: 'category',
        },
        //圆环位置和大小
        polar: {
            center: ['50%', '60%'],
            radius: '160%'
        },
        series: [{
            type: 'bar',
            data: [{ //上层圆环，显示数据
                value: getvalue,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#fb8e1e',
                            },
                            {
                                offset: .5,
                                color: '#77dfa2',
                            },
                            {
                                offset: 1,
                                color: '#77dfa2',
                            },
                        ],
                    },
                },
            }],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角
            z: 3 //圆环层级，同zindex
        },
            { //下层圆环，显示最大值
                type: 'bar',
                data: [{
                    value: getmax,
                    itemStyle: {
                        color: '#c7cfd9',
                        opacity: .8,
                        borderWidth: 0,
                    },
                }],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1
            },
        ]
    };
    var getmax2 = 100;
    var getvalue2 = 78;
    option2 = {
        title: [{
            text: '0.0bar',
            top: '45%',
            x: 'center',
            textStyle: {
                fontSize: 14,
                color: '#000'
            }
        }, {
            text: '出口压力',
            top: '62%',
            x: 'center',
            textStyle: {
                fontSize: 14,
                color: '#000'
            }
        }],
        angleAxis: {
            show: false,
            max: getmax2 * 360 / 250, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 215, //极坐标初始角度
            splitLine: {
                show: false
            }
        },
        barMaxWidth: 10, //圆环宽度
        radiusAxis: {
            show: false,
            type: 'category',
        },
        //圆环位置和大小
        polar: {
            center: ['50%', '60%'],
            radius: '160%'
        },
        series: [{
            type: 'bar',
            data: [{ //上层圆环，显示数据
                value: getvalue2,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#fb8e1e',
                            },
                            {
                                offset: .5,
                                color: '#77dfa2',
                            },
                            {
                                offset: 1,
                                color: '#77dfa2',
                            },
                        ],
                    },
                },
            }],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角
            z: 3 //圆环层级，同zindex
        },
            { //下层圆环，显示最大值
                type: 'bar',
                data: [{
                    value: getmax,
                    itemStyle: {
                        color: '#c7cfd9',
                        opacity: .8,
                        borderWidth: 0,
                    },
                }],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1
            },
        ]
    };
    var getmax3 = 100;
    var getvalue3 = 75;
    option3 = {
        title: [{
            text: '0.0Nm³/h',
            top: '45%',
            x: 'center',
            textStyle: {
                fontSize: 14,
                color: '#000'
            }
        }, {
            text: '出口流量',
            top: '62%',
            x: 'center',
            textStyle: {
                fontSize: 14,
                color: '#000'
            }
        }],
        angleAxis: {
            show: false,
            max: getmax * 360 / 250, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 215, //极坐标初始角度
            splitLine: {
                show: false
            }
        },

        barMaxWidth: 10, //圆环宽度
        radiusAxis: {
            show: false,
            type: 'category',
        },

        //圆环位置和大小
        polar: {
            center: ['50%', '60%'],
            radius: '160%'
        },
        series: [{
            type: 'bar',
            data: [{ //上层圆环，显示数据
                value: getvalue,
                itemStyle: {

                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#fb8e1e',
                            },
                            {
                                offset: .5,
                                color: '#77dfa2',
                            },
                            {
                                offset: 1,
                                color: '#77dfa2',
                            },
                        ],
                    },
                },
            }],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角
            z: 3 //圆环层级，同zindex
        },
            { //下层圆环，显示最大值
                type: 'bar',
                data: [{
                    value: getmax,
                    itemStyle: {
                        color: '#c7cfd9',
                        opacity: .8,
                        borderWidth: 0,
                    },
                }],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1
            },
        ]
    };
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    });
}


 igds-dzhwk-web/src/main/resources/static/dzhwk/recir/recir-control-pfc.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,417 @@
var layer;
var form;
var deviceList;// å½“前仓库的所有设备列表
var depotId;
var deviceType = DeviceType.TYPE_05;// è¢«é€‰ä¸­çš„设备类型，设备类型 ç©ºè°ƒ
var viewTargetStatus;// ç›®æ ‡çŠ¶æ€ï¼Œæ ¹æ®è®¾å¤‡ç±»åž‹å’Œå½“前值调用动效
var domSelectDevice;// è¢«é€‰ä¸­çš„设备dom对象

$(function () {
    layui.use(['layer', 'form'], function () {
        form = layui.form;
        layer = layui.layer;

        form.render();

        // ç›‘听仓库选择
        form.on('select(select_depotId)', function (obj) {
            return onDepotChange(obj);
        });

        //初始化刷新数据
        initData();
    });

    // æ·»åŠ åˆ‡æ¢åŠ¨ä½œ
    $(".js-tf-btn").click(
        function () {
            $(this).addClass("active").siblings(".js-tf-btn").removeClass(
                "active");
        });

    $(".js-xg115-arrow").click(function () {
        $(this).siblings(".xg115-btnhide").toggle()
        $(this).toggleClass("active");
    });
});

function initData() {
    if (depotId) {
        $("#depotId").val(depotId);
        query(true, true, true);
        form.render();
    }
}

/**
 * æ£€æµ‹ä»“库类型是否发生改变，如果发生改变，重新切换页面
 */
function onDepotChange(obj) {
    var depotType = obj.elem[obj.elem.selectedIndex].getAttribute('type');
    if (depotType == DEPOT_TYPE) {
        query(true, true, true);
    } else {
        changeView(depotType);
    }
}

function changeView(depotType) {
    //类型改变，自动切换页面
    if (socket) {
        socket.close();
    }
    depotId = $("#depotId").val();
    window.location.href = "./gateway?depotId=" + depotId + "&depotType=" + depotType;
    return true;
}

function showVideo() {
    window.parent.openTab("./basic/security/aerial-video?t=1", "视频鸟瞰", "aerial-video");
};

function closeAll() {
    layer.msg("终端不支持当前功能……");
};

// çŠ¶æ€æŸ¥è¯¢
function queryStatus() {
    depotId = $("#depotId").val();
    if (!depotId) {
        layer.msg("请先选择仓库！");
        return;
    }
    //把当前页面的设备传递到后台
    var data = {
        depotId: depotId,
        deptId: deptId,
        deviceList: []
    };
    var tips = $(".device");
    $.each(tips, function (index, item) {
        data.deviceList.push({
            id: item.id,
            depotId: item.getAttribute("depotid"),
            passCode: item.getAttribute("passcode"),
            name: item.getAttribute("name"),
            serId: item.getAttribute("serid"),
            link: item.getAttribute("link"),
            type: item.getAttribute("type"),
            companyId: companyId
        });
    });

    $.ajax({
        type: "POST",
        url: "../../basic/temp/query-status",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            layer.msg(result.msg);
        },
        error: function (result) {
            layer.msg("获取数据失败，请重新尝试！");
        }
    });
};

/**
 * @param isNew æ˜¯å¦æ–°åº“跟新仓库信息并执行状态刷新
 * @param isCut æ˜¯å¦åˆ‡æ¢é¡µé¢
 * @param isQueryStatus æ˜¯å¦æ›´æ–°çŠ¶æ€
 */
function query(isNew, isCut, isQueryStatus) {
    depotId = $("#depotId").val();
    if (!depotId) {
        layer.msg("请先选择仓库！");
        return;
    }
    if (isNew) {
        updateGrainInfo();
    }
    deviceList = [{"companyId":"5303","depotId":"P0101","id":"53030P190220_11001","link":"3001","location":"01","locationName":"02-背面","name":"空调#1","passCode":1001,"posX":857,"posY":216,"serId":"20","status":"OPEN","statusName":"风机正转","type":"05","typeName":"05-空调"},{"companyId":"5303","depotId":"P0101","id":"53030P190220_11002","link":"3002","location":"01","locationName":"02-背面","name":"空调#2","passCode":1002,"posX":469,"posY":212,"serId":"20","status":"CLOSE","statusName":"风口开","type":"05","typeName":"05-空调"}];
    if(isCut){
        toCutExe(viewAB,true);
    }
    // $.ajax({
    //     type: "POST",
    //     url: "../../basic/temp/list-device-manual",
    //     dataType: "json",
    //     contentType: "application/json;charset=UTF-8",
    //     data: JSON.stringify({
    //         depotId: depotId
    //     }),
    //     success: function (result) {
    //         if (isNew) {
    //             updateGrainInfo();
    //         }
    //
    //         if (result.code != "0000") {
    //             layer.msg(result.msg);
    //             deviceList = null;
    //             if(isCut){
    //                 toCutExe(viewAB,true);
    //             }
    //             return;
    //         }
    //         deviceList = result.data;
    //         if(isCut){
    //             toCutExe(viewAB,true);
    //         }
    //         if (isQueryStatus) {
    //             queryStatus();
    //         }
    //     },
    //     error: function (result) {
    //         layer.msg("获取数据失败，请重新尝试！");
    //     }
    // });
};

// èŽ·å–当前仓库的最新粮情数据信息
function updateGrainInfo() {
    $("#tempIn").text("26.6");
    $("#humidityIn").text("41");
    $("#humidityOut").text("63");
    $("#tempOut").text("32.4");
    $("#updateTime").text("2025-05-16 09:05");
    // $.ajax({
    //     type: "POST",
    //     url: "../../basic/grain/grain-data",
    //     dataType: "json",
    //     contentType: "application/json;charset=UTF-8",
    //     data: JSON.stringify({
    //         depotId: depotId
    //     }),
    //     success: function (result) {
    //         if (result.code != "0000") {
    //             layer.msg(result.msg);
    //             return;
    //         }
    //         var grainData = result.data;
    //         // æ›´æ–°ä¿¡æ¯
    //         $("#tempIn").text(grainData.tempIn <= -100?"--":(grainData.tempIn).toFixed(1));
    //         $("#humidityIn").text((grainData.humidityIn).toFixed(1));
    //         $("#humidityOut").text((grainData.humidityOut).toFixed(1));
    //         $("#tempOut").text(grainData.tempOut <= -100?"--":(grainData.tempOut).toFixed(1));
    //         $("#updateTime").text(grainData.receiveDate);
    //     },
    //     error: function (result) {
    //         layer.msg("当前仓库的粮情数据信息获取失败！");
    //     }
    // });
};

/**
 * åˆ‡æ¢æ•ˆæžœ
 * @param target æ­£åé¢
 * @param isCutImg æ˜¯å¦æ‰§è¡Œåˆ‡å›¾
 */
function toCutExe(target, isCutImg) {
    // èŽ·å–当前仓库效果图
    viewAB = target;
    if (isCutImg) {
        cutImg(depotId, viewAB);
    }
    // æ ¹æ®è®¾å¤‡åˆ—表添加原型信息
    addDevice(deviceList, viewAB);
};

// æ‰‹åŠ¨æ‰§è¡Œï¼ŒåŒæ—¶æ›´æ–°çŠ¶æ€
function toCut(target) {
    if(target == "03" || target == "04"){
        layer.msg("暂未对接！");
        return;
    }
    toCutExe(target, true);
};

// æ·»åŠ æ“ä½œæ—¥å¿—
function addLog(htmlStr) {
    var info = $("#areationInfo").html();
    $("#areationInfo").html(htmlStr + "</br>" + info);
};

function addRedLog(htmlStr) {
    var info = $("#areationInfo").html();
    $("#areationInfo").html(
        "<span class='font-red'>" + htmlStr + "</span></br>" + info);
};

/**
 * å¼¹å‡ºæ“ä½œæ¡†
 */
function showControl(id) {
    domSelectDevice = $("#" + id);
    var curDepotId = domSelectDevice.attr("depotid");
    // å¦‚果点击的设备不是选择仓库的，不执行
    if (curDepotId != depotId) {
        addLog("<font color='red'>当前所选设备：" + domSelectDevice.attr("name")
            + "【非所选仓库】</font>");
        return;
    } else {
        addLog("当前所选设备：" + domSelectDevice.attr("name"));
    }
    // æ›´æ–°æ‰€é€‰æ‹©çš„设备类型
    deviceType = domSelectDevice.attr("type");
    if (1 == deviceType)
        deviceType = "01";
    if (2 == deviceType)
        deviceType = "02";
    if (3 == deviceType)
        deviceType = "03";
    if (4 == deviceType)
        deviceType = "04";
    if (5 == deviceType)
        deviceType = "05";
    if (6 == deviceType)
        deviceType = "06";
    if (7 == deviceType)
        deviceType = "07";
    if (8 == deviceType)
        deviceType = "08";
    if (9 == deviceType)
        deviceType = "09";

    // æ ¹æ®è®¾å¤‡ç±»åž‹å¼¹å‡ºä¸ä¸€æ ·çš„弹出框
    if (DeviceType.TYPE_04 == deviceType) {// çŽ¯æµé£Žæœº
        layer.open({
            type: 1,
            title: '设备操作-' + domSelectDevice.attr("name"),
            area: ['450px', '200px'],
            shade: 0,
            content: $('#control-HL2'),
            btn: 0,
            closeBtn: 2
        });
    } else {
        layer.open({
            type: 1,
            title: '空调控制-' + domSelectDevice.attr("name"),
            area: ['420px', '280px'],
            shade: 0,
            content: $('#tempControl'),
            btn: ['确定执行', '取消操作'],
            yes: function () {
                layer.msg("暂未对接设备");
                return;
                toExecute();
                layer.closeAll();
                layer.msg("开始执行……");
            },
            btn2: function () {
                layer.closeAll();
            },
            closeBtn: 0
        });
    }
};

function toExecute(targetStatus) {
    if (deviceType == "04"){
        toExecute04(targetStatus)
    }
    if (deviceType == "05"){
        toExecute05()
    }
};

// æ“ä½œç©ºè°ƒ
function toExecute05() {
    var targetStatus = $('input[name="targetStatus"]:checked').val();
    var targetTemp = $("#targetTemp").val();
    var targetModel = $('input[name="targetModel"]:checked').val();

    if (!targetTemp)
        targetTemp = 16;
    if (targetTemp < 16)
        targetTemp = 16;
    if (targetTemp > 24)
        targetTemp = 24;

    if ("on" == targetStatus) {
        targetStatus = "OPEN";
    } else {
        targetStatus = "CLOSE";
    }
    var exeDevice = null;
    $.each(deviceList, function (index, item) {
        if (item.id == domSelectDevice.attr("id")) {
            exeDevice = item;
            return true;
        }
    });

    var data = {
        companyId: companyId,
        deptId: deptId,
        depotId: depotId,
        targetStatus: targetStatus,
        targetTemp: targetTemp,
        targetModel: targetModel,
        deviceList: [exeDevice]
    };
    $.ajax({
        type: "POST",
        url: "../../basic/temp/control",
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        success: function (result) {
            if ("ORDER_SUCCESS" == result.code) {
                layer.msg("温控命令发送成功，请请等待执行结果……");
            } else {
                layer.msg("执行失败，信息：" + result.msg);
            }
        },
        error: function () {
            layer.msg("温控执行失败，后台出现错误！");
        }
    });
};

// æ“ä½œçŽ¯æµé£Žæœº
function toExecute04(targetStatus) {
    viewTargetStatus = targetStatus;

    var data = {
        depotId: depotId,
        deptId: deptId,
        deviceList: []
    };

    data.deviceList.push({
        id: domSelectDevice.id,
        depotId: domSelectDevice.attr("depotid"),
        passCode: domSelectDevice.attr("passcode"),
        name: domSelectDevice.attr("name"),
        serId: domSelectDevice.attr("serid"),
        link: domSelectDevice.attr("link"),
        type: domSelectDevice.attr("type"),
        targetStatus: targetStatus
    });

    // å¼€å§‹è°ƒç”¨åŽå°æ‰§è¡Œ
    layer.load(1);
    $.ajax({
        type: 'POST',
        url: "../../basic/verb/control-device",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            layer.closeAll();
            if (result.code != "ORDER_SUCCESS") {
                layer.msg("执行失败：" + result.msg);
            } else {
                layer.msg("操作指令发送成功，待终端响应……");
                // å¼€å§‹è°ƒç”¨åŠ¨ç”» TODO
                updateAnimate(deviceType, targetStatus, false);
            }
        },
        error: function (result) {
            layer.closeAll();
            layer.msg("操作发生异常，暂时无法解决！！");
        }
    });
};

 igds-dzhwk-web/src/main/resources/static/dzhwk/recir/recir-control.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,594 @@
@charset "utf-8";

/*-----------------
  Author:xq
  update:2019
 -------------------*/
body {
    font-family: "微软雅黑", Arial, sans-serif;
    font-size: 14px;
    background: #f3f5f8;
}

i,em{
    font-style: normal;
}


.radius-3,
.sdft-list li{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.radius-6,
.lq-rMenu li{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.box-shadow{
    -webkit-box-shadow: 0px 0px 9px 3px rgba(230,230,230,0.6);
    -moz-box-shadow: 0px 0px 9px 3px rgba(230,230,230,0.6);
    box-shadow: 0px 0px 9px 3px rgba(230,230,230,0.6);
}

.fl {
    float: left;
}
.fr {
    float: right;
}


/*qtjc*/

.sdtf-body{
    background: #cae3ed url(../../img/dzhwk/common/i-body.png) left top repeat-x;
}

.l-container{
    width: 100%;
    max-width: 1680px;
    min-width: 1340px;
    margin-left: auto;
    margin-right: auto;
}

.l-main{
    margin: 10px;
    position: relative;
    padding-right: 340px;
}

.qt-left{
    width: 100%;
}

.qt-lTop-l{
    width: 26%;
    min-width: 260px;
}

.qt-left1{
    padding: 27px 8%;
    background: #7b8e9f;
	
}

.lq-left1-from{
    margin-bottom: 20px;
}

.qt-left .lq-left1-from:last-child{
    margin-bottom: 0;
}

.qt-left .lq-left1-from .layui-form-label{
    color: #fff;
    padding: 9px 0;
    text-align: left;
    font-size: 16px;
}

.qt-left .lq-left1-from .layui-input-block{
    margin-left: 80px;
}

.qt-left .layui-form-select .layui-edge{
    border-top-color: #666;
}

.qt-left .layui-input-block .layui-input{
    font-size: 16px;
    color: #000;
}

.qt-left .layui-form-select dl dd.layui-this{
    background: #7b8e9f;
}

.sdft-btn-group{
    display: block;
	
}

.sdft-topbtn{
    background: #fff;
    font-size: 16px;
    color: #969ca6;
    border: 0;
}

.sdft-topbtn.active{
    background: #efd17a;
    color: #283a48;
    font-weight: bold;
}

.sdft-topbtn:hover,
.sdft-topbtn.active:hover {
   opacity: 1;
   filter: alpha(opacity=100);
   color: #283a48;
}

.qt-lTop-r{
    width: 71.5%;
}

.sdtf-top-item{
    height: 150px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: #fff;
}

.sdtf-top-tit{
    height: 24px;
    line-height: 24px;
    text-align: center;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

.sdtf-top-tit h3{
    display: inline-block;
    height: 24px;
    position: relative;
    margin: 0 auto;
    padding: 0 25px;
}

.sdtf-top-tit h3:before{
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background: #e2e6e9;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
}

.sdtf-top-tit h3 span{
    display: inline-block;
    height: 24px;
    padding: 0 10px;
    /*color: #9ea6ad;*/
    color: #000;
    font-size: 16px;
    position: relative;
    z-index: 3;
    background: #fff;
    overflow: hidden;
}
.sdft-listbox{
    padding: 0 1%;
    overflow: hidden;
}

.sdft-list li{
    float: left;
    width: 25%;
    text-align: center;
    background: #f5f7f9;
    height: 84px;
    overflow: hidden;
    position: relative;
}

.sdft-list li span{
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 5px 0 0;
}


.sdft-list-icon6{
    background: url(../../img/dzhwk/common/sdtf-icon6.png) no-repeat;
}

.sdft-list-icon9{
    background: url(../../img/dzhwk/common/sdtf-icon9.png) no-repeat;
}

.sdft-list-icon10{
    background: url(../../img/dzhwk/common/sdtf-icon10.png) no-repeat;
}

.sdft-list li p{
    line-height: 20px;
    color: #324251;
    font-size: 14px;
}


.sdft-list li:hover,
.sdft-list li.active{
    background: #53adce;
}

.sdft-list li:hover p,
.sdft-list li.active p{
    color: #fff;
}

.sdft-list2 li,
.sdft-list2 li:hover{
    background: none;
}

.sdft-list2 li:hover p{
    color: #324251;
}

.xg115-tf-list1 li:after{
    display: block;
    content: '';
    background: #eceef0;
    width: 1px;
    height: 70px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -35px;
    z-index: 2;
}

.sdft-list2 li:last-child:after{
    display: none;
}

.qt-picBox{
/*     width: 98%; */
/*     margin: 20px auto; */
    text-align: center;
    margin-top: 15px;
    margin-right: 15px;
}

.qt-pic{
    width: 100%;
    margin: 0 auto;
}

.qt-right{
    width: 340px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
}

.sdtf-r1{
    background: #fff;
    width: 320px;
    min-height: 230px;
    overflow: hidden;
    padding: 10px;
}

.sdtf-r1-show,
.sdtf-r1-show>img{
    width: 100%;
    height: 196px;
}

.sdtf-r1-btnbox{
    margin-top: 15px;
}
.sdtf-r1-btnbox2{
    margin-top: 10px;
}
.layui-btn-danger{
    background-color: #e37683;
}

.sdtf-r1-btnbox .layui-btn,
.sdtf-r1-btnbox2 .layui-btn{
    width: 100%;
    height: 34px;
    line-height: 34px;
}

.sdtf-r1-btn1,
.sdtf-r1-btn3{
    padding-right: 1.5%;
}

.sdtf-r1-btn2,
.sdtf-r1-btn5{
    padding-left: 1.5%;
}
.sdtf-r1-btn4{
    padding: 0 1.5%;
}
.sdtf-r1-btn1 .layui-btn{
    background: #5cb498;
}

.sdtf-r1-btnbox2 .layui-btn i img{
    width: 18px;
    height: 18px;
    position: relative;
    top: -1px;
}

.sdtf-r1-btnbox2 .layui-btn{
    color: #324251;
    border-color: #cfd5da;
}

.qt-rTable-box{
    background: #fff;
    overflow: hidden;
    margin-top: 10px;
    width: 320px;
    padding: 10px;
    min-height: 490px;
}

.qt-rTable-box .layui-table td, 
.qt-rTable-box .layui-table th{
    padding: 9px 0;
    text-align: center;
}


.qt-rTable-box .layui-table th{
    background: #dee6ec;
}

.sdtf-switchbox  .layui-form-switch{
    margin-top: 0;
    height: 18px;
  line-height: 18px;
  padding: 0 3px;
}
.sdtf-switchbox .layui-form-switch i {
    top: 1px;
    left: 3px;
}
.sdtf-switchbox .layui-form-onswitch {
    border-color: #53adce;
    background-color: #53adce;
}

.sdtf-switchbox .layui-form-onswitch i {
    margin-left: -18px;
    left: 100%;
}

.mr4{
    margin-right: 4%;
}






@media all and (max-width: 1650px) {
    .sdft-listbox{
        padding: 0;
    }
    .qt-td-hide{
        display: none;
    }

}

.xg115-tf-list li{
    width: 29.333333%;
    border: 1px solid #e2e6e9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 2%;
}

.xg115-num{
    line-height: 48px;
    height: 45px;
    overflow: hidden;
    margin: 5px 0;
}

.xg115-num span{
    font-size: 18px;
}

.xg115-num strong{
    font-size: 30px;
}

.xg115-sdtf-tit{
    height: 34px;
    margin: 10px 0;
    text-align: center;
}

.xg115-sdtf-time{
    display: inline-block;
    height: 34px;
    background: #f2f3f5;
    padding: 0 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    overflow: hidden;
    line-height: 34px;
    color: #000;
    font-size: 14px;
}

.xg115-sdtf-time font{
    font-size: 16px;
    font-family: "arial";
}

.xg115-arrow{
    height: 40px;
    display: block;
    width: 100%;
    background: url(../../img/dzhwk/common/icon-arrow-b.png) center no-repeat;
    -webkit-transition: all 0.5s;
    transition: all 0.5s; 
}


.video-pop{
    width: 100%;
    display: none;
}

.videoSkin .layui-layer-title {
    background: none;
    font-size: 0;
    border: 0;
    height: 35px;
}


.videos {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -225px;
    z-index: 100;
    width: 800px;
    height: 450px;
	
}

.vclose {
    width: 40px;
    height: 40px;
    background: url(../../img/dzhwk/common/icon-close.png) center no-repeat;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 101;
    cursor: pointer;
}


.shade{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0,0,0,0.6);
    display: none;
}

.xg115-btnhide{
    display: none;
}

.xg115-arrow.active{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rkbk-quick-btn {
    height: 45px;
    width: 185px;
    display: inline-block;
    line-height: 40px;
    font-size: 16px;
}

.rkbk-quick-btn i img {
    height: 18px;
    margin-right: 5px;
}

.btn-green {
    background-color: #8bc16a;
}

.btn-violet {
    background-color: #7494d1;
}

.btn-red {
    background-color: #e37878;
}

.btn-blue {
    background-color: #53adce;
}
.err-img {
    background: url(../../img/dzhwk/common/icon-sm-wh.png) center no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: 5px;
}

.info1{
    background: url(../../img/dzhwk/common/lq-c-bg1.png)no-repeat;
    background-size: 100% 100%;
}

.info2{
    background: url(../../img/dzhwk/common/lq-c-bg4.png) no-repeat;
    background-size: 100% 100%;
}


.sdtf-top-item p{
    color: #FFF !important;
}

.sdtf-top-item i{
    color: #FFF !important;
}

.sdtf-top-item strong{
    color: #FFF !important;
}







 igds-dzhwk-web/src/main/resources/static/dzhwk/recir/recir-renderDevice-pfc.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,237 @@
var viewAB = "01";// é»˜è®¤æ­£é¢

/**
 * æ ¹æ®è®¾å¤‡åˆ—表渲染设备示意图，要求被渲染的divID = device_view
 *
 * @param listDevice
 */
renderDevice = function (listDevice) {
    // é¦–先清空div中的内容
    $("#device_view").empty();

    // æ ¹æ®è®¾å¤‡åˆ—表添加原型信息
    addDevice(listDevice, viewAB);
};

// åˆ‡æ¢å›¾ç‰‡a=正面，b=背面
function cutImg(depotId, target) {
    $("#device_view").empty();

    var imgPath = "../../img/dzhwk/depot/pfc_a.png";
    if (target == "02") {
        imgPath = "../../img/dzhwk/depot/pfc_b.png";
    }

    $("#device_view").html('<img style="width: 100%;" src="'+imgPath+'"/>');
    viewAB = target;
};


// åŠ¨æ€æ·»åŠ è®¾å¤‡ä¿¡æ¯
function addDevice(list) {
    if (!list || list.length == 0)
        return;
    var mainImg = $("#device_view");
    var parentLeft = mainImg.offset().left, parentTop = mainImg.offset().top;

    var temp;
    var left = 0, top = 0;
    var imgResult;
    $.each(list, function (index, item) {
        left = parentLeft + item.posX - 15;
        top = parentTop + item.posY - 10;
        // console.log(item.name+"---"+left +"---"+top);

        temp = "";
        if (viewAB == item.location) {
            imgResult = getStatusImg(item);

            temp += "<div id='" + item.id + "' class='device' " + "depotid='"
                + item.depotId + "' name='" + item.name + "' type='"
                + item.type + "' passcode='" + item.passCode + "' serid='"
                + item.serId + "' link='" + item.link + "' status='"
                + item.status + "' onclick=showControl('" + item.id
                + "') style='left:" + left + "px;top:" + top + "px;'>";

            if (imgResult.statusImg.indexOf("gif") > 0) {
                if (DeviceType.TYPE_04 == item.type) {
                    temp += "<img class='img_device' src='" + imgResult.statusImg+ "' style='height:35px;' />";
                } else {
                    temp += "<img class='img_device' src='" + imgResult.statusImg + "' />";
                }
            } else {
                if (DeviceType.TYPE_04 == item.type) {
                    temp += "<img class='img_device' src='" + imgResult.statusImg+ "' style='height:35px;' />";
                } else {
                    temp += "<img class='img_device' src='" + imgResult.statusImg + "' />";
                }
            }
            //表示有故障
            if (imgResult.errorTag) {
                temp += "<i class='err-img'></i>";
            }
            temp += "</div>";
            mainImg.append(temp);
        }
    });
};

// æ ¹æ®è®¾å¤‡ç±»åž‹å’ŒçŠ¶æ€ï¼ŒèŽ·å–当前设备的显示状态图片
function getStatusImg(item) {
    var result = {
        statusImg: null,
        errorTag: false
    };
    if (DeviceType.TYPE_05 == item.type) {
        if (!item.status || DeviceStatus.ERROR == item.status || DeviceStatus.ZERO == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_05_CLOSE.png";
            result.errorTag = true;
            return result;
        }
        result.statusImg = "/img/dzhwk/device/STATUS_05_CLOSE.png";
        if (DeviceStatus.CLOSE == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_05_CLOSE.png";
            return result
        }
        if (DeviceStatus.OPEN == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_05_OPEN.gif";
            return result;
        }
    }
    //环流风机
    if (DeviceType.TYPE_04 == item.type) {
        if (!item.status || DeviceStatus.ERROR == item.status || DeviceStatus.ZERO == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_04_CLOSE.png";
            result.errorTag = true;
            return result;
        }
        if (DeviceStatus.CLOSE == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_04_CLOSE.png";
            return result;
        }
        if (DeviceStatus.F_CLOSE == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_04_CLOSE.png";
            return result;
        }
        if (DeviceStatus.OPEN == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_04_OPEN.gif";
            return result;
        }
        if (DeviceStatus.F_OPEN == item.status) {
            result.statusImg = "/img/dzhwk/device/STATUS_04_OPEN.gif";
            return result;
        }
    }
    //空调阀门
    if (DeviceType.TYPE_071 == item.type) {
        if (!item.status){
            result.statusImg = "/img/dzhwk/device/CIR_07_CLOSE.png";
            result.errorTag = true;
            return result;
        }
        if (DeviceStatus.ERROR == item.status){
            result.statusImg = "/img/dzhwk/device/CIR_07_CLOSE.png";
            return result;
        }
        if (DeviceStatus.CLOSE == item.status){
            result.statusImg = "/img/dzhwk/device/CIR_07_CLOSE.png";
            return result;
        }
        if (DeviceStatus.OPEN == item.status){
            result.statusImg = "/img/dzhwk/device/CIR_07_OPEN.png";
            return result;
        }
    }
    return result;
};

// æ ¹æ®CSS标签控制那些组件支持拖拽.device
function dragDevice() {
    var tips = $(".device");
    if (tips.length == 0) {
        return;
    }
    var container = $("#device_view");
    var parentLeft = container.offset().left, parentTop = container.offset().top;
    // console.log("parentLeft=" + parentLeft);
    // console.log("parentTop=" + parentTop);
    var maxX = 1800, maxY = 1000;
    $.each(tips, function (index, item) {
        var dd = new Dragdrop({
            target: item,
            area: [0, maxX, 0, maxY],
            callback: function (obj) {
                //console.log('x:' + (obj.moveX) + ' y:' + (obj.moveY));
            }
        });
        dd.dragAll();
    });
};

// ä¿å­˜è®¾å¤‡ä½ç½®ä¿¡æ¯
function updatePos() {
    var tips = $(".device");
    if (tips.length == 0) {
        return;
    }
    var container = $("#device_view");
    var parentLeft = container.offset().left, parentTop = container.offset().top;
    // å°è£…数据进行保存
    var data = new Array();
    var id = null, curDepotId = null;
    var offset;

    $.each(tips, function (index, item) {
        id = item.id;
        curDepotId = item.getAttribute("depotid");
        offset = $('#' + id).offset();
        data[index] = {
            bizId: id,
            depotId: curDepotId,
            selfTag: viewAB,
            posX: offset.left - parentLeft,
            posY: offset.top - parentTop
        };
    });
    console.log(JSON.stringify(data));
    $.ajax({
        type: 'POST',
        url: "../../basic/control/update-temp-pos",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            layer.msg(result.msg);
        },
        error: function (result) {
            layer.msg(result.msg);
        }
    });
};

/**
 * æ ¹æ®è®¾å¤‡ç±»åž‹å’Œç›®æ ‡çŠ¶æ€ï¼Œè°ƒæ•´åŠ¨ç”»æ•ˆæžœ
 *
 * @param deviceType
 *            è®¾å¤‡ç±»åž‹
 * @param targetStatus
 *            ç›®æ ‡çŠ¶æ€
 * @param isEnd
 *            æ˜¯å¦æ‰§è¡Œå®Œæˆ
 */
function updateAnimate(deviceType, targetStatus, isEnd) {
    // èŽ·å–动效的操作
    var img = "/img/dzhwk/device/STATUS_05_CLOSE.png";
    if (targetStatus == DeviceStatus.CLOSE) {
        img = "/img/dzhwk/device/ANIMATE_05_CLOSE.gif";
        if (isEnd)
            img = "/img/dzhwk/device/STATUS_05_CLOSE.png";
    }
    if (targetStatus == DeviceStatus.OPEN) {
        img = "/img/dzhwk/device/ANIMATE_05_OPEN.gif";
        if (isEnd)
            img = "/img/dzhwk/device/STATUS_05_OPEN.png";
    }

    $("#img_animate").attr('src', img);
}

 igds-dzhwk-web/src/main/resources/static/dzhwk/verb/verb-DeviceHand-pfc.js

@@ -258,6 +258,7 @@

// ä¿å­˜è®¾å¤‡ä½ç½®ä¿¡æ¯
function updatePos() {
    return;
    var tips = $(".device");
    if (tips.length == 0) {
        return;

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/3_box_00.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/3_box_01.gif

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/3_box_02.gif

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/3_box_03.gif

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/3_box_04.gif

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/bg_ky.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/bg_qf2.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/bg_qf3.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/bg_qf4.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/bgt2.jpg

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon-n2-close.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon-n2-open.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_kg.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd01.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd02.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd03.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd04.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd05.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd1.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd2.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd3.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd4.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/icon_sd5.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/mac.gif

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/mac.png

 igds-dzhwk-web/src/main/resources/static/img/dzhwk/n2/xt1.png

 igds-dzhwk-web/src/main/resources/templates/dzhwk/n2-control.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,344 @@
<!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="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>气调作业</title>

    <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/dzhwk/n2/n2-control.css}"/>

    <style>
        .img_5 {
            margin-left: -10px;
        }

    </style>
</head>

<body class="qifa">
<div class="wrapper wrapper-content">
    <div class="qf_box1 flex">
        <div class="qf1_bx1">
            <div class="qf1_bx1_lb layui-form">
                <form class="layui-form" action="">
                    <div class="layui-form-item lq-left1-from">
                        <label class="layui-form-label">仓库列表</label>
                        <div class="layui-input-block">
                            <select name="depotId" id="depotId" lay-filter="select_depotId">
                                <option value="P0101" type="01">P01</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-btn-group layui-row sdft-btn-group">
                        <button type="button"
                                class="layui-btn layui-col-lg6 sdft-topbtn active js-tf-btn"
                                onclick="toCut('01')">显示正面
                        </button>
                        <button type="button"
                                class="layui-btn layui-col-lg6 sdft-topbtn js-tf-btn"
                                onclick="toCut('02')">显示反面
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="qf1_bx2">
            <div class="qf1_tit" id="text_checkDate">检测时间: --</div>
            <div class="qf1_time">
                <ul class="x4">
                    <li>
                        <div class="num din" id="text_n2Max">--</div>
                        <p>氮气最高(%)</p>
                    </li>
                    <li>
                        <div class="num din" id="text_n2Min">--</div>
                        <p>氮气最低(%)</p>


                    </li>
                    <li>
                        <div class="num din" id="text_n2Ave">--</div>
                        <p>平均氮气(%)</p>
                    </li>
                    <li>
                        <div class="num din" id="text_pressure">--</div>
                        <p>内外压差(pa)</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="qf1_bx3">
            <div class="qf1_tit">仓库信息</div>
            <div class="qf1_time">
                <ul class="x3">
                    <li>
                        <div class="num c-hand" onclick="showVideo()">仓内视频</div>
                        <p class="c-hand" onclick="showVideo()">点击查看</p>
                    </li>
                    <li>
                        <div class="num" id="text_foodVariety">--</div>
                        <p>粮食品种</p>
                    </li>
                    <li>
                        <div class="num" id="text_storeKeeper">--</div>
                        <p>保管员</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="qf1_bx4">
            <div class="qf1_tit">仓库状态</div>
            <div class="icon">
                <img th:src="@{/img/dzhwk/n2/icon_sd02.png}">
            </div>
            <div class="tit" id="text_status">无气调操作</div>
        </div>
    </div>
    <div class="qf_box2">
        <div class="qf2_left">
            <div class="qf_tit" id="mac_name">库区制氮机</div>
            <div class="qf2_charts">
                <div class="start">
                    <img th:src="@{/img/dzhwk/n2/icon_kg.png}" id="mac_runImg"
                         style="margin: 15px 0 15px">
                    <div class="p2" id="mac_runStatus">开启</div>
                </div>
                <ul class="chart_ul">
                    <li>
                        <div id="chart1" class="charts"></div>
                    </li>
                    <li>
                        <div id="chart2" class="charts"></div>
                    </li>
                    <li>
                        <div id="chart3" class="charts"></div>
                    </li>
                </ul>
            </div>
            <div class="qf2_img">
                <img th:src="@{/img/dzhwk/n2/mac.gif}" style="margin-top: -5px;" id="mac_img">
                <img th:src="@{/img/dzhwk/n2/xt1.png}" class="xt">
            </div>
        </div>
        <div class="qf2_right">
            <div class="qf_tit">仓库阀门箱</div>
            <div class="qf2_img">
                <img th:src="@{/img/dzhwk/n2/3_box_00.png}" id="n2_box_img"
                     class="img_5">
            </div>
        </div>
    </div>
    <div class="floatBar">
        <ul>
            <li class="on"><a href="javascript:;" onclick="doExe('30')"> <i></i>
                <p>气密性检测</p>
            </a></li>
            <li class="on"><a href="javascript:;" onclick="doExe('01')"> <i></i>
                <p>抽负压</p>
            </a></li>
            <li class="on"><a href="javascript:;" onclick="doExe('03')"> <i></i>
                <p>充氮</p>
            </a></li>
            <li class="on"><a href="javascript:;" onclick="doExe('04')"> <i></i>
                <p>均氮</p>
            </a></li>
            <li class="on"><a href="javascript:;" onclick="doExe('02')"> <i></i>
                <p>排气</p>
            </a></li>
            <li class="on"><a href="javascript:;" onclick="showMacControl()"> <i></i>
                <p>制氮机控制</p>
            </a></li>
        </ul>
    </div>
</div>

<script th:inline="javascript">
    //仓库列表
    var listDepot = [{
        "bhId": "1",
        "buildingId": "91310114703439394M0010001",
        "checkDate": 1605542400000,
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "02",
        "depotTypeName": "浅圆仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0101",
        "name": "P01-01",
        "perImpurity": 0.36,
        "perWet": 13.7,
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1668700800000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "2",
        "buildingId": "91310114703439394M0010001",
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0102",
        "name": "P01-02",
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1667836800000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "3",
        "buildingId": "91310114703439394M0010002",
        "companyId": "5303",
        "depotStatus": "34",
        "depotStatusName": "封仓-温控中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2023",
        "id": "P0103",
        "name": "P01-03",
        "storageMax": 3000000,
        "storageReal": 2164420,
        "storeDate": 1635696000000,
        "storeKeeper": "xjh",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "徐佳昊",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "4",
        "buildingId": "91310114703439394M0010002",
        "companyId": "5303",
        "depotStatus": "32",
        "depotStatusName": "封仓-熏蒸中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1110000",
        "foodVarietyName": "小麦",
        "foodYear": "2024",
        "id": "P0104",
        "name": "P01-04",
        "storageMax": 3000000,
        "storageReal": 3000000,
        "storeDate": 1720454400000,
        "storeKeeper": "xjh",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "徐佳昊",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "5",
        "buildingId": "91310114703439394M0010003",
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "02",
        "foodLevelName": "二等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0105",
        "name": "P01-05",
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1604160000000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "6",
        "buildingId": "91310114703439394M0010003",
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0106",
        "name": "P01-06",
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1604160000000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }];
    //业务类型
    var bizType = null;
    //userId
    var userId = null;
    var companyId = null;
    var imgMap = null;
    var DEPOT_TYPE = "01"; //仓库类型
    var deptId = "1000";
    var depotId = "P0101";// å½“前仓库id，存在空情况
</script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/dzhwk/common/constant.js}"></script>
<script th:src="@{/dzhwk/common/igds-common.js}"></script>
<script th:src="@{/dzhwk/n2/n2-control.js}"></script>
</body>
</html>

 igds-dzhwk-web/src/main/resources/templates/dzhwk/n2.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>电子货位卡系统-仓储保管作业</title>

    <link rel="stylesheet" th:href="@{/dzhwk/style.css}"/>
</head>

<body class="">
<div class="screen-container">
    <div id="container">
        <div class="header">
            <div class="h-info">
                <div class="t">电子货位卡系统</div>
                - ä»“储保管作业
            </div>
            <a href="" class="logo">
                <img th:src="@{/img/dzhwk/logo.png}" alt="">
                <span>风正致远郑州直属库</span>
            </a>
            <div class="h-date">2025-03-26 10:10</div>
        </div>
        <div class="main">
            <div class="m-safeguardl">
                <div class="col-l g-boxl1">
                    <div class="m-picl">
                        <div class="pic">
<!--                            <img th:src="@{/img/dzhwk/imgl2.jpg}" alt="">-->
                            <iframe src="../dzhwk/n2-control" style="width: 100%;height: 853px;display: block;" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-r">
                    <ul class="ul-listl1 g-boxl1">
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('grain')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl2.png}" alt="">
                                </div>
                                <div class="tt">粮温检测</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('gas')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl3.png}" alt="">
                                </div>
                                <div class="tt">气体检测</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('pest')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl4.png}" alt="">
                                </div>
                                <div class="tt">虫害检测</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('verb')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl5.png}" alt="">
                                </div>
                                <div class="tt">通风作业</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('recir')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl6.png}" alt="">
                                </div>
                                <div class="tt">温控作业</div>
                            </a>
                        </li>
                        <li class="on">
                            <a href="javascript:void(0)" onclick="toPage('n2')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl7.png}" alt="">
                                </div>
                                <div class="tt">气调作业</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('security')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl8.png}" alt="">
                                </div>
                                <div class="tt">安全管理</div>
                            </a>
                        </li>
                    </ul>
                    <a href="javascript:void(0)" onclick="toPage('index')" class="g-backl">
                        <div class="icon">
                            <img th:src="@{/img/dzhwk/iconl1.png}" alt="">
                        </div>
                        <div class="tt">返回首页</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/dzhwk/common.js}"></script>
<script th:inline="javascript">
    var flag = [[${flag}]];
    var layer;
    $(function () {
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
    });
    //监听操作
    document.addEventListener('mousemove', resetTimeout);  //鼠标移动
    document.addEventListener('click', resetTimeout);      //鼠标点击
    document.addEventListener('touchstart', resetTimeout); //触屏

    timeFormate();
    setInterval(function () {
        timeFormate()
    }, 1000);
</script>
</body>
</html>

 igds-dzhwk-web/src/main/resources/templates/dzhwk/patrol.html

@@ -71,9 +71,9 @@
                            <div class="g-tableb1">
                                <ul class="ul-tableb1 thead">
                                    <li>
                                        <div class="td">开门人</div>
                                        <div class="td">开门方式</div>
                                        <div class="td">开门时间</div>
                                        <div class="td">巡检人</div>
                                        <div class="td">巡检类型</div>
                                        <div class="td">巡检时间</div>
                                    </li>
                                </ul>
                                <div class="swiper-container" id="sw">

 igds-dzhwk-web/src/main/resources/templates/dzhwk/recir-control.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,492 @@
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>温控作业</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/dzhwk/recir/recir-control.css}"/>
    <style>
        .margin-bottom10 {
            margin-bottom: 10px;
        }

        .img_device {
            /*     height: 85px; */
            cursor: pointer;
        }

        .device {
            position: absolute;
            cursor: pointer;
        }

        /*#device_view {*/
        /*    background: url('/img/web/depot/pfc_a.png') no-repeat 5px 5px;*/
        /*    width: 100%;*/
        /*    height: 570px;*/
        /*}*/

        .select-bottom {
            border-bottom: 3px solid #03ec45;
        }

        .left-input {
            width: 140px !important;
        }

        .control-btn1 {
            width: 170px !important;
            margin-top: 10px;
        }

        .control-btn2 {
            width: 110px !important;
            margin-top: 10px;
        }

        .areation-center {
            text-align: center;
        }

        .btn-bottom {
            margin-bottom: 1px;
        }

        .btn-right {
            border-right: 1px solid #7b8e9f;
        }

        .sdtf-top-item {
            height: 189px;
        }
    </style>
</head>
<body class="sdtf-body">

<div class="l-container ">

    <div class="l-main layui-clear">

        <div class="qt-left">

            <div class="qt-lTop layui-clear">
                <div class="qt-lTop-l fl">
                    <div class="qt-left1 layui-clear radius-6 box-shadow">
                        <form class="layui-form" action="">

                            <div class="layui-form-item lq-left1-from">
                                <label class="layui-form-label">仓库列表</label>
                                <div class="layui-input-block">
                                    <select name="depotId" id="depotId" lay-filter="select_depotId">
                                        <option value="P0101" type="01">P01</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-btn-group layui-row sdft-btn-group">
                                <button type="button"
                                        class="layui-btn layui-col-lg6 sdft-topbtn active js-tf-btn btn-bottom btn-right"
                                        onclick="toCut('01')">显示正面
                                </button>
                                <button type="button" class="layui-btn layui-col-lg6 sdft-topbtn js-tf-btn btn-bottom"
                                        onclick="toCut('02')">显示反面
                                </button>
                                <button type="button" class="layui-btn layui-col-lg6 sdft-topbtn js-tf-btn btn-right"
                                        style="margin-right: 1px" onclick="toCut('03')">显示左侧面
                                </button>
                                <button type="button" class="layui-btn layui-col-lg6 sdft-topbtn js-tf-btn"
                                        onclick="toCut('04')">显示右侧面
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
                <!--qt-lTop-l end-->

                <div class="layui-row qt-lTop-r fr">

                    <div class="layui-col-lg6">
                        <div class="radius-6 mr4 sdtf-top-item info1">
                            <div class="xg115-sdtf-tit">
                                <div class="xg115-sdtf-time">
                                    <i class="i-icon"><img
                                            th:src="@{/img/dzhwk/common/icon-time.png}"/></i> æ£€æµ‹æ—¶é—´ : <font
                                        id="updateTime">00:00:00</font>
                                </div>
                            </div>

                            <div class="layui-row sdft-listbox">

                                <ul class="sdft-list sdft-list2 xg115-tf-list1">
                                    <li><a href="#">
                                        <div class="xg115-num">
                                            <strong id="tempIn">#</strong><i>℃</i>
                                        </div>
                                        <p>仓内温</p>
                                    </a></li>
                                    <li><a href="#">
                                        <div class="xg115-num">
                                            <strong id="humidityIn">#</strong><i>%</i>
                                        </div>
                                        <p>仓内湿</p>
                                    </a></li>
                                    <li><a href="#">
                                        <div class="xg115-num">
                                            <strong id="tempOut">#</strong><i>℃</i>
                                        </div>
                                        <p>仓外温</p>
                                    </a></li>
                                    <li><a href="#">
                                        <div class="xg115-num">
                                            <strong id="humidityOut">#</strong><i>%</i>
                                        </div>
                                        <p>仓外湿</p>
                                    </a></li>

                                </ul>

                            </div>

                        </div>

                    </div>
                    <!--layui-col end-->


                    <div class="layui-col-lg6">
                        <div class="radius-6 mr4 sdtf-top-item info2">
                            <div class="sdtf-top-tit">
                                <h3>
                                    <span>仓库操作</span>
                                </h3>
                            </div>

                            <div class="layui-row sdft-listbox">

                                <ul class="sdft-list sdft-list2 xg115-tf-list">
                                    <li class="videolist"
                                        th:vpath="@{../../static/images/share-video_03.png}"
                                        th:ipath="@{../../static/video/ckin.mp4}"><a
                                            href="javascript:;" onclick="showVideo()"> <span
                                            class="sdft-list-icon6"></span>
                                        <p>视频查看</p>
                                    </a></li>

                                    <li><a href="javascript:;" onclick="closeAll()"> <span
                                            class="sdft-list-icon9"></span>
                                        <p>紧急全关</p>
                                    </a></li>
                                    <li><a href="javascript:;" onclick="queryStatus()"> <span
                                            class="sdft-list-icon10"></span>
                                        <p>更新状态</p>
                                    </a></li>
                                </ul>

                            </div>

                        </div>

                    </div>
                    <!--layui-col end-->

                </div>
                <!-- qt-lTop-r end-->


            </div>
            <!--qt-lTop end-->

            <div class="qt-picBox">

                <div id="device_view">
                    <img style="width: 100%;height: 630px" th:src="@{/img/dzhwk/depot/pfc_a.png}"/>
                </div>
            </div>
            <!--qt-picBox end-->


        </div>
        <!--qt-left end-->


        <div class="qt-right">
            <div class="sdtf-r1 radius-6">

                <div class="sdtf-r1-show">
                    <img th:src="@{/img/dzhwk/common/sdtf-show_03.png}"/>
                </div>

                <div class="xg115-btnhide">
                    <div class="layui-row sdtf-r1-btnbox">
                        <div class="layui-col-lg6 sdtf-r1-btn1">
                            <button type="button" class="layui-btn" onclick="dragDevice()">设备移动</button>
                        </div>
                        <div class="layui-col-lg6 sdtf-r1-btn2">
                            <button type="button" class="layui-btn layui-btn-danger"
                                    onclick="updatePos()">位置保存
                            </button>
                        </div>
                    </div>
                </div>

                <a href="#" class="xg115-arrow js-xg115-arrow"></a>

            </div>
            <!--sdtf-r1 end-->


            <!-- è°ƒæ•´ä¸ºæ“ä½œæ—¥å¿—信息 -->
            <div class="qt-rTable-box radius-6" style="height: 300px;">
                <div class="layui-card-header"
                     style="background: rgb(222,230,236);font-weight: bold;border-bottom:3px solid #FFF;">操作日志
                </div>
                <div id="areationInfo" style="min-height: 445px;background: rgb(222,230,236);;"></div>
            </div>

            <!--qt-rTable-box end-->
        </div>
        <!--qt-right end-->
    </div>
    <!--l-main end-->
</div>
<!--l-container end-->

<div class="shade"></div>

<script th:inline="javascript">
    //仓库列表
    var listDepot = [{
        "bhId": "1",
        "buildingId": "91310114703439394M0010001",
        "checkDate": 1605542400000,
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "02",
        "depotTypeName": "浅圆仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0101",
        "name": "P01-01",
        "perImpurity": 0.36,
        "perWet": 13.7,
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1668700800000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "2",
        "buildingId": "91310114703439394M0010001",
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0102",
        "name": "P01-02",
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1667836800000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "3",
        "buildingId": "91310114703439394M0010002",
        "companyId": "5303",
        "depotStatus": "34",
        "depotStatusName": "封仓-温控中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2023",
        "id": "P0103",
        "name": "P01-03",
        "storageMax": 3000000,
        "storageReal": 2164420,
        "storeDate": 1635696000000,
        "storeKeeper": "xjh",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "徐佳昊",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "4",
        "buildingId": "91310114703439394M0010002",
        "companyId": "5303",
        "depotStatus": "32",
        "depotStatusName": "封仓-熏蒸中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1110000",
        "foodVarietyName": "小麦",
        "foodYear": "2024",
        "id": "P0104",
        "name": "P01-04",
        "storageMax": 3000000,
        "storageReal": 3000000,
        "storeDate": 1720454400000,
        "storeKeeper": "xjh",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "徐佳昊",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "5",
        "buildingId": "91310114703439394M0010003",
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "02",
        "foodLevelName": "二等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0105",
        "name": "P01-05",
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1604160000000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }, {
        "bhId": "6",
        "buildingId": "91310114703439394M0010003",
        "companyId": "5303",
        "depotStatus": "4",
        "depotStatusName": "出库中",
        "depotType": "01",
        "depotTypeName": "平房仓",
        "deptId": "5303_001",
        "foodLevel": "01",
        "foodLevelName": "一等",
        "foodLocation": "上海市",
        "foodType": "122",
        "foodTypeName": "区级地方储备粮",
        "foodVariety": "1130000",
        "foodVarietyName": "稻谷",
        "foodYear": "2022",
        "id": "P0106",
        "name": "P01-06",
        "storageMax": 3000000,
        "storageReal": 0,
        "storeDate": 1604160000000,
        "storeKeeper": "wmf",
        "storeKeeperLevel": "高级保管员",
        "storeKeeperName": "王美福",
        "storeKeeperPhone": "####",
        "storeType": "1"
    }];
    //业务类型
    var bizType = null;
    //userId
    var userId = null;
    var companyId = null;
    var imgMap = null;
    var DEPOT_TYPE = "01"; //仓库类型
    var deptId = "1000";
    var depotId = "P0101";// å½“前仓库id，存在空情况
</script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/dzhwk/common/constant.js}"></script>
<script th:src="@{/dzhwk/common/igds-common.js}"></script>
<script th:src="@{/dzhwk/drag/drag-drop.js}"></script>
<script th:src="@{/dzhwk/recir/recir-renderDevice-pfc.js}"></script>
<script th:src="@{/dzhwk/recir/recir-control-pfc.js}"></script>
</body>

<!-- å¼¹å‡ºæ“ä½œæ¡† -->
<div class="layui-tab-content" id="tempControl" style="display: none;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">开关操作：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="targetStatus" lay-skin="switch"
                       lay-text="空调开|空调关">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设定温度：</label>
            <div class="layui-input-inline">
                <input type="text" name="targetTemp" autocomplete="off"
                       placeholder="16℃-24℃ ï¼Œé»˜è®¤16℃" class="layui-input"
                       id="targetTemp">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">空调模式：</label>
            <div class="layui-input-block">
                <input type="radio" name="targetModel" value="01" title="制冷"
                       checked=""> <input type="radio" name="targetModel"
                                          value="02" title="通风">
            </div>
        </div>
    </form>
</div>
<!-- å¼¹å‡ºæ¡†-环流风机-->
<div class="layui-tab-content areation-center" id="control-HL2"
     style="display: none;">
    <div class="layui-btn-container m10">
        <button class="rkbk-quick-btn btn-fj layui-btn btn-blue"
                onClick="toExecute('F_OPEN')">
            <i><img th:src="@{/img/dzhwk/common/icon-sm-fj.png}"/></i>开风机
        </button>
        <button class="rkbk-quick-btn btn-fj layui-btn btn-red"
                onClick="toExecute('F_CLOSE')">
            <i><img th:src="@{/img/dzhwk/common/icon-sm-fj.png}"/></i>关风机
        </button>
    </div>
</div>

</html>

 igds-dzhwk-web/src/main/resources/templates/dzhwk/recir.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>电子货位卡系统-仓储保管作业</title>

    <link rel="stylesheet" th:href="@{/dzhwk/style.css}"/>
</head>

<body class="">
<div class="screen-container">
    <div id="container">
        <div class="header">
            <div class="h-info">
                <div class="t">电子货位卡系统</div>
                - ä»“储保管作业
            </div>
            <a href="" class="logo">
                <img th:src="@{/img/dzhwk/logo.png}" alt="">
                <span>风正致远郑州直属库</span>
            </a>
            <div class="h-date">2025-03-26 10:10</div>
        </div>
        <div class="main">
            <div class="m-safeguardl">
                <div class="col-l g-boxl1">
                    <div class="m-picl">
                        <div class="pic">
<!--                            <img th:src="@{/img/dzhwk/imgl2.jpg}" alt="">-->
                            <iframe src="../dzhwk/recir-control" style="width: 100%;height: 853px;display: block;" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-r">
                    <ul class="ul-listl1 g-boxl1">
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('grain')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl2.png}" alt="">
                                </div>
                                <div class="tt">粮温检测</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('gas')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl3.png}" alt="">
                                </div>
                                <div class="tt">气体检测</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('pest')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl4.png}" alt="">
                                </div>
                                <div class="tt">虫害检测</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('verb')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl5.png}" alt="">
                                </div>
                                <div class="tt">通风作业</div>
                            </a>
                        </li>
                        <li class="on">
                            <a href="javascript:void(0)" onclick="toPage('recir')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl6.png}" alt="">
                                </div>
                                <div class="tt">温控作业</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('n2')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl7.png}" alt="">
                                </div>
                                <div class="tt">气调作业</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="toPage('security')" class="con">
                                <div class="icon">
                                    <img th:src="@{/img/dzhwk/iconl8.png}" alt="">
                                </div>
                                <div class="tt">安全管理</div>
                            </a>
                        </li>
                    </ul>
                    <a href="javascript:void(0)" onclick="toPage('index')" class="g-backl">
                        <div class="icon">
                            <img th:src="@{/img/dzhwk/iconl1.png}" alt="">
                        </div>
                        <div class="tt">返回首页</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/dzhwk/common.js}"></script>
<script th:inline="javascript">
    var flag = [[${flag}]];
    var layer;
    $(function () {
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
    });
    //监听操作
    document.addEventListener('mousemove', resetTimeout);  //鼠标移动
    document.addEventListener('click', resetTimeout);      //鼠标点击
    document.addEventListener('touchstart', resetTimeout); //触屏

    timeFormate();
    setInterval(function () {
        timeFormate()
    }, 1000);
</script>
</body>
</html>