10-31-zyh
This commit is contained in:
unknown
commit
13115e2504
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<div class="db_lite">
|
||||||
|
<router-link to="/ipsetting">IP设置</router-link>
|
||||||
|
<router-link to="/datacollect">数据采集配置</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="chihou">
|
||||||
|
<h2>斥候工业网关</h2>
|
||||||
|
<ChiGate></ChiGate>
|
||||||
|
<ChiWireld></ChiWireld>
|
||||||
|
<ChiGateway></ChiGateway>
|
||||||
|
<ChiDevice></ChiDevice>
|
||||||
|
<ChiCollection></ChiCollection>
|
||||||
|
<ChiClone></ChiClone>
|
||||||
|
</div>
|
||||||
|
<IpConfiguration></IpConfiguration>
|
||||||
|
<PortConfiguration></PortConfiguration>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- //串口及网络协议设置 -->
|
||||||
|
<netConfiguration />
|
||||||
|
<!-- 网口配置 -->
|
||||||
|
<NetworkConfiguration />
|
||||||
|
<!-- 无线配置 -->
|
||||||
|
<Wireles />
|
||||||
|
<!-- 网络管理 -->
|
||||||
|
<NetworkManagement />
|
||||||
|
<!-- 对象管理 -->
|
||||||
|
<ObjectManagement />
|
||||||
|
<!-- 策略管理 -->
|
||||||
|
<PolicyManagement />
|
||||||
|
<!-- 网关配置 -->
|
||||||
|
<GatewayConfiguration />
|
||||||
|
<!-- 网关维护 -->
|
||||||
|
<GatewayMaintenance />
|
||||||
|
<div class="ip">
|
||||||
|
<IpConfiguration></IpConfiguration>
|
||||||
|
<PortConfiguration></PortConfiguration>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CollectionView from "./components/CollectionView.vue";
|
||||||
|
import CloneView from "./components/CloneView.vue";
|
||||||
|
import ChiGate from "./components/ChiGate.vue";
|
||||||
|
import ChiWireld from "./components/ChiWireld.vue";
|
||||||
|
import ChiGateway from "./components/ChiGateway.vue";
|
||||||
|
import IpConfiguration from "./components/IpConfiguration.vue";
|
||||||
|
import PortConfiguration from "./components/PortConfiguration.vue";
|
||||||
|
import ChiDevice from "./components/ChiDevice.vue";
|
||||||
|
import ChiCollection from "./components/ChiCollection.vue";
|
||||||
|
import ChiClone from "./components/ChiClone.vue";
|
||||||
|
import netConfiguration from "./components/netConfiguration.vue";
|
||||||
|
import NetworkConfiguration from "./components/NetworkConfiguration.vue";
|
||||||
|
import Wireles from "./components/Wireles.vue";
|
||||||
|
import NetworkManagement from "./components/NetworkManagement.vue";
|
||||||
|
import ObjectManagement from "./components/ObjectManagement.vue";
|
||||||
|
import PolicyManagement from "./components/PolicyManagement.vue";
|
||||||
|
import GatewayConfiguration from "./components/GatewayConfiguration.vue";
|
||||||
|
import GatewayMaintenance from "./components/GatewayMaintenance.vue";
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
components: {
|
||||||
|
// GateWay,
|
||||||
|
// DataAcquisition,
|
||||||
|
// DataView,
|
||||||
|
// TreeView,
|
||||||
|
// SerialPort,
|
||||||
|
// DeviceVIew,
|
||||||
|
CollectionView,
|
||||||
|
CloneView,
|
||||||
|
ChiGate,
|
||||||
|
ChiWireld,
|
||||||
|
ChiGateway,
|
||||||
|
ChiDevice,
|
||||||
|
ChiCollection,
|
||||||
|
ChiClone,
|
||||||
|
IpConfiguration,
|
||||||
|
PortConfiguration,
|
||||||
|
netConfiguration,
|
||||||
|
NetworkConfiguration,
|
||||||
|
Wireles,
|
||||||
|
NetworkManagement,
|
||||||
|
ObjectManagement,
|
||||||
|
PolicyManagement,
|
||||||
|
GatewayConfiguration,
|
||||||
|
GatewayMaintenance,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #2b2d38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.db_lite,
|
||||||
|
.chihou,
|
||||||
|
.ip {
|
||||||
|
font-size: 18px;
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
<!-- ip设置页面 -->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-button @click="dialogVisible = true">ip配置</el-button>
|
||||||
|
<el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%">
|
||||||
|
<div class="ip_setting">
|
||||||
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"
|
||||||
|
:label-position="labelPosition">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="IP获取方式" prop="ipGetMethod">
|
||||||
|
<el-select v-model="ruleForm.ipGetMethod" style="width:200px">
|
||||||
|
<el-option label="Static IP" value="Static IP"></el-option>
|
||||||
|
<el-option label="DHCP" value="DHCP"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="DNS获取方式" prop="DnsGetMethod">
|
||||||
|
<el-select v-model="ruleForm.DnsGetMethod" style="width:200px">
|
||||||
|
<el-option label="自动获取" value="自动获取"></el-option>
|
||||||
|
<el-option label="手动设定" value="手动设定"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="本机IP" prop="ipAddress">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="子网掩码" prop="subnetMaskRules">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="网关地址" prop="gateway">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="主DNS服务器" prop="primaryDNS">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="备用DNS服务器" prop="bprimaryDNS">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="dialogVisible = false">保存</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { isValidPrimaryDNS } from "../validate";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
labelPosition: "left",
|
||||||
|
ruleForm: {
|
||||||
|
ipGetMethod: "Static IP",
|
||||||
|
DnsGetMethod: "自动获取",
|
||||||
|
ipAddress: "",
|
||||||
|
subnetMaskRules: "",
|
||||||
|
gateway: "",
|
||||||
|
primaryDNS: "",
|
||||||
|
bprimaryDNS: "",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
ipGetMethod: [
|
||||||
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
DnsGetMethod: [
|
||||||
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
ipAddress: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: this.validateIpAddress,
|
||||||
|
trigger: "blur",
|
||||||
|
message: "请输入有效的IP地址",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
subnetMaskRules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: this.validateSubnetMask,
|
||||||
|
trigger: "blur",
|
||||||
|
message: "请输入有效的子网掩码",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
gateway: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: this.validateGateway,
|
||||||
|
trigger: "blur",
|
||||||
|
message: "请输入有效的网关地址",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
primaryDNS: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: this.validatePrimaryDNS,
|
||||||
|
trigger: "blur",
|
||||||
|
message: "请输入有效的主DNS服务器地址",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
bprimaryDNS: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: this.validatePrimaryDNS,
|
||||||
|
trigger: "blur",
|
||||||
|
message: "请输入有效的备用DNS服务器地址",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
alert("submit!");
|
||||||
|
} else {
|
||||||
|
console.log("error submit!!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
},
|
||||||
|
//ip地址验证
|
||||||
|
validateIpAddress(rule, value, callback) {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入IP地址"));
|
||||||
|
} else if (
|
||||||
|
!/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
|
||||||
|
value
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
callback(new Error("请输入有效的IP地址"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//子网掩码验证
|
||||||
|
validateSubnetMask(rule, value, callback) {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入子网掩码"));
|
||||||
|
} else if (
|
||||||
|
!/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
|
||||||
|
value
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
callback(new Error("请输入有效的子网掩码"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//网关地址验证
|
||||||
|
validateGateway(rule, value, callback) {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入网关地址"));
|
||||||
|
} else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
|
||||||
|
callback(new Error("请输入有效的网关地址"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//dns服务验证
|
||||||
|
validatePrimaryDNS(rule, value, callback) {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入主DNS服务器地址"));
|
||||||
|
} else if (!isValidPrimaryDNS(value)) {
|
||||||
|
callback(new Error("请输入有效的主DNS服务器地址"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
/deep/ .ip_setting {
|
||||||
|
.el-input__inner {
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.el-col-1 {
|
||||||
|
padding:0px 2px;
|
||||||
|
color: black;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 32px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-col-5 {
|
||||||
|
width: 43px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-col-24 {
|
||||||
|
padding-right: 152px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,599 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-button @click="dialogVisible = true">策略管理</el-button>
|
||||||
|
<el-dialog title="策略管理" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
|
||||||
|
<el-button style="margin-bottom: 10px" @click="dialogVisible1 = true">新增策略</el-button>
|
||||||
|
<el-table :data="tableData" style="width: 100%" border>
|
||||||
|
<el-table-column label="序号">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.$index + 1 }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||||
|
<el-table-column prop="status" label="是否启动">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-switch v-model="scope.row.status" @change="handleSwitchChange(scope.row)"></el-switch>
|
||||||
|
</template></el-table-column>
|
||||||
|
<el-table-column prop="address" label="协议"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="工作模式"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="源对象"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="源端口"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="入口网卡"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="入口IP"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="入口网关"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="出口网关"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="出口IP"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="出口网关"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="目的对象"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="目的端口"> </el-table-column>
|
||||||
|
<el-table-column fixed="right" label="操作" width="100">
|
||||||
|
<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>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog title="添加策略" :visible.sync="dialogVisible1" :before-close="handleClose" width="82%">
|
||||||
|
<el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="150px" class="demo-ruleForm1"
|
||||||
|
:label-position="labelPosition">
|
||||||
|
<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 options1" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<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 options4" :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="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="出口网关:" prop="ckwg">
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="协议:" prop="agreement">
|
||||||
|
<el-col :span="19">
|
||||||
|
<el-select v-model="ruleForm1.agreement" multiple placeholder="请选择">
|
||||||
|
<el-option v-for="item in options2" :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 options3" :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 options4" :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 options3" :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 options6" :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="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-modl="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="出口IP:" prop="ckip">
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">. </el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-input v-model="input1"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1">.</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<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 options5" :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>
|
||||||
|
<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 options6" :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 options7" :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 options5" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
</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="flag = false">保存</el-button>
|
||||||
|
<el-button @click="flag = 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>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options1: [
|
||||||
|
{
|
||||||
|
label: "有线区策略",
|
||||||
|
value: "有线区策略",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "无线区策略",
|
||||||
|
value: "无线区策略",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options2: [
|
||||||
|
{
|
||||||
|
label: "OPC、Modbus(TCP)",
|
||||||
|
value: "OPC、Modbus(TCP)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "DNP3",
|
||||||
|
value: "DNP3",
|
||||||
|
}, {
|
||||||
|
label: "S7",
|
||||||
|
value: "S7",
|
||||||
|
}, {
|
||||||
|
label: "EC104",
|
||||||
|
value: "EC104",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options3: [
|
||||||
|
{
|
||||||
|
label: "代理模式",
|
||||||
|
value: "代理模式",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "路由模式",
|
||||||
|
value: "路由模式",
|
||||||
|
}, {
|
||||||
|
label: "透明模式",
|
||||||
|
value: "透明模式",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options4: [
|
||||||
|
{
|
||||||
|
label: "有线区交换机",
|
||||||
|
value: "有线区交换机"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "无线区路由器",
|
||||||
|
value: "无线区路由器"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options5: [
|
||||||
|
{
|
||||||
|
label: "拒绝",
|
||||||
|
value: "拒绝"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "允许",
|
||||||
|
value: "允许"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options6: [
|
||||||
|
{
|
||||||
|
label: "读线圈状态",
|
||||||
|
value: "读线圈状态",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "读输入状态",
|
||||||
|
value: "读输入状态",
|
||||||
|
}, {
|
||||||
|
label: "读线保持寄存器",
|
||||||
|
value: "读线保持寄存器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "读输入寄存器",
|
||||||
|
value: "读输入寄存器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "强制单个线圈",
|
||||||
|
value: "强制单个线圈",
|
||||||
|
}, {
|
||||||
|
label: "预置单个寄存器",
|
||||||
|
value: "预置单个寄存器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "强制多个寄存器",
|
||||||
|
value: "强制多个寄存器",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options7: [
|
||||||
|
{
|
||||||
|
label: "有线区交换机命令",
|
||||||
|
value: "有线区交换机命令",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "无线区路由器命令",
|
||||||
|
value: "无线区路由器命令",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dialogVisible: false,
|
||||||
|
dialogVisible1: false,
|
||||||
|
labelPosition: "left",
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
name: "数来服务器",
|
||||||
|
address: "192.168.89.21",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
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: "",
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
handleClick() { },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.el-col-1 {
|
||||||
|
padding: 0px 4px;
|
||||||
|
line-height: 62px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-col-5 {
|
||||||
|
width: 43px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .demo-ruleForm1 {
|
||||||
|
.el-col-1 {
|
||||||
|
padding: 0px 4px;
|
||||||
|
line-height: 62px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-col-5 {
|
||||||
|
width: 43px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}</style>
|
||||||
|
|
@ -29,6 +29,10 @@
|
||||||
<ObjectManagement />
|
<ObjectManagement />
|
||||||
<!-- 策略管理 -->
|
<!-- 策略管理 -->
|
||||||
<PolicyManagement />
|
<PolicyManagement />
|
||||||
|
<!-- 网关配置 -->
|
||||||
|
<GatewayConfiguration />
|
||||||
|
<!-- 网关维护 -->
|
||||||
|
<GatewayMaintenance />
|
||||||
<div class="ip">
|
<div class="ip">
|
||||||
<IpConfiguration></IpConfiguration>
|
<IpConfiguration></IpConfiguration>
|
||||||
<PortConfiguration></PortConfiguration>
|
<PortConfiguration></PortConfiguration>
|
||||||
|
|
@ -58,6 +62,8 @@ import Wireles from "./components/Wireles.vue";
|
||||||
import NetworkManagement from "./components/NetworkManagement.vue";
|
import NetworkManagement from "./components/NetworkManagement.vue";
|
||||||
import ObjectManagement from "./components/ObjectManagement.vue";
|
import ObjectManagement from "./components/ObjectManagement.vue";
|
||||||
import PolicyManagement from "./components/PolicyManagement.vue";
|
import PolicyManagement from "./components/PolicyManagement.vue";
|
||||||
|
import GatewayConfiguration from "./components/GatewayConfiguration.vue";
|
||||||
|
import GatewayMaintenance from "./components/GatewayMaintenance.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -87,6 +93,8 @@ export default {
|
||||||
NetworkManagement,
|
NetworkManagement,
|
||||||
ObjectManagement,
|
ObjectManagement,
|
||||||
PolicyManagement,
|
PolicyManagement,
|
||||||
|
GatewayConfiguration,
|
||||||
|
GatewayMaintenance,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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>
|
||||||
|
|
@ -266,6 +266,119 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</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="flag = false">保存</el-button>
|
||||||
|
<el-button @click="flag = 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">
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-button type="primary" @click="flag = false">保存</el-button>
|
<el-button type="primary" @click="flag = false">保存</el-button>
|
||||||
<el-button @click="flag = false">取 消</el-button>
|
<el-button @click="flag = false">取 消</el-button>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue