界面调整

vue/src/views/iot/device/mqtt-client.vue

@@ -31,8 +31,6 @@ export default {
     },
     data() {
         return {
-            // 设备信息
-            deviceInfo: {},
         };
     },
     created() {
@@ -47,11 +45,11 @@ export default {
                 cleanSession: false,
                 keepAlive: 30,
                 clientId: 'web-' + Math.random().toString(16).substr(2),
-                connectTimeout: 60000
+                connectTimeout: 10000
             }
             // 配置Mqtt地址
-            //let url = "wss://iot.wumei.live/mqtt"
+            let url = "wss://iot.wumei.live/mqtt"
-            let url = "ws://" + window.location.hostname + ":8083/mqtt";
+            // let url = "ws://" + window.location.hostname + ":8083/mqtt";
             console.log("mqtt地址：", url);
             this.client = mqtt.connect(url, options);
             this.client.on("connect", (e) => {

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

@@ -1,78 +1,32 @@
 <template>
 <div style="padding: 6px">
     <el-card v-show="showSearch" style="margin-bottom: 6px">
-      <el-form
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
-        :model="queryParams"
-        ref="queryForm"
-        :inline="true"
-        label-width="68px"
-        style="margin-bottom: -20px"
-      >
             <el-form-item label="客户端" prop="categoryName">
-          <el-input
+                <el-input v-model="queryParams.categoryName" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
-            v-model="queryParams.categoryName"
-            placeholder="请输入客户端ID"
-            clearable
-            size="small"
-            @keyup.enter.native="handleQuery"
-          />
             </el-form-item>
             <el-form-item>
-          <el-button
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            type="primary"
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            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-table v-loading="loading" :data="clientList">
-        <el-table-column
+            <el-table-column label="客户端ID" align="left" header-align="center" prop="clientid">
-          label="客户端ID"
-          align="left"
-          header-align="center"
-          prop="clientid"
-        >
                 <template slot-scope="scope">
-            <el-link
+                    <el-link :underline="false" type="primary" @click.native="handleOpen(scope.row)">{{ scope.row.clientid }}</el-link>
-              :underline="false"
-              type="primary"
-              @click.native="handleOpen(scope.row)"
-              >{{ scope.row.clientid }}</el-link
-            >
                 </template>
             </el-table-column>
             <el-table-column label="节点" align="center" prop="node" width="120" />
             <el-table-column label="IP地址" align="center" prop="ip_address" />
             <el-table-column label="类型" align="center" prop="type">
                 <template slot-scope="scope">
-            <el-tag
+                    <el-tag type="danger" v-if="scope.row.clientid.indexOf('server') == 0">服务端</el-tag>
-              type="danger"
+                    <el-tag type="success" v-else-if="scope.row.clientid.indexOf('web') == 0">Web端</el-tag>
-              v-if="scope.row.clientid.indexOf('server') == 0"
+                    <el-tag type="warning" v-else-if="scope.row.clientid.indexOf('phone') == 0">移动端</el-tag>
-              >服务端</el-tag
+                    <el-tag type="info" v-else-if="scope.row.clientid.indexOf('test') == 0">测试端</el-tag>
-            >
-            <el-tag
-              type="success"
-              v-else-if="scope.row.clientid.indexOf('web') == 0"
-              >Web端</el-tag
-            >
-            <el-tag
-              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>
@@ -82,198 +36,93 @@
                     <el-tag type="info" v-else>已断开</el-tag>
                 </template>
             </el-table-column>
-        <el-table-column
+            <el-table-column label="心跳(秒)" align="center" prop="keepalive" width="100" />
-          label="心跳(秒)"
+            <el-table-column label="会话过期间隔" align="center" prop="expiry_interval" width="100" />
-          align="center"
+            <el-table-column label="当前订阅数量" align="center" prop="subscriptions_cnt" width="100" />
-          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
+            <el-table-column label="会话创建时间" align="center" prop="created_at" />
-          label="会话创建时间"
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
-          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
+                    <el-button size="small" type="danger" v-if="scope.row.connected" style="padding: 5px" v-hasPermi="['monitor:client:edit']" @click="handleDelete(scope.row)">
-              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
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams._page"
-        :limit.sync="queryParams._limit"
-        @pagination="getList"
-      />
 
         <!-- MQTT客户端详细 -->
-      <el-dialog
+        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-        :title="title"
+            <el-tabs v-model="activeName" tab-position="top" style="padding: 10px">
-        :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-form ref="form" :model="form" label-width="120px" size="mini">
                         <el-row>
                             <el-col :span="12">
                                 <el-form-item label="节点：">{{form.node }}</el-form-item>
-                    <el-form-item label="客户端ID：">{{
+                                <el-form-item label="客户端ID：">{{form.clientid}}</el-form-item>
-                      form.clientid
-                    }}</el-form-item>
                             </el-col>
                             <el-col :span="12">
-                    <el-form-item label="Clean Session:">{{
+                                <el-form-item label="Clean Session:">{{form.clean_start}}</el-form-item>
-                      form.clean_start
+                                <el-form-item label="会话过期间隔(秒)：">{{form.expiry_interval}}</el-form-item>
-                    }}</el-form-item>
-                    <el-form-item label="会话过期间隔(秒)：">{{
-                      form.expiry_interval
-                    }}</el-form-item>
                             </el-col>
                             <el-col :span="12">
-                    <el-form-item label="用户名:">{{
+                                <el-form-item label="用户名:">{{form.username}}</el-form-item>
-                      form.username
+                                <el-form-item label="协议类型：">{{form.proto_ver}}</el-form-item>
-                    }}</el-form-item>
-                    <el-form-item label="协议类型：">{{
-                      form.proto_ver
-                    }}</el-form-item>
                             </el-col>
                             <el-col :span="12">
-                    <el-form-item label="会话创建时间:">{{
+                                <el-form-item label="会话创建时间:">{{form.created_at}}</el-form-item>
-                      form.created_at
+                                <el-form-item label="订阅数量：">{{ form.subscriptions_cnt }}/{{form.max_subscriptions}}</el-form-item>
-                    }}</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地址:">{{
+                                <el-form-item label="IP地址:">{{form.ip_address }}</el-form-item>
-                      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="最大订阅数量:">{{
+                                <el-form-item label="最大订阅数量:">{{ form.max_subscriptions}}</el-form-item>
-                      form.max_subscriptions
+                                <el-form-item label="飞行窗口：">{{ form.inflight }}/{{ form.max_inflight }}</el-form-item>
-                    }}</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="心跳(秒):">{{
+                                <el-form-item label="心跳(秒):">{{ form.keepalive }}</el-form-item>
-                      form.keepalive
+                                <el-form-item label="是否为桥接：">{{ form.is_bridge }}</el-form-item>
-                    }}</el-form-item>
-                    <el-form-item label="是否为桥接：">{{
-                      form.is_bridge
-                    }}</el-form-item>
                             </el-col>
                             <el-col :span="12">
-                    <el-form-item label="最大飞行窗口:">{{
+                                <el-form-item label="最大飞行窗口:">{{ form.max_inflight }}</el-form-item>
-                      form.max_inflight
+                                <el-form-item label="消息队列:">{{ form.mqueue_len }}/{{ form.max_mqueue }}</el-form-item>
-                    }}</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="连接时间:">{{
+                                <el-form-item label="连接时间:">{{ form.connected_at}}</el-form-item>
-                      form.connected_at
-                    }}</el-form-item>
                                 <el-form-item label="连接状态:">
                                     <div v-if="form.connected == true" style="color: green">
                                         已连接
                                     </div>
-                      <div
+                                    <div v-else-if="form.connected == false" style="color: red">
-                        v-else-if="form.connected == false"
-                        style="color: red"
-                      >
                                         已断开
                                     </div>
                                 </el-form-item>
                             </el-col>
                             <el-col :span="12">
-                    <el-form-item label="最大消息队列:">{{
+                                <el-form-item label="最大消息队列:">{{form.max_mqueue}}</el-form-item>
-                      form.max_mqueue
+                                <el-form-item label="未确认的PUBREC数据包计数:">{{ form.awaiting_rel}}</el-form-item>
-                    }}</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数据包计数:">{{
+                                <el-form-item label="最大未确认的PUBREC数据包计数:">{{ form.max_awaiting_rel}}</el-form-item>
-                      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报文数量:">{{
+                                <el-form-item label="接收的TCP报文数量:">{{form.recv_cnt}}</el-form-item>
-                      form.send_cnt
+                                <el-form-item label="接收的PUBLISH报文数量:">{{form.recv_msg}}</el-form-item>
-                    }}</el-form-item>
+                                <el-form-item label="接收的字节数量:">{{form.recv_oct}}</el-form-item>
-                    <el-form-item label="发送的PUBLISH报文数量:">{{
+                                <el-form-item label="接收的MQTT报文数量:">{{form.recv_pkt}}</el-form-item>
-                      form.send_msg
+                            </el-col>
-                    }}</el-form-item>
+                            <el-col :span="12">
-                    <el-form-item label="发送的字节数量:">{{
+                                <el-form-item label="发送的TCP报文数量:">{{form.send_cnt }}</el-form-item>
-                      form.send_oct
+                                <el-form-item label="发送的PUBLISH报文数量:">{{form.send_msg }}</el-form-item>
-                    }}</el-form-item>
+                                <el-form-item label="发送的字节数量:">{{form.send_oct }}</el-form-item>
-                    <el-form-item label="发送的MQTT报文数量:">{{
+                                <el-form-item label="发送的MQTT报文数量:">{{form.send_pkt}}</el-form-item>
-                      form.send_pkt
-                    }}</el-form-item>
                             </el-col>
                         </el-row>
                     </el-form>
@@ -283,46 +132,18 @@
                     <span slot="label">订阅列表</span>
                     <el-row :gutter="10" class="mb8">
                         <el-col :span="1.5">
-                  <el-button
+                            <el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="handleRefresh" v-hasPermi="['monitor:subscribe:refresh']">刷新</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
+                            <el-button type="success" plain icon="el-icon-plus" size="mini" :disabled="single" @click="handleAdd" v-hasPermi="['monitor:subscribe:add']">添加订阅</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
+                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
-                  label="操作"
-                  align="center"
-                  class-name="small-padding fixed-width"
-                  width="150"
-                >
                             <template slot-scope="scope">
-                    <el-button
+                                <el-button size="small" type="danger" style="padding: 5px" v-hasPermi="['monitor:subscribe:delete']" @click="handleUnsubscribe(scope.row)">
-                      size="small"
-                      type="danger"
-                      style="padding: 5px"
-                      v-hasPermi="['monitor:subscribe:delete']"
-                      @click="handleUnsubscribe(scope.row)"
-                    >
                                     <svg-icon icon-class="disconnect" /> 取消订阅
                                 </el-button>
                             </template>
@@ -330,36 +151,19 @@
                     </el-table>
                 </el-tab-pane>
             </el-tabs>
-        </el-card>
         </el-dialog>
     </el-card>
 
     <!-- 添加或修改订阅对话框 -->
-    <el-dialog
+    <el-dialog title="添加订阅" :visible.sync="subscribeOpen" width="800px" append-to-body>
-      title="添加订阅"
+        <el-form ref="subscribeForm" :model="subscribeForm" :rules="rules" label-width="60px">
-      :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
+                        <el-input v-model="subscribeForm.topic" placeholder="请输入主题" />
-                v-model="subscribeForm.topic"
-                placeholder="请输入主题"
-              />
                     </el-form-item>
                     <el-form-item label="Qos" prop="qos">
-              <el-select
+                        <el-select v-model="subscribeForm.qos" placeholder="请选择消息类型">
-                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>
@@ -429,13 +233,11 @@ export default {
             clientid: "",
             // 表单校验
             rules: {
-        topic: [
+                topic: [{
-          {
                     required: true,
                     message: "主题不能为空",
                     trigger: "blur",
-          },
+                }, ],
-        ],
             },
         };
     },

vue/src/views/iot/emqx/resource.vue

@@ -3,75 +3,28 @@
     <el-card style="padding-bottom: 100px">
         <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-          <el-button
+                <el-button type="success" plain icon="el-icon-refresh" size="mini" @click="getList" v-hasPermi="['monitor:resource:refresh']">刷新</el-button>
-            type="success"
-            plain
-            icon="el-icon-refresh"
-            size="mini"
-            @click="getList"
-            v-hasPermi="['monitor:resource:refresh']"
-            >刷新</el-button
-          >
             </el-col>
             <el-col :span="1.5">
-          <el-button
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addResource" v-hasPermi="['monitor:resource:add']">新增</el-button>
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="addResource"
-            v-hasPermi="['monitor:resource:add']"
-            >新增</el-button
-          >
             </el-col>
         </el-row>
         <el-table v-loading="loading" :data="resourceList">
-        <el-table-column
+            <el-table-column label="ID" align="center" header-align="center" prop="id">
-          label="ID"
-          align="center"
-          header-align="center"
-          prop="id"
-        >
                 <template slot-scope="scope">
-            <el-link :underline="false" type="primary">{{
+                    <el-link :underline="false" type="primary">{{ scope.row.id }}</el-link>
-              scope.row.id
-            }}</el-link>
                 </template>
             </el-table-column>
             <el-table-column label="资源类型" align="center" prop="type" />
             <el-table-column label="备注" align="center" prop="description" />
-        <el-table-column
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-        >
                 <template slot-scope="scope">
-            <el-button
+                    <el-button size="small" type="text" style="padding: 5px" v-hasPermi="['monitor:resource:query']" @click="handleQuery(scope.row)">
-              size="small"
-              type="text"
-              style="padding: 5px"
-              v-hasPermi="['monitor:resource:query']"
-              @click="handleQuery(scope.row)"
-            >
                         查看
                     </el-button>
-            <el-button
+                    <el-button size="small" type="text" icon="el-icon-delete" style="padding: 5px" v-hasPermi="['monitor:resource:delete']" @click="handleDelete(scope.row)">删除
-              size="small"
-              type="text"
-              icon="el-icon-delete"
-              style="padding: 5px"
-              v-hasPermi="['monitor:resource:delete']"
-              @click="handleDelete(scope.row)"
-              >删除
                     </el-button>
-            <el-button
+                    <el-button size="small" type="text" icon="el-icon-delete" style="padding: 5px" v-hasPermi="['monitor:resource:checkStatus']" @click="checkStatus(scope.row)">状态
-              size="small"
-              type="text"
-              icon="el-icon-delete"
-              style="padding: 5px"
-              v-hasPermi="['monitor:resource:checkStatus']"
-              @click="checkStatus(scope.row)"
-              >状态
                     </el-button>
                 </template>
             </el-table-column>
@@ -79,12 +32,7 @@
     </el-card>
 
     <!-- 资源详细 -->
-    <el-dialog
+    <el-dialog title="资源详细" :visible.sync="openView" width="700px" append-to-body>
-      title="资源详细"
-      :visible.sync="openView"
-      width="700px"
-      append-to-body
-    >
         <el-form ref="form" :model="form" label-width="180px" size="mini">
             <el-card style="padding-bottom: 10px">
                 <div slot="header" class="clearfix">
@@ -112,44 +60,32 @@
                 </div>
                 <el-row>
                     <el-col :span="20">
-              <el-form-item label="reconnect_interval：">{{
+                        <el-form-item label="reconnect_interval：">{{ form.config.reconnect_interval}}</el-form-item>
-                form.config.reconnect_interval
-              }}</el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="20">
-              <el-form-item label="pool_size：">{{
+                        <el-form-item label="pool_size：">{{ form.config.pool_size }}</el-form-item>
-                form.config.pool_size
-              }}</el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="20">
-              <el-form-item label="mountpoint：">{{
+                        <el-form-item label="mountpoint：">{{ form.config.mountpoint}}</el-form-item>
-                form.config.mountpoint
-              }}</el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="20">
-              <el-form-item label="disk_cache：">{{
+                        <el-form-item label="disk_cache：">{{ form.config.disk_cache }}</el-form-item>
-                form.config.disk_cache
-              }}</el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="20">
-              <el-form-item label="batch_size：">{{
+                        <el-form-item label="batch_size：">{{ form.config.batch_size }}</el-form-item>
-                form.config.batch_size
-              }}</el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="20">
-              <el-form-item label="address：">{{
+                        <el-form-item label="address：">{{ form.config.address}}</el-form-item>
-                form.config.address
-              }}</el-form-item>
                     </el-col>
                 </el-row>
             </el-card>
@@ -160,41 +96,14 @@
     </el-dialog>
 
     <!-- 测试重连 -->
-    <el-dialog
+    <el-dialog title="检测状态" :visible.sync="openStatusView" width="700px" append-to-body>
-      title="检测状态"
+        <el-form ref="statusForm" :model="statusForm" label-width="180px" size="mini">
-      :visible.sync="openStatusView"
-      width="700px"
-      append-to-body
-    >
-      <el-form
-        ref="statusForm"
-        :model="statusForm"
-        label-width="180px"
-        size="mini"
-      >
             <el-row>
                 <el-col :span="12" v-if="statusForm.status[0]">
                     {{ statusForm.status[0].node }}
-            <el-tag
+                    <el-tag type="success" v-if="statusForm.status[0].is_alive == true" style="margin-left: 10px">可用</el-tag>
-              type="success"
+                    <el-tag type="danger" v-if="statusForm.status[0].is_alive == false" style="margin-left: 10px">不可用</el-tag>
-              v-if="statusForm.status[0].is_alive == true"
+                    <el-button size="small" type="primary" icon="el-icon-connection" style="padding: 5px; margin-left: 10px" v-hasPermi="['monitor:resource:connect']" @click="checkNode(statusForm.id)">重新连接
-              style="margin-left: 10px"
-              >可用</el-tag
-            >
-            <el-tag
-              type="danger"
-              v-if="statusForm.status[0].is_alive == false"
-              style="margin-left: 10px"
-              >不可用</el-tag
-            >
-            <el-button
-              size="small"
-              type="primary"
-              icon="el-icon-connection"
-              style="padding: 5px; margin-left: 10px"
-              v-hasPermi="['monitor:resource:connect']"
-              @click="checkNode(statusForm.id)"
-              >重新连接
                     </el-button>
                 </el-col>
             </el-row>
@@ -202,19 +111,8 @@
     </el-dialog>
 
     <!-- 添加资源 -->
-    <el-dialog
+    <el-dialog title="资源管理" :visible.sync="openAddView" width="1000px" append-to-body :before-close="cancel">
-      title="资源管理"
+        <el-form ref="addResourceForm" :model="addResourceForm" label-width="180px" :rules="rule">
-      :visible.sync="openAddView"
-      width="1000px"
-      append-to-body
-      :before-close="cancel"
-    >
-      <el-form
-        ref="addResourceForm"
-        :model="addResourceForm"
-        label-width="180px"
-        :rules="rule"
-      >
             <el-card style="padding-bottom: 10px">
                 <div slot="header" class="clearfix">
                     <span>择取资源类型</span>
@@ -222,43 +120,21 @@
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="资源类型" prop="resource.title">
-                <el-select
+                            <el-select v-model="addResourceForm.resource.title" @change="selectTitle" placeholder="请选择资源类型">
-                  v-model="addResourceForm.resource.title"
+                                <el-option v-for="(resource, index) in addResourceForm.resource" :key="index" :label="resource.title.zh" :value="resource.name"></el-option>
-                  @change="selectTitle"
-                  placeholder="请选择资源类型"
-                >
-                  <el-option
-                    v-for="(resource, index) in addResourceForm.resource"
-                    :key="index"
-                    :label="resource.title.zh"
-                    :value="resource.name"
-                  ></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item>
-                <el-button
+                            <el-button type="success" @click="testConnect('addResourceForm')">测试连接</el-button>
-                  type="success"
-                  @click="testConnect('addResourceForm')"
-                  >测试连接</el-button
-                >
                         </el-form-item>
                     </el-col>
                 </el-row>
             </el-card>
         </el-form>
-      <el-form
+        <el-form ref="EMQXForm" :model="EMQXForm" label-width="180px" :rules="ruleEMQX">
-        ref="EMQXForm"
+            <el-card style="padding-bottom: 10px; margin-top: 10px" v-if="EMQXForm.params" v-show="openEMQXView">
-        :model="EMQXForm"
-        label-width="180px"
-        :rules="ruleEMQX"
-      >
-        <el-card
-          style="padding-bottom: 10px; margin-top: 10px"
-          v-if="EMQXForm.params"
-          v-show="openEMQXView"
-        >
                 <div slot="header" class="clearfix">
                     <span>具体信息</span>
                 </div>
@@ -267,10 +143,7 @@
                     <el-col :span="10">
                         <el-form-item prop="params.address.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="EMQXForm.params.address.description.zh" placement="top">
-                    :content="EMQXForm.params.address.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 EMQ X节点名称：
@@ -279,10 +152,7 @@
                         </el-form-item>
                         <el-form-item prop="params.pool_size.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="EMQXForm.params.pool_size.description.zh" placement="top">
-                    :content="EMQXForm.params.pool_size.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 连接池大小：
@@ -293,10 +163,7 @@
                     <el-col :span="10">
                         <el-form-item prop="params.mountpoint.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="EMQXForm.params.mountpoint.description.zh" placement="top">
-                    :content="EMQXForm.params.mountpoint.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 桥接挂载点：
@@ -305,26 +172,18 @@
                         </el-form-item>
                         <el-form-item prop="EMQreconnect_interval">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="EMQXForm.params.reconnect_interval.description.zh" placement="top">
-                    :content="EMQXForm.params.reconnect_interval.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 重连间隔：
                             </span>
-                <el-input
+                            <el-input v-model="EMQXForm.params.reconnect_interval.default" />
-                  v-model="EMQXForm.params.reconnect_interval.default"
-                />
                         </el-form-item>
                     </el-col>
                     <el-col :span="10">
                         <el-form-item prop="EMQbatch_size">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="EMQXForm.params.batch_size.description.zh" placement="top">
-                    :content="EMQXForm.params.batch_size.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 批处理大小：
@@ -338,38 +197,21 @@
                     <el-col :span="10">
                         <el-form-item prop="EMQdisk_cache">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="EMQXForm.params.disk_cache.description.zh" placement="top">
-                    :content="EMQXForm.params.disk_cache.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 磁盘缓存：
                             </span>
                             <el-select v-model="EMQXForm.params.disk_cache.default">
-                  <el-option
+                                <el-option v-for="(enums, index) in EMQXForm.params.disk_cache.enum" :key="index" :label="enums" :value="enums"></el-option>
-                    v-for="(enums, index) in EMQXForm.params.disk_cache.enum"
-                    :key="index"
-                    :label="enums"
-                    :value="enums"
-                  ></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
             </el-card>
         </el-form>
-      <el-form
+        <el-form ref="MQTTForm" :model="MQTTForm" label-width="180px" :rules="ruleMQTT">
-        ref="MQTTForm"
+            <el-card style="padding-bottom: 10px; margin-top: 10px" v-if="MQTTForm.params" v-show="openMQTTView">
-        :model="MQTTForm"
-        label-width="180px"
-        :rules="ruleMQTT"
-      >
-        <el-card
-          style="padding-bottom: 10px; margin-top: 10px"
-          v-if="MQTTForm.params"
-          v-show="openMQTTView"
-        >
                 <div slot="header" class="clearfix">
                     <span>具体信息</span>
                 </div>
@@ -377,10 +219,7 @@
                     <el-col :span="10">
                         <el-form-item prop="params.address.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.address.description.zh" placement="top">
-                    :content="MQTTForm.params.address.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 远程broker地址：
@@ -389,50 +228,31 @@
                         </el-form-item>
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.disk_cache.description.zh" placement="top">
-                    :content="MQTTForm.params.disk_cache.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 磁盘缓存：
                             </span>
                             <el-select v-model="MQTTForm.params.disk_cache.default">
-                  <el-option
+                                <el-option v-for="(enums, index) in MQTTForm.params.disk_cache.enum" :key="index" :label="enums" :value="enums"></el-option>
-                    v-for="(enums, index) in MQTTForm.params.disk_cache.enum"
-                    :key="index"
-                    :label="enums"
-                    :value="enums"
-                  ></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.proto_ver.description.zh" placement="top">
-                    :content="MQTTForm.params.proto_ver.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 协议版本：
                             </span>
                             <el-select v-model="MQTTForm.params.proto_ver.default">
-                  <el-option
+                                <el-option v-for="(enums, index) in MQTTForm.params.proto_ver.enum" :key="index" :label="enums" :value="enums"></el-option>
-                    v-for="(enums, index) in MQTTForm.params.proto_ver.enum"
-                    :key="index"
-                    :label="enums"
-                    :value="enums"
-                  ></el-option>
                             </el-select>
                         </el-form-item>
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.clientid.description.zh" placement="top">
-                    :content="MQTTForm.params.clientid.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 客户端ID：
@@ -443,10 +263,7 @@
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.username.description.zh" placement="top">
-                    :content="MQTTForm.params.username.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 用户名：
@@ -455,10 +272,7 @@
                         </el-form-item>
                         <el-form-item prop="params.mountpoint.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.mountpoint.description.zh" placement="top">
-                    :content="MQTTForm.params.mountpoint.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 桥接挂载点：
@@ -469,10 +283,7 @@
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.password.description.zh" placement="top">
-                    :content="MQTTForm.params.password.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 密码：
@@ -481,10 +292,7 @@
                         </el-form-item>
                         <el-form-item prop="params.keepalive.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.keepalive.description.zh" placement="top">
-                    :content="MQTTForm.params.keepalive.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 心跳间隔：
@@ -496,34 +304,22 @@
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.reconnect_interval.description.zh" placement="top">
-                    :content="MQTTForm.params.reconnect_interval.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 重连间隔：
                             </span>
-                <el-input
+                            <el-input v-model="MQTTForm.params.reconnect_interval.default" />
-                  v-model="MQTTForm.params.reconnect_interval.default"
-                />
                         </el-form-item>
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.bridge_mode.description.zh" placement="top">
-                    :content="MQTTForm.params.bridge_mode.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 桥接模式：
                             </span>
                             <el-select v-model="MQTTForm.params.bridge_mode.default">
-                  <el-option
+                                <el-option key="false" label="false" value="false"></el-option>
-                    key="false"
-                    label="false"
-                    value="false"
-                  ></el-option>
                                 <el-option key="true" label="true" value="true"></el-option>
                             </el-select>
                         </el-form-item>
@@ -532,10 +328,7 @@
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.retry_interval.description.zh" placement="top">
-                    :content="MQTTForm.params.retry_interval.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 重传间隔：
@@ -544,21 +337,13 @@
                         </el-form-item>
                         <el-form-item prop="resource[1].params.ssl.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.ssl.description.zh" placement="top">
-                    :content="MQTTForm.params.ssl.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 Bridge SSL：
                             </span>
                             <el-select v-model="MQTTForm.params.ssl.default">
-                  <el-option
+                                <el-option v-for="(enums, index) in MQTTForm.params.ssl.enum" :key="index" :label="enums" :value="enums"></el-option>
-                    v-for="(enums, index) in MQTTForm.params.ssl.enum"
-                    :key="index"
-                    :label="enums"
-                    :value="enums"
-                  ></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
@@ -566,10 +351,7 @@
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.cacertfile.description.zh" placement="top">
-                    :content="MQTTForm.params.cacertfile.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 CA证书：
@@ -578,10 +360,7 @@
                         </el-form-item>
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.keyfile.description.zh" placement="top">
-                    :content="MQTTForm.params.keyfile.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 SSL 密钥文件：
@@ -593,10 +372,7 @@
                     <el-col :span="10">
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.certfile.description.zh" placement="top">
-                    :content="MQTTForm.params.certfile.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 SSL 客户端证书：
@@ -605,10 +381,7 @@
                         </el-form-item>
                         <el-form-item>
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="MQTTForm.params.ciphers.description.zh" placement="top">
-                    :content="MQTTForm.params.ciphers.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 SSL 加密算法 ：
@@ -624,17 +397,8 @@
                 </el-row>
             </el-card>
         </el-form>
-      <el-form
+        <el-form ref="WebHookForm" :model="WebHookForm" label-width="180px" :rules="ruleWebHook">
-        ref="WebHookForm"
+            <el-card style="padding-bottom: 10px; margin-top: 10px" v-if="WebHookForm.params" v-show="openWebView">
-        :model="WebHookForm"
-        label-width="180px"
-        :rules="ruleWebHook"
-      >
-        <el-card
-          style="padding-bottom: 10px; margin-top: 10px"
-          v-if="WebHookForm.params"
-          v-show="openWebView"
-        >
                 <div slot="header" class="clearfix">
                     <span>具体信息</span>
                 </div>
@@ -642,59 +406,37 @@
                     <el-col :span="12">
                         <el-form-item prop="params.url.default">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="WebHookForm.params.url.description.zh" placement="top">
-                    :content="WebHookForm.params.url.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 请求 URL：
                             </span>
-                <el-input
+                            <el-input v-model="WebHookForm.params.url.default" placeholder="http://" />
-                  v-model="WebHookForm.params.url.default"
-                  placeholder="http://"
-                />
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="请求方法：">
                             <span slot="label">
-                  <el-tooltip
+                                <el-tooltip :content="WebHookForm.params.method.description.zh" placement="top">
-                    :content="WebHookForm.params.method.description.zh"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                                 请求方法：
                             </span>
                             <el-select v-model="WebHookForm.params.method.default">
-                  <el-option
+                                <el-option v-for="(enums, index) in WebHookForm.params.method.enum" :key="index" :label="enums" :value="enums"></el-option>
-                    v-for="(enums, index) in WebHookForm.params.method.enum"
-                    :key="index"
-                    :label="enums"
-                    :value="enums"
-                  ></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="20">
                         <el-form-item label="请求头：" prop="ket_value">
-                <el-row
+                            <el-row v-for="(item, index) in ket_value" :key="index" style="margin-bottom: 10px">
-                  v-for="(item, index) in ket_value"
-                  :key="index"
-                  style="margin-bottom: 10px"
-                >
                                 <el-col :span="8">
                                     <el-input v-model="item.key" placeholder="键" />
                                 </el-col>
                                 <el-col :span="12" :offset="1">
                                     <el-input v-model="item.value" placeholder="值" />
                                 </el-col>
-                  <el-col :span="2" :offset="1" v-if="index != 0"
+                                <el-col :span="2" :offset="1" v-if="index != 0"><a style="color: #f56c6c" @click="removeHeaderItem(index)">删除</a></el-col>
-                    ><a style="color: #f56c6c" @click="removeHeaderItem(index)"
-                      >删除</a
-                    ></el-col
-                  >
                             </el-row>
                             <div>
                                 +
@@ -712,27 +454,9 @@
         </el-form>
         <div slot="footer" class="dialog-footer">
             <el-button @click="cancel">取 消</el-button>
-        <el-button
+            <el-button type="success" @click="saveResource('EMQXForm')" v-if="openEMQXView" :loading="showloading">新建</el-button>
-          type="success"
+            <el-button type="success" @click="saveResource('MQTTForm')" v-if="openMQTTView" :loading="showloading">新建</el-button>
-          @click="saveResource('EMQXForm')"
+            <el-button type="success" @click="saveResource('WebHookForm')" v-if="openWebView" :loading="showloading">新建</el-button>
-          v-if="openEMQXView"
-          :loading="showloading"
-          >新建</el-button
-        >
-        <el-button
-          type="success"
-          @click="saveResource('MQTTForm')"
-          v-if="openMQTTView"
-          :loading="showloading"
-          >新建</el-button
-        >
-        <el-button
-          type="success"
-          @click="saveResource('WebHookForm')"
-          v-if="openWebView"
-          :loading="showloading"
-          >新建</el-button
-        >
         </div>
     </el-dialog>
 </div>
@@ -812,92 +536,78 @@ export default {
             ruleEMQX: {
                 params: {
                     address: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入EMQ X节点名称",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                     pool_size: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入连接池大小",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                     mountpoint: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入桥接挂载点",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                 },
             },
             ruleMQTT: {
                 params: {
                     address: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入远程 broker 地址",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                     mountpoint: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入桥接挂载点",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                     ssl: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请选择Bridge SSL",
                             trigger: "change",
-              },
+                        }, ],
-            ],
                     },
                     keepalive: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入心跳间隔",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                 },
             },
             ruleWebHook: {
                 params: {
                     url: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入请求 URL",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                 },
             },
             rule: {
                 resource: {
-          title: [
+                    title: [{
-            { required: true, message: "请选择资源类型", trigger: "change" },
+                        required: true,
-          ],
+                        message: "请选择资源类型",
+                        trigger: "change"
+                    }, ],
                 },
             },
         };

vue/src/views/iot/emqx/rule.vue

@@ -3,39 +3,16 @@
     <el-card style="padding-bottom: 100px">
         <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-          <el-button
+                <el-button type="success" plain icon="el-icon-refresh" size="mini" @click="getList" v-hasPermi="['monitor:rules:refresh']">刷新</el-button>
-            type="success"
-            plain
-            icon="el-icon-refresh"
-            size="mini"
-            @click="getList"
-            v-hasPermi="['monitor:rules:refresh']"
-            >刷新</el-button
-          >
             </el-col>
             <el-col :span="1.5">
-          <el-button
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="getAddRules" v-hasPermi="['monitor:rules:add']">新增</el-button>
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="getAddRules"
-            v-hasPermi="['monitor:rules:add']"
-            >新增</el-button
-          >
             </el-col>
         </el-row>
         <el-table v-loading="loading" :data="rulesList">
-        <el-table-column
+            <el-table-column label="ID" align="center" header-align="center" prop="id">
-          label="ID"
-          align="center"
-          header-align="center"
-          prop="id"
-        >
                 <template slot-scope="scope">
-            <el-link :underline="false" type="primary">{{
+                    <el-link :underline="false" type="primary">{{scope.row.id }}</el-link>
-              scope.row.id
-            }}</el-link>
                 </template>
             </el-table-column>
             <el-table-column label="主题" align="center" prop="for" width="120">
@@ -58,30 +35,12 @@
                     {{ scope.row.metrics[0].matched }}
                 </template>
             </el-table-column>
-        <el-table-column
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="150"
-        >
                 <template slot-scope="scope">
-            <el-button
+                    <el-button size="small" type="text" style="padding: 5px" v-hasPermi="['monitor:rules:query']" @click="handleQuery(scope.row)">
-              size="small"
-              type="text"
-              style="padding: 5px"
-              v-hasPermi="['monitor:rules:query']"
-              @click="handleQuery(scope.row)"
-            >
                         查看
                     </el-button>
-            <el-button
+                    <el-button size="small" type="text" icon="el-icon-delete" style="padding: 5px" v-hasPermi="['monitor:rules:delete']" @click="handleDelete(scope.row)">删除
-              size="small"
-              type="text"
-              icon="el-icon-delete"
-              style="padding: 5px"
-              v-hasPermi="['monitor:rules:delete']"
-              @click="handleDelete(scope.row)"
-              >删除
                     </el-button>
                 </template>
             </el-table-column>
@@ -89,12 +48,7 @@
     </el-card>
 
     <!-- 规则引擎详细 -->
-    <el-dialog
+    <el-dialog title="规则引擎详细" :visible.sync="openView" width="1200px" append-to-body>
-      title="规则引擎详细"
-      :visible.sync="openView"
-      width="1200px"
-      append-to-body
-    >
         <el-form ref="form" :model="form" label-width="120px" size="mini">
             <el-card style="padding-bottom: 10px">
                 <div slot="header" class="clearfix">
@@ -103,12 +57,7 @@
                 <el-row>
                     <el-col :span="20">
                         <el-form-item label="主题：">
-                <el-tag
+                            <el-tag type="success" v-for="(topic, index) in form.for" :key="index">{{ topic }}</el-tag>
-                  type="success"
-                  v-for="(topic, index) in form.for"
-                  :key="index"
-                  >{{ topic }}</el-tag
-                >
                         </el-form-item>
                     </el-col>
                     <el-col :span="20">
@@ -127,16 +76,8 @@
                     <el-table-column label="节点" align="center" prop="node" />
                     <el-table-column label="已命中" align="center" prop="matched" />
                     <el-table-column label="命中速度" align="center" prop="speed" />
-            <el-table-column
+                    <el-table-column label="最大命中速度" align="center" prop="speed_max" />
-              label="最大命中速度"
+                    <el-table-column label="5分钟平均速度" align="center" prop="speed_last5m" />
-              align="center"
-              prop="speed_max"
-            />
-            <el-table-column
-              label="5分钟平均速度"
-              align="center"
-              prop="speed_last5m"
-            />
                 </el-table>
             </el-card>
             <el-card style="padding-bottom: 10px; margin-top: 10px">
@@ -152,14 +93,9 @@
                     </el-table-column>
                     <el-table-column label="度量指标" align="center">
                         <template slot-scope="scope">
-                <el-tag type="success">{{ scope.row.metrics[0].node }}</el-tag
+                            <el-tag type="success">{{ scope.row.metrics[0].node }}</el-tag><br />
-                ><br />
+                            合计： 成功：<el-tag type="success">{{ scope.row.metrics[0].success  }}</el-tag>
-                合计： 成功：<el-tag type="success">{{
+                            失败：<el-tag type="danger">{{ scope.row.metrics[0].failed  }}</el-tag>
-                  scope.row.metrics[0].success
-                }}</el-tag>
-                失败：<el-tag type="danger">{{
-                  scope.row.metrics[0].failed
-                }}</el-tag>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -171,109 +107,62 @@
     </el-dialog>
 
     <!-- 添加规则引擎 -->
-    <el-dialog
+    <el-dialog title="资源管理" :visible.sync="openAddView" width="1000px" append-to-body :before-close="cancel">
-      title="资源管理"
-      :visible.sync="openAddView"
-      width="1500px"
-      append-to-body
-      :before-close="cancel"
-    >
         <el-form ref="form" :model="form" label-width="180px">
             <el-card style="padding-bottom: 10px">
                 <div slot="header" class="clearfix">
-            <span
+                    <span>
-              ><h2>条件</h2>
+                        <h2>条件</h2>
-              <h6>使用 SQL 定义规则条件与数据处理方式</h6></span
+                        <h6>使用 SQL 定义规则条件与数据处理方式</h6>
-            >
+                    </span>
                 </div>
                 <el-row :gutter="50">
                     <el-col :span="12">
                         <el-form-item prop="sql_example">
                             <span slot="label"> 规则 SQL： </span>
-                <CodeMirrorEditor
+                            <CodeMirrorEditor :value="form.sql_example" myMode="text/x-mysql" height="420" />
-                  :value="form.sql_example"
-                  myMode="text/x-mysql"
-                  height="420"
-                />
                         </el-form-item>
                         <el-form-item prop="sql_example">
                             <span slot="label"> 备注： </span>
-                <el-input
+                            <el-input v-model="form.note" placeholder="e.g.消息转发到WebHook" />
-                  v-model="form.note"
-                  placeholder="e.g.消息转发到WebHook"
-                />
                         </el-form-item>
                         <el-form-item prop="SQLtest">
                             <span slot="label">
                                 SQL测试：
-                  <el-tooltip
+                                <el-tooltip content="自定义模拟数据进行 SQL 命令测试，仅用于测试功能" placement="top">
-                    content="自定义模拟数据进行 SQL 命令测试，仅用于测试功能"
-                    placement="top"
-                  >
                                     <i class="el-icon-question"></i>
                                 </el-tooltip>
                             </span>
-                <el-switch
+                            <el-switch v-model="form.SQLtest" active-text="" inactive-text="" :active-value="true" :inactive-value="false" active-color="#13ce66">
-                  v-model="form.SQLtest"
-                  active-text=""
-                  inactive-text=""
-                  :active-value="true"
-                  :inactive-value="false"
-                  active-color="#13ce66"
-                >
                             </el-switch>
                         </el-form-item>
                         <div v-if="form.SQLtest">
-                <el-form-item
+                            <el-form-item prop="test_columns.username" v-if="form.test_columns">
-                  prop="test_columns.username"
-                  v-if="form.test_columns"
-                >
                                 <span slot="label"> username： </span>
                                 <el-input v-model="form.test_columns.username" />
                             </el-form-item>
-                <el-form-item
+                            <el-form-item prop="test_columns.topic" v-if="form.test_columns">
-                  prop="test_columns.topic"
-                  v-if="form.test_columns"
-                >
                                 <span slot="label"> topic： </span>
                                 <el-input v-model="form.test_columns.topic" />
                             </el-form-item>
-                <el-form-item
+                            <el-form-item prop="test_columns.qos" v-if="form.test_columns">
-                  prop="test_columns.qos"
-                  v-if="form.test_columns"
-                >
                                 <span slot="label"> qos： </span>
                                 <el-input v-model="form.test_columns.qos" />
                             </el-form-item>
-                <el-form-item
+                            <el-form-item prop="test_columns.clientid" v-if="form.test_columns">
-                  prop="test_columns.clientid"
-                  v-if="form.test_columns"
-                >
                                 <span slot="label"> clientid： </span>
                                 <el-input v-model="form.test_columns.clientid" />
                             </el-form-item>
-                <el-form-item
+                            <el-form-item prop="test_columns.payload" v-if="form.test_columns">
-                  prop="test_columns.payload"
-                  v-if="form.test_columns"
-                >
                                 <span slot="label"> payload： </span>
-                  <CodeMirrorEditor
+                                <CodeMirrorEditor :value="form.test_columns.payload" myMode="application/json" height="150" />
-                    :value="form.test_columns.payload"
-                    myMode="application/json"
-                    height="150"
-                  />
                             </el-form-item>
                             <el-form-item v-if="form.test_columns">
-                  <el-button @click="testConnect" type="success" size="mini"
+                                <el-button @click="testConnect" type="success" size="mini">测 试</el-button>
-                    >测 试</el-button
-                  >
                             </el-form-item>
                             <el-form-item v-if="form.test_columns">
                                 <span slot="label"> 测试结果： </span>
-                  <textarea
+                                <textarea style="width: 497px; height: 70px" v-model="content">
-                    style="width: 497px; height: 70px"
-                    v-model="content"
-                  >
                   </textarea>
                             </el-form-item>
                         </div>
@@ -282,10 +171,7 @@
                         <div class="sql-tips">
                             <div class="title">编写 SQL 进行条件过滤与数据处理</div>
                             <div class="el-scrollbar">
-                  <div
+                                <div class="doc-wrapper" style="margin-bottom: -17px; margin-right: -17px">
-                    class="doc-wrapper"
-                    style="margin-bottom: -17px; margin-right: -17px"
-                  >
                                     <div class="el-scrollbar__view">
                                         <div>
                                             <p>
@@ -323,11 +209,9 @@
                                                 的设备并获取连接信息：
                                             </p>
                                             <div class="code">
-                          <code
+                                                <code>SELECT clientid, connected_at FROM
-                            >SELECT clientid, connected_at FROM
                                                     "$events/client_connected" WHERE username =
-                            'emqx'</code
+                                                    'emqx'</code>
-                          >
                                             </div>
                                             <p>规则引擎和 SQL 语句的详细教程参见 EMQ X 文档。</p>
                                         </div>
@@ -341,10 +225,10 @@
         </el-form>
         <el-card style="padding-bottom: 10px">
             <div slot="header" class="clearfix">
-          <span
+                <span>
-            ><h2>响应动作</h2>
+                    <h2>响应动作</h2>
-            <h6>处理命中规则的消息</h6></span
+                    <h6>处理命中规则的消息</h6>
-          >
+                </span>
             </div>
             <el-table ref="singleTable" :data="actions" highlight-current-row>
                 <el-table-column property="name" label="类型"> </el-table-column>
@@ -355,12 +239,7 @@
                 </el-table-column>
                 <el-table-column label="操作">
                     <template slot-scope="scope">
-              <el-button
+                        <el-button size="mini" type="danger" @click="deleteAction(scope.$index)">删除</el-button>
-                size="mini"
-                type="danger"
-                @click="deleteAction(scope.$index)"
-                >删除</el-button
-              >
                     </template>
                 </el-table-column>
             </el-table>
@@ -370,27 +249,13 @@
         </el-card>
         <div slot="footer" class="dialog-footer">
             <el-button @click="cancel">取 消</el-button>
-        <el-button type="success" @click="saveRule" :loading="addRuleLoading"
+            <el-button type="success" @click="saveRule" :loading="addRuleLoading">新建</el-button>
-          >新建</el-button
-        >
         </div>
     </el-dialog>
 
     <!-- 添加响应动作 -->
-    <el-dialog
+    <el-dialog title="响应动作" :visible.sync="openAddActionView" width="700px" append-to-body :before-close="cancelAction">
-      title="响应动作"
+        <el-form ref="actionForm" :model="actionForm" label-width="180px" v-if="actionForm.actions" :rules="ruleActions">
-      :visible.sync="openAddActionView"
-      width="700px"
-      append-to-body
-      :before-close="cancelAction"
-    >
-      <el-form
-        ref="actionForm"
-        :model="actionForm"
-        label-width="180px"
-        v-if="actionForm.actions"
-        :rules="ruleActions"
-      >
             <el-row>
                 <el-col :span="20">
                     <el-form-item prop="actions.title">
@@ -400,40 +265,21 @@
                                 <i class="el-icon-question"></i>
                             </el-tooltip>
                         </span>
-              <el-select
+                        <el-select v-model="actionForm.actions.title" @change="selectTitle" placeholder="请选择">
-                v-model="actionForm.actions.title"
+                            <el-option v-for="(action, index) in actionForm.actions" :key="index" :label="action.title.zh" :value="action.name"></el-option>
-                @change="selectTitle"
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="(action, index) in actionForm.actions"
-                  :key="index"
-                  :label="action.title.zh"
-                  :value="action.name"
-                ></el-option>
                         </el-select>
                     </el-form-item>
                 </el-col>
             </el-row>
         </el-form>
 
-      <el-form
+        <el-form ref="republishForm" :model="republishForm" label-width="180px" v-if="republishForm.params" v-show="republishView" :rules="ruleRepublish">
-        ref="republishForm"
-        :model="republishForm"
-        label-width="180px"
-        v-if="republishForm.params"
-        v-show="republishView"
-        :rules="ruleRepublish"
-      >
             <el-row>
                 <el-col :span="20">
                     <el-form-item prop="params.target_topic.default">
                         <span slot="label">
                             目的主题：
-                <el-tooltip
+                            <el-tooltip :content="republishForm.params.target_topic.description.zh" placement="top">
-                  :content="republishForm.params.target_topic.description.zh"
-                  placement="top"
-                >
                                 <i class="el-icon-question"></i>
                             </el-tooltip>
                         </span>
@@ -442,10 +288,7 @@
                     <el-form-item prop="params.target_qos.default">
                         <span slot="label">
                             目的 QoS：
-                <el-tooltip
+                            <el-tooltip :content="republishForm.params.target_qos.description.zh" placement="top">
-                  :content="republishForm.params.target_qos.description.zh"
-                  placement="top"
-                >
                                 <i class="el-icon-question"></i>
                             </el-tooltip>
                         </span>
@@ -454,109 +297,61 @@
                     <el-form-item prop="params.payload_tmpl.default">
                         <span slot="label">
                             消息内容模板：
-                <el-tooltip
+                            <el-tooltip :content="republishForm.params.payload_tmpl.description.zh" placement="top">
-                  :content="republishForm.params.payload_tmpl.description.zh"
-                  placement="top"
-                >
                                 <i class="el-icon-question"></i>
                             </el-tooltip>
                         </span>
-              <textarea
+                        <textarea style="width: 300px; height: 120px" v-model="republishForm.params.payload_tmpl.default"></textarea>
-                style="width: 300px; height: 120px"
-                v-model="republishForm.params.payload_tmpl.default"
-              ></textarea>
                     </el-form-item>
                 </el-col>
             </el-row>
         </el-form>
 
-      <el-form
+        <el-form ref="data_to_mqtt_broker_Form" :model="data_to_mqtt_broker_Form" label-width="180px" v-if="data_to_mqtt_broker_Form.params" v-show="data_to_mqtt_broker_View" :rules="rule_data_to_mqtt_broker">
-        ref="data_to_mqtt_broker_Form"
-        :model="data_to_mqtt_broker_Form"
-        label-width="180px"
-        v-if="data_to_mqtt_broker_Form.params"
-        v-show="data_to_mqtt_broker_View"
-        :rules="rule_data_to_mqtt_broker"
-      >
             <el-row>
                 <el-col :span="20">
                     <el-form-item prop="resourceId">
                         <span slot="label"> 关联资源： </span>
-              <el-select
+                        <el-select v-model="data_to_mqtt_broker_Form.resourceId" placeholder="请选择">
-                v-model="data_to_mqtt_broker_Form.resourceId"
+                            <el-option v-for="(
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="(
                     resource, index
-                  ) in data_to_mqtt_broker_Form.resources"
+                  ) in data_to_mqtt_broker_Form.resources" :key="index" :label="resource.id" :value="resource.id"></el-option>
-                  :key="index"
-                  :label="resource.id"
-                  :value="resource.id"
-                ></el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item prop="params.payload_tmpl.default">
                         <span slot="label">
                             消息内容模板：
-                <el-tooltip
+                            <el-tooltip :content="
-                  :content="
                     data_to_mqtt_broker_Form.params.payload_tmpl.description.zh
-                  "
+                  " placement="top">
-                  placement="top"
-                >
                                 <i class="el-icon-question"></i>
                             </el-tooltip>
                         </span>
-              <textarea
+                        <textarea style="width: 300px; height: 120px" v-model="data_to_mqtt_broker_Form.params.payload_tmpl.default"></textarea>
-                style="width: 300px; height: 120px"
-                v-model="data_to_mqtt_broker_Form.params.payload_tmpl.default"
-              ></textarea>
                     </el-form-item>
                 </el-col>
             </el-row>
         </el-form>
 
-      <el-form
+        <el-form ref="data_to_webserver_Form" :model="data_to_webserver_Form" label-width="180px" v-if="data_to_webserver_Form.params" v-show="data_to_webserver_View" :rules="rule_data_to_webserver">
-        ref="data_to_webserver_Form"
-        :model="data_to_webserver_Form"
-        label-width="180px"
-        v-if="data_to_webserver_Form.params"
-        v-show="data_to_webserver_View"
-        :rules="rule_data_to_webserver"
-      >
             <el-row>
                 <el-col :span="20">
                     <el-form-item prop="resourceId">
                         <span slot="label"> 关联资源： </span>
-              <el-select
+                        <el-select v-model="data_to_webserver_Form.resourceId" placeholder="请选择">
-                v-model="data_to_webserver_Form.resourceId"
+                            <el-option v-for="(resource, index) in data_to_webserver_Form.resources" :key="index" :label="resource.id" :value="resource.id"></el-option>
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="(resource, index) in data_to_webserver_Form.resources"
-                  :key="index"
-                  :label="resource.id"
-                  :value="resource.id"
-                ></el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item prop="params.payload_tmpl.default">
                         <span slot="label">
                             消息内容模板：
-                <el-tooltip
+                            <el-tooltip :content="
-                  :content="
                     data_to_webserver_Form.params.payload_tmpl.description.zh
-                  "
+                  " placement="top">
-                  placement="top"
-                >
                                 <i class="el-icon-question"></i>
                             </el-tooltip>
                         </span>
-              <textarea
+                        <textarea style="width: 300px; height: 120px" v-model="data_to_webserver_Form.params.payload_tmpl.default"></textarea>
-                style="width: 300px; height: 120px"
-                v-model="data_to_webserver_Form.params.payload_tmpl.default"
-              ></textarea>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -564,41 +359,11 @@
 
         <div slot="footer" class="dialog-footer">
             <el-button @click="cancelAction">取 消</el-button>
-        <el-button
+            <el-button type="success" @click="saveAction('republishForm')" v-if="republishView" :loading="showloading">新建</el-button>
-          type="success"
+            <el-button type="success" @click="saveAction('data_to_mqtt_broker_Form')" v-if="data_to_mqtt_broker_View" :loading="showloading">新建</el-button>
-          @click="saveAction('republishForm')"
+            <el-button type="success" @click="saveAction('data_to_webserver_Form')" v-if="data_to_webserver_View" :loading="showloading">新建</el-button>
-          v-if="republishView"
+            <el-button type="success" @click="saveAction('do_nothing_Form')" v-if="do_nothing_View" :loading="showloading">新建</el-button>
-          :loading="showloading"
+            <el-button type="success" @click="saveAction('inspectForm')" v-if="inspectView" :loading="showloading">新建</el-button>
-          >新建</el-button
-        >
-        <el-button
-          type="success"
-          @click="saveAction('data_to_mqtt_broker_Form')"
-          v-if="data_to_mqtt_broker_View"
-          :loading="showloading"
-          >新建</el-button
-        >
-        <el-button
-          type="success"
-          @click="saveAction('data_to_webserver_Form')"
-          v-if="data_to_webserver_View"
-          :loading="showloading"
-          >新建</el-button
-        >
-        <el-button
-          type="success"
-          @click="saveAction('do_nothing_Form')"
-          v-if="do_nothing_View"
-          :loading="showloading"
-          >新建</el-button
-        >
-        <el-button
-          type="success"
-          @click="saveAction('inspectForm')"
-          v-if="inspectView"
-          :loading="showloading"
-          >新建</el-button
-        >
         </div>
     </el-dialog>
 </div>
@@ -670,43 +435,51 @@ export default {
             // 响应动作规则
             ruleActions: {
                 actions: {
-          title: [
+                    title: [{
-            { required: true, message: "请选择动作类型", trigger: "change" },
+                        required: true,
-          ],
+                        message: "请选择动作类型",
+                        trigger: "change"
+                    }, ],
                 },
             },
             ruleRepublish: {
                 params: {
                     target_topic: {
-            default: [
+                        default: [{
-              { required: true, message: "请输入目的主题", trigger: "blur" },
+                            required: true,
-            ],
+                            message: "请输入目的主题",
+                            trigger: "blur"
+                        }, ],
                     },
                     target_qos: {
-            default: [
+                        default: [{
-              { required: true, message: "请输入目的 QoS", trigger: "blur" },
+                            required: true,
-            ],
+                            message: "请输入目的 QoS",
+                            trigger: "blur"
+                        }, ],
                     },
                     payload_tmpl: {
-            default: [
+                        default: [{
-              {
                             required: true,
                             message: "请输入消息内容模板",
                             trigger: "blur",
-              },
+                        }, ],
-            ],
                     },
                 },
             },
             rule_data_to_mqtt_broker: {
-        resourceId: [
+                resourceId: [{
-          { required: true, message: "请关联资源类型", trigger: "blur" },
+                    required: true,
-        ],
+                    message: "请关联资源类型",
+                    trigger: "blur"
+                }, ],
             },
             rule_data_to_webserver: {
-        resourceId: [
+                resourceId: [{
-          { required: true, message: "请关联资源类型", trigger: "change" },
+                    required: true,
-        ],
+                    message: "请关联资源类型",
+                    trigger: "change"
+                }, ],
             },
             //空动作 (调试)表单参数
             do_nothing_Form: {},
@@ -941,7 +714,9 @@ export default {
         //公共方法
         insertOrTestRule(type) {
             //将需要的参数进行赋值
-      const ruleParam = { ctx: {} };
+            const ruleParam = {
+                ctx: {}
+            };
             ruleParam.description = this.form.note;
             ruleParam.rawsql = this.form.sql_example;
             ruleParam.actions = this.actions;
@@ -977,35 +752,43 @@ export default {
     },
 };
 </script>
+
 <style scoped>
 .sql-tips {
     border: 4px dashed #d8d8d8;
     color: #71737d;
 }
+
 .sql-tips {
     padding: 20px 0;
     border-radius: 4px;
     font-size: 15px;
     max-height: 480px;
 }
+
 .sql-tips .title {
     padding: 0 20px 12px;
 }
+
 .el-scrollbar {
     overflow: hidden;
     position: relative;
 }
+
 .sql-tips .doc-wrapper {
     max-height: 400px;
     padding: 0 20px;
 }
+
 .sql-tips .el-scrollbar__wrap {
     overflow-x: hidden;
 }
+
 .el-scrollbar__wrap {
     overflow: scroll;
     height: 100%;
 }
+
 p {
     display: block;
     margin-block-start: 1em;
@@ -1013,12 +796,14 @@ p {
     margin-inline-start: 0px;
     margin-inline-end: 0px;
 }
+
 .code {
     line-height: 1.4;
     padding: 6px;
     border-radius: 4px;
     margin-bottom: 12px;
 }
+
 .code {
     background-color: hsla(0, 0%, 87%, 0.8);
 }

vue/vue.config.js

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