提交GIS首页

jiazx0107

2025-11-21 2d34de3edb86c16cfadf4ec09ff22d1eb128bccb

提交GIS首页

 fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/group/GIsController.java

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

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * GIS管理控制器
 */
@Controller
@RequestMapping("/group/gis")
public class GIsController {

    private String prefix = "group";

    /**
     * GIS管理首页
     */
    @GetMapping()
    public String index() {
        return prefix + "/gis-index";
    }



}

 fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/system/SysUserController.java

@@ -1,5 +1,7 @@
package com.fzzy.sys.controller.system;

import com.fzzy.igds.domain.Bank;
import com.fzzy.igds.service.BankService;
import com.ruoyi.common.annotation.Log;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
@@ -57,6 +59,9 @@

    @Autowired
    private SysPasswordService passwordService;

    @Autowired
    private BankService bankService;

    @RequiresPermissions("system:user:view")
    @GetMapping()
@@ -122,6 +127,8 @@


        mmap.put("posts", postService.selectPostAll(ShiroUtils.getLoginUserCompanyId()));

        mmap.put("banks", bankService.listAll(null));
        return prefix + "/add";
    }

@@ -164,6 +171,10 @@
        String companyId = ShiroUtils.getLoginUserCompanyId();

        mmap.put("posts", postService.selectPostsByUserId(userId, companyId));


        mmap.put("banks", bankService.listAll(null));

        return prefix + "/edit";
    }


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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,380 @@
//------------------------------------------------------------------------------------------------
var breedChart = null;

/**
 * é¥¼å›¾åŠ è½½
 * @param obj
 * @param id
 */
function pieChartLoad(data, id) {
    var dom = document.getElementById(id);
    var pieChart = echarts.init(dom);

    var option = {
        tooltip: {
            trigger: 'item',
            position:['20%','110%'],
            formatter: function (params) {
                return params.name + ': ' + params.value;
            }
        },
        color: ['#00d2eb', '#16e2ad', '#ffb517', '#ec3c48', '#8767ff', '#297aff', '#ee3c90'],
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['55%', '84%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                },
                z: 1,
                data: data,
            }
        ]
    };
    pieChart.setOption(option);
    if (id === 'breedChart') {
        breedChart = {"chart": pieChart, "option": option};
    }
}

/**
 * å †å æŸ±çŠ¶å›¾åŠ è½½
 * @param obj
 * @param id
 */
// æ­£å¸¸æ•°æ®
var listData = [{
    value: 8,
    name: '测试1'
},
    {
        value: 2,
        name: '测试2'
    },
    {
        value: 83,
        name: '测试3'
    },
    {
        value: 22,
        name: '测试4'
    },
    {
        value: 22,
        name: '测试5'
    }
];
// å¼‚常数据
var listData1 = [{
    value: 20,
    name: '测试1'
},
    {
        value: 10,
        name: '测试2'
    },
    {
        value: 4,
        name: '测试3'
    },
    {
        value: 20,
        name: '测试4'
    },
    {
        value: 20,
        name: '测试5'
    }
];


function toThousands(num) {
    num = num.toString().split("."); // åˆ†éš”小数点
    var arr = num[0].split("").reverse(); // è½¬æ¢æˆå­—符数组并且倒序排列
    var res = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (i % 3 === 0 && i !== 0) {
            res.push(","); // æ·»åŠ åˆ†éš”符
        }
        res.push(arr[i]);
    }
    res.reverse(); // å†æ¬¡å€’序成为正确的顺序
    if (num[1]) { // å¦‚果有小数的话添加小数部分
        res = res.join("").concat("." + num[1]);
    } else {
        res = res.join("");
    }
    return res;

}


function barChartLoad(data, id) {
    var dom = document.getElementById('ss');
    var barChart = echarts.init(dom);
    var predata = [];
    var ydata = [];
    if (data) {
        for (var i = 0; i < data.typeChartPie.length; i++) {
            if (data.typeChartPie[i].name == "省级储备粮") {
                predata[0] = data.typeChartPie[i].percent;
                ydata[0] = data.typeChartPie[i].value;
            }
            if (data.typeChartPie[i].name == "其他粮食") {
                predata[1] = data.typeChartPie[i].percent;
                ydata[1] = data.typeChartPie[i].value;
            }
            if (data.typeChartPie[i].name == "省级储备油") {
                predata[2] = data.typeChartPie[i].percent;
                ydata[2] = data.typeChartPie[i].value;
            }
            if (data.typeChartPie[i].name == "其他油") {
                predata[3] = data.typeChartPie[i].percent;
                ydata[3] = data.typeChartPie[i].value;
            }
        }
    } else {
        predata = [50, 30, 10, 10];
        ydata = [3733.230, 1825.356, 2523.248, 2005.123];
    }
    console.log(ydata);
    console.log(predata);
    var option = {
        grid: {
            top: '10%',
            left: '2%',
            right: '5%',
            bottom: '8%',
            // containLabel: true
        },
        tooltip: {
            show: true,
            trigger: "axis",

            /*  formatter: params => {
               if (params.componentSubType === 'bar' && params.seriesName !== '背景条') {
                 return `${params.seriesName}<br />${params.name}:${params.value}`
               } else {
                 return ''
               }
             } */
            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}`;
                    } else {
                        // result = ''
                    }
                }
                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|}'+ param
                    return ['{img|}' + '{b|' + param + '}']
                },
                rich: {
                    b: {
                        fontSize: 18,
                        color: '#fff',
                        padding: [0, 0, 0, 10]
                    },
                    img: {
                        backgroundColor: {
                            image: '/static/group/img/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', // pictorialBar
            stack: 'all',
            /* emphasis: {
              focus: 'series'
            }, */
            barWidth: 12,
            itemStyle: {
                color: '#00e4fa'
            },
            data: predata,
            z: 1
        },
            {
                name: '辅助值',
                type: 'pictorialBar',
                barWidth: 12,
                symbol: 'roundRect',
                symbolMargin: 2, //间隙
                symbolSize: [2, 12],
                symbolOffset: [-2, '0%'], //向左偏移9
                symbolClip: true, //裁剪掉左侧多余部分
                symbolRepeat: true,
                itemStyle: {
                    color: '#082640'
                },
                data: [100, 100, 100, 100],
                z: 2
            },
            {
                // è¾…助背景图形
                name: '背景条',
                type: 'bar', // pictorialBar
                silent: true,
                barWidth: 12,
                barGap: '-100%',
                itemStyle: {
                    color: '#082640'
                },
                data: [100, 100, 100, 100],
                z: 0
            }
        ]
    };

    barChart.setOption(option);
    /*   if (id === 'breedChart') {
        breedChart = pieChart;
      } */


}

window.onload = function () {
   // barChartLoad(null);
    /*粮食品种*/
    window.onresize = function (e) {
        if (breedChart) {
            breedChart.resize();
        }
    }

  //  ajaxFoodNum();
}

/**
 * èŽ·å–饼状图数据
 */
function ajaxFoodNum() {

    var data = {
        "county": county,
        "type": type,
        "companyId": companyId
    };

    $.ajax({
        type: "POST",
        url: "../../visual/amount-food-number",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code == "0000") {
                var data = result.data;
                renderFoodNum(data);
            }
        },
        error: function (error) {

        }
    });
}

//更新饼状图信息
function renderFoodNum(data) {
    if (data.allSum.length > 8) {
        $("#foodSum").css("font-size", "25px");
    } else {
        $("#foodSum").css("font-size", "32px");
    }
    $("#foodSum").html(data.allSum);

    var foodNumPerHtml = "";
    var color = ["0, 228, 250", "22, 226, 173", "255, 181, 23", "238, 60, 72", "135, 103, 255", "41, 122, 255", "238, 60, 144", "0, 228, 250", "22, 226, 173", "255, 181, 23", "238, 60, 72", "135, 103, 255", "41, 122, 255", "238, 60, 144"];
    for (var i = 0; i < data.varietyChartPie.length; i++) {
        foodNumPerHtml += "" +
            "<li>\n" +
            "\t\t\t\t\t\t\t\t\t<div class=\"con\" style=\"background-color: rgba(" + color[i] + ",.05);\">\n" +
            "\t\t\t\t\t\t\t\t\t\t<div class=\"dot\" style=\"background-color: rgb(" + color[i] + ");\"></div>\n" +
            "\t\t\t\t\t\t\t\t\t\t<div class=\"num\" style=\"color: rgb(" + color[i] + ");\">" + data.varietyChartPie[i].percent + "%</div>\n" +
            "\t\t\t\t\t\t\t\t\t\t<div class=\"type\">" + data.varietyChartPie[i].name + "</div>\n" +
            "\t\t\t\t\t\t\t\t\t</div>\n" +
            "\t\t\t\t\t\t\t\t</li>";
    }
    $("#foodNumPer").html(foodNumPerHtml);
    if (data.varietyChartPie.length > 0) {
        var varietyChart = breedChart;
        varietyChart.option.series[0].data = data.varietyChartPie;
        varietyChart.chart.setOption(varietyChart.option, true);
        breedChart = varietyChart;
    }
    barChartLoad(data);
}

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@

$(function(){
    $('.sup-right-btn').click(function(){
        var showR = $(this).parent(".sup-rightWrap")
        if (showR.hasClass('showOn')) {
            showR.removeClass('showOn')
        } else{
            showR.addClass('showOn')
        }
    });

});
$(function(){
    $('.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')
        }
    });
});

/**
 * åˆ‡æ¢é¡µé¢
 * @param pageTag
 */
function changePage(pageTag) {
    var url = "../visual/index";
    //后台管理
    if ("home" == pageTag) {
        url = "../home?t=grain";
        window.parent.open(url, "_self");
        return;
    }
    //后台管理--计划审批页面
    if ("PlanApplyInfoVet" == pageTag) {
        url = "../home?t=PlanApplyInfoVet";
        window.parent.open(url, "_self");
        return;
    }
    //如果是退出系统
    if ("log-out" == pageTag) {
        url = "../log-out";
        window.parent.open(url, "_self");
        return;
    }

    if ("amount" == pageTag) {
        url = "../visual/amount";
    }
    if ("gis" == pageTag) {
        url = "../visual/gis";
    }
    if ("plan" == pageTag) {
        url = "../visual/plan";
    }
    if ("ai" == pageTag) {
        url = "../visual/ai";
    }
    if ("video" == pageTag) {
        url = "../visual/video";
    }
    window.location.href = url;
}

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,576 @@
var colors = {};
var map;
var disProvince;//行政区颜色渲染
var deptAreasMap = {};
var allDeptMap = {};
var markers = [];//点标记
var type = "0";
var county = "all";

//var switch2AreaNode2;

$(function () {
    if (deptAreas) {
        for (var i = 0; i < deptAreas.length; i++) {
            deptAreasMap[deptAreas[i].id] = deptAreas[i];
        }
    }
    if (allDept) {
        for (var i = 0; i < allDept.length; i++) {
            allDeptMap[allDept[i].id] = allDept[i];
        }
    }
    //初始化时间
    //initTime();

    //初始化地图
    initMap();

    //左侧图表
/*    pieChartLoad(
        [
            {value: "0.000", name: '稻谷'},
            {value: "0.000", name: '玉米'},
            {value: "0.000", name: '小麦'}
        ],
        'breedChart'
    );*/

    //渲染部门
    //renderDepts();

    //大屏标语
    //initDicSlogan();

    //renderAreas(610000);
    setTimeout(function () {
         renderAreas(610000);
    }, 2000);

});

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

function initMap() {
    map = new AMap.Map('map_container', {
        center: [108.953544, 34.265892],
        zoom: 6.6,
        mapStyle: 'amap://styles/41f8248740d3659ddc65dc363078592c',
        // rotateEnable:true,
        // pitchEnable:true,
        // pitch: 0,
        // rotation: 0,
        resizeEnable: true
        //viewMode:'3D', //开启3D视图,默认为关闭
    });

    new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 0
    }).search('陕西省', function (status, result) {
        // å¤–多边形坐标数组和内多边形坐标数组
        var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
        ];
        var holes = result.districtList[0].boundaries

        var pathArray = [
            outer
        ];
        pathArray.push.apply(pathArray, holes)
        var polygon = new AMap.Polygon({
            pathL: pathArray,
            strokeColor: '#71B3ff',//#00eeff
            strokeWeight: 1,
            fillColor: '#000000',//#71B3ff
            fillOpacity: 0.4
        });
        polygon.setPath(pathArray);
        map.add(polygon);
    })

    //console.log(colors);

    //-------------------------------------------------------------------------------------------------------------------------


    //默认行政区域编码
    //renderColor(defaultAreaCode);
}

//socket信息返回處理
function socketOnMessage(pocket) {

    if (pocket.userId == "slogan") {
        var data = pocket.data;
        dicSlogan = data;
        initDicSlogan();
    }
}

/**
 * åˆå§‹æ ‡è¯­æ•°æ®
 */
function initDicSlogan() {
    if (dicSlogan) {
        if (dicSlogan.color == "red") {
            $("#sloganText").css({
                color: "#DE2910"
            });
        } else {
            $("#sloganText").css({
                color: "#7ddfff"
            });
        }
        $("#sloganText").text(dicSlogan.content);
    }
}

/**
 * æ ¹æ®åŒºåŽ¿èŽ·å–库区
 */
function getDeptArea(city, county) {
    var list = [];
    if (deptAreas) {
        for (var i = 0; i < deptAreas.length; i++) {
            if (city == deptAreas[i].deptCity) {
                list.push(deptAreas[i]);
            }
            if (county == deptAreas[i].deptCounty) {
                list.push(deptAreas[i]);
            }
        }
    }
    return list;
}

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

}

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

/**
 * æ¸²æŸ“库区列表
 */
function renderDepts() {
    if (depts) {
        var html = "";
        var childs = [];
        var areas = [];
        for (var i = 0; i < depts.length; i++) {
            html += "<div style=\"width: 305px; overflow: hidden\">" +
                "<div class=\"sup-menu-group menu-group\">" +
                "<div class=\"sup-menu-title\">" +
                "<i class=\"i-icon fl\"><img src=\"/static/images/visual/icon-sj.png\"/></i>" +
                "<a href=\"###\" onclick=\"renderAreas('" + depts[i].id + "')\">" +
                "<span class=\"i-icon32 fl\"><img src=\"/static/images/visual/c-i2.png\"/></span>" +
                (depts[i].name ? depts[i].name : "") +
                "</a>" +
                "</div>";
            if (depts[i].children && depts[i].children.length > 0) {
                childs = depts[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=\"/static/images/visual/icon-sj.png\"/></i>" +
                        "<a href=\"###\" onclick=\"renderAreas('" + childs[j].id + "')\">" +
                        "<span class=\"i-icon32 fl\"><img src=\"/static/images/visual/c-i2.png\"/></span>" +
                        (childs[j].name ? childs[j].name : "") +
                        "</a>" +
                        "</div>";
                    areas = getDeptArea("", childs[j].id);
                    if (areas && areas.length > 0) {
                        for (var k = 0; k < areas.length; k++) {
                            html += "<div class=\"sup-menu-box\">" +
                                "<p>" +
                                "<span class=\"i-icon32 fl\"><img src=\"/static/images/visual/icon-kuqu.png\"/></span>" +
                                "<a href=\"#\" onclick=\"showAreaInfo('" + areas[k].id + "')\">" + areas[k].name + "</a>" +
                                "</p>" +
                                "</div>";
                        }
                    }
                    html += "</li>" +
                        "</ul>";
                }
            } else {
                //没有子节点，直接就是区级别
                areas = getDeptArea("", depts[i].id);
                if (areas && areas.length > 0) {
                    for (var k = 0; k < areas.length; k++) {
                        html += "<ul class=\"sup-menu-ul\">" +
                            "<li>" +
                            "<div class=\"sup-menu-h\">" +
                            "<i class=\"i-icon fl\"><img src=\"/static/images/visual/icon-sj.png\"/></i>" +
                            "<a href=\"###\" onclick=\"renderAreas('" + areas[k].id + "')\">" +
                            "<span class=\"i-icon32 fl\"><img src=\"/static/images/visual/icon-kuqu.png\"/></span>" +
                            (areas[k].name ? areas[k].name : "") +
                            "</a>" +
                            "</div>";
                        html += "<div class=\"sup-menu-box\">" +
                            "</div>";
                        html += "</li>" +
                            "</ul>";

                    }
                }
            }

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

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

/**
 * èŽ·å–地图行政区域颜色
 * @param adcode
 * @returns {*}
 */
function getColorByAdcode(adcode) {
    if (!colors[adcode]) {
        var gb = Math.random() * 155 + 50;
        colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
    }
    return colors[adcode];
};

/**
 *
 *增加库区点位
 * 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.lon, deptArea.lat];
        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.id;
    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.name.length>17) {
        content += '<h3 style="margin:0 0 10px 0;line-height:24px;font-size:14px;color:#fff;">' + (deptArea.name ? deptArea.name : "没有获取到库区信息") + '</h3>' ;
    }else{
        content +=  '<h3 style="margin:0 0 10px 0;line-height:24px;font-size:18px;color:#fff;">' + (deptArea.name ? deptArea.name : "没有获取到库区信息") + '</h3>' ;
    }
    content += '</div>'+
        '<div style="width: 40px;float: left;">' +
        '<img style="height: 20px;" src="../../static/images/visual/icon_close.png" onclick="closeInfoWindow()"></img>' +
        '</div>'+
        '</div>'+

        '<p style="line-height:24px;font-size:12px;color:#fff;margin-right: 15px;"><img src="../../static/images/visual/icon-address.png" alt="" style="float:left;width: 16px;height: 16px;margin-right:3px;margin-top: 5px;"/>' + (deptArea.address ? deptArea.address + "(" + deptArea.lon + "," + deptArea.lat + ")" : "没有获取到库区信息") + '</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.depotNum ? deptArea.depotNum : 0) + '</p>' +
        '</div>' +
        '<div class="right-topInfo-kd-item">' +
        '<h3>油罐个数(个)</h3>' +
        '<p>' + (deptArea.depotOilNum ? deptArea.depotOilNum : 0) + '</p>' +
        '</div>' +
        '</div>' +
        '<ul class="right-topInfo-kd-list right-topInfo-jg sup-topInfo-list">' +
        '<li>';
    if (deptArea.storage && (deptArea.storage + "").length > 4) {
        content += '<p style="font-size: 22px">' + (deptArea.storage ? deptArea.storage.toFixed(3) : 0) + '</p>';
    } else {
        content += '<p style="font-size: 22px">' + (deptArea.storage ? deptArea.storage.toFixed(3) : 0) + '</p>';

    }
    content += '<h3>粮食储量(吨)</h3>'+
        '</li>' +
        '<li>';
    if (deptArea.storage && (deptArea.oilStorage + "").length > 4) {
        content += '<p style="font-size: 22px">' + (deptArea.oilStorage ? deptArea.oilStorage.toFixed(3) : 0) + '</p>';
    } else {
        content += '<p style="font-size: 22px">' + (deptArea.oilStorage ? deptArea.oilStorage.toFixed(3) : 0) + '</p>';
    }
    content += '<h3>植物油储量(吨)</h3>' +
        '</li>' +
        '<li>' +
        '<p style="font-size: 22px" >' + (deptArea.area ? deptArea.area : 0) + '</p>' +
        '<h3>占地面积（㎡）</h3>' +
        '</li>' +
        '</ul>' +
        '<a href="javaScript:;" onclick="toHomeDetail(\'' + deptAreaId + '\')"  class="sup-deatil-link"><img src="../../static/images/visual/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 = "../home?t=grain&deptAreaId=" + id;
    window.parent.open(url, "_self");
};

/**
 * æ ¹æ®è¡Œæ”¿ç¼–码渲染颜色，市级会将下面所有区渲染，区级只渲染当前区
 * @param adcode
 */
function renderColor(adcode) {
    // disProvince = new AMap.DistrictLayer.Province({
    //     zIndex: 12,
    //     adcode: adcode,
    //     depth: 2,
    //     opacity: 0.6,
    //     styles: {
    //         'fill': function (properties) {
    //             var adcode = properties.adcode;
    //             return getColorByAdcode(adcode);
    //         },
    //         'province-stroke': 'cornflowerblue',
    //         'city-stroke': 'white',//中国地级市边界
    //         'county-stroke': 'rgba(255,255,255,0.5)'//中国区县边界
    //     }
    // });
    // disProvince.setMap(map);
    //window.switch2AreaNode2(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/static/group/gis-map.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,271 @@
//创建一个实例
var districtExplorer = window.districtExplorer ;
/**
 * rgb转16进制
 * @param r
 * @param g
 * @param b
 * @returns {string}
 * @constructor
 */
function RGBToHex(r, g, b) {
    var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
    return hex;
}

// é¢œè‰²è¾…助方法
var colors = [];
var num = 0;
while(num < 20){
    var gb = Math.random() * 155 + 50;
    colors.push(RGBToHex(gb,gb,255));
    num++;
}
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {
//创建一个实例
    districtExplorer = window.districtExplorer = new DistrictExplorer({
        eventSupport: true, //打开事件支持
        map: map
    });
    //监听feature的hover事件
    districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
        toggleHoverFeature(feature, e.type === 'featureMouseover',
            e.originalEvent ? e.originalEvent.lnglat : null);
    });

//监听鼠标在feature上滑动
    districtExplorer.on('featureMousemove', function(e, feature) {
        //更新提示位置
        tipMarker.setPosition(e.originalEvent.lnglat);
    });

//feature被点击
    districtExplorer.on('featureClick', function(e, feature) {
        var props = feature.properties;
        //如果存在子节点
        // if (props.childrenNum > 0) {
        //切换聚焦区域
        //switch2AreaNode(props.adcode);
        renderAreas(props.adcode);
        // }
    });

//外部区域被点击
    districtExplorer.on('outsideClick', function(e) {
        districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) {
            if (routeFeatures && routeFeatures.length > 1) {
                //切换到省级区域
               // switch2AreaNode(routeFeatures[1].properties.adcode);
                renderAreas(routeFeatures[1].properties.adcode);
            } else {
                //切换到全国
                switch2AreaNode(610000);
            }
        }, {
            levelLimit: 2
        });
    });
});

//当前聚焦的区域
var currentAreaNode = null;
//鼠标hover提示内容
var $tipMarkerContent = $('<div class="tipMarker top" style="color: #1E9CFF;font-size: 18px;weight:100px;"></div>');
var tipMarker = new AMap.Marker({
    content: $tipMarkerContent.get(0),
    offset: new AMap.Pixel(0, 0),
    bubble: true
});

//根据Hover状态设置相关样式
function toggleHoverFeature(feature, isHover, position) {
    tipMarker.setMap(isHover ? map : null);
    if (!feature) {
        return;
    }
    var props = feature.properties;
    if (isHover) {
        //更新提示内容
        $tipMarkerContent.html("　　　" + props.name);
        //更新位置
        tipMarker.setPosition(position || props.center);
    }

    $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);

    //更新相关多边形的样式
    var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
    for (var i = 0, len = polys.length; i < len; i++) {
        polys[i].setOptions({
            fillOpacity: isHover ? 0.5 : 0.35
        });
    }
}



//绘制区域面板的节点
function renderAreaPanelNode(ele, props, color) {
    var $box = $('<li/>').addClass('lv_' + props.level);
    var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({
        'data-adcode': props.adcode,
        'data-level': props.level,
        'data-children-num': props.childrenNum || void(0),
        'data-center': props.center.join(',')
    }).html(props.name).appendTo($box);
    if (color) {
        $h2.css('borderColor', color);
    }
    //如果存在子节点
    if (props.childrenNum > 0) {
        //显示隐藏
        $('<div class="showHideBtn"></div>').appendTo($box);
        //子区域列表
        $('<ul/>').addClass('sublist lv_' + props.level).appendTo($box);
        $('<div class="clear"></div>').appendTo($box);
        if (props.level !== 'country') {
            $box.addClass('hide-sub');
        }
    }
    $box.appendTo(ele);
}

//填充某个节点的子区域列表
function renderAreaPanel(areaNode) {
    var props = areaNode.getProps();
    var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist');
    if (!$subBox.length && props.childrenNum) {
        //父节点不存在，先创建
        renderAreaPanelNode($('#area-tree'), props);
        $subBox = $('#area-tree').find('ul.sublist');
    }
    if ($subBox.attr('data-loaded') === 'rendered') {
        return;
    }
    $subBox.attr('data-loaded', 'rendered');
    var subFeatures = areaNode.getSubFeatures();
    //填充子区域
    for (var i = 0, len = subFeatures.length; i < len; i++) {
        renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]);
    }
}

//绘制某个区域的边界
function renderAreaPolygons(areaNode) {
    //更新地图视野
    map.setBounds(areaNode.getBounds(), null, null, true);
    //清除已有的绘制内容
    districtExplorer.clearFeaturePolygons();
    //绘制子区域
    districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
        var fillColor = colors[i % colors.length];
        var strokeColor = colors[colors.length - 1 - i % colors.length];
        return {
            cursor: 'default',
            bubble: true,
            strokeColor: strokeColor, //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: fillColor, //填充色
            fillOpacity: 0.35, //填充透明度
        };
    });
    //绘制父区域
    districtExplorer.renderParentFeature(areaNode, {
        cursor: 'default',
        bubble: true,
        strokeColor: 'black', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: areaNode.getSubFeatures().length ? null : colors[0], //填充色
        fillOpacity: 0.35, //填充透明度
    });
}
//切换区域后刷新显示内容
function refreshAreaNode(areaNode) {
    districtExplorer.setHoverFeature(null);
    renderAreaPolygons(areaNode);
    //更新选中节点的class
    var $nodeEles = $('#area-tree').find('h2');
    $nodeEles.removeClass('selected');
    var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');
    //展开下层节点
    $selectedNode.closest('li').removeClass('hide-sub');
    //折叠下层的子节点
    $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
}

//切换区域
function switch2AreaNode(adcode, callback) {
    //-----------------------刷新数据
    county = adcode;
    ajaxFoodNum();
    if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
        return;
    }
    loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
            if (callback) {
                callback(error);
            }
            return;
        }
        currentAreaNode = window.currentAreaNode = areaNode;
        //设置当前使用的定位用节点
        districtExplorer.setAreaNodesForLocating([currentAreaNode]);
        refreshAreaNode(areaNode);
        if (callback) {
            callback(null, areaNode);
        }
    });
}

//加载区域
function loadAreaNode(adcode, callback) {
    districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
            if (callback) {
                callback(error);
            }
            console.error(error);
            return;
        }
        renderAreaPanel(areaNode);
        if (callback) {
            callback(null, areaNode);
        }
    });
}

$('#area-tree').on('mouseenter mouseleave', 'h2[data-adcode]', function(e) {
    if (e.type === 'mouseleave') {
        districtExplorer.setHoverFeature(null);
        return;
    }
    var adcode = $(this).attr('data-adcode');
    districtExplorer.setHoverFeature(currentAreaNode.getSubFeatureByAdcode(adcode));
});


$('#area-tree').on('click', 'h2', function() {
    var adcode = $(this).attr('data-adcode');
    switch2AreaNode(adcode);
});

$('#area-tree').on('click', '.showHideBtn', function() {
    var $li = $(this).closest('li');
    $li.toggleClass('hide-sub');
    if (!$li.hasClass('hide-sub')) {
        //子节点列表被展开
        var $subList = $li.children('ul.sublist');
        //尚未加载
        if (!$subList.attr('data-loaded')) {
            $subList.attr('data-loaded', 'loading');
            $li.addClass('loading');
            //加载
            loadAreaNode($li.children('h2').attr('data-adcode'), function() {
                $li.removeClass('loading');
            });
        }
    }
});

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,343 @@
@font-face {
    font-family: DINCond-Bold;
  src: url('../fonts/DINCond-Bold.otf');
}


.i-nav3.on{
  background-image: url(../group/img/c-btn3.png);
}
.c-main{
  position: relative;
  height: 910px;
}
.c-left{
  position: absolute;
  top: 10px;
  left: 0;
  padding-left: 20px;
  transition: .4s;
}
.c-left.hidden{
  transform: translateX(-518px);
}
.c-right.hidden{
  transform: translateX(380px);
}
.hidden .o-btn{
  transition: .4s;
  opacity: 1;
  visibility: visible;
}
.c-left .inner{
  padding: 90px 20px 20px;
  width: 518px;
  height: 910px;
  background: url(../group/img/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 .inner{
  padding-top: 80px;
  width: 399px;
  height: 910px;
  background: url(../group/img/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-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 img{
  display: block;
  width: 100%;
}
.c-left .o-btn{
  left: 100%;
  margin-left: -4px;
}
.c-right .o-btn{
  right: 100%;
  margin-right: -18px;
}
.m-box1{
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin-bottom: 30px;
}
.m-box1 .l{
  width: 212px;
  margin-right: 24px;
}
.m-box1 .r{
  flex:1;
}
.m-box1 .chartbox{
  position: relative;
  width: 212px;
  height: 212px;
}
.m-box1 .chartbox::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url(../group/img/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(../group/img/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;
  width:  135px;
  height: 135px;
  border-radius: 50%;
  background-color: #000;
  opacity: .3;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  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::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 6px;
  background: #00ccff;
}

.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(../group/img/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;
}

.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(../group/img/c-i3.png) no-repeat center;
  background-size: contain;
}
.m-nav .icon{
  width: 50px;
  height: 50px;
  background: url(../group/img/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(../group/img/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/img/banner.png

 fzzy-igdss-web/src/main/resources/static/group/img/bf_sd.png

 fzzy-igdss-web/src/main/resources/static/group/img/bf_sd_active.png

 fzzy-igdss-web/src/main/resources/static/group/img/bf_zd.png

 fzzy-igdss-web/src/main/resources/static/group/img/bf_zd_active.png

 fzzy-igdss-web/src/main/resources/static/group/img/bg-jiankong-tit.png

 fzzy-igdss-web/src/main/resources/static/group/img/bg-line.png

 fzzy-igdss-web/src/main/resources/static/group/img/bg_panel_1_item.png

 fzzy-igdss-web/src/main/resources/static/group/img/bk1.png

 fzzy-igdss-web/src/main/resources/static/group/img/bk2.png

 fzzy-igdss-web/src/main/resources/static/group/img/bk3.png

 fzzy-igdss-web/src/main/resources/static/group/img/bk4.png

 fzzy-igdss-web/src/main/resources/static/group/img/bk5.png

 fzzy-igdss-web/src/main/resources/static/group/img/bottom-box-monitor.png

 fzzy-igdss-web/src/main/resources/static/group/img/bottom-box.png

 fzzy-igdss-web/src/main/resources/static/group/img/bottom-titbg.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-bg1.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-bg2.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-btn1.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-btn2.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-btn3.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-i1.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-i2.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-i3.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-i4.png

 fzzy-igdss-web/src/main/resources/static/group/img/c-map.png

 fzzy-igdss-web/src/main/resources/static/group/img/cd-bg1.png

 fzzy-igdss-web/src/main/resources/static/group/img/cd-bg2.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-bottom-box.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-btn-h_03.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-btn-h_04.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-left-box.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-left-boxBg.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-right-box.png

 fzzy-igdss-web/src/main/resources/static/group/img/data-top-btn_03.png

 fzzy-igdss-web/src/main/resources/static/group/img/dbx1.png

 fzzy-igdss-web/src/main/resources/static/group/img/dw.png

 fzzy-igdss-web/src/main/resources/static/group/img/fenping_4.png

 fzzy-igdss-web/src/main/resources/static/group/img/fenping_4_active.png

 fzzy-igdss-web/src/main/resources/static/group/img/fenping_9.png

 fzzy-igdss-web/src/main/resources/static/group/img/fenping_9_active.png

 fzzy-igdss-web/src/main/resources/static/group/img/i-body.png

 fzzy-igdss-web/src/main/resources/static/group/img/i-navBg-l.png

 fzzy-igdss-web/src/main/resources/static/group/img/i-navBg-l_on.png

 fzzy-igdss-web/src/main/resources/static/group/img/i-navBg-r.png

 fzzy-igdss-web/src/main/resources/static/group/img/i-navBg-r_on.png

 fzzy-igdss-web/src/main/resources/static/group/img/i-top-bg.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-address.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-af.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-cf.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-dian-h.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-dian.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-duihao.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-gongsi-h.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-gongsi.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-gongsi1-h.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-gongsi1.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-kuqu-h.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-kuqu.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-phone.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-radio_03.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-shu.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-sj.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-time.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-user.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-yw.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon-zhi.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon2.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon_close.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon_dot-2.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon_dot.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon_dot2.png

 fzzy-igdss-web/src/main/resources/static/group/img/icon_qh.png

 fzzy-igdss-web/src/main/resources/static/group/img/img-map-xa.png

 fzzy-igdss-web/src/main/resources/static/group/img/img-map.png

 fzzy-igdss-web/src/main/resources/static/group/img/img-map2.png

 fzzy-igdss-web/src/main/resources/static/group/img/l1.png

 fzzy-igdss-web/src/main/resources/static/group/img/l2.png

 fzzy-igdss-web/src/main/resources/static/group/img/l3.png

 fzzy-igdss-web/src/main/resources/static/group/img/l4.png

 fzzy-igdss-web/src/main/resources/static/group/img/lb-tab-on.png

 fzzy-igdss-web/src/main/resources/static/group/img/lb-tab.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-box1-monitor.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-box1.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-box2-monitor.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-box2.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-box3.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-m1-bg.png

 fzzy-igdss-web/src/main/resources/static/group/img/left-m2-bg.png

 fzzy-igdss-web/src/main/resources/static/group/img/plan-center-boxBg.png

 fzzy-igdss-web/src/main/resources/static/group/img/plan-center-top.png

 fzzy-igdss-web/src/main/resources/static/group/img/plan-left-boxBg.png

 fzzy-igdss-web/src/main/resources/static/group/img/plan-right-box.png

 fzzy-igdss-web/src/main/resources/static/group/img/right-m2-bg.png

 fzzy-igdss-web/src/main/resources/static/group/img/select-bg-lang.png

 fzzy-igdss-web/src/main/resources/static/group/img/select-bg.png

 fzzy-igdss-web/src/main/resources/static/group/img/spu-detail-btn.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-body.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-popBg.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-popBg1.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-popBg2.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-popBg3.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-right-btn-on.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-right-btn.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-right.png

 fzzy-igdss-web/src/main/resources/static/group/img/sup-right2.png

 fzzy-igdss-web/src/main/resources/static/group/img/time.png

 fzzy-igdss-web/src/main/resources/static/group/img/video-pic_03.png

 fzzy-igdss-web/src/main/resources/static/group/img/yj1.png

 fzzy-igdss-web/src/main/resources/static/group/img/yj2.png

 fzzy-igdss-web/src/main/resources/static/group/img/yj3.png

 fzzy-igdss-web/src/main/resources/static/group/img/yj4.png

 fzzy-igdss-web/src/main/resources/static/group/img/zy1.png

 fzzy-igdss-web/src/main/resources/static/group/img/zy2.png

 fzzy-igdss-web/src/main/resources/static/group/img/zy3.png

 fzzy-igdss-web/src/main/resources/static/group/img/zy4.png

 fzzy-igdss-web/src/main/resources/static/group/img/zy5.png

 fzzy-igdss-web/src/main/resources/static/group/img/zy6.png

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2064 @@
/**
 * åˆå§‹åŒ–地图
 */

/* global BMapGL */
/* global darkStyle */

function initMap(options) {
    options = Object.assign({
        tilt: 60,
        heading: 0
    }, options);
    var map = new BMapGL.Map('map_container', {
        restrictCenter: false,
        style: {styleJson: options.style || darkStyle }
    });
    map.enableKeyboard();
    map.enableScrollWheelZoom();
    map.enableInertialDragging();
    map.enableContinuousZoom();

    map.setDisplayOptions(options.displayOptions || {
            indoor: false,
            poi: true,
            skyColors: options.skyColors || [
                'rgba(5, 5, 30, 0.01)',
                'rgba(5, 5, 30, 1.0)'
            ]
        });
    if (options.center && options.zoom) {
        let center = options.center;
        if (center instanceof Array) {
            center = new BMapGL.Point(options.center[0], options.center[1])
        }
        map.centerAndZoom(center, options.zoom);
    }

    map.setTilt(options.tilt);
    map.setHeading(options.heading);
    return map;
}

var snowStyle = [{
    featureType: 'background',
    elementType: 'geometry',
    stylers: {
        color: '#fefefeff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: {
        color: '#f0f1f7ff'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#e8eaf5ff'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#e8eaf5ff'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#e8eaf5ff'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#80868dff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'districtlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#7d82b0ff'
    }
}, {
    featureType: 'districtlabel',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#80868dff'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'manmade',
    elementType: 'geometry',
    stylers: {
        color: '#eef1fbff'
    }
}, {
    featureType: 'water',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'water',
    elementType: 'geometry',
    stylers: {
        // "color": "#a7c9ffff"
        color: '#a7c9ffff'
    }
}, {
    featureType: 'green',
    elementType: 'geometry',
    stylers: {
        color: '#eef1fbff',
        visibility: 'off'
    }
}, {
    featureType: 'subway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#7d82b0ff'
    }
}, {
    featureType: 'town',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'village',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
        weight: 3
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#e8eaf5ff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
        color: '#e8eaf5ff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}];

var darkStyle = [{
    featureType: 'background',
    elementType: 'geometry',
    stylers: {
        color: '#070c17ff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: {
        color: '#151e25ff'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#27303bff'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#27303bff'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#27303bff'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#80868dff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'districtlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#71767aff'
    }
}, {
    featureType: 'districtlabel',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#80868dff'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'manmade',
    elementType: 'geometry',
    stylers: {
        color: '#070c17ff'
    }
}, {
    featureType: 'water',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'water',
    elementType: 'geometry',
    stylers: {
        color: '#141d27ff'
    }
}, {
    featureType: 'green',
    elementType: 'geometry',
    stylers: {
        color: '#122228ff',
        visibility: 'off'
    }
}, {
    featureType: 'subway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#5f6468ff'
    }
}, {
    featureType: 'town',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'village',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
        weight: 3
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#27303bff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
        color: '#27303bff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff00'
    }
}];

var purpleStyle = [{
    featureType: 'water',
    elementType: 'all',
    stylers: {
        color: '#021019ff'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#000000ff'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#147a92ff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
        color: '#000000ff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#0b3d51ff'
    }
}, {
    featureType: 'local',
    elementType: 'geometry',
    stylers: {
        color: '#000000ff'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#000000ff'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#08304bff'
    }
}, {
    featureType: 'subway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'all',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#857f7fff'
    }
}, {
    featureType: 'all',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#000000ff'
    }
}, {
    featureType: 'green',
    elementType: 'geometry',
    stylers: {
        color: '#062032ff'
    }
}, {
    featureType: 'manmade',
    elementType: 'geometry',
    stylers: {
        color: '#022338ff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'all',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'all',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'water',
    elementType: 'all',
    stylers: {
        visibility: 'on',
        color: '#505565ff'
    }
}, {
    featureType: 'green',
    elementType: 'all',
    stylers: {
        color: '#353b4dff'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: {
        visibility: 'on',
        color: '#2a2e3bff'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#4b5163ff'
    }
}, {
    featureType: 'administrative',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#8e99bdff'
    }
}, {
    featureType: 'administrative',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#2f3547ff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#727c9aff'
    }
}, {
    featureType: 'road',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#293045ff'
    }
}, {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#777e93ff'
    }
}, {
    featureType: 'town',
    elementType: 'all',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'subway',
    elementType: 'labels.text.fill',
    stylers: {
        visibility: 'off',
        color: '#787f95ff'
    }
}, {
    featureType: 'subway',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#40475eff'
    }
}, {
    featureType: 'building',
    elementType: 'geometry.fill',
    stylers: {
        color: '#485161ff'
    }
}, {
    featureType: 'manmade',
    elementType: 'geometry.fill',
    stylers: {
        color: '#374053ff'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#8792adff'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#292f48ff'
    }
}, {
    featureType: 'scenicspotslabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'scenicspotslabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'village',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'town',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'land',
    elementType: 'geometry',
    stylers: {
        color: '#40495aff',
        visibility: 'on'
    }
}];

var whiteStyle = [{
    featureType: 'water',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        color: '#ccd6d7ff'
    }
}, {
    featureType: 'green',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        color: '#dee5e5ff'
    }
}, {
    featureType: 'building',
    elementType: 'geometry',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'building',
    elementType: 'geometry.fill',
    stylers: {
        color: '#d1dbdbff'
    }
}, {
    featureType: 'building',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#aab6b6ff'
    }
}, {
    featureType: 'subwaystation',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        color: '#888fa0ff'
    }
}, {
    featureType: 'education',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        color: '#e1e7e7ff'
    }
}, {
    featureType: 'medical',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        color: '#d1dbdbff'
    }
}, {
    featureType: 'scenicspots',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        color: '#d1dbdbff'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        weight: '4'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'highway',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        weight: '2'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'arterial',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'arterial',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'arterial',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'arterial',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'local',
    elementType: 'geometry',
    stylers: {
        visibility: 'on',
        weight: '1'
    }
}, {
    featureType: 'local',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'local',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'local',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'local',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'local',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        weight: '1'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#9494941a'
    }
}, {
    featureType: 'railway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff1a'
    }
}, {
    featureType: 'subway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        weight: '1'
    }
}, {
    featureType: 'subway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#c3bed433'
    }
}, {
    featureType: 'subway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#ffffff33'
    }
}, {
    featureType: 'subway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#979c9aff'
    }
}, {
    featureType: 'subway',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'continent',
    elementType: 'labels',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'continent',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'continent',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#333333ff'
    }
}, {
    featureType: 'continent',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'city',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'city',
    elementType: 'labels',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'city',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#454d50ff'
    }
}, {
    featureType: 'city',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'town',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'town',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'town',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#454d50ff'
    }
}, {
    featureType: 'town',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'districtlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'districtlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#888fa0ff'
    }
}, {
    featureType: 'transportation',
    elementType: 'geometry',
    stylers: {
        color: '#d1dbdbff'
    }
}, {
    featureType: 'companylabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'restaurantlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'lifeservicelabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'carservicelabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'financelabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'otherlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'village',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'district',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'land',
    elementType: 'geometry',
    stylers: {
        color: '#edf3f3ff'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: {
        color: '#cacfcfff'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'subwaylabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiarywaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'highwaysign',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'nationalway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'provincialway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'labels.text.stroke',

    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'highway',
    stylers: {
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    stylers: {
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    stylers: {
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    stylers: {
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    stylers: {
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    stylers: {
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'provincialway',
    stylers: {
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '8-8'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '8-8'
    }
}, {
    featureType: 'provincialway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '8-8'
    }
}, {
    featureType: 'cityhighway',
    stylers: {
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    stylers: {
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    stylers: {
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '6',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '7',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
        visibility: 'off',
        level: '8',
        curZoomRegionId: '0',
        curZoomRegion: '6-8'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#8f5a33ff'
    }
}, {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'country',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#8f5a33ff'
    }
}, {
    featureType: 'country',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'country',
    elementType: 'labels.text',
    stylers: {
        fontsize: '28'
    }
}, {
    featureType: 'manmade',
    elementType: 'geometry',
    stylers: {
        color: '#dfe7e7ff'
    }
}, {
    featureType: 'provincialway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'tertiaryway',
    elementType: 'geometry.fill',
    stylers: {
        color: '#fbfffeff'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'scenicspots',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'scenicspots',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'scenicspotslabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'scenicspotslabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'educationlabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'educationlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'medicallabel',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'medicallabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'companylabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'restaurantlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'hotellabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'hotellabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'shoppinglabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'shoppinglabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'lifeservicelabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'carservicelabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'transportationlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'transportationlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'financelabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'entertainment',
    elementType: 'geometry',
    stylers: {
        color: '#d1dbdbff'
    }
}, {
    featureType: 'estate',
    elementType: 'geometry',
    stylers: {
        color: '#d1dbdbff'
    }
}, {
    featureType: 'shopping',
    elementType: 'geometry',
    stylers: {
        color: '#d1dbdbff'
    }
}, {
    featureType: 'education',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'education',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'medical',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'medical',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'transportation',
    elementType: 'labels.text.fill',
    stylers: {
        color: '#999999ff'
    }
}, {
    featureType: 'transportation',
    elementType: 'labels.text.stroke',
    stylers: {
        color: '#ffffffff'
    }
}, {
    featureType: 'road',
    elementType: 'geometry',
    stylers: {
        visibility: 'on'
    }
}, {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'provincialway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'tertiaryway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'fourlevelway',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'water',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'manmade',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'education',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'medical',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'scenicspots',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'transportation',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'entertainmentlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'estatelabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'businesstowerlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'governmentlabel',
    elementType: 'labels.icon',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'governmentlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'businesstowerlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'estatelabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'entertainmentlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'medicallabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'educationlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'scenicspotslabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'airportlabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}, {
    featureType: 'poilabel',
    elementType: 'labels',
    stylers: {
        visibility: 'off'
    }
}];

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1611 @@
@charset "utf-8";

/*-----------------
  Author:xxxx
  update:2022
 -------------------*/

@font-face {
    font-family: DINCond-Bold;
    src: url('../fonts/DINCond-Bold.otf');
}
/*common*/

.i-icon {
    width: 24px;
    height: 24px;
}

.i-icon32 {
    width: 32px;
    height: 32px;
}

.i-icon,
.i-icon32 {
    display: inline-block;
    position: relative;
}


.i-icon img,
.i-icon32 img {
    /*width: 100%;*/
    height: 100%;
    vertical-align: top;
}




/*index*/

.container {
    overflow: hidden;
    height: 1080px;
    width: 1920px;
    position: relative;
    background: url(../group/img/i-body.png) center top no-repeat;
    background-size: 100% 100%;
    padding-right: 0;
    padding-left: 0;
}


.i-top {
    height: 140px;
    width: 100%;
    background: url(../group/img/i-top-bg.png) center top no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.i-top-tit {
    height: 70px;
    text-align: center;
    color: #fff;
    font-size: 36px;
    line-height: 70px;
    font-weight: bold;
}


.i-top-p {
    color: #fff;
    font-size: 26px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    margin-top: 5px;
    line-height: 60px;
}

.i-navBar {
    position: absolute;
    height: 34px;
    left: 0;
    right: 0;
    top: 33px;
    padding: 0 35px;
}


.i-navBar a {
    display: block;
    width: 164px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
}

.i-nav1,
.i-nav2,
.i-nav3,
.i-nav4 {
    background: url(../group/img/i-navBg-l.png) no-repeat;
    left: 50%;
}

.i-nav5,
.i-nav6,
.i-nav7 {
    background: url(../group/img/i-navBg-r.png) no-repeat;
    right: 50%;
}

.i-nav1.active,
.i-nav2.active,
.i-nav3.active,
.i-nav4.active,.i-nav1:hover,
.i-nav2:hover,
.i-nav3:hover,
.i-nav4:hover{
    background: url(../group/img/i-navBg-l_on.png) no-repeat;
    left: 50%;
}
.i-nav5.active,
.i-nav6.active,
.i-nav7.active,
.i-nav5:hover,
.i-nav6:hover,
.i-nav7:hover{
    background: url(../group/img/i-navBg-r_on.png) no-repeat;
    right: 50%;
}

.i-nav4 {
    margin-left: -432px;
}

.i-nav3 {
    margin-left: -586px;
}

.i-nav2 {
    margin-left: -740px;
}

.i-nav1 {
    margin-left: -894px;
}

.i-nav5 {
    margin-right: -432px;
}

.i-nav6 {
    margin-right: -586px;
}

.i-nav7 {
    margin-right: -740px;
}


.date-time-module {
    position: absolute;
    top: 15px;
    width: 180px;
    text-align: center;
    right: 30px;
    color: #ffffff;
    line-height: 3vw;
}

.i-top-date {
    width: 100%;
    line-height: 30px;
    font-size: 20px;
}

.i-top-date span {
    display: inline-block;
}


.date-time-module #navBarTime {
    font-size: 30px;
    line-height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    display: block;

}



.i-main {
    padding: 10px 30px 0 30px;
    /* width: 1860px; */
}


.left-container {
    width: 529px;
    height: 100%;
    float: left;
}

.left-m1 {
    position: relative;
    width: 100%;
    height: 185px;
    background: url("../group/img/left-box1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 18px;
    padding: 36px 20px 8px 20px;
    box-sizing: border-box;
}

.panel-title {
    position: absolute;
    left: 20px;
    top: 0px;
    display: inline-block;
    width: 170px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #ffffff;
    box-sizing: border-box;

    background-size: 100% 100%;
}

.panel-title  .dot {
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align:middle;
    margin:-2px 0 0 5px;
    background: url("../group/img/icon_dot.png") no-repeat;
    -webkit-animation: title 2.5s ease-in-out infinite;
    animation: title 2.5s ease-in-out infinite;
}

.panel-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.left-m1 .panel-content>div {
    display: inline-block;
    vertical-align: top;
}


.left-m1-ul {
    height: 90px;
    width: 481px;
    overflow: hidden;
    background: url(../group/img/left-m1-bg.png) no-repeat;
    margin-top: 35px;
}

.left-m1-ul li {
    float: left;
    width: 25%;
    height: 90px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 17px;
    color: #fff;
    overflow: hidden;
}

.left-m1-ul li h3 {
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
}

.left-m1-ul li p {
    font-weight: bold;
    font-size: 46px;
    line-height: 60px;
    font-family: DINCond-Bold;
}

.left-m1-ul li:first-child p {
    color: #2fc7ff;
}

.left-m1-ul li:nth-child(2) p {
    color: #f37b3d;
}

.left-m1-ul li:nth-child(3) p {
    color: #bc2032;
}

.left-m1-ul li:last-child p {
    color: #36b994;
}




.left-m2 {
    background: url("../group/img/left-box2.png") no-repeat;
    width: 100%;
    height: 362px;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 56px 20px 20px 20px;
    position: relative;
}


.left-m2 .panel-content .panel-content-head {
    width: 100%;
    height: 31px;
    line-height: 31px;
    background: url("../group/img/left-m2-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    font-size: 14px;
    color: #91ceff;
    box-sizing: border-box;
}

.left-m2 .head-item,
.left-m2 .body-item {
    text-align: center;
}

.left-m2 .panel-content .panel-content-head .head-item {
    flex: 1;
}

.left-m2 .panel-content .panel-content-body {
    width: 100%;
    height: calc(100% - 2vw);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}

.left-m2 .panel-content .panel-content-body::-webkit-scrollbar {
    width: 6px;
    background-color: rgba(51, 238, 255, 0.2);
}

.left-m2 .panel-content .panel-content-body::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3);
    background-color: rgba(2, 158, 249, 0.5);
    border-radius: 3px;
}

.left-m2 .panel-content .panel-content-body .panel-content-body-tr {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    margin-top: 6px;
}

.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
    flex: 1;
    font-size: 14px;
    color: #ffffff;
}



.left-m3 {
    position: relative;
    width: 100%;
    height: 328px;
    background: url("../group/img/left-box3.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1vw;
}

.left-m3 .panel-content {
    padding: 3.5vw 2vw 1.5vw 1vw;
    position: relative;
}

.chart-box1 {
    width: 100%;
    height: 100%;
}

.details-unit {
    font-size: 16px;
    color: #ffffff;
    position: absolute;
    top: 36px;
    right: 40px;
    z-index: 3;
    line-height: 34px;
}

.right-container {
    float: right;
    height: 100%;
    width: 1320px;
}

.right-top {
    margin-bottom: 18px;
    width: 100%;
    overflow: hidden;
    height: 565px;
}

.right-map {
    position: relative;
    width: 750px;
    height: 565px;
    text-align: center;
    box-sizing: border-box;
    padding: 12px 25px 3px 25px;
    float: left;
}

.right-map>img {
    width: 700px;
    height: 540px;
}

.right-map-item {
    position: absolute;
    text-align: center;
    z-index: 3;
}

.right-map-item p {
    line-height: 20px;
    color: #fff;
    font-size: 16px;
}

.right-map-item1 {
    left: 420px;
    top: 55px;
}

.right-map-item2 {
    left: 505px;
    top: 95px;
}

.right-map-item3 {
    left: 250px;
    top: 180px;
}
.right-map-item04 {
    left: 340px;
    top: 115px;
}

.right-map-item4 {
    left: 388px;
    top: 170px;
}

.right-map-item5 {
    left: 575px;
    top: 200px;
}

.right-map-item6 {
    left: 410px;
    top: 295px;
}

.right-map-item7 {
    left: 130px;
    top: 420px;
}

/* åœ°å›¾å¼¹çª— */
.right-map .map-lay{
    width:280px;
    height:186px;
    background-image:url(../group/img/sup-popBg3.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    position: absolute;
    top:22px;
    left:-250px;
    z-index: 2222;
    padding:15px 18px 18px 18px;
    color:#fff;
    box-sizing: border-box;
    display:none;
}
.right-map .map-lay .close{
    width:10px;
    height:10px;
    background:url(../group/img/icon_close.png) no-repeat;
    background-size:100% 100%;
    float:right;
    margin:-5px 20px 0 0 ;
}
.right-map .map-lay ul{
    margin-top:10px;
}
.right-map .map-lay  li{
    height:29px;
    line-height:26px;
    padding-left:12px;
    font-size:16px;
    text-align:left;
    overflow:hidden;
    text-overflow: ellipsis;
    background:url(../group/img/dbx1.png) no-repeat left bottom;
    background-size:100% 1px;
    white-space:nowrap;
}
.right-map .map-lay  li:last-child{
    background:none;.right-map-item3
}
.right-map-item04 .map-lay{
    top:8px;
    left:-265px;
}

.right-map-item3 .map-lay,.right-map-item5 .map-lay,.right-map-item6 .map-lay{
    background-image:url(../group/img/sup-popBg1.png);
    top:-138px;
    left:-250px;
}
.right-map-item3 .map-lay .close,.right-map-item5 .map-lay .close,.right-map-item6 .map-lay .close,.right-map-item7 .map-lay .close{
    margin:0;
}
.right-map-item7 .map-lay{
    background-image:url(../group/img/sup-popBg2.png);
    top:-148px;
    left:-115px;
}

.right-map .map-lay  li a{
    color:#fff
}
.right-map .map-lay  li:hover a{
    color:rgba(255,255,255,.8)
}

.map-round {
    display: inline-block;
    height: 50px;
    width: 50px;
    background: url("../group/img/icon-dian.png") no-repeat;
    -webkit-animation: title 2.5s ease-in-out infinite;
    animation: title 2.5s ease-in-out infinite;
}

.xianqu {
    background: url("../group/img/icon-dian.png") no-repeat;
}

.right-map-item:hover .xianqu{
    background: url("../group/img/icon-dian-h.png") no-repeat;
}

.gongsi{
    background: url("../group/img/icon-gongsi.png") no-repeat;
}

.right-map-item:hover .gongsi{
    background: url("../group/img/icon-gongsi-h.png") no-repeat;
}

.gongsi1{
    background: url("../group/img/icon-gongsi1.png") no-repeat;
}

.right-map-item:hover .gongsi1{
    background: url("../group/img/icon-gongsi1-h.png") no-repeat;
}

.kuqu{
    background: url("../group/img/icon-kuqu.png") no-repeat;
}

.kuqu-h{
    background: url("../group/img/icon-kuqu-h.png") no-repeat;
}

.right-map-item:hover .kuqu{
    background: url("../group/img/icon-kuqu-h.png") no-repeat;
}

@keyframes title {
    from {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

@-webkit-keyframes title {
    from {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}


.right-topInfo {
    float: right;
    width: 529px;
}

.right-topInfo-box1 {
    position: relative;
    width: 100%;
    height: 185px;
    background: url("../group/img/left-box1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 18px;
    padding: 36px 20px 8px 20px;
    box-sizing: border-box;
}

.right-topInfo-jg {
    height: 100px;
    margin-top: 20px;
    overflow: hidden;
}

.right-topInfo-jg li {
    width: 50%;
    text-align: center;
    float: left;
    height: 100px;
    overflow: hidden;
}

.right-topInfo-jg li p,
.right-topInfo-kd-item p {
    font-weight: bold;
    line-height: 60px;
    font-size: 46px;
    /* font-family: DINCond-Bold; */
}

.right-topInfo-jg li:first-child p,
.right-topInfo-kd-item:first-child p {
    color: #2fc7ff;
}

.right-topInfo-jg li:last-child p,
.right-topInfo-kd-item:last-child p {
    color: #36b994;
}

.right-topInfo-jg li h3 {
    line-height: 40px;
    color: #fff;
    font-size: 18px;
}

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

.right-topInfo-kd-h {
    line-height: 40px;
    font-size: 26px;
    height: 40px;
    overflow: hidden;
    color: #fff;
    padding: 0 15px;
}

.right-topInfo-kd {
    width: 287px;
    height: 90px;
    margin: 20px auto;
    overflow: hidden;
    background: url("../group/img/right-m2-bg.png") no-repeat;
    background-size: 100% 100%;
}

.right-topInfo-kd-item {
    float: left;
    width: 50%;
    height: 90px;
    text-align: center;
}

.right-topInfo-kd-item h3 {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}


.right-topInfo-address {
    line-height: 32px;
    color: #fff;
    font-size: 18px;
    position: absolute;
    right: 40px;
    top: 5px;
    z-index: 3;
}

.right-topInfo-address i {
    float: left;
    margin-right: 5px;
}

.right-topInfo-kd-list li {
    width: 33.333333%;
}

.right-topInfo-kd-list li:nth-child(2) p {
    color: #f37b3d;
}


.right-bottom {
    background: url("../group/img/bottom-box.png") no-repeat;
    width: 1320px;
    height: 328px;
    box-sizing: border-box;
    padding: 36px 20px 20px 20px;
    position: relative;
}

.bottom-container .panel-content .stats-chart-box {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.chart-item-title {
    display: inline-block;
    width: 158px;
    height: 36px;
    line-height: 36px;
    background: url("../group/img/bottom-titbg.png") no-repeat;
    background-size: 100% 100%;
    font-size: 18px;
    color: #ffffff;
    margin-top: 10px;
}


.bottom-container .panel-content .stats-chart-box .chart-item {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: calc(100% / 5);
    background: url("../group/img/bg-line.png") right bottom no-repeat;
    box-sizing: border-box;
    text-align: center;
    float: left;
}

.bottom-container .panel-content .stats-chart-box .chart-item:last-child {
    border-right: 0px;
}

.bottom-container .panel-content .stats-chart-box .chart-item .chart-box {
    width: 100%;
    height: calc(100% - 36px);
}



/* data */
.data-top {
    margin-bottom: 45px;
    width: 100%;
    height: 358px;
}

.data-top-left {
    position: relative;
    width: 529px;
    height: 358px;
    background: url("../group/img/data-left-boxBg.png") no-repeat;
    background-size: 100% 100%;
    padding: 36px 20px 8px 20px;
    box-sizing: border-box;
    float: left;
}


.data-top-left .right-topInfo-jg{
    margin-top: 30px;
}


.data-area{
    margin-top: 20px;
    padding: 0 5px;
}


.data-area-dl {
    height: 30px;
}

.data-area-dl dt,
.data-area-dl dd {
    float: left;
}

.data-area-dl dt{
    line-height: 28px;
    font-size: 18px;
    color: #fff;
    /* margin-right: 10px; */
}

.data-area-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    -khtml-appearance: none;
}

.data-area-select::-ms-expand {
    display: none;
}


.data-area-select {
    width: 135px;
    height: 30px;
    line-height: 30px;
    background: url("../group/img/select-bg.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    padding-right: 30px;
    font-size: 16px;
    box-sizing: border-box;
    border: 0;
}

.data-area-select option{
    color: #000;
    line-height: 28px;
}

.data-checkBox{
    margin-top: 20px;
    padding: 0 0 0 5px;
}

.data-area-check-dd>span{
    color: #fff;
    display: inline-block;
    height: 20px;
    margin-left: 2px;
    font-size: 18px;
    line-height: 20px;
    margin-top: 5px;
}
.data-area-check-dd>span:first-child{
    margin-left: 0;
}
.regular-checkbox {
    display: none;
}

.regular-checkbox + label {
    border: 1px solid #38cbff;
    padding: 8px;
    display: inline-block;
    position: relative;
    float: left;
    margin-right: 3px;
    margin-top: 2px;
}


.regular-checkbox:checked + label {
    /* color: #99a1a7; */
}

.regular-checkbox:checked + label:after {
    content: '';
    display: block;
    font-size: 14px;
    position: absolute;
    top: -1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background: url(../group/img/icon-duihao.png) no-repeat;
}


.data-top-btnBox{
    width: 100%;
    height: 58px;
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    z-index: 3;
}

.data-top-btn{
    width: 50%;
    height: 57px;
    line-height: 57px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    float: left;
    display: block;
    position: relative;
}
.data-top-btn:last-child{
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px);

}

.data-top-btn:first-child{
    right: -1px;
}

.data-top-btn:first-child:active,
.data-top-btn:first-child:hover{
    background: url("../group/img/data-top-btn_03.png") no-repeat;
    background-size: 100% 100%;
}

.data-top-btn:last-child:active,
.data-top-btn:last-child:hover{
    background: url("../group/img/data-btn-h_04.png") no-repeat;
    background-size: 100% 100%;
}

.data-top-btn:first-child:active,
.data-top-btn:last-child:active{
    font-size: 26px;
}




.data-top-right {
    background: url(".../group/img/data-right-box.png") no-repeat;
    width: 1320px;
    height: 358px;
    box-sizing: border-box;
    padding: 36px 20px 20px 20px;
    position: relative;
    float: right;
}

.data-bottom {
    background: url("../group/img/data-bottom-box.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 486px;
    box-sizing: border-box;
    padding: 36px 15px 20px 10px;
    overflow: hidden;
    position: relative;
}

.data-tableBox{
    min-width: 100%;
    height: 448px;
    overflow: auto;

}

.data-tableBox::-webkit-scrollbar {
    width: 0px;
    background-color: rgba(51, 238, 255, 0.2);
}

.data-tableBox::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3);
    background-color: rgba(2, 158, 249, 0.5);
    border-radius: 3px;
}


.data-table{
    /* overflow: hidden; */
}
.data-table-top{
    height: 36px;
    margin-bottom: 16px;
}

.data-table-hd{
    height: 72px;
    min-width: 100%;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.data-table-bd{
    height: 340px;
    /* overflow-x: hidden; */
    min-width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    /* padding-top: 15px; */
}

.data-table-hd-group{
    position: relative;
    line-height: 36px;
    display: inline-block;
    font-size: 15px;
    text-align: left;
    width: 80px;
    box-sizing: border-box;
    margin: 0 10px;
    vertical-align: middle;
}


.data-table-hd .data-table-hd-group{
    color: #91ceff;
}

.data-table-bd .data-table-hd-group{
    color: #fff;
    overflow: hidden;
}

.data-table-hd-group span{
    padding: 0 5px;
    display: inline-block;
    height: 36px;
    width: 80px;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
}


.data-table-h{
    min-width: 158px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #fff;
    position: absolute;
    top: -53px;
    left: 50%;
    /* margin-left: -79px; */
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 3;
    text-align: center;
    background: url(../group/img/bottom-titbg.png) no-repeat;
    background-size: 100% 100%;
    padding: 0 30px;
    box-sizing: border-box;
}


.data-table-list{
    margin-top: 15px;
}

.data-table-list li{
    white-space: nowrap;
    /* margin-top: 10px; */
    line-height: 36px;
}



/* supervise */

.sup-body{
    background: url("../group/img/sup-body.png") no-repeat;
    width: 1869px;
    height: 853px;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 36px 20px 20px 20px;
    position: relative;
    margin-top: 25px;
    overflow: hidden;
}


#map_container {
    width: 100%;
    height: 100%;
    margin: 0;
}


.sup-topInfo-list li p{
    font-size: 32px;
    line-height: 40px;
    height: 40px;
    font-weight: normal;
}
.sup-topInfo-list li h3{
    font-size: 12px;
}

.sup-topInfo-kd{
    height: 80px;
    width: 270px;
    margin: 20px auto 10px auto;
}

.sup-topInfo-kd .right-topInfo-kd-item {
    float: left;
    width: 50%;
    height: 80px;
    text-align: center;
}

.sup-topInfo-kd .right-topInfo-kd-item h3 {
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    margin-top: 5px;
}

.sup-topInfo-kd .right-topInfo-kd-item p {

    font-size: 40px;
    line-height: 55px;
    font-weight: normal;
}

.sup-deatil-link{
    width: 186px;
    height: 29px;
    margin: 0 auto;
    display: block;
}

.sup-rightWrap{
    position: absolute;
    right: 1px;
    top: 0px;
    z-index: 9999;
    bottom: 0;
    width: 381px;
    height: 100%;
    transition: 0.2s all;
}




.sup-right{
    width: 381px;
    height: 853px;
    background: url("../group/img/sup-right2.png") no-repeat;
    background-size: 100% 100%;
}


.sup-right-btn{
    position: absolute;
    left: -48px;
    z-index: 3;
    top: 45%;
    width: 52px;
    height: 277px;
    margin-top: -138px;
    cursor: pointer;
    background: url("../group/img/sup-right-btn.png") no-repeat;
    background-size: 100% 100%;
}

.sup-rightWrap.showOn .sup-right-btn{
    background: url("../group/img/sup-right-btn-on.png") no-repeat;
    background-size: 100% 100%;
}


.sup-rightWrap.showOn{
    right: -376px;
}


.sup-rightWrap.showOn .sup-right{
    opacity: 0;
}

.sup-menu-wrap{
    padding: 30px;
    overflow: hidden;
}


.sup-menu-group,
.sup-menu-title,
.sup-menu-box p{
    min-height: 32px;
    overflow: hidden;
    line-height: 32px;
    color: #fff;
    font-size: 18px;
    position: relative;
}

.sup-menu-group,
.sup-menu-ul li,
.sup-menu-box p,
.sup-menu-title,
.sup-menu-h{
    margin-bottom: 15px;
}



.sup-menu-group a{
    color: #fff;
    font-size: 18px;
}
.sup-menu-group i.i-icon{
    margin: 4px 5px 0 0;
}


.sup-menu-group span.i-icon32{
    margin: 0 8px 0 0;
}

.sup-menu-ul,
.sup-menu-box{
    padding-left: 30px;
}


.sup-menu-box p{
    display: -webkit-flex;
    display: flex;
    padding-left: 32px;
}

.sup-menu-group.menu-group .sup-menu-ul,
.sup-menu-ul.menu-h .sup-menu-box{
    display: none;
}


/* plan */
.plan-top-center,
.plan-top-left{
    position: relative;
    width: 450px;
    height: 355px;
    box-sizing: border-box;
    float: left;
}

.plan-top-left{
    background: url(../group/img/plan-left-boxBg.png) no-repeat;
    background-size: 100% 100%;
    padding: 36px 20px 2px 20px;
}

.plan-top-left .right-topInfo-kd-item p{
    font-weight: normal;
}

.plan-top-left .data-area-dl{
    padding-left: 18px;
}

.plan-top-left .data-area-select{
    width: 236px;
    background: url("../group/img/select-bg-lang.png") no-repeat;
    background-size: 100% 100%;
}

.plan-topInfo-kd{
    padding: 10px 0 0 ;
}

.plan-topInfo-kd .right-topInfo-kd{
    margin-bottom: 10px;
}

.plan-top-left .data-top-btnBox{
    bottom: -1px;
}

.plan-top-left .data-top-btn:last-child{
    right: -1px;
}

.plan-top-left .data-top-btn:first-child{
    right: -2px;
}


.plan-top-center{
    margin-left: 25px;
    background: url(../group/img/plan-center-boxBg.png) no-repeat;
    background-size: 100% 100%;
    padding: 36px 30px 9px 30px;
}

.plan-center-top{
    height: 51px;
    line-height: 50px;
    background: url(../group/img/plan-center-top.png) center no-repeat;
    background-size: 100% 100%;
    padding: 0 10px;
    margin-top: 7px;
    border-bottom: 1px solid #21726f;
    position: relative;
    overflow: hidden;
}

.plan-center-top::after{
    width: 8px;
    height: 2px;
    display: block;
    content: '';
    background-color: #36b994;
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 9;
}


.plan-center-topL{
    color: #fff;
    font-size: 18px;
    height: 50px;
    overflow: hidden;
}

.plan-center-topL span{
    color: #36b994;
    font-size: 16px;
    margin-left: 15px;
}

.plan-center-topL span strong{
    font-size: 26px;
    margin-right: 5px;
}

.plan-center-top a{
    float: right;
    color: #36b994;
    font-size: 18px;
}

.plan-center-top a i{
    font-family: "宋体";
    font-weight: bold;
    margin-left: 5px;
}

.plan-progressBox{
    padding: 0 5px;
}

.plan-progress-group{
    overflow: hidden;
    min-height: 30px;
}

.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.mt-20{
    margin-top: 20px;
}

.plan-progress-group dt,
.plan-progress-group dd{
    float: left;
}

.plan-progress-group dt{
    min-height: 48px;
    padding: 0 10px 0 25px;
    width: 80px;
    position: relative;
    display: table;


}
.plan-progress-group dt span{
    line-height: 24px;
    color: #fff;
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.plan-progress-group dt i{
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    z-index: 2;
}


.plan-progress-group dd{
    height: 48px;
    width: 200px;
    overflow: hidden;
    padding-right: 65px;
    position: relative;
}

.plan-progress-bar{
    max-width: 100%;
    height: 14px;
    margin: 17px 0 0;
    position: relative;
    z-index: 1;
    background-image: -webkit-linear-gradient(to right,rgba(44,186,240,0.1) 0%,rgba(44,186,240,0.5) 50%,rgba(44,186,240,1) 100%);
    background-image: linear-gradient(to right,rgba(44,186,240,0.1) 0%,rgba(44,186,240,0.5) 50%,rgba(44,186,240,1) 100%);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


.plan-progress-group dd em{
    position: absolute;
    display: inline-block;
    width: 65px;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    font-size: 26px;
    color: #2fc7ff;
    right: 0;
    text-align: right;
    z-index: 2;
    top: 0;
}

.plan-progress-group dd em i{
    font-size: 16px;
    margin-left: 5px;
}

.plan-top-right{
    width: 922px;
    background-size: 100% 100%;
    height: 355px;
    background: url("../group/img/plan-right-box.png") no-repeat;
}

.plan-top-right .panel-content .stats-chart-box .chart-item{
    width: calc(100% / 4);
}

.plan-top-right .panel-content .stats-chart-box .chart-item:last-child {
    background: none;
}

a.plan-tab-see{
    color: #2fc7ff;
    font-size: 18px;
    display: inline-block;
    border-bottom: 1px solid #2fc7ff;
}

.plan-table .data-table-list li{
    margin-top: 9px;
}

.animate{
    -webkit-animation: animate-positive 2s;
    animation: animate-positive 2s;
}

@-webkit-keyframes animate-positive{
    0%{ width: 0; }
}

@keyframes animate-positive{
    0%{ width: 0; }
}



/* index-xg */

.lb-body{
    overflow: hidden;
    margin-top: 20px;
    position: relative;
    height: 100px;
}
.lb-body .right-topInfo-jg{
    margin-top: 0;
    position: absolute;
    width: 100%;
}

.carousel-tabs,
.lb-tabs{
    height: 6px;
    text-align: center;
    width: 100%;
}

.carousel-tab,
.lb-tab{
    cursor: pointer;
    width: 22px;
    height: 6px;
    margin: 0 3px;
    display: inline-block;
    background: url(../group/img/visual/lb-tab.png)  no-repeat;
}

.carousel-tab.bg,
.lb-tab.bg{
    width: 26px;
    background: url(../group/img/lb-tab-on.png)  no-repeat;
}

.lb-btn{
    width: 24px;
    height: 24px;
    background: rgba(2, 158, 249, 0.5);
    color: #fff;
    position: absolute;
    z-index: 9;
    top: 50%;
    margin-top: -12px;
    font-family: "宋体";
    text-align: center;
    line-height: 24px;
    font-weight: bold;
    cursor: pointer;
}

.carousel-btn1,
.lb-btn1{
    left: 20px;
}

.carousel-btn2,
.lb-btn2{
    right: 20px;
}

.lb-btn:hover{
    background: rgba(2, 158, 249, 1);
}


.tubiao-Carousel{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tubiao-Carousel .stats-chart-box{
    position: absolute;
    width: 100%;
}

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@

@charset "utf-8";
/*-----------------
  reset.css
  Author:xxxx
  update:2022
 -------------------*/



html,body,div,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,blockquote,pre,form,fieldset,table,th,td,span,p,label,input,select,textarea,header,hgroup,main,nav,section,article,aside,footer,
figure,figcaption,menu,button {
    padding: 0;
    margin: 0;
    text-decoration: none;
}

body {
    margin: 0px auto;
    padding: 0px;
    font-family: "微软雅黑", Arial, sans-serif;
    font-size: 14px;
    background-color: #04162d;
	
}

body.nobg {
    background: none;
}

html,
body {
    width: 1920px;
    height: 1080px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

b,
strong {
    font-weight: bold;
}

button {
    -webkit-appearance: none;
    border: 0;
    background: none;
    overflow: visible;
}

button,
select {
    text-transform: none;
}

input {
    border: none;
    font-size: 14px;
}

input,
select,
textarea {
    vertical-align: middle;
    *font-size: 100%;
    outline: none;
    font-family: "微软雅黑";
}

ul,
li {
    list-style: none;
}

img {
    border: none;
    vertical-align: top;
    -ms-interpolation-mode: bicubic;
}

i,
em,
address,
th {
    font-style: normal;
    font-weight: normal;
}

td,
th {
    font-size: 14px;
    color: #666;
}

table {
    border: 0;
    border-collapse: collapse;
}

a {
    text-decoration: none;
}

a:link,
a:visited,
a:hover {
    text-decoration: none;
    outline: 0;
}

a:active,
a:focus {
    outline: none;
    star: expression(this.onFocus=this.blur());
}

p {
    font-size: 14px;
    line-height: 1.5;
}

p.indent {
    text-indent: 2em;
}

q:before,
q:after {
    content: '';
}
	
/* æµ®åŠ¨ */
.fl {
    float: left;
	
}
.fr {
    float: right;
	
}
.fn {
    float: none;
	
}

/*---------------
  æ¸…-除-æµ®-动(clear)
  ----------------*/
.cl:after {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    content: ".";
    visibility: hidden;
}

.cl {
    zoom:1;
}

* html .cl {
    height: 1%;
}


/*------------ input é‡ç½®------------------------------mee----*/

button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
    line-height: normal !important;
    cursor: pointer !important;
}


/* éšè— */

.hide {
    display: none;
}

/* æ˜¾ç¤º */

body .show {
    display: block !important;
}
/*-----------隐藏文字---------------*/

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}





/* å¯¹é½ */

.ac {
    text-align: center;
}

.al {
    text-align: left;
}

.ar {
    text-align: right;
}

.posi-r{
    position: relative;
}
.posi-a{
    position: absolute;
}

/* å¤šè¡Œæ–‡æœ¬å›ºå®šé«˜åº¦çš„垂直居中 */

.v-align {
    display: table;
    /* å­å…ƒç´ åž‚直居中必须 */
}

.v-align .mc {
    display: table-cell;
    /* åž‚直居中必须 */
    vertical-align: middle;
}


/**
 * ç½‘站公用样式
 */


a {
    color: #666;
}

.w100p{
    width: 100%;
    /*min-width: 1200px;*/
}

input::-webkit-input-placeholder,
input::-webkit-input-placeholder{
    color:#fff;
}
input::-moz-placeholder,
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#fff;
}
input:-moz-placeholder,
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#fff;
}
input:-ms-input-placeholder,
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:#fff;
}

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,759 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <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 th:text="${sysName}">智慧粮库管理系统</title>

    <!-- <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=6iuHQC5hj593uHqVgSlDaPPpxBaGhVBk"></script> -->
    <!-- <script src="//mapv.baidu.com/build/mapv.min.js"></script> -->
    <!-- <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.146/dist/mapvgl.min.js"></script> -->
    <!-- <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" /> -->

    <script th:src="@{/group/map.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/group/pc-reset.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/group/master.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/group/newstyle.css}" />

    <style>
        .anchorBL,
        .BMap_cpyCtrl.anchorBL {
            display: none !important;
            ;
        }

        .BMap_bubble_pop {
            background: url(../../group/img/sup-popBg2.png) no-repeat;
            background-size: 100% 100%;
            padding: 20px 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;
            ;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="i-top">
            <h1 class="i-top-tit"><span>攻策性储备粮油监管平台</span></h1>
            <p class="i-top-p" style="color: #f34141;">不忘初心，牢记使命，为中国人民谋幸福，为中华民族谋复兴</p>
            <div class="i-navBar">
                <a href="#" class="i-nav1">首页</a>
                <a href="#" class="i-nav2">数量总览</a>
                <a href="#" class="i-nav3 on">GIS监管</a>
                <a href="#" class="i-nav4">轮换执行</a>
                <a href="#" class="i-nav5">预警分析</a>
                <a href="#" class="i-nav6">后台管理</a>
                <a href="#" 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-left">
                <div class="o-btn">
                    <img src="../../group/img/c-btn1.png" alt="">
                </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">201</div>
                                    <div class="p">其它油</div>
                                </div>
                            </div>
                        </div>
                        <div class="r">
                            <ul class="ul-listb1">
                                <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);">42.2%</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);">12.6%</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);">21.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);">5.8%</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.9%</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);">10.2%</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);">16.2%</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);">42.2%</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);">12.6%</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);">21.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);">5.8%</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.9%</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);">10.2%</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);">16.2%</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-cen">
                <img src="../../group/img/c-map.png" alt="">
            </div>
            <div class="c-right">
                <div class="o-btn">
                    <img src="../../group/img/c-btn2.png" alt="">
                </div>
                <div class="inner">
                    <div class="close"></div>
                    <div class="m-nav">
                        <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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                        </div>
                                        <div class="tit">
                                            <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>
                </div>
            </div>

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

    </div>


    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
    <script th:src="@{/group/newindex.js}"></script>
    <script th:src="@{/group/common.js}"></script>

    var map = new BMapGL.Map('map_container', {
        enableDblclickZoom: false,
        displayOptions: {
            building: false
        }
    });
    // map.centerAndZoom(new BMapGL.Point(103.838383, 30.048353),8);
    map.centerAndZoom(new BMapGL.Point(104, 29.5),9);
	
    map.enableScrollWheelZoom(true);
	
	
	
    var bd = new BMapGL.Boundary();
	
    map.setTilt(0);
    map.setDisplayOptions({
        poiText: false,  // éšè—poi标注
        poiIcon: false,  // éšè—poi图标
        building: false  // éšè—æ¥¼å—
    });
	
    var map = initMap({
	       
            center: [103.8, 29.5],
            zoom: 9,
            style: purpleStyle
     });
	
	

    //掩膜 å›¾éœ€è¦http
    // var wms = new BMapGL.XYZLayer({
    //         useThumbData: true,
    //          tileUrlTemplate: 'https://ows.mundialis.de/services/service?&service=WMS&' +
    //                     'request=GetMap&layers=TOPO-WMS%2COSM-Overlay-WMS&styles=&format=image%2Fjpeg&' +
    //                     'transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=[b]',
    //         // tileUrlTemplate: '../../images/visual/i-body.png',
    // });
    // map.addTileLayer(wms);
	
	
	
    var pStart = new BMapGL.Point(101, 28);
    var pEnd = new BMapGL.Point(106, 31.5);
    var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
    var imgOverlay = new BMapGL.GroundOverlay(bounds, {
        type: 'image',
        url: '../../images/visual/img-map.png',
        opacity: 1
    });
    map.addOverlay(imgOverlay);
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point = new BMapGL.Point(103.7, 30.5);
    var myIcon = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker = new BMapGL.Marker(point, {
         icon: myIcon
    });
    map.addOverlay(marker);
	
	
	
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts1 = {
        position: point, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-25, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label = new BMapGL.Label('东坡区', opts1);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
    map.addOverlay(label);
	
	
	
	
      var content = '<div style="height:100%;box-sizing:border-box;"><h3 style="margin:0 0 10px 0;line-height:24px;font-size:18px;color:#fff;">眉山市国有粮油储备有限公司</h3><p style="line-height:24px;font-size:18px;color:#fff;"><img src="../../images/visual/icon-address.png" alt="" style="float:left;width:24px;height:24px;margin-right:3px;"/>眉山市东坡区XXè·¯20号</P><div class="right-topInfo-kd sup-topInfo-kd"><div class="right-topInfo-kd-item"><h3>粮仓个数(个)</h3><p>20</p></div><div class="right-topInfo-kd-item"><h3>油罐个数(个)</h3><p>10</p></div></div><ul class="right-topInfo-kd-list right-topInfo-jg sup-topInfo-list"><li><p>90000</p><h3>粮食储量(吨)</h3></li><li><p>10000</p><h3>植物油储量(吨)</h3></li><li><p>4500</p><h3>占地面积（㎡）</h3></li></ul><a href="" class="sup-deatil-link"><img src="../../images/visual/spu-detail-btn.png" alt="" style="width:100%;height:100%;"/></a></div>';
	
	
	
	
    // åˆ›å»ºä¿¡æ¯çª—口
    var opts = {
        width: 376,
        height: 324,
        enableAutoPan : true, //自动平移
        message: ""
    };
    var infoWindow = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, point); // å¼€å¯ä¿¡æ¯çª—口
    });

    // varopenInfoWinFun=function(){
    //         marker.openInfoWindow(infoWindow);
    // };
    //     marker.addEventListener("click", openInfoWinFun);
    // return openInfoWinFun
	
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point2 = new BMapGL.Point(102.75,30.3);
    var myIcon2 = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker2 = new BMapGL.Marker(point2, {
         icon: myIcon2
    });
    map.addOverlay(marker2);
	
    var infoWindow2 = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker2.addEventListener('click', function () {
        map.openInfoWindow(infoWindow2, point2); // å¼€å¯ä¿¡æ¯çª—口
    });
	
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts2 = {
        position: point2, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-25, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label2 = new BMapGL.Label('丹棱县', opts2);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label2.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
	
    map.addOverlay(label2);
	
	
	
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point3 = new BMapGL.Point(102.2,29.3);
    var myIcon3 = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker3 = new BMapGL.Marker(point3, {
         icon: myIcon3
    });
    map.addOverlay(marker3);
	
    var infoWindow3 = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker3.addEventListener('click', function () {
        map.openInfoWindow(infoWindow3, point3); // å¼€å¯ä¿¡æ¯çª—口
    });
	
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts3 = {
        position: point3, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-25, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label3 = new BMapGL.Label('丹棱县', opts3);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label3.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
	
    map.addOverlay(label3);
	
	
	
	
	
	
	
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point4 = new BMapGL.Point(103.95,29.6);
    var myIcon4 = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker4 = new BMapGL.Marker(point4, {
         icon: myIcon4
    });
    map.addOverlay(marker4);
	
    var infoWindow4 = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker4.addEventListener('click', function () {
        map.openInfoWindow(infoWindow4, point4); // å¼€å¯ä¿¡æ¯çª—口
    });
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts4 = {
        position: point4, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-25, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label4 = new BMapGL.Label('青神县', opts4);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label4.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
	
    map.addOverlay(label4);
	
	
	
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point5 = new BMapGL.Point(105.1,30.1);
    var myIcon5 = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker5 = new BMapGL.Marker(point5, {
         icon: myIcon5
    });
    map.addOverlay(marker5);
	
    var infoWindow5 = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker5.addEventListener('click', function () {
        map.openInfoWindow(infoWindow5, point5); // å¼€å¯ä¿¡æ¯çª—口
    });
	
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts5 = {
        position: point5, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-25, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label5 = new BMapGL.Label('仁寿县', opts5);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label5.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
	
    map.addOverlay(label5);
	
	
	
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point6 = new BMapGL.Point(104.65,30.85);
    var myIcon6 = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker6 = new BMapGL.Marker(point6, {
         icon: myIcon6
    });
    map.addOverlay(marker6);
	
    var infoWindow6 = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker6.addEventListener('click', function () {
        map.openInfoWindow(infoWindow6, point6); // å¼€å¯ä¿¡æ¯çª—口
    });
	
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts6 = {
        position: point6, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-35, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label6 = new BMapGL.Label('天府新区', opts6);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label6.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
	
    map.addOverlay(label6);
	
	
	
	
	
    // åˆ›å»ºç‚¹æ ‡è®°
    var point7 = new BMapGL.Point(104.05,31.15);
    var myIcon7 = new BMapGL.Icon("../../images/visual/icon-dian.png", new BMapGL.Size(50, 50));
    var marker7 = new BMapGL.Marker(point7, {
         icon: myIcon7
    });
    map.addOverlay(marker7);
	
    var infoWindow7 = new BMapGL.InfoWindow(content, opts);
    // ç‚¹æ ‡è®°æ·»åŠ ç‚¹å‡»äº‹ä»¶
    marker7.addEventListener('click', function () {
        map.openInfoWindow(infoWindow7, point7); // å¼€å¯ä¿¡æ¯çª—口
    });
	
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨åæ ‡
    var opts7 = {
        position: point7, // æŒ‡å®šæ–‡æœ¬æ ‡æ³¨æ‰€åœ¨çš„地理位置
        offset: new BMapGL.Size(-25, 25) // è®¾ç½®æ–‡æœ¬åç§»é‡
    };
    // åˆ›å»ºæ–‡æœ¬æ ‡æ³¨å¯¹è±¡
    var label7 = new BMapGL.Label('彭山区', opts7);
    // è‡ªå®šä¹‰æ–‡æœ¬æ ‡æ³¨æ ·å¼
    label7.setStyle({
        color: '#fff',
        border:'0',
        backgroundColor:'none',
        fontSize: '18px',
        height: '20px',
        lineHeight: '20px',
        fontFamily: '微软雅黑'
    });
	
    map.addOverlay(label7);
	
	
	
	
    function openInfoWindow1() {
        map.panTo(point);
        map.openInfoWindow(infoWindow, point); 
    }
	
    function openInfoWindow2() {
        map.panTo(point7);
        map.openInfoWindow(infoWindow, point7); 
    }
</script>  -->
</body>

</html>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,416 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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 rel="stylesheet" type="text/css" th:href="@{/group/pc-reset.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/group/master.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/group/newstyle.css}" />
<!--    <link rel="stylesheet" type="text/css" th:href="@{/group/gis.css}" />-->
    <style>
        .anchorBL,
        .BMap_cpyCtrl.anchorBL {
            display: none !important;
        }

        .BMap_bubble_pop {
            background: url(/static/group/img/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;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="i-top">
        <h1 ondblclick="changeScreen()" class="i-top-tit"><span>省级储备粮监管平台</span></h1>
        <p ondblclick="changeScreen()" class="i-top-p" id="sloganText">不忘初心，牢记使命，为中国人民谋幸福，为中华民族谋复兴</p>
        <div class="i-navBar">
            <a href="javaScript:;" onclick="changePage('index')" class="i-nav1">首页</a>
            <a href="javaScript:;" onclick="changePage('amount')" class="i-nav2">数量总览</a>
            <a href="javaScript:;" onclick="changePage('gis')" class="i-nav3 active">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('plan')" class="i-nav4">轮换监管</a>
            <a href="javaScript:;" onclick="changePage('ai')" class="i-nav5">预警分析</a>
            <a href="javaScript:;" onclick="changePage('video')" class="i-nav6">视频轮换</a>
            <a href="javaScript:;" onclick="changePage('home')" 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" id="map_container">
            <!--                <img src="../images/visual/c-map.png" alt="">-->
        </div>
        <div class="c-left">
            <div class="o-btn">
                <img src="/static/group/img/c-btn1.png">
                <!--<img th:src="@{/static/group/img/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">1433331 </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);">42.2%</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);">12.6%</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);">21.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);">5.8%</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.9%</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);">10.2%</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);">16.2%</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);">42.2%</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);">12.6%</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);">21.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);">5.8%</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.9%</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);">10.2%</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);">16.2%</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 src="/static/group/img/c-btn2.png"/>
                <!--<img th:src="@{/static/group/img/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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

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

</div>

<script>
    window._AMapSecurityConfig = {
        securityJsCode:'39051edca2c561cb80d8f49b4624ab17',
    }
</script>
<script th:inline="javascript">
    var userId = null;
    var companyId = "1000";
    var deptId = null;
    var depts = null;
    var allDept = null;
    var deptAreas =null;
    var bizType =null;
    var dicSlogan =null;
    var defaultAreaCode = null;
</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="@{/ajax/libs/echarts/echarts.min.js}"></script>
<script th:src="@{/group/gis-index.js}"></script>
<script th:src="@{/group/gis-map.js}"></script>
<script th:src="@{/group/gis-common.js}"></script>
</body>

</html>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,414 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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 rel="stylesheet" type="text/css" th:href="@{/group/pc-reset.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/group/master.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/group/gis.css}" />
    <style>
        .anchorBL,
        .BMap_cpyCtrl.anchorBL {
            display: none !important;
        }

        .BMap_bubble_pop {
            background: url(/static/group/img/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;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="i-top">
        <h1 class="i-top-tit"><span>省级储备粮监管平台</span></h1>
        <p  class="i-top-p" id="sloganText">不忘初心，牢记使命，为中国人民谋幸福，为中华民族谋复兴</p>
        <div class="i-navBar">
            <a href="javaScript:;" onclick="changePage('index')" class="i-nav1">首页</a>
            <a href="javaScript:;" onclick="changePage('amount')" class="i-nav2">数量总览</a>
            <a href="javaScript:;" onclick="changePage('gis')" class="i-nav3 active">GIS监管</a>
            <a href="javaScript:;" onclick="changePage('plan')" class="i-nav4">轮换监管</a>
            <a href="javaScript:;" onclick="changePage('ai')" class="i-nav5">预警分析</a>
            <a href="javaScript:;" onclick="changePage('video')" class="i-nav6">视频轮换</a>
            <a href="javaScript:;" onclick="changePage('home')" 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" id="map_container">
            <!--                <img src="../images/visual/c-map.png" alt="">-->
        </div>
        <div class="c-left">
            <div class="o-btn">
                <img src="/group/img/c-btn1.png">
                <!--<img th:src="@{/static/group/img/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">1433331 </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);">42.2%</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);">12.6%</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);">21.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);">5.8%</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.9%</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);">10.2%</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);">16.2%</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);">42.2%</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);">12.6%</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);">21.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);">5.8%</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.9%</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);">10.2%</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);">16.2%</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 src="/group/img/c-btn2.png"/>
                <!--<img th:src="@{/static/group/img/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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</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">陕西军粮供应集团有公司凤城七路成品库</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有公司
                                                å‡¤åŸŽä¸ƒè·¯æˆå“åº“</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">陕西军粮供应集团有
                                                å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市高陵区奉义粮
                                                å‚¨å¤‡æœ‰é™å…¬å¸</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市群众面粉厂</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安爱菊油脂有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安西粮实业有限公司</span></a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;" class="v1"><i class="icon"></i><span class="t">西安市鄂邑区宏诚火车站
                                                ç²®åº“有限公司</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

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

</div>

<script>
    window._AMapSecurityConfig = {
        securityJsCode:'39051edca2c561cb80d8f49b4624ab17',
    }
</script>
<script th:inline="javascript">
    var userId = null;
    var companyId = "1000";
    var deptId = null;
    var depts = null;
    var allDept = null;
    var deptAreas =null;
    var dicSlogan =null;
</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="@{/ajax/libs/echarts/echarts.min.js}"></script>
<script th:src="@{/group/gis-index.js}"></script>
<script th:src="@{/group/gis-map.js}"></script>
<script th:src="@{/group/gis-common.js}"></script>
<script th:src="@{/group/gis-chart.js}"></script>
</body>

</html>

 fzzy-igdss-web/src/main/resources/templates/system/user/add.html

@@ -129,7 +129,7 @@
                    <div class="form-group">
                        <label class="col-sm-4 control-label">用户类型：</label>
                        <div class="col-sm-8">
                            <select name="type" class="form-control m-b" th:with="type=${@dict.getType('sys_user_type')}">
                            <select name="userType" class="form-control m-b" th:with="type=${@dict.getType('sys_user_type')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
@@ -140,7 +140,10 @@
                    <div class="form-group">
                        <label class="col-sm-4 control-label">所属银行：</label>
                        <div class="col-sm-8">
                            <input id="userData" name="userData" placeholder="用户类型=资方，选择所属银行" class="form-control" type="text" maxlength="30">
                            <select name="userData" class="form-control m-b">
                                <option value="">请选择所属银行</option>
                                <option th:each="bank:${banks}" th:text="${bank.name}" th:value="${bank.id}"></option>
                            </select>
                        </div>
                    </div>
                </div>

 fzzy-igdss-web/src/main/resources/templates/system/user/edit.html

@@ -128,8 +128,8 @@
                    <div class="form-group">
                        <label class="col-sm-4 control-label">用户类型：</label>
                        <div class="col-sm-8">
                            <select name="type" class="form-control m-b" th:with="type=${@dict.getType('sys_user_type')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{type}"></option>
                            <select name="userType" class="form-control m-b" th:with="type=${@dict.getType('sys_user_type')}">
                                <option th:each="dict:${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{userType}"></option>
                            </select>
                        </div>
                    </div>
@@ -139,8 +139,9 @@
                    <div class="form-group">
                        <label class="col-sm-4 control-label">所属银行：</label>
                        <div class="col-sm-8">
                            <select id="userData" class="form-control select2-multiple" multiple>
                                <option th:each="post:${posts}" th:value="${post.postId}" th:text="${post.postName}" th:selected="${post.flag}" th:disabled="${post.status == '1'}"></option>
                            <select name="userData" class="form-control m-b">
                                <option value="">请选择所属银行</option>
                                <option th:each="bank:${banks}" th:value="${bank.id}" th:text="${bank.name}"  th:field="*{userData}"></option>
                            </select>
                        </div>
                    </div>