优化首页

sec-beidou/src/main/java/com/imdroid/beidou/controller/IndexController.java

@@ -1,13 +1,22 @@
 package com.imdroid.beidou.controller;
 
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.imdroid.beidou.entity.Tenant;
+import com.imdroid.secapi.dto.*;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 import javax.servlet.http.HttpSession;
+import java.util.List;
 
 @Controller
 public class IndexController extends BasicController{
+    @Autowired
+    GnssDeviceMapper gnssDeviceMapper;
+    @Autowired
+    GnssStatusMapper statusMapper;
 
     @RequestMapping("/")
     public String index0(Model m, HttpSession session) {
@@ -24,6 +33,82 @@ public class IndexController extends BasicController{
     @RequestMapping("/page/device_overview")
     public String deviceOverview(Model m, HttpSession session) {
         initModel(m, session);
+        Long deviceDeployedNum;
+        Long deviceOnlineNum;
+        Long warning1Num;//一般告警
+        Long warning2Num;//严重告警
+
+        QueryWrapper<GnssDevice> deviceQueryWrapper = new QueryWrapper<>();
+        QueryWrapper<GnssStatus> statusQueryWrapper;
+        List<GnssStatus> deviceList;
+        if(tenantId == Tenant.SAAS_PROVIDER_ID){
+            // 统计所有企业设备
+            deviceQueryWrapper.ne("tenantid", tenantId);
+            deviceQueryWrapper.ne("opmode", GnssDevice.OP_MODE_UNUSE);
+            // 设备数量
+            deviceDeployedNum = gnssDeviceMapper.selectCount(deviceQueryWrapper);
+
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.ne("tenantid", tenantId);
+            statusQueryWrapper.isNotNull("latitude");
+            statusQueryWrapper.isNotNull("longitude");
+            deviceList = statusMapper.selectList(statusQueryWrapper);
+
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.ne("tenantid", tenantId);
+            statusQueryWrapper.ne("state", GnssStatus.STATE_OFFLINE);
+            deviceOnlineNum = statusMapper.selectCount(statusQueryWrapper);
+
+            // 告警统计
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.ne("tenantid", tenantId);
+            statusQueryWrapper.eq("warning", WarningCfg.LEVEL_1);
+            warning1Num = statusMapper.selectCount(statusQueryWrapper);
+
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.ne("tenantid", tenantId);
+            statusQueryWrapper.eq("warning", WarningCfg.LEVEL_2);
+            warning2Num = statusMapper.selectCount(statusQueryWrapper);
+        }
+        else{
+            // 统计本企业设备
+            // 统计所有企业设备
+            deviceQueryWrapper.eq("tenantid", tenantId);
+            deviceQueryWrapper.ne("opmode", GnssDevice.OP_MODE_UNUSE);
+            // 设备数量
+            deviceDeployedNum = gnssDeviceMapper.selectCount(deviceQueryWrapper);
+
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.ne("tenantid", tenantId);
+            statusQueryWrapper.isNotNull("latitude");
+            statusQueryWrapper.isNotNull("longitude");
+            deviceList = statusMapper.selectList(statusQueryWrapper);
+
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.eq("tenantid", tenantId);
+            statusQueryWrapper.ne("state", GnssStatus.STATE_OFFLINE);
+            deviceOnlineNum = statusMapper.selectCount(statusQueryWrapper);
+
+            // 告警统计
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.eq("tenantid", tenantId);
+            statusQueryWrapper.eq("warning", WarningCfg.LEVEL_1);
+            warning1Num = statusMapper.selectCount(statusQueryWrapper);
+
+            statusQueryWrapper = new QueryWrapper<>();
+            statusQueryWrapper.eq("tenantid", tenantId);
+            statusQueryWrapper.eq("warning", WarningCfg.LEVEL_2);
+            warning2Num = statusMapper.selectCount(statusQueryWrapper);
+        }
+
+        m.addAttribute("deviceDeployedNum", deviceDeployedNum);
+        m.addAttribute("deviceOnlineNum", deviceOnlineNum);
+        m.addAttribute("deviceOfflineNum", deviceDeployedNum - deviceOnlineNum);
+        m.addAttribute("warning1Num", warning1Num);
+        m.addAttribute("warning2Num", warning2Num);
+        m.addAttribute("warningTotalNum", warning1Num+warning2Num);
+        m.addAttribute("deviceList", deviceList);
+
         return "/page/device_overview";
     }
 

sec-beidou/src/main/resources/templates/page/device_overview.html

@@ -30,60 +30,107 @@
     </style>
 </head>
 <body>
-<div class="layuimini-container">
+<div class="layuimini-main">
-    <div class="layuimini-main welcome">
-        <div class="layui-row layui-col-space15">
-            <div class="layui-col-xs12 layui-col-md6">
 
+    <div class="layui-row layui-col-space30">
+        <div class="layui-col-xs12 layui-col-md6">
             <div class="layui-card top-panel">
                 <div class="layui-card-header">设备数量</div>
                 <div class="layui-card-body">
                     <div class="layui-row layui-col-space5">
                         <div class="layui-col-xs9 layui-col-md8 top-panel-number">
-                                <a style="color: #1aa094">2,020</a><br>
+                            <a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
                         </div>
                         <div class="layui-col-xs3 layui-col-md4">
-                                装机量 <a style="color: #bd3004">2040</a><br>
+                            掉线数 <a style="color: #bd3004" th:text="${deviceOfflineNum}">0</a><br>
-                                在线数 <a style="color: #C0C0C0">2020</a>
+                            装机量 <a style="color: #000000" th:text="${deviceDeployedNum}">2020</a>
                         </div>
                     </div>
                 </div>
             </div>
-
         </div>
         <div class="layui-col-xs12 layui-col-md6">
-
             <div class="layui-card top-panel">
                 <div class="layui-card-header">告警统计</div>
                 <div class="layui-card-body">
                     <div class="layui-row layui-col-space5">
                         <div class="layui-col-xs9 layui-col-md8 top-panel-number">
-                                <a style="color: #1aa094">20</a><br>
+                            <a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
                         </div>
                         <div class="layui-col-xs3 layui-col-md4">
-                                严重 <a style="color: #bd3004">5</a><br>
+                            严重 <a style="color: #bd3004" th:text="${warning2Num}">5</a><br>
-                                一般 <a style="color: #C0C0C0">20</a>
+                            一般 <a style="color: #f6c102" th:text="${warning1Num}">20</a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
+    <div class="layui-row layui-col-space15">
+        <div class="layui-card top-panel">
+            <div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
+        </div>
     </div>
 
 </div>
 
-    </div>
-    <div id="map-container" style="height: 85vh;weight :100vw"></div>
-</div>
 
-
+<script th:inline="javascript">
-<script type="text/javascript">
     function initialize() {
         var map = new BMapGL.Map("map-container");            // 创建Map实例
-        var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
+        var point = new BMapGL.Point(116.404, 39.915);
-        map.centerAndZoom(point, 15);
+        map.centerAndZoom(point, 6);
-        map.enableScrollWheelZoom();
+        map.enableScrollWheelZoom(true);
+        var deviceList=
+            [
+                [# th:each="device : ${deviceList}"]
+                    {deviceid:[[${device.deviceid}]],
+                        latitude:[[${device.latitude}]]/100,
+                        longitude:[[${device.longitude}]]/100},
+                    [/]
+            ];
+        //console.log(deviceList);
+
+        translateCallback = function (data){
+            if(data.status === 0) {
+                var i=0;
+                for(; i<data.points.length; i++) {
+                    map.addOverlay(new BMapGL.Marker(data.points[i]));
                 }
+                if(i>0) map.setCenter(data.points[i-1]);
+            }
+        }
+
+        let batch_id = 0;
+        var convertor = new BMapGL.Convertor();
+
+        //每秒转换10个坐标，否则会受百度并发限制
+        function timer() {
+            var pointArr = [];
+            var count = batch_id+10;
+            var totalNum = deviceList.length;
+            if(count>totalNum) count=totalNum;
+
+            for (var i = batch_id; i < count; i++) {
+                point = new BMapGL.Point(deviceList[i].longitude, deviceList[i].latitude);
+                pointArr.push(point);
+            }
+
+            convertor.translate(pointArr, 1, 5, translateCallback);
+
+            batch_id+=10;
+            // 函数内定时器的回调函数会继续调用 timer()
+            if(batch_id<totalNum) {
+                setTimeout(() => {
+                    timer();
+                }, 500);
+            }
+        }
+        // 启动函数
+        timer()
+    }
+
 
     function loadScript() {
         var script = document.createElement("script");
@@ -92,6 +139,7 @@
     }
 
     loadScript();
+
 </script>
 
 </body>