MQTT服务器基础信息、Topic配置 代码提交

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/controller/GatewayMqttInfoController.java

@@ -0,0 +1,64 @@
+package com.ruoyi.gateway.internet.controller;
+
+import com.ruoyi.gateway.internet.domain.GatewayMqttTopic;
+import com.ruoyi.gateway.internet.service.IGatewayMqttTopicService;
+import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.ModelMap;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.gateway.internet.domain.GatewayMqttInfo;
+import com.ruoyi.gateway.internet.service.IGatewayMqttInfoService;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+
+/**
+ * mqtt基础信息Controller
+ *
+ * @author ruoyi
+ * @date 2024-07-31
+ */
+@Controller
+@RequestMapping("/internet/mqttInfo")
+public class GatewayMqttInfoController extends BaseController {
+    private String prefix = "internet/mqtt";
+
+    @Autowired
+    private IGatewayMqttInfoService gatewayMqttInfoService;
+
+    @Autowired
+    private IGatewayMqttTopicService gatewayMqttTopicService;
+
+    @RequiresPermissions("internet:mqttInfo:view")
+    @GetMapping()
+    public String mqttInfo(ModelMap mmap) {
+        GatewayMqttInfo gatewayMqttInfo = gatewayMqttInfoService.selectGatewayMqttInfo();
+        mmap.put("gatewayMqttInfo", gatewayMqttInfo);
+        GatewayMqttTopic gatewayMqttTopic = gatewayMqttTopicService.selectGatewayMqttTopic();
+        mmap.put("gatewayMqttTopic", gatewayMqttTopic);
+        return prefix + "/mqttInfo";
+    }
+
+    @RequiresPermissions("internet:mqttInfo:view")
+    @GetMapping("/detail")
+    @ResponseBody
+    public GatewayMqttInfo detail() {
+        return gatewayMqttInfoService.selectGatewayMqttInfo();
+    }
+
+    /**
+     * 修改保存mqtt基础信息
+     */
+    @RequiresPermissions("internet:mqttInfo:edit")
+    @Log(title = "mqtt基础信息", businessType = BusinessType.UPDATE)
+    @PostMapping("/edit")
+    @ResponseBody
+    public AjaxResult editSave(GatewayMqttInfo gatewayMqttInfo) {
+        return toAjax(gatewayMqttInfoService.updateGatewayMqttInfo(gatewayMqttInfo));
+    }
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/controller/GatewayMqttTopicController.java

@@ -0,0 +1,64 @@
+package com.ruoyi.gateway.internet.controller;
+
+import java.util.List;
+import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.ModelMap;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.gateway.internet.domain.GatewayMqttTopic;
+import com.ruoyi.gateway.internet.service.IGatewayMqttTopicService;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.utils.poi.ExcelUtil;
+import com.ruoyi.common.core.page.TableDataInfo;
+
+/**
+ * mqtt主题Controller
+ * 
+ * @author ruoyi
+ * @date 2024-08-01
+ */
+@Controller
+@RequestMapping("/internet/topic")
+public class GatewayMqttTopicController extends BaseController
+{
+    private String prefix = "internet/topic";
+
+    @Autowired
+    private IGatewayMqttTopicService gatewayMqttTopicService;
+
+    @RequiresPermissions("internet:mqttInfo:view")
+    @GetMapping()
+    public String topic(ModelMap mmap)
+    {
+        GatewayMqttTopic gatewayMqttTopic = gatewayMqttTopicService.selectGatewayMqttTopic();
+        mmap.put("gatewayMqttTopic", gatewayMqttTopic);
+        return prefix + "/topic";
+    }
+
+    @RequiresPermissions("internet:mqttInfo:view")
+    @GetMapping("/detail")
+    @ResponseBody
+    public GatewayMqttTopic detail() {
+        return gatewayMqttTopicService.selectGatewayMqttTopic();
+    }
+
+    /**
+     * 修改保存mqtt主题
+     */
+    @RequiresPermissions("internet:topic:edit")
+    @Log(title = "mqtt主题", businessType = BusinessType.UPDATE)
+    @PostMapping("/edit")
+    @ResponseBody
+    public AjaxResult editSave(GatewayMqttTopic gatewayMqttTopic)
+    {
+        return toAjax(gatewayMqttTopicService.updateGatewayMqttTopic(gatewayMqttTopic));
+    }
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/domain/GatewayMqttInfo.java

@@ -0,0 +1,33 @@
+package com.ruoyi.gateway.internet.domain;
+
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+import com.ruoyi.common.annotation.Excel;
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * mqtt基础信息对象 gateway_mqtt_info
+ * 
+ * @author ruoyi
+ * @date 2024-07-31
+ */
+@EqualsAndHashCode(callSuper = true)
+@Data
+public class GatewayMqttInfo extends BaseEntity
+{
+    private static final long serialVersionUID = 1L;
+
+    /** id */
+    private Long id;
+
+    /** IP地址 */
+    @Excel(name = "MQTT服务器地址")
+    private String address;
+
+    /** 端口 */
+    @Excel(name = "MQTT服务器接口")
+    private String port;
+
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/domain/GatewayMqttTopic.java

@@ -0,0 +1,107 @@
+package com.ruoyi.gateway.internet.domain;
+
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+import com.ruoyi.common.annotation.Excel;
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * mqtt主题对象 gateway_mqtt_topic
+ * 
+ * @author ruoyi
+ * @date 2024-08-01
+ */
+public class GatewayMqttTopic extends BaseEntity
+{
+    private static final long serialVersionUID = 1L;
+
+    /** id */
+    private Long id;
+
+    /** Join Topic */
+    @Excel(name = "Join Topic")
+    private String joinTopic;
+
+    /** Uplink Topic */
+    @Excel(name = "Uplink Topic")
+    private String uplinkTopic;
+
+    /** Downlink Topic */
+    @Excel(name = "Downlink Topic")
+    private String downlinkTopic;
+
+    /** Ack Topic */
+    @Excel(name = "Ack Topic")
+    private String ackTopic;
+
+    /** Status Topic */
+    @Excel(name = "Status Topic")
+    private String statusTopic;
+
+    public void setId(Long id) 
+    {
+        this.id = id;
+    }
+
+    public Long getId() 
+    {
+        return id;
+    }
+    public void setJoinTopic(String joinTopic) 
+    {
+        this.joinTopic = joinTopic;
+    }
+
+    public String getJoinTopic() 
+    {
+        return joinTopic;
+    }
+    public void setUplinkTopic(String uplinkTopic) 
+    {
+        this.uplinkTopic = uplinkTopic;
+    }
+
+    public String getUplinkTopic() 
+    {
+        return uplinkTopic;
+    }
+    public void setDownlinkTopic(String downlinkTopic) 
+    {
+        this.downlinkTopic = downlinkTopic;
+    }
+
+    public String getDownlinkTopic() 
+    {
+        return downlinkTopic;
+    }
+    public void setAckTopic(String ackTopic) 
+    {
+        this.ackTopic = ackTopic;
+    }
+
+    public String getAckTopic() 
+    {
+        return ackTopic;
+    }
+    public void setStatusTopic(String statusTopic) 
+    {
+        this.statusTopic = statusTopic;
+    }
+
+    public String getStatusTopic() 
+    {
+        return statusTopic;
+    }
+
+    @Override
+    public String toString() {
+        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
+            .append("id", getId())
+            .append("joinTopic", getJoinTopic())
+            .append("uplinkTopic", getUplinkTopic())
+            .append("downlinkTopic", getDownlinkTopic())
+            .append("ackTopic", getAckTopic())
+            .append("statusTopic", getStatusTopic())
+            .toString();
+    }
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/mapper/GatewayMqttInfoMapper.java

@@ -0,0 +1,28 @@
+package com.ruoyi.gateway.internet.mapper;
+
+import com.ruoyi.gateway.internet.domain.GatewayMqttInfo;
+
+/**
+ * mqtt基础信息Mapper接口
+ * 
+ * @author ruoyi
+ * @date 2024-07-31
+ */
+public interface GatewayMqttInfoMapper 
+{
+    /**
+     * 查询mqtt基础信息
+     *
+     * @return mqtt基础信息
+     */
+    public GatewayMqttInfo selectGatewayMqttInfo();
+
+    /**
+     * 修改mqtt基础信息
+     * 
+     * @param gatewayMqttInfo mqtt基础信息
+     * @return 结果
+     */
+    public int updateGatewayMqttInfo(GatewayMqttInfo gatewayMqttInfo);
+
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/mapper/GatewayMqttTopicMapper.java

@@ -0,0 +1,29 @@
+package com.ruoyi.gateway.internet.mapper;
+
+import java.util.List;
+import com.ruoyi.gateway.internet.domain.GatewayMqttTopic;
+
+/**
+ * mqtt主题Mapper接口
+ * 
+ * @author ruoyi
+ * @date 2024-08-01
+ */
+public interface GatewayMqttTopicMapper 
+{
+    /**
+     * 查询mqtt主题
+     *
+     * @return mqtt主题
+     */
+    GatewayMqttTopic selectGatewayMqttTopic();
+
+    /**
+     * 修改mqtt主题
+     * 
+     * @param gatewayMqttTopic mqtt主题
+     * @return 结果
+     */
+    int updateGatewayMqttTopic(GatewayMqttTopic gatewayMqttTopic);
+
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/service/IGatewayMqttInfoService.java

@@ -0,0 +1,27 @@
+package com.ruoyi.gateway.internet.service;
+
+import com.ruoyi.gateway.internet.domain.GatewayMqttInfo;
+
+/**
+ * mqtt基础信息Service接口
+ *
+ * @author ruoyi
+ * @date 2024-07-31
+ */
+public interface IGatewayMqttInfoService {
+    /**
+     * 查询mqtt基础信息
+     *
+     * @return mqtt基础信息
+     */
+    public GatewayMqttInfo selectGatewayMqttInfo();
+
+    /**
+     * 修改mqtt基础信息
+     *
+     * @param gatewayMqttInfo mqtt基础信息
+     * @return 结果
+     */
+    public int updateGatewayMqttInfo(GatewayMqttInfo gatewayMqttInfo);
+
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/service/IGatewayMqttTopicService.java

@@ -0,0 +1,29 @@
+package com.ruoyi.gateway.internet.service;
+
+import java.util.List;
+import com.ruoyi.gateway.internet.domain.GatewayMqttTopic;
+
+/**
+ * mqtt主题Service接口
+ * 
+ * @author ruoyi
+ * @date 2024-08-01
+ */
+public interface IGatewayMqttTopicService 
+{
+    /**
+     * 查询mqtt主题
+     *
+     * @return mqtt主题
+     */
+    GatewayMqttTopic selectGatewayMqttTopic();
+
+    /**
+     * 修改mqtt主题
+     * 
+     * @param gatewayMqttTopic mqtt主题
+     * @return 结果
+     */
+    int updateGatewayMqttTopic(GatewayMqttTopic gatewayMqttTopic);
+
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/service/impl/GatewayMqttInfoServiceImpl.java

@@ -0,0 +1,43 @@
+package com.ruoyi.gateway.internet.service.impl;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.ruoyi.gateway.internet.mapper.GatewayMqttInfoMapper;
+import com.ruoyi.gateway.internet.domain.GatewayMqttInfo;
+import com.ruoyi.gateway.internet.service.IGatewayMqttInfoService;
+/**
+ * mqtt基础信息Service业务层处理
+ * 
+ * @author ruoyi
+ * @date 2024-07-31
+ */
+@Service
+public class GatewayMqttInfoServiceImpl implements IGatewayMqttInfoService 
+{
+    @Autowired
+    private GatewayMqttInfoMapper gatewayMqttInfoMapper;
+
+    /**
+     * 查询mqtt基础信息
+     *
+     * @return mqtt基础信息
+     */
+    @Override
+    public GatewayMqttInfo selectGatewayMqttInfo()
+    {
+        return gatewayMqttInfoMapper.selectGatewayMqttInfo();
+    }
+
+    /**
+     * 修改mqtt基础信息
+     * 
+     * @param gatewayMqttInfo mqtt基础信息
+     * @return 结果
+     */
+    @Override
+    public int updateGatewayMqttInfo(GatewayMqttInfo gatewayMqttInfo)
+    {
+        return gatewayMqttInfoMapper.updateGatewayMqttInfo(gatewayMqttInfo);
+    }
+
+}

ruoyi-gateway/src/main/java/com/ruoyi/gateway/internet/service/impl/GatewayMqttTopicServiceImpl.java

@@ -0,0 +1,45 @@
+package com.ruoyi.gateway.internet.service.impl;
+
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.ruoyi.gateway.internet.mapper.GatewayMqttTopicMapper;
+import com.ruoyi.gateway.internet.domain.GatewayMqttTopic;
+import com.ruoyi.gateway.internet.service.IGatewayMqttTopicService;
+import com.ruoyi.common.core.text.Convert;
+
+/**
+ * mqtt主题Service业务层处理
+ * 
+ * @author ruoyi
+ * @date 2024-08-01
+ */
+@Service("mqttTopicService")
+public class GatewayMqttTopicServiceImpl implements IGatewayMqttTopicService 
+{
+    @Autowired
+    private GatewayMqttTopicMapper gatewayMqttTopicMapper;
+
+    /**
+     * 查询mqtt主题
+     *
+     * @return mqtt主题
+     */
+    @Override
+    public GatewayMqttTopic selectGatewayMqttTopic()
+    {
+        return gatewayMqttTopicMapper.selectGatewayMqttTopic();
+    }
+
+    /**
+     * 修改mqtt主题
+     * 
+     * @param gatewayMqttTopic mqtt主题
+     * @return 结果
+     */
+    @Override
+    public int updateGatewayMqttTopic(GatewayMqttTopic gatewayMqttTopic)
+    {
+        return gatewayMqttTopicMapper.updateGatewayMqttTopic(gatewayMqttTopic);
+    }
+}

ruoyi-gateway/src/main/resources/mapper/internet/GatewayMqttInfoMapper.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.gateway.internet.mapper.GatewayMqttInfoMapper">
+    
+    <resultMap type="GatewayMqttInfo" id="GatewayMqttInfoResult">
+        <result property="id"    column="id"    />
+        <result property="address"    column="address"    />
+        <result property="port"    column="port"    />
+    </resultMap>
+
+    <sql id="selectGatewayMqttInfoVo">
+        select id, address, port from gateway_mqtt_info
+    </sql>
+    
+    <select id="selectGatewayMqttInfo" parameterType="Long" resultMap="GatewayMqttInfoResult">
+        <include refid="selectGatewayMqttInfoVo"/>
+        limit 1
+    </select>
+
+    <update id="updateGatewayMqttInfo" parameterType="GatewayMqttInfo">
+        update gateway_mqtt_info
+        <trim prefix="SET" suffixOverrides=",">
+            address = #{address},
+            port = #{port},
+        </trim>
+    </update>
+
+</mapper>

ruoyi-gateway/src/main/resources/mapper/internet/GatewayMqttTopicMapper.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.gateway.internet.mapper.GatewayMqttTopicMapper">
+    
+    <resultMap type="GatewayMqttTopic" id="GatewayMqttTopicResult">
+        <result property="id"    column="id"    />
+        <result property="joinTopic"    column="join_topic"    />
+        <result property="uplinkTopic"    column="uplink_topic"    />
+        <result property="downlinkTopic"    column="downlink_topic"    />
+        <result property="ackTopic"    column="ack_topic"    />
+        <result property="statusTopic"    column="status_topic"    />
+    </resultMap>
+
+    <sql id="selectGatewayMqttTopicVo">
+        select id, join_topic, uplink_topic, downlink_topic, ack_topic, status_topic from gateway_mqtt_topic
+    </sql>
+
+    
+    <select id="selectGatewayMqttTopic" resultMap="GatewayMqttTopicResult">
+        <include refid="selectGatewayMqttTopicVo"/>
+        limit 1
+    </select>
+
+    <update id="updateGatewayMqttTopic" parameterType="GatewayMqttTopic">
+        update gateway_mqtt_topic
+        <trim prefix="SET" suffixOverrides=",">
+            join_topic = #{joinTopic},
+            uplink_topic = #{uplinkTopic},
+            downlink_topic = #{downlinkTopic},
+            ack_topic = #{ackTopic},
+            status_topic = #{statusTopic},
+        </trim>
+    </update>
+
+</mapper>

ruoyi-gateway/src/main/resources/templates/internet/mqtt/mqttInfo.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+    <th:block th:include="include :: header('修改Bridge')" />
+</head>
+<body class="white-bg">
+<div style="border-bottom: darkgray 1px solid;font-size: 0;margin: 20px 50px 0px;">
+    <div id="tab1" class="tabs" style="width: 100px;">基本设置</div>
+    <div id="tab2" class="tabs" style="width: 200px;">MQTT Topic Template Setup</div>
+</div>
+<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="margin-left: 300px;margin-right: 300px;">
+    <div id="tabDiv1" style="display:block;">
+        <form class="form-horizontal m" id="mqttInfoForm" th:object="${gatewayMqttInfo}">
+            <div class="form-group">
+                <label class="col-sm-3 control-label">MQTT服务器地址：</label>
+                <div class="col-sm-8">
+                    <input id="address" name="address" th:field="*{address}" class="form-control" type="text">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="col-sm-3 control-label">MQTT服务器接口：</label>
+                <div class="col-sm-8">
+                    <input id="port" name="port" th:field="*{port}" class="form-control" type="text">
+                </div>
+            </div>
+            <div class="layui-layer-btn layui-layer-btn-">
+                <a onclick="submitMqttInfoHandler()" class="layui-layer-btn0">确定</a>
+            </div>
+        </form>
+    </div>
+    <div id="tabDiv2" style="display:block;">
+        <form class="form-horizontal m" id="mqttTopicForm" th:object="${gatewayMqttTopic}">
+            <input name="id" th:field="*{id}" type="hidden">
+            <div class="form-group">
+                <label class="col-sm-3 control-label">Join Topic：</label>
+                <div class="col-sm-8">
+                    <input id="joinTopic" name="joinTopic" th:field="*{joinTopic}" class="form-control" type="text" placeholder="application/{{application_ID}}/device/{{device_EUI}}/join">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="col-sm-3 control-label">Uplink Topic：</label>
+                <div class="col-sm-8">
+                    <input id="uplinkTopic" name="uplinkTopic" th:field="*{uplinkTopic}" class="form-control" type="text" placeholder="application/{{application_ID}}/device/{{device_EUI}}/rx">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="col-sm-3 control-label">Downlink Topic：</label>
+                <div class="col-sm-8">
+                    <input id="downlinkTopic" name="downlinkTopic" th:field="*{downlinkTopic}" class="form-control" type="text" placeholder="application/{{application_ID}}/device/{{device_EUI}}/tx">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="col-sm-3 control-label">Ack Topic：</label>
+                <div class="col-sm-8">
+                    <input id="ackTopic" name="ackTopic" th:field="*{ackTopic}" class="form-control" type="text" placeholder="application/{{application_ID}}/device/{{device_EUI}}/ack">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="col-sm-3 control-label">Status Topic：</label>
+                <div class="col-sm-8">
+                    <input id="statusTopic" name="statusTopic" th:field="*{statusTopic}" class="form-control" type="text" placeholder="application/{{application_ID}}/device/{{device_EUI}}/status">
+                </div>
+            </div>
+            <div class="layui-layer-btn layui-layer-btn-">
+                <a onclick="submitMqttTopicHandler()" class="layui-layer-btn0">确定</a>
+            </div>
+        </form>
+    </div>
+</div>
+<th:block th:include="include :: footer" />
+<script th:inline="javascript">
+    var mqttInfoPrefix = ctx + "internet/mqttInfo";
+    var mqttTopicPrefix = ctx + "internet/topic";
+    $("#mqttInfoForm").validate({
+        focusCleanup: true
+    });
+
+    function submitMqttInfoHandler() {
+        if ($.validate.form()) {
+            $.operate.save(mqttInfoPrefix + "/edit", $('#mqttInfoForm').serialize());
+        }
+    }
+
+    function submitMqttTopicHandler() {
+        if ($.validate.form()) {
+            $.operate.save(mqttTopicPrefix + "/edit", $('#mqttTopicForm').serialize());
+        }
+    }
+
+    $(document).ready(function (){
+        document.getElementById('tab1').style.background = 'darkgray';
+        cleanDiv();
+        document.getElementById('tabDiv1').style.display = 'block';
+    })
+
+    // 点击tab1
+    document.getElementById('tab1').addEventListener('click', function() {
+        if (document.getElementById('tab1').style.background !== 'darkgray'){
+            document.getElementById('tab1').style.background = 'darkgray';
+            document.getElementById('tab2').style.background = 'white';
+            document.getElementById('tabDiv1').style.display = 'block';
+            document.getElementById('tabDiv2').style.display = 'none';
+            $.ajax({
+                type:"GET",
+                url: mqttInfoPrefix + "/detail",
+                success: function (data){
+                    $("#address").val(data.address);
+                    $("#port").val(data.port);
+                }
+            })
+        }
+    })
+
+    // 点击tab2
+    document.getElementById('tab2').addEventListener('click', function() {
+        if (document.getElementById('tab2').style.background !== 'darkgray'){
+            document.getElementById('tab1').style.background = 'white';
+            document.getElementById('tab2').style.background = 'darkgray';
+            document.getElementById('tabDiv1').style.display = 'none';
+            document.getElementById('tabDiv2').style.display = 'block';
+            $.ajax({
+                type:"GET",
+                url: mqttTopicPrefix + "/detail",
+                success: function (data){
+                    $("#joinTopic").val(data.joinTopic);
+                    $("#uplinkTopic").val(data.uplinkTopic);
+                    $("#downlinkTopic").val(data.downlinkTopic);
+                    $("#ackTopic").val(data.ackTopic);
+                    $("#statusTopic").val(data.statusTopic);
+                }
+            })
+        }
+    })
+
+    function cleanDiv(){
+        document.getElementById('tabDiv1').style.display = 'none';
+        document.getElementById('tabDiv2').style.display = 'none';
+    }
+
+</script>
+</body>
+<style>
+    .tabs{
+        border: darkgray 1px solid;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        user-select: none;
+        display: inline-block;
+        font-size: 14px;
+        background: white;
+    }
+    .tabs:hover,
+    .tabs:focus,
+    .tabs:active{
+        background: darkgray !important;
+    }
+</style>
+</html>