<template>
|
<div class="mqtt-gateway">
|
<el-form :model="mqttForm" ref="mqttForm">
|
<div class="title form-item">网络设置</div>
|
|
<el-form-item class="form-item">
|
<switchBar
|
:barName="`MOTT网关`"
|
:value="mqttForm.enable"
|
@switchChange="switchChange('enable', arguments)"
|
></switchBar>
|
</el-form-item>
|
|
<div class="block">
|
<el-form-item class="form-item">
|
<div class="item-title">IP地址</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="mqttForm.ip"
|
@on-blur="mqttForm.ip = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">端口号</div>
|
<div class="inputContain">
|
<el-input
|
v-model="mqttForm.port"
|
placeholder="请输入用户名"
|
size="small"
|
></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
|
<div class="block">
|
<el-form-item class="form-item">
|
<div class="item-title">名称</div>
|
<div class="inputContain">
|
<el-input
|
v-model="mqttForm.username"
|
placeholder="请输入用户名"
|
size="small"
|
></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">密码</div>
|
<div class="inputContain">
|
<el-input
|
v-model="mqttForm.password"
|
placeholder="请输入密码"
|
size="small"
|
show-password
|
auto-complete="new-password"
|
></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
|
<div class="block">
|
<el-form-item class="form-item">
|
<switchBar
|
:barName="`匿名用户`"
|
:value="mqttForm.anonymousEnable"
|
@switchChange="switchChange('anonymousEnable', arguments)"
|
></switchBar>
|
</el-form-item>
|
</div>
|
</el-form>
|
|
<div class="ok" @click="saveList">保存</div>
|
</div>
|
</template>
|
|
<script>
|
import ipInput from "../components/IPInput";
|
import switchBar from "../components/switchBar";
|
import { getMqtt, saveMqtt } from "@/api/system";
|
export default {
|
name: "mqttGateway",
|
created() {
|
this.getList();
|
},
|
data() {
|
return {
|
accessible: false,
|
mqttForm: {
|
enable: "",
|
anonymousEnable: "",
|
},
|
};
|
},
|
components: {
|
switchBar,
|
ipInput,
|
},
|
methods: {
|
async getList() {
|
const res = await getMqtt();
|
this.mqttForm = { ...res.data };
|
},
|
async saveList() {
|
const res = await saveMqtt(this.mqttForm);
|
console.log(res);
|
},
|
switchChange(tar, arr) {
|
this.mqttForm[tar] = arr[0];
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
@import "../asset/common.scss";
|
.mqtt-gateway {
|
display: flex;
|
flex-direction: column;
|
.block {
|
margin-top: 16px;
|
}
|
}
|
</style>
|
