diff --git a/web_src/src/components/dialog/GbChannelSelect.vue b/web_src/src/components/dialog/GbChannelSelect.vue
index d7008e5db..e3df0452d 100644
--- a/web_src/src/components/dialog/GbChannelSelect.vue
+++ b/web_src/src/components/dialog/GbChannelSelect.vue
@@ -26,9 +26,7 @@
           <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="channelType" placeholder="请选择"
                      default-first-option>
             <el-option label="全部" value=""></el-option>
-            <el-option label="国标设备" :value="1"></el-option>
-            <el-option label="推流设备" :value="2"></el-option>
-            <el-option label="拉流代理" :value="3"></el-option>
+            <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
           <el-button size="mini" :loading="getChannelListLoading"
                      @click="getChannelList()">刷新</el-button>
@@ -49,9 +47,7 @@
         <el-table-column label="类型" min-width="100">
           <template v-slot:default="scope">
             <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-              <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-              <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+              <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style" >{{$channelTypeList[scope.row.dataType].name}}</el-tag>
             </div>
           </template>
         </el-table-column>
diff --git a/web_src/src/components/dialog/UnusualGroupChannelSelect.vue b/web_src/src/components/dialog/UnusualGroupChannelSelect.vue
index 6d3950610..130e7d9ef 100644
--- a/web_src/src/components/dialog/UnusualGroupChannelSelect.vue
+++ b/web_src/src/components/dialog/UnusualGroupChannelSelect.vue
@@ -26,9 +26,7 @@
           <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="channelType" placeholder="请选择"
                      default-first-option>
             <el-option label="全部" value=""></el-option>
-            <el-option label="国标设备" :value="1"></el-option>
-            <el-option label="推流设备" :value="2"></el-option>
-            <el-option label="拉流代理" :value="3"></el-option>
+            <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
           <el-button size="mini" type="primary" :loading="getChannelListLoading" :disabled="multipleSelection.length ===0"
                      @click="clearUnusualRegion()">清除</el-button>
@@ -55,9 +53,7 @@
         <el-table-column label="类型" min-width="100">
           <template v-slot:default="scope">
             <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-              <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-              <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+              <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style">{{$channelTypeList[scope.row.dataType].name}}</el-tag>
             </div>
           </template>
         </el-table-column>
diff --git a/web_src/src/components/dialog/UnusualRegionChannelSelect.vue b/web_src/src/components/dialog/UnusualRegionChannelSelect.vue
index 251cf0372..66191b759 100644
--- a/web_src/src/components/dialog/UnusualRegionChannelSelect.vue
+++ b/web_src/src/components/dialog/UnusualRegionChannelSelect.vue
@@ -26,9 +26,7 @@
           <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="channelType" placeholder="请选择"
                      default-first-option>
             <el-option label="全部" value=""></el-option>
-            <el-option label="国标设备" :value="1"></el-option>
-            <el-option label="推流设备" :value="2"></el-option>
-            <el-option label="拉流代理" :value="3"></el-option>
+            <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
           <el-button size="mini" type="primary" :loading="getChannelListLoading" :disabled="multipleSelection.length ===0"
                      @click="clearUnusualRegion()">清除</el-button>
@@ -55,9 +53,7 @@
         <el-table-column label="类型" min-width="100">
           <template v-slot:default="scope">
             <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-              <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-              <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+              <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style">{{$channelTypeList[scope.row.dataType].name}}</el-tag>
             </div>
           </template>
         </el-table-column>
diff --git a/web_src/src/components/dialog/linkChannelRecord.vue b/web_src/src/components/dialog/linkChannelRecord.vue
index 2f5834bd9..644e10347 100755
--- a/web_src/src/components/dialog/linkChannelRecord.vue
+++ b/web_src/src/components/dialog/linkChannelRecord.vue
@@ -25,9 +25,7 @@
                 <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="channelType" placeholder="请选择"
                            default-first-option>
                   <el-option label="全部" value=""></el-option>
-                  <el-option label="国标设备" :value="1"></el-option>
-                  <el-option label="推流设备" :value="2"></el-option>
-                  <el-option label="拉流代理" :value="3"></el-option>
+                  <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
                 </el-select>
                 <el-button v-if="hasLink !=='true'" size="mini" type="primary" @click="add()">
                   添加
@@ -56,9 +54,7 @@
             <el-table-column label="类型" min-width="100">
               <template v-slot:default="scope">
                 <div slot="reference" class="name-wrapper">
-                  <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-                  <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-                  <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+                  <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style">{{$channelTypeList[scope.row.dataType].name}}</el-tag>
                 </div>
               </template>
             </el-table-column>
diff --git a/web_src/src/components/dialog/shareChannelAdd.vue b/web_src/src/components/dialog/shareChannelAdd.vue
index b6a3429c6..e4f8595d9 100755
--- a/web_src/src/components/dialog/shareChannelAdd.vue
+++ b/web_src/src/components/dialog/shareChannelAdd.vue
@@ -23,9 +23,7 @@
             <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="channelType" placeholder="请选择"
                        default-first-option>
               <el-option label="全部" value=""></el-option>
-              <el-option label="国标设备" :value="1"></el-option>
-              <el-option label="推流设备" :value="2"></el-option>
-              <el-option label="拉流代理" :value="3"></el-option>
+              <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
             <el-button v-if="hasShare !=='true'" size="mini" type="primary" @click="add()">
               添加
@@ -74,9 +72,7 @@
         <el-table-column label="类型" min-width="100">
           <template v-slot:default="scope">
             <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-              <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-              <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+              <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style">{{$channelTypeList[scope.row.dataType].name}}</el-tag>
             </div>
           </template>
         </el-table-column>
diff --git a/web_src/src/components/group.vue b/web_src/src/components/group.vue
index 311474cb0..43cb5bea0 100755
--- a/web_src/src/components/group.vue
+++ b/web_src/src/components/group.vue
@@ -32,9 +32,7 @@
                          v-model="channelType" placeholder="请选择"
                          default-first-option>
                 <el-option label="全部" value=""></el-option>
-                <el-option label="国标设备" :value="1"></el-option>
-                <el-option label="推流设备" :value="2"></el-option>
-                <el-option label="拉流代理" :value="3"></el-option>
+                <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
               </el-select>
               <el-button size="mini" type="primary" @click="add()">
                 添加通道
@@ -63,9 +61,7 @@
           <el-table-column label="类型" min-width="100">
             <template v-slot:default="scope">
               <div slot="reference" class="name-wrapper">
-                <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-                <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-                <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+                <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style" >{{$channelTypeList[scope.row.dataType].name}}</el-tag>
               </div>
             </template>
           </el-table-column>
diff --git a/web_src/src/components/region.vue b/web_src/src/components/region.vue
index 8482eb9b9..1ae6f29b0 100755
--- a/web_src/src/components/region.vue
+++ b/web_src/src/components/region.vue
@@ -28,12 +28,11 @@
                 <el-option label="离线" value="false"></el-option>
               </el-select>
               类型:
+
               <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="channelType" placeholder="请选择"
                          default-first-option>
                 <el-option label="全部" value=""></el-option>
-                <el-option label="国标设备" :value="1"></el-option>
-                <el-option label="推流设备" :value="2"></el-option>
-                <el-option label="拉流代理" :value="3"></el-option>
+                <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id"></el-option>
               </el-select>
               <el-button size="mini" type="primary" @click="add()">
                 添加通道
@@ -62,9 +61,7 @@
           <el-table-column label="类型" min-width="100">
             <template v-slot:default="scope">
               <div slot="reference" class="name-wrapper">
-                <el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
-                <el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
-                <el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
+                <el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style" >{{$channelTypeList[scope.row.dataType].name}}</el-tag>
               </div>
             </template>
           </el-table-column>
diff --git a/web_src/src/main.js b/web_src/src/main.js
index f37a2dcc6..8ea7ece1c 100755
--- a/web_src/src/main.js
+++ b/web_src/src/main.js
@@ -76,6 +76,13 @@ axios.interceptors.request.use(
 Vue.prototype.$axios = axios;
 Vue.prototype.$cookies.config(60 * 30);
 Vue.prototype.$tableHeght = window.innerHeight - 170;
+Vue.prototype.$channelTypeList = {
+  1: {id: 1, name: "国标设备", style: {color: "#409eff", borderColor: "#b3d8ff"}},
+  2: {id: 2, name: "推流设备", style: {color: "#67c23a", borderColor: "#c2e7b0"}},
+  3: {id: 3, name: "拉流代理", style: {color: "#e6a23c", borderColor: "#f5dab1"}},
+};
+
+