change - 设备监控数据实时展示

ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/DeviceMonitorController.java

@@ -1,6 +1,9 @@
 package com.ruoyi.web.controller.iot;
 
+import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import com.ruoyi.common.json.JsonUtils;
 import com.ruoyi.system.domain.BaseMonitorunitInfo;
 import com.ruoyi.system.domain.BaseSensorInfo;
 import com.ruoyi.system.domain.dto.BaseMonitorunitInfoDto;
@@ -9,13 +12,16 @@ import com.ruoyi.system.service.IBaseMonitorunitInfoService;
 import com.ruoyi.system.service.IBaseSensorInfoService;
 import lombok.Data;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.redis.core.StringRedisTemplate;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 /**
@@ -32,6 +38,8 @@ public class DeviceMonitorController {
 
   @Autowired private IBaseSensorInfoService baseSensorInfoService;
 
+  @Autowired private StringRedisTemplate redisTemplate;
+
   /**
    * 获取监控单元列表
    *
@@ -107,7 +115,8 @@ public class DeviceMonitorController {
   @GetMapping("/getSensorInfo")
   @ResponseBody
   public String getSensorInfo(String monitorunitId) {
-    List<BaseSensorInfoDto> baseSensorInfoDtos = new ArrayList<>();
+      List<Map<String, Object>> result = new ArrayList<>();
+    //List<BaseSensorInfoDto> baseSensorInfoDtos = new ArrayList<>();
 
     List<BaseMonitorunitInfoDto> baseMonitorunitInfoDtos =
         baseMonitorunitInfoService.selectBaseMonitorunitInfoDtoList(
@@ -115,26 +124,48 @@ public class DeviceMonitorController {
 
     baseMonitorunitInfoDtos.forEach(
         x -> {
-          /*if(x.getParentId().isEmpty()){
-              BaseMonitorunitInfo baseMonitorunitInfo = new BaseMonitorunitInfo();
-              baseMonitorunitInfo.setParentId(x.getMonitorunitId());
-              List<BaseMonitorunitInfoDto> baseMonitorunitInfoDtos1 = baseMonitorunitInfoService.selectBaseMonitorunitInfoDtoList(baseMonitorunitInfo);
-              baseMonitorunitInfoDtos1.forEach(y->{
-                  List<BaseSensorInfoDto> baseSensorInfoDtos1 = baseSensorInfoService.selectBaseSensorInfoList(new BaseSensorInfo(null, null, null, y.getMonitorunitId()));
-                  baseSensorInfoDtos.addAll(baseSensorInfoDtos1);
-              });
-          }else{
-              List<BaseSensorInfoDto> baseSensorInfoDtos1 = baseSensorInfoService.selectBaseSensorInfoList(new BaseSensorInfo(null, null, null, x.getMonitorunitId()));
-              baseSensorInfoDtos.addAll(baseSensorInfoDtos1);
-          }*/
-
-          List<BaseSensorInfoDto> baseSensorInfoDtos1 =
-              baseSensorInfoService.selectBaseSensorInfoList(
-                  new BaseSensorInfo(null, null, null, x.getMonitorunitId()));
-          baseSensorInfoDtos.addAll(baseSensorInfoDtos1);
+            List<BaseSensorInfoDto> baseSensorInfoDtos =
+                    baseSensorInfoService.selectBaseSensorInfoList(new BaseSensorInfo(null, null, null, x.getMonitorunitId()));
+
+            baseSensorInfoDtos.forEach(y -> {
+                        Map<String, Object> info = new HashMap<>();
+
+                        Object jrm = redisTemplate.opsForHash().get(y.getSensorType(), y.getSensorId());
+
+                        if (jrm != null) {
+                            JSONObject jsonObject = JSON.parseObject(jrm.toString());
+
+                            Object param = jsonObject.get("param");
+
+                            JSONObject data = JSON.parseObject(param.toString());
+
+                            JSONObject datavalue = JSON.parseObject(data.get("datavalue").toString());
+
+                            info = JsonUtils.JSONObjectToMap(datavalue);
+
+                            info.put("datatype", data.get("datatype"));
+                        }
+
+                        info.put("datatype",y.getSensorType());
+
+                        info.put("id", 1);
+
+                        info.put("sensorId", y.getSensorId());
+
+                        info.put("edgeId", y.getEdgeId());
+
+                        info.put("sensorLocation", y.getSensorLocation());
+
+                        result.add(info);
+                    });
         });
 
-    return JSONArray.toJSONString(baseSensorInfoDtos);
+
+
+      String s = JSONArray.toJSONString(result);
+      System.out.println("传感器数据展示" + s);
+
+    return s;
   }
 }
 

ruoyi-admin/src/main/resources/static/js/Iot-ui/deviceMonitor.js

@@ -0,0 +1,85 @@
+const getParameter = function (dataType){
+    var returnData;
+    let formData = new FormData();
+    formData.append("sensorTypeId", dataType);
+    $.ajax({
+        type: "post",
+        url: "/base/sysParamConfig/getParameter",
+        data: formData,
+        contentType: "application/json;charset=utf-8",
+        dataType: "json",
+        json: 'callback',
+        processData: false,
+        contentType: false,
+        async: false,
+        success: function (json) {
+            returnData = json;
+        },
+        error: function () {
+            alert("错误");
+        }
+    });
+    return returnData;
+}
+
+const sensorCollectionRefresh = function (monitorUnitId) {
+    setInterval(function() {
+        $.ajax({
+            url: "/iot/deviceMonitor/getSensorInfo?monitorunitId=" + monitorUnitId,
+            type: "get",
+            dataType: 'JSON',
+            success: (res) => {
+                $("#sensor-card-group").html("");
+                res.map(x=>{
+                    let params = getParameter(x.datatype);
+                    createDeviceModule(x,params);
+                })
+            },
+            error: () => {
+                console.log("失败");
+            }
+        })
+    }, 5000);
+}
+
+const createDeviceModule = function (sensor,params) {
+
+    let html = '<div class="card sensor-card" id="1" style="border: 0px solid red;height: 17.6rem;margin-right: 2%;margin-top:2%">';
+    switch (sensor.datatype) {
+        case "temperature":
+            html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+            for (let i=0; i<params.length; i++) {
+                html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
+            }
+            html += '</div>';
+            $("#sensor-card-group").append(html);
+            break;
+
+        case "image":
+            html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+            html += '</div>';
+            $("#sensor-card-group").append(html);
+            break;
+
+        case "smoke":
+            html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+            for (let i=0; i<params.length; i++) {
+                html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
+            }
+            html += '</div>';
+            $("#sensor-card-group").append(html);
+            break;
+
+        case "platen":
+            html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${sensor.sensorId}</div>`;
+            for (let i=0; i<params.length; i++) {
+                html += `<div style="padding-left: 20px;padding-top: 10px;font-size: 80%;color: #00f9ff;width: 70%;">${params[i].paramText+"："+(sensor[params[i].paramTitle] == null ? "-" : sensor[params[i].paramTitle])}</div>`;
+            }
+            html += '</div>';
+            $("#sensor-card-group").append(html);
+            break;
+
+        default:
+            break;
+    }
+}

ruoyi-admin/src/main/resources/templates/section/transformer-detail.html

@@ -245,6 +245,8 @@
             left: 49%;
             top: 13%;
             overflow-y: scroll;
+            display: flex;
+            flex-wrap: wrap;
         }
 
         #sensor-card-group > * {
@@ -257,7 +259,7 @@
 
         .sensor-card {
             background: url("/img/sensor-block.png") no-repeat #00000000;
-            background-size: 100% auto;
+            background-size: 100% 100%;
             width: 27rem;
             height: 14.6rem;
             border-radius: 0;
@@ -265,8 +267,8 @@
         }
 
         .sensor-card:hover, .sensor-card.active {
-            background: url("/img/sensor-block-active.png") no-repeat #00000000;
-            background-size: 100% auto;
+            background: url("/img/sensor-block.png") no-repeat #00000000;
+            background-size: 100% 100%;
         }
 
         .card-title {
@@ -387,6 +389,7 @@
     <script th:src="@{/js/view-model.js}" src="../../static/js/view-model.js"></script>
     <script th:src="@{/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js}"
             src="../../static/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js"></script>
+    <script th:src="@{/js/Iot-ui/deviceMonitor.js}"></script>
 </head>
 <body class="body-transformer-detail1">
 <div id="company-name" style="left: 0.7%;width:12.6%;top: 1%;height:5.6%;">
@@ -438,7 +441,7 @@
 </div>
 </body>
 
-<script th:inline="javascript">
+<!--<script th:inline="javascript">
 
     class SensorCardsViewModel extends AbstractViewModel {
         constructor(idOrElement, parent = null, volatileMode = false) {
@@ -510,7 +513,7 @@
                 for (let i = 0; i < res.length; i++) {
                     const vm = sensorCollection.get(i);
                     vm.set("title", res[i].sensorName)
-                    vm.set("temperature", "--")
+                    vm.set("temperature", "&#45;&#45;")
                     vm.set("battery-icon", `<i class="fa-solid fa-battery-full battery-icon"></i>`)
                     switch (res[i].sensorStatus) {
                         case 0:
@@ -541,7 +544,7 @@
 
 
     }
-</script>
+</script>-->
 
 <script type="text/javascript">