change - 界面样式处理

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

@@ -129,7 +129,7 @@ public class IndexController {
   public String getAlarmAmount(){
     return "{\n"
         + "    \"yAxis\": [\"设备高温\", \"设备振动\", \"烟雾火情\", \"环境大风\", \"测试一\", \"测试二\", \"测试三\", \"测试四\", \"测试五\", \"测试六\"],\n"
-        + "    \"data\": [60, 132, 89, 100,15,23,22,60, 132, 89]\n"
+        + "    \"data\": [60, 132, 89, 10,15,23,22,60, 132, 89]\n"
         + "}";
   }
 

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

@@ -1,5 +1,6 @@
 package com.ruoyi.web.controller.iot;
 
+import com.alibaba.fastjson.JSONArray;
 import com.fasterxml.jackson.annotation.JsonFormat;
 import com.ruoyi.common.annotation.Excel;
 import com.ruoyi.common.core.controller.BaseController;
@@ -10,9 +11,13 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
+import java.math.BigDecimal;
+import java.text.DecimalFormat;
+import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
+import java.util.UUID;
 
 /**
  * 传感器汇总
@@ -34,343 +39,25 @@ public class SensorSummaryController extends BaseController {
     @GetMapping("/getSensorInfo")
     @ResponseBody
     public String getSensorInfo(){
-        return "[{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "},{\n" +
-                "\t\"id\": 1,\n" +
-                "\t\"name\": 1521171180000,\n" +
-                "\t\"price\": \"fa fa-video-camera\",\n" +
-                "\t\"column1\": 2,\n" +
-                "\t\"column2\": \"监控界面\",\n" +
-                "\t\"column3\": \"M\",\n" +
-                "\t\"column4\": \"2\"\n" +
-                "}]";
+        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+        List<sensorTableModel> sensorTableModelList = new ArrayList<>();
+        for (int i =1;i<24;i++){
+            sensorTableModel sensor = new sensorTableModel();
+            sensor.setId(i);
+            sensor.setEdgeId(UUID.randomUUID().toString().substring(0,8));
+            sensor.setSensorId(UUID.randomUUID().toString().substring(0,8));
+            //生成随机数，带两位小数
+            double a=Math.random()*10;
+            DecimalFormat df = new DecimalFormat( "0.00" );
+            String str=df.format( a );
+            sensor.setSensorData(new BigDecimal(str));
+            sensor.setRssi(new BigDecimal(str));
+            sensor.setCollectTime(simpleDateFormat.format(new Date()));
+            sensor.setMonitorLocation(i+"#监控点");
+            sensorTableModelList.add(sensor);
+        }
+
+        return JSONArray.toJSONString(sensorTableModelList);
     }
 
 
@@ -378,145 +65,83 @@ public class SensorSummaryController extends BaseController {
 
 class sensorTableModel
 {
-    /** 用户ID */
-    private int userId;
+    private int id;
 
-    /** 用户编号 */
-    @Excel(name = "用户编号", cellType = Excel.ColumnType.NUMERIC)
-    private String userCode;
+    private String edgeId;
 
-    /** 用户姓名 */
-    @Excel(name = "用户姓名")
-    private String userName;
+    private String sensorId;
 
-    /** 用户性别 */
-    private String userSex;
+    private BigDecimal sensorData;
 
-    /** 用户手机 */
-    @Excel(name = "用户手机")
-    private String userPhone;
+    private BigDecimal rssi;
 
-    /** 用户邮箱 */
-    @Excel(name = "用户邮箱")
-    private String userEmail;
+    private BigDecimal voltage;
 
-    /** 用户余额 */
-    @Excel(name = "用户余额", cellType = Excel.ColumnType.NUMERIC)
-    private double userBalance;
+    private String collectTime;
 
-    /** 用户状态（0正常 1停用） */
-    private String status;
+    private String monitorLocation;
 
-    /** 创建时间 */
-    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
-    private Date createTime;
-
-    public sensorTableModel()
-    {
-
-    }
-
-    public sensorTableModel(int userId, String userCode, String userName, String userSex, String userPhone,
-                          String userEmail, double userBalance, String status)
-    {
-        this.userId = userId;
-        this.userCode = userCode;
-        this.userName = userName;
-        this.userSex = userSex;
-        this.userPhone = userPhone;
-        this.userEmail = userEmail;
-        this.userBalance = userBalance;
-        this.status = status;
-        this.createTime = DateUtils.getNowDate();
-    }
-
-    public int getUserId()
-    {
-        return userId;
-    }
-
-    public void setUserId(int userId)
-    {
-        this.userId = userId;
-    }
-
-    public String getUserCode()
-    {
-        return userCode;
+    public int getId() {
+        return id;
     }
 
-    public void setUserCode(String userCode)
-    {
-        this.userCode = userCode;
+    public void setId(int id) {
+        this.id = id;
     }
 
-    public String getUserName()
-    {
-        return userName;
+    public String getEdgeId() {
+        return edgeId;
     }
 
-    public void setUserName(String userName)
-    {
-        this.userName = userName;
+    public void setEdgeId(String edgeId) {
+        this.edgeId = edgeId;
     }
 
-    public String getUserSex()
-    {
-        return userSex;
+    public String getSensorId() {
+        return sensorId;
     }
 
-    public void setUserSex(String userSex)
-    {
-        this.userSex = userSex;
+    public void setSensorId(String sensorId) {
+        this.sensorId = sensorId;
     }
 
-    public String getUserPhone()
-    {
-        return userPhone;
+    public BigDecimal getSensorData() {
+        return sensorData;
     }
 
-    public void setUserPhone(String userPhone)
-    {
-        this.userPhone = userPhone;
+    public void setSensorData(BigDecimal sensorData) {
+        this.sensorData = sensorData;
     }
 
-    public String getUserEmail()
-    {
-        return userEmail;
+    public BigDecimal getRssi() {
+        return rssi;
     }
 
-    public void setUserEmail(String userEmail)
-    {
-        this.userEmail = userEmail;
+    public void setRssi(BigDecimal rssi) {
+        this.rssi = rssi;
     }
 
-    public double getUserBalance()
-    {
-        return userBalance;
+    public BigDecimal getVoltage() {
+        return voltage;
     }
 
-    public void setUserBalance(double userBalance)
-    {
-        this.userBalance = userBalance;
+    public void setVoltage(BigDecimal voltage) {
+        this.voltage = voltage;
     }
 
-    public String getStatus()
-    {
-        return status;
+    public String getCollectTime() {
+        return collectTime;
     }
 
-    public void setStatus(String status)
-    {
-        this.status = status;
+    public void setCollectTime(String collectTime) {
+        this.collectTime = collectTime;
     }
 
-    public Date getCreateTime()
-    {
-        return createTime;
+    public String getMonitorLocation() {
+        return monitorLocation;
     }
 
-    public void setCreateTime(Date createTime)
-    {
-        this.createTime = createTime;
+    public void setMonitorLocation(String monitorLocation) {
+        this.monitorLocation = monitorLocation;
     }
 }

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysIndexController.java

@@ -95,9 +95,7 @@ public class SysIndexController extends BaseController
     public JsonRootBean menuInfo(){
 
         List<SysMenu> menus = menuService.selectVisualMenusByUser(getSysUser());
-
         List<SysMenu> firstMenu = menus.stream().filter(x->x.getParentId()==1112).collect(Collectors.toList());
-
         JsonRootBean jsonResult = new JsonRootBean();
         List<List<String>> urlResult = new ArrayList<>();
         List<MenuStr> menuStrList = new ArrayList<>();
@@ -122,50 +120,8 @@ public class SysIndexController extends BaseController
                 menuStrList.add(new MenuStr(menu.getMenuName(),new ArrayList<String>()));
             }
         }
-
-        /*urlResult.add(new ArrayList<String>(){{
-            this.add("/iot/index");
-        }});
-        urlResult.add(new ArrayList<String>(){{
-            this.add("/sections/substation");
-            this.add("/sections/substation");
-            this.add("/sections/substation");
-            this.add("/sections/substation");
-            this.add("/sections/substation");
-            this.add("/sections/substation");
-        }});
-        urlResult.add(new ArrayList<String>(){{
-            this.add("/sections/transformer-detail");
-            this.add("/sections/transformer-detail");
-            this.add("/sections/transformer-detail");
-            this.add("/sections/transformer-detail");
-            this.add("/sections/transformer-detail");
-            this.add("/sections/transformer-detail");
-        }});
-        urlResult.add(new ArrayList<String>(){{
-            this.add("/iot/sensorSummary");
-        }});
-        menuStrList.add(new MenuStr("监控主页",new ArrayList<String>()));
-        menuStrList.add(new MenuStr("智慧场景",new ArrayList<String>(){{
-            this.add("变压器监控单元");
-            this.add("隔离开关监控单元");
-            this.add("电流互感器监控单元");
-            this.add("电压互感器监控单元");
-            this.add("电容电抗器监控单元");
-            this.add("避雷器监控单元");
-        }}));
-        menuStrList.add(new MenuStr("设备监测",new ArrayList<String>(){{
-            this.add("变压器设备");
-            this.add("隔离开关设备");
-            this.add("电流互感器设备");
-            this.add("电压互感器设备");
-            this.add("电容电抗器设备");
-            this.add("避雷器设备");
-        }}));
-        menuStrList.add(new MenuStr("传感器汇总",new ArrayList<String>()));*/
         jsonResult.setUrl(urlResult);
         jsonResult.setMenuStr(menuStrList);
-        System.out.println("测试："+JSONArray.toJSONString(jsonResult));
         return jsonResult;
     }
 

ruoyi-admin/src/main/resources/static/css/lot-ui/Iot-sensorSummaryStyle.css

@@ -33,6 +33,10 @@ span{
     border: 0px solid #7FFFD4;
     width: 80.3%;
     left: 18.5%;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: absolute;
 }
 
 .searchBox {
@@ -70,7 +74,7 @@ span{
 
 .sensorDataTable {
     height: 88%;
-    top: 9%;
+    top: 10%;
     color: #ddd;
 }
 
@@ -83,6 +87,14 @@ span{
     border: 1px solid #03A6BE;
 }
 
+.table-bordered>thead>tr>th, .table-bordered>thead>tr>th {
+    border: 1px solid #03A6BE;
+}
+
+.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
+    border: 1px solid #03A6BE;
+}
+
 .float-left{
     border: 0px solid #ddd;
     bottom: 3%;
@@ -98,4 +110,8 @@ span{
     position: fixed;
     margin-top: 30px;
     right:1%;
+}
+
+.fixed-table-pagination{
+    padding-top: 20px;
 }

ruoyi-admin/src/main/resources/static/css/lot-ui/zTree.css

@@ -0,0 +1,90 @@
+/*-------------------------------------
+zTree Style
+
+version:	3.5.19
+author:		Hunter.z
+email:		hunter.z@263.net
+website:	http://code.google.com/p/jquerytree/
+
+-------------------------------------*/
+
+/*
+.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
+.ztree {margin:0; padding:5px; color:#333}
+.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
+.ztree li ul{ margin:0; padding:0 0 0 18px}
+.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
+
+.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
+	text-decoration:none; vertical-align:top; display: inline-block}
+.ztree li a:hover {text-decoration:underline}
+.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
+.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
+.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid;
+	opacity:0.8; filter:alpha(opacity=80)}
+.ztree li a.tmpTargetNode_prev {}
+.ztree li a.tmpTargetNode_next {}
+.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
+	font-size:12px; border:1px #7EC4CC solid; *border:0px}
+.ztree li span {line-height:16px; margin-right:2px}
+.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
+	border:0 none; cursor: pointer;outline:none;
+	background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+	background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
+
+.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
+.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
+.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
+.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
+.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
+.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
+.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
+.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
+.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
+.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
+.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
+.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
+.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
+.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
+.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
+.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
+.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
+.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
+.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
+.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
+.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}
+
+.ztree li span.button.switch {width:18px; height:18px}
+.ztree li span.button.root_open{background-position:-92px -54px}
+.ztree li span.button.root_close{background-position:-74px -54px}
+.ztree li span.button.roots_open{background-position:-92px 0}
+.ztree li span.button.roots_close{background-position:-74px 0}
+.ztree li span.button.center_open{background-position:-92px -18px}
+.ztree li span.button.center_close{background-position:-74px -18px}
+.ztree li span.button.bottom_open{background-position:-92px -36px}
+.ztree li span.button.bottom_close{background-position:-74px -36px}
+.ztree li span.button.noline_open{background-position:-92px -72px}
+.ztree li span.button.noline_close{background-position:-74px -72px}
+.ztree li span.button.root_docu{ background:none;}
+.ztree li span.button.roots_docu{background-position:-56px 0}
+.ztree li span.button.center_docu{background-position:-56px -18px}
+.ztree li span.button.bottom_docu{background-position:-56px -36px}
+.ztree li span.button.noline_docu{ background:none;}
+
+.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
+
+.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
+
+ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
+
+span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
+	background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+	background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
+
+ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
+.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
+*/

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

@@ -181,6 +181,7 @@ function barChats(datas, id) {
                 },
                 show: true,
             },
+            boundaryGap: ['5%', '5%'],
         },
         yAxis: [{
             type: 'category',
@@ -204,6 +205,7 @@ function barChats(datas, id) {
                     color: '#fff',
                 }
             },
+            boundaryGap: ['5%', '5%'],
             data: datas.yAxis
         }
 

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

@@ -42,58 +42,8 @@ $(()=>{
         div.setAttribute("class","sensorTypeItem");
         document.getElementById("sensorType").contentWindow.document.body.appendChild(div);
     }
-
-    //table
-    // document.getElementById("sensorDataTable").contentWindow.document.designMode = "on";
-    // document.getElementById("sensorDataTable").contentWindow.document.contentEditable = true;
-    //
-    // var jqueryScrip = document.createElement("script");
-    // jqueryScrip.src = "../js/jquery.min.js";
-    // //jqueryScrip.type = "text/javascript";
-    // document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(jqueryScrip);
-    //
-    // var bootstrapTableLink = document.createElement("link");
-    // bootstrapTableLink.href="../../css/lot-ui/bootstrap-table.css";
-    // bootstrapTableLink.rel = "stylesheet";
-    // bootstrapTableLink.type = "text/css";
-    // document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(bootstrapTableLink);
-    //
-    // var tableCssLink = document.createElement("link");
-    // tableCssLink.href="../../css/lot-ui/bootstrap.min.css";
-    // tableCssLink.rel = "stylesheet";
-    // tableCssLink.type = "text/css";
-    // document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(tableCssLink);
-    //
-    // var bootstrapTableScript = document.createElement("script");
-    // bootstrapTableScript.src = "../js/Iot-ui/bootstrap-table.js";
-    // bootstrapTableScript.type = "text/javascript";
-    // document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(bootstrapTableScript);
-    //
-    // var tableScrip = document.createElement("script");
-    // tableScrip.src = "../js/Iot-ui/sensorTableList.js";
-    // tableScrip.type = "text/javascript";
-    // document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(tableScrip);
-    //
-    // var tableInfo = document.getElementById("sensorType").contentWindow.document.createElement("table");
-    // tableInfo.id = "table";
-    // document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(tableInfo);
 })
 
 function btnBaby1_onclick(){
-    alert(this.id)
-}
-
-window.onload = function() {
-
-
-    // sensorDataTable
-    // document.getElementById("sensorDataTable").contentWindow.document.designMode = "on";
-    // document.getElementById("sensorDataTable").contentWindow.document.contentEditable = true;
-
-    // css/bootstrap-table.css
-}
-
-function ifrmLoaded() {
-    // code here
-
+    alert("切换传感器")
 }

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

@@ -9,33 +9,71 @@ $(()=>{
         showRefresh: false,
         columns: [{
             field: 'id',
-            title: '测试列一',
+            title: '序号',
             align: 'center',
 
         }, {
-            field: 'name',
-            title: '测试列二',
+            field: 'edgeId',
+            title: '边设备ID',
             align: 'center',
         }, {
-            field: 'price',
-            title: '测试列三',
+            field: 'sensorId',
+            title: '传感器ID',
             align: 'center',
         }, {
-            field: 'column1',
-            title: '测试列四',
+            field: 'sensorData',
+            title: '传感器数据',
             align: 'center',
         }, {
-            field: 'column2',
-            title: '测试列五',
+            field: 'rssi',
+            title: 'RSSI',
             align: 'center',
         }, {
-            field: 'column3',
-            title: '测试列六',
+            field: 'voltage',
+            title: '电压',
             align: 'center',
         }, {
-            field: 'column4',
-            title: '测试列七',
+            field: 'collectTime',
+            title: '时间',
+            align: 'center',
+        }, {
+            field: 'monitorLocation',
+            title: '监测位置',
             align: 'center',
         }]
     });
 })
+
+const onSearchByMonitorLocation = function (obj) {
+    setTimeout(function(){
+        var storeId = document.getElementById('table');
+        var rowsLength = storeId.rows.length;
+        var key = obj.value;
+        var searchCol = 7;
+        for(var i=1;i<rowsLength;i++){
+            var searchText = storeId.rows[i].cells[searchCol].innerHTML;
+            if(searchText.match(key)){
+                storeId.rows[i].style.display='';
+            }else{
+                storeId.rows[i].style.display='none';
+            }
+        }
+    },500);
+}
+
+const onSearchBySensorId = function (obj) {
+    setTimeout(function(){
+        var storeId = document.getElementById('table');
+        var rowsLength = storeId.rows.length;
+        var key = obj.value;
+        var searchCol = 2;
+        for(var i=1;i<rowsLength;i++){
+            var searchText = storeId.rows[i].cells[searchCol].innerHTML;
+            if(searchText.match(key)){
+                storeId.rows[i].style.display='';
+            }else{
+                storeId.rows[i].style.display='none';
+            }
+        }
+    },500);
+}

ruoyi-admin/src/main/resources/templates/iot-ui/sensorSummary.html

@@ -5,10 +5,14 @@
     <title>传感器汇总</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link th:href="@{favicon.ico}" rel="shortcut icon"/>
-    <link rel="stylesheet" th:href="@{/css/lot-ui/Iot-sensorSummaryStyle.css}"/>
     <!--<link rel="stylesheet" th:href="@{/css/lot-ui/bootstrap.min.css}"/>-->
     <link rel="stylesheet" th:href="@{/css/lot-ui/bootstrap.min.css}"/>
     <link rel="stylesheet" th:href="@{/css/lot-ui/bootstrap-table.css}"/>
+    <link rel="stylesheet" th:href="@{/css/lot-ui/Iot-sensorSummaryStyle.css}"/>
+
+    <style>
+
+    </style>
 </head>
 <body>
     <!--传感器类型-->
@@ -17,17 +21,17 @@
     </iframe>
 
     <!-- 搜索框 -->
-    <div class="sensorHistoryData searchBox">
+    <div class="sensorHistoryData searchBox"  style="height:6%;top: 3%">
         <form action="#" class="search-form">
             <div style="width: 90%;height: 100%;border: 0px solid red;">
-                <label class="search-label" style="padding-left: 0%;">监控单元:</label>
-                <input type="text" class="form-control" id="monitor-unit" name="monitor-unit" placeholder="请输入监控单元">
+                <label class="search-label" style="padding-left: 0%;">监测位置:</label>
+                <input type="text" class="form-control" onkeydown="onSearchByMonitorLocation(this)" id="monitorLocation" name="monitorLocation" placeholder="请输入监测位置">
 
-                <label class="search-label">传感器类型:</label>
-                <input type="text" class="form-control" id="sensor-type" name="sensor-type" placeholder="请输入传感器类型">
+                <label class="search-label">传感器编号:</label>
+                <input type="text" class="form-control" onkeydown="onSearchBySensorId(this)" id="sensorId" name="sensorId" placeholder="请输入传感器编号">
 
-                <label class="search-label">传感器名称:</label>
-                <input type="text" class="form-control" id="sensor-name" name="sensor-name" placeholder="请输入传感器名称">
+                <!--<label class="search-label">传感器名称:</label>
+                <input type="text" class="form-control" id="sensor-name" name="sensor-name" placeholder="请输入传感器名称">-->
             </div>
         </form>
     </div>
@@ -47,48 +51,6 @@
     <script th:src="@{/js/Iot-ui/sensorTableList.js}"></script>
     <script th:src="@{/js/Iot-ui/sensorSummary.js}"></script>
     <script th:inline="javascript">
-        // var datas = [[${@dict.getType('sys_normal_disable')}]];
-
-        //table
-        /*document.getElementById("sensorDataTable").contentWindow.document.designMode = "on";
-        document.getElementById("sensorDataTable").contentWindow.document.contentEditable = true;
-
-        var bootstrapTableLink = document.createElement("link");
-        bootstrapTableLink.href="../../css/lot-ui/bootstrap-table.css";
-        bootstrapTableLink.rel = "stylesheet";
-        bootstrapTableLink.type = "text/css";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(bootstrapTableLink);
-
-        var tableCssLink = document.createElement("link");
-        tableCssLink.href="../../css/lot-ui/bootstrap.min.css";
-        tableCssLink.rel = "stylesheet";
-        tableCssLink.type = "text/css";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(tableCssLink);
-
-        var jqueryScrip = document.createElement("script");
-        jqueryScrip.src = "../../js/jquery.min.js";
-        jqueryScrip.type = "text/javascript";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(jqueryScrip);
-
-        var bootstrapScrip = document.createElement("script");
-        bootstrapScrip.src = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js";
-        bootstrapScrip.type = "text/javascript";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(bootstrapScrip);
-
-        var bootstrapTableScript = document.createElement("script");
-        bootstrapTableScript.src = "../../js/Iot-ui/bootstrap-table.js";
-        bootstrapTableScript.type = "text/javascript";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(bootstrapTableScript);
-
-        var tableScrip = document.createElement("script");
-        tableScrip.src = "../../js/Iot-ui/sensorTableList.js";
-        tableScrip.type = "text/javascript";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(tableScrip);
-
-        var tableInfo = document.getElementById("sensorType").contentWindow.document.createElement("table");
-        tableInfo.id = "table";
-        document.getElementById("sensorDataTable").contentWindow.document.body.appendChild(tableInfo);
-*/
 
 
     </script>

ruoyi-admin/src/main/resources/templates/login.html

@@ -37,8 +37,8 @@
             <div class="loginForm">
                 <form id="signupForm" autocomplete="off">
                     <h1 class="no-margins" style="text-align:center;">用户登录</h1>
-                    <input type="text"  name="username" class="form-control uname"     placeholder="用户名" />
-                    <input type="password" name="password" class="form-control pword"     placeholder="密码"  />
+                    <input type="text"  name="username" class="form-control uname"  placeholder="用户名" />
+                    <input type="password" name="password" class="form-control pword"  placeholder="密码"  />
 					<div class="row m-t" th:if="${captchaEnabled==true}">
 						<div class="col-xs-6">
 						    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />

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

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="renderer" content="webkit">
-    <title>变压器</title>
+    <title>设备监控</title>
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link th:href="@{favicon.ico}" rel="shortcut icon"/>
@@ -13,6 +13,11 @@
     <link th:href="@{/css/fontawesome/all.min.css}" rel="stylesheet"/>
     <link rel="stylesheet" th:href="@{/css/main.css}"/>
     <link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/>
+    <link rel="stylesheet" th:href="@{/css/lot-ui/zTree.css}" />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
     <style>
         #company-name {
             position: absolute;
@@ -32,7 +37,7 @@
             font-size: 110%;
         }
 
-        #launched-count {
+        /*#launched-count {
             bottom: 15.8%;
             left: 21.2%;
         }
@@ -45,7 +50,7 @@
         #online-count {
             bottom: 15.8%;
             left: 38.3%;
-        }
+        }*/
 
         #sensor-list {
             position: absolute;
@@ -82,6 +87,8 @@
             overflow-y: scroll;
         }
 
+
+
         #sensor-list::-webkit-scrollbar {
             display: none;
         }
@@ -91,12 +98,15 @@
             left: 15.7%;
             top: 6%;
             width: 30%;
-            height: 67%;
+            height: 54%;
             padding: 4% 2% 0 2%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
 
         #transformer-model > img {
-            width: 100%;
+            width: 90%;
         }
 
         .sidebar-first-level {
@@ -178,15 +188,18 @@
         }
 
         #monitor-unit {
-            width: 6.5rem;
+            width: 10.5rem;
+            height: 2.5rem;
         }
 
         #sensor-type {
-            width: 6.5rem;
+            width: 10.5rem;
+            height: 2.5rem;
         }
 
         #sensor-name {
-            width: 6.8rem;
+            width: 10.5rem;
+            height: 2.5rem;
         }
 
         .search-btn, .reset-btn {
@@ -224,8 +237,8 @@
         .sensor-card {
             background: url("/img/sensor-block.png") no-repeat #00000000;
             background-size: 100% auto;
-            width: 18rem;
-            height: 9.6rem;
+            width: 27rem;
+            height: 14.6rem;
             border-radius: 0;
             border: none;
         }
@@ -298,6 +311,41 @@
             color: rgba(0, 249, 255, 0.75);
             width: 36%;
         }
+
+        #treeview-selectable ul li{
+            border:1px solid #094B7A;
+            border-left: 0px solid #094B7A;
+            height:50px;
+            display: flex;
+            align-items: center;
+            color:#B6C0CA;
+        }
+
+        .list-group-item{
+            background: transparent;
+        }
+
+        #treeview-selectable ul .node-treeview-selectable:not(.node-disabled):hover {
+            background-color: #083A61;
+            opacity:0.2;
+            color:white;
+            border:1px solid #094B7A;
+            border-left: 3px solid #094B7A;
+        }
+
+        .sensor-Text{
+            width: 29%;
+            height: 35%;
+            position: absolute;
+            bottom: 2%;
+            left: 16.2%;
+            border: 0px solid red;
+            color: #00f9ff;
+            padding: 1em 0.5em 1em 1.5em;
+            /*background: url(/img/sensor-block-active.png) no-repeat #00000000;*/
+            /*background-size: 100% 100%;*/
+        }
+
     </style>
 
     <script th:src="@{/js/jquery.min.js}"></script>
@@ -307,23 +355,35 @@
     <script th:src="@{/js/auto-update.js}"></script>
     <script th:src="@{/js/font-adjust.js}"></script>
     <th:block th:include="include :: echarts-js" />
+    <th:block th:include="include :: ztree-js" />
     <script th:src="@{/js/view-model.js}" src="../../static/js/view-model.js"></script>
 </head>
 <body class="body-transformer-detail1">
-    <div id="company-name">福建省电力公司</div>
+    <div id="company-name" style="left: 0.7%;width:12.6%;top: 1%;height:5.6%;">
+        <!--id="filterText"-->
+        <input type="text" class="form-control d-inline-block" id="input-select-node" name="filterText" placeholder="输入关键字进行过滤" style="color:white;font-size:0.5rem;border-color: #1facf4;background-color: transparent;height:100%">
+    </div>
 
     <div id="sensor-list">
-        <ul class="list-unstyled" id="sensor-list-inner"></ul>
+        <!--<ul class="list-unstyled" id="sensor-list-inner"></ul>-->
+
+        <div id="treeview-selectable"></div>
     </div>
 
-    <div id="transformer-name">变压器1</div>
+    <div id="transformer-name">监控单元</div>
     <div id="transformer-model">
-        <img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="变压器">
+        <img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="监控单元">
+    </div>
+
+    <div class="sensor-Text">
+        <p>设备编号：<span>10kv 主变压器001</span></p>
+        <p>设备型号：<span>SC(B)10型干式电力变压器</span></p>
+        <p>启用时间：<span>2020年1月20日</span></p>
+        <p>所属变电站：<span>新疆某某变电站</span></p>
+        <p>测试参数-1：<span>xxxxx</span></p>
+        <p>测试参数-2：<span>xxxxx</span></p>
     </div>
 
-    <div class="ball-text" id="launched-count">5</div>
-    <div class="ball-text" id="error-alert">5</div>
-    <div class="ball-text" id="online-count">5</div>
 
     <nav class="nav search-bar d-inline-block" id="main-search-bar">
         <form action="#" class="search-form-nav">
@@ -335,13 +395,81 @@
             <input type="text" class="form-control d-inline-block" id="sensor-name" name="sensor-name" placeholder="请输入传感器名称">
 
             <button class="btn btn-primary search-btn">搜索</button>
-            <button type="reset" class="btn btn-outline-primary reset-btn">重置</button>
+<!--            <button type="reset" class="btn btn-outline-primary reset-btn">重置</button>-->
         </form>
     </nav>
     <div id="sensor-card-group">
     </div>
 </body>
     <script th:inline="javascript">
+
+        /*let info = [
+            {
+                name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器监控单元`,
+                id:'byq',
+                pid:'',
+                items: [
+                    {
+                        id:'1#byq',
+                        pid:'byq',
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#变压器`,
+                    },
+                    {
+                        id:'2#byq',
+                        pid:'byq',
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>2#变压器`,
+                    },
+                    {
+                        id:'3#byq',
+                        pid:'byq',
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>3#变压器`,
+                    },
+                    {
+                        id:'4#byq',
+                        pid:'byq',
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>4#变压器`,
+                    },
+                ],
+            },
+            {
+                name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>隔离开关监控单元`,
+                items: [
+                    {
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#隔离开关`,
+                    },
+                    {
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>2#隔离开关`,
+                    },
+                    {
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>3#隔离开关`,
+                    },
+                    {
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>4#隔离开关`,
+                    },
+                ],
+            },
+            {
+                name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>电流互感器监控单元`,
+                items: [
+                    {
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#电流互感器`,
+                    }
+                ],
+            },
+            {
+                name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>电压互感器监控单元`,
+                items: [
+                    {
+                        name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#电压互感器`,
+                    }
+                ],
+            },
+        ];
+
+        $(()=>{
+            sidebarList.renderSideBarList(document.getElementById("sensor-list-inner"), info)
+        })
+
         const sidebarList = {
             parent: null,
             switchTo(firstLevelIndex, secondLevelIndex) {
@@ -365,10 +493,10 @@
                 </button>
 
                 <div class="collapse" id="transformer-collapse-${firstLevel[0]}">
-                    <ul class="list-unstyled pb-1">`
+                    <ul class="list-unstyled pb-1" id='${firstLevel[1].id}'>`
 
                     for (let secondLevel of Object.entries(firstLevel[1].items)) {
-                        html += `<li><a href="javascript:sidebarList.switchTo(${firstLevel[0]}, ${secondLevel[0]})" class="btn sidebar-second-level">${secondLevel[1].name}</a></li>`
+                        html += `<li><a href="javascript:sidebarList.switchTo(${firstLevel[0]}, ${secondLevel[0]})" id='${secondLevel[1].id}' class="btn sidebar-second-level">${secondLevel[1].name}</a></li>`
                     }
 
                     html += `</ul>
@@ -377,210 +505,7 @@
                     parent.innerHTML += html
                 }
             }
-        }
-
-        $(() => {
-            sidebarList.renderSideBarList(document.getElementById("sensor-list-inner"), [
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器1`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器2`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器3`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器4`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器5`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器6`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器7`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器8`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器9`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器10`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器11`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-                {
-                    name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器12`,
-                    items: [
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点1`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点2`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点3`,
-                        },
-                        {
-                            name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>测控点4`,
-                        },
-                    ],
-                },
-            ])
-        })
+        }*/
 
 
         class SensorCardsViewModel extends AbstractViewModel {
@@ -643,8 +568,6 @@
                 new SensorCardsViewModel("sensor-card-4", document.getElementById("sensor-card-group")),
                 new SensorCardsViewModel("sensor-card-5", document.getElementById("sensor-card-group")),
             )
-            console.log(sensorCollection.viewModels)
-
 
             for (let i = 0; i < 5; i++) {
                 const vm = sensorCollection.get(i)
@@ -653,10 +576,90 @@
                 vm.set("battery-icon", `<i class="fa-solid fa-battery-full battery-icon"></i>`)
                 vm.set("status", "启用")
                 vm.set("conn-status", "在线")
-                vm.set("datetime", "2021.01.01 10:00:00")
+                vm.set("datetime", "10:00:00")
             }
 
             sensorCollection.refresh()
         })
     </script>
+
+<!-- Script -->
+<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
+<script type="text/javascript">
+
+    $(function() {
+
+        var defaultData = [
+            {
+                text: '变压器单元',
+                href: '#parent1',
+                tags: ['2'],
+                nodes: [
+                    {
+                        text: 'Child 1',
+                        href: '#child1',
+                        tags: ['0'],
+                    },
+                    {
+                        text: 'Child 2',
+                        href: '#child2',
+                        tags: ['0']
+                    }
+                ]
+            },
+            {
+                text: '隔离开关单元',
+                href: '#parent2',
+                tags: ['0'],
+                nodes: []
+            },
+            {
+                text: '电流互感器单元',
+                href: '#parent3',
+                tags: ['0'],
+                nodes: []
+            },
+            {
+                text: '电压互感器单元',
+                href: '#parent4',
+                tags: ['0'],
+                nodes: []
+            },
+            {
+                text: '电容互感器单元',
+                href: '#parent5'  ,
+                tags: ['0'],
+                nodes: []
+            }
+        ];
+
+        var initSelectableTree = function() {
+            return $('#treeview-selectable').treeview({
+                data: defaultData,
+                multiSelect: $('#chk-select-multi').is(':checked'),
+                onNodeSelected: function(event, node) {
+                    $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
+                },
+                onNodeUnselected: function (event, node) {
+                    $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
+                }
+            });
+        };
+        var $selectableTree = initSelectableTree();
+
+        var findSelectableNodes = function() {
+            return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]);
+        };
+        var selectableNodes = findSelectableNodes();
+
+        $('#input-select-node').on('keyup', function (e) {
+            selectableNodes = findSelectableNodes();
+            $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
+        });
+
+    });
+</script>
+
 </html>