建模gis监管页面样式修改

sgj

2026-03-06 bd3c4b90882fc29711a5e73f4929db2da3e22cb6

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

@@ -1,13 +1,9 @@
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 foodNumPerColors = ["0, 255, 255", "50, 255, 50", "255, 215, 0", "255, 69, 0", "0, 191, 255", "30, 144, 255", "255, 20, 147", "255, 105, 180", "0, 255, 127", "255, 165, 0", "255, 218, 185", "255, 255, 0", "0, 250, 155", "255, 99, 71"];
//var switch2AreaNode2;


@@ -19,24 +15,12 @@
    const data = event.data;

    if (data && data.type === "CLICK_BUILDING") {
        alert(`点击了仓库 ${data.data.uid}`);
        // alert(`点击了仓库 ${data.data.uid}`);
        renderDepotMess(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();
@@ -91,10 +75,84 @@
    });

    // 初始化WebSocket
    initWS(companyId, bizType, bizTag, userId);
    // initWS(companyId, bizType, bizTag, userId);

    renderDeptMess(defaultDeptId);
});

// socket信息返回處理
function renderDeptMess(deptId) {
    for (let i = 0; i < deptList.length; i++) {
        if( deptId == deptList[i].deptId){
            let htmlMess=` 
                    <div class="panel-title">库点信息</div>
                    <div class="right-topInfo-address">
                        <i class="i-icon32"><img th:src="@{/img/web/group/icon-address.png}" alt=""></i>
                        <span >${deptList[i].county}</span>
                    </div>
                    <div class="panel-content">
                        <h2 class="right-topInfo-kd-h" >${deptList[i].deptName}</h2>
                        <div class="right-topInfo-kd">
                            <div class="right-topInfo-kd-item">
                                <h3>当日入库单数（个）</h3>
                                <p >${deptList[i].inNum}</p>
                            </div>
                            <div class="right-topInfo-kd-item">
                                <h3>当日出库单数（个）</h3>
                                <p >${deptList[i].outNum}</p>
                            </div>
                        </div>
                        <ul class="right-topInfo-kd-list right-topInfo-jg">
                            <li>
                                <p >${deptList[i].depotNumber}</p>
                                <h3>仓库数（个）</h3>
                            </li>
                            <li>
                                <p >${deptList[i].depotBankNumber}</p>
                                <h3>质押仓数（个）</h3>
                            </li>
                            <li>
                                <p >${deptList[i].storageNum}</p>
                                <h3>库存数（吨）</h3>
                            </li>
                        </ul>
                    </div>`;
            $("#areaInformation").html(htmlMess);
        }
    }
}


function renderDepotMess(depotId) {
    for (let i = 0; i < depotList.length; i++) {
        if( depotId == depotList[i].depotId){

            let htmlMess=` 
                    <div class="panel-title">库点信息</div>
                    <div class="right-topInfo-address">
                        <i class="i-icon32"><img th:src="@{/img/web/group/icon-address.png}" alt=""></i>
                        <span>${depotList[i].county}</span>
                    </div>
                    <div class="panel-content">
                        <h2 class="right-topInfo-kd-h">${depotList[i].deptName}</h2>
                        <div class="modeling-left-topInfo-kd">
                            <div class="modeling-left-topInfo-ck">
                                <h1>${depotList[i].depotName}</h1>
                            </div>
                        </div>
                        <ul class="modeling-left-topInfo-kd-list right-topInfo-jg">
                            <li>
                                <p>${depotList[i].storageNum}</p>
                                <h3>库存数（吨）</h3>
                            </li>
                        </ul>
                    </div>
        `;
            $("#areaInformation").html(htmlMess);
        }
    }

}

function socketOnMessage(pocket) {
    //console.log(pocket);
    if (pocket.bizId == "slogan") {
@@ -141,98 +199,8 @@
    }
    // 方案二：直接修改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);
    }
    //切换库区的库点信息
    renderDeptMess(deptid);
}

/**
@@ -245,45 +213,45 @@
        var childsItem = [];
        var areas = [];
        for (var i = 0; i < areaList.length; i++) {
            html += "<div style=\"width: 305px; overflow: hidden\">" +
            html += "<div style=\"width: 340px; 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>" +
                // "<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) {   //质押银行
            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\">" +
                    //默认关闭库区
                    // html += "<ul class=\"sup-menu-ul  menu-h\">" +
                    //默认展开库区
                    html += "<ul class=\"sup-menu-ul  \">" +
                        "<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>" +
                        // "<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) {   //市州
                    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>" +
                        for (var k = 0; k < childsItem.length; k++) {
                            html += "<div class=\"sup-menu-box\">" +
                                "<p>" +
                                "<span class=\"i-icon32 fl\"><img src=\"/img/web/group/icon-kuqu.png\"/></span>" +
                                "<a href=\"#\" onclick=\"clickDept('" + childsItem[k].code + "')\">" + childsItem[k].name + "</a>" +
                                "</p>" +
                                "</div>";
                            html += "</li></ul>";
                        }
                    }
                    html += "</li>" +
                        "</ul>";
                }
            }

            html += "</div>" +
                "</div>";
        }
@@ -291,6 +259,7 @@
        $("#menuDiv").html(html);
    }
}


function renderNum() {
    $("#foodSum").html(gisData.deptNum);
@@ -317,7 +286,7 @@
        varietyChart.chart.setOption(varietyChart.option, true);
        breedChart = varietyChart;
    }
    barChartLoad("ss");
    modelingBarChartLoad("ss");
}


@@ -342,164 +311,6 @@



/**
 *
 *增加库区点位
 * 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);
    // }
}

/**
 * 格式化日期
@@ -527,16 +338,6 @@
    return fmt;
}

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

/**
 * 格式化日期