414 lines
11 KiB
Vue
414 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog
|
||
title="策略管理"
|
||
:visible.sync="dialogVisible"
|
||
width="50%"
|
||
v-loading="loading"
|
||
>
|
||
<div class="title">
|
||
<el-button style="margin-bottom: 10px" @click="addPolicy"
|
||
>新增策略</el-button
|
||
>
|
||
<p v-if="tableData.length >= 2">只能添加两条数据</p>
|
||
</div>
|
||
|
||
<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="clgl_name" label="名称"> </el-table-column>
|
||
<el-table-column prop="clgl_qidong" label="是否启动">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.clgl_qidong"
|
||
@change="handleSwitchChange(scope.row)"
|
||
></el-switch> </template
|
||
></el-table-column>
|
||
<el-table-column prop="clgl_xy" label="协议"> </el-table-column>
|
||
<el-table-column prop="clgl_gzms" label="工作模式"> </el-table-column>
|
||
<el-table-column prop="clgl_ydx" label="源对象"> </el-table-column>
|
||
<el-table-column prop="clgl_ydk" label="源端口"> </el-table-column>
|
||
<el-table-column prop="clgl_rkwk" label="入口网卡"> </el-table-column>
|
||
<el-table-column prop="clgl_rkip" label="入口IP"> </el-table-column>
|
||
<el-table-column prop="clgl_rkwg" label="入口网关"> </el-table-column>
|
||
<el-table-column prop="clgl_ckwk" label="出口网卡"> </el-table-column>
|
||
<el-table-column prop="clgl_ckip" label="出口IP"> </el-table-column>
|
||
<el-table-column prop="clgl_ckwg" label="出口网关"> </el-table-column>
|
||
<el-table-column prop="clgl_mddx" label="目的对象"> </el-table-column>
|
||
<el-table-column prop="clgl_mddk" 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"
|
||
@click="del(scope.$index, scope.row)"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { GetUserAnswer, SaveUserAnswer } from "../api/user";
|
||
export default {
|
||
data() {
|
||
return {
|
||
clgl_qidong: true,
|
||
loading: false,
|
||
user_id: "",
|
||
// 入口IP
|
||
clgl_rkip1: "",
|
||
clgl_rkip2: "",
|
||
clgl_rkip3: "",
|
||
clgl_rkip4: "",
|
||
// 出口ip
|
||
clgl_ckip1: "",
|
||
clgl_ckip2: "",
|
||
clgl_ckip3: "",
|
||
clgl_ckip4: "",
|
||
options1: [
|
||
{
|
||
label: "有线区策略",
|
||
value: "有线区策略",
|
||
},
|
||
{
|
||
label: "无线区策略",
|
||
value: "无线区策略",
|
||
},
|
||
],
|
||
options2: [
|
||
{
|
||
label: "OPC",
|
||
value: "OPC",
|
||
},
|
||
{
|
||
label: "Modbus(TCP)",
|
||
value: "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: "无线区路由器命令",
|
||
},
|
||
],
|
||
options8: [
|
||
{
|
||
label: "有线区网闸（外网）",
|
||
value: "有线区网闸（外网）",
|
||
},
|
||
{
|
||
label: "无线区网闸（外网）",
|
||
value: "无线区网闸（外网）",
|
||
},
|
||
],
|
||
options9: [
|
||
{
|
||
label: "有线区网闸（内网）",
|
||
value: "有线区网闸（内网）",
|
||
},
|
||
{
|
||
label: "无线区网闸（内网）",
|
||
value: "无线区网闸（内网）",
|
||
},
|
||
],
|
||
dialogVisible: true,
|
||
labelPosition: "left",
|
||
tableData: [
|
||
// {
|
||
// clgl_name: "",
|
||
// cmdlist_qsdz: "",
|
||
// clgl_xy: "",
|
||
// clgl_gzms: "",
|
||
// clgl_ydx: "",
|
||
// clgl_ydk: "",
|
||
// clgl_rkwk: "",
|
||
// clgl_rkip: "",
|
||
// clgl_rkwg: "",
|
||
// clgl_ckwk: "",
|
||
// clgl_ckip: "",
|
||
// clgl_ckwg: "",
|
||
// clgl_mddx: "",
|
||
// clgl_mddk: "",
|
||
// },
|
||
],
|
||
tableData1: [
|
||
{
|
||
cmdlist_ml: "读线圈状态",
|
||
// cmdlist_sbid: "有线区交换机命令",
|
||
cmdlist_qsdz: "0",
|
||
cmdlist_dzcd: 65535,
|
||
cmdlist_ms: "有线区交换机命令，允许Modbus(TCP)协议通行",
|
||
cmdlist_dz: "允许",
|
||
},
|
||
],
|
||
ruleForm1: {
|
||
clgl_name: "有线区策略",
|
||
clgl_xy: ["Modbus(TCP)"],
|
||
clgl_gzms: "透明模式",
|
||
clgl_ydx: "有线区交换机",
|
||
clgl_ydk: "",
|
||
clgl_mddx: "",
|
||
clgl_mddk: "",
|
||
clgl_rkwg: "",
|
||
clgl_rkwk: "有线区网闸（内网）",
|
||
clgl_rkip: "",
|
||
clgl_dldk: "",
|
||
clgl_ckwg: "",
|
||
clgl_ckwk: "有线区网闸（外网）",
|
||
clgl_ckip: "",
|
||
clgl_wdyml: "拒绝",
|
||
dlport: "",
|
||
wdyml: "",
|
||
},
|
||
rules1: {
|
||
clgl_name: [{ required: true, trigger: "change" }],
|
||
clgl_xy: [{ required: true, trigger: "change" }],
|
||
clgl_gzms: [{ required: true, trigger: "change" }],
|
||
clgl_mddk: [{ required: true, trigger: "blur" }],
|
||
clgl_rkwk: [{ required: true, trigger: "change" }],
|
||
clgl_ckwk: [{ required: true, trigger: "change" }],
|
||
clgl_rkip: [{ required: true, trigger: "blur" }],
|
||
clgl_ckip: [{ required: true, trigger: "blur" }],
|
||
clgl_ydx: [{ required: true, trigger: "blur" }],
|
||
clgl_ydk: [{ required: true, trigger: "change" }],
|
||
clgl_mddx: [{ required: true, trigger: "change" }],
|
||
clgl_wdyml: [{ required: true, trigger: "change" }],
|
||
},
|
||
ruleForm2: {
|
||
cmdlist_ml: "有线区交换机命令",
|
||
cmdlist_sbid: "",
|
||
cmdlist_qsdz: "",
|
||
cmdlist_dzcd: "",
|
||
cmdlist_ms: "",
|
||
cmdlist_dz: "",
|
||
},
|
||
rules2: {
|
||
cmdlist_ml: [{ required: true, trigger: "change" }],
|
||
cmdlist_sbid: [{ required: true, trigger: "change" }],
|
||
cmdlist_qsdz: [{ required: true, trigger: "change" }],
|
||
cmdlist_dzcd: [{ required: true, trigger: "change" }],
|
||
cmdlist_dz: [{ required: true, trigger: "change" }],
|
||
},
|
||
value: "",
|
||
flag: false,
|
||
};
|
||
},
|
||
created() {
|
||
let that = this;
|
||
window.getParameter = that.getParameter;
|
||
this.GetUserAnswer();
|
||
},
|
||
methods: {
|
||
getParameter(data) {
|
||
alert(data);
|
||
this.user_id = data;
|
||
},
|
||
addPolicy() {
|
||
this.$router.push({ name: "addstrategy", query: { id: this.user_id } });
|
||
},
|
||
async del(index, a) {
|
||
let { data } = await SaveUserAnswer({
|
||
mark: `${this.$store.state.type}`,
|
||
user_id: `${this.user_id}`,
|
||
mark_value: JSON.stringify(
|
||
localStorage.getItem(this.$store.state.type)
|
||
),
|
||
});
|
||
if (data.state) {
|
||
this.tableData.splice(index, 1);
|
||
var obj = JSON.parse(sessionStorage.getItem(this.$store.state.type));
|
||
let newSessObj = {
|
||
clgl_name: "",
|
||
cmdlist_qsdz: "",
|
||
clgl_xy: "",
|
||
clgl_gzms: "",
|
||
clgl_ydx: "",
|
||
clgl_ydk: "",
|
||
clgl_rkwk: "",
|
||
clgl_rkip: "",
|
||
clgl_rkwg: "",
|
||
clgl_ckwk: "",
|
||
clgl_ckip: "",
|
||
clgl_ckwg: "",
|
||
clgl_mddx: "",
|
||
clgl_mddk: "",
|
||
};
|
||
sessionStorage.setItem(
|
||
this.$store.state.type,
|
||
JSON.stringify({ ...obj, ...newSessObj })
|
||
);
|
||
this.$message({
|
||
message: "删除成功",
|
||
type: "success",
|
||
});
|
||
}
|
||
},
|
||
//拿缓存
|
||
async GetUserAnswer() {
|
||
this.loading = true;
|
||
let { data } = await GetUserAnswer({
|
||
mark: `${this.$store.state.type}`,
|
||
user_id: `${this.user_id}`,
|
||
});
|
||
this.loading = false;
|
||
if (data.data && data.state) {
|
||
let obj = JSON.parse(data.data.mark_value);
|
||
if (obj.hasOwnProperty("clgl_name")) {
|
||
console.log(obj.clgl_name);
|
||
this.tableData = [
|
||
{
|
||
clgl_name: obj.clgl_name,
|
||
cmdlist_qsdz: obj.cmdlist_qsdz,
|
||
clgl_xy: obj.clgl_xy,
|
||
clgl_gzms: obj.clgl_gzms,
|
||
clgl_ydx: obj.clgl_ydx,
|
||
clgl_ydk: obj.clgl_ydk,
|
||
clgl_rkwk: obj.clgl_rkwk,
|
||
clgl_rkip: obj.clgl_rkip,
|
||
clgl_rkwg: obj.clgl_rkwg,
|
||
clgl_ckwk: obj.clgl_ckwk,
|
||
clgl_ckip: obj.clgl_ckip,
|
||
clgl_ckwg: obj.clgl_ckwg,
|
||
clgl_mddx: obj.clgl_mddx,
|
||
clgl_mddk: obj.clgl_mddk,
|
||
},
|
||
];
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
}
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
p {
|
||
margin-left: 10px;
|
||
color: red;
|
||
}
|
||
}
|
||
</style>
|