视频监管添加库区AI事件展示

sgj

6 小时以前 ca18c1315a7dcab0238893bcf68cd34f0ef5fe35

视频监管添加库区AI事件展示

 fzzy-igdss-web/src/main/resources/static/group/video.css

@@ -318,7 +318,7 @@
    height: 255px;
    background: url("../img/web/group/left-box1-monitor.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 30px;
    margin-bottom: 18px;
    padding: 36px 20px 8px 20px;
    box-sizing: border-box;
}
@@ -362,13 +362,14 @@
}

.left-m2 {
    background: url("../img/web/group/left-box2.png") no-repeat;
    width: 100%;
    height: 362px;
    box-sizing: border-box;
    margin-bottom: 18px;
    position: relative;
    width: 430px;
    height: 610px;
    background: url("../img/web/group/left-box2-monitor.png") no-repeat;
    background-size: 100% 100%;
    padding: 56px 20px 20px 20px;
    box-sizing: border-box;
}


@@ -379,7 +380,7 @@
    background: url("../img/web/group/left-m2-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    font-size: 14px;
    font-size: 3px;
    color: #91ceff;
    box-sizing: border-box;
}
@@ -392,7 +393,6 @@
.left-m2 .panel-content .panel-content-head .head-item {
    flex: 1;
}


.left-m2 .panel-content .panel-content-body {
    width: 100%;
@@ -418,18 +418,84 @@
    height: 30px;
    line-height: 30px;
    display: flex;
    margin-top: 6px;
}

.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
    flex: 1;
    font-size: 3px;
    color: #ffffff;
}



.left-m3 {
    width: 100%;
    height: 242px;
    background: url("../img/web/group/left-box3.png") no-repeat;
    box-sizing: border-box;
    position: relative;
    background-size: 100% 100%;
    padding: 56px 20px 20px 20px;
}


.left-m3 .panel-content .panel-content-head {
    width: 100%;
    height: 31px;
    line-height: 31px;
    background: url("../img/web/group/left-m2-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    font-size: 14px;
    color: #91ceff;
    box-sizing: border-box;
}

.left-m3 .head-item,
.left-m3 .body-item {
    text-align: center;
}

.left-m3 .panel-content .panel-content-head .head-item {
    flex: 1;
}

.left-m3 .panel-content .panel-content-body {
    width: 100%;
    height: calc(100% - 2vw);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}

.left-m3 .panel-content .panel-content-body::-webkit-scrollbar {
    width: 6px;
    background-color: rgba(51, 238, 255, 0.2);
}

.left-m3 .panel-content .panel-content-body::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3);
    background-color: rgba(2, 158, 249, 0.5);
    border-radius: 3px;
}

.left-m3 .panel-content .panel-content-body .panel-content-body-tr {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    padding-top: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #4c5354c7;
}

.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
.left-m3 .panel-content .panel-content-body .panel-content-body-tr .body-item {
    flex: 1;
    font-size: 14px;
    color: #ffffff;
    user-select: none;
}


.panel-box1-item{
    width: 100%;
@@ -716,7 +782,7 @@
.data-top-btn:last-child{
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px);
	

}

.data-top-btn:first-child{
@@ -768,7 +834,7 @@
    min-width: 100%;
    height: 448px;
    overflow: auto;
	

}

.data-tableBox::-webkit-scrollbar {

 fzzy-igdss-web/src/main/resources/static/group/video.js

@@ -6,7 +6,11 @@
var cameraIndex = 0;  //监控下标
var cameraTimer;     // 库区定时
var windowsNum = 1; //
var gundongTimer;     //监控列表滚动定时器
var gundongTimer;     //AI事件滚动其
var gundongTimer1;     //监控列表滚动定时器


var eventDeptList = null;

$(function () {
    // 初始化页面
@@ -24,10 +28,15 @@
    initDicSlogan();

    //监控点信息适应滚动
    initScrollbar(60);
    initScrollbar1(60);


    //库区信息
    renderDeptArea();

    //请求监管库区信息
    ajaxDeptList();
    initScrollbar(60);
}

// socket信息返回處理
@@ -38,6 +47,83 @@
        dicSlogan = data;
        initDicSlogan();
    }
}


/**
 * 请求获取库区相关信息
 */
function ajaxDeptList() {
    deptList = null;
    $.ajax({
        type: "POST",
        url: "/group/index-dept-list",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "companyId": companyId
        }),
        success: function (result) {
            if (result.code == "0000") {
                eventDeptList = result.data;
                renderMsg();
            }
        },
        error: function (error) {

        }
    });
}

/**
 * 更新AI动态分析
 * @param data
 */
function renderMsg() {
    var html = '';
    var num1 = '';
    var num7 = '';
    var flag = false;
    if (eventDeptList != null && eventDeptList.length > 0) {
        $.each(eventDeptList, function (index, item) {
            if (item.dailyTotal === 0) {
                num1 = '当日一切正常';
            } else if (item.dailyTotal < 0) {
                num1 = '未检测到网关';
            } else {
                num1 = '当日数量' + item.dailyTotal + '个';
            }
            if (item.warnNum7 === 0) {
                num7 = '近七天一切正常';
            } else {
                num7 = '近七天数量' + item.warnNum7 + '个';
            }
            html += '<div class="panel-content-body-tr">';
            if (item.dailyTotal > 0) {
                flag = true;
            }
            // if (item.warnNum7 > 10) {
            //     flag = true;
            //     html += '<span class="body-item sp" style="color: #bc2032;flex: 1.5;">' + item.deptName + '</span>';
            //     html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>';
            //     html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>';
            // } else if (item.warnNum7 > 1 && item.warnNum7 < 10) {
            //     flag = true;
            //     html += '<span class="body-item sp" style="color: #f37b3d;flex: 1.5;">' + item.deptName + '</span>';
            //     html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>';
            //     html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>';
            // }else {
            html += '<span class="body-item sp" style="flex: 1.5;">' + item.deptName + '</span>';
            html += '<span class="body-item sp">' + num1 + '</span>';
            html += '<span class="body-item sp">' + num7 + '</span>';
            // }
            html += '</div>';
        })
    }
    if (flag) {
        $("#panel-title").html('库区AI事件信息  <i class="dot"></i>');
    }
    $("#inventoryInfo").html(html);
}

// 渲染库区信息
@@ -103,7 +189,7 @@
        html += '<span class="body-item" style="flex: 0.6"></span>';
        html += '</div>';
    }
    $("#inventoryInfo").html(html);
    $("#inventoryInfo1").html(html);

    cameraSwitch1();
}
@@ -337,6 +423,26 @@
    return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
}

//监控点信息滚动
function initScrollbar1(num) {
    gundongTimer1 = setInterval(function () {
        if (!hasScrollbar1()) {
            document.getElementById('inventoryInfoBox1').scrollTop = 0;
        } else {
            if (document.getElementById('inventoryInfoBox1').scrollTop >= (document.getElementById('inventoryInfo1').clientHeight - document.getElementById('inventoryInfoBox1').clientHeight)) {
                document.getElementById('inventoryInfoBox1').scrollTop = 0;
            } else {
                document.getElementById('inventoryInfoBox1').scrollTop++;
            }
        }
    }, num);
}

//判断底部是否出现滚动条
function hasScrollbar1() {
    return document.getElementById('inventoryInfo1').clientHeight > document.getElementById('inventoryInfoBox1').clientHeight;
}

// 右下角提醒信息
function showTip(msg) {
    layer.msg(msg);

 fzzy-igdss-web/src/main/resources/templates/group/video.html

@@ -108,26 +108,73 @@
            width: unset;
        }
        .right-videoWrap {
             height: unset;
            height: unset;
        }
        .left-m2 .panel-content .panel-content-body .panel-content-body-tr {
             padding-top: unset;
            height: 40px;
        /* ========== AI事件列表核心样式 ========== */
        .left-m2 .panel-content .panel-content-head {
            line-height: 40px;
            font-size: 18px;
            display: flex; /* 表头flex布局，精准分配列宽 */
            width: 100%;
        }
        /* 表头列宽精准分配：所属库点占比最高，近七天数量预留足够宽度防换行 */
        .left-m2 .panel-content .panel-content-head .head-item:nth-child(1) {
            flex: 2; /* 所属库点：宽列，适配长名称 */
            white-space: nowrap; /* 强制不换行 */
            text-align: center;
        }
        .left-m2 .panel-content .panel-content-head .head-item:nth-child(2) {
            flex: 1.2; /* 当日分析：中等宽度 */
            white-space: nowrap; /* 强制不换行 */
            text-align: center;
        }
        .left-m2 .panel-content .panel-content-head .head-item:nth-child(3) {
            flex: 1.2; /* 近七天数量：加宽列宽，强制不换行 */
            white-space: nowrap; /* 核心：禁止表头换行 */
            text-align: center;
        }
        /* 列表项样式：完整展示文字，自适应行高 */
        .left-m2 .panel-content .panel-content-body .panel-content-body-tr {
            padding-top: unset;
            height: auto; /* 自适应行高 */
            line-height: 22px; /* 适配换行后的行间距 */
            padding: 8px 2px;
            display: flex; /* 和表头列宽对齐 */
            width: 100%;
            box-sizing: border-box;
        }
        .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
            font-size: 18px;
            font-size: 16px;
            padding: 0 8px;
            white-space: normal; /* 列表项允许换行，完整展示内容 */
            word-wrap: break-word; /* 长文本强制换行 */
            text-align: center;
            box-sizing: border-box;
        }
        .left-m2 .panel-content .panel-content-head {
            line-height: unset;
            font-size: 18px;
        /* 列表项列宽和表头严格对齐 */
        .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item:nth-child(1) {
            flex: 2;
        }
        .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item:nth-child(2) {
            flex: 1.2;
        }
        .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item:nth-child(3) {
            flex: 1.2;
        }
        /* ========== 核心样式结束 ========== */
        .text_select_play {
            font-size: 16px;
        }
        .video {
            width: 100%;
            height: 100%;
        }
        /* 列表容器：内容过多时滚动，不挤压布局 */
        #inventoryInfoBox {
            width: 100%;
            box-sizing: border-box;
            overflow-y: auto;
            max-height: 300px;
        }
    </style>
</head>
@@ -192,7 +239,29 @@
            </div><!-- i-m1 end -->
            <div class="left-m2">
                <div>
                    <div class="panel-title" id="panel-title">监控点信息</div>
                    <div class="panel-title" id="panel-title">库区AI事件信息</div>
                </div>
                <div class="panel-content">
                    <div class="panel-content-head">
                        <span class="head-item">所属库点</span>
                        <span class="head-item">当日分析</span>
                        <span class="head-item">近七天数量</span> <!-- 修正表头文字，取消换行 -->
                    </div>

                    <div class="panel-content-body" id="inventoryInfoBox">
                        <div id="inventoryInfo">
                            <!--                            <div class="panel-content-body-tr">-->
                            <!--                                <span class="body-item">安防-北围墙1</span>-->
                            <!--                                <span class="body-item">枪机</span>-->
                            <!--                                <span class="body-item">12</span>-->
                            <!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-m3">
                <div>
                    <div class="panel-title" id="panel-title1">监控点信息</div>
                </div>
                <div class="panel-content">
                    <div class="panel-content-head">
@@ -200,8 +269,8 @@
                        <span class="head-item" style="flex: 0.6">监控类型</span>
                    </div>

                    <div class="panel-content-body" id="inventoryInfoBox">
                        <div id="inventoryInfo">
                    <div class="panel-content-body" id="inventoryInfoBox1">
                        <div id="inventoryInfo1">
                            <div class="panel-content-body-tr">
                                <span class="body-item" style="flex: 1.4">安防-北围墙1</span>
                                <span class="body-item" style="flex: 0.6">枪机</span>
@@ -409,6 +478,7 @@
    var dicSlogan = [[${dicSlogan}]];
    var deptList = [[${deptList}]];


    //设置定时刷新页面，主要为了防止掉线
    var timer2;
    window.onload = function () {
@@ -421,4 +491,4 @@
    };
</script>
</body>
</html>
</html>