增加客户端查看详情和断开连接;规则引擎的增删改查;资源的增删改查

springboot/wumei-admin/src/main/resources/application-druid.yml

@@ -8,7 +8,7 @@ spring:
             master:
                 url: jdbc:mysql://localhost/wumei-smart?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                 username: root
-                password: wumei-smart
+                password: root
 #                password: 123456
             # 从库数据源
             slave:

springboot/wumei-admin/src/main/resources/application.yml

@@ -9,7 +9,7 @@ ruoyi:
   # 实例演示开关
   demoEnabled: true
   # 文件路径 示例（ Windows配置D:/wumei-smart/uploadPath，Linux配置 /var/wumei-smart/java/uploadPath）
-  profile: /var/wumei-smart/java/uploadPath
+  profile: D:/wumei-smart/uploadPath
   # 获取ip地址开关
   addressEnabled: true
   # 验证码类型 math 数组计算 char 字符验证

vue/package.json

@@ -39,6 +39,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.6",
+    "codemirror": "^5.65.2",
     "core-js": "3.19.1",
     "echarts": "^5.3.1",
     "element-ui": "2.15.6",
@@ -48,13 +49,19 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
+    "jshint": "^2.13.4",
+    "jsonlint": "^1.6.3",
+    "less-loader": "^10.2.0",
     "mqtt": "^4.3.3",
     "nprogress": "0.2.0",
     "quill": "^1.3.7",
     "screenfull": "5.0.2",
+    "script-loader": "^0.7.2",
     "sortablejs": "1.10.2",
+    "sql-formatter": "^4.0.2",
     "vue": "2.6.12",
     "vue-clipboard2": "^0.3.3",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-json-viewer": "^2.2.21",

vue/src/api/iot/emqx.js

@@ -122,3 +122,257 @@ export function getMqttStats() {
     },
   })
 }
+
+//断开客户端连接
+export function eliminateClient(clientId){
+  var url = "/api/v4/clients/"+clientId;
+  return axios({
+    method: 'delete',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+//查看客户端详情
+export function getClientDetails(clientId){
+  var url = "/api/v4/clients/"+clientId;
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+//查看集群下指定客户端的订阅信息
+export function getSubscriptionsByClientId(clientId){
+  var url = "/api/v4/subscriptions/"+clientId;
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+//取消该客户端订阅
+export function unsubscribe(query){
+  var url = "/api/v4/mqtt/unsubscribe";
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+    params: query
+  })
+}
+
+//添加该客户端订阅
+export function addSubscribe(query){
+  var url = "/api/v4/mqtt/subscribe";
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+    params: query
+  })
+}
+
+//获取所有规则引擎的动作
+export function getRules(ruleid){
+  let url = "";
+  if(typeof(ruleid) == 'undefined' || ruleid == '' ||ruleid == null){
+    url = "/api/v4/rules";
+  }else{
+    url = "/api/v4/rules/"+ruleid;
+  }
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+
+//删除规则
+export function deleteRule(ruleid){
+  var url = "/api/v4/rules/"+ruleid;
+  return axios({
+    method: 'delete',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+
+//获取资源列表或详情
+export function getResources(resourceid){
+  let url = "";
+  if(typeof(resourceid) == 'undefined' || resourceid == '' ||resourceid == null){
+    url = "/api/v4/resources";
+  }else{
+    url = "/api/v4/resources/"+resourceid;
+  }
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+//获取资源状态
+export function getResourcesStatus(resourceid){
+  let url =  "/api/v4/resources/"+resourceid;
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+//连接资源
+export function getConnectResource(resourceid){
+  let url =  "/api/v4/resources/"+resourceid;
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+//删除资源
+export function deleteResource(resourceid){
+  let url =  "/api/v4/resources/"+resourceid;
+  return axios({
+    method: 'delete',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+
+//获取资源类型
+export function getResourcesType(){
+  let url =  "/api/v4/resource_types";
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+
+//资源测试连接
+export function getResourcesConnect(query){
+  let url =  "/api/v4/resources?test=true";
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+    data: query
+  })
+}
+//新增资源
+export function saveResources(query){
+  let url =  "/api/v4/resources";
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+    data: query
+  })
+}
+
+
+
+//获取规则消息类型
+export function getRulesEvent(){
+  let url =  "/api/v4/rule_events";
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+//获取响应动作类型
+export function getActionsEvent(){
+  let url =  "/api/v4/actions";
+  return axios({
+    method: 'get',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+  })
+}
+
+
+//新增规则引擎
+export function saveRule(query){
+  let url =  "/api/v4/rules";
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+    data: query
+  })
+}
+//测试规则引擎
+export function testConnectRule(query){
+  let url =  "/api/v4/rules?test=true";
+  return axios({
+    method: 'post',
+    url: url,
+    auth: {
+      username: username,
+      password: password
+    },
+    data: query
+  })
+}

vue/src/components/Codemirror/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="json-editor">
+    <textarea ref="textarea" />
+  </div>
+</template>
+
+<script>
+// import sqlFormatter from "sql-formatter";
+import CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/sql/sql.js";
+// 替换主题这里需修改名称
+import "codemirror/theme/idea.css";
+// 支持代码自动补全
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/addon/hint/anyword-hint.js";
+
+// JSON代码高亮需要由JavaScript插件支持
+import "codemirror/mode/javascript/javascript.js";
+
+// 支持各种代码折叠
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+
+// 支持括号自动匹配
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/edit/closebrackets.js";
+
+// 行注释
+import "codemirror/addon/comment/comment.js";
+// JSON错误检查
+import "codemirror/addon/lint/lint.css";
+import "codemirror/addon/lint/lint.js";
+
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    height: {
+      type: String,
+      required: true,
+    },
+    myMode: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      editor: false,
+    };
+  },
+  watch: {
+    value(value) {
+      const editorValue = this.editor.getValue();
+      if (value !== editorValue) {
+        this.editor.setValue(this.value);
+      }
+    },
+    height(value) {
+      this.editor.setSize("auto", this.height);
+    },
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: this.myMode, //语言
+      smartIndent: true, // 是否智能缩进
+      styleActiveLine: true, // 当前行高亮
+      lineNumbers: true, // 是否显示行数
+      indentUnit: 2, // 缩进单位，默认2
+      gutters: [
+        "CodeMirror-linenumbers",
+        "CodeMirror-foldgutter",
+        "CodeMirror-lint-markers",      // CodeMirror-lint-markers是实现语法报错功能
+      ],
+      lint: true,
+      //lineWrapping: true, // 自动换行
+      matchBrackets: true, // 括号匹配显示
+      autoCloseBrackets: true, // 输入和退格时成对
+      readOnly: false, // 只读
+      foldGutter: true,
+      autoRefresh: true
+    });
+    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
+    this.editor.on("inputRead", () => {
+      this.editor.showHint();
+    });
+    this.editor.setSize("auto", this.height);
+    this.editor.setValue(this.value);
+  },
+  methods: {
+    getValue() {
+      return this.editor.getValue();
+    },
+    // formatSql() {
+    //   /*（sql编辑器内容绑定content参数） 将sql内容进行格式后放入编辑器中*/
+    //   this.content = sqlFormatter.format(this.content);
+    // },
+  },
+};
+</script>
+
+<style scoped>
+.json-editor {
+  height: 100%;
+}
+
+.json-editor >>> .CodeMirror {
+  font-size: 14px;
+  /* overflow-y:auto; */
+  font-weight: normal;
+}
+
+.json-editor >>> .CodeMirror-scroll {
+}
+
+.json-editor >>> .cm-s-rubyblue span.cm-string {
+  color: #f08047;
+}
+</style>

vue/src/main.js

@@ -40,6 +40,10 @@ import echarts from 'echarts'
 // 一键复制粘贴板组件
 import VueClipboard from 'vue-clipboard2'
 
+
+
+
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -65,6 +69,7 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 DictData.install()
 
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

vue/src/views/iot/emqx/client.vue

@@ -1,136 +1,552 @@
 <template>
-<div style="padding:6px;">
+  <div style="padding: 6px">
-    <el-card v-show="showSearch" style="margin-bottom:6px;">
+    <el-card v-show="showSearch" style="margin-bottom: 6px">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+      <el-form
-            <el-form-item label="客户端" prop="categoryName">
+        :model="queryParams"
-                <el-input v-model="queryParams.categoryName" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
+        ref="queryForm"
-            </el-form-item>
+        :inline="true"
-            <el-form-item>
+        label-width="68px"
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        style="margin-bottom: -20px"
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      >
-            </el-form-item>
+        <el-form-item label="客户端" prop="categoryName">
-        </el-form>
+          <el-input
+            v-model="queryParams.categoryName"
+            placeholder="请输入客户端ID"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
     </el-card>
 
-    <el-card style="padding-bottom:100px;">
+    <el-card style="padding-bottom: 100px">
-        <el-table v-loading="loading" :data="clientList">
+      <el-table v-loading="loading" :data="clientList">
-            <el-table-column label="客户端ID" align="left" header-align="center" prop="clientid">
+        <el-table-column
-                <template slot-scope="scope">
+          label="客户端ID"
-                    <el-link :underline="false" type="primary">{{scope.row.clientid}}</el-link>
+          align="left"
-                </template>
+          header-align="center"
-            </el-table-column>
+          prop="clientid"
-            <el-table-column label="节点" align="center" prop="node" width="120" />
+        >
-            <el-table-column label="IP地址" align="center" prop="ip_address" />
+          <template slot-scope="scope">
-            <el-table-column label="类型" align="center" prop="type">
+            <el-link
-                <template slot-scope="scope">
+              :underline="false"
-                    <el-tag type="danger" v-if="scope.row.clientid.indexOf('server')==0">服务端</el-tag>
+              type="primary"
-                    <el-tag type="success" v-else-if="scope.row.clientid.indexOf('web')==0">Web端</el-tag>
+              @click.native="handleOpen(scope.row)"
-                    <el-tag type="warning" v-else-if="scope.row.clientid.indexOf('phone')==0">移动端</el-tag>
+              >{{ scope.row.clientid }}</el-link
-                    <el-tag type="info" v-else-if="scope.row.clientid.indexOf('test')==0">测试端</el-tag>
+            >
-                    <el-tag type="primary" v-else>设备端</el-tag>
+          </template>
-                </template>
+        </el-table-column>
-            </el-table-column>
+        <el-table-column label="节点" align="center" prop="node" width="120" />
-            <el-table-column label="连接状态" align="center" prop="connected">
+        <el-table-column label="IP地址" align="center" prop="ip_address" />
-                <template slot-scope="scope">
+        <el-table-column label="类型" align="center" prop="type">
-                    <el-tag type="success" v-if="scope.row.connected">已连接</el-tag>
+          <template slot-scope="scope">
-                    <el-tag type="info" v-else>已断开</el-tag>
+            <el-tag
-                </template>
+              type="danger"
-            </el-table-column>
+              v-if="scope.row.clientid.indexOf('server') == 0"
-            <el-table-column label="心跳(秒)" align="center" prop="keepalive" width="100" />
+              >服务端</el-tag
-            <el-table-column label="会话过期间隔" align="center" prop="expiry_interval" width="100" />
+            >
-            <el-table-column label="当前订阅数量" align="center" prop="subscriptions_cnt" width="100" />
+            <el-tag
-            <el-table-column label="连接时间" align="center" prop="connected_at" />
+              type="success"
-            <el-table-column label="会话创建时间" align="center" prop="created_at" />
+              v-else-if="scope.row.clientid.indexOf('web') == 0"
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+              >Web端</el-tag
-                <template slot-scope="scope">
+            >
-                    <el-button size="small" type="danger" v-if="scope.row.connected" style="padding:5px;" v-hasPermi="['monitor:online:edit']">
+            <el-tag
-                        <svg-icon icon-class="disconnect" /> 断开连接
+              type="warning"
+              v-else-if="scope.row.clientid.indexOf('phone') == 0"
+              >移动端</el-tag
+            >
+            <el-tag
+              type="info"
+              v-else-if="scope.row.clientid.indexOf('test') == 0"
+              >测试端</el-tag
+            >
+            <el-tag type="primary" v-else>设备端</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="连接状态" align="center" prop="connected">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.connected">已连接</el-tag>
+            <el-tag type="info" v-else>已断开</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="心跳(秒)"
+          align="center"
+          prop="keepalive"
+          width="100"
+        />
+        <el-table-column
+          label="会话过期间隔"
+          align="center"
+          prop="expiry_interval"
+          width="100"
+        />
+        <el-table-column
+          label="当前订阅数量"
+          align="center"
+          prop="subscriptions_cnt"
+          width="100"
+        />
+        <el-table-column label="连接时间" align="center" prop="connected_at" />
+        <el-table-column
+          label="会话创建时间"
+          align="center"
+          prop="created_at"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="small"
+              type="danger"
+              v-if="scope.row.connected"
+              style="padding: 5px"
+              v-hasPermi="['monitor:client:edit']"
+              @click="handleDelete(scope.row)"
+            >
+              <svg-icon icon-class="disconnect" /> 断开连接
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams._page"
+        :limit.sync="queryParams._limit"
+        @pagination="getList"
+      />
+
+      <!-- MQTT客户端详细 -->
+      <el-dialog
+        :title="title"
+        :visible.sync="open"
+        width="1000px"
+        append-to-body
+      >
+        <el-card style="margin: 6px; padding-bottom: 100px">
+          <el-tabs
+            v-model="activeName"
+            tab-position="top"
+            style="padding: 10px"
+          >
+            <el-tab-pane name="basic">
+              <span slot="label">基本信息</span>
+              <el-form ref="form" :model="form" label-width="250px" size="mini">
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="节点：">{{ form.node }}</el-form-item>
+                    <el-form-item label="客户端ID：">{{
+                      form.clientid
+                    }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="Clean Session:">{{
+                      form.clean_start
+                    }}</el-form-item>
+                    <el-form-item label="会话过期间隔(秒)：">{{
+                      form.expiry_interval
+                    }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="用户名:">{{
+                      form.username
+                    }}</el-form-item>
+                    <el-form-item label="协议类型：">{{
+                      form.proto_ver
+                    }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="会话创建时间:">{{
+                      form.created_at
+                    }}</el-form-item>
+                    <el-form-item label="订阅数量："
+                      >{{ form.subscriptions_cnt }}/{{
+                        form.max_subscriptions
+                      }}</el-form-item
+                    >
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="IP地址:">{{
+                      form.ip_address
+                    }}</el-form-item>
+                    <el-form-item label="端口：">{{ form.port }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="最大订阅数量:">{{
+                      form.max_subscriptions
+                    }}</el-form-item>
+                    <el-form-item label="飞行窗口："
+                      >{{ form.inflight }}/{{ form.max_inflight }}</el-form-item
+                    >
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="心跳(秒):">{{
+                      form.keepalive
+                    }}</el-form-item>
+                    <el-form-item label="是否为桥接：">{{
+                      form.is_bridge
+                    }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="最大飞行窗口:">{{
+                      form.max_inflight
+                    }}</el-form-item>
+                    <el-form-item label="消息队列:"
+                      >{{ form.mqueue_len }}/{{ form.max_mqueue }}</el-form-item
+                    >
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="连接时间:">{{
+                      form.connected_at
+                    }}</el-form-item>
+                    <el-form-item label="连接状态:">
+                      <div v-if="form.connected == true" style="color: green">
+                        已连接
+                      </div>
+                      <div
+                        v-else-if="form.connected == false"
+                        style="color: red"
+                      >
+                        已断开
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="最大消息队列:">{{
+                      form.max_mqueue
+                    }}</el-form-item>
+                    <el-form-item label="未确认的PUBREC数据包计数:">{{
+                      form.awaiting_rel
+                    }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="Zone:">{{ form.zone }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="最大未确认的PUBREC数据包计数:">{{
+                      form.max_awaiting_rel
+                    }}</el-form-item>
+                  </el-col>
+
+                  <el-col :span="12">
+                    <el-form-item label="接收的TCP报文数量:">{{
+                      form.recv_cnt
+                    }}</el-form-item>
+                    <el-form-item label="接收的PUBLISH报文数量:">{{
+                      form.recv_msg
+                    }}</el-form-item>
+                    <el-form-item label="接收的字节数量:">{{
+                      form.recv_oct
+                    }}</el-form-item>
+                    <el-form-item label="接收的MQTT报文数量:">{{
+                      form.recv_pkt
+                    }}</el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="发送的TCP报文数量:">{{
+                      form.send_cnt
+                    }}</el-form-item>
+                    <el-form-item label="发送的PUBLISH报文数量:">{{
+                      form.send_msg
+                    }}</el-form-item>
+                    <el-form-item label="发送的字节数量:">{{
+                      form.send_oct
+                    }}</el-form-item>
+                    <el-form-item label="发送的MQTT报文数量:">{{
+                      form.send_pkt
+                    }}</el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </el-tab-pane>
+
+            <el-tab-pane name="subscribe">
+              <span slot="label">订阅列表</span>
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                  <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="handleRefresh"
+                    v-hasPermi="['monitor:subscribe:refresh']"
+                    >刷新</el-button
+                  >
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button
+                    type="success"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    :disabled="single"
+                    @click="handleAdd"
+                    v-hasPermi="['monitor:subscribe:add']"
+                    >添加订阅</el-button
+                  >
+                </el-col>
+              </el-row>
+              <el-table v-loading="loadSubscribeing" :data="subscribeList">
+                <el-table-column label="主题" align="center" prop="topic" />
+                <el-table-column label="QoS" align="center" prop="qos" />
+                <el-table-column
+                  label="操作"
+                  align="center"
+                  class-name="small-padding fixed-width"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      size="small"
+                      type="danger"
+                      style="padding: 5px"
+                      v-hasPermi="['monitor:subscribe:delete']"
+                      @click="handleUnsubscribe(scope.row)"
+                    >
+                      <svg-icon icon-class="disconnect" /> 取消订阅
                     </el-button>
-                </template>
+                  </template>
-            </el-table-column>
+                </el-table-column>
-        </el-table>
+              </el-table>
-
+            </el-tab-pane>
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
+          </el-tabs>
-
+        </el-card>
-        <!-- 添加或修改产品分类对话框 -->
+      </el-dialog>
-        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-            <el-form ref="form" :model="form" label-width="80px">
-                <el-form-item label="分类名称" prop="categoryName">
-                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
-                </el-form-item>
-                <el-form-item label="显示顺序" prop="orderNum">
-                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="cancel">确 定</el-button>
-                <el-button @click="cancel">取 消</el-button>
-            </div>
-        </el-dialog>
-
     </el-card>
-</div>
+
+    <!-- 添加或修改订阅对话框 -->
+    <el-dialog
+      title="添加订阅"
+      :visible.sync="subscribeOpen"
+      width="800px"
+      append-to-body
+    >
+      <el-form
+        ref="subscribeForm"
+        :model="subscribeForm"
+        :rules="rules"
+        label-width="60px"
+      >
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="主题" prop="topic">
+              <el-input
+                v-model="subscribeForm.topic"
+                placeholder="请输入主题"
+              />
+            </el-form-item>
+            <el-form-item label="Qos" prop="qos">
+              <el-select
+                v-model="subscribeForm.qos"
+                placeholder="请选择消息类型"
+              >
+                <el-option key="0" label="0" value="0"></el-option>
+                <el-option key="1" label="1" value="1"></el-option>
+                <el-option key="2" label="2" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">添 加 订 阅</el-button>
+        <el-button @click="cancelSubscribe">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import {
-    listMqttClient
+  listMqttClient,
-} from "@/api/iot/emqx"
+  eliminateClient,
+  getClientDetails,
+  getSubscriptionsByClientId,
+  unsubscribe,
+  addSubscribe,
+} from "@/api/iot/emqx";
 
 export default {
-    name: "Category",
+  name: "Category",
-    data() {
+  data() {
-        return {
+    return {
-            // 遮罩层
+      // 遮罩层
-            loading: true,
+      loading: true,
-            // 显示搜索条件
+      loadSubscribeing: true,
-            showSearch: true,
+      // 显示搜索条件
-            // 总条数
+      showSearch: true,
-            total: 0,
+      // 总条数
-            // 产品分类表格数据
+      total: 0,
-            clientList: [],
+      // 产品分类表格数据
-            // 弹出层标题
+      clientList: [],
-            title: "",
+      // 弹出层标题
-            // 是否显示弹出层
+      title: "",
-            open: false,
+      // 是否显示弹出层
-            // 查询参数
+      open: false,
-            queryParams: {
+      // 是否显示添加订阅弹出层
-                _limit: 10,
+      subscribeOpen: false,
-                _page: 1,
+      // 查询参数
-            },
+      queryParams: {
-            // 表单参数
+        _limit: 10,
-            form: {},
+        _page: 1,
-        };
+      },
+      // 表单参数
+      form: {},
+      // 选中选项卡
+      activeName: "basic",
+      //订阅列表数据
+      subscribeList: [],
+      //订阅数据
+      subscribe: {
+        topic: "",
+        clientid: "",
+      },
+      //添加订阅表单参数
+      subscribeForm: {
+        qos: "0",
+      },
+      //客户端ID
+      clientid: "",
+      // 表单校验
+      rules: {
+        topic: [
+          {
+            required: true,
+            message: "主题不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询客户端列表 */
+    getList() {
+      this.loading = true;
+      listMqttClient(this.queryParams).then((response) => {
+        this.clientList = response.data.data;
+        this.total = response.data.meta.count;
+        this.loading = false;
+      });
+    },
+    /** 查询客户端订阅列表 */
+    getSubscribeList(clientid) {
+      this.clientid = clientid;
+      this.loadSubscribeing = true;
+      getSubscriptionsByClientId(clientid).then((res) => {
+        this.subscribeList = res.data.data;
+        this.loadSubscribeing = false;
+      });
     },
-    created() {
-        this.getList();
 
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
     },
-    methods: {
+    /** 搜索按钮操作 */
-        /** 查询客户端列表 */
+    handleQuery() {
-        getList() {
+      this.queryParams.pageNum = 1;
-            this.loading = true;
+      this.getList();
-            listMqttClient(this.queryParams).then(response => {
+    },
-                this.clientList = response.data.data;
+    /** 重置按钮操作 */
-                this.total = response.data.meta.count;
+    resetQuery() {
-                this.loading = false;
+      this.resetForm("queryForm");
-            });
+      this.handleQuery();
-        },
+    },
-        // 取消按钮
+    /** 断开客户端连接 */
-        cancel() {
+    handleDelete(row) {
-            this.open = false;
+      const clientid = row.clientid;
-            this.reset();
+      this.$modal
-        },
+        .confirm('是否确认删除MQTT客户端编号为"' + clientid + '"的数据项？')
-        /** 搜索按钮操作 */
+        .then(function () {
-        handleQuery() {
+          return eliminateClient(clientid);
-            this.queryParams.pageNum = 1;
+        })
-            this.getList();
+        .then(() => {
-        },
+          this.getList();
-        /** 重置按钮操作 */
+          this.$modal.msgSuccess("删除成功");
-        resetQuery() {
+        })
-            this.resetForm("queryForm");
+        .catch(() => {});
-            this.handleQuery();
+    },
-        },
+    //取消主题订阅
-    }
+    handleUnsubscribe(row) {
+      const clientid = row.clientid;
+      const topic = row.topic;
+      this.$modal
+        .confirm('是否确认取消订阅主题为"' + topic + '"的数据项？')
+        .then(function () {
+          const param = {};
+          param.topic = topic;
+          param.clientid = clientid;
+          return unsubscribe(param);
+        })
+        .then(() => {
+          this.getSubscribeList(clientid);
+          this.$modal.msgSuccess("取消订阅成功");
+        })
+        .catch(() => {});
+    },
+    //查看客户端详情
+    handleOpen(row) {
+      const clientid = row.clientid;
+      this.getSubscribeList(clientid);
+      getClientDetails(clientid).then((response) => {
+        this.form = response.data.data[0];
+        this.open = true;
+        this.title = "详情";
+      });
+    },
+    //刷新订阅列表
+    handleRefresh() {
+      this.getSubscribeList(this.clientid);
+    },
+    //添加订阅
+    handleAdd() {
+      this.subscribeOpen = true;
+    },
+    //提交添加订阅表单
+    submitForm() {
+      this.subscribeForm.clientid = this.clientid;
+      console.log(this.subscribeForm);
+      this.$refs["subscribeForm"].validate((valid) => {
+        if (valid) {
+          addSubscribe(this.subscribeForm).then((response) => {
+            this.$modal.msgSuccess("新增订阅成功");
+            this.subscribeOpen = false;
+            this.getSubscribeList(this.clientid);
+          });
+        }
+      });
+    },
+    cancelSubscribe() {
+      this.subscribeOpen = false;
+      this.resetForm("subscribeForm");
+      //刷新列表
+      this.getSubscribeList(this.clientid);
+    },
+  },
 };
 </script>

vue/vue.config.js

@@ -40,7 +40,7 @@ module.exports = {
         }
       },
       ['/api/v4']: {
-        target: `http://localhost:8081`,
+        target: `http://localhost:18083`,
         changeOrigin: true,
         // logLevel: 'debug',
       },