建模gis监管页面修改

sgj

2026-03-05 8e4be3c0e5577fddae3ae30b0ca00f8b7a6c490e

建模gis监管页面修改

 fzzy-igdss-core/src/main/java/com/fzzy/igds/data/GroupDepotData.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
package com.fzzy.igds.data;

import lombok.Data;

import java.io.Serializable;

/**
 * gis监管-建模版本，仓库信息展示
 *
 * @author sgj
 * @since 2026/03/05
 */
@Data
public class GroupDepotData implements Serializable {
    /**
     * ç›‘管库区信息
     */
    private String deptId;        //库区编码
    private String code;        //行政区划编码
    private String county;      //行政区名称
    private String deptName;    //库区名称
    private String depotId;    //仓库编码
    private String depotName;   //仓库名称
    private Double storageNum = 0.0; //库存数

}

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

@@ -148,19 +148,20 @@
        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);
        String deptId = (deptList != null && !deptList.isEmpty()) ? deptList.get(0).getDeptId() : null;
//        view.put("defaultDeptId", deptId != null ? deptId : "00");
        view.put("defaultDeptId","5372001001");
        //获取所有仓库
        List<GroupDepotData> depotList = groupManager.getDepotData(user.getCompanyId());
        view.put("depotList", depotList);

        //统计信息
        GroupGisData groupGisData = groupManager.getGisData();

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

@@ -303,6 +303,44 @@
        return list;
    }


    /**
     * èŽ·å–库区封装信息
     *
     * @param companyId
     * @return
     */
    public List<GroupDepotData> getDepotData(String companyId) {

        List<GroupDepotData> list = new ArrayList<>();
        GroupDepotData depotData;
        List<Dept> deptList = deptService.getDeptByUserType(null);
        if (null != deptList && !deptList.isEmpty()) {
            List<Depot> depotList;
            for (Dept dept : deptList) {
                //统计仓库数
                depotList = depotService.getCacheDepotList(dept.getCompanyId(), dept.getId());
                if (null != depotList && !depotList.isEmpty()) {
                    for (Depot depot : depotList) {
                        depotData = new GroupDepotData();
                        depotData.setDeptId(dept.getId());
                        depotData.setDeptName(dept.getKqmc());
                        depotData.setCode(dept.getXzqhdm());
                        depotData.setCounty(dept.getXzqhmc());
                        depotData.setDepotId(depot.getId());
                        depotData.setDepotName(depot.getName());
                        if (null == depot.getStorageReal()) {
                            depot.setStorageReal(0.0);
                        }
                        depotData.setStorageNum(depot.getStorageReal() / 1000);
                        list.add(depotData);
                    }
                }
            }
        }
        return list;
    }

    /**
     * èŽ·å–库区下监控信息
     *

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

@@ -234,4 +234,157 @@
        ]
    };
    barChart.setOption(option);
}
}

function modelingBarChartLoad(id) {
    var dom = document.getElementById(id);
    var barChart = echarts.init(dom);
    var predata = [];
    var ydata = [];
    if (gisData) {
        predata[0] = gisData.bankSumPer;
        ydata[0] = gisData.bankSum;
    } else {
        predata = [50];
        ydata = [500];
    }
    var option = {
        grid: {
            top: '20%',
            left: '2%',
            right: '5%',
            bottom: '1%',
        },
        tooltip: {
            show: true,
            trigger: "axis",
            formatter: function (data) {
                let result = '';
                let content = '';
                for (let i = 0; i < data.length - 1; i++) {
                    if (data[i].componentSubType === 'bar' && data[i].seriesName !== '背景条') {
                        content += `${data[i].marker} ${data[i].seriesName}<span style='font-size:12px; float:right;margin-left:20px;'>${data[i].data}</span><br/>`
                        result = `<span style='font-size: 14px;'>${data[i].name}</span> <br/> ${content}`;
                    }
                }
                return result;
            }
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                margin: 20,
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: [{
            inverse: true,
            type: 'category',
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                align: 'left',
                verticalAlign: 'bottom',
                padding: [0, 0, 26, 10],
                fontSize: "18",
                color: '#fff',
                formatter: function (param) {
                    return ['{img|}' + '{b|' + param + '}']
                },
                rich: {
                    b: {
                        fontSize: 18,
                        color: '#fff',
                        padding: [0, 0, 0, 10]
                    },
                    img: {
                        backgroundColor: {
                            image: '/img/web/group/c-i1.png',
                        },
                        width: 17,
                        align: 'left',
                    }
                }
            },
            axisTick: {
                show: false
            },
            data: ['质押重量'],
        },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    inside: true,
                    verticalAlign: "bottom",
                    textStyle: {
                        fontFamily: 'DINCond-Bold',
                        color: "#ffd12b",
                        fontSize: "20",
                        padding: [0, 0, 26, 0],
                    },
                    formatter: function (param) {
                        return toThousands(param)
                    }
                },
                data: ydata,
            }
        ],
        series: [{
            name: '占比',
            type: 'bar',
            stack: 'all',
            barWidth: 12,
            itemStyle: {
                color: '#00e4fa'
            },
            data: predata,
            z: 1
        },
            {
                name: '辅助值',
                type: 'pictorialBar',
                barWidth: 12,
                symbol: 'roundRect',
                symbolMargin: 2,
                symbolSize: [2, 12],
                symbolOffset: [-2, '0%'],
                symbolClip: true,
                symbolRepeat: true,
                itemStyle: {
                    color: '#082640'
                },
                data: [100],
                z: 2
            },
            {
                name: '背景条',
                type: 'bar',
                silent: true,
                barWidth: 12,
                barGap: '-100%',
                itemStyle: {
                    color: '#082640'
                },
                data: [100],
                z: 0
            }
        ]
    };
    barChart.setOption(option);
}

 fzzy-igdss-web/src/main/resources/static/group/gis.css

@@ -1,164 +1,222 @@
@font-face {
    font-family: DINCond-Bold;
  src: url('../fonts/DINCond-Bold.otf');
    font-family: DINCond-Bold;
    src: url('../fonts/DINCond-Bold.otf');
}


.i-nav3.on{
  background-image: url(../img/web/group/c-btn3.png);
.i-nav3.on {
    background-image: url(../img/web/group/c-btn3.png);
}
.c-main{
  position: relative;
  height: 910px;

.c-main {
    position: relative;
    height: 910px;
}
.c-left{
  position: absolute;
  top: 10px;
  left: 0;
  padding-left: 20px;
  transition: .4s;

.c-left {
    position: absolute;
    top: 10px;
    left: 0;
    padding-left: 20px;
    transition: .4s;
}
.c-left.hidden{
  transform: translateX(-518px);

.c-left.hidden {
    transform: translateX(-518px);
}
.c-right.hidden{
  transform: translateX(380px);

.c-right.hidden {
    transform: translateX(380px);
}
.hidden .o-btn{
  transition: .4s;
  opacity: 1;
  visibility: visible;

.hidden .o-btn {
    transition: .4s;
    opacity: 1;
    visibility: visible;
}
.c-left .inner{
  padding: 90px 20px 20px;
  width: 518px;
  height: 910px;
  background: url(../img/web/group/cd-bg1.png) no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;

.c-left .inner {
    padding: 90px 20px 20px;
    width: 518px;
    height: 910px;
    background: url(../img/web/group/cd-bg1.png) no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
}
.c-right{
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 12px;
  transition: .4s;

.c-right {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 12px;
    transition: .4s;
}
.c-right .inner{
  padding-top: 80px;
  width: 399px;
  height: 910px;
  background: url(../img/web/group/cd-bg2.png) no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;

.c-right .inner {
    padding-top: 80px;
    width: 399px;
    height: 910px;
    background: url(../img/web/group/cd-bg2.png) no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
}
.c-left .close{
  cursor: pointer;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 10px;
  right: 35px;

.c-left .close {
    cursor: pointer;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 10px;
    right: 35px;
}
.c-right .close{
  cursor: pointer;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 10px;
  right: 40px;

.c-right .close {
    cursor: pointer;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 10px;
    right: 40px;
}
.o-btn{
  position: absolute;
  top: 50%;
  width: 89px;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;

.o-btn {
    position: absolute;
    top: 50%;
    width: 89px;
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
}
.o-btn img{
  display: block;
  width: 100%;

.o-btn img {
    display: block;
    width: 100%;
}
.c-left .o-btn{
  left: 100%;
  margin-left: -4px;

.c-left .o-btn {
    left: 100%;
    margin-left: -4px;
}
.c-right .o-btn{
  right: 100%;
  margin-right: -18px;

.c-right .o-btn {
    right: 100%;
    margin-right: -18px;
}
.m-box1{
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin-bottom: 30px;

.modeling-left-topInfo-box2 {
    background: url("../img/web/group/left-box2.png") no-repeat;
    width: 100%;
    height: 362px;
    box-sizing: border-box;
    padding: 56px 20px 20px 20px;
    position: relative;
}
.m-box1 .l{
  width: 212px;
  margin-right: 24px;


.modeling-left-topInfo-kd {
    width: 287px;
    height: 90px;
    margin: 20px auto;
    overflow: hidden;
    border-top: 1px solid #113359;
    border-bottom: 1px solid #113359;
    background: radial-gradient(circle, #062251, rgba(6, 35, 77, 0));
}
.m-box1 .r{
  flex:1;

.modeling-left-topInfo-ck {
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.m-box1 .chartbox{
  position: relative;
  width: 212px;
  height: 212px;

.modeling-left-topInfo-kd-list li {
    width: 100%;
}
.m-box1 .chartbox::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url(../img/web/group/c-bg1.png) no-repeat center;
  background-size: contain;


.m-box1 {
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-bottom: 30px;
}
.m-box1 .chartbox::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url(../img/web/group/c-bg2.png) no-repeat center;
  background-size: contain;

.m-box1 .l {
    width: 212px;
    margin-right: 24px;
}
.m-box1 .chartbox .txt{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -55px;
  margin-left: -55px;
  width:  110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  color: #fff;
  z-index: 2;

.m-box1 .r {
    flex: 1;
}
.m-box1 .chartbox .txt .n{
  font-size: 40px;
  color: #ffd100;
  font-family: DINCond-Bold;

.m-box1 .chartbox {
    position: relative;
    width: 212px;
    height: 212px;
}
.m-box1 .chart{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;

.m-box1 .chartbox::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: url(../img/web/group/c-bg1.png) no-repeat center;
    background-size: contain;
}

.m-box1 .chartbox::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: url(../img/web/group/c-bg2.png) no-repeat center;
    background-size: contain;
}

.m-box1 .chartbox .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -55px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 16px;
    color: #fff;
    z-index: 2;
}

.m-box1 .chartbox .txt .n {
    font-size: 40px;
    color: #ffd100;
    font-family: DINCond-Bold;
}

.m-box1 .chart {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
}

/* .m-box1 .chart::before{
  content: "";
  display: block;
@@ -174,170 +232,221 @@
  transform: translate(-50%,-50%);
  pointer-events: none;
} */
.ul-listb1{
  height: 270px;
  overflow-y: auto;
  overflow-x: hidden;
}
.ul-listb1::-webkit-scrollbar {/*滚动条整体样式*/
  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
.ul-listb1 {
    height: 270px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ul-listb1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 6px;
  background: #00ccff;
.ul-listb1::-webkit-scrollbar { /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.ul-listb1::-webkit-scrollbar-track {/*滚动条里面轨道*/
  border-radius: 6px;
  background: rgba(0, 204, 255,.1);
}
.ul-listb1 .con{
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 38px;
  margin-bottom: 1px;
  padding: 0 20px;
}
.ul-listb1 .dot{
  width:  7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
}
.ul-listb1 .dot::before{
  content: "";
  display: block;
  width:  13px;
  height: 13px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -7px;
  background-color: inherit;
  opacity: .5;
}
.ul-listb1 .num{
  font-size: 22px;
  font-family: DINCond-Bold;
}
.ul-listb1 .type{
  flex:1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
}
.m-box2 .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-box2 .tit{
  font-size: 18px;
  color: #fff;
  padding-left: 25px;
  background: url(../img/web/group/c-i1.png) no-repeat left center;
  background-size: 17px;
}
.m-box2 .num{
  font-size: 20px;
  color: #ffd12b;
  font-family: DINCond-Bold;
}
.m-box2 .chart{
  height: 540px;
}
.m-nav{
  height: 820px;
  overflow-y: auto;
  overflow-x: hidden;
  /* padding: 0 10px 0 37px; */
  padding-right: 15px;
  padding-left: 20px;
}
.m-nav::-webkit-scrollbar {/*滚动条整体样式*/
  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
.ul-listb1::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 6px;
    background: #00ccff;
}

.m-nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 6px;
  background: #00ccff;
.ul-listb1::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 6px;
    background: rgba(0, 204, 255, .1);
}

.m-nav::-webkit-scrollbar-track {/*滚动条里面轨道*/
  border-radius: 6px;
  background: rgba(0, 204, 255,.1);
.ul-listb1 .con {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 38px;
    margin-bottom: 1px;
    padding: 0 20px;
}
.m-nav .tit{
  display: flex;
  align-items: center;
  padding-left: 16px;

.ul-listb1 .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
}
.m-nav .arr{
  width: 24px;
  height: 20px;
  background: url(../img/web/group/c-i3.png) no-repeat center;
  background-size: contain;

.ul-listb1 .dot::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -7px;
    background-color: inherit;
    opacity: .5;
}
.m-nav .icon{
  width: 50px;
  height: 50px;
  background: url(../img/web/group/c-i2.png) no-repeat center;
  background-size: contain;
  flex-shrink: 0;

.ul-listb1 .num {
    font-size: 22px;
    font-family: DINCond-Bold;
}
.m-nav .v1{
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;

.ul-listb1 .type {
    flex: 1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    color: #fff;
}

.m-box2 .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-box2 .tit {
    font-size: 18px;
    color: #fff;
    padding-left: 25px;
    background: url(../img/web/group/c-i1.png) no-repeat left center;
    background-size: 17px;
}

.m-box2 .num {
    font-size: 20px;
    color: #ffd12b;
    font-family: DINCond-Bold;
}

.m-box2 .chart {
    height: 540px;
}

.m-box3 {
    margin-bottom: 30px;
}

.m-box3 .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-box3 .tit {
    font-size: 18px;
    color: #fff;
    padding-left: 25px;
    background: url(../img/web/group/c-i1.png) no-repeat left center;
    background-size: 17px;
}

.m-box3 .num {
    font-size: 20px;
    color: #ffd12b;
    font-family: DINCond-Bold;
}

.m-box3 .chart {
    height: 100px;
}

.m-nav {
    height: 820px;
    overflow-y: auto;
    overflow-x: hidden;
    /* padding: 0 10px 0 37px; */
    padding-right: 15px;
    padding-left: 20px;
}

.m-nav::-webkit-scrollbar { /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.m-nav::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 6px;
    background: #00ccff;
}

.m-nav::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 6px;
    background: rgba(0, 204, 255, .1);
}

.m-nav .tit {
    display: flex;
    align-items: center;
    padding-left: 16px;
}

.m-nav .arr {
    width: 24px;
    height: 20px;
    background: url(../img/web/group/c-i3.png) no-repeat center;
    background-size: contain;
}

.m-nav .icon {
    width: 50px;
    height: 50px;
    background: url(../img/web/group/c-i2.png) no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

.m-nav .v1 {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #fff;
}

/* .m-nav .two,
.m-nav .three{
  padding-left: 30px;
} */
.m-nav .three{
  padding: 19px 0 10px;
}
.m-nav .three  >.tit{
  padding-left: 102px;
  padding-right: 14px;
  margin-bottom: 17px;
}
.m-nav .two >.con >.tit{
  padding-left: 55px;
}
.m-nav .three{
  background-color: rgba(6, 133, 255,.1);
}
.m-nav .three .icon{
  width: 16px;
  height: 16px;
  background-image: url(../img/web/group/c-i4.png);
  margin: 4px 8px 0 0;
}
.m-nav .three .v1{
  align-items: flex-start;
}
.m-nav .sub{
  display: none;
.m-nav .three {
    padding: 19px 0 10px;
}

.c-cen{
  position: absolute;
  top: 10px;
  /*left: 540px;*/
  /*right: 420px;*/
  display: flex;
  align-items: center;
  bottom: 10px;
.m-nav .three > .tit {
    padding-left: 102px;
    padding-right: 14px;
    margin-bottom: 17px;
}

.m-nav .two > .con > .tit {
    padding-left: 55px;
}

.m-nav .three {
    background-color: rgba(6, 133, 255, .1);
}

.m-nav .three .icon {
    width: 16px;
    height: 16px;
    background-image: url(../img/web/group/c-i4.png);
    margin: 4px 8px 0 0;
}

.m-nav .three .v1 {
    align-items: flex-start;
}

.m-nav .sub {
    display: none;
}

.c-cen {
    position: absolute;
    top: 10px;
    /*left: 540px;*/
    /*right: 420px;*/
    display: flex;
    align-items: center;
    bottom: 10px;
}

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

@@ -1,9 +1,5 @@
var colors = {};
var map;
var disProvince;//行政区颜色渲染
var deptListMap = {};
var allAreaMap = {};
var markers = [];//点标记
var type = "0";
var county = "all";
var breedChart = null;
@@ -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,91 @@
    });

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

    renderDeptMess(defaultDeptId);
});

// socket信息返回處理
function renderDeptMess(deptId) {
    //从deptList中找到deptid
    console.log("切换库区deptid")
    console.log(deptId)
    console.log(deptList)
    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) {
    console.log("切换仓库depotId")
    console.log(depotId)
    console.log(depotList)
    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 +206,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);
}

/**
@@ -254,7 +229,7 @@
                (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\">" +
@@ -266,24 +241,21 @@
                        (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 +263,7 @@
        $("#menuDiv").html(html);
    }
}


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


@@ -342,164 +315,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 +342,6 @@
    return fmt;
}

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

/**
 * æ ¼å¼åŒ–日期

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

@@ -90,12 +90,11 @@
        <div class="c-cen">
            <iframe
                    id="gisFrame"
                    src="http://172.67.157.132:5000?uid=5372001001"
                    th:src="@{http://172.67.157.132:5000(uid=${defaultDeptId})}"
                    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="">-->
@@ -195,11 +194,33 @@
                        </ul>
                    </div>
                </div>
                <div class="m-box2">
                <div class="m-box3">
                    <div class="item">
                        <div class="bot">
                            <div class="chart" id="ss"></div>
                        </div>
                    </div>
                </div>

                <div class="modeling-left-topInfo-box2" id="areaInformation">
                    <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>乌鲁木齐市</span>
                    </div>
                    <div class="panel-content">
                        <h2 class="right-topInfo-kd-h">库区1</h2>
                        <div class="modeling-left-topInfo-kd">
                            <div class="modeling-left-topInfo-ck">
                                <h1>一号仓库</h1>
                            </div>
                        </div>
                        <ul class="modeling-left-topInfo-kd-list right-topInfo-jg">
                            <li>
                                <p>0</p>
                                <h3>库存数（吨）</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
@@ -222,7 +243,7 @@
                                <div class="tit">
                                    <div class="arr"></div>
                                    <a href="javascript:;" class="v1"><i class="icon"></i><span
                                            class="t">乌鲁木齐市</span></a>
                                            class="t">新疆建行</span></a>
                                </div>
                                <div class="sub three">
                                    <div class="tit">
@@ -239,7 +260,7 @@
                                <div class="tit">
                                    <div class="arr"></div>
                                    <a href="javascript:;" class="v1"><i class="icon"></i><span
                                            class="t">克拉玛依市</span></a>
                                            class="t">新疆农行</span></a>
                                </div>
                                <div class="sub three">
                                    <div class="tit">
@@ -256,7 +277,7 @@
                                <div class="tit">
                                    <div class="arr"></div>
                                    <a href="javascript:;" class="v1"><i class="icon"></i><span
                                            class="t">吐鲁番市</span></a>
                                            class="t">无质押银行</span></a>
                                </div>
                                <div class="sub three">
                                    <div class="tit">
@@ -280,33 +301,25 @@
</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 defaultDeptId = [[${defaultDeptId}]];
    var depotList = [[${depotList}]];
    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>