基于百度地图+GIS的设备维护大数据可视化平台

A毕设分享家

于 2023-06-25 12:46:11 发布

阅读量186

点赞数

文章标签：百度 java python

本文链接：https://blog.csdn.net/mabile123444/article/details/131375223

版权

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：基于百度地图+GIS的设备维护大数据可视化平台

包含内容：

完整可视化实现源码
html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：基于百度地图+GIS的设备维护大数据可视化平台
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。
在这里插入图片描述

3 部分代码展示

<body>
<div id="mapContainer"></div>
<div class="nav-top">
    <span class="nav-top-title">可视化监控管理</span>
    <div class="nav-top-time">
        <span id="date">2018年11月30日</span>
        <span id="time">星期五&nbsp;15:34</span>
    </div>
</div>
<!--大屏-->
<script type="text/javascript" src="lib/loadingScript.js"></script>
<script type="text/javascript">
    //初始化地图
    var map = new BMap.Map("mapContainer",{toolBarVisible:false});
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 12);
    map.loaded = function () {
        drawMap(mapData,map);
    };
    var map = new BMap.Map('mapContainer');
    map.centerAndZoom(new BMap.Point(116.404, 40.10), 12);


    function checkhHtml5()
    {
        if (typeof(Worker) === "undefined")
        {
            if(navigator.userAgent.indexOf("MSIE 9.0")<=0)
            {
                alert("定制个性地图示例：IE9以下不兼容，推荐使用百度浏览器、chrome、firefox、safari、IE10");
            }

        }
    }
    checkhHtml5();

    //时间
    var timer = null;
    function setTime(){
        if(timer !== null){
            clearTimeout(timer);
        }
        setTimeout(function () {
            $("#date").text(getTime()[0]);
            $("#time").text(getTime()[1] +"  "+ getTime()[2]);
            setTime();
        },1000);
    }
    setTime();

    //legend 生成图例
    function createLegend() {
        var html = '';
        html += '<div class="legend-container">';
            html += '<div class="legend-content"><span><img src="icon/legend.png"/>运维区域</span></div>';
            html += '<div class="legend-content"><span><span class="red-legend"></span><span style="font-size: 14px;">及时率</span></span><span><span class="green-legend"></span><span style="font-size: 14px;">完成率</span><span><span style="margin-right: -10px;"><img src="icon/高亮图标小.png"></span><span style="font-size: 14px;">高亮区域</span></span></span></div>';
        html += '</div>';
        $("body").append(html);
        setLegendPos();
    }
    function setLegendPos() {
        var $legendW = $("body").width() - (270 + 16) * 2;
        $(".legend-container").css({
            position:"fixed",
            top:90,
            left:296,
            width:$legendW
        });
    }
    createLegend();


    //生成卡片
    //总指标
    var zhzb =
        '<ul>' +
            '<li><span class="zhzb-li-name">运维设备<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">653212</span></li>' +
            '<li><span class="zhzb-li-name">保修总数<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">4321</span></li>' +
            '<li><span class="zhzb-li-name">维修完成<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">4213</span></li>' +
            '<li><span class="zhzb-li-name">正在维修<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">108</span></li>' +
            '<li><span class="zhzb-li-name">维修及时率<span class="typeStyle">（%）</span></span><span class="zhzb-li-num">82.5</span></li>' +
            '<li><span class="zhzb-li-name">维修完成率<span class="typeStyle">（%）</span></span><span class="zhzb-li-num">97.5</span></li>' +
        '</ul>';

    var zzb = new CreateTip({
        id:"zongzhibiao",
        titleName:"总指标",
        icon:"icon/总指标.png",
        pos:{position:"fixed",top:90,left:16},
        width:270,
//        html:zhzb
    });
    zzb.setData(zhzb);

    //预警
    var yujing =
        '<ul>' +
        '<li><span class="zhzb-li-name">IC卡</span><span class="zhzb-li-num"><span></span><span class="font-w yj-span">100</span></span></li>' +
        '<li><span class="zhzb-li-name">报站器</span><span class="zhzb-li-num"><span><img src="icon/上升趋势.png"></span><span class="font-w yj-span">120</span></span></li>' +
        '<li><span class="zhzb-li-name">定位设备</span><span class="zhzb-li-num"><span><img src="icon/下降趋势.png"></span><span class="font-w yj-span">80</span></span></li>' +
        '</ul>';
   var yj = new CreateTip({
        id:"yujing",
        titleName:"预警",
        icon:"icon/预警.png",
        pos:{position:"fixed",top:354,left:16},
        width:270,
        //html:yujing
    });
    yj.setData(yujing);

    //考勤
    var kaoqin =
        '<ul>' +
        '<li><span class="zhzb-li-name">正常</span><span class="zhzb-li-num">100</span></li>' +
        '<li><span class="zhzb-li-name">迟到</span><span class="zhzb-li-num">2</span></li>' +
        '<li><span class="zhzb-li-name">旷工</span><span class="zhzb-li-num">0</span></li>' +
        '<li><span class="zhzb-li-name">缺卡</span><span class="zhzb-li-num">3</span></li>' +
        '<li><span class="zhzb-li-name">休息</span><span class="zhzb-li-num">4</span></li>' +
        '</ul>';

    var kq = new CreateTip({
        id:"kaoqin",
        titleName:"考勤",
        icon:"icon/考勤.png",
        pos:{position:"fixed",top:530,left:16},
        width:270,
//        html:kaoqin
    });
    kq.setData(kaoqin);
    <!--大屏-->
    //详细指标
    var xxzb =
        '<div id="qybxspm">' +
            '' +
        '</div>'+
        '<div id="qywcspm">' +
        '' +
        '</div>'+
        '<div id="qywclpm">' +
        '' +
        '</div>';
    var xzb = new CreateTip({
        id:"xxzb",
        titleName:"详细指标",
        icon:"icon/详细指标.png",
        pos:{position:"fixed",top:90,right:16},
        width:270,
//        html:xxzb
    });
    xzb.setData(xxzb);
    var qybxspm = new CreateSpeed({
        id:"qybxspm",
        icon:"icon/区域报修数排名.png",
        title:"区域报修数排名",
        max:1300
    });
    qybxspm.setData([
        {"name":"中部","data":1123,"color":"#55DAED"},
        {"name":"东部","data":904,"color":"#55B6ED"},
        {"name":"西部","data":845,"color":"#3F80D2"},
        {"name":"北部","data":756,"color":"#2B5DB8"},
        {"name":"南部","data":684,"color":"#1864E3"}
    ]);
    var qywcspm = new CreateSpeed({
        id:"qywcspm",
        icon:"icon/区域完成数排名.png",
        title:"区域完成数排名",
        max:1300
    });
    qywcspm.setData([
        {"name":"中部","data":1103,"color":"#55DAED"},
        {"name":"东部","data":864,"color":"#55B6ED"},
        {"name":"西部","data":860,"color":"#3F80D2"},
        {"name":"北部","data":618,"color":"#2B5DB8"},
        {"name":"南部","data":596,"color":"#1864E3"}
    ]);
    var qywclpm = new CreateSpeed({
        id:"qywclpm",
        icon:"icon/区域完成率.png",
        title:"区域完成率排名",
        max:null
    });
    qywclpm.setData([
        {"name":"中部","data":"99.4%","color":"#55DAED"},
        {"name":"东部","data":"98%","color":"#55B6ED"},
        {"name":"西部","data":"88%","color":"#3F80D2"},
        {"name":"北部","data":"86%","color":"#2B5DB8"},
        {"name":"南部","data":"70%","color":"#1864E3"}
    ]);

    //屏幕自适应适配
//    window.resize = function () {
//        setTop();
//    };
//    function setTop() {
//        var $bodyH = $("body").height();
//        var top = ($bodyH - 660 - 90)/3;
//        if(top > 0){
//            $("#zongzhibiao").css({
//                top:top + 90
//            });
//            $("#yujing").css({
//                top:top + 260 +94
//            });
//            $("#kaoqin").css({
//                top:top + 430 +98
//            });
//            $("#xxzb").css({
//                top:top + 90
//            });
//        }
//    }
//    setTop();
</script>
</body>