监控配置，适配移动千里眼视频预览

sgj

8 天以前 ac95a9bf81b312fc36030e54450feb0f360c0703

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

@@ -1,7 +1,8 @@
var nowClientWidth = document.documentElement.clientWidth; // 当前视口宽度
var hisVarietyChart = null;   // 品种柱状图
var deptList = null;   // 所有库区列表信息
var deptCode = null;          // 当前闪烁地区的编码
var snapList = null;          // 当前闪烁地区的编码
var deptListMap = {};
var timer;     // 库区定时
var deptNum = 0;  //库区切换下标
var mapChart = null;
@@ -30,6 +31,12 @@
    // 时间
    initTime();

    if (deptAllList) {
        for (var i = 0; i < deptAllList.length; i++) {
            deptListMap[deptAllList[i].id] = deptAllList[i].kqmc;
        }
    }

    //初始化标语
    initDicSlogan();

@@ -42,20 +49,11 @@
    //请求监管库区信息
    ajaxDeptList();

    //请求抓拍跟踪信息
    ajaxSnapList();

    clearInterval(timer);
    timing();

    //TODO 请求AI事件信息
    // ajaxMsg();

    //TODO 请求抓拍跟踪信息
    // ajaxFoodNum();



    //抓拍跟踪滚动
    jQuery(".block2").slide({ mainCell: ".bd ul", autoPage: true, effect: "topLoop", autoPlay: true, vis: 4 });
    jQuery(".follow").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 5, interTime: 50 });
}

// socket信息返回處理
@@ -68,11 +66,68 @@
}

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

        }
    });
}

function renderSnap() {
    var html = '';
    if (snapList != null && snapList.length > 0) {
        $.each(snapList, function (index, item) {
            html += '<li style="float: left; width: 246px;">';
            html += '<div class="item">';
            html += '<div class="pic">';
            html += '<img src="' + item.imgName + '" alt="">';
            html += '</div><div class="tit">' + item.time + '</div>';
            html += '<div class="tit" style="white-space: nowrap;">' + deptListMap[item.deptId] + '</div>';
            html += '</div></li>';
        })
    } else {
        $.each(deptAllList, function (index, item) {
            html += '<li style="float: left; width: 246px;">';
            html += '<div class="item">';
            html += '<div class="pic">';
            html += '<img src="/img/img-fail.jpg" alt="">';
            html += '</div><div class="tit">近期暂无抓拍图</div>';
            html += '<div class="tit" style="white-space: nowrap;">' + item.kqmc + '</div>';
            html += '</div></li>';
        })
    }
    $("#snapList").html(html);

    //抓拍跟踪滚动
    jQuery(".block2").slide({mainCell: ".bd ul", autoPage: true, effect: "topLoop", autoPlay: true, vis: 4});
    jQuery(".follow").slide({mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 5, interTime: 40});

}

/**
 * 库区定时切换
 */
function timing() {
    timer = setInterval(function() {
        if(deptNum === deptList.length){
    timer = setInterval(function () {
        if (deptNum === deptList.length) {
            deptNum = 0;
        }

@@ -93,11 +148,11 @@

//加载指定地区地图和点位
function renderMapPoints(areaName) {
    if(!areaName){
    if (!areaName) {
        return;
    }
    var names = areaName.split(",");
    if(names.length < 1){
    if (names.length < 1) {
        return;
    }

@@ -112,13 +167,13 @@
    geoMap = [];
    for (var j = 0; j < names.length; j++) {
        for (var i = 0; i < all.length; i++) {
            if(all[i].properties.name === names[j]){
            if (all[i].properties.name === names[j]) {
                map.features.push(all[i]);
                // if(all[i].properties.name === "伊犁哈萨克自治州"){
                    geoMap.push({
                        name: all[i].properties.centerName,
                        value: [all[i].properties.center[0], all[i].properties.center[1], 12]
                    });
                geoMap.push({
                    name: all[i].properties.centerName,
                    value: [all[i].properties.center[0], all[i].properties.center[1], 12]
                });
                // }
                // renderMap();
                break;
@@ -138,7 +193,7 @@
    echarts.registerMap('chinaMapOutline', map);

    var option = {
        backgroundColor:'transparent',
        backgroundColor: 'transparent',
        tooltip: {
            show: false,
            trigger: 'item'
@@ -255,7 +310,7 @@
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: geoMap,
                symbolSize:  function (val) {
                symbolSize: function (val) {
                    return val[2];
                },
                rippleEffect: {
@@ -284,106 +339,59 @@
        ]
    };

    myChart.setOption( option );
    myChart.setOption(option);
    mapChart = {"chart": myChart, "option": option};
}

/**
 * 请求获取动态信息
 * 更新AI动态分析
 * @param data
 */
function ajaxMsg() {
    $.ajax({
        type: "POST",
        url: "../../visual/index-info",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "companyId": companyId
        }),
        success: function (result) {
            if (result.code == "0000") {
                renderMsg(result.data);
            }
        },
        error: function (error) {

        }
    });
}

// 更新动态信息
function renderMsg(data) {
function renderMsg() {
    var html = '';
    var flag = false;
    var num1 = '';
    var num7 = '';
    if (data != null && data.length > 0) {
        $.each(data, function (index, item) {
            var deptAreaId = item.deptAreaId;
            if(item.dailyTotal === 0){
    var flag = false;
    if (deptList != null && deptList.length > 0) {
        $.each(deptList, function (index, item) {
            if (item.dailyTotal === 0) {
                num1 = '当日一切正常';
            }else{
                num1 = '当日数量'+ item.dailyTotal + '个';
            } else if (item.dailyTotal < 0) {
                num1 = '未检测到网关';
            } else {
                num1 = '当日数量' + item.dailyTotal + '个';
            }
            if(item.warnNum7 === 0){
            if (item.warnNum7 === 0) {
                num7 = '近七天一切正常';
            }else{
                num7 = '近七天数量'+ item.warnNum7 + '个';
            } else {
                num7 = '近七天数量' + item.warnNum7 + '个';
            }
            html += '<div class="panel-content-body-tr">';
            if (item.level && item.level === "01") {
            if (item.dailyTotal > 0) {
                flag = true;
                // html += '<img src="../../static/images/visual/l1.png"  style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp" style="color: #bc2032;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>';
                html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>';
                // html += '<span class="body-item" style="color: #bc2032; flex: 0.3;">' + item.createTime + '</span>';
            } else if (item.level && item.level === "02") {
                flag = true;
                // html += '<img src="../../static/images/visual/l2.png" style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp" style="color: #f37b3d;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\"  >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>';
                html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>';
                // html += '<span class="body-item" style="color: #f37b3d; flex: 0.3;">' + item.createTime + '</span>';
            } else if (item.level && item.level === "03"){
                flag = true;
                // html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp"  onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp">' + num1 + '</span>';
                html += '<span class="body-item sp">' + num7 + '</span>';
                // html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>';
            }else {
                flag = true;
                // html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp"  onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp">' + num1 + '</span>';
                html += '<span class="body-item sp">' + num7 + '</span>';
                // html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>';
            }
            // 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>';
        })
    } else {
        if (deptAreaList != null && deptAreaList.length > 0) {
            $.each(deptAreaList, function (index, item) {
                html += '<div class="panel-content-body-tr">';
                html += '<span class="body-item sp">' + item.name + '</span>';
                html += '<span class="body-item sp">' + '当日分析一切正常' + '</span>';
                html += '<span class="body-item" style="flex: 0.3;">' + formatDate('mm/dd', new Date()) + '</span>';
                html += '</div>';
            });
        }
    }
    $("#panel-title").html('监管动态信息  <i class="dot"></i>');
    if (flag) {
        $("#panel-title").html('库区AI事件信息  <i class="dot"></i>');
    }
    $("#inventoryInfo").html(html);
}

/**
 * 跳转至后台预警页面
 * @param deptAreaId
 */
function toAiHome(deptAreaId) {
    var url = "../home?t=WarnInfo&deptAreaId="+deptAreaId;
    window.parent.open(url, "_self");
}

/**
@@ -403,6 +411,7 @@
            if (result.code == "0000") {
                deptList = result.data;
                renderDeptInfo();
                renderMsg();
            }
        },
        error: function (error) {
@@ -434,13 +443,13 @@

function updateDeptMap() {
    var points = [];
    $.each(deptList, function(index, item) {
    $.each(deptList, function (index, item) {
        var val = [];
        var name = '';
        if(index === deptNum){
        if (index === deptNum) {
            name = item.deptName;
            val = [item.jd, item.wd, 17];
        }else {
        } else {
            val = [item.jd, item.wd, 8];
        }
        points.push({
@@ -451,87 +460,6 @@
    return points;
}

/* ---------- 获取要切换库区的数据信息 ---------- */
function getChangeDeptArea(id) {
    deptAreaList = [];
    index1 = 0;
    clearInterval(timer1);

    if (id) {
        if (id === "511400") {
            deptAreaList = deptAreaAllList;
        } else {
            if (deptAreaAllList != null && deptAreaAllList.length > 0) {
                $.each(deptAreaAllList, function (index, item) {
                    if (id.length > 6 && id == item.deptCompany) {
                        deptAreaList.push(item);
                    }
                    if (id.length == 6 && id == item.deptCounty) {
                        deptAreaList.push(item);
                    }
                })
            }
        }
    } else {
        deptAreaList = deptAreaAllList;
    }

    deptAreaSwitch();
}

/* ---------- 库区定时切换 ---------- */
function deptAreaSwitch() {
    timer1 = setInterval(function () {
        if (index1 == deptAreaList.length) {
            index1 = 0;
        }

        renderDeptArea();

        index1 += 1;

    }, 3000);
}

// 更新库区信息
function renderDeptArea() {

    if (deptAreaList == null || deptAreaList.length <= 0) {
        return;
    }

    $("#cityAndCounty").html(deptAreaList[index1].deptCityName + "-" + deptAreaList[index1].deptCountyName);
    $("#deptAreaName").html(deptAreaList[index1].name);
    $("#depotNum").html(deptAreaList[index1].depotNum == null ? "0" : deptAreaList[index1].depotNum);
    $("#depotOilNum").html(deptAreaList[index1].depotOilNum == null ? "0" : deptAreaList[index1].depotOilNum);

    if (deptAreaList[index1].storageStr.length > 9
        || deptAreaList[index1].oilStorageStr.length > 9
        || deptAreaList[index1].areaStr.length > 9) {
        $("#foodNum").css("font-size", "28px");
        $("#oilNum").css("font-size", "28px");
        $("#area").css("font-size", "28px");
    } else if(deptAreaList[index1].storageStr.length > 5
        || deptAreaList[index1].oilStorageStr.length > 5
        || deptAreaList[index1].areaStr.length > 5){
        $("#foodNum").css("font-size", "30px");
        $("#oilNum").css("font-size", "30px");
        $("#area").css("font-size", "30px");
    } else {
        $("#foodNum").css("font-size", "46px");
        $("#oilNum").css("font-size", "46px");
        $("#area").css("font-size", "46px");
    }
    $("#foodNum").html(deptAreaList[index1].storageStr);
    $("#oilNum").html(deptAreaList[index1].oilStorageStr);
    $("#area").html(deptAreaList[index1].areaStr);

    if (deptCode) {
        $("#" + deptCode).removeClass("kuqu-h");
    }
    deptCode = deptAreaList[index1].deptCounty;
    $("#" + deptCode).addClass("kuqu-h");
}

/**
 * 请求获取统计数量信息
@@ -574,12 +502,15 @@
    $("#depotBankNum").html(data.depotBankNum);

    /*----- 监管数量信息 -----*/
    if (data.foodSum.length > 8 || data.packFoodSum.length > 8) {
    // if (data.foodSum.length > 8 || data.packFoodSum.length > 8) {
    //     $("#foodSum").css("font-size", "32px");
    //     $("#packFoodSum").css("font-size", "32px");
    // }
    if (data.foodSum.length > 8) {
        $("#foodSum").css("font-size", "32px");
        $("#packFoodSum").css("font-size", "32px");
    }
    $("#foodSum").html(data.foodSum);
    $("#packFoodSum").html(data.packFoodSum);
    // $("#packFoodSum").html(data.packFoodSum);

    /*----- 分品种柱状图 -----*/
    if (data.xaxis.length > 0 && data.seriesData.length > 0) {
@@ -637,7 +568,7 @@
function initChart() {
    /* 库存图表加载 */
    allInventoryChartLoad(
        ['小麦', '玉米', '稻谷', '成品粮',  '成品油', '其他'],
        ['小麦', '玉米', '稻谷', '成品粮', '成品油', '其他'],
        [1000, 1200, 1500, 1300, 1100, 1600]
    );
}