From 9da58b81aaace6d4d78a78787fe98a4fb5c336ea Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 30 Dec 2019 16:39:58 +0800
Subject: [PATCH] datashow2 random popup

---
 safesite/static/safesite/mystatic/js/util2.js |  47 -----
 .../safesite/mystatic/openlayer/polyfill.js   |   3 +
 safesite/templates/datashow2.html             | 182 ++++++++++++------
 3 files changed, 129 insertions(+), 103 deletions(-)
 delete mode 100644 safesite/static/safesite/mystatic/js/util2.js
 create mode 100644 safesite/static/safesite/mystatic/openlayer/polyfill.js
diff --git a/safesite/static/safesite/mystatic/js/util2.js b/safesite/static/safesite/mystatic/js/util2.js
deleted file mode 100644
index 886c4956..00000000
--- a/safesite/static/safesite/mystatic/js/util2.js
+++ /dev/null
@@ -1,47 +0,0 @@
-﻿//map定时显示,每分钟请求一次
-function update() {
-    if ($('#mapshowinput').length) {
-        source.clear()
-        $.get('/api/mapshow?a=risk', function (res) {
-            for (let i = 0, len = res.length; i < len; i++) {
-                setPolygon(res[i])
-            }
-        })
-        $.get('/api/mapshow?a=trouble', function (res) {
-            for (let i = 0, len = res.length; i < len; i++) {
-                var data = res[i]
-                data.id = data.yhqy__id
-                data.num = data.num
-                data.polygon = data.yhqy__polygon
-                data.name = data.yhqy__name
-                data.type = 'yh'
-                setPoint(data)
-            }
-        })
-        $.get('/api/mapshow?a=miss', function (res) {
-            for (let i = 0, len = res.length; i < len; i++) {
-                var data = res[i]
-                data.id = data.missqy__id
-                data.num = data.num
-                data.polygon = data.missqy__polygon
-                data.name = data.missqy__name
-                data.type = 'ws'
-                setPoint(data)
-            }
-        })
-        $.get('/api/mapshow?a=operation', function (res) {
-            console.log(res)
-            for (let i = 0, len = res.length; i < len; i++) {
-                var data = res[i]
-                data.id = data.zyqy__id
-                data.num = data.num
-                data.polygon = data.zyqy__polygon
-                data.name = data.zyqy__name
-                data.type = 'zy'
-                data.list = data.zylist
-                setPoint(data)
-            }
-        })
-    }
-}
-var t1 = window.setInterval(update, 1000 * 60 * 5)
\ No newline at end of file
diff --git a/safesite/static/safesite/mystatic/openlayer/polyfill.js b/safesite/static/safesite/mystatic/openlayer/polyfill.js
new file mode 100644
index 00000000..4729194e
--- /dev/null
+++ b/safesite/static/safesite/mystatic/openlayer/polyfill.js
@@ -0,0 +1,3 @@
+/* Disable minification (remove `.min` from URL path) for more info */
+
+(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
\ No newline at end of file
diff --git a/safesite/templates/datashow2.html b/safesite/templates/datashow2.html
index 6400d930..2305f00c 100644
--- a/safesite/templates/datashow2.html
+++ b/safesite/templates/datashow2.html
@@ -9,11 +9,8 @@
     <link rel="icon" href="/media/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" type="text/css" href="/static/safesite/mystatic/openlayer/ol.css">
     <script type="text/javascript" src="/static/safesite/easyui/jquery.min.js"></script>
-    <script type="text/javascript" src="/static/safesite/mystatic/js/util2.js"></script>
     <script type="text/javascript" src="/static/safesite/mystatic/openlayer/ol.js"></script>
-    <script
-        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
-
+    <script type="text/javascript" src="/static/safesite/mystatic/openlayer/polyfill.js"></script>
 </head>
 
 <body>
@@ -21,54 +18,54 @@
     <header>
         企业安全数据显示大屏
     </header>
-            <div class="center_top">
-                <div id="map" class="map" style="width:100%;height:100%;outline: #4A74A8 solid 0.15em;">
-                </div>
-                <input type='hidden' id='mapshowinput'></input>
-                <div id="popup" class="ol-popup">
-                    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
-                    <div id="popup-content"></div>
-                </div>
+    <div class="center_top">
+        <div id="map" class="map" style="width:100%;height:100%;outline: #4A74A8 solid 0.15em;">
+        </div>
+        <input type='hidden' id='mapshowinput'></input>
+        <div id="popup" class="ol-popup">
+            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+            <div id="popup-content"></div>
+        </div>
+    </div>
+    <div class="center_bot">
+        <div height="40" style="background-color: red;font-weight:bold;text-align: center;">危险作业列表
+        </div>
+        <div class="tablebox">
+            <div class="tbl-header">
+                <table cellspacing="0" cellpadding="0" border="0">
+                    <thead>
+                        <tr>
+                            <th>作业编号</th>
+                            <th>作业类型</th>
+                            <th>作业区域</th>
+                            <th>作业部门</th>
+                            <th>作业负责人</th>
+                            <th>作业人数</th>
+                            <th>开始时间</th>
+                        </tr>
+                    </thead>
+                    <tbody style="opacity:0;"></tbody>
+                </table>
             </div>
-            <div class="center_bot">
-                <div height="40" style="background-color: red;font-weight:bold;text-align: center;">危险作业列表
-                </div>
-                <div class="tablebox">
-                    <div class="tbl-header">
-                        <table cellspacing="0" cellpadding="0" border="0">
-                            <thead>
-                                <tr>
-                                    <th>作业编号</th>
-                                    <th>作业类型</th>
-                                    <th>作业区域</th>
-                                    <th>作业部门</th>
-                                    <th>作业负责人</th>
-                                    <th>作业人数</th>
-                                    <th>开始时间</th>
-                                </tr>
-                            </thead>
-                            <tbody style="opacity:0;"></tbody>
-                        </table>
-                    </div>
 
-                    <div class="tbl-body">
-                        <table cellspacing="0" cellpadding="0" border="0">
-                            <thead>
-                                <tr>
-                                    <th>作业编号</th>
-                                    <th>作业类型</th>
-                                    <th>作业区域</th>
-                                    <th>作业部门</th>
-                                    <th>作业负责人</th>
-                                    <th>作业人数</th>
-                                    <th>开始时间</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
-                </div>
+            <div class="tbl-body">
+                <table cellspacing="0" cellpadding="0" border="0">
+                    <thead>
+                        <tr>
+                            <th>作业编号</th>
+                            <th>作业类型</th>
+                            <th>作业区域</th>
+                            <th>作业部门</th>
+                            <th>作业负责人</th>
+                            <th>作业人数</th>
+                            <th>开始时间</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
             </div>
+        </div>
+    </div>
     <!-- center -->
     <style>
         .ol-popup {
@@ -122,6 +119,11 @@
     </style>
     <script>
         var map, source, vector;// global so we can remove it later
+        var popuplist = [];
+        var MyMarhq = ''; //列表滚动定时
+        var Mylist = ''; //作业列表定时获取
+        var Updatepoint = ''; //图标定时获取
+        var Updatepopup = '';//popup定时获取
         var container = document.getElementById("popup");
         var content = document.getElementById("popup-content");
         var popupCloser = document.getElementById("popup-closer");
@@ -134,7 +136,7 @@
         $.get('/api/map?a=default', function (res) {
             $('#map').empty()
             map = initMap(res.pic)
-            update()
+            updatepo()
         })
 
         function initMap(url) {
@@ -328,9 +330,8 @@
         }
 
 
-        var MyMarhq = '';
-        var Mylist = '';
-        clearInterval(Mylist);
+
+        clearInterval(Mylist, Updatepoint);
         $('.tbl-body tbody').empty();
         $('.tbl-header tbody').empty();
         var str = '';
@@ -341,7 +342,7 @@
                 Items = res.rows
                 str = ''
                 $.each(Items, function (i, item) {
-                    str =  str + '<tr>' +
+                    str = str + '<tr>' +
                         '<td>' + item.zynum + '</td>' +
                         '<td>' + item.zylx__dickeyname + '</td>' +
                         '<td>' + item.zyqy__name + '</td>' +
@@ -379,9 +380,78 @@
                 }
             })
         }
-        getOperlist()
+        getOperlist();
         Mylist = setInterval("getOperlist()", 1000 * 60 * 10);
-
+        //map定时显示,每5分钟请求一次
+        function updatepo() {
+            if ($('#mapshowinput').length) {
+                source.clear()
+                $.get('/api/mapshow?a=risk', function (res) {
+                    for (let i = 0, len = res.length; i < len; i++) {
+                        setPolygon(res[i])
+                    }
+                })
+                $.get('/api/mapshow?a=trouble', function (res) {
+                    for (let i = 0, len = res.length; i < len; i++) {
+                        var data = res[i]
+                        data.id = data.yhqy__id
+                        data.num = data.num
+                        data.polygon = data.yhqy__polygon
+                        data.name = data.yhqy__name
+                        data.type = 'yh'
+                        setPoint(data)
+                    }
+                })
+                $.get('/api/mapshow?a=miss', function (res) {
+                    for (let i = 0, len = res.length; i < len; i++) {
+                        var data = res[i]
+                        data.id = data.missqy__id
+                        data.num = data.num
+                        data.polygon = data.missqy__polygon
+                        data.name = data.missqy__name
+                        data.type = 'ws'
+                        setPoint(data)
+                    }
+                })
+                $.get('/api/mapshow?a=operation', function (res) {
+                    for (let i = 0, len = res.length; i < len; i++) {
+                        var data = res[i]
+                        data.id = data.zyqy__id
+                        data.num = data.num
+                        data.polygon = data.zyqy__polygon
+                        data.name = data.zyqy__name
+                        data.type = 'zy'
+                        data.list = data.zylist
+                        popuplist.push(data)
+                        setPoint(data)
+                    }
+                })
+            }
+        }
+        Updatepoint = setInterval(updatepo, 1000 * 60 * 5)
+        function showpopup(){
+            var len = popuplist.length
+            if(len != 0){
+            
+            var index = Math.floor(Math.random()*len)
+            let po = popuplist[index]
+            var extent = ol.extent.boundingExtent(po.polygon[0]);
+            var center = ol.extent.getCenter(extent);//中心点
+            var html = "<p style='color:green;font-weight:bold' >" + po.name + "</p>"
+            html = html + "<p style='color:blue'>危险作业数量:" + po.num.toString() + "</p>"
+            for (let i = 0; i < po.list.length; i++) {
+                html = html + "<p style='color:red'>" + (i + 1).toString() + ":" + po.list[i].zylx__dickeyname + "--" + po.list[i].zybm__partname + "--" + po.list[i].zyfzr__name + "--作业人数" + po.list[i].num.toString() + "</p>"
+            }
+            content.innerHTML = html;
+            overlay.setPosition(undefined);
+            popupCloser.blur();
+            //设置overlay的显示位置
+            overlay.setPosition(center);
+            //显示overlay
+            map.addOverlay(overlay);
+            }
+        }
+        Updatepopup = setInterval(showpopup, 1000 * 5)
     </script>
 </body>
 
