sgj
2026-01-17 a869d02d89dd34ca325fb03bff64fc9b3dafd17d
fzzy-igdss-web/src/main/resources/static/security/snap/snapRecord.js
@@ -1,6 +1,40 @@
var layer;
var laypage;
// 监听收储公司 Select2 变化
$(document).ready(function() {
    // 监听收储公司下拉框变化
    $('select[name="key"]').on('change', function() {
        var selectedParentId = $(this).val();
        if(selectedParentId) {
            getSelectData(selectedParentId);
        } else {
            // 如果清空了收储公司选择,也清空库区选项
            var $deptSelect = $('select[name="deptId"]');
            $deptSelect.empty()
                .append('<option value="">所有</option>')
                .select2({
                    placeholder: "请选择库区",
                    allowClear: true,
                    width: 'resolve'
                });
        }
    });
    // 在点击库区下拉框时,仅验证而不发起新请求
    $('select[name="deptId"]').on('select2:opening', function(e) {
        var selectedParentId = $('select[name="key"]').val();
        if(!selectedParentId) {
            e.preventDefault();
            layer.msg('请先选择收储公司');
            return false;
        }
        // 不在此处发起请求,依赖 change 事件时的预加载
        return true;
    });
});
$(function () {
    // 初始化分页
    layui.use(['laypage', 'layer'], function () {
@@ -15,6 +49,67 @@
    initImagePreview();
});
// 修改 getSelectData 函数,支持 Select2 的数据格式
function getSelectData(parentId) {
    if(!parentId) {
        return layer.msg('请选择收储公司');
    }
    $.ajax({
        url: "../../system/dept-new/getDeptByUserType",
        type: 'POST',
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: parentId,
        success: function (response) {
            if (response) {
                deptList = response;
                // 重新初始化 Select2 或更新选项
                updateDeptSelect2Options(deptList);
            } else {
                layer.msg(response.msg || '数据加载失败');
            }
        },
        error: function (xhr, status, error) {
            layer.msg('数据加载失败');
        }
    });
}
// 更新 Select2 下拉框选项
function updateDeptSelect2Options(deptList) {
    var $deptSelect = $('select[name="deptId"]');
    // 保存当前选中的值
    var currentVal = $deptSelect.val();
    // 清空现有选项
    $deptSelect.empty();
    // 添加"所有"选项
    $deptSelect.append('<option value="">所有</option>');
    // 添加动态数据选项
    if(deptList && deptList.length > 0) {
        deptList.forEach(function(dept) {
            $deptSelect.append('<option value="' + dept.id + '">' + dept.kqmc + '</option>');
        });
    }
    // 重新初始化 Select2
    $deptSelect.select2({
        placeholder: "请选择库区",
        allowClear: true,
        width: 'resolve'
    });
    // 恢复之前的选择
    if(currentVal) {
        $deptSelect.val(currentVal).trigger('change');
    }
}
/**
 * 初始化分页组件
 */
@@ -24,7 +119,9 @@
        count: typeof totalItems !== 'undefined' ? totalItems : 0,
        limit: typeof pageSize !== 'undefined' ? pageSize : 6,
        curr: typeof currentPage !== 'undefined' ? currentPage : 1,
        layout: [ 'prev', 'page', 'next', 'refresh', 'skip'],
        layout: ['prev', 'page', 'next', ],
        // prev: '<i class="layui-icon layui-icon-left"></i>',
        // next: '<i class="layui-icon layui-icon-right"></i>',
        jump: function (obj, first) {
            if (!first) {
                searchRecord(obj.curr, obj.limit)
@@ -45,7 +142,9 @@
        count: totalCount,
        limit: pageSize,
        curr: currentPage,
        layout: ['prev', 'page', 'next', 'refresh', 'skip'],
        layout: ['prev', 'page', 'next', ],
        // prev: '<i class="layui-icon layui-icon-left"></i>',
        // next: '<i class="layui-icon layui-icon-right"></i>',
        jump: function (obj, first) {
            if (!first) {
                searchRecord(obj.curr, obj.limit)
@@ -94,7 +193,8 @@
    // 添加表单查询条件
    var form = document.getElementById('snapRecord-form');
    if (form) {
        var inputs = form.querySelectorAll('input[name], select[name]');
        // 处理普通输入框和选择框
        var inputs = form.querySelectorAll('input[name]:not([type="hidden"]), select[name]');
        inputs.forEach(function(input) {
            if (input.value) { // 只添加非空值
                params[input.name] = input.value;
@@ -136,52 +236,95 @@
    // 生成图片卡片
    var html = '';
    records.forEach(function(record) {
        //标签展示
        var tagsHtml = '';
        if (record.tags) {
            var tags = record.tags.split(',');
            tags.forEach(function(tag) {
                tagsHtml += `
            <span class="tag-person">
                <i class="layui-icon layui-icon-note"></i>
                <span>${tag.trim()}</span>
            </span>
        `;
            });
        }
        html += `
            <div class="gallery-item">
                <img  src="${record.imgName || '/logo-sm.png'}" alt="${record.id}"
                     data-url="${record.imgName || '/logo-sm.png'}" data-id="${record.id}"
                     class="gallery-img" onclick="showSnapRecordPreview(this.getAttribute('data-url'))">
                <div class="gallery-info">
                    <div class="gallery-header">
<!--                        <h3 class="gallery-title">${record.id}</h3>-->
                        <div class="gallery-tags">
                            <span class="tag-person">
                                <i class="layui-icon layui-icon-note"></i>
                                <span>汽车</span>
                            </span>
                            <span class="tag-person">
                                <i class="layui-icon layui-icon-note"></i>
                                <span>卡车</span>
                            </span>
                            <span class="tag-person">
                                <i class="layui-icon layui-icon-note"></i>
                                <span>翻斗车</span>
                            </span>
                        </div>
                    </div>
                    <div class="gallery-meta">
                         <div style="display: flex; align-items: center; gap: 15px;width: 100%">
                             <div class="meta-item" style="width: 50%">
                                <i class="layui-icon layui-icon-video"></i>
                                <span>${record.cameraId || ''}</span>
                            </div>
                            <div class="meta-item" style="width: 50%">
                                <i class="layui-icon layui-icon-date"></i>
                                <span>${formatDate(record.snapTime)}</span>
                            </div>
                         </div>
                        <div class="meta-item">
                            <i class="layui-icon layui-icon-home"></i>
                            <span>${record.deptId || ''}</span>
                        </div>
                    </div>
    <div class="gallery-item">
        <img  src="${record.imgName || '/logo-sm.png'}" alt="${record.id}"
             data-url="${record.imgName || '/logo-sm.png'}" data-id="${record.id}"
             class="gallery-img" onclick="showSnapRecordPreview(this.getAttribute('data-url'))">
        <div class="gallery-info">
            <div class="gallery-header">
                <div class="gallery-tags">
                    ${tagsHtml}
                </div>
            </div>
        `;
            <div class="gallery-meta">
                 <div style="display: flex; align-items: center; gap: 15px;width: 100%">
                     <div class="meta-item" style="width: 50%">
                        <i class="layui-icon layui-icon-video"></i>
                        <span>${getCameraName(record.cameraId) || record.cameraId || ''}</span>
                    </div>
                    <div class="meta-item" style="width: 50%">
                        <i class="layui-icon layui-icon-date"></i>
                        <span>${formatDate(record.snapTime)}</span>
                    </div>
                 </div>
                 <div class="meta-item">
                    <i class="layui-icon layui-icon-home"></i>
                    <span>${getDeptName(record.deptId) || record.deptId || ''}</span>
                 </div>
            </div>
        </div>
    </div>
`;
    });
    container.innerHTML = html;
}
/**
 * 根据摄像头ID获取摄像头名称
 * @param {string} cameraId - 摄像头ID
 * @returns {string|null} 摄像头名称或null
 */
function getCameraName(cameraId) {
    // 确保cameraList存在且为数组
    if (typeof cameraList !== 'undefined' && Array.isArray(cameraList) && cameraId) {
        // 查找匹配的摄像头对象
        var camera = cameraList.find(function(item) {
            return item.id === cameraId;
        });
        // 返回摄像头名称,如果找不到则返回null
        return camera ? camera.name : null;
    }
    return null;
}
/**
 * 根据库区ID获取库区名称
 * @param {string} deptId - 摄像头ID
 * @returns {string|null} 摄像头名称或null
 */
function getDeptName(deptId) {
    // 确保deptList存在且为数组
    if (typeof deptList !== 'undefined' && Array.isArray(deptList) && deptId) {
        // 查找匹配的摄像头对象
        var dept = deptList.find(function(item) {
            return item.id === deptId;
        });
        // 返回摄像头名称,如果找不到则返回null
        return dept ? dept.kqmc : null;
    }
    return null;
}
/**
 * 格式化日期
@@ -288,14 +431,6 @@
    });
}
function openConf() {
    var url = ctx + "com.fzzy.igds.SnapConf.d";
    var options = {
        title: "抓拍配置",
        url: url,
        btn: 0,
        yes: function (index, layero) {
            $.modal.close(index);
        }
    };
    $.modal.openOptions(options);
    var url = ctx + "com.fzzy.igds.ConfByDept.d";
    $.modal.openTab("库区配置", url);
}