lll 10-31 1
This commit is contained in:
lll
parent
1a0774b508
commit
9be95ae513
10
src/App.vue
10
src/App.vue
|
|
@ -29,9 +29,11 @@
|
|||
<ObjectManagement />
|
||||
<!-- 策略管理 -->
|
||||
<PolicyManagement />
|
||||
<!-- 网关配置 -->
|
||||
<GatewayConfiguration />
|
||||
<!-- 网关维护 -->
|
||||
<GatewayMaintenance />
|
||||
<div class="ip">
|
||||
<IpConfiguration></IpConfiguration>
|
||||
<PortConfiguration></PortConfiguration>
|
||||
<NetProtocol></NetProtocol>
|
||||
</div>
|
||||
|
||||
|
|
@ -66,6 +68,8 @@ import NetworkManagement from "./components/NetworkManagement.vue";
|
|||
import ObjectManagement from "./components/ObjectManagement.vue";
|
||||
import NetProtocol from "./components/NetProtocol.vue";
|
||||
import PolicyManagement from "./components/PolicyManagement.vue";
|
||||
import GatewayConfiguration from "./components/GatewayConfiguration.vue";
|
||||
import GatewayMaintenance from "./components/GatewayMaintenance.vue";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
|
|
@ -96,6 +100,8 @@ export default {
|
|||
ObjectManagement,
|
||||
NetProtocol,
|
||||
PolicyManagement,
|
||||
GatewayConfiguration,
|
||||
GatewayMaintenance,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">网关配置</el-button>
|
||||
<el-dialog title="网关配置" :visible.sync="dialogVisible">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<el-button @click="flag = true">新建网关</el-button>
|
||||
<el-button>删除</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-input type="search"></el-input>
|
||||
<el-button>筛选</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
border
|
||||
style="margin-top: 10px"
|
||||
tooltip-effect="dark"
|
||||
@selection-change="handleSelectionChange"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column label="序号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column label="网关ID" prop="id"> </el-table-column>
|
||||
<el-table-column prop="number" label="网关编号"> </el-table-column>
|
||||
<el-table-column prop="name" label="网关名称"> </el-table-column>
|
||||
<el-table-column prop="type" label="网关类型"> </el-table-column>
|
||||
<el-table-column prop="people" label="维护人"> </el-table-column>
|
||||
<el-table-column prop="time" label="维护时间"> </el-table-column>
|
||||
<el-table-column prop="status" label="网关状态"> </el-table-column>
|
||||
<el-table-column prop="newTime" label="最新心跳时间"> </el-table-column>
|
||||
<el-table-column label="修改">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column label="详细">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small">查看</el-button>
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column label="参数配置">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small">参数配置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="新建网关" :visible.sync="flag" width="30%">
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="网关类型:" prop="type">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="ruleForm.type">
|
||||
<el-option label="box" value="box"></el-option>
|
||||
<el-option label="server port" value="server port"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关编号:" prop="number">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="ruleForm.number">
|
||||
<el-option label="2000808010" value="2000808010"></el-option>
|
||||
<el-option label="2000808011" value="2000808011"></el-option>
|
||||
<el-option label="2000808012" value="2000808012"></el-option>
|
||||
<el-option label="2000808013" value="2000808013"></el-option>
|
||||
<el-option label="2000808014" value="2000808014"></el-option>
|
||||
<el-option label="2000808015" value="2000808015"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="id">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="ruleForm.id">
|
||||
<el-option label="lan-box1" value="lan-box1"></el-option>
|
||||
<el-option label="lan-box2" value="lan-box2"></el-option>
|
||||
<el-option label="wlan-box1" value="wlan-box1"></el-option>
|
||||
<el-option label="wlan-box2" value="wlan-box2"></el-option>
|
||||
<el-option
|
||||
label="lan- server port"
|
||||
value="lan- server port"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="wlan- server port"
|
||||
value="wlan- server port"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关名称:" prop="name">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="ruleForm.name">
|
||||
<el-option label="有线区网关1" value="有线区网关1"></el-option>
|
||||
<el-option label="有线区网关2" value="有线区网关2"></el-option>
|
||||
<el-option label="无线区网关1" value="无线区网关1"></el-option>
|
||||
<el-option label="无线区网关2" value="无线区网关2"></el-option>
|
||||
<el-option
|
||||
label="有线区串口服务器"
|
||||
value="有线区串口服务器"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="无线区串口服务器"
|
||||
value="无线区串口服务器"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="flag = false">保存</el-button>
|
||||
<el-button @click="flag = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
flag: false,
|
||||
tableData: [
|
||||
{
|
||||
id: "lan-box1",
|
||||
number: "2000808010",
|
||||
name: "有线区网关1",
|
||||
type: "BOX",
|
||||
people: "hb222",
|
||||
time: "2023/10/9 12:23:22",
|
||||
status: "离线",
|
||||
newTime: "2023/10/11 12:34:43",
|
||||
},
|
||||
],
|
||||
ruleForm: {
|
||||
type: "",
|
||||
id: "",
|
||||
number: "",
|
||||
name: "",
|
||||
},
|
||||
rules: {
|
||||
type: [
|
||||
{ required: true, trigger: "change", message: "请选择一个选项" },
|
||||
],
|
||||
id: [{ required: true, trigger: "change", message: "请选择一个选项" }],
|
||||
number: [
|
||||
{ required: true, trigger: "change", message: "请选择一个选项" },
|
||||
],
|
||||
name: [
|
||||
{ required: true, trigger: "change", message: "请选择一个选项" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange() {},
|
||||
cellStyle({ row, column }) {
|
||||
if (column.property === "status") {
|
||||
if (row.status === "离线") {
|
||||
return { background: "#6C6C6C", color: "#fff" };
|
||||
} else {
|
||||
return { background: "#fff" };
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.el-table {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/deep/.el-form-item label {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">网关维护</el-button>
|
||||
<el-dialog title="网关维护" :visible.sync="dialogVisible">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<el-button @click="flag = true">新增参数</el-button>
|
||||
<el-button>删除</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-input type="search" style="margin-right: 10px"></el-input>
|
||||
<el-button>筛选</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
border
|
||||
style="margin-top: 10px"
|
||||
tooltip-effect="dark"
|
||||
@selection-change="handleSelectionChange"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column label="序号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column label="网关SN" prop="sn"> </el-table-column>
|
||||
<el-table-column prop="number" label="网关编号"> </el-table-column>
|
||||
<el-table-column prop="name" label="网关名称"> </el-table-column>
|
||||
<el-table-column prop="key" label="参数Key"> </el-table-column>
|
||||
<el-table-column prop="productName" label="参数名称"> </el-table-column>
|
||||
<el-table-column prop="smallNumber" label="小数位数"> </el-table-column>
|
||||
<el-table-column prop="setValue" label="设定值"> </el-table-column>
|
||||
<el-table-column prop="deviationValue" label="偏差值">
|
||||
</el-table-column>
|
||||
<el-table-column prop="people" label="维护人"> </el-table-column>
|
||||
<el-table-column prop="time" label="维护时间"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="open"
|
||||
label="是否运行标识"
|
||||
:cell-class-name="cellClassName1"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sos"
|
||||
label="是否报警标识"
|
||||
:cell-class-name="cellClassName2"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="修改">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column label="详细">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small">查看</el-button>
|
||||
</template></el-table-column
|
||||
>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="新增参数" :visible.sync="flag" width="30%">
|
||||
<el-col :span="12">
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="所属网关:" prop="sswg" class="red">
|
||||
<el-select v-model="ruleForm.sswg">
|
||||
<el-option label="lan-box1" value="lan-box1"></el-option>
|
||||
<el-option label="lan-box2" value="lan-box2"></el-option>
|
||||
<el-option label="wlan-box1" value="wlan-box1"></el-option>
|
||||
<el-option label="wlan-box2" value="wlan-box2"></el-option>
|
||||
<el-option
|
||||
label="lan- server port"
|
||||
value="lan- server port"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="wlan- server port"
|
||||
value="wlan- server port"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数名称:" prop="name" class="red">
|
||||
<el-select v-model="ruleForm.name">
|
||||
<el-option label="产量" value="产量"></el-option>
|
||||
<el-option label="主轴转速" value="主轴转速"></el-option>
|
||||
<el-option label="急停状态" value="急停状态"></el-option>
|
||||
<el-option label="切削速度" value="切削速度"></el-option>
|
||||
<el-option label="负载电流" value="负载电流"></el-option>
|
||||
<el-option label="额定电流" value="额定电流"></el-option
|
||||
></el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否运行标识:" prop="open">
|
||||
<el-select v-model="ruleForm.open">
|
||||
<el-option label="是" value="1"></el-option>
|
||||
<el-option label="否" value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设定值:" prop="setValue">
|
||||
<el-input v-model="ruleForm.setValue"> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="参数key:" prop="key" class="red">
|
||||
<el-select v-model="ruleForm.key">
|
||||
<el-option
|
||||
label="MachinePamHID910"
|
||||
value="MachinePamHID910"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="MachinePamHID917"
|
||||
value="MachinePamHID917"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="MachinePamHID909"
|
||||
value="MachinePamHID909"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="MachinePamHID928"
|
||||
value="MachinePamHID928"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="MachinePamHID923"
|
||||
value="MachinePamHID923"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="MachinePamHID924"
|
||||
value="MachinePamHID924"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="小数位数:" prop="smallNumber">
|
||||
<el-input v-model="ruleForm.smallNumber"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否报警标识:" prop="sos">
|
||||
<el-select v-model="ruleForm.sos">
|
||||
<el-option label="是" value="1"></el-option>
|
||||
<el-option label="否" value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="偏差值:" prop="deviationValue">
|
||||
<el-input v-model="ruleForm.deviationValue"> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="flag = false">保存</el-button>
|
||||
<el-button @click="flag = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
labelPosition: "left",
|
||||
flag: false,
|
||||
tableData: [
|
||||
{
|
||||
sn: "lan-box1",
|
||||
number: "2000808010",
|
||||
name: "有线区网关1",
|
||||
key: "MachinePamHID910",
|
||||
productName: "产量",
|
||||
smallNumber: 0,
|
||||
setValue: 20,
|
||||
deviationValue: "",
|
||||
people: "hb222",
|
||||
time: "2023/10/9 12:23:23",
|
||||
open: "是",
|
||||
sos: "否",
|
||||
},
|
||||
],
|
||||
ruleForm: {
|
||||
sswg: "",
|
||||
name: "",
|
||||
open: "",
|
||||
setValue: "",
|
||||
key: "",
|
||||
smallNumber: "",
|
||||
sos: "",
|
||||
deviationValue: "",
|
||||
},
|
||||
rules: {
|
||||
sswg: [
|
||||
{ required: true, trigger: "change", message: "请选择一个选项" },
|
||||
],
|
||||
name: [
|
||||
{ required: true, trigger: "change", message: "请选择一个选项" },
|
||||
],
|
||||
open: [
|
||||
{ required: true, trigger: "change", message: "请选择一个选项" },
|
||||
],
|
||||
setValue: [
|
||||
{ required: true, trigger: "blur", message: "设定值是必填参数" },
|
||||
],
|
||||
key: [{ required: true, trigger: "change", message: "请选择一个选项" }],
|
||||
smallNumber: [
|
||||
{ required: true, trigger: "blur", message: "小数位数是必填参数" },
|
||||
],
|
||||
sos: [{ required: true, trigger: "change", message: "请选择一个选项" }],
|
||||
deviationValue: [
|
||||
{ required: true, trigger: "blur", message: "偏差值是必填参数" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange() {},
|
||||
cellStyle({ row, column }) {
|
||||
if (column.property === "open") {
|
||||
if (row.open === "是") {
|
||||
return { background: "#75F9FD", color: "#000" };
|
||||
} else if (row.open === "否") {
|
||||
return { background: "#6C6C6C", color: "#fff" };
|
||||
}
|
||||
} else if (column.property === "sos") {
|
||||
if (row.sos === "是") {
|
||||
return { background: "#75F9FD", color: "#000" };
|
||||
} else if (row.sos === "否") {
|
||||
return { background: "#6C6C6C", color: "#fff" };
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.el-table {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/deep/.red .el-form-item__label {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,28 +28,28 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="本机IP" prop="ipAddress">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
|
|
@ -59,28 +59,28 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="子网掩码" prop="subnetMaskRules">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
|
|
@ -90,28 +90,28 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="网关地址" prop="gateway">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
|
|
@ -121,28 +121,28 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="主DNS服务器" prop="primaryDNS">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
|
|
@ -152,28 +152,28 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="备用DNS服务器" prop="bprimaryDNS">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="2">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
|
|
|
|||
|
|
@ -50,51 +50,258 @@
|
|||
<el-dialog
|
||||
title="添加策略"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
width="70%"
|
||||
>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
:model="ruleForm1"
|
||||
:rules="rules1"
|
||||
ref="ruleForm1"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
class="demo-ruleForm1"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="IP类型:" prop="iplx">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.iplx">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-row :justify="center">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-col :span="19">
|
||||
<el-select v-model="ruleForm1.name" placeholder="选择对象">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="对象名称:" prop="dxmc">
|
||||
<el-col :span="10">
|
||||
<el-input v-model="ruleForm.dxmc"> </el-input>
|
||||
<el-form-item label="源对象:" prop="obj" style="color: red">
|
||||
<el-col :span="19">
|
||||
<el-select v-model="ruleForm1.obj" placeholder="选择对象">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="入口网关:" prop="rkwg">
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="出口网关:" prop="ckwg">
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址:" prop="ipdz">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="协议:" prop="agreement">
|
||||
<el-col :span="19">
|
||||
<el-select v-model="ruleForm1.agreement" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP端口:" prop="ipPort">
|
||||
<el-col :span="19">
|
||||
<el-input v-model="ruleForm1.ipPort"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="入口网卡:" prop="rkwk">
|
||||
<el-col :span="19">
|
||||
<el-select
|
||||
v-model="ruleForm1.rkwk"
|
||||
placeholder="选择配置的内网网卡"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="出口网卡:" prop="ckwk">
|
||||
<el-col :span="19">
|
||||
<el-select
|
||||
v-model="ruleForm1.ckwk"
|
||||
placeholder="选择配置的外网网卡"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select> </el-col
|
||||
></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="工作模式:" prop="workway">
|
||||
<el-col :span="19">
|
||||
<el-select v-model="ruleForm1.workway" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="目的对象:" prop="mdobj">
|
||||
<el-col :span="19">
|
||||
<el-select v-model="ruleForm1.mdobj" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="入口IP:" prop="rkip">
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-modl="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="出口IP:" prop="ckip">
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="目的端口:" prop="mdport">
|
||||
<el-col :span="19">
|
||||
<el-input v-model="ruleForm1.mdport"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="代理端口:" prop="dlport">
|
||||
<el-col :span="19">
|
||||
<el-input v-model="ruleForm1.dlport"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="未定义命令:" prop="wdyml">
|
||||
<el-col :span="19">
|
||||
<el-select v-model="ruleForm1.wdyml" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span>记录日志：</span>
|
||||
<el-switch
|
||||
style="margin-left: 6%"
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
>
|
||||
</el-switch>
|
||||
<div
|
||||
class="title"
|
||||
style="display: flex; justify-content: space-between; margin-top: 10px"
|
||||
>
|
||||
<h3 style="margin-top: 10px; margin-bottom: 3px">命令列表</h3>
|
||||
<el-button @click="flag = true">新增命令</el-button>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-table :data="tableData1" style="width: 100%" border>
|
||||
<el-table-column label="序号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column prop="ml" label="命令(功能码)"> </el-table-column>
|
||||
<el-table-column prop="address" label="起码地址"> </el-table-column>
|
||||
<el-table-column prop="length" label="地址长度"> </el-table-column>
|
||||
<el-table-column prop="ms" label="描述"> </el-table-column>
|
||||
<el-table-column prop="dz" label="动作"> </el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" type="text" size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible1 = false"
|
||||
>保存</el-button
|
||||
|
|
@ -102,6 +309,83 @@
|
|||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="新增命令"
|
||||
:visible.sync="flag"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
center
|
||||
:model="ruleForm2"
|
||||
:rules="rules2"
|
||||
ref="ruleForm2"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm2"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="命令:" prop="ml">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="ruleForm2.ml">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备ID:" prop="id" style="color: red">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="ruleForm2.id">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始地址:" prop="address">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="ruleForm2.address"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址长度:" prop="length"
|
||||
><el-col :span="6"
|
||||
><el-input v-model="ruleForm2.length"> </el-input
|
||||
></el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="ms"
|
||||
><el-col :span="6"
|
||||
><el-input v-model="ruleForm2.ms"></el-input
|
||||
></el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="动作:" prop="dz">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="ruleForm2.dz">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="flag = false">保存</el-button>
|
||||
<el-button @click="flag = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -117,14 +401,66 @@ export default {
|
|||
address: "192.168.89.21",
|
||||
},
|
||||
],
|
||||
ruleForm: {
|
||||
iplx: "",
|
||||
dxmc: "",
|
||||
tableData1: [
|
||||
{
|
||||
ml: "读线圈状态",
|
||||
id: "有线区交换机命令",
|
||||
address: "0",
|
||||
length: 65535,
|
||||
ms: "有线区交换机命令，允许Modbus(TCP)协议通行",
|
||||
dz: "允许",
|
||||
},
|
||||
],
|
||||
ruleForm1: {
|
||||
name: "",
|
||||
obj: "",
|
||||
rkwg: "",
|
||||
ckwg: "",
|
||||
agreement: "",
|
||||
ipPort: "",
|
||||
rkwk: "",
|
||||
ckwk: "",
|
||||
rkip: "",
|
||||
ckip: "",
|
||||
rkwg: "",
|
||||
ckwg: "",
|
||||
workway: "",
|
||||
mdobj: "",
|
||||
mdport: "",
|
||||
dlport: "",
|
||||
wdyml: "",
|
||||
},
|
||||
rules: {
|
||||
iplx: [{ required: true, trigger: "change" }],
|
||||
dxmc: [{ required: true, trigger: "blur" }],
|
||||
rules1: {
|
||||
name: [{ required: true, trigger: "change" }],
|
||||
obj: [{ required: true, trigger: "change" }],
|
||||
agreement: [{ required: true, trigger: "change" }],
|
||||
ipPort: [{ required: true, trigger: "blur" }],
|
||||
rkwk: [{ required: true, trigger: "change" }],
|
||||
ckwk: [{ required: true, trigger: "change" }],
|
||||
rkip: [{ required: true, trigger: "blur" }],
|
||||
ckip: [{ required: true, trigger: "blur" }],
|
||||
mdport: [{ required: true, trigger: "blur" }],
|
||||
workway: [{ required: true, trigger: "change" }],
|
||||
mdobj: [{ required: true, trigger: "change" }],
|
||||
wdyml: [{ required: true, trigger: "change" }],
|
||||
},
|
||||
ruleForm2: {
|
||||
ml: "",
|
||||
id: "",
|
||||
address: "",
|
||||
length: "",
|
||||
ms: "",
|
||||
dz: "",
|
||||
},
|
||||
rules2: {
|
||||
ml: [{ required: true, trigger: "change" }],
|
||||
id: [{ required: true, trigger: "change" }],
|
||||
address: [{ required: true, trigger: "change" }],
|
||||
length: [{ required: true, trigger: "change" }],
|
||||
dz: [{ required: true, trigger: "change" }],
|
||||
},
|
||||
value: "",
|
||||
flag: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -132,4 +468,19 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
<style scoped lang="less">
|
||||
.el-col-1 {
|
||||
width: 1%;
|
||||
}
|
||||
.el-col-2 {
|
||||
width: 5%;
|
||||
}
|
||||
.demo-ruleForm1 {
|
||||
.el-col-1 {
|
||||
width: 2%;
|
||||
}
|
||||
.el-col-2 {
|
||||
width: 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue