发布v1.1版本

This commit is contained in:
kerwincui
2022-03-16 14:10:16 +08:00
parent 808b7a20bf
commit 8b9b34ce41
835 changed files with 99635 additions and 0 deletions

View File

@@ -0,0 +1,136 @@
<template>
<div style="padding:6px;">
<el-card v-show="showSearch" style="margin-bottom:6px;">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
<el-form-item label="客户端" prop="categoryName">
<el-input v-model="queryParams.categoryName" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card style="padding-bottom:100px;">
<el-table v-loading="loading" :data="clientList">
<el-table-column label="客户端ID" align="left" header-align="center" prop="clientid">
<template slot-scope="scope">
<el-link :underline="false" type="primary">{{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 type="danger" v-if="scope.row.clientid.indexOf('server')==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>
<el-table-column label="连接状态" align="center" prop="connected">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.connected">已连接</el-tag>
<el-tag type="info" v-else>已断开</el-tag>
</template>
</el-table-column>
<el-table-column label="心跳(秒)" align="center" prop="keepalive" width="100" />
<el-table-column label="会话过期间隔" align="center" prop="expiry_interval" width="100" />
<el-table-column label="当前订阅数量" align="center" prop="subscriptions_cnt" width="100" />
<el-table-column label="连接时间" align="center" prop="connected_at" />
<el-table-column label="会话创建时间" align="center" prop="created_at" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button size="small" type="danger" v-if="scope.row.connected" style="padding:5px;" v-hasPermi="['monitor:online:edit']">
<svg-icon icon-class="disconnect" /> 断开连接
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
<!-- 添加或修改产品分类对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
</el-form-item>
<el-form-item label="显示顺序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
import {
listMqttClient
} from "@/api/iot/emqx"
export default {
name: "Category",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 产品分类表格数据
clientList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
_limit: 10,
_page: 1,
},
// 表单参数
form: {},
};
},
created() {
this.getList();
},
methods: {
/** 查询客户端列表 */
getList() {
this.loading = true;
listMqttClient(this.queryParams).then(response => {
this.clientList = response.data.data;
this.total = response.data.meta.count;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
}
};
</script>

View File

@@ -0,0 +1,80 @@
<template>
<div style="padding:6px;">
<el-card style="padding-bottom:100px;">
<el-table v-loading="loading" :data="listenerList">
<el-table-column label="协议" align="center" prop="protocol" />
<el-table-column label="监听地址" align="center" prop="listen_on" />
<el-table-column label="最大连接数" align="center" prop="max_conns" />
<el-table-column label="当前连接数" align="center" prop="current_conns"/>
<el-table-column label="连接成功数" align="center" prop="acceptors" />
<el-table-column label="账号错误数" align="center" prop="shutdown_count.bad_username_or_password" />
<el-table-column label="功能错误数" align="center" prop="shutdown_count.function_clause" />
<el-table-column label="SSL关闭数" align="center" prop="shutdown_count.ssl_closed" />
</el-table>
<!-- 添加或修改产品分类对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
</el-form-item>
<el-form-item label="显示顺序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
import{listMqttListener} from "@/api/iot/emqx"
export default {
name: "Category",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 列表
listenerList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 表单参数
form: {},
};
},
created() {
this.getList();
},
methods: {
/** 查询客户端列表 */
getList() {
this.loading = true;
listMqttListener().then(response => {
this.listenerList=response.data.data[0].listeners;
console.log(response);
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
}
};
</script>

View File

@@ -0,0 +1,133 @@
<template>
<div style="padding:6px;">
<el-card style="padding-bottom:100px;">
<el-table v-loading="loading" :data="pluginList">
<el-table-column label="插件名称" align="center" prop="name" width="300" />
<el-table-column label="版本" align="center" prop="version" width="100" />
<el-table-column label="类型" align="center" prop="type" width="120" />
<el-table-column label="状态" align="center" prop="active" width="150">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.active">运行中</el-tag>
<el-tag type="info" v-else>已停止</el-tag>
</template>
</el-table-column>
<el-table-column label="描述" align="left" prop="description" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button size="small" type="success" style="padding:5px;" @click="loadMqttPlugin(scope.row.name)" v-if="!scope.row.active" v-hasPermi="['monitor:online:edit']">
<svg-icon icon-class="start" /> 启动
</el-button>
<el-button size="small" type="danger" style="padding:5px;" @click="unloadMqttPlugin(scope.row.name)" v-else v-hasPermi="['monitor:online:edit']">
<svg-icon icon-class="stop" /> 停止
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改产品分类对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
</el-form-item>
<el-form-item label="显示顺序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
import {
listMqttPlugin,
loadMqttPlugin,
unloadMqttPlugin
} from "@/api/iot/emqx"
export default {
name: "Category",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 列表
pluginList: [],
// 节点名称
node: "",
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 表单参数
form: {},
};
},
created() {
this.getList();
},
methods: {
/** 查询客户端列表 */
getList() {
this.loading = true;
listMqttPlugin().then(response => {
this.pluginList = response.data.data[0].plugins;
this.node = response.data.data[0].node;
this.loading = false;
});
},
/** 启用插件*/
loadMqttPlugin(plugin) {
this.$confirm('是否启用插件:' + plugin + ' ?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
loadMqttPlugin(this.node, plugin).then(response => {
if (response.data.code == 0) {
this.getList();
this.$message({
type: 'success',
message: '成功启用插件!'
});
}
})
}).catch(() => {});
},
/** 卸载插件*/
unloadMqttPlugin(plugin) {
this.$confirm('是否停止插件:' + plugin + ' ?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
unloadMqttPlugin(this.node, plugin).then(response => {
if (response.data.code == 0) {
this.getList();
this.$message({
type: 'success',
message: '成功停止插件!'
});
}
})
}).catch(() => {});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
}
};
</script>

View File

@@ -0,0 +1,123 @@
<template>
<div style="padding:6px;">
<el-card v-show="showSearch" style="margin-bottom:6px;">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
<el-form-item label="客户端" prop="categoryName">
<el-input v-model="queryParams.categoryName" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card style="padding-bottom:100px;">
<el-table v-loading="loading" :data="subscribeList">
<el-table-column label="类型" align="center" prop="type" width="150">
<template slot-scope="scope">
<el-tag type="danger" v-if="scope.row.clientid.indexOf('server')==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>
<el-table-column label="主题" align="left" header-align="center" prop="topic">
<template slot-scope="scope">
<span style="font-weight:bold">{{scope.row.topic}}</span>
</template>
</el-table-column>
<el-table-column label="客户端ID" align="center" header-align="center" prop="clientid">
<template slot-scope="scope">
<el-link :underline="false">{{scope.row.clientid}}</el-link>
</template>
</el-table-column>
<el-table-column label="Qos" align="center" prop="qos" width="100" />
<el-table-column label="节点" align="center" prop="node" />
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
<!-- 添加或修改产品分类对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
</el-form-item>
<el-form-item label="显示顺序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
import {
listMqttSubscribe
} from "@/api/iot/emqx"
export default {
name: "Category",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 列表
subscribeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
_limit: 10,
_page: 1,
},
// 表单参数
form: {},
};
},
created() {
this.getList();
},
methods: {
/** 查询客户端列表 */
getList() {
this.loading = true;
listMqttSubscribe(this.queryParams).then(response => {
this.subscribeList = response.data.data;
this.total = response.data.meta.count;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
}
};
</script>

View File

@@ -0,0 +1,103 @@
<template>
<div style="padding:6px;">
<el-card v-show="showSearch" style="margin-bottom:6px;">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
<el-form-item label="主题" prop="categoryName">
<el-input v-model="queryParams.categoryName" placeholder="请输入主题" clearable size="small" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card style="padding-bottom:100px;">
<el-table v-loading="loading" :data="topicList">
<el-table-column label="节点" align="center" prop="node" width="300"/>
<el-table-column label="主题" align="left" prop="topic" />
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
<!-- 添加或修改产品分类对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
</el-form-item>
<el-form-item label="显示顺序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
import{listMqttTopic} from "@/api/iot/emqx"
export default {
name: "Category",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 列表
topicList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
_limit: 10,
_page: 1,
},
// 表单参数
form: {},
};
},
created() {
this.getList();
},
methods: {
/** 查询客户端列表 */
getList() {
this.loading = true;
listMqttTopic(this.queryParams).then(response => {
this.topicList=response.data.data;
this.total=response.data.meta.count;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
}
};
</script>