添加第一版gis监管页面，建模版本

sgj

2026-03-04 79b5a1c92e219128d50b58714eb2f6ec0f695d83

添加第一版gis监管页面，建模版本

 fzzy-igdss-web/src/main/java/com/fzzy/group/GroupController.java

@@ -1,12 +1,12 @@
package com.fzzy.group;

import com.fzzy.common.manager.CommonManager;
import com.fzzy.group.manager.GroupManager;
import com.fzzy.igds.constant.Constant;
import com.fzzy.igds.data.*;
import com.fzzy.igds.domain.*;
import com.fzzy.igds.utils.ContextUtil;
import com.fzzy.igds.websocket.WebSocketPacket;
import com.fzzy.common.manager.CommonManager;
import com.ruoyi.common.core.domain.entity.SysUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
@@ -130,6 +130,47 @@


    /**
     * æ€»è§ˆå¤§å±é¡µé¢
     * @return
     */
    @RequestMapping("/gis_modeling")
    public String gisModeling(ModelMap view) {
        SysUser user = ContextUtil.getLoginUser();
        view.put(Constant.MODEL_KEY_LOGIN_USER, user);

        view.put("deptId", user.getDeptId());

        view.put("sysName", "智慧粮库质押监管大屏");
        // æ ‡è¯­
        Slogan dicSlogan = commonManager.getDicSlogan();
        view.put("dicSlogan", dicSlogan);

        view.put("bizType", "screen");
        view.put("bizTag", WebSocketPacket.BIZ_TAG_COMMON);

        view.put("defaultAreaCode", "650000");

        //获取新疆区划信息
        List<DicArea> areaList = groupManager.getBankAndChildDept("650000");
        view.put("areaList", areaList);

        //获取新疆及下属市州
        List<DicArea> allArea = groupManager.getArea("650000");
        view.put("allArea", allArea);

        //获取所有库区
        List<GroupDeptData> deptList = groupManager.getDeptData(user.getCompanyId());
        view.put("deptList", deptList);

        //统计信息
        GroupGisData groupGisData = groupManager.getGisData();
        view.put("gisData", groupGisData);

        return prefix + "/gis_modeling";
    }


    /**
     * é¦–页--获取数量信息(储量统计、分品种库存、监管数量等)
     *
     * @param param

 fzzy-igdss-web/src/main/java/com/fzzy/group/manager/GroupManager.java

@@ -49,6 +49,11 @@
    private SnapRecordService snapRecordService;
    @Resource
    private SecCameraService cameraService;
    @Resource
    private BankService bankService;

    @Resource
    private PledgeContractService pledgeContractService;

    /**
     * èŽ·å–省及下属市州集合
@@ -120,6 +125,110 @@
        return list;
    }


    public List<DicArea> getBankAndChildDept(String areaCode) {

        DicArea area = dicAreaService.listDicAreaByCode(areaCode);
        if (null == area) {
            return null;
        }
        List<DicArea> areaChildren =  new ArrayList<>();

        List<DicArea> list = new ArrayList<>();
        if (Constant.AREA_TYPE_1.equals(area.getType())) {
           //查询所有的质押合同
            List<PledgeContract> pledgeContractList = pledgeContractService.listAll(null);
            //查询所有的库区
            List<Dept> depotList = deptService.listDept(null, ContextUtil.getCompanyId(), null);
            //查询所有的银行
            List<Bank> bankList = bankService.listAll(null);
            DicArea defaultBank = new DicArea();
            defaultBank.setCode("-1");
            defaultBank.setName("无质押银行");
            defaultBank.setChildren(new ArrayList<>());

            for (Dept dept : depotList) {
                Boolean isPledge = false;
                for (PledgeContract pledgeContract : pledgeContractList) {
                    if( dept.getId().equals(pledgeContract.getPledgeDept())){
                        //从list中找到当前质押银行的数据
                        DicArea pledgeBank = null;
                        int indexBank = -1;
                        for (DicArea item : areaChildren) {
                            if (pledgeContract.getPledgeBank().equals(item.getCode())) {
                                pledgeBank = item;
                                indexBank = areaChildren.indexOf(pledgeBank);
                                break;
                            }
                        }
                        if( null == pledgeBank){
                            //未找到质押银行数据则新建
                            pledgeBank = new DicArea();
                            pledgeBank.setCode(pledgeContract.getPledgeBank());
                            pledgeBank.setName("质押银行_"+pledgeContract.getPledgeBank());
                            //从银行数据中找到质押银行的信息
                            for (Bank bank : bankList) {
                                if (pledgeContract.getPledgeBank().equals(bank.getId())) {
                                    pledgeBank.setName(bank.getName());
                                }
                            }
                            //添加质押银行下的库区数据
                            DicArea deptDic = new DicArea();
                            deptDic.setCode(dept.getId());
                            deptDic.setName(dept.getKqmc());

                            List<DicArea> children = pledgeBank.getChildren();
                            if (null == children) {
                                pledgeBank.setChildren(new ArrayList<>());
                            }
                            pledgeBank.getChildren().add(deptDic);
                            //新增质押银行数据到list中
                            areaChildren.add(pledgeBank);
                            isPledge=true;
                            break;
                        }else{
                            //添加质押银行下的库区数据
                            DicArea deptDic = new DicArea();
                            deptDic.setCode(dept.getId());
                            deptDic.setName(dept.getKqmc());

                            List<DicArea> children = pledgeBank.getChildren();
                            if (null == children) {
                                pledgeBank.setChildren(new ArrayList<>());
                            }
                            pledgeBank.getChildren().add(deptDic);
                            //更新list中的质押银行数据
                            areaChildren.set(indexBank,pledgeBank);
                            isPledge=true;
                            break;

                        }


                    }
                }
                if(!isPledge){
                    DicArea deptDic = new DicArea();
                    deptDic.setCode(dept.getId());
                    deptDic.setName(dept.getKqmc());

                    List<DicArea> children = defaultBank.getChildren();
                    if (null == children) {
                        defaultBank.setChildren(new ArrayList<>());
                    }
                    defaultBank.getChildren().add(deptDic);
                }
            }
            List<DicArea> defaultBankChildren = defaultBank.getChildren();
            if (defaultBankChildren.size()>0) {
                areaChildren.add(defaultBank);
            }
            area.setChildren(areaChildren);
        }
        list.add(area);
        return list;
    }

    /**
     * èŽ·å–用户下所有库区信息
     *

 fzzy-igdss-web/src/main/resources/static/common/igds-common.js

@@ -230,6 +230,9 @@
    if ("gis" == pageTag) {
        url = "/group/gis";
    }
    if ("gis_modeling" == pageTag) {
        url = "/group/gis_modeling";
    }
    if ("video" == pageTag) {
        url = "/group/video";
    }

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,607 @@
var colors = {};
var map;
var disProvince;//行政区颜色渲染
var deptListMap = {};
var allAreaMap = {};
var markers = [];//点标记
var type = "0";
var county = "all";
var breedChart = null;
var foodNumPerColors = ["0, 228, 250", "22, 226, 173", "255, 181, 23", "238, 60, 72", "135, 103, 255", "41, 122, 255", "238, 60, 144", "255, 99, 132", "75, 192, 192", "153, 102, 255", "255, 159, 64", "199, 199, 199", "83, 102, 255", "255, 193, 7"];
//var switch2AreaNode2;


let iframe = document.getElementById("gisFrame");

// ============ æŽ¥æ”¶iframe消息 ============
window.addEventListener("message", function (event) {
    // ç”Ÿäº§çŽ¯å¢ƒå»ºè®®æ ¡éªŒ event.origin
    const data = event.data;

    if (data && data.type === "CLICK_BUILDING") {
        alert(`点击了仓库 ${data.data.uid}`);
    }
});

$(function () {
    //所有库区
    if (deptList) {
        for (var i = 0; i < deptList.length; i++) {
            deptListMap[deptList[i].deptId] = deptList[i];
        }
    }
    //所有省市
    if (allArea) {
        for (var i = 0; i < allArea.length; i++) {
            allAreaMap[allArea[i].code] = allArea[i];
        }
    }

    //初始化时间
    initTime();
    initDicSlogan();

    //初始化左侧图表
    pieChartLoad(
        [
            {value: "0", name: '伊宁市'},
            {value: "0", name: '奎屯市'},
            {value: "0", name: '霍尔果斯市'},
            {value: "0", name: '伊宁县'},
            {value: "0", name: '察布查尔锡伯自治县'},
            {value: "0", name: '霍城县'},
            {value: "0", name: '巩留县'},
            {value: "0", name: '新源县'},
            {value: "0", name: '昭苏县'},
            {value: "0", name: '特克斯县'},
            {value: "0", name: '尼勒克县'}
        ],
        'breedChart'
    );
    window.onresize = function (e) {
        if (breedChart) {
            breedChart.resize();
        }
    }

    //渲染部门
    renderList();

    renderNum();
    //定位到新疆省
    setTimeout(function () {
        positioning("650000");
    }, 2000);

    $('.sup-menu-title').click(function () {
        var kai = $(this).parent(".sup-menu-group")
        if (kai.hasClass('menu-group')) {
            kai.removeClass('menu-group')
        } else {
            kai.addClass('menu-group')
        }
    });
    $('.sup-menu-h').click(function () {
        var kai2 = $(this).parents(".sup-menu-ul")
        if (kai2.hasClass('menu-h')) {
            kai2.removeClass('menu-h')
        } else {
            kai2.addClass('menu-h')
        }
    });

    // åˆå§‹åŒ–WebSocket
    initWS(companyId, bizType, bizTag, userId);
});

// socket信息返回處理
function socketOnMessage(pocket) {
    //console.log(pocket);
    if (pocket.bizId == "slogan") {
        var data = pocket.data;
        dicSlogan = data;
        initDicSlogan();
    }
}

// åˆ·æ–°æ—¶é—´
function positioning(code) {

    var kai = $("#prov");
    if (kai.hasClass('menu-group')) {
        kai.removeClass('menu-group')
    } else {
        kai.addClass('menu-group')
    }

    // renderAreas(code);
}

// åˆ·æ–°æ—¶é—´
function initTime() {
    setInterval(function () {
        $("#navBarDate").html(formatDate('mm月dd日', new Date()));
        $("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
        $("#navBarWeek").html(getWeekDate());
    }, 1000);
}


//库区点击事件
function clickDept(deptid) {
    // æ–¹æ¡ˆä¸€ï¼šé€šçŸ¥iframe切换库区
    if (iframe.contentWindow) {
        iframe.contentWindow.postMessage(
            {
                type: "CHANGE_AREA",
                data: {uid: deptid},
            },
            "*", // ç”Ÿäº§çŽ¯å¢ƒå»ºè®®æ›¿æ¢ä¸ºå…·ä½“域名
        );
    }
    // æ–¹æ¡ˆäºŒï¼šç›´æŽ¥ä¿®æ”¹src（会重新加载页面）
    // iframe.src = `http://172.67.157.132:5000?uid=${uid}`;
}

/**
 * èŽ·å–市州下库区信息
 */
function getDeptArea(province, city, county) {
    var list = [];
    if (deptList) {
        //省
        if (province && province.length > 0) {
            var str1 = province.substring(0, 2);
            for (var i = 0; i < deptList.length; i++) {
                if (deptList[i].code.startsWith(str1)) {
                    list.push(deptList[i]);
                }
            }
        }
        //市州
        if (city && city.length > 0) {
            var str2 = city.substring(0, 4);
            for (var i = 0; i < deptList.length; i++) {
                if (deptList[i].code.startsWith(str2)) {
                    list.push(deptList[i]);
                }
            }
        }
        //区县
        if (county && county.length > 0) {
            for (var i = 0; i < deptList.length; i++) {
                if (deptList[i].code === county) {
                    list.push(deptList[i]);
                }
            }
        }
    }

    return list;
}

/**
 * ç”¨æˆ·ç‚¹å‡»åŸŽå¸‚或者县级区级渲染库区点位
 */
function renderAreas(code) {
    var d = allAreaMap[code];
    if (d) {
        closeInfoWindow();
        removeColor();
        delMarker();
        renderColor(code);
        var a = [];
        //省
        if ("1" == d.type) {
            a = getDeptArea(code, "", "");
        }
        //市州
        if ("2" == d.type) {
            a = getDeptArea("", code, "")
        }
        //区县
        if ("3" == d.type) {
            a = getDeptArea("", "", code)
        }
        if (a && a.length > 0) {
            for (var i = 0; i < a.length; i++) {
                addMarker(a[i], false);
            }
        }
        //刷新数据
        county = code;
        // ajaxFoodNum();
    } else {
        console.log("没有获取到该行政区划:" + code);
    }
}

/**
 * æ¸²æŸ“库区信息弹窗
 * @param deptAreaId
 */
function showAreaInfo(deptAreaId) {
    var d = deptListMap[deptAreaId];
    if (d) {
        closeInfoWindow();
        removeColor();
        delMarker();
        //map.setCity(d.deptCounty);
        // map.setZoom(10);
        renderColor(d.deptCounty);
        addMarker(d, true);
    } else {
        console.log("没有获取到该库区:" + deptAreaId);
    }
}

/**
 * æ¸²æŸ“库区列表
 */
function renderList() {
    if (areaList) {
        var html = "";
        var childs = [];
        var childsItem = [];
        var areas = [];
        for (var i = 0; i < areaList.length; i++) {
            html += "<div style=\"width: 305px; overflow: hidden\">" +
                "<div id='prov' class=\"sup-menu-group menu-group\">" +
                "<div class=\"sup-menu-title\">" +
                "<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
                "<a href=\"###\" onclick=\"clickDept('" + areaList[i].code + "')\">" +
                "<span class=\"i-icon32 fl\"><img src=\"/img/web/group/c-i2.png\"/></span>" +
                (areaList[i].name ? areaList[i].name : "") +
                "</a>" +
                "</div>";
            if (areaList[i].children && areaList[i].children.length > 0) {   //质押银行
                childs = areaList[i].children;
                for (var j = 0; j < childs.length; j++) {
                    html += "<ul class=\"sup-menu-ul  menu-h\">" +
                        "<li>" +
                        "<div class=\"sup-menu-h\">" +
                        "<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
                        "<a href=\"###\" onclick=\"clickDept('" + childs[j].code + "')\">" +
                        "<span class=\"i-icon32 fl\"><img src=\"/img/web/group/c-i2.png\"/></span>" +
                        (childs[j].name ? childs[j].name : "") +
                        "</a>" +
                        "</div>";
                    if (childs[j].children && childs[j].children.length > 0) {   //市州
                        childsItem = childs[j].children;
                        for (var j = 0; j < childsItem.length; j++) {
                            html += "<ul class=\"sup-menu-ul  menu-h\">" +
                                "<li>" +
                                "<div class=\"sup-menu-h\">" +
                                "<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
                                "<a href=\"###\" onclick=\"clickDept('" + childsItem[j].code + "')\">" +
                                "<span class=\"i-icon32 fl\"><img src=\"/img/web/group/c-i2.png\"/></span>" +
                                (childsItem[j].name ? childsItem[j].name : "") +
                                "</a>" +
                                "</div>";
                            html += "</li></ul>";
                        }
                    }
                }
            }

            html += "</div>" +
                "</div>";
        }

        $("#menuDiv").html(html);
    }
}

function renderNum() {
    $("#foodSum").html(gisData.deptNum);

    let deptNum = 0;
    var foodNumPerHtml = '';
    for (var i = 0; i < gisData.deptList.length; i++) {
        if ('0.0' != gisData.deptList[i].percent) {
            foodNumPerHtml += '<li><div class="con" style="background-color: rgba(' + foodNumPerColors[i] + ',.05);">';
            foodNumPerHtml += '<div class="dot" style="background-color: rgb(' + foodNumPerColors[i] + ');"></div>';
            foodNumPerHtml += '<div class="num" style="color: rgb(' + foodNumPerColors[i] + ');">' + gisData.deptList[i].percent + '%</div>';
            foodNumPerHtml += '<div class="type">' + gisData.deptList[i].name + '</div>';
            foodNumPerHtml += '</div></li>';
            deptNum += 1;
        }

    }
    $("#foodSum").html(deptNum);
    $("#foodNumPer").html(foodNumPerHtml);
    if (gisData.deptList.length > 0) {
        var varietyChart = breedChart;
        varietyChart.option.series[0].data = gisData.deptList;
        varietyChart.option.color = getHexColorsFromRGB(foodNumPerColors, gisData.deptList.length);
        varietyChart.chart.setOption(varietyChart.option, true);
        breedChart = varietyChart;
    }
    barChartLoad("ss");
}


/**
 * å°† RGB æ ¼å¼é¢œè‰²è½¬æ¢ä¸ºåå…­è¿›åˆ¶æ ¼å¼
 * @param rgbColors RGB é¢œè‰²æ•°ç»„
 * @param count éœ€è¦çš„颜色数量
 * @returns {Array} åå…­è¿›åˆ¶é¢œè‰²æ•°ç»„
 */
function getHexColorsFromRGB(rgbColors, count) {
    var hexColors = [];
    for (var i = 0; i < count && i < rgbColors.length; i++) {
        var rgb = rgbColors[i].split(',');
        var r = parseInt(rgb[0]);
        var g = parseInt(rgb[1]);
        var b = parseInt(rgb[2]);
        var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        hexColors.push(hex);
    }
    return hexColors;
}



/**
 *
 *增加库区点位
 * tag æ˜¯å¦ç›´æŽ¥æ˜¾ç¤ºä¿¡æ¯å¼¹çª—
 */
function addMarker(deptArea, tag) {
    if (deptArea) {
        var markerContent = " <div class=\"right-map-item right-map-item2\"style=' left: 0px !important; top: 0px !important;'>" +
            // "                        <p>天府新区</p>" +
            "                        <span class=\"map-round\"></span>" +
            "                    </div>";
        var position = [deptArea.jd, deptArea.wd];
        var marker = new AMap.Marker({
            position: position,
            // å°† html ä¼ ç»™ content
            content: markerContent,
            // ä»¥ icon çš„ [center bottom] ä¸ºåŽŸç‚¹
            // achor:'center',
            offset: new AMap.Pixel(-25, -25)

        });
        markers.push(marker);
        // å°† markers æ·»åŠ åˆ°åœ°å›¾
        map.add(marker);

        var infoWinodw = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: createInfoWindow(deptArea),
            achor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
        });
        //鼠标点击marker弹出自定义的信息窗体
        marker.on('click', function () {
            infoWinodw.open(map, marker.getPosition());
        });
        if (tag) {
            infoWinodw.open(map, marker.getPosition());
        }
    } else {
        console.log("库区为空");
    }
}

/**
 *
 *删除库区点位
 */
function delMarker() {
    if (map) {
        map.remove(markers);
    }
}

//关闭信息窗体
function closeInfoWindow() {
    if (map) {
        map.clearInfoWindow();
    }
}

/**
 * åˆ›å»ºä¿¡æ¯çª—口
 */
function createInfoWindow(deptArea) {
    var deptAreaId = deptArea.deptId;
    var content = "<div class=\"BMap_bubble_pop\" style=\"padding: 0px 8px; position: relative; top:0px !important;left:0px !important;cursor: default; border: 1px solid rgb(221, 221, 221); background-color: rgb(255, 255, 255); border-radius: 10px; left: 837px; top: -46px; width: 376px;\">" +
        "<div class=\"BMap_bubble_top\" style=\"height:31px\">" +
        "<div class=\"BMap_bubble_title\" style=\"line-height: 30px; overflow: hidden; height: 30px; white-space: nowrap; color: rgb(51, 51, 51); width: 376px;\">" +
        "</div>" +
        "<div class=\"BMap_bubble_buttons\" style=\"float:right;position:absolute;top:-2px;right:0px;height:30px;\">" +
        "<div style=\"cursor: pointer; display: none;\">" +
        "<div style=\"position:absolute;top:9px;width:10px;height:10px;-moz-user-select:none;cursor:pointer;z-index:10000;display:none\">×</div>" +
        "</div>" +
        "<div style=\"cursor:pointer;width:32px;height:30px;color:#ccc\">" +
        "<div style=\"position:absolute;top:2px;right:12px;text-align:center;line-height:30px;-moz-user-select:none;cursor:pointer;z-index:10000;font-size:20px\">×</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "<div class=\"BMap_bubble_center\" style=\"z-index: 3; position: relative; height: 324px; width: 376px;\">" +
        "<div class=\"BMap_bubble_content\" style=\"font-size: 14px; line-height: 24px; position: absolute; top: 2px; color: rgb(85, 85, 85); width: 364px; height: 324px; overflow: auto;\">" +
        '<div style=\"height:100%;box-sizing:border-box;\">' +
        '<div style="height: 34px;">' +
        '<div style="width: 320px;float: left;">';
    if (deptArea.deptName.length > 17) {
        content += '<h3 style="margin:0 0 10px 0;line-height:24px;font-size:14px;color:#fff;">' + (deptArea.deptName ? deptArea.deptName : "没有获取到库区信息") + '</h3>';
    } else {
        content += '<h3 style="margin:0 0 10px 0;line-height:24px;font-size:18px;color:#fff;">' + (deptArea.deptName ? deptArea.deptName : "没有获取到库区信息") + '</h3>';
    }
    content += '</div>' +
        '<div style="width: 40px;float: left;">' +
        '<img style="height: 20px;" src="/img/web/group/icon_close.png" onclick="closeInfoWindow()"></img>' +
        '</div>' +
        '</div>' +

        '<p style="line-height:24px;font-size:12px;color:#fff;margin-right: 15px;"><img src="/img/web/group/icon-address.png" alt="" style="float:left;width: 16px;height: 16px;margin-right:3px;margin-top: 5px;"/>' + (deptArea.county ? deptArea.county : "没有获取到库区信息") + '</P>' +
        '<div class="right-topInfo-kd " style="height: 80px;width: 270px;margin: 5px auto 10px auto;">' +
        '<div class="right-topInfo-kd-item">' +
        '<h3>当日入库单数(个)</h3>' +
        '<p>' + (deptArea.inNum) + '</p>' +
        '</div>' +
        '<div class="right-topInfo-kd-item">' +
        '<h3>当日出库单数(个)</h3>' +
        '<p>' + (deptArea.outNum) + '</p>' +
        '</div>' +
        '</div>' +
        '<ul class="right-topInfo-kd-list right-topInfo-jg sup-topInfo-list">' +
        '<li>';
    if (deptArea.depotNumber && (deptArea.depotNumber + "").length > 4) {
        content += '<p style="font-size: 22px">' + (deptArea.depotNumber) + '</p>';
    } else {
        content += '<p style="font-size: 22px">' + (deptArea.depotNumber) + '</p>';

    }
    content += '<h3>仓库数(个)</h3>' +
        '</li>' +
        '<li>';
    if (deptArea.depotBankNumber && (deptArea.depotBankNumber + "").length > 4) {
        content += '<p style="font-size: 22px">' + (deptArea.depotBankNumber) + '</p>';
    } else {
        content += '<p style="font-size: 22px">' + (deptArea.depotBankNumber) + '</p>';
    }
    content += '<h3>质押仓数(个)</h3>' +
        '</li>' +
        '<li>' +
        '<p style="font-size: 22px" >' + (deptArea.storageNum) + '</p>' +
        '<h3>库存数（吨）</h3>' +
        '</li>' +
        '</ul>' +
        '<a href="javaScript:;" onclick="toHomeDetail(\'' + deptAreaId + '\')"  class="sup-deatil-link"><img src="/img/web/group/spu-detail-btn.png" alt="" style="width:100%;height:100%;"/></a>' +
        '</div>' +
        "</div></div><div class=\"BMap_bubble_bottom\" style=\"display: block; z-index: 2; position: absolute; width: 376px;\">" +
        "</div><img style=\"z-index: 1; position: absolute; width: 58px; height: 31px; left: 159px; bottom: -30px; top: 356px;\" src=\"http://webmap0.bdimg.com/image/api/iw_tail.png\"></div>";

    return content;
}

/**
 * è°ƒç”¨çˆ¶èŠ‚点方法执行，默认退出全屏并进入后台
 * @param id
 */
function toHomeDetail(id) {
    var url = "/index?deptId=" + id;
    window.parent.open(url, "_self");
};

/**
 * æ ¹æ®è¡Œæ”¿ç¼–码渲染颜色，市级会将下面所有区渲染，区级只渲染当前区
 * @param adcode
 */
function renderColor(adcode) {
    switch2AreaNode(adcode);
}

function removeColor() {
    // if (disProvince) {
    //     disProvince.setMap(null);
    // }
}

/**
 * æ ¼å¼åŒ–日期
 * @param fmt
 * @param date
 * @return {*}
 */
function formatDate(fmt, date) {
    var ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // å¹´
        "m+": (date.getMonth() + 1).toString(),     // æœˆ
        "d+": date.getDate().toString(),            // æ—¥
        "H+": date.getHours().toString(),           // æ—¶
        "M+": date.getMinutes().toString(),         // åˆ†
        "S+": date.getSeconds().toString()          // ç§’
        // æœ‰å…¶ä»–格式化字符需求可以继续添加，必须转化成字符串
    };
    for (var k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
    }
    return fmt;
}

/**
 *获取当前星期几
 */
function getWeekDate() {
    var now = new Date();
    var day = now.getDay();
    var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var week = weeks[day];
    return week;
}

/**
 * æ ¼å¼åŒ–日期
 * @param fmt
 * @param date
 * @return {*}
 */
function formatDate(fmt, date) {
    var ret;
    const opt = {
        "Y+": date.getFullYear().toString(), // å¹´
        "m+": (date.getMonth() + 1).toString(), // æœˆ
        "d+": date.getDate().toString(), // æ—¥
        "H+": date.getHours().toString(), // æ—¶
        "M+": date.getMinutes().toString(), // åˆ†
        "S+": date.getSeconds().toString() // ç§’
        // æœ‰å…¶ä»–格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
    }
    return fmt;
}

/**
 *获取当前星期几
 */
function getWeekDate() {
    var now = new Date();
    var day = now.getDay();
    var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var week = weeks[day];
    return week;
}

var navBarDateDom = document.getElementById('navBarDate');
var navBarTimeDom = document.getElementById('navBarTime');
var navBarWeekDom = document.getElementById('navBarWeek');

/*刷新时间*/
setInterval(function () {
    navBarDateDom.innerHTML = formatDate('mm月dd日', new Date());
    navBarTimeDom.innerHTML = formatDate('HH:MM:SS', new Date());
    navBarWeekDom.innerHTML = getWeekDate();
}, 1000)

$(function () {
    $('.m-nav .tit').click(function () {
        $(this).siblings('.sub').stop().slideToggle();

    });
    $('.c-left .close').on('click', function () {
        $('.c-left').addClass('hidden')
    });
    $('.c-left .o-btn').on('click', function () {
        $('.c-left').removeClass('hidden')
    });
    $('.c-right .close').on('click', function () {
        $('.c-right').addClass('hidden')
    });
    $('.c-right .o-btn').on('click', function () {
        $('.c-right').removeClass('hidden')
    });

});

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

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

    <meta name="renderer" content="webkit">
    <title>库区可视化监管</title>

    <link th:href="@{/group/pc-reset.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/group/master.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/group/gis.css}" rel="stylesheet" type="text/css">
    <style>
        .anchorBL,
        .BMap_cpyCtrl.anchorBL {
            display: none !important;;
        }

        .BMap_bubble_pop {
            background: url(/img/web/group/sup-popBg2.png) no-repeat;
            background-size: 100% 100%;
            padding: 3px 20px 30px 20px !important;
            background-color: transparent !important;
            border: 0 !important;
            box-sizing: border-box;
            overflow: hidden;
        }

        /*地图标题*/
        .BMap_bubble_top {
            display: none !important;;
        }

        /* æ¶ˆæ¯å†…容 */
        .BMap_bubble_center {
            background: transparent !important;
            box-sizing: border-box;
            overflow: hidden;

        }

        /* å·¦ä¸Šè§’删除按键 */
        .BMap_bubble_pop > img {
            display: none !important;
            top: -99999px !important;;
        }

        .c-cen {
            position: absolute;
            top: 10px;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            bottom: 10px;
        }

    </style>
</head>

<body>

<div class="container">
    <div class="i-top">
        <h1 ondblclick="changeScreen()" class="i-top-tit"><span th:text="${sysName}">智慧粮库质押监管大屏</span></h1>
        <p ondblclick="changeScreen()" class="i-top-p" id="sloganText">
            æ–°ç–†ä¼Šå®å†œæ‘商业银行股份有限公司——智慧监管平台</p>
        <div class="i-navBar">
            <a href="javaScript:;" onclick="changePage('index')" class="i-nav3">首页</a>
            <a href="javaScript:;" onclick="changePage('gis_modeling')" class="i-nav4 active">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('video')" class="i-nav5">视频监管</a>
            <a href="javaScript:;" onclick="changePage('sys')" class="i-nav6">后台管理</a>
            <a href="javaScript:;" onclick="changePage('logout')" class="i-nav7">退出系统</a>
        </div>
        <div class="date-time-module">
            <span id="navBarTime"></span>
            <div class="i-top-date">
                <span id="navBarDate"></span>
                <span id="navBarWeek"></span>
            </div>
        </div>
        <!-- <div id="data"></div> -->

    </div><!--i-top end-->

    <div class="c-main cl">

        <div class="c-cen">
            <iframe
                    id="gisFrame"
                    src="http://172.67.157.132:5000?uid=5372001001"
                    frameborder="0"
                    style=" width: 100%;height: 100vh;border: none;"
            ></iframe>
        </div>

        <div class="c-left">
            <div class="o-btn">
                <!--                    <img src="../images/visual/c-btn1.png" alt="">-->
                <img th:src="@{/img/web/group/c-btn1.png}"/>
            </div>
            <div class="inner">
                <div class="close"></div>
                <div class="m-box1">
                    <div class="l">
                        <div class="chartbox">
                            <div class="chart" id="breedChart"></div>
                            <div class="txt">
                                <div class="n" id="foodSum">10</div>
                                <div class="p">个</div>
                            </div>
                        </div>
                    </div>
                    <div class="r">
                        <ul class="ul-listb1" id="foodNumPer">
                            <li>
                                <div class="con" style="background-color: rgba(0, 228, 250,.05);">
                                    <div class="dot" style="background-color: rgb(0, 228, 250);"></div>
                                    <div class="num" style="color: rgb(0, 228, 250);">0%</div>
                                    <div class="type">伊宁市</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(22, 226, 173,.05);">
                                    <div class="dot" style="background-color: rgb(22, 226, 173);"></div>
                                    <div class="num" style="color: rgb(22, 226, 173);">0%</div>
                                    <div class="type">奎屯市</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(255, 181, 23,.05);">
                                    <div class="dot" style="background-color: rgb(255, 181, 23);"></div>
                                    <div class="num" style="color: rgb(255, 181, 23);">0%</div>
                                    <div class="type">霍尔果斯市</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(238, 60, 72,.05);">
                                    <div class="dot" style="background-color: rgb(238, 60, 72);"></div>
                                    <div class="num" style="color: rgb(238, 60, 72);">90%</div>
                                    <div class="type">伊宁县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(135, 103, 255,.05);">
                                    <div class="dot" style="background-color: rgb(135, 103, 255);"></div>
                                    <div class="num" style="color: rgb(135, 103, 255);">0%</div>
                                    <div class="type">察布查尔锡伯自治县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(41, 122, 255,.05);">
                                    <div class="dot" style="background-color: rgb(41, 122, 255);"></div>
                                    <div class="num" style="color: rgb(41, 122, 255);">0%</div>
                                    <div class="type">霍城县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(238, 60, 144,.05);">
                                    <div class="dot" style="background-color: rgb(238, 60, 144);"></div>
                                    <div class="num" style="color: rgb(238, 60, 144);">0%</div>
                                    <div class="type">巩留县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(0, 228, 250,.05);">
                                    <div class="dot" style="background-color: rgb(0, 228, 250);"></div>
                                    <div class="num" style="color: rgb(0, 228, 250);">0%</div>
                                    <div class="type">新源县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(22, 226, 173,.05);">
                                    <div class="dot" style="background-color: rgb(22, 226, 173);"></div>
                                    <div class="num" style="color: rgb(22, 226, 173);">0%</div>
                                    <div class="type">昭苏县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(255, 181, 23,.05);">
                                    <div class="dot" style="background-color: rgb(255, 181, 23);"></div>
                                    <div class="num" style="color: rgb(255, 181, 23);">0%</div>
                                    <div class="type">特克斯县</div>
                                </div>
                            </li>
                            <li>
                                <div class="con" style="background-color: rgba(238, 60, 72,.05);">
                                    <div class="dot" style="background-color: rgb(32,134,32);"></div>
                                    <div class="num" style="color: rgb(32,134,32);">10%</div>
                                    <div class="type">尼勒克县</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-box2">
                    <div class="item">
                        <div class="bot">
                            <div class="chart" id="ss"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="c-right">
            <div class="o-btn">
                <img th:src="@{/img/web/group/c-btn2.png}"/>
            </div>
            <div class="inner">
                <div class="close"></div>
                <div class="m-nav" id="menuDiv">
                    <div class="con">
                        <div class="tit">
                            <div class="arr"></div>
                            <a href="javascript:;" class="v1"><i class="icon"></i><b class="t">新疆维吾尔自治区</b></a>
                        </div>
                        <div class="sub two">
                            <div class="con">
                                <div class="tit">
                                    <div class="arr"></div>
                                    <a href="javascript:;" class="v1"><i class="icon"></i><span
                                            class="t">乌鲁木齐市</span></a>
                                </div>
                                <div class="sub three">
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span
                                                class="t">库区名称1</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span
                                                class="t">库区名称2</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="con">
                                <div class="tit">
                                    <div class="arr"></div>
                                    <a href="javascript:;" class="v1"><i class="icon"></i><span
                                            class="t">克拉玛依市</span></a>
                                </div>
                                <div class="sub three">
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span
                                                class="t">库区名称1</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span
                                                class="t">库区名称2</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="con">
                                <div class="tit">
                                    <div class="arr"></div>
                                    <a href="javascript:;" class="v1"><i class="icon"></i><span
                                            class="t">吐鲁番市</span></a>
                                </div>
                                <div class="sub three">
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span
                                                class="t">库区名称1</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span
                                                class="t">库区名称2</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div><!--i-main end-->

</div>

<script th:inline="javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '39051edca2c561cb80d8f49b4624ab17',
    }
    var userId = [[${loginUser.loginName}]];
    var companyId = [[${loginUser.companyId}]];
    var deptId = [[${deptId}]];
    var areaList = [[${areaList}]];
    var allArea = [[${allArea}]];
    var deptList = [[${deptList}]];
    var bizType = [[${bizType}]];
    var bizTag = [[${bizTag}]];
    var dicSlogan = [[${dicSlogan}]];
    var gisData = [[${gisData}]];
    var defaultAreaCode = [[${defaultAreaCode}]];
</script>
<script th:src="@{https://webapi.amap.com/maps?v=2.0&key=5249315a4ba00ea7212898d4449b8c0e&plugin=AMap.DistrictSearch}"
        src="https://webapi.amap.com/maps?v=2.0&key=5249315a4ba00ea7212898d4449b8c0e"></script>
<!-- UI组件库 1.0 -->
<script th:src="@{https://webapi.amap.com/ui/1.1/main.js?v=1.1.1}"
        src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/echarts/echarts.js}"></script>
<script th:src="@{/common/constant.js}"></script>
<script th:src="@{/common/igds-common.js}"></script>

<script th:src="@{/group/gis_modeling.js}"></script>
<script th:src="@{/group/gis-map.js}"></script>
<script th:src="@{/group/gis-chart.js}"></script>
</body>

</html>

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

@@ -109,7 +109,7 @@
            æ–°ç–†ä¼Šå®å†œæ‘商业银行股份有限公司——智慧监管平台</p>
        <div class="i-navBar">
            <a href="javaScript:;" onclick="changePage('index')" class="i-nav3 active">首页</a>
            <a href="javaScript:;" onclick="changePage('gis')" class="i-nav4">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('gis_modeling')" class="i-nav4">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('video')" class="i-nav5">视频监管</a>
            <a href="javaScript:;" onclick="changePage('sys')" class="i-nav6">后台管理</a>
            <a href="javaScript:;" onclick="changePage('logout')" class="i-nav7">退出系统</a>

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

@@ -139,7 +139,7 @@
        <p ondblclick="changeScreen()" class="i-top-p" id="sloganText">新疆伊宁农村商业银行股份有限公司——智慧监管平台</p>
        <div class="i-navBar">
            <a href="javaScript:;" onclick="changePage('index')" class="i-nav3">首页</a>
            <a href="javaScript:;" onclick="changePage('gis')" class="i-nav4">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('gis_modeling')" class="i-nav4">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('video')" class="i-nav5 active">视频监管</a>
            <a href="javaScript:;" onclick="changePage('sys')" class="i-nav6">后台管理</a>
            <a href="javaScript:;" onclick="changePage('logout')" class="i-nav7">退出系统</a>