feat:接入区域管理

 <template>
+    <!-- 监控日志 -->
     <div class="jktjDetail form-clues">
+        <!-- 头部搜索 -->
         <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
             <el-row>
                 <el-col :span="6">
@@ -15,24 +17,23 @@
                         </el-date-picker>
                     </el-form-item>
                 </el-col>
-
+                <!-- 按钮操作 -->
                 <el-col :span="12" class="btnColRight">
                     <el-button type="default" @click="resetForm"> 重置 </el-button>
                     <el-button type="primary"> 查询 </el-button>
                 </el-col>
             </el-row>
         </el-form>
-        <div class="form-clues-content">
-            <div class="echarts-box">
-                <div id="myChart" class="chart"></div>
-            </div>
+        <!-- 表格 -->
+        <div class="form-clues-content echarts-box">
+            <div id="myChart" class="chart"></div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "jktjDetail",
+    name: "jktj",
     data () {
         return {
             // 开始结束日期限制
@@ -55,6 +56,7 @@ export default {
                     }
                 }
             },
+            // 搜索表单
             form: {
                 startTime: "",
                 endTime: ""
@@ -62,9 +64,11 @@ export default {
         }
     },
     mounted () {
+        // 初始化图表
         this.echartInit();
     },
     methods: {
+        // 重置
         resetForm () {
             this.form = {
                 startTime: "",

+<template>
+  <!-- 编辑 -->
+  <dialogBox :title="title" @closeDialog="closeDialog" @submitForm="handleSubmit" v-model="myValue">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="接入点代码" prop="jrddm">
+            <el-input v-model="ruleForm.jrddm" placeholder="接入点代码"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="接入点名称" prop="jrdmc">
+            <el-input v-model="ruleForm.jrdmc" placeholder="接入点名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="队列名称" prop="dlmc">
+            <el-input v-model="ruleForm.dlmc" placeholder="队列名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="ip地址" prop="ip">
+            <el-input v-model="ruleForm.ip" placeholder="ip地址"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="负责人" prop="fzr">
+            <el-input v-model="ruleForm.fzr" placeholder="负责人"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </dialogBox>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+    title: { type: String, default: '详情' }
+  },
+  data () {
+    return {
+      myValue: this.value,
+      ruleForm: {
+        jrddm: '',
+        jrdmc: '',
+        dlmc: '',
+        ywmc: '',
+        czsj: ''
+      },
+      rules: {
+        jrddm: [
+          { required: true, message: '接入点代码', trigger: 'blur' }
+        ],
+        jrdmc: [
+          { required: true, message: '行政区名称', trigger: 'blur' }
+        ],
+        dlmc: [
+          { required: true, message: '队列名称', trigger: 'blur' }
+        ],
+        ip: [
+          { required: true, message: 'ip地址', trigger: 'blur' }
+        ],
+        fzr: [
+          { required: true, message: '负责人', trigger: 'blur' }
+        ],
+      }
+    }
+  },
+  watch: {
+    value (val) {
+      this.myValue = val
+    }
+  },
+  methods: {
+    closeDialog () {
+      this.$emit('input', false)
+    },
+    handleSubmit () {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
\ No newline at end of file

 <template>
-  <div class="reportLog from-clues">
+  <!-- 接入区域管理 -->
+  <div class="from-clues">
+    <!-- 头部搜索 -->
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
         <el-row>
@@ -16,39 +18,54 @@
               </el-select>
             </el-form-item>
           </el-col>
-
+          <!-- 操作按钮 -->
           <el-col :span="12" class="btnColRight">
             <el-form-item>
-              <el-button type="danger">删除</el-button>
+              <el-button type="primary">删除</el-button>
               <el-button @click="resetForm('ruleForm')">重置</el-button>
+              <el-button type="primary">新增</el-button>
               <el-button type="primary" @click="handleSubmit">查询结果</el-button>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </div>
+    <!-- 列表数据 -->
     <div class="from-clues-content">
       <lb-table ref="table" @selection-change="handleSelectionChange" :page-size="pageData.size"
         :current-page.sync="pageData.current" :total="pageData.total" @size-change="handleSizeChange"
         @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
       </lb-table>
     </div>
+    <!-- 修改弹框 -->
+    <detailDialog v-model="isShow" />
   </div>
 </template>
-
 <script>
+// 接入区域管理
+// 引入table数据
 import data from "./data"
+// 引入混入方法
 import tableMixin from '@/mixins/tableMixin.js'
+// 引入修改弹框
+import detailDialog from './components/detailDialog'
 export default {
-  name: "reportLog",
+  name: "jrqygl",
   mixins: [tableMixin],
+  // 注册组件
+  components: {
+    detailDialog
+  },
   data () {
     return {
+      isShow: false,
+      // 搜索表单
       form: {
         fzr: '',
         jrdmc: '',
         currentPage: 1
       },
+      // 表单校验
       rules: {
         fzr: [
           { required: true, message: '负责人', trigger: 'change' }
@@ -57,7 +74,9 @@ export default {
           { required: true, message: '接入点名称', trigger: 'change' }
         ]
       },
+      // 列表数据
       tableData: {
+        // 列表头部
         columns: data.columns().concat([
           {
             label: "操作",
@@ -68,8 +87,6 @@ export default {
                   <el-button
                     type="text"
                     size="mini"
-                    icon="el-icon-edit"
-                    style="margin-left: 10px"
                     onClick={() => { this.handleEdit(scope.row) }}
                   >
                     修改
@@ -79,25 +96,30 @@ export default {
             }
           }
         ]),
+        // 列表数据
         data: [{}]
       },
+      // 分页
       pageData: {
         total: 0,
         pageSize: 15,
-      },
+      }
     }
   },
   methods: {
+    // 多选
     handleSelectionChange (val) {
-
     },
+    // 重置表单
     resetForm () {
       this.$refs.ruleForm.resetFields();
     },
+    // 初始化数据
     async featchData () {
     },
+    // 修改
     handleEdit (row) {
-
+      this.isShow = true
     }
   }
 }