KN_CAMP_SOFTWARE_TEST/Code/智慧营区/DOCManageAPP（阿克苏）/3DVisualization/subitem/home.html

<link href="subitem/css/home.css" rel="stylesheet" type="text/css">
<div class="content">
    <div class="sy-left fl">
        <!-- 值班领导 -->
        <div class="sy-con">
            <div class="sy-tit">值班领导</div>
            <div class="sy-con1">
                <div class="sy-zbld" id="dutyman">
                    
                </div>
            </div>
        </div>
        <!-- 营区简介 -->
        <div class="sy-con">
            <div class="sy-tit">营区简介</div>
            <div class="sy-con1" style="overflow: hidden;">
                <div class="sy-yqjj">
                    <p class="moren-p">
                        <img src="img/yqjj-moren.png" style="width: 220px;height: 144px; overflow: hidden; border-radius: 4px; float: left;margin-right: 14px;"> 智慧营区建设以平战结合和信息安全为中心。以可视化、物联网、大数据、智能分析、云计算等为支撑。汇聚智慧，联通防护手段，数据全网云共享实现“可感、可知、可视、可控”。智慧营区建设以营区综合信息网为基础，在可视化平台上建设人员管理、车辆管理、视频监控、智能报警、动环、作战指挥中心六大系统。
                    </p>
                    <p class="moren-p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智慧营区建设以平战结合和信息安全为中心。以可视化、物联网、大数据、智能分析、云计算等为支撑。汇聚智慧，联通防护手段，数据全网云共享实现“可感、可知、可视、可控”。</p>
                    <p class="moren-p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智慧营区建设以营区综合信息网为基础，在可视化平台上建设人员管理、车辆管理...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="sy-ditu">
        <div class="back" style="display: none; cursor: pointer; text-align: left; z-index: 2;">返回</div>
        <div id="sy-ditu" style="width: 1012px; height: 638px;"></div>
    </div>
    <div class="sy-right fr">
        <!-- 营区力量 -->
        <div class="sy-con">
            <div class="sy-tit">营区力量</div>
            <div class="sy-con1" style="padding-left: 0;padding-right: 0;">
                <div class="sy-yqll">
                    <div id="carEchar" class="sy-xfcl">

                    </div>
                    <div id="perEchar" class="sy-xfcl" style="margin-top: 6px">

                    </div>
                    <!--车辆详情页-->
                    <!--<div class="" id="openMoreDuty1" style="display: none;overflow-x: auto">
                        <div class="tb-div">
                            <input id="orgId" value="" class="layui-input" style="width: 200px;display: none;" />
                            <input id="searchNum" value="" placeholder="请输入车牌号......" class="layui-input" style="width: 200px;display: inline;" />
                            <select id="sele" name="type" lay-filter="type" style="width: 200px;height: 39px;background-color: #d0f4ff;" onchange="getContent(this.value,this.options[this.selectedIndex].text)">
                                <option value="">请选择车辆种类</option>
                                <option value="0">公务用车</option>
                                <option value="1">执勤车辆</option>
                                <option value="2">地方车辆</option>
                                <option value="3">外来车辆</option>
                            </select>
                            <button type="button" id="select" class="layui-btn layui-btn-normal" style="display: inline;">查询</button>
                            <table class="layui-hide" id="layTbDuty1" lay-filter="layTbDuty1"></table>
                        </div>
                    </div>-->
                    <!--人员详情页-->
                    <!--<div class="" id="openMorePeo" style="display: none;">
                        <div class="tb-div">
                            <input id="org_id" value="" class="layui-input" style="width: 200px;display: none;" />
                            <input id="searchPeo" value="" placeholder="请输入姓名......" class="layui-input" style="width: 200px;display: inline;" />
                            <button type="button" id="findPeo" class="layui-btn layui-btn-normal" style="display: inline;">查询</button>
                            <table class="layui-hide" id="layTbPeo" lay-filter="layTbPeo"></table>
                        </div>
                    </div>-->
                </div>
            </div>
        </div>
        <!-- 通知公告 -->
        <div class="sy-con">
            <div class="sy-tit">通知公告</div>
            <div class="sy-con1" style="overflow: hidden;">
                <div id="scroll-message" class="sy-tzgg">
                    <ul id="tzggUl">
                        
                    </ul>
                </div>
            </div>
        </div>

        <!--通知公告 详情页面-->
        <div class="" id="openMoreTzggDetail" style="display: none;color: #000">
            <div class="grzx-wdks">
                <div class="rcgl-con2">
                    <div class="newsinfo">
                        <div class="newstitle"></div>
                        <div class="newsdate"></div>
                        <div class="summary"></div>
                        <div class="newscontent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="subitem/js/home.js"></script>
<!--<script src="/js/echarts.min.js"></script>-->
<script type="text/javascript">
    $(function () {
        //初始化地图echarts
        function initMapEchar_fun() {
            var cityId = JSON.parse(window.sessionStorage.getItem("userInfo")).CityCode;
            //var cityId = 650000;
            /** 中间map */
            var myChart = echarts.init(document.getElementById('sy-ditu'));
            //地图数据地址（西藏）
            var uploadedDataURL_q = "/3DVisualization/jsondata/mapjson/";
            var suffix = ".json";
            //获得地图数据
            getEchartsData_fun(myChart, cityId, uploadedDataURL_q + cityId + suffix);
            myChart.off('click');
            //点击查看下钻
            myChart.on('click', function (params) {
                //console.log(params.data.adcode);
                //console.log(params);
                for (var i = 0; i < arrCache.length; i++) {
                    if (arrCache[i].name === params.name) {
                        //显示 返回按钮
                        if (cityId != params.data.adcode) {
                            $(".back").show();
                        }
                        //获得地图数据
                        getEchartsData_fun(myChart, arrCache[i].adcode, uploadedDataURL_q + arrCache[i].adcode + suffix);
                        $.ajax({
                            type: "post",
                            async: false,
                            url: "/ashx/FireOrgHandler.ashx",
                            data: {
                                Action: 'getOrgIdByCity',
                                cityCode: arrCache[i].adcode
                            },
                            dataType: "json",
                            success: function (res) {
                                getHomeNumByOrgId(res.data.orgId);
                                $.post(_interfaceDocUrl + "/ashx/GisBaseHandler.ashx", {
                                    Action: "getDutyToDayByOrgId",
                                    OrgId: res.data.orgId
                                }, function (res) {
                                    res = JSON.parse(res);
                                    if (res.code != "-1") {
                                        var data = res.data;
                                        var dutyman1 = "";
                                        for (var i = 0; i < data.length; i++) {
                                            dutyman1 += '<div style="width: 100%; height: 50%; float: left; ">';
                                            dutyman1 += '<div class="sy-zbld-img fl">';
                                            dutyman1 += '<img src="' + (data[i].PHOTO == "" ? "img/no-photo.png" : "/" + data[i].PHOTO) + '">';
                                            dutyman1 += '</div>';
                                            dutyman1 += '<div class="sy-zbld-con">';
                                            dutyman1 += '<p><span>职务：</span>' + data[i].PROF + '</p>';
                                            dutyman1 += '<p><span>姓名：</span>' + data[i].EMP_NAME + '</p>';
                                            dutyman1 += '<p><span>电话：</span>' + data[i].EMP_PHONE + '</p>';
                                            dutyman1 += '</div>';
                                            dutyman1 += '</div>';
                                        }
                                        $("#dutyman").html(dutyman1);
                                    }
                                });
                            }
                        });
                        break;
                    }
                }
                //if (params.data) {
                //    //显示 返回按钮
                //    $(".back").show();
                //    //获得地图数据
                //    getEchartsData_fun(myChart, params.data.adcode, uploadedDataURL_q + params.data.adcode + suffix);
                //}
            });
        }


        //返回按钮点击事件
        $('.back').click(function () {
            initMapEchar_fun();
            getHomeNumByOrgId();
            //右上角显示区切换
            $("#spjk").hide();
            $("#yqsl").show();
            //隐藏 返回按钮
            $(".back").hide();
        });
        //缓存地图地区数据
        var arrCache = [];
        //ajax获取地图数据
        //根据 行政区划ID 获取所属地图数据
        function getEchartsData_fun(myChart, cityId, url) {
            $.ajax({
                type: "get",
                datatype: "json",
                url: url,
                success: function (geoJson) {
                    var customerBatteryCityData = [];
                    geoJson.features.forEach((item) => {
                        customerBatteryCityData.push(
                            {
                                name: item.properties.name,
                                adcode: item.properties.adcode,
                                value: item.properties.center
                            }
                        );
                        //console.log(customerBatteryCityData);
                    });
                    echarts.registerMap(cityId, geoJson);
                    arrCache = customerBatteryCityData;
                    getMapOption(myChart, cityId, customerBatteryCityData);
                }
            })
        }
        //地图赋值
        function getMapOption(myChart, mapId, customerBatteryCityData) {
            var layoutSize = '100%', layoutCenter = ['56.7%', '50.3%'];
            if (mapId == 540000 || mapId == 540200 || mapId == 540400) {
                layoutSize = '120%';
                layoutCenter = ['50.7%', '50.3%'];
            }
            var myOption = {
                geo: {
                    map: mapId,
                    aspectScale: 0.75, //长宽比
                    zoom: 1.1,
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#013C62',
                            borderColor: '#83BAFF',
                            borderWidth: 1,
                            shadowColor: 'rgba(56,164,255,.26)',
                            opacity: 0.5,
                            shadowOffsetX: 5,
                            shadowOffsetY: 5,
                            shadowBlur: 5,
                            show: true, // 是否显示对应地名
                            textStyle: {
                                color: '#797979'
                            }
                        },
                        emphasis: {
                            color: 'transparent', //悬浮背景
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                },
                series: [{
                    type: 'map',
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: 'rgba(0,255,255,.02)',
                            borderColor: '#00ffff',
                            borderWidth: 1.5,
                            shadowColor: '#00ffff',
                            shadowOffsetX: 0,
                            shadowOffsetY: 4,
                            shadowBlur: 10,
                        },
                        emphasis: {
                            areaColor: 'transparent', //悬浮背景
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    zoom: 1.1,
                    roam: false,
                    map: mapId //使用
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'render',
                    rippleEffect: {
                        period: 15,
                        scale: 4,
                        brushType: 'fill'
                    },
                    hoverAnimation: true,
                    itemStyle: {
                        normal: {
                            color: '#ffff',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    label: {
                        normal: {
                            show: false,
                            color: '#fff',
                            fontWeight: 'bold',
                            position: 'inside',
                            formatter: function (para) {
                                return '{cnNum|' + para.data.name + '}'
                            },
                            rich: {
                                cnNum: {
                                    fontSize: 13,
                                    color: '#D4EEFF',
                                }
                            }
                        },
                    },
                    data: customerBatteryCityData
                }]
            };
            myChart.setOption(myOption);
        }

        initMapEchar_fun();

    });

    //if (_orgId == "fbbb44bb458c4336a84e009df74c8598") {
    //    $(".shihezi-p").show();
    //    $(".akesu-p").hide();
    //    $(".moren-p").hide();
    //    $("#zhongjianditu").attr("src", "img/syditu.png");
    //} else if (_orgId == "fc21743dcaad4225b8be141dd47d8a2f") {
    //    $(".shihezi-p").hide();
    //    $(".akesu-p").show();
    //    $(".moren-p").hide();
    //    $("#zhongjianditu").attr("src", "img/sksditu.png");
    //    $("#zhongjianditu").parent().css({ "left": "42.5%", "top": "150px" });
    //} else {
    //    $(".shihezi-p").hide();
    //    $(".akesu-p").hide();
    //    $("#zhongjianditu").attr("src", "");
    //    $(".moren-p").show();
    //}

    /**
     * 值班领导
     * */
    $.post(_interfaceDocUrl + "/ashx/GisBaseHandler.ashx", {
        Action: "getDutyToDayByOrgId",
        OrgId: this._orgId   //"fbbb44bb458c4336a84e009df74c8598",//
    }, function (res) {
        
        res = JSON.parse(res);
        if (res.code != "-1") {
            var data = res.data;
            var dutyman1 = "";
            for (var i = 0; i < data.length; i++) {
                dutyman1 += '<div style="width: 100%; height: 50%; float: left; ">';
                dutyman1 += '<div class="sy-zbld-img fl">';
                dutyman1 += '<img src="' + (data[i].PHOTO == "" ? "img/no-photo.png" : "/" + data[i].PHOTO) + '">';
                dutyman1 += '</div>';
                dutyman1 += '<div class="sy-zbld-con">';
                dutyman1 += '<p><span>职务：</span>' + data[i].PROF + '</p>';
                dutyman1 += '<p><span>姓名：</span>' + data[i].EMP_NAME + '</p>';
                dutyman1 += '<p><span>电话：</span>' + data[i].EMP_PHONE + '</p>';
                dutyman1 += '</div>';
                dutyman1 += '</div>';
            }
            $("#dutyman").html(dutyman1);
        }
    });
</script>