443 lines
12 KiB
Vue
443 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog
|
|
title="策略管理"
|
|
:visible.sync="dialogVisible"
|
|
width="80%"
|
|
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 {
|
|
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: "",
|
|
// },
|
|
],
|
|
cmdlist_ml: "",
|
|
cmdlist_sbid: "",
|
|
cmdlist_qsdz: "",
|
|
cmdlist_dzcd: "",
|
|
cmdlist_ms: "",
|
|
cmdlist_dz: "",
|
|
wlgl_nw_name: "",
|
|
wlgl_nw_ip: "",
|
|
wlgl_nw_zwym: "",
|
|
wlgl_ww_name: "",
|
|
wlgl_ww_ip: "",
|
|
wlgl_ww_zwym: "",
|
|
dxgl: [],
|
|
ruleForm1: {
|
|
clgl_name: "有线区策略",
|
|
clgl_xy: ["Modbus(TCP)"],
|
|
clgl_gzms: "透明模式",
|
|
clgl_ydx: "有线区交换机",
|
|
clgl_ydk: "",
|
|
clgl_mddx: "",
|
|
clgl_mddk: "",
|
|
clgl_rkwg: "",
|
|
clgl_rkwk: "有线区网闸（内网）",
|
|
clgl_rkip: "",
|
|
clgl_ckwg: "",
|
|
clgl_ckwk: "有线区网闸（外网）",
|
|
clgl_ckip: "",
|
|
clgl_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" }],
|
|
},
|
|
value: "",
|
|
flag: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
let str = window.location.href.split("?")[1];
|
|
this.user_id = decodeURIComponent(str).split("|")[0];
|
|
let type = decodeURIComponent(str).split("|")[1];
|
|
if (type == 1) {
|
|
this.$store.commit("setType", "GYWZ_yx");
|
|
} else {
|
|
this.$store.commit("setType", "GYWZ_wx");
|
|
}
|
|
alert(this.user_id, this.$store.state.type);
|
|
console.log(this.user_id, this.$store.state.type);
|
|
this.GetUserAnswer();
|
|
},
|
|
methods: {
|
|
addPolicy() {
|
|
this.$router.push({
|
|
name: "addstrategy",
|
|
query: { id: this.user_id },
|
|
});
|
|
},
|
|
async del(index, a) {
|
|
this.tableData = [];
|
|
let newSessObj = {
|
|
clgl_name: "",
|
|
clgl_xy: "",
|
|
clgl_gzms: "",
|
|
clgl_ydx: "",
|
|
clgl_ydk: "",
|
|
clgl_rkwk: "",
|
|
clgl_rkip: "",
|
|
clgl_ckip: "",
|
|
clgl_rkwg: "",
|
|
clgl_ckwk: "",
|
|
clgl_ckwg: "",
|
|
clgl_mddx: "",
|
|
clgl_mddk: "",
|
|
clgl_wdyml: "",
|
|
cmdlist_ml: this.cmdlist_ml,
|
|
cmdlist_sbid: this.cmdlist_sbid,
|
|
cmdlist_qsdz: this.cmdlist_qsdz,
|
|
cmdlist_dzcd: this.cmdlist_dzcd,
|
|
cmdlist_ms: this.cmdlist_ms,
|
|
cmdlist_dz: this.cmdlist_dz,
|
|
dxgl: this.dxgl,
|
|
wlgl_nw_name: this.wlgl_nw_name,
|
|
wlgl_nw_ip: this.wlgl_nw_ip,
|
|
wlgl_nw_zwym: this.wlgl_nw_zwym,
|
|
wlgl_ww_name: this.wlgl_ww_name,
|
|
wlgl_ww_ip: this.wlgl_ww_ip,
|
|
wlgl_ww_zwym: this.wlgl_ww_zwym,
|
|
};
|
|
let { data } = await SaveUserAnswer({
|
|
mark: this.$store.state.type,
|
|
user_id: this.user_id,
|
|
// mark: "GYWZ_yx",
|
|
// user_id: "USER202307301109254198",
|
|
mark_value: JSON.stringify(newSessObj),
|
|
});
|
|
if (data.state) {
|
|
this.tableData.splice(index, 1);
|
|
this.$message({
|
|
message: "删除成功",
|
|
type: "success",
|
|
});
|
|
}
|
|
},
|
|
//拿缓存
|
|
async GetUserAnswer() {
|
|
this.loading = true;
|
|
let { data } = await GetUserAnswer({
|
|
mark: this.$store.state.type,
|
|
user_id: this.user_id,
|
|
// mark: "GYWZ_wx",
|
|
// user_id: "USER202307301109254198",
|
|
});
|
|
this.loading = false;
|
|
if (data.data && data.state) {
|
|
let obj = JSON.parse(data.data.mark_value);
|
|
(this.ruleForm1.clgl_xy = obj.clgl_xy),
|
|
(this.ruleForm1.clgl_gzms = obj.clgl_gzms),
|
|
(this.ruleForm1.clgl_ydx = obj.clgl_ydx),
|
|
(this.ruleForm1.clgl_ydk = obj.clgl_ydk),
|
|
(this.ruleForm1.clgl_rkwk = obj.clgl_rkwk),
|
|
(this.ruleForm1.clgl_rkip = obj.clgl_rkip),
|
|
(this.ruleForm1.clgl_rkwg = obj.clgl_rkwg),
|
|
(this.ruleForm1.clgl_ckwk = obj.clgl_ckwk),
|
|
(this.ruleForm1.clgl_ckip = obj.clgl_ckip),
|
|
(this.ruleForm1.clgl_ckwg = obj.clgl_ckwg),
|
|
(this.ruleForm1.clgl_mddx = obj.clgl_mddx),
|
|
(this.ruleForm1.clgl_mddk = obj.clgl_mddk),
|
|
(this.dxgl = obj.dxgl),
|
|
(this.wlgl_nw_name = obj.wlgl_nw_name),
|
|
(this.wlgl_nw_ip = obj.wlgl_nw_ip),
|
|
(this.wlgl_nw_zwym = obj.wlgl_nw_zwym),
|
|
(this.wlgl_ww_name = obj.wlgl_ww_name),
|
|
(this.wlgl_ww_ip = obj.wlgl_ww_ip),
|
|
(this.wlgl_ww_zwym = obj.wlgl_ww_zwym),
|
|
(this.cmdlist_ml = obj.cmdlist_ml),
|
|
(this.cmdlist_sbid = obj.cmdlist_sbid),
|
|
(this.cmdlist_qsdz = obj.cmdlist_qsdz),
|
|
(this.cmdlist_dzcd = obj.cmdlist_dzcd),
|
|
(this.cmdlist_ms = obj.cmdlist_ms),
|
|
(this.cmdlist_dz = obj.cmdlist_dz);
|
|
if (obj.hasOwnProperty("clgl_name") && 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;
|
|
}
|
|
}
|
|
.el-table {
|
|
height: 500px;
|
|
}
|
|
</style>
|