diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/bean/DeviceChannel.java b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/DeviceChannel.java
index e01c40bd..30fae105 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/bean/DeviceChannel.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/DeviceChannel.java
@@ -2,11 +2,13 @@ package com.genersoft.iot.vmp.gb28181.bean;
 
 import com.genersoft.iot.vmp.gb28181.utils.MessageElement;
 import com.genersoft.iot.vmp.gb28181.utils.XmlUtil;
+import com.genersoft.iot.vmp.utils.CivilCodeUtil;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.extern.slf4j.Slf4j;
 import org.dom4j.Element;
+import org.springframework.util.ObjectUtils;
 
 import java.lang.reflect.InvocationTargetException;
 
@@ -218,7 +220,18 @@ public class DeviceChannel extends CommonGBChannel {
 	}
 
 	public static DeviceChannel decode(Element element) throws InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException {
-        return XmlUtil.elementDecode(element, DeviceChannel.class);
+		DeviceChannel deviceChannel = XmlUtil.elementDecode(element, DeviceChannel.class);
+		if(deviceChannel.getCivilCode() != null ) {
+			if (ObjectUtils.isEmpty(deviceChannel.getCivilCode())
+					|| deviceChannel.getCivilCode().length() > 8 ){
+				deviceChannel.setCivilCode(null);
+			}else {
+				if (CivilCodeUtil.INSTANCE.getCivilCodePo(deviceChannel.getCivilCode()) == null) {
+					deviceChannel.setCivilCode(null);
+				}
+			}
+		}
+		return XmlUtil.elementDecode(element, DeviceChannel.class);
 	}
 
 	public static DeviceChannel decodeWithOnlyDeviceId(Element element) {
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/bean/RegionTree.java b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/RegionTree.java
new file mode 100644
index 00000000..e6a9fd22
--- /dev/null
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/RegionTree.java
@@ -0,0 +1,64 @@
+package com.genersoft.iot.vmp.gb28181.bean;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.Data;
+
+/**
+ * 区域
+ */
+@Data
+@Schema(description = "区域树")
+public class RegionTree {
+
+    /**
+     * 区域国标编号
+     */
+    @Schema(description = "区域国标编号")
+    private String id;
+
+    /**
+     * 区域名称
+     */
+    @Schema(description = "区域名称")
+    private String label;
+
+    /**
+     * 父区域国标ID
+     */
+    @Schema(description = "父区域国标ID")
+    private String parentDeviceId;
+
+    @Schema(description = "是否有子节点")
+    private boolean isLeaf;
+
+    @Schema(description = "类型, 行政区划:0 摄像头: 1")
+    private int type;
+
+
+
+    public static RegionTree getInstance(Region region) {
+        RegionTree regionTree = new RegionTree();
+        regionTree.setId(region.getDeviceId());
+        regionTree.setLabel(region.getName());
+        regionTree.setParentDeviceId(region.getParentDeviceId());
+        regionTree.setType(0);
+        if (region.getDeviceId().length() < 8) {
+            regionTree.setLeaf(false);
+        }else {
+            regionTree.setLeaf(true);
+        }
+        return regionTree;
+    }
+
+
+
+    public static RegionTree getInstance(CommonGBChannel channel) {
+        RegionTree regionTree = new RegionTree();
+        regionTree.setId(channel.getGbDeviceId());
+        regionTree.setLabel(channel.getGbName());
+        regionTree.setParentDeviceId(channel.getGbCivilCode());
+        regionTree.setType(1);
+        regionTree.setLeaf(true);
+        return regionTree;
+    }
+}
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/RegionController.java b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/RegionController.java
index 913dad35..e4368cfe 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/RegionController.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/RegionController.java
@@ -2,6 +2,7 @@ package com.genersoft.iot.vmp.gb28181.controller;
 
 import com.genersoft.iot.vmp.conf.exception.ControllerException;
 import com.genersoft.iot.vmp.gb28181.bean.Region;
+import com.genersoft.iot.vmp.gb28181.bean.RegionTree;
 import com.genersoft.iot.vmp.gb28181.service.IRegionService;
 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
 import com.github.pagehelper.PageInfo;
@@ -53,7 +54,7 @@ public class RegionController {
     @Parameter(name = "parent", description = "所属行政区划编号", required = true)
     @ResponseBody
     @GetMapping("/tree/list")
-    public List<Region> queryForTree(
+    public List<RegionTree> queryForTree(
             @RequestParam(required = false) String query,
             @RequestParam(required = false) String parent
     ){
@@ -121,7 +122,7 @@ public class RegionController {
     @ResponseBody
     @GetMapping("/base/child/list")
     public List<Region> getAllChild(@RequestParam(required = false) String parent){
-        if (ObjectUtils.isEmpty(parent.trim())) {
+        if (ObjectUtils.isEmpty(parent)) {
             parent = null;
         }
         return regionService.getAllChild(parent);
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java b/src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java
index aeafd81f..b0096979 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java
@@ -1,6 +1,7 @@
 package com.genersoft.iot.vmp.gb28181.dao;
 
 import com.genersoft.iot.vmp.gb28181.bean.CommonGBChannel;
+import com.genersoft.iot.vmp.gb28181.bean.RegionTree;
 import com.genersoft.iot.vmp.gb28181.dao.provider.ChannelProvider;
 import org.apache.ibatis.annotations.*;
 import org.springframework.stereotype.Repository;
@@ -305,4 +306,17 @@ public interface CommonGBChannelMapper {
 
     @SelectProvider(type = ChannelProvider.class, method = "queryList")
     List<CommonGBChannel> queryList(String query, Boolean online);
+
+    @Select("<script>" +
+            " select " +
+            "    coalesce(gb_device_id, device_id) as id," +
+            "    coalesce(gb_name, name) as label, " +
+            "    1 as type, " +
+            "    true as is_leaf " +
+            " from wvp_device_channel " +
+            " where coalesce(gb_civil_code, civil_code) = #{parent} " +
+            " <if test='query != null'> AND (coalesce(gb_device_id, device_id) LIKE concat('%',#{query},'%') " +
+            " OR coalesce(gb_name, name) LIKE concat('%',#{query},'%'))</if> " +
+            " </script>")
+    List<RegionTree> queryForRegionTreeByCivilCode(@Param("query") String query, @Param("parent") String parent);
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/RegionMapper.java b/src/main/java/com/genersoft/iot/vmp/gb28181/dao/RegionMapper.java
index 3fe80eef..2c9a4381 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/RegionMapper.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/dao/RegionMapper.java
@@ -1,6 +1,7 @@
 package com.genersoft.iot.vmp.gb28181.dao;
 
 import com.genersoft.iot.vmp.gb28181.bean.Region;
+import com.genersoft.iot.vmp.gb28181.bean.RegionTree;
 import org.apache.ibatis.annotations.*;
 
 import java.util.List;
@@ -65,11 +66,17 @@ public interface RegionMapper {
     int batchAdd(List<Region> regionList);
 
     @Select(" <script>" +
-            " SELECT * from wvp_common_region " +
+            " SELECT " +
+            " device_id as id," +
+            " name as label, " +
+            " parent_device_id," +
+            " 0 as type," +
+            " false as is_leaf" +
+            " from wvp_common_region " +
             " where " +
             " <if test='parentId != null'> parent_device_id = #{parentId} </if> " +
             " <if test='parentId == null'> parent_device_id is null </if> " +
             " <if test='query != null'> AND (device_id LIKE concat('%',#{query},'%') OR name LIKE concat('%',#{query},'%'))</if> " +
             " </script>")
-    List<Region> queryForTree(@Param("query") String query, @Param("parentId") String parentId);
+    List<RegionTree> queryForTree(@Param("query") String query, @Param("parentId") String parentId);
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/service/IRegionService.java b/src/main/java/com/genersoft/iot/vmp/gb28181/service/IRegionService.java
index 22c46333..c4f00a6b 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/service/IRegionService.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/service/IRegionService.java
@@ -1,6 +1,7 @@
 package com.genersoft.iot.vmp.gb28181.service;
 
 import com.genersoft.iot.vmp.gb28181.bean.Region;
+import com.genersoft.iot.vmp.gb28181.bean.RegionTree;
 import com.github.pagehelper.PageInfo;
 
 import java.util.List;
@@ -31,7 +32,7 @@ public interface IRegionService {
 
     Region queryRegionByDeviceId(String regionDeviceId);
 
-    List<Region> queryForTree(String query, String parent);
+    List<RegionTree> queryForTree(String query, String parent);
 
     void syncFromChannel();
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/RegionServiceImpl.java b/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/RegionServiceImpl.java
index e360e78f..1dd7d5b9 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/RegionServiceImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/RegionServiceImpl.java
@@ -3,6 +3,8 @@ package com.genersoft.iot.vmp.gb28181.service.impl;
 import com.genersoft.iot.vmp.common.CivilCodePo;
 import com.genersoft.iot.vmp.conf.CivilCodeFileConf;
 import com.genersoft.iot.vmp.gb28181.bean.Region;
+import com.genersoft.iot.vmp.gb28181.bean.RegionTree;
+import com.genersoft.iot.vmp.gb28181.dao.CommonGBChannelMapper;
 import com.genersoft.iot.vmp.gb28181.dao.RegionMapper;
 import com.genersoft.iot.vmp.gb28181.service.IRegionService;
 import com.genersoft.iot.vmp.utils.CivilCodeUtil;
@@ -28,7 +30,7 @@ public class RegionServiceImpl implements IRegionService {
 
 
     @Autowired
-    private GbChannelServiceImpl gbChannelService;
+    private CommonGBChannelMapper commonGBChannelMapper;
 
 
     @Autowired
@@ -87,8 +89,13 @@ public class RegionServiceImpl implements IRegionService {
     }
 
     @Override
-    public List<Region> queryForTree(String query, String parent) {
-        return regionMapper.queryForTree(query, parent);
+    public List<RegionTree> queryForTree(String query, String parent) {
+        List<RegionTree> regionList = regionMapper.queryForTree(query, parent);
+        if (parent != null) {
+            List<RegionTree> channelList = commonGBChannelMapper.queryForRegionTreeByCivilCode(query, parent);
+            regionList.addAll(channelList);
+        }
+        return regionList;
     }
 
     @Override
diff --git a/web_src/src/components/common/RegionTree.vue b/web_src/src/components/common/RegionTree.vue
index 538a20d0..04e67c8e 100755
--- a/web_src/src/components/common/RegionTree.vue
+++ b/web_src/src/components/common/RegionTree.vue
@@ -10,49 +10,73 @@
         </div>
       </div>
     </div>
-    <vue-easy-tree
-      ref="veTree"
-      node-key="id"
-      height="72vh"
-      style="height: 78vh"
-      :loadNode="loadNode"
-      :data="treeData"
-      :props="props"
-    ></vue-easy-tree>
+    <div >
+      <vue-easy-tree
+        ref="veTree"
+        node-key="id"
+        height="72vh"
+        lazy
+        style="height: 78vh; padding: 2rem"
+        :load="loadNode"
+        :data="treeData"
+        @node-contextmenu="contextmenuEventHandler"
+        @node-click="nodeClickHandler"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+         <span v-if="node.data.type === 0" style="color: #409EFF" class="iconfont icon-bianzubeifen3"></span>
+         <span v-if="node.data.type === 1" style="color: #409EFF" class="iconfont icon-file-stream2"></span>
+        <span style=" padding-left: 1px">{{ node.label }}</span>
+      </span>
+      </vue-easy-tree>
+    </div>
+    <regionCode ref="regionCode"></regionCode>
   </div>
 </template>
 
 <script>
 import VueEasyTree from "@wchbrad/vue-easy-tree";
+import regionCode from './../dialog/regionCode'
 
 let treeData = []
 
 export default {
   name: 'DeviceTree',
   components: {
-    VueEasyTree
+    VueEasyTree, regionCode
   },
   data() {
     return {
-      props: {
-        label: "name",
-      },
+      searchSrt: "",
+      // props: {
+      //   label: "name",
+      // },
       treeData: [],
     }
   },
   props: ['edit', 'clickEvent', 'contextMenuEvent'],
   created() {
-    this.$axios({
-      method: 'get',
-      url: `/api/region/tree/list`,
-    }).then((res)=> {
-      if (res.data.code === 0) {
-        this.treeData.push(res.data.data)
-      }
-
-    }).catch(function (error) {
-      console.log(error);
-    });
+    // this.$axios({
+    //   method: 'get',
+    //   url: `/api/region/tree/list`,
+    // }).then((res)=> {
+    //   if (res.data.code === 0) {
+    //
+    //     for (let i = 0; i < res.data.data.length; i++) {
+    //       let item = res.data.data[i]
+    //       console.log(item)
+    //       this.treeData.push({
+    //         id: item.deviceId,
+    //         label: item.name,
+    //         children: [],
+    //         isLeaf: false,
+    //       })
+    //     }
+    //
+    //   }
+    //
+    // }).catch(function (error) {
+    //   console.log(error);
+    // });
   },
   methods: {
     onClick(evt, treeId, treeNode) {
@@ -63,6 +87,9 @@ export default {
     },
     handleCreated(ztreeObj) {
 
+    },
+    search() {
+
     },
     handleNodeClick(data, node, element) {
       let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId)
@@ -78,13 +105,27 @@ export default {
       }
     },
     loadNode: function (node, resolve) {
+      console.log(22222)
       console.log(node)
-      if (node.level === 0) {
-
-      } else {
+      if (node.level === 0 || node.data.id.length < 8) {
+        this.$axios({
+          method: 'get',
+          url: `/api/region/tree/list`,
+          params: {
+            query: this.searchSrt,
+            parent: node.data.id
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            resolve(res.data.data);
+          }
 
+        }).catch(function (error) {
+          console.log(error);
+        });
+      }else {
+        resolve([]);
       }
-
     },
     channelDataHandler: function (data, resolve) {
       if (data.length > 0) {
@@ -134,6 +175,131 @@ export default {
     },
     reset: function () {
       this.$forceUpdate();
+    },
+    contextmenuEventHandler: function (event,data,node,element){
+      if (node.data.type === 1) {
+        data.parentId = node.parent.data.id;
+        this.$contextmenu({
+          items: [
+            {
+              label: "移除通道",
+              icon: "el-icon-delete",
+              disabled: false,
+              onClick: () => {
+                this.$axios({
+                  method:"delete",
+                  url:"/api/platform/catalog/relation/del",
+                  data: data
+                }).then((res)=>{
+                  console.log("移除成功")
+                  node.parent.loaded = false
+                  node.parent.expand();
+                }).catch(function (error) {
+                  console.log(error);
+                });
+              }
+            }
+          ],
+          event, // 鼠标事件信息
+          customClass: "custom-class", // 自定义菜单 class
+          zIndex: 3000, // 菜单样式 z-index
+        });
+      }else if (node.data.type === 0){
+        this.$contextmenu({
+          items: [
+            {
+              label: "刷新节点",
+              icon: "el-icon-refresh",
+              disabled: false,
+              onClick: () => {
+                this.refreshNode(node);
+              }
+            },
+            {
+              label: "新建节点",
+              icon: "el-icon-plus",
+              disabled: false,
+              onClick: () => {
+                this.addRegion(data.id, node);
+              }
+            },
+            {
+              label: "修改节点",
+              icon: "el-icon-edit",
+              disabled: false,
+              onClick: () => {
+                this.editCatalog(data, node);
+              }
+            },
+            {
+              label: "删除节点",
+              icon: "el-icon-delete",
+              disabled: false,
+              onClick: () => {
+                this.$confirm('确定删除?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+                }).then(() => {
+                  this.removeCatalog(data.id, node)
+                }).catch(() => {
+
+                });
+              }
+            },
+            // {
+            //   label: "导出",
+            //   icon: "el-icon-download",
+            //   disabled: false,
+            //   children: [
+            //     {
+            //       label: "导出到文件",
+            //       onClick: () => {
+            //
+            //       },
+            //     },
+            //     {
+            //       label: "导出到其他平台",
+            //       onClick: () => {
+            //
+            //       },
+            //     }
+            //   ]
+            // },
+
+          ],
+          event, // 鼠标事件信息
+          customClass: "custom-class", // 自定义菜单 class
+          zIndex: 3000, // 菜单样式 z-index
+        });
+      }
+
+      return false;
+    },
+    refreshNode: function (node){
+      node.loaded = false
+      node.expand();
+    },
+    addRegion: function (id, node){
+
+      console.log(node)
+
+      this.$refs.regionCode.openDialog(code=>{
+
+        console.log(this.form)
+        console.log("code===> " + code)
+        this.form.gbDeviceId = code;
+        console.log("code22===> " + code)
+        node.loaded = false
+        node.expand();
+      }, id);
+    },
+    nodeClickHandler: function (data, node, tree){
+      console.log(data)
+      console.log(node)
+      this.chooseId = data.id;
+      this.chooseName = data.name;
+      if (this.catalogIdChange)this.catalogIdChange(this.chooseId, this.chooseName);
     }
   },
   destroyed() {
diff --git a/web_src/src/components/dialog/channelCode.vue b/web_src/src/components/dialog/channelCode.vue
index be3739d4..dacb3b6c 100644
--- a/web_src/src/components/dialog/channelCode.vue
+++ b/web_src/src/components/dialog/channelCode.vue
@@ -15,8 +15,8 @@
           <div style="text-align: center">{{ allVal[0].meaning }}</div>
         </div>
         <el-radio-group v-model="allVal[0].val" >
-          <el-radio v-for="item in regionList" :key="item.commonRegionDeviceId" :label="item.commonRegionDeviceId" style="line-height: 2rem">
-            {{ item.commonRegionName }} - {{ item.commonRegionDeviceId }}
+          <el-radio v-for="item in regionList" :key="item.deviceId" :label="item.deviceId" style="line-height: 2rem">
+            {{ item.name }} - {{ item.deviceId }}
           </el-radio>
         </el-radio-group>
       </el-tab-pane>
@@ -26,8 +26,8 @@
             <div style="text-align: center">{{ allVal[1].meaning }}</div>
           </div>
           <el-radio-group v-model="allVal[1].val" :disabled="allVal[1].lock">
-            <el-radio v-for="item in regionList" :key="item.commonRegionDeviceId" :label="item.commonRegionDeviceId.substring(2)" style="line-height: 2rem">
-              {{ item.commonRegionName }} - {{ item.commonRegionDeviceId.substring(2) }}
+            <el-radio v-for="item in regionList" :key="item.deviceId" :label="item.deviceId.substring(2)" style="line-height: 2rem">
+              {{ item.name }} - {{ item.deviceId.substring(2) }}
             </el-radio>
           </el-radio-group>
         </el-tab-pane>
@@ -37,8 +37,8 @@
             <div style="text-align: center">{{ allVal[2].meaning }}</div>
           </div>
           <el-radio-group v-model="allVal[2].val" :disabled="allVal[2].lock">
-            <el-radio v-for="item in regionList" :key="item.commonRegionDeviceId" :label="item.commonRegionDeviceId.substring(4)" style="line-height: 2rem">
-              {{ item.commonRegionName }} - {{ item.commonRegionDeviceId.substring(4) }}
+            <el-radio v-for="item in regionList" :key="item.deviceId" :label="item.deviceId.substring(4)" style="line-height: 2rem">
+              {{ item.name }} - {{ item.deviceId.substring(4) }}
             </el-radio>
           </el-radio-group>
         </el-tab-pane>
@@ -109,6 +109,7 @@
         </el-tab-pane>
     </el-tabs>
     <el-form style="">
+
       <el-form-item style="margin-top: 22px; margin-bottom: 0;">
         <div style="float:right;">
           <el-button type="primary" @click="handleOk">保存</el-button>
@@ -229,9 +230,9 @@ export default {
               // 数据库自增ID
               commonRegionId: -1,
               // 区域国标编号
-              commonRegionDeviceId: parent + '01',
+              deviceId: parent + '01',
               // 区域名称
-              commonRegionName: '市辖区',
+              name: '市辖区',
               // 父区域国标ID
               commonRegionParentId: parent,
             })
@@ -243,9 +244,9 @@ export default {
                 // 数据库自增ID
                 commonRegionId: -1,
                 // 区域国标编号
-                commonRegionDeviceId: parent + '01',
+                deviceId: parent + '01',
                 // 区域名称
-                commonRegionName: '市辖区',
+                name: '市辖区',
                 // 父区域国标ID
                 commonRegionParentId: parent,
               },
@@ -253,9 +254,9 @@ export default {
                 // 数据库自增ID
                 commonRegionId: -1,
                 // 区域国标编号
-                commonRegionDeviceId: parent + '02',
+                deviceId: parent + '02',
                 // 区域名称
-                commonRegionName: '县',
+                name: '县',
                 // 父区域国标ID
                 commonRegionParentId: parent,
               },
diff --git a/web_src/src/components/dialog/regionCode.vue b/web_src/src/components/dialog/regionCode.vue
new file mode 100644
index 00000000..2e12d514
--- /dev/null
+++ b/web_src/src/components/dialog/regionCode.vue
@@ -0,0 +1,292 @@
+<template>
+  <el-dialog
+    title="生成行政区划编码"
+    width="65rem"
+    top="2rem"
+    center
+    :close-on-click-modal="false"
+    :visible.sync="showVideoDialog"
+    :destroy-on-close="false"
+  >
+    <el-tabs v-model="activeKey" style="padding: 0 1rem; margin: auto 0" @tab-click="getRegionList">
+      <el-tab-pane name="0" >
+        <div slot="label" >
+          <div class="show-code-item">{{ allVal[0].val }}</div>
+          <div style="text-align: center">{{ allVal[0].meaning }}</div>
+        </div>
+        <el-radio-group v-model="allVal[0].val" @input="deviceChange">
+          <el-radio v-for="item in regionList" :key="item.deviceId" :label="item.deviceId" style="line-height: 2rem">
+            {{ item.name }} - {{ item.deviceId }}
+          </el-radio>
+        </el-radio-group>
+      </el-tab-pane>
+        <el-tab-pane name="1">
+          <div slot="label">
+            <div class="show-code-item">{{ allVal[1].val?allVal[1].val:"--" }}</div>
+            <div style="text-align: center">{{ allVal[1].meaning }}</div>
+          </div>
+          <el-radio-group v-model="allVal[1].val" :disabled="allVal[1].lock" @input="deviceChange">
+            <el-radio :key="-1" label="" style="line-height: 2rem">
+              不添加
+            </el-radio>
+            <el-radio v-for="item in regionList" :key="item.deviceId" :label="item.deviceId.substring(2)" style="line-height: 2rem">
+              {{ item.name }} - {{ item.deviceId.substring(2) }}
+            </el-radio>
+          </el-radio-group>
+        </el-tab-pane>
+        <el-tab-pane name="2">
+          <div slot="label">
+            <div class="show-code-item">{{ allVal[2].val?allVal[2].val:"--" }}</div>
+            <div style="text-align: center">{{ allVal[2].meaning }}</div>
+          </div>
+          <el-radio-group v-model="allVal[2].val" :disabled="allVal[2].lock" @input="deviceChange">
+            <el-radio :key="-1" label="" style="line-height: 2rem">
+              不添加
+            </el-radio>
+            <el-radio v-for="item in regionList" :key="item.deviceId" :label="item.deviceId.substring(4)" style="line-height: 2rem">
+              {{ item.name }} - {{ item.deviceId.substring(4) }}
+            </el-radio>
+          </el-radio-group>
+        </el-tab-pane>
+        <el-tab-pane name="3">
+          请手动输入基层接入单位编码,两位数字
+          <div slot="label">
+            <div class="show-code-item">{{ allVal[3].val?allVal[3].val:"--" }}</div>
+            <div style="text-align: center">{{ allVal[3].meaning }}</div>
+          </div>
+          <el-input
+            type="text"
+            placeholder="请输入内容"
+            v-model="allVal[3].val"
+            maxlength="2"
+            :disabled="allVal[3].lock"
+            show-word-limit
+            @input="deviceChange"
+          >
+          </el-input>
+        </el-tab-pane>
+    </el-tabs>
+    <el-form ref="form" style="  display: grid; padding: 1rem 2rem 0 2rem;grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
+      <el-form-item label="名称" prop="name" size="mini" >
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="编号" prop="deviceId" size="mini" >
+        <el-input v-model="form.deviceId" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item style="margin-top: 22px; margin-bottom: 0;">
+        <div style="float:right;">
+          <el-button type="primary" @click="handleOk">保存</el-button>
+          <el-button @click="closeModel">取消</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  props: {},
+  computed: {},
+  data() {
+    return {
+      showVideoDialog: false,
+      activeKey: '0',
+      form: {
+        name: "",
+        deviceId: "",
+        parentDeviceId: ""
+      },
+      allVal: [
+        {
+          id: [1, 2],
+          meaning: '省级编码',
+          val: '11',
+          type: '中心编码',
+          lock: false,
+        },
+        {
+          id: [3, 4],
+          meaning: '市级编码',
+          val: '',
+          type: '中心编码',
+          lock: false,
+        },
+        {
+          id: [5, 6],
+          meaning: '区级编码',
+          val: '',
+          type: '中心编码',
+          lock: false,
+        },
+        {
+          id: [7, 8],
+          meaning: '基层接入单位编码',
+          val: '',
+          type: '中心编码',
+          lock: false,
+        }
+      ],
+      regionList: [],
+      deviceTypeList: [],
+      industryCodeTypeList: [],
+      networkIdentificationTypeList: [],
+      endCallBck: null,
+    };
+  },
+  methods: {
+    openDialog: function (endCallBck, parentDeviceId, code, lockContent) {
+      console.log(code)
+      console.log(parentDeviceId)
+      this.showVideoDialog = true
+      this.activeKey= '0';
+      this.regionList = []
+      this.form.parentDeviceId = parentDeviceId
+
+      this.getRegionList()
+      if (typeof code != 'undefined' && code.length === 8) {
+        console.log(111)
+        this.allVal[0].val = code.substring(0, 2)
+        this.allVal[1].val = code.substring(2, 4)
+        this.allVal[2].val = code.substring(4, 6)
+        this.allVal[3].val = code.substring(6, 8)
+      }
+      console.log(this.allVal)
+      this.endCallBck = endCallBck;
+    },
+    getRegionList: function() {
+      console.log("getRegionList")
+      if (this.activeKey === '0' ) {
+        this.queryChildList();
+      }else if (this.activeKey === '1' || this.activeKey === '2') {
+        let parent = ''
+        if (this.activeKey === '1') {
+          parent = this.allVal[0].val
+
+          if (parent === '11' || parent === '12' || parent === '31') {
+            this.regionList = []
+            this.regionList.push({
+              // 数据库自增ID
+              commonRegionId: -1,
+              // 区域国标编号
+              deviceId: parent + '01',
+              // 区域名称
+              name: '市辖区',
+              // 父区域国标ID
+              commonRegionParentId: parent,
+            })
+            console.log(this.regionList)
+            return
+          } else if (parent === '50') {
+            this.regionList = [
+              {
+                // 数据库自增ID
+                commonRegionId: -1,
+                // 区域国标编号
+                deviceId: parent + '01',
+                // 区域名称
+                name: '市辖区',
+                // 父区域国标ID
+                commonRegionParentId: parent,
+              },
+              {
+                // 数据库自增ID
+                commonRegionId: -1,
+                // 区域国标编号
+                deviceId: parent + '02',
+                // 区域名称
+                name: '县',
+                // 父区域国标ID
+                commonRegionParentId: parent,
+              },
+            ]
+            return
+          }
+        }
+        if (this.activeKey === '2') {
+          if (this.allVal[1].val === ""){
+            parent = ""
+          }else if (this.allVal[0].val === '11' || this.allVal[0].val === '12' || this.allVal[0].val === '31' || this.allVal[0].val === '50') {
+            parent = this.allVal[0].val
+          } else {
+            parent = this.allVal[0].val + this.allVal[1].val
+          }
+
+        }
+        if (this.activeKey !== '0' && parent === '') {
+          this.$message.error('请先选择上级行政区划');
+        }
+        if (parent !== "") {
+          this.queryChildList(parent);
+        }else {
+          this.regionList = []
+        }
+
+      }
+    },
+    queryChildList: function(parent){
+      console.log("queryChildList")
+      this.regionList = []
+      this.$axios({
+        method: 'get',
+        url: "/api/region/base/child/list",
+        params: {
+          parent: parent,
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          this.regionList = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      }).catch((error) => {
+        this.$message.error(error);
+      });
+    },
+    closeModel: function (){
+      this.showVideoDialog = false
+    },
+    deviceChange: function (){
+      let code = this.allVal[0].val
+      if (this.allVal[1].val) {
+        code += this.allVal[1].val
+        if (this.allVal[2].val) {
+          code += this.allVal[2].val
+          if (this.allVal[3].val) {
+            code += this.allVal[3].val
+          }
+        }else {
+          this.allVal[3].val = ""
+        }
+      }else {
+        this.allVal[2].val = ""
+        this.allVal[3].val = ""
+      }
+      this.form.deviceId = code
+    },
+    handleOk: function() {
+      const code =
+        this.allVal[0].val +
+        this.allVal[1].val +
+        this.allVal[2].val +
+        this.allVal[3].val +
+        this.allVal[4].val +
+        this.allVal[5].val +
+        this.allVal[6].val +
+        this.allVal[7].val
+      console.log(code)
+      if (this.endCallBck) {
+        this.endCallBck(code)
+      }
+      this.showVideoDialog = false
+    }
+  },
+};
+</script>
+
+<style>
+.show-code-item {
+  text-align: center;
+  font-size: 3rem;
+}
+</style>
diff --git a/web_src/src/components/region.vue b/web_src/src/components/region.vue
index b84df50b..abe39526 100755
--- a/web_src/src/components/region.vue
+++ b/web_src/src/components/region.vue
@@ -20,8 +20,10 @@
                 <el-option label="在线" value="true"></el-option>
                 <el-option label="离线" value="false"></el-option>
               </el-select>
+              <el-button size="medium" type="primary" @click="add()">
+                添加
+              </el-button>
             </div>
-            <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
           </div>
         </div>
         <el-table ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
@@ -40,15 +42,12 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="操作" min-width="340" fixed="right">
+          <el-table-column label="添加状态" min-width="100">
             <template slot-scope="scope">
-              <el-button size="medium" icon="el-icon-video-play" type="text" @click="add(scope.row)">
-                添加
-              </el-button>
-              <el-divider direction="vertical"></el-divider>
-              <el-button size="medium" type="text" icon="el-icon-edit" @click="remove(scope.row)">
-                移除
-              </el-button>
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium" v-if="scope.row.civilCode">已添加</el-tag>
+                <el-tag size="medium" type="info" v-if="!scope.row.civilCode">未添加</el-tag>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -102,30 +101,20 @@ export default {
   methods: {
     initData: function () {
       if (typeof (this.parentChannelId) == "undefined" || this.parentChannelId == 0) {
-        this.channelList();
+        this.getChannelList();
       } else {
         this.showSubchannels();
       }
     },
-    initParam: function () {
-      this.deviceId = this.$route.params.deviceId;
-      this.parentChannelId = this.$route.params.parentChannelId;
-      this.currentPage = 1;
-      this.count = 15;
-      if (this.parentChannelId == "" || this.parentChannelId == 0) {
-        this.beforeUrl = "/deviceList"
-      }
-
-    },
     currentChange: function (val) {
       this.currentPage = val;
       this.initData();
     },
     handleSizeChange: function (val) {
       this.count = val;
-      this.channelList();
+      this.getChannelList();
     },
-    channelList: function () {
+    getChannelList: function () {
       let that = this;
       if (typeof (this.$route.params.deviceId) == "undefined") return;
       this.$axios({
diff --git a/web_src/src/layout/UiHeader.vue b/web_src/src/layout/UiHeader.vue
index f9f81931..a3f130fc 100755
--- a/web_src/src/layout/UiHeader.vue
+++ b/web_src/src/layout/UiHeader.vue
@@ -10,11 +10,11 @@
       <el-menu-item index="/map">电子地图</el-menu-item>
       <el-menu-item index="/streamPushList">推流列表</el-menu-item>
       <el-menu-item index="/streamProxyList">拉流代理</el-menu-item>
-      <el-submenu >
+      <el-submenu index="/channel">
         <template slot="title">通道管理</template>
-        <el-menu-item index="/region">行政区划</el-menu-item>
-        <el-menu-item index="/group">业务分组</el-menu-item>
-        <el-menu-item index="/commonChannelList">通道列表</el-menu-item>
+        <el-menu-item index="/channel/region">行政区划</el-menu-item>
+        <el-menu-item index="/channel/group">业务分组</el-menu-item>
+        <el-menu-item index="/channel/list">通道列表</el-menu-item>
       </el-submenu>
       <el-menu-item index="/cloudRecord">云端录像</el-menu-item>
       <el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
@@ -55,12 +55,15 @@ export default {
       alarmNotify: false,
       sseSource: null,
       username: userService.getUser().username,
-      activeIndex: this.$route.path,
+      activeIndex: this.$route.path.indexOf("/", 1)>0?this.$route.path.substring(0, this.$route.path.indexOf("/", 1)):this.$route.path,
       editUser: userService.getUser() ? userService.getUser().role.id === 1 : false
     };
   },
   created() {
-    console.log(JSON.stringify(userService.getUser()))
+    console.log(34334)
+    console.log(this.$route.path)
+    console.log(this.$route.path.indexOf("/", 1))
+    console.log(this.activeIndex)
     if (this.$route.path.startsWith("/channelList")) {
       this.activeIndex = "/deviceList"
     }
@@ -182,4 +185,14 @@ export default {
   color: #fff !important;
   background-color: #1890ff !important;
 }
+#UiHeader .el-submenu.is-active {
+  background-color: #1890ff !important;
+}
+#UiHeader .el-submenu.is-active .el-submenu__title {
+  color: #fff !important;
+  background-color: #1890ff !important;
+}
+#UiHeader .el-submenu.is-active .el-submenu__icon-arrow {
+  color: #fff !important;
+}
 </style>
diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js
index 0b9f2a52..a87d747e 100755
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -133,7 +133,7 @@ export default new VueRouter({
           component: userApiKeyManager,
         },
         {
-          path: '/region',
+          path: '/channel/region',
           name: 'region',
           component: region,
         }