lll 10-30 2

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>

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: "",
-        },
       ],
     };
   },

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-row>
+            <el-col :span="2">
               <el-input v-model="input1"></el-input>
             </el-col>
-          <el-col :span="2">. </el-col>
+            <el-col :span="1">. </el-col>
-          <el-col :span="4">
+            <el-col :span="2">
               <el-input v-model="input1"></el-input>
             </el-col>
-          <el-col :span="2">. </el-col>
+            <el-col :span="1">.</el-col>
-          <el-col :span="4">
+            <el-col :span="2">
               <el-input v-model="input1"></el-input>
             </el-col>
-          <el-col :span="2">. </el-col>
+            <el-col :span="1">.</el-col>
-          <el-col :span="4">
+            <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">

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>

src/components/netConfiguration.vue

@@ -156,7 +156,7 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .formOne {
   display: flex;
   justify-content: space-around;

src/views/ChannelConfig.vue

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

src/views/DataCollect.vue

@@ -17,7 +17,7 @@ import DeviceVIew from "@/components/DeviceVIew.vue";
 import CollectionView from "@/components/CollectionView.vue";
 import CloneView from "@/components/CloneView.vue";
 export default {
-    name: 'InternetCompetitionDataCollect',
+  name: "InternetCompetitionDataCollect",
   components: {
     DataAcquisition,
     TreeView,
@@ -27,18 +27,12 @@ export default {
     CloneView,
   },
   data() {
-        return {
+    return {};
-
-        };
   },
 
-    mounted() {
+  mounted() {},
 
-    },
+  methods: {},
-
-    methods: {
-
-    },
 };
 </script>
 

src/views/IpSetting.vue

@@ -7,24 +7,18 @@
 <script>
 import DataView from "@/components/DataView.vue";
 export default {
-    name: 'InternetCompetitionIpSetting',
+  name: "InternetCompetitionIpSetting",
 
   data() {
-        return {
+    return {};
-
-        };
   },
 
-    mounted() {
+  mounted() {},
 
-    },
+  methods: {},
-
-    methods: {
-
-    },
   components: {
     DataView,
-    }
+  },
 };
 </script>