zishuo/FastBee
1
0
Fork 0
mirror of https://github.com/kerwincui/FastBee.git synced 2025-10-14 20:25:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

EMQX模块前端优化

Browse Source
This commit is contained in:
sxh
2022-04-22 14:25:04 +08:00
parent 83d3e58bb3
commit 7a83ba8984
4 changed files with 62 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
vue/src/components/Codemirror/index.vue
View File

@@ -63,9 +63,6 @@ export default {
this.editor.setValue(this.value);
}
},
height(value) {
this.editor.setSize("auto", this.height);
},
},
mounted() {
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {

103
vue/src/views/iot/emqx/client.vue
View File

@@ -53,78 +53,53 @@
<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="800px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
<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="120px" 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">
<el-descriptions class="margin-top" title="基本信息" :column="4" direction="vertical">
<el-descriptions-item label="节点">{{form.node }}</el-descriptions-item>
<el-descriptions-item label="客户端ID">{{form.clientid}}</el-descriptions-item>
<el-descriptions-item label="Clean Session">{{form.clean_start}}</el-descriptions-item>
<el-descriptions-item label="会话过期间隔(秒)">{{form.expiry_interval}}</el-descriptions-item>
<el-descriptions-item label="用户名">{{form.username}}</el-descriptions-item>
<el-descriptions-item label="协议类型">{{form.proto_ver}}</el-descriptions-item>
<el-descriptions-item label="会话创建时间">{{form.created_at}}</el-descriptions-item>
<el-descriptions-item label="订阅数量">{{ form.subscriptions_cnt }}/{{form.max_subscriptions}}</el-descriptions-item>
<el-descriptions-item label="IP地址">{{form.ip_address}}</el-descriptions-item>
<el-descriptions-item label="端口">{{form.port}}</el-descriptions-item>
<el-descriptions-item label="最大订阅数量">{{form.max_subscriptions}}</el-descriptions-item>
<el-descriptions-item label="飞行窗口">{{ form.inflight }}/{{ form.max_inflight }}</el-descriptions-item>
<el-descriptions-item label="心跳(秒)">{{form.keepalive}}</el-descriptions-item>
<el-descriptions-item label="是否为桥接">{{form.is_bridge}}</el-descriptions-item>
<el-descriptions-item label="最大飞行窗口">{{form.max_inflight}}</el-descriptions-item>
<el-descriptions-item label="消息队列">{{ form.mqueue_len }}/{{ form.max_mqueue }}</el-descriptions-item>
<el-descriptions-item label="连接时间">{{form.connected_at}}</el-descriptions-item>
<el-descriptions-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-descriptions-item>
<el-descriptions-item label="最大消息队列">{{form.max_mqueue}}</el-descriptions-item>
<el-descriptions-item label="未确认的PUBREC数据包计数">{{form.awaiting_rel}}</el-descriptions-item>
<el-descriptions-item label="Zone">{{form.zone}}</el-descriptions-item>
<el-descriptions-item label="最大未确认的PUBREC数据包计数">{{form.max_awaiting_rel}}</el-descriptions-item>
<el-descriptions-item label="接收的TCP报文数量">{{form.recv_cnt}}</el-descriptions-item>
<el-descriptions-item label="接收的PUBLISH报文数量">{{form.recv_msg}}</el-descriptions-item>
<el-descriptions-item label="接收的字节数量">{{form.recv_oct}}</el-descriptions-item>
<el-descriptions-item label="接收的MQTT报文数量">{{form.recv_pkt}}</el-descriptions-item>
<el-descriptions-item label="发送的TCP报文数量">{{form.send_cnt}}</el-descriptions-item>
<el-descriptions-item label="发送的PUBLISH报文数量">{{form.send_msg}}</el-descriptions-item>
<el-descriptions-item label="发送的字节数量">{{form.send_oct}}</el-descriptions-item>
<el-descriptions-item label="发送的MQTT报文数量">{{form.send_pkt}}</el-descriptions-item>
</el-descriptions>
</el-form>
</el-tab-pane>
@@ -194,6 +169,8 @@ export default {
name: "Category",
data() {
return {
// 非单个禁用
single: true,
// 遮罩层
loading: true,
loadSubscribeing: true,

8
vue/src/views/iot/emqx/resource.vue
View File

@@ -32,7 +32,7 @@
</el-card>
<!-- 资源详细 -->
<el-dialog title="资源详细" :visible.sync="openView" width="700px" append-to-body>
<el-dialog title="资源详细" :visible.sync="openView" width="50%" 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">
@@ -96,7 +96,7 @@
</el-dialog>
<!-- 测试重连 -->
<el-dialog title="检测状态" :visible.sync="openStatusView" width="700px" append-to-body>
<el-dialog title="检测状态" :visible.sync="openStatusView" width="40%" 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]">
@@ -111,7 +111,7 @@
</el-dialog>
<!-- 添加资源 -->
<el-dialog title="资源管理" :visible.sync="openAddView" width="1000px" append-to-body :before-close="cancel">
<el-dialog title="资源管理" :visible.sync="openAddView" width="50%" 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">
@@ -335,7 +335,7 @@
</span>
<el-input v-model="MQTTForm.params.retry_interval.default" />
</el-form-item>
<el-form-item prop="resource[1].params.ssl.default">
<el-form-item prop="params.ssl.default">
<span slot="label">
<el-tooltip :content="MQTTForm.params.ssl.description.zh" placement="top">
<i class="el-icon-question"></i>

31
vue/src/views/iot/emqx/rule.vue
View File

@@ -107,7 +107,7 @@
</el-dialog>
<!-- 添加规则引擎 -->
<el-dialog title="资源管理" :visible.sync="openAddView" width="1000px" append-to-body :before-close="cancel">
<el-dialog title="资源管理" :visible.sync="openAddView" width="60%" 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">
@@ -155,7 +155,7 @@
</el-form-item>
<el-form-item prop="test_columns.payload" v-if="form.test_columns">
<span slot="label"> payload： </span>
<CodeMirrorEditor :value="form.test_columns.payload" myMode="application/json" height="150" />
<CodeMirrorEditor :value="form.test_columns.payload !==''?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>
@@ -254,7 +254,7 @@
</el-dialog>
<!-- 添加响应动作 -->
<el-dialog title="响应动作" :visible.sync="openAddActionView" width="700px" append-to-body :before-close="cancelAction">
<el-dialog title="响应动作" :visible.sync="openAddActionView" width="40%" 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">
@@ -318,7 +318,7 @@
) in data_to_mqtt_broker_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">
<el-form-item prop="params.payload_tmpl.default" v-if="data_to_mqtt_broker_Form.params.payload_tmpl">
<span slot="label">
消息内容模板：
<el-tooltip :content="
@@ -342,7 +342,7 @@
<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">
<el-form-item prop="params.payload_tmpl.default" v-if="data_to_webserver_Form.params.payload_tmpl">
<span slot="label">
消息内容模板：
<el-tooltip :content="
@@ -486,7 +486,8 @@ export default {
//检查 (调试)表单参数
inspectForm: {},
//消息重新发布表单参数
republishForm: {},
republishForm: {
},
//桥接数据到 MQTT Broker表单参数
data_to_mqtt_broker_Form: {
resources: [],
@@ -643,7 +644,7 @@ export default {
const param = {};
if ("do_nothing_Form" === formName) {
action.name = this.do_nothing_Form.name;
action.param = {};
action.params = {};
this.actions.push(action);
this.cancelAction();
} else if ("republishForm" === formName) {
@@ -654,7 +655,7 @@ export default {
param.target_topic = this.republishForm.params.target_topic.default;
param.target_qos = this.republishForm.params.target_qos.default;
action.name = this.republishForm.name;
action.param = param;
action.params = param;
this.actions.push(action);
this.cancelAction();
} else {
@@ -663,7 +664,7 @@ export default {
});
} else if ("inspectForm" === formName) {
action.name = this.inspectForm.name;
action.param = {};
action.params = {};
this.actions.push(action);
this.cancelAction();
} else if ("data_to_mqtt_broker_Form" === formName) {
@@ -671,9 +672,11 @@ export default {
this.$refs[formName].validate((valid) => {
if (valid) {
param.$resource = this.data_to_mqtt_broker_Form.resourceId;
param.payload_tmpl =
if(this.data_to_mqtt_broker_Form.params.payload_tmpl != null){
param.payload_tmpl =
this.data_to_mqtt_broker_Form.params.payload_tmpl.default;
action.param = param;
}
action.params = param;
action.name = this.data_to_mqtt_broker_Form.name;
this.actions.push(action);
this.cancelAction();
@@ -686,9 +689,11 @@ export default {
this.$refs[formName].validate((valid) => {
if (valid) {
param.$resource = this.data_to_webserver_Form.resourceId;
param.payload_tmpl =
if(this.data_to_webserver_Form.params.payload_tmpl != null){
param.payload_tmpl =
this.data_to_webserver_Form.params.payload_tmpl.default;
action.param = param;
}
action.params = param;
action.name = this.data_to_webserver_Form.name;
this.actions.push(action);
this.cancelAction();