399 lines
15 KiB
Vue
399 lines
15 KiB
Vue
<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="70%">
|
||
<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 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-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 options5" :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 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>
|
||
<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>
|
||
export default {
|
||
data() {
|
||
return {
|
||
options1:[
|
||
{
|
||
label:"有线区策略",
|
||
value:"有线区策略",
|
||
},
|
||
{
|
||
label:"无线区策略",
|
||
value:"无线区策略",
|
||
}
|
||
],
|
||
options2:[
|
||
{
|
||
label:"有线区策略",
|
||
value:"有线区策略",
|
||
},
|
||
{
|
||
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 {
|
||
width: 1%;
|
||
}
|
||
|
||
.el-col-2 {
|
||
width: 5%;
|
||
}
|
||
|
||
/deep/ .demo-ruleForm1 {
|
||
.el-col-1 {
|
||
width: 2%;
|
||
}
|
||
|
||
.el-col-2 {
|
||
width: 43px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
</style>
|