185 lines
4.1 KiB
Vue
185 lines
4.1 KiB
Vue
<!-- 斥候网关配置 -->
|
|
<template>
|
|
<div>
|
|
<el-button type="info" plain @click="getShow">斥候网关配置</el-button>
|
|
<div class="gateway" v-show="isShow">
|
|
<div class="title">
|
|
<p class="title_l">新建网关</p>
|
|
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div class="content">
|
|
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item
|
|
label="网关名称:"
|
|
:label-width="formLabelWidth"
|
|
prop="gateway_name"
|
|
>
|
|
<el-select v-model="value1" placeholder="">
|
|
<el-option
|
|
v-for="item in options2"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item
|
|
label="网关ID:"
|
|
:label-width="formLabelWidth"
|
|
prop="gateway_id"
|
|
>
|
|
<el-input v-model="value" placeholder=""></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="footer">
|
|
<el-button type="primary" @click="innerVisible = true"
|
|
>保 存</el-button
|
|
>
|
|
|
|
<el-button @click="isShow = false">取 消</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-dialog
|
|
title="系统提示"
|
|
:visible.sync="innerVisible"
|
|
append-to-body
|
|
width="382px"
|
|
>
|
|
<p class="inner_content">
|
|
请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
|
|
</p>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="innerVisible = false"
|
|
>确定</el-button
|
|
>
|
|
<el-button @click="innerVisible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TestChiGate",
|
|
|
|
data() {
|
|
return {
|
|
innerVisible: false,
|
|
labelPosition: "left",
|
|
formLabelWidth: "116px",
|
|
value: "测试",
|
|
count: 0,
|
|
isShow: false,
|
|
options: [
|
|
{
|
|
value: "选项1",
|
|
label: "测试1",
|
|
},
|
|
{
|
|
value: "选项2",
|
|
label: "测试2",
|
|
},
|
|
{
|
|
value: "选项3",
|
|
label: "测试3",
|
|
},
|
|
{
|
|
value: "选项4",
|
|
label: "测试4",
|
|
},
|
|
{
|
|
value: "选项5",
|
|
label: "测试5",
|
|
},
|
|
],
|
|
rules: {
|
|
client_id: [
|
|
{ required: true, message: "请输入客户端SSID", trigger: "blur" },
|
|
],
|
|
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
|
},
|
|
};
|
|
},
|
|
|
|
mounted() {},
|
|
|
|
methods: {
|
|
getShow() {
|
|
this.count++;
|
|
if (this.count % 2 == 0) {
|
|
this.isShow = false;
|
|
} else {
|
|
this.isShow = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
/deep/ .gateway {
|
|
position: absolute;
|
|
left: 694px;
|
|
top: 188px;
|
|
width: 382px;
|
|
height: 309px;
|
|
line-height: 20px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
text-align: center;
|
|
border: 1px solid rgba(187, 187, 187, 1);
|
|
|
|
.el-divider--horizontal {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.title {
|
|
margin: 13px 11px 0px 21px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.title_l {
|
|
width: 72px;
|
|
height: 26px;
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.title_r {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
color: rgba(111, 103, 103, 1);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-left: 50px;
|
|
margin-right: 50px;
|
|
|
|
.el-input__inner {
|
|
width: 200px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
/deep/ .footer {
|
|
.el-button {
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 0.5;
|
|
}
|
|
}
|
|
}
|
|
</style>
|