1. 程式人生 > 其它 >應急管理管理局安全生產預警平臺應急管理系統

應急管理管理局安全生產預警平臺應急管理系統

為健全安全生產資訊化技術保障體系,加快達州資訊科技與安全生產的深度融合,推動安全生產監督管理基礎業務資訊化,企業安全生產資訊化建設。根據四川省安全生產“十三五”規劃的要求,實施“網際網路+安全生產”戰略,構建《市安全生產視覺化應急管理一張圖與智慧分析預警平臺》,從而完善達州安全生產管理業務流程規範化和資料標準規範化建設。

  運用物聯網技術實現企業安全生產全生命週期資料採集,整合安全生產監管監察各類業務系統資料,共享相關行業資料,搭建具有統一檢視的安全生產中心資料庫,全面實現達州市各級安委會成員單位間及其與重點企業間互聯互通。加強安全生產管理、基層安全監管監察執法、企業線上實時監測巡查和宣傳培訓等4大業務體系建設,進一步規範安全生產基礎業務資料,整合、擴充、完善安全生產基礎業務系統,保障全省安全生產監督管理資訊通道的暢通和安全,全面提升安全生產監督管理資訊化水平和履職效能。

  通過建設安全生產視覺化應急管理一張圖與智慧分析預警平臺,為建立和健全統一指揮、功能完備、 反應敏捷、協調有序、運轉高效的應急管理機制提供現代化的技術基礎支撐;全面提升安全生產各級政府的綜合應急管理能力,預防和妥善因應災害、 安全事故和社會安全事件等各類突發事件;減少突發安全事件造成的經濟損失和人民生命財產的損失;整合各類應急資源、應急隊伍、應急裝置,為安全生產應急規劃提供科學決策,為市安全應急指揮聯動提供輔助決策;整合現有資訊化成果,聯通應急相關單位網路、視訊會議、監控、通訊、資料 系統等,促進全市應急體系的發展。

  安全生產視覺化應急管理一張圖與智慧分析預警平臺應能夠滿足同時處置2起以上重大或特大安全事件和區安全生產應急管理辦公室日常工作的需要。滿足應急指揮要求。達州市安全生產視覺化應急管理一張圖與智慧分析預警平臺建設必須符合國家針對電子政務制定的各種標準,同時應結合系統建設的實際需要,制定一整套資訊系統相關的業務規範、技術規範和管 理規範,規範應用定製、維護與服務支援等工作,確保本系統與其它電子政務系統的互聯和資訊交換。

  

  總體業務流程

  

專案總體架構圖  

平臺框架設計


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_ESHeatMap"></title>
<script type="text/javascript" include="jquery,bootstrap,moment,bootstrap-datetimepicker,bootstrap-select,geohash" src="../js/include-web.js"></script>
<style>
        .bootstrap-select {
            width: 168px !important;
        }

        .form-group label {
            width: 100px;
            padding-right: 5px;
        }

        .tips {
            z-index: 1000;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>
<script type="text/javascript" include="mapv,elasticsearch" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var map,
            stopRender,
            timeControl,
            liveESService,
            liveRenderer,
            liveDataSet,
            geoFenceLayer,
            dataUrl = "https://iclient.supermap.io/es",
            info = L.control({position: 'bottomleft'}),
            layerOptions = getGridOptions();

    init();

    function init() {
        initMap();
        info.onAdd = function () {
            var popup = L.DomUtil.create('div');
            popup.innerHTML = "<div class='btn-group' role='group' aria-label='...'>" +
                    "<button  value='grid' type='button' class='btn btn-default'>"+resources.btn_grid+"</button>" +
                    "<button value='heatmap' type='button' class='btn btn-default'>"+resources.title_heatMap+"</button></div>"
            handleMapEvent(popup, map);
            return popup;
        };
        info.addTo(map);
        liveESService = new SuperMap.ElasticSearch(dataUrl);
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

    //開始播放
    function start() {
        var options = getControlOptions();
        if (!timeControl) {
            timeControl = new SuperMap.TimeFlowControl(loadLiveData, options);
        } else {
            timeControl.updateOptions(options);
        }
        timeControl.start();
        stopRender = false;
    }

    //暫停播放
    function pause() {
        timeControl && timeControl.pause();
    }

    //停止播放
    function stop() {
        stopRender = true;
        timeControl && timeControl.stop();
        clearAll();
    }

    //時間控制器回撥引數,即每次重新整理時執行的操作,此處為向伺服器請求資料並繪製。實時重新整理執行。
    function loadLiveData(currentTime) {
        getESAggregations(map.getZoom(), map.getBounds(), currentTime, currentTime + getControlOptions().speed);
        updateProgress(moment(currentTime).format("YYYY-MM-DD HH:mm:ss"));
    }

    function wrapLatLngBounds(extent) {
        var left = extent.getNorthWest().lng < -180 ? -180 : extent.getNorthWest().lng;
        var bottom = extent.getSouthEast().lat < -90 ? -90 : extent.getSouthEast().lat;
        var right = extent.getSouthEast().lng > 180 ? 180 : extent.getSouthEast().lng;
        var top = extent.getNorthWest().lat > 90 ? 90 : extent.getNorthWest().lat;
        return L.latLngBounds(L.latLng(bottom, left), L.latLng(top, right));
    }

    function getESAggregations(level, extent, startT, endT) {
        if (startT > endT) {
            return;
        }
        
        var coords = wrapLatLngBounds(extent), prec;
        
        if (level <= 2) {
            prec = 2;
        } else if (level > 2 && level <= 5) {
            prec = 4;
        } else if (level > 5) {
            prec = 8;
        } else if (level > 8 && level <= 11) {
            prec = 9;
        } else if (level > 11 && level <= 13) {
            prec = 10;
        } else if (level > 13 && level <= 15) {
            prec = 11;
        } else if (level > 15) {
            prec = 12;
        }
        liveESService.search({
            index: "flights",
            type: "flight_utc",
            body: {
                query: {
                    constant_score: {
                        filter: {
                            range: {
                                'time-ms': {
                                    from: startT,
                                    to: endT
                                }
                            }
                        }
                    }
                },
                aggregations: {
                    zoomedInView: {
                        filter: {
                            geo_bounding_box: {
                                'pin.location': {
                                    top_left: {
                                        lat: coords.getNorthWest().lat,
                                        lon: coords.getNorthWest().lng
                                    },
                                    bottom_right: {
                                        lat: coords.getSouthEast().lat,
                                        lon: coords.getSouthEast().lng
                                    }
                                }
                            }
                        },
                        aggregations: {
                            geohash: {
                                geohash_grid: {
                                    field: "pin.location",
                                    precision: prec
                                }
                            }
                        }
                    }
                }
            }
        }).then(function (response) {
            if (response.error) {
                console.log(error);
                console.log(error.body);
                return;
            }
            !stopRender && renderLive(response.aggregations.zoomedInView.geohash.buckets);
        });
    }

    //渲染實時點資料
    function renderLive(result) {
        if (timeControl && !timeControl.getRunning()) {
            return;
        }
        result = result || {};
        var data = createLiveRendererData(result);
        if (data.length < 1) {
            return;
        }
        updateDataSet(data);
        if (!liveRenderer) {
            liveRenderer = L.supermap.mapVLayer(liveDataSet, layerOptions, {noWrap: true}).addTo(map);
        } else {
            liveRenderer.update({data: liveDataSet, options: layerOptions});
        }
    }

    var buttons = $('.btn-group').children();
    buttons.map(function (key) {
        var value = buttons[key].value;
        if (value === 'grid') {
            $(buttons[key]).on('click', function () {
                layerOptions = getGridOptions();
                if (liveDataSet) {
                    liveRenderer.update({data: liveDataSet, options: layerOptions});
                }
            });
            return;
        }
        if (value === 'heatmap') {
            $(buttons[key]).on('click', function () {
                layerOptions = getHeatMapOptions();
                if (liveDataSet) {
                    liveRenderer.update({data: liveDataSet, options: layerOptions});
                }
            });
        }
    });

    function getGridOptions() {
        return {
            fillStyle: 'rgba(55, 50, 250, 0.8)',
            shadowColor: 'rgba(255, 250, 50, 1)',
            shadowBlur: 10,
            size: 40,
            globalAlpha: 0.5,
            label: {
                show: true,
                fillStyle: 'white',
                shadowColor: 'yellow',
                font: '15px Arial',
                shadowBlur: 10
            },
            gradient: {
                0: "rgba(49, 54, 149, 0)",
                0.2: "rgba(69,117,180, 0.7)",
                0.3: "rgba(116,173,209, 0.7)",
                0.4: "rgba(171,217,233, 0.7)",
                0.5: "rgba(224,243,248, 0.7)",
                0.6: "rgba(254,224,144,0.7)",
                0.7: "rgba(253,174,97,0.7)",
                0.8: "rgba(244,109,67,0.8)",
                0.9: "rgba(215,48,39,0.8)",
                0.95: "rgba(165, 0, 38,0.8)"
            },
            draw: 'grid'
        }
    }

    function getHeatMapOptions() {
        return {
            size: 20,
            gradient: {
                0: "rgba(49, 54, 149, 0)",
                0.2: "rgba(69,117,180, 0.7)",
                0.3: "rgba(116,173,209, 0.7)",
                0.4: "rgba(171,217,233, 0.7)",
                0.5: "rgba(224,243,248, 0.7)",
                0.6: "rgba(254,224,144,0.7)",
                0.7: "rgba(253,174,97,0.7)",
                0.8: "rgba(244,109,67,0.8)",
                0.9: "rgba(215,48,39,0.8)",
                0.95: "rgba(165, 0, 38,0.8)"
            },
            draw: 'heatmap'
        }
    }

    //解析點查詢結果資料為mapv資料
    function createLiveRendererData(results) {
        var data = [];
        results.map(function (feature) {
            var coords = decodeGeoHash(feature.key);
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [coords.longitude[2], coords.latitude[2]]
                },
                count: feature.doc_count
            });
        });
        return data;
    }

    //更新點資料集
    function updateDataSet(data) {
        if (!liveDataSet) {
            liveDataSet = new mapv.DataSet(data);
            return;
        }
        var innerData = liveDataSet.get();
        var dataLen = data.length;
        for (var i = 0; i < innerData.length; i++) {
            if (i < dataLen && data[i].ident === innerData[i].ident) {
                innerData[i] = data[i];
            }
        }
        liveDataSet.set(innerData);
    }

    //獲取時間控制元件設定的引數
    function getControlOptions() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        startTime = new Date(Date.parse(startTime.replace(/-/g, "/"))).getTime();
        endTime = new Date(Date.parse(endTime.replace(/-/g, "/"))).getTime();
        var speed = $("#speed").val();
        speed = (speed > 0) ? speed : 1000;
        speed = parseInt(speed);
        var frequency = $("#frequency").val();
        frequency = (frequency > 0) ? frequency : 1000;
        frequency = parseInt(frequency);
        return {
            startTime: startTime,
            endTime: endTime,
            speed: speed,
            frequency: frequency
        }
    }

    //更新當前時間介面
    function updateProgress(currentTime) {
        $("#progress").html(currentTime);
    }

    //預設設定引數
    function getDefaultControlOptions() {
        var startMs = 1498772645774;
        var endMs = 1498935332879;
        var start = moment(startMs).format("YYYY-MM-DD HH:mm:ss");
        var end = moment(endMs).format("YYYY-MM-DD HH:mm:ss");
        return {
            startTime: start,
            endTime: end,
            speed: 900000,
            frequency: 1000
        }
    }

    function initMap() {
        if (!map) {
            map = L.map('map', {
                center: [40.745654, -90.931577],
                maxZoom: 15,
                minZoom: 1,
                zoom: 4,
                crs: L.CRS.EPSG3857
            });
            var attr = 'Data © <a href="https://www.elastic.co/products/elasticsearch" target="_blank">Elasticsearch</a> Map Data <span>© <a href="http://support.supermap.com.cn/product/iServer.aspx" target="_blank">SuperMap iServer</a></span>';
            var host = window.isLocal ? window.server : "https://iserver.supermap.io";
            var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
            L.supermap.tiledMapLayer(url, {attribution: attr}).addTo(map);
        }

        initTimeControlView();
    }

    //初始化時間控制控制元件,僅UI
    function initTimeControlView() {
        var control = L.control({position: "topright"});
        control.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div', 'panel panel-primary controlPane');
            me._div.style.width = "300px";
            var titleDiv = $("<div class='panel-heading text-center' id='toggle' style='cursor: pointer'>" +
                    "<span class='panel-title text-center'>"+resources.text_console+"</span>&nbsp;" +
                    "<span class='glyphicon glyphicon-triangle-top' id='toggleIcon' ></span></div>").appendTo(me._div);

            var contentDiv = $("<div class='panel-body content center-block' style='font-size: 14px'></div>").appendTo(me._div);

            var optionsDiv = $("<div class='' id='options'></div>").appendTo(contentDiv);

            var defaultOption = getDefaultControlOptions();

            $("<div class='form-group form-inline'><label class='text-right' for='startTime' >"+resources.text_startTime+":  "+"</label>" +
                    "<input id='startTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.startTime +
                    "' value='" + defaultOption.startTime + "'/></div></div>").appendTo(optionsDiv);

            $("<div class='form-group form-inline'><label class='text-right' for='endTime' >"+resources.text_finishTime+":  "+"</label>" +
                    "<input id='endTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.endTime +
                    "' value='" + defaultOption.endTime + "'/></div></div>").appendTo(optionsDiv);

            $("<div class='form-group form-inline'><label class='text-right' for='speed' >"+resources.text_refreshStepSize+":  "+"</label>" +
                    "<input id='speed' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.speed +
                    "' value='" + defaultOption.speed + "'/></div></div>").appendTo(optionsDiv);

            $("<div class='form-group form-inline'><label class='text-right' for='frequency' >"+resources.text_refreshFrequency+":  "+"</label>" +
                    "<input id='frequency' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.frequency +
                    "' value='" + defaultOption.frequency + "'/></div></div>").appendTo(optionsDiv);

            var progressDiv = $("<div class='form-group'><div class='form-horizontal text-center'><div class='form-group'>" +
                    "<label  for='progress'>"+resources.text_currentTime+"</label><span class='form-control-static' id='progress'>"+resources.text_noStart+"</span>" +
                    "</div></div></div>").appendTo(contentDiv);

            var controlDiv = $("<section><div class='form-inline text-center'>" +
                    "<input id='start' type='button'  class='btn btn-default text-center' value="+resources.btn_start+">&nbsp;" +
                    "<input id='pause' type='button'  class='btn btn-default text-center' value="+resources.btn_pause+">&nbsp;" +
                    
"<input id='stop' type='button' class='btn btn-default text-center' value="+resources.btn_stop+">" + "</div></section>").appendTo(contentDiv); me._div.addEventListener('mouseover', function () { me._map.dragging.disable(); me._map.scrollWheelZoom.disable(); me._map.doubleClickZoom.disable(); }); me._div.addEventListener('mouseout', function () { me._map.dragging.enable(); me._map.scrollWheelZoom.enable(); me._map.doubleClickZoom.enable(); }); return me._div; }; control.addTo(map); var dateOptions = { format: "YYYY-MM-DD HH:mm:ss", stepping: 1, showClose: true, locale: 'zh-cn' }; $("#startTime").datetimepicker(dateOptions); $("#endTime").datetimepicker(dateOptions); $("#start").on('click', function () { $("#options").slideUp("fast", function () { toggle(this); }); start(); }); $("#pause").on('click', pause); $("#stop").on('click', stop); $("#toggle").on('click', function () { $("#options").slideToggle("fast", function () { toggle(this); }); return false; }); function toggle(ele) { if ($(ele).is(":visible")) { $("#toggleIcon").attr('class', "glyphicon glyphicon-triangle-top"); } else { $("#toggleIcon").attr('class', "glyphicon glyphicon-triangle-bottom"); } } } function clearAll() { if (timeControl) { timeControl.destroy(); timeControl = null; } if (liveRenderer) { map.removeLayer(liveRenderer); liveRenderer = null; } if (liveDataSet) { liveDataSet = null; } if (geoFenceLayer) { geoFenceLayer.remove(); geoFenceLayer = null; } } </script> </body> </html>