lll 10-30 2

2023-10-30 18:17:36 +08:00 · 2023-10-30 18:17:36 +08:00 · 1a0774b508
parent f9e5b31e87
commit 1a0774b508
8 changed files with 208 additions and 115 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -27,6 +27,8 @@
      <NetworkManagement />
      <!-- 对象管理 -->
      <ObjectManagement />
+      <!-- 策略管理 -->
+      <PolicyManagement />
      <div class="ip">
        <IpConfiguration></IpConfiguration>
        <PortConfiguration></PortConfiguration>
@ -63,6 +65,7 @@ import Wireles from "./components/Wireles.vue";
 import NetworkManagement from "./components/NetworkManagement.vue";
 import ObjectManagement from "./components/ObjectManagement.vue";
 import NetProtocol from "./components/NetProtocol.vue";
+import PolicyManagement from "./components/PolicyManagement.vue";
 export default {
  name: "App",
  data() {
@ -92,6 +95,7 @@ export default {
    NetworkManagement,
    ObjectManagement,
    NetProtocol,
+    PolicyManagement,
  },
 };
 </script>
--- a/src/components/NetworkManagement.vue
+++ b/src/components/NetworkManagement.vue
@ -119,21 +119,6 @@ export default {
          ipv4Address: "",
          ipv4Code: "",
        },
-        {
-          name: "内网网卡2",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "内网网卡3",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "内网网卡4",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
      ],
      tableData1: [
        {
@ -141,21 +126,6 @@ export default {
          ipv4Address: "",
          ipv4Code: "",
        },
-        {
-          name: "外网网卡2",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "外网网卡3",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "外网网卡4",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
      ],
    };
  },
--- a/src/components/ObjectManagement.vue
+++ b/src/components/ObjectManagement.vue
@ -44,7 +44,7 @@
        :label-position="labelPosition"
      >
        <el-form-item label="IP类型:" prop="iplx">
-          <el-col :span="20">
+          <el-col :span="10">
            <el-select v-model="ruleForm.iplx">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
@ -53,26 +53,28 @@
        </el-form-item>

        <el-form-item label="对象名称:" prop="dxmc">
-          <el-col :span="20">
+          <el-col :span="10">
            <el-input v-model="ruleForm.dxmc"> </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="IP地址:" prop="ipdz">
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
-          <el-col :span="2">. </el-col>
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
-          <el-col :span="2">. </el-col>
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
-          <el-col :span="2">. </el-col>
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
+          <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-form>
      <span slot="footer" class="dialog-footer">
--- a/src/components/PolicyManagement.vue
+++ b/src/components/PolicyManagement.vue
@ -0,0 +1,135 @@
+<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"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :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-form-item label="对象名称:" prop="dxmc">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.dxmc"> </el-input>
+          </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-form>
+      <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>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVisible1: false,
+      labelPosition: "left",
+      tableData: [
+        {
+          name: "数来服务器",
+          address: "192.168.89.21",
+        },
+      ],
+      ruleForm: {
+        iplx: "",
+        dxmc: "",
+      },
+      rules: {
+        iplx: [{ required: true, trigger: "change" }],
+        dxmc: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleClick() {},
+  },
+};
+</script>
+<style></style>
--- a/src/components/netConfiguration.vue
+++ b/src/components/netConfiguration.vue
@ -156,7 +156,7 @@ export default {
  },
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .formOne {
  display: flex;
  justify-content: space-around;
--- a/src/views/ChannelConfig.vue
+++ b/src/views/ChannelConfig.vue
@ -1,29 +1,23 @@
 <template>
-    <div>
-        <TreeView></TreeView>
-    </div>
+  <div>
+    <TreeView></TreeView>
+  </div>
 </template>

 <script>
 import TreeView from "@/components/TreeView.vue";
 export default {
-    name: 'InternetCompetitionChannelConfig',
-    components: {
-        TreeView
-    },
-    data() {
-        return {
+  name: "InternetCompetitionChannelConfig",
+  components: {
+    TreeView,
+  },
+  data() {
+    return {};
+  },

-        };
-    },
+  mounted() {},

-    mounted() {
-
-    },
-
-    methods: {
-
-    },
+  methods: {},
 };
 </script>

--- a/src/views/DataCollect.vue
+++ b/src/views/DataCollect.vue
@ -1,12 +1,12 @@
 <template>
-    <div>
-        <DataAcquisition></DataAcquisition>
-        <TreeView></TreeView>
-        <SerialPort></SerialPort>
-        <DeviceVIew></DeviceVIew>
-        <CollectionView></CollectionView>
-        <CloneView></CloneView>
-    </div>
+  <div>
+    <DataAcquisition></DataAcquisition>
+    <TreeView></TreeView>
+    <SerialPort></SerialPort>
+    <DeviceVIew></DeviceVIew>
+    <CollectionView></CollectionView>
+    <CloneView></CloneView>
+  </div>
 </template>

 <script>
@ -17,28 +17,22 @@ import DeviceVIew from "@/components/DeviceVIew.vue";
 import CollectionView from "@/components/CollectionView.vue";
 import CloneView from "@/components/CloneView.vue";
 export default {
-    name: 'InternetCompetitionDataCollect',
-    components: {
-        DataAcquisition,
-        TreeView,
-        SerialPort,
-        DeviceVIew,
-        CollectionView,
-        CloneView,
-    },
-    data() {
-        return {
+  name: "InternetCompetitionDataCollect",
+  components: {
+    DataAcquisition,
+    TreeView,
+    SerialPort,
+    DeviceVIew,
+    CollectionView,
+    CloneView,
+  },
+  data() {
+    return {};
+  },

-        };
-    },
+  mounted() {},

-    mounted() {
-
-    },
-
-    methods: {
-
-    },
+  methods: {},
 };
 </script>

--- a/src/views/IpSetting.vue
+++ b/src/views/IpSetting.vue
@ -1,30 +1,24 @@
 <template>
-    <div>
-        <DataView></DataView>
-    </div>
+  <div>
+    <DataView></DataView>
+  </div>
 </template>

 <script>
 import DataView from "@/components/DataView.vue";
 export default {
-    name: 'InternetCompetitionIpSetting',
+  name: "InternetCompetitionIpSetting",

-    data() {
-        return {
+  data() {
+    return {};
+  },

-        };
-    },
+  mounted() {},

-    mounted() {
-
-    },
-
-    methods: {
-
-    },
-    components: {
-        DataView,
-    }
+  methods: {},
+  components: {
+    DataView,
+  },
 };
 </script>