数量检测提交1-页面数据交互

czt

2026-01-08 51603d9354ddef5d8960fe0e6b3e21059da5ff66

 fzzy-igdss-web/src/main/resources/static/security/quantity.js

@@ -1,6 +1,12 @@
var layer;
var form;
var curCamera;
var firstQuantity;
var hisChart = null;   //曲线图
var listRecord;
var fileRecord;
var names = ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07'];
var data = [2560000, 2510000, 2540000, 2530000, 2490000, 2610000, 2570000];

layui.use(['layer'], function () {
    form = layui.form;
@@ -22,17 +28,13 @@
    //选择摄像头后触发的事件
    const cameraSelect = document.getElementById('select-camera');
    cameraSelect.addEventListener('change', function() {
        const selectedCamera = this.value;
        //console.log("--------------"+selectedCamera);
        video(selectedCamera);
        const selectId = this.value;

        // 更新温度走势图
        // updateEchartsTemp(selectedCamera);
        ajaxData(selectId);
    });


    // 初始化ECharts温度走势图
    initEchartsTemp();
    // 初始化走势图
    initEcharts(names, data);

});

@@ -40,39 +42,283 @@
 * 视频播放
 * @param selectId
 */
function video(selectId) {
function ajaxData(selectId) {
    curCamera = null;
    //从列表中获取摄像头信息
    curCamera = listCamera.find(camera => camera.id === selectId);
    if (!curCamera) { layer.msg('没有获取到当前摄像头信息……', {icon: 1, time: 1200});}
    curCamera = listCamera.find(camera => camera.depotId === selectId);
    if (!curCamera) {
        layer.msg('没有获取到当前摄像头信息……', {icon: 1, time: 1200});
        return;
    }

    //获取视频
    video();

    //渲染走势图
    ajaxEcharts();

    //渲染记录
    ajaxListRecord();

    //渲染抓拍图
    ajaxSnapImg();
}

/**
 * 更新温度走势图
 * @param selectId
 * 请求图表信息
 */
function updateEchartsTemp(selectId) {
function ajaxSnapImg() {
    if(!firstQuantity){
        renderSnapImg();
        return;
    }
    fileRecord = null;
    var data = {
        cameraId: selectId
        key: firstQuantity.batchId
    };
    $.ajax({
        type: 'POST',
        url: "/security/infrared/chart-data",
        url: "/security/quantity-files",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            //layer.msg("信息更新完成！！");
            if (result.code != "SUCCESS") {
                renderSnapImg();
            } else {
                fileRecord = result.data;
                renderSnapImg();
            }
        },
        error: function (result) {
           // layer.msg(result.msg);
            renderSnapImg();
        }
    });
}

/**
 * 渲染抓图
 * @returns {null}
 */
function renderSnapImg() {

    if (!fileRecord) return null;

    if (fileRecord.length === 0) return null;

    var record = fileRecord[0];
    if (record) {
        $("#file-time1").text(record.createTime);
        $("#file-img1").attr("src", record.filePath);
    } else {
        $("#file-time1").text("----");
        $("#file-img1").attr("src", "/img/web/security/p-snap.jpg");
    }

    record = fileRecord[1];
    if (record) {
        $("#file-time2").text(record.createTime);
        $("#file-img2").attr("src", record.filePath);
    } else {
        $("#file-time2").text("----");
        $("#file-img2").attr("src", "/img/web/security/p-snap.jpg");
    }

    record = fileRecord[2];
    if (record) {
        $("#file-time3").text(record.createTime);
        $("#file-img3").attr("src", record.filePath);
    } else {
        $("#file-time3").text("----");
        $("#file-img3").attr("src", "/img/web/security/p-snap.jpg");
    }

    record = fileRecord[3];
    if (record) {
        $("#file-time4").text(record.createTime);
        $("#file-img4").attr("src", record.filePath);
    } else {
        $("#file-time4").text("----");
        $("#file-img4").attr("src", "/img/web/security/p-snap.jpg");
    }
}


/**
 * 请求图表信息
 */
function ajaxEcharts() {
    var data = {
        depotId: curCamera.depotId
    };
    $.ajax({
        type: 'POST',
        url: "/security/quantity-chart",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                renderEcharts(null);
            } else {
                renderEcharts(result.data);
            }
        },
        error: function (result) {
            renderEcharts(null);
        }
    });
}

/**
 * 渲染图表
 * @param chartData
 */
function renderEcharts(chartData) {
    var chart = hisChart;
    if (chartData && chartData.xaxis.length > 0 && chartData.seriesData.length > 0) {
        chart.option.xAxis.data = chartData.xaxis;
        chart.option.series[0].data = chartData.seriesData;
        chart.chart.setOption(chart.option, true);
    } else {
        chart.option.xAxis.data = names;
        chart.option.series[0].data = data;
        chart.chart.setOption(chart.option, true);
    }
    hisChart = chart;
}

/**
 * 请求记录
 */
function ajaxListRecord() {
    firstQuantity = null;
    listRecord = null;
    var data = {
        depotId: curCamera.depotId
    };
    $.ajax({
        type: 'POST',
        url: "/security/quantity-list",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                renderListRecord();
            } else {
                listRecord = result.data;
                renderListRecord();
            }
        },
        error: function (result) {
            renderListRecord();
        }
    });
}

/**
 * 渲染记录
 * @returns {null}
 */
function renderListRecord() {

    if (!listRecord) return null;

    if (listRecord.length === 0) return null;

    var record = listRecord[0];
    if (record) {
        firstQuantity = record;
        $("#record_title1").text("检测重量：" + record.weight + " KG");
        $("#record_time1").text(record.receiveDate);
        $("#record_content1").text(record.remark);
    } else {
        $("#record_title1").text("检测重量：---- KG");
        $("#record_time1").text("----");
        $("#record_content1").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }

    record = listRecord[1];
    if (record) {
        $("#record_title2").text("检测重量：" + record.weight + " KG");
        $("#record_time2").text(record.receiveDate);
        $("#record_content2").text(record.remark);
    } else {
        $("#record_title2").text("检测重量：---- KG");
        $("#record_time2").text("----");
        $("#record_content2").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }

    record = listRecord[2];
    if (record) {
        $("#record_title3").text("检测重量：" + record.weight + " KG");
        $("#record_time3").text(record.receiveDate);
        $("#record_content3").text(record.remark);
    } else {
        $("#record_title3").text("检测重量：---- KG");
        $("#record_time3").text("----");
        $("#record_content3").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }

    record = listRecord[3];
    if (record) {
        $("#record_title4").text("检测重量：" + record.weight + " KG");
        $("#record_time4").text(record.receiveDate);
        $("#record_content4").text(record.remark);
    } else {
        $("#record_title4").text("检测重量：---- KG");
        $("#record_time4").text("----");
        $("#record_content4").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }
}

/**
 * 视频播放
 * @param
 */
function video() {

    var data = {
        id: curCamera.cameraSn,
        playType: curCamera.playType
    };
    $.ajax({
        type: 'POST',
        url: "/security/get-media",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                layer.msg(result.msg, {icon: 1, time: 1200});
            } else {
                toPlay(result.playUrl);
            }
        },
        error: function (result) {
            layer.msg("未获取到播放信息！！", {icon: 1, time: 1200});
        }
    });

}

/**
 * 播放视频
 * @param url
 */
function toPlay(url) {
    var html = '';
    if (url) {
        html += '<iframe src="' + url + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
    } else {
        html += '<img src="/img/web/security/p-snap.jpg">';
    }
    $("#divPlugin2").html(html);
}

// 初始化ECharts温度走势图
function initEchartsTemp() {
function initEcharts(names, data) {
    // 初始化ECharts温度走势图
    var temperatureChartDom = document.getElementById('temperatureChart');
    var temperatureChart = echarts.init(temperatureChartDom);
@@ -102,7 +348,7 @@
            {
                type: 'category',
                boundaryGap: false,
                data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
                data: names
            }
        ],
        yAxis: [
@@ -131,12 +377,14 @@
                        { offset: 1, color: 'rgba(15, 52, 96, 0.05)' }
                    ])
                },
                data: [2560000, 2510000, 2540000, 2530000, 2490000, 2610000, 2570000]
                data: data
            }
        ]
    };
    // 渲染图表
    option && temperatureChart.setOption(option);
    hisChart = {"chart": temperatureChart, "option": option};

    // 窗口大小变化时调整图表大小
    window.addEventListener('resize', function() {
        temperatureChart.resize();