From 8d488b33e9395759e6e6403663662a98e8fab31e Mon Sep 17 00:00:00 2001
From: lin <648540858@qq.com>
Date: Wed, 2 Jul 2025 17:21:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=8F=9C=E5=8D=95=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=80=9A=E9=81=93=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=EF=BC=8C=E6=94=AF=E6=8C=81=E8=8A=82=E7=82=B9=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gb28181/controller/GroupController.java   |  14 +-
 .../gb28181/controller/RegionController.java  |  21 +-
 .../gb28181/dao/CommonGBChannelMapper.java    |   4 +-
 .../iot/vmp/gb28181/dao/RegionMapper.java     |   3 +-
 .../vmp/gb28181/service/IGroupService.java    |   3 +
 .../vmp/gb28181/service/IRegionService.java   |   4 +-
 .../service/impl/GroupServiceImpl.java        |  14 +
 .../service/impl/RegionServiceImpl.java       |  23 +-
 web/src/api/group.js                          |  12 +
 web/src/api/region.js                         |  12 +
 web/src/icons/svg/devices.svg                 |   1 +
 web/src/icons/svg/devices1.svg                |   1 +
 web/src/layout/components/TagsView/index.vue  |   8 +-
 web/src/router/index.js                       |  40 +-
 web/src/store/modules/commonChanel.js         | 237 ++++-
 web/src/store/modules/group.js                |  12 +-
 web/src/store/modules/region.js               |  12 +-
 web/src/views/channel/edit.vue                |  30 +
 web/src/views/channel/group/index.vue         |   8 +-
 web/src/views/channel/index.vue               | 439 +++++++++
 web/src/views/channel/region/index.vue        |   8 +-
 web/src/views/common/DeviceTree.vue           |  16 +-
 web/src/views/common/GroupTree.vue            | 146 ++-
 web/src/views/common/RegionTree.vue           | 159 +++-
 web/src/views/common/channelPlayer/index.vue  | 899 ++++++++++++++++++
 .../common/channelPlayer/ptzCruising.vue      | 328 +++++++
 .../views/common/channelPlayer/ptzPreset.vue  | 152 +++
 .../views/common/channelPlayer/ptzScan.vue    | 212 +++++
 .../views/common/channelPlayer/ptzSwitch.vue  |  76 ++
 .../views/common/channelPlayer/ptzWiper.vue   |  58 ++
 web/src/views/device/channel/index.vue        |  10 +-
 web/src/views/device/list.vue                 |   6 +-
 web/src/views/dialog/GbChannelSelect.vue      |   8 +-
 web/src/views/dialog/GbDeviceSelect.vue       |   6 +-
 .../dialog/UnusualGroupChannelSelect.vue      |   6 +-
 .../dialog/UnusualRegionChannelSelect.vue     |   6 +-
 web/src/views/dialog/linkChannelRecord.vue    |   6 +-
 web/src/views/dialog/shareChannelAdd.vue      |   6 +-
 web/src/views/live/index.vue                  |  79 +-
 web/src/views/platform/index.vue              |   6 +-
 web/src/views/recordPlan/index.vue            |   6 +-
 web/src/views/streamProxy/index.vue           |   6 +-
 .../views/streamPush/buildPushStreamUrl.vue   |   5 +-
 web/src/views/streamPush/index.vue            |   6 +-
 44 files changed, 2865 insertions(+), 249 deletions(-)
 create mode 100644 web/src/icons/svg/devices.svg
 create mode 100644 web/src/icons/svg/devices1.svg
 create mode 100644 web/src/views/channel/edit.vue
 create mode 100755 web/src/views/channel/index.vue
 create mode 100755 web/src/views/common/channelPlayer/index.vue
 create mode 100644 web/src/views/common/channelPlayer/ptzCruising.vue
 create mode 100644 web/src/views/common/channelPlayer/ptzPreset.vue
 create mode 100644 web/src/views/common/channelPlayer/ptzScan.vue
 create mode 100644 web/src/views/common/channelPlayer/ptzSwitch.vue
 create mode 100644 web/src/views/common/channelPlayer/ptzWiper.vue

diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/GroupController.java b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/GroupController.java
index 1284477af..4f9c3bc6a 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/GroupController.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/GroupController.java
@@ -5,6 +5,7 @@ import com.genersoft.iot.vmp.gb28181.bean.Group;
 import com.genersoft.iot.vmp.gb28181.bean.GroupTree;
 import com.genersoft.iot.vmp.gb28181.service.IGroupService;
 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
+import com.github.pagehelper.PageInfo;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.tags.Tag;
@@ -33,7 +34,7 @@ public class GroupController {
         groupService.add(group);
     }
 
-    @Operation(summary = "查询分组")
+    @Operation(summary = "查询分组节点")
     @Parameter(name = "query", description = "要搜索的内容", required = true)
     @Parameter(name = "parent", description = "所属分组编号", required = true)
     @ResponseBody
@@ -49,6 +50,17 @@ public class GroupController {
         return groupService.queryForTree(query, parent, hasChannel);
     }
 
+    @Operation(summary = "查询分组")
+    @Parameter(name = "query", description = "要搜索的内容", required = true)
+    @Parameter(name = "channel", description = "true为查询通道，false为查询节点", required = true)
+    @ResponseBody
+    @GetMapping("/tree/query")
+    public PageInfo<Group> queryTree(Integer page, Integer count,
+                                      @RequestParam(required = true) String query
+    ){
+        return groupService.queryList(page, count, query);
+    }
+
     @Operation(summary = "更新分组")
     @Parameter(name = "group", description = "Group", required = true)
     @ResponseBody
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 d49c28626..ff415df17 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
@@ -50,20 +50,29 @@ public class RegionController {
         return regionService.query(query, page, count);
     }
 
-    @Operation(summary = "查询区域")
+    @Operation(summary = "查询区域节点")
     @Parameter(name = "query", description = "要搜索的内容", required = true)
     @Parameter(name = "parent", description = "所属行政区划编号", required = true)
+    @Parameter(name = "hasChannel", description = "是否查询通道", required = true)
     @ResponseBody
     @GetMapping("/tree/list")
     public List<RegionTree> queryForTree(
-            @RequestParam(required = false) String query,
             @RequestParam(required = false) Integer parent,
             @RequestParam(required = false) Boolean hasChannel
     ){
-        if (ObjectUtils.isEmpty(query)) {
-            query = null;
-        }
-        return regionService.queryForTree(query, parent, hasChannel);
+        return regionService.queryForTree(parent, hasChannel);
+    }
+
+
+    @Operation(summary = "查询区域")
+    @Parameter(name = "query", description = "要搜索的内容", required = true)
+    @Parameter(name = "channel", description = "true为查询通道，false为查询节点", required = true)
+    @ResponseBody
+    @GetMapping("/tree/query")
+    public PageInfo<Region> queryTree(Integer page, Integer count,
+            @RequestParam(required = true) String query
+    ){
+        return regionService.queryList(page, count, query);
     }
 
     @Operation(summary = "更新区域")
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 33d58ced7..f8e09f2a4 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
@@ -275,10 +275,8 @@ public interface CommonGBChannelMapper {
             "    true as is_leaf " +
             " from wvp_device_channel " +
             " where coalesce(gb_civil_code, civil_code) = #{parentDeviceId} " +
-            " <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("parentDeviceId") String parentDeviceId);
+    List<RegionTree> queryForRegionTreeByCivilCode(@Param("parentDeviceId") String parentDeviceId);
 
     @Update(value = {" <script>" +
             " UPDATE wvp_device_channel " +
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 c9b9cfac8..8b80afb6f 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
@@ -80,9 +80,8 @@ public interface RegionMapper {
             " where " +
             " <if test='parentId != null'> parent_id = #{parentId} </if> " +
             " <if test='parentId == null'> parent_id is null </if> " +
-            " <if test='query != null'> AND (device_id LIKE concat('%',#{query},'%') escape '/' OR name LIKE concat('%',#{query},'%') escape '/')</if> " +
             " </script>")
-    List<RegionTree> queryForTree(@Param("query") String query, @Param("parentId") Integer parentId);
+    List<RegionTree> queryForTree(@Param("parentId") Integer parentId);
 
     @Delete("<script>" +
             " DELETE FROM wvp_common_region WHERE id in " +
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/service/IGroupService.java b/src/main/java/com/genersoft/iot/vmp/gb28181/service/IGroupService.java
index f1ff825c6..79a405434 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/service/IGroupService.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/service/IGroupService.java
@@ -2,6 +2,7 @@ package com.genersoft.iot.vmp.gb28181.service;
 
 import com.genersoft.iot.vmp.gb28181.bean.Group;
 import com.genersoft.iot.vmp.gb28181.bean.GroupTree;
+import com.github.pagehelper.PageInfo;
 
 import java.util.List;
 
@@ -23,4 +24,6 @@ public interface IGroupService {
     boolean batchAdd(List<Group> groupList);
 
     List<Group> getPath(String deviceId, String businessGroup);
+
+    PageInfo<Group> queryList(Integer page, Integer count, String query);
 }
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 6a2b9296c..c4878fb31 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
@@ -27,7 +27,7 @@ public interface IRegionService {
 
     Region queryRegionByDeviceId(String regionDeviceId);
 
-    List<RegionTree> queryForTree(String query, Integer parent, Boolean hasChannel);
+    List<RegionTree> queryForTree(Integer parent, Boolean hasChannel);
 
     void syncFromChannel();
 
@@ -40,4 +40,6 @@ public interface IRegionService {
     String getDescription(String civilCode);
 
     void addByCivilCode(String civilCode);
+
+    PageInfo<Region> queryList(int page, int count, String query);
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GroupServiceImpl.java b/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GroupServiceImpl.java
index bc8e9f106..72b6f1f4f 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GroupServiceImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GroupServiceImpl.java
@@ -10,6 +10,8 @@ import com.genersoft.iot.vmp.gb28181.service.IGbChannelService;
 import com.genersoft.iot.vmp.gb28181.service.IGroupService;
 import com.genersoft.iot.vmp.utils.DateUtil;
 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
 import com.google.common.collect.Lists;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -293,4 +295,16 @@ public class GroupServiceImpl implements IGroupService {
         allParent.add(parent);
         return allParent;
     }
+
+    @Override
+    public PageInfo<Group> queryList(Integer page, Integer count, String query) {
+        PageHelper.startPage(page, count);
+        if (query != null) {
+            query = query.replaceAll("/", "//")
+                    .replaceAll("%", "/%")
+                    .replaceAll("_", "/_");
+        }
+        List<Group> all = groupManager.query(query, null, null);
+        return new PageInfo<>(all);
+    }
 }
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 b21832a73..abc2fd6bf 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
@@ -144,17 +144,12 @@ public class RegionServiceImpl implements IRegionService {
     }
 
     @Override
-    public List<RegionTree> queryForTree(String query, Integer parent, Boolean hasChannel) {
-        if (query != null) {
-            query = query.replaceAll("/", "//")
-                    .replaceAll("%", "/%")
-                    .replaceAll("_", "/_");
-        }
-        List<RegionTree> regionList = regionMapper.queryForTree(query, parent);
+    public List<RegionTree> queryForTree(Integer parent, Boolean hasChannel) {
+        List<RegionTree> regionList = regionMapper.queryForTree(parent);
         if (parent != null && hasChannel != null && hasChannel) {
             Region parentRegion = regionMapper.queryOne(parent);
             if (parentRegion != null) {
-                List<RegionTree> channelList = commonGBChannelMapper.queryForRegionTreeByCivilCode(query, parentRegion.getDeviceId());
+                List<RegionTree> channelList = commonGBChannelMapper.queryForRegionTreeByCivilCode(parentRegion.getDeviceId());
                 regionList.addAll(channelList);
             }
         }
@@ -324,4 +319,16 @@ public class RegionServiceImpl implements IRegionService {
             parentId = region.getId();
         }
     }
+
+    @Override
+    public PageInfo<Region> queryList(int page, int count, String query) {
+        PageHelper.startPage(page, count);
+        if (query != null) {
+            query = query.replaceAll("/", "//")
+                    .replaceAll("%", "/%")
+                    .replaceAll("_", "/_");
+        }
+        List<Region> all = regionMapper.query(query, null);
+        return new PageInfo<>(all);
+    }
 }
diff --git a/web/src/api/group.js b/web/src/api/group.js
index eaa30bd8c..13d4118f9 100644
--- a/web/src/api/group.js
+++ b/web/src/api/group.js
@@ -48,3 +48,15 @@ export function getPath(params) {
     }
   })
 }
+export function queryTree(params) {
+  const { page, count, query } = params
+  return request({
+    method: 'get',
+    url: `/api/group/tree/query`,
+    params: {
+      query: query,
+      page: page,
+      count: count
+    }
+  })
+}
diff --git a/web/src/api/region.js b/web/src/api/region.js
index 8de029dc0..de5f9948f 100644
--- a/web/src/api/region.js
+++ b/web/src/api/region.js
@@ -81,4 +81,16 @@ export function queryPath(deviceId) {
     }
   })
 }
+export function queryTree(params) {
+  const { page, count, query } = params
+  return request({
+    method: 'get',
+    url: `/api/region/tree/query`,
+    params: {
+      query: query,
+      page: page,
+      count: count
+    }
+  })
+}
 
diff --git a/web/src/icons/svg/devices.svg b/web/src/icons/svg/devices.svg
new file mode 100644
index 000000000..c7e7fc1f6
--- /dev/null
+++ b/web/src/icons/svg/devices.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751337772774" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19666" id="mx_n_1751337772775" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M793.6 128a38.4 38.4 0 0 1 38.4 38.4v46.912h110.912a38.4 38.4 0 0 1 38.4 38.4V806.4a38.4 38.4 0 0 1-38.4 38.4L832 844.736v46.976a38.4 38.4 0 0 1-38.4 38.4H238.912a38.4 38.4 0 0 1-38.4-38.4V844.8L89.6 844.8a38.4 38.4 0 0 1-38.4-38.4V251.712a38.4 38.4 0 0 1 38.4-38.4h110.912V166.4a38.4 38.4 0 0 1 38.4-38.4H793.6z m-38.4 76.8H277.248v648.512H755.2V204.8zM200.448 290.112H128V768h72.512V290.112z m704 0H832V768h72.512V290.112z m-443.392 103.04l192 128a35.2 35.2 0 0 1 0 58.56l-192 128a35.2 35.2 0 0 1-54.72-29.312v-256c0-28.16 31.36-44.864 54.72-29.312z m15.68 94.976v124.48L570.112 550.4 476.8 488.128z" p-id="19667"></path></svg>
diff --git a/web/src/icons/svg/devices1.svg b/web/src/icons/svg/devices1.svg
new file mode 100644
index 000000000..10ded3695
--- /dev/null
+++ b/web/src/icons/svg/devices1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751336642026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4525" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M185.6 723.2v89.6h652.8v-89.6H185.6z m-6.4-64h665.6c31.7952 0 57.6 25.8048 57.6 57.6v102.4c0 31.7952-25.8048 57.6-57.6 57.6h-665.6A57.6 57.6 0 0 1 121.6 819.2v-102.4c0-31.7952 25.8048-57.6 57.6-57.6zM185.6 211.2v294.4h448v-294.4h-448zM179.2 147.2h460.8c31.7952 0 57.6 25.8048 57.6 57.6v307.2c0 31.7952-25.8048 57.6-57.6 57.6h-460.8A57.6 57.6 0 0 1 121.6 512V204.8c0-31.7952 25.8048-57.6 57.6-57.6z" p-id="4526"></path><path d="M697.6 415.4368l140.8 70.4V230.912l-140.8 70.4v114.0736z m121.4464-246.3232a57.6 57.6 0 0 1 83.3536 51.5072v275.5584a57.6 57.6 0 0 1-83.3536 51.5072l-185.4464-92.672V261.7856l185.4464-92.7232z" fill="#5A5A68" p-id="4527"></path></svg>
diff --git a/web/src/layout/components/TagsView/index.vue b/web/src/layout/components/TagsView/index.vue
index d3209b2e7..c82555ded 100644
--- a/web/src/layout/components/TagsView/index.vue
+++ b/web/src/layout/components/TagsView/index.vue
@@ -17,10 +17,10 @@
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
-      <li @click="closeOthersTags">Close Others</li>
-      <li @click="closeAllTags(selectedTag)">Close All</li>
+      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
+      <li @click="closeOthersTags">关闭其他</li>
+      <li @click="closeAllTags(selectedTag)">关闭所有</li>
     </ul>
   </div>
 </template>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index b3304a6e4..dcdbc78cf 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -66,14 +66,25 @@ export const constantRoutes = [
       meta: { title: '分屏监控', icon: 'live' }
     }]
   },
+  {
+    path: '/channel',
+    component: Layout,
+    redirect: '/channel',
+    children: [{
+      path: '',
+      name: 'Channel',
+      component: () => import('@/views/channel/index'),
+      meta: {title: '通道列表', icon: 'channelManger'}
+    }]
+  },
   {
     path: '/device',
     component: Layout,
-    redirect: '/device',
-    onlyIndex: 0,
+    name: '设备接入',
+    meta: { title: '设备接入', icon: 'devices' },
     children: [
       {
-        path: '',
+        path: '/device',
         name: 'Device',
         component: () => import('@/views/device/index'),
         meta: { title: '国标设备', icon: 'device' }
@@ -82,30 +93,15 @@ export const constantRoutes = [
         path: '/device/record/:deviceId/:channelDeviceId',
         name: 'DeviceRecord',
         component: () => import('@/views/device/channel/record'),
-        meta: { title: '国标录像' }
-      }
-    ]
-  },
-  {
-    path: '/push',
-    component: Layout,
-    redirect: '/push',
-    children: [
+      },
       {
-        path: '',
+        path: '/push',
         name: 'PushList',
         component: () => import('@/views/streamPush/index'),
         meta: { title: '推流列表', icon: 'streamPush' }
-      }
-    ]
-  },
-  {
-    path: '/proxy',
-    component: Layout,
-    redirect: '/proxy',
-    children: [
+      },
       {
-        path: '',
+        path: '/proxy',
         name: 'Proxy',
         component: () => import('@/views/streamProxy/index'),
         meta: { title: '拉流代理', icon: 'streamProxy' }
diff --git a/web/src/store/modules/commonChanel.js b/web/src/store/modules/commonChanel.js
index 90e59c81a..faa730328 100644
--- a/web/src/store/modules/commonChanel.js
+++ b/web/src/store/modules/commonChanel.js
@@ -15,7 +15,22 @@ import {
   clearUnusualCivilCodeList,
   getIndustryList,
   getTypeList,
-  getNetworkIdentificationList, playChannel, addToRegion, deleteFromRegion, addToGroup, deleteFromGroup
+  getNetworkIdentificationList, playChannel, addToRegion, deleteFromRegion, addToGroup, deleteFromGroup, getList,
+  addPointForCruise,
+  addPreset, auxiliary,
+  callPreset,
+  deletePointForCruise,
+  deletePreset, focus, iris, ptz,
+  queryPreset,
+  setCruiseSpeed,
+  setCruiseTime,
+  setLeftForScan,
+  setRightForScan,
+  setSpeedForScan,
+  startCruise,
+  startScan,
+  stopCruise,
+  stopScan, wiper, getAllForMap
 } from '@/api/commonChannel'
 
 const actions = {
@@ -238,6 +253,226 @@ const actions = {
         reject(error)
       })
     })
+  },
+  getList({ commit }, param) {
+    return new Promise((resolve, reject) => {
+      getList(param).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setSpeedForScan({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      setSpeedForScan(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setLeftForScan({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      setLeftForScan(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setRightForScan({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      setRightForScan(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  startScan({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      startScan(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  stopScan({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      stopScan(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  addPointForCruise({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      addPointForCruise(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  deletePointForCruise({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      deletePointForCruise(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setCruiseSpeed({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      setCruiseSpeed(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setCruiseTime({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      setCruiseTime(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  startCruise({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      startCruise(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  stopCruise({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      stopCruise(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  addPreset({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      addPreset(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  queryPreset({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      queryPreset(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  callPreset({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      callPreset(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  deletePreset({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      deletePreset(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  auxiliary({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      auxiliary(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  wiper({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      wiper(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  ptz({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      ptz(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  iris({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      iris(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  focus({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      focus(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  getAllForMap({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      getAllForMap(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 
diff --git a/web/src/store/modules/group.js b/web/src/store/modules/group.js
index 36d4b14c7..6fec46003 100644
--- a/web/src/store/modules/group.js
+++ b/web/src/store/modules/group.js
@@ -1,7 +1,7 @@
 import {
   getTreeList,
   update,
-  add, deleteGroup, getPath
+  add, deleteGroup, getPath, queryTree
 } from '@/api/group'
 
 const actions = {
@@ -54,6 +54,16 @@ const actions = {
         reject(error)
       })
     })
+  },
+  queryTree({ commit }, param) {
+    return new Promise((resolve, reject) => {
+      queryTree(param).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 
diff --git a/web/src/store/modules/region.js b/web/src/store/modules/region.js
index 82c7957f8..f28bbb309 100644
--- a/web/src/store/modules/region.js
+++ b/web/src/store/modules/region.js
@@ -6,7 +6,7 @@ import {
   queryChildListInBase,
   update,
   add,
-  queryPath
+  queryPath, queryTree
 } from '@/api/region'
 
 const actions = {
@@ -89,6 +89,16 @@ const actions = {
         reject(error)
       })
     })
+  },
+  queryTree({ commit }, param) {
+    return new Promise((resolve, reject) => {
+      queryTree(param).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 
diff --git a/web/src/views/channel/edit.vue b/web/src/views/channel/edit.vue
new file mode 100644
index 000000000..348c3d1da
--- /dev/null
+++ b/web/src/views/channel/edit.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="ChannelEdit" v-loading="locading" style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">
+        <el-page-header content="编辑通道" @back="close" />
+      </div>
+    </div>
+    <CommonChannelEdit :id="id" ref="commonChannelEdit" :save-success="close" :cancel="close" />
+  </div>
+</template>
+
+<script>
+import CommonChannelEdit from '../common/CommonChannelEdit'
+
+export default {
+  name: 'ChannelEdit',
+  components: {
+    CommonChannelEdit
+  },
+  props: ['id', 'closeEdit'],
+  data() {
+    return {}
+  },
+  methods: {
+    close: function() {
+      this.closeEdit()
+    }
+  }
+}
+</script>
diff --git a/web/src/views/channel/group/index.vue b/web/src/views/channel/group/index.vue
index 487c4f7f2..256171cec 100755
--- a/web/src/views/channel/group/index.vue
+++ b/web/src/views/channel/group/index.vue
@@ -4,7 +4,7 @@
       ref="groupTree"
       :show-header="true"
       :edit="true"
-      :click-event="treeNodeClickEvent"
+      @clickEvent="treeNodeClickEvent"
       :on-channel-change="onChannelChange"
       :enable-add-channel="true"
       :add-channel-to-group="addChannelToGroup"
@@ -20,7 +20,7 @@
         <div style="float: right;">
           <el-form-item label="搜索">
             <el-input
-              v-model="searchSrt"
+              v-model="searchStr"
               style="margin-right: 1rem; width: 10rem; "
               placeholder="关键字"
               prefix-icon="el-icon-search"
@@ -132,7 +132,7 @@ export default {
   data() {
     return {
       channelList: [],
-      searchSrt: '',
+      searchStr: '',
       channelType: '',
       online: '',
       hasGroup: 'false',
@@ -170,7 +170,7 @@ export default {
       this.$store.dispatch('commonChanel/getParentList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online,
         channelType: this.channelType,
         groupDeviceId: this.groupDeviceId
diff --git a/web/src/views/channel/index.vue b/web/src/views/channel/index.vue
new file mode 100755
index 000000000..525f33c86
--- /dev/null
+++ b/web/src/views/channel/index.vue
@@ -0,0 +1,439 @@
+<template>
+  <div id="channelList" class="app-container" style="height: calc(100vh - 124px);">
+    <div v-if="!editId" style="height: 100%">
+      <el-form :inline="true" size="mini">
+        <el-form-item label="搜索">
+          <el-input
+            v-model="searchStr"
+            style="margin-right: 1rem; width: auto;"
+            placeholder="关键字"
+            prefix-icon="el-icon-search"
+            clearable
+            @input="search"
+          />
+        </el-form-item>
+        <el-form-item label="在线状态">
+          <el-select
+            v-model="online"
+            style="width: 8rem; margin-right: 1rem;"
+            placeholder="请选择"
+            default-first-option
+            @change="search"
+          >
+            <el-option label="全部" value="" />
+            <el-option label="在线" value="true" />
+            <el-option label="离线" value="false" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select
+            v-model="channelType"
+            style="width: 8rem; margin-right: 1rem;"
+            placeholder="请选择"
+            default-first-option
+            @change="getChannelList"
+          >
+            <el-option label="全部" value="" />
+            <el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-button icon="el-icon-refresh-right" circle @click="refresh()" title="刷新表格"/>
+        </el-form-item>
+      </el-form>
+      <el-table
+        ref="channelListTable"
+        size="small"
+        :data="channelList"
+        height="calc(100% - 64px)"
+        style="width: 100%; font-size: 12px;"
+        header-row-class-name="table-header"
+      >
+        <el-table-column prop="gbName" label="名称" min-width="180" />
+        <el-table-column prop="gbDeviceId" label="编号" min-width="180" />
+        <el-table-column prop="gbManufacturer" label="厂家" min-width="100" />
+        <el-table-column label="类型" min-width="100">
+          <template v-slot:default="scope">
+            <div slot="reference" class="name-wrapper">
+              <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>
+        <el-table-column label="位置信息" min-width="150">
+          <template v-slot:default="scope">
+            <span v-if="scope.row.gbLongitude && scope.row.gbLatitude">{{ scope.row.gbLongitude }}<br>{{ scope.row.gbLatitude }}</span>
+            <span v-if="!scope.row.gbLongitude || !scope.row.gbLatitude">无</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ptzType" label="云台类型" min-width="100">
+          <template v-slot:default="scope">
+            <div>{{ scope.row.ptzTypeText }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" min-width="100">
+          <template v-slot:default="scope">
+            <div slot="reference" class="name-wrapper">
+              <el-tag v-if="scope.row.gbStatus === 'ON'" size="medium">在线</el-tag>
+              <el-tag v-if="scope.row.gbStatus !== 'ON'" size="medium" type="info">离线</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="210" fixed="right">
+          <template v-slot:default="scope">
+            <el-button
+              size="medium"
+              :disabled="scope.row.gbStatus !== 'ON'"
+              icon="el-icon-video-play"
+              type="text"
+              :loading="scope.row.playLoading"
+              @click="sendDevicePush(scope.row)"
+            >播放
+            </el-button>
+            <el-button
+              v-if="!!scope.row.streamId"
+              size="medium"
+              :disabled="device == null || device.online === 0"
+              icon="el-icon-switch-button"
+              type="text"
+              style="color: #f56c6c"
+              @click="stopDevicePush(scope.row)"
+            >停止
+            </el-button>
+            <el-divider direction="vertical" />
+            <el-button
+              size="medium"
+              type="text"
+              icon="el-icon-edit"
+              v-if="$store.getters.authority !== 2"
+              @click="handleEdit(scope.row)"
+            >
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="text-align: right"
+        :current-page="currentPage"
+        :page-size="count"
+        :page-sizes="[15, 25, 35, 50]"
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="currentChange"
+      />
+    </div>
+
+    <devicePlayer ref="devicePlayer" />
+    <channel-edit v-if="editId" :id="editId" :close-edit="closeEdit" />
+
+  </div>
+</template>
+
+<script>
+import devicePlayer from '@/views/common/channelPlayer/index.vue'
+import Edit from './edit.vue'
+
+export default {
+  name: 'ChannelList',
+  components: {
+    devicePlayer,
+    ChannelEdit: Edit
+  },
+  props: {
+    defaultPage: {
+      type: Number,
+      default: 1
+    },
+    defaultCount: {
+      type: Number,
+      default: 15
+    }
+  },
+  computed: {
+    excelName(){
+      return '通道列表-' + this.currentPage
+    }
+  },
+  data() {
+    return {
+      device: null,
+      channelList: [],
+      excelFields: {
+        名称: 'gbName',
+        编号: 'gbDeviceId',
+        厂家: 'gbManufacturer',
+        类型: {
+          field: 'dataType',
+          callback: (value) => {
+            return this.$channelTypeList[value].name
+          }
+        },
+        经度: 'gbLongitude',
+        纬度: 'gbLatitude',
+        云台类型: 'ptzTypeText',
+        状态: {
+          field: 'gbStatus',
+          callback: (value) => {
+            return value === 'ON' ? '在线' : '离线'
+          }
+        }
+      },
+      videoComponentList: [],
+      currentPlayerInfo: {}, // 当前播放对象
+      updateLooper: 0, // 数据刷新轮训标志
+      searchStr: '',
+      channelType: '',
+      online: '',
+      subStream: '',
+      winHeight: window.innerHeight - 200,
+      currentPage: this.defaultPage | 1,
+      count: this.defaultCount | 15,
+      total: 0,
+      beforeUrl: '/device',
+      editId: null,
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  destroyed() {
+    this.$destroy('videojs')
+    clearTimeout(this.updateLooper)
+  },
+  methods: {
+    initData: function() {
+      this.getChannelList()
+    },
+    initParam: function() {
+      this.currentPage = 1
+      this.count = 15
+    },
+    currentChange: function(val) {
+      this.currentPage = val
+      this.initData()
+    },
+    handleSizeChange: function(val) {
+      this.count = val
+      this.getChannelList()
+    },
+    getChannelList: function() {
+      this.$store.dispatch('commonChanel/getList', {
+        page: this.currentPage,
+        count: this.count,
+        query: this.searchStr,
+        online: this.online,
+        channelType: this.channelType
+      }).then(data => {
+        this.total = data.total
+        this.channelList = data.list
+        this.channelList.forEach(e => {
+          e.ptzType = e.ptzType + ''
+          this.$set(e, 'playLoading', false)
+        })
+        // 防止出现表格错位
+        this.$nextTick(() => {
+          this.$refs.channelListTable.doLayout()
+        })
+      })
+    },
+
+    // 通知设备上传媒体流
+    sendDevicePush: function(itemData) {
+      itemData.playLoading = true
+      this.$store.dispatch('commonChanel/playChannel', itemData.gbId)
+        .then((data) => {
+          itemData.streamId = data.stream
+          this.$refs.devicePlayer.openDialog('media', itemData.gbId, {
+            streamInfo: data,
+            hasAudio: itemData.hasAudio
+          })
+          setTimeout(() => {
+            this.initData()
+          }, 1000)
+        }).finally(() => {
+          itemData.playLoading = false
+        })
+    },
+    queryRecords: function(itemData) {
+      const deviceId = this.deviceId
+      const channelId = itemData.deviceId
+
+      this.$router.push(`/device/record/${deviceId}/${channelId}`)
+    },
+    queryCloudRecords: function(itemData) {
+      const deviceId = this.deviceId
+      const channelId = itemData.deviceId
+
+      this.$router.push(`/cloudRecord/detail/rtp/${deviceId}_${channelId}`)
+    },
+    startRecord: function(itemData) {
+      this.$store.dispatch('device/deviceRecord', {
+        deviceId: this.deviceId,
+        channelId: itemData.deviceId,
+        recordCmdStr: 'Record'
+      }).then(data => {
+        this.$message.success({
+          showClose: true,
+          message: '开始录像成功'
+        })
+      }).catch((error) => {
+        this.$message.error({
+          showClose: true,
+          message: error.message
+        })
+      })
+    },
+    stopRecord: function(itemData) {
+      this.$store.dispatch('device/deviceRecord', {
+        deviceId: this.deviceId,
+        channelId: itemData.deviceId,
+        recordCmdStr: 'StopRecord'
+      }).then(data => {
+        this.$message.success({
+          showClose: true,
+          message: '停止录像成功'
+        })
+      }).catch((error) => {
+        this.$message.error({
+          showClose: true,
+          message: error.message
+        })
+      })
+    },
+    stopDevicePush: function(itemData) {
+      this.$store.dispatch('play/stop', [itemData.deviceId]).then(data => {
+        this.initData()
+      }).catch((error) => {
+        if (error.response.status === 402) { // 已经停止过
+          this.initData()
+        } else {
+          console.log(error)
+        }
+      })
+    },
+    getSnap: function(row) {
+      const baseUrl = window.baseUrl ? window.baseUrl : ''
+      return ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl) + '/api/device/query/snap/' + this.deviceId + '/' + row.deviceId
+    },
+    getBigSnap: function(row) {
+      return [this.getSnap(row)]
+    },
+    getSnapErrorEvent: function(deviceId, channelId) {
+      if (typeof (this.loadSnap[deviceId + channelId]) !== 'undefined') {
+        console.log('下载截图' + this.loadSnap[deviceId + channelId])
+        if (this.loadSnap[deviceId + channelId] > 5) {
+          delete this.loadSnap[deviceId + channelId]
+          return
+        }
+        setTimeout(() => {
+          const url = (process.env.NODE_ENV === 'development' ? 'debug' : '') + '/api/device/query/snap/' + deviceId + '/' + channelId
+          this.loadSnap[deviceId + channelId]++
+          document.getElementById(deviceId + channelId).setAttribute('src', url + '?' + new Date().getTime())
+        }, 1000)
+      }
+    },
+    showDevice: function() {
+      // this.$router.push(this.beforeUrl).then(() => {
+      //   this.initParam()
+      //   this.initData()
+      // })
+      this.$emit('show-device')
+    },
+    changeSubchannel(itemData) {
+      this.beforeUrl = this.$router.currentRoute.path
+
+      var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.deviceId}`
+      this.$router.push(url).then(() => {
+        this.searchStr = ''
+        this.channelType = ''
+        this.online = ''
+        this.initParam()
+        this.initData()
+      })
+    },
+    showSubChannels: function() {
+      this.$store.dispatch('device/querySubChannels', [
+        {
+          page: this.currentPage,
+          count: this.count,
+          query: this.searchStr,
+          online: this.online,
+          channelType: this.channelType
+        },
+        this.deviceId,
+        this.parentChannelId
+      ])
+        .then(data => {
+          this.total = data.total
+          this.channelList = data.list
+          this.channelList.forEach(e => {
+            e.ptzType = e.ptzType + ''
+          })
+          // 防止出现表格错位
+          this.$nextTick(() => {
+            this.$refs.channelListTable.doLayout()
+          })
+        })
+    },
+    search: function() {
+      this.currentPage = 1
+      this.total = 0
+      this.initData()
+    },
+    updateChannel: function(row) {
+      this.$store.dispatch('device/changeChannelAudio', {
+        channelId: row.gbId,
+        audio: row.hasAudio
+      })
+    },
+    subStreamChange: function() {
+      this.$confirm('确定重置所有通道的码流类型?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('device/updateChannelStreamIdentification', {
+          deviceDbId: this.device.id,
+          streamIdentification: this.subStream
+        })
+          .then(data => {
+            this.initData()
+          })
+          .finally(() => {
+            this.subStream = ''
+          })
+      }).catch(() => {
+        this.subStream = ''
+      })
+    },
+    channelSubStreamChange: function(row) {
+      this.$store.dispatch('device/updateChannelStreamIdentification', {
+        deviceDbId: row.deviceDbId,
+        id: row.id,
+        streamIdentification: row.streamIdentification
+      })
+        .then(data => {
+          this.initData()
+        })
+        .finally(() => {
+          this.subStream = ''
+        })
+    },
+    refresh: function() {
+      this.initData()
+    },
+    // 编辑
+    handleEdit(row) {
+      console.log(row)
+      this.editId = row.gbId
+    },
+    // 结束编辑
+    closeEdit: function() {
+      this.editId = null
+      this.getChannelList()
+    }
+
+  }
+}
+</script>
diff --git a/web/src/views/channel/region/index.vue b/web/src/views/channel/region/index.vue
index a61c291a4..367b6d335 100755
--- a/web/src/views/channel/region/index.vue
+++ b/web/src/views/channel/region/index.vue
@@ -4,7 +4,7 @@
       ref="regionTree"
       :show-header="true"
       :edit="true"
-      :click-event="treeNodeClickEvent"
+      @clickEvent="treeNodeClickEvent"
       :on-channel-change="onChannelChange"
       :enable-add-channel="true"
       :add-channel-to-civil-code="addChannelToCivilCode"
@@ -20,7 +20,7 @@
         <div style="float: right;">
           <el-form-item label="搜索">
             <el-input
-              v-model="searchSrt"
+              v-model="searchStr"
               style="width: 10rem; margin-right: 1rem;"
               placeholder="关键字"
               prefix-icon="el-icon-search"
@@ -130,7 +130,7 @@ export default {
   data() {
     return {
       channelList: [],
-      searchSrt: '',
+      searchStr: '',
       channelType: '',
       online: '',
       currentPage: 1,
@@ -166,7 +166,7 @@ export default {
       this.$store.dispatch('commonChanel/getCivilCodeList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online,
         channelType: this.channelType,
         civilCode: this.regionDeviceId
diff --git a/web/src/views/common/DeviceTree.vue b/web/src/views/common/DeviceTree.vue
index edf71ff92..fe99ca76d 100755
--- a/web/src/views/common/DeviceTree.vue
+++ b/web/src/views/common/DeviceTree.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="DeviceTree" class="device-tree-container">
+  <div id="DeviceTree" class="device-tree-container" style="height: 100%">
     <div class="device-tree-header">
       <div class="header-title">通道列表</div>
       <div class="header-switch">
@@ -20,7 +20,7 @@
           :edit="false"
           :show-header="false"
           :has-channel="true"
-          :click-event="treeNodeClickEvent"
+          @clickEvent="treeNodeClickEvent"
           :default-expanded-keys="[]"
         />
         <GroupTree
@@ -29,7 +29,7 @@
           :edit="false"
           :show-header="false"
           :has-channel="true"
-          :click-event="treeNodeClickEvent"
+          @clickEvent="treeNodeClickEvent"
           :default-expanded-keys="[]"
         />
       </div>
@@ -53,10 +53,6 @@ export default {
       type: Boolean,
       default: false
     },
-    clickEvent: {
-      type: Function,
-      default: null
-    },
     contextMenuEvent: {
       type: Function,
       default: null
@@ -137,11 +133,7 @@ export default {
     },
     treeNodeClickEvent: function(data) {
       if (data.leaf) {
-        console.log(23111)
-        console.log(data)
-        if (this.clickEvent) {
-          this.clickEvent(data.id)
-        }
+        this.$emit('clickEvent', data.id)
       }
     }
   }
diff --git a/web/src/views/common/GroupTree.vue b/web/src/views/common/GroupTree.vue
index ea9936fc8..2179a81ed 100755
--- a/web/src/views/common/GroupTree.vue
+++ b/web/src/views/common/GroupTree.vue
@@ -1,24 +1,14 @@
 <template>
-  <div id="DeviceTree" style="border-right: 1px solid #EBEEF5; padding: 0 20px">
-    <div v-if="showHeader" class="page-header">
-      <el-form :inline="true" size="mini">
-        <el-form-item style="visibility: hidden">
-          <el-input
-            v-model="searchSrt"
-            style="margin-right: 1rem; width: 12rem;"
-            size="mini"
-            placeholder="关键字"
-            prefix-icon="el-icon-search"
-            clearable
-            @input="search"
-          />
-        </el-form-item>
-        <el-form-item label="显示编号">
-          <el-checkbox v-model="showCode" />
-        </el-form-item>
-      </el-form>
+  <div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%">
+    <div style="padding: 0 20px 0 10px;">
+      <el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
+        <!--        <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
+        <!--          <el-option label="目录" :value="0"></el-option>-->
+        <!--          <el-option label="通道" :value="1"></el-option>-->
+        <!--        </el-select>-->
+      </el-input>
     </div>
-    <div>
+    <div v-if="!searchStr">
       <el-alert
         v-if="showAlert && edit"
         title="操作提示"
@@ -26,6 +16,10 @@
         type="info"
         style="text-align: left"
       />
+      <div v-if="edit" style="float: right;margin-right: 24px;margin-top: 18px; font-size: 14px" >
+        显示编号： <el-checkbox v-model="showCode" />
+      </div>
+
       <vue-easy-tree
         ref="veTree"
         class="flow-tree"
@@ -75,6 +69,49 @@
         </template>
       </vue-easy-tree>
     </div>
+    <div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
+      <ul v-if="groupList.length > 0" style="list-style: none; margin: 0; padding: 10px">
+        <li v-for="item in groupList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
+          <span
+            v-if="chooseId !== item.deviceId"
+            style="color: #409EFF; font-size: 20px"
+            class="iconfont icon-bianzubeifen3"
+          />
+          <span
+            v-if="chooseId === item.deviceId"
+            style="color: #c60135; font-size: 20px"
+            class="iconfont icon-bianzubeifen3"
+          />
+          <div>
+            <div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.name}}</div>
+            <div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.deviceId}}</div>
+          </div>
+        </li>
+      </ul>
+
+      <ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
+        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
+          <span
+            v-if="item.gbStatus === 'ON'"
+            style="color: #409EFF; font-size: 20px"
+            class="iconfont icon-shexiangtou2"
+          />
+          <span
+            v-if="item.gbStatus !== 'ON'"
+            style="color: #808181; font-size: 20px"
+            class="iconfont icon-shexiangtou2"
+          />
+          <div>
+            <div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.gbName}}</div>
+            <div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.gbDeviceId}}</div>
+          </div>
+
+        </li>
+      </ul>
+      <div v-if="this.currentPage * this.count < this.total" style="text-align: center;">
+        <el-button type="text" @click="loadListMore">加载更多</el-button>
+      </div>
+    </div>
     <groupEdit ref="groupEdit" />
     <gbDeviceSelect ref="gbDeviceSelect" />
     <gbChannelSelect ref="gbChannelSelect" data-type="group" />
@@ -93,7 +130,7 @@ export default {
     GbChannelSelect,
     VueEasyTree, groupEdit, gbDeviceSelect
   },
-  props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
+  props: ['edit', 'enableAddChannel', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
   data() {
     return {
       props: {
@@ -102,9 +139,14 @@ export default {
       },
       showCode: false,
       showAlert: true,
-      searchSrt: '',
+      searchStr: '',
       chooseId: '',
-      treeData: []
+      treeData: [],
+      currentPage: this.defaultPage | 1,
+      count: this.defaultCount | 15,
+      total: 0,
+      groupList: [],
+      channelList: []
     }
   },
   created() {
@@ -118,8 +160,44 @@ export default {
     // this.performance = "";
   },
   methods: {
-    search() {
-
+    searchChange() {
+      this.currentPage = 1
+      this.total = 0
+      if (this.edit) {
+        this.groupList = []
+        this.queryGroup()
+      }else {
+        this.channelList = []
+        this.queryChannelList()
+      }
+    },
+    loadListMore: function() {
+      this.currentPage += 1
+      if (this.edit) {
+        this.queryGroup()
+      }else {
+        this.queryChannelList()
+      }
+    },
+    queryGroup: function() {
+      this.$store.dispatch('group/queryTree', {
+        query: this.searchStr,
+        page: this.currentPage,
+        count: this.count
+      }).then(data => {
+        this.total = data.total
+        this.groupList = this.groupList.concat(data.list)
+      })
+    },
+    queryChannelList: function() {
+      this.$store.dispatch('commonChanel/getList', {
+        page: this.currentPage,
+        count: this.count,
+        query: this.searchStr
+      }).then(data => {
+        this.total = data.total
+        this.channelList = this.channelList.concat(data.list)
+      })
     },
     loadNode: function(node, resolve) {
       if (node.level === 0) {
@@ -136,7 +214,7 @@ export default {
           return
         }
         this.$store.dispatch('group/getTreeList', {
-          query: this.searchSrt,
+          query: this.searchStr,
           parent: node.data.id,
           hasChannel: this.hasChannel
         }).then(data => {
@@ -144,6 +222,8 @@ export default {
             this.showAlert = false
           }
           resolve(data)
+        }).finally(() => {
+          this.locading = false
         })
       }
     },
@@ -348,9 +428,17 @@ export default {
     },
     nodeClickHandler: function(data, node, tree) {
       this.chooseId = data.deviceId
-      if (this.clickEvent) {
-        this.clickEvent(data)
-      }
+      this.$emit('clickEvent', data)
+    },
+    listClickHandler: function(data) {
+      this.chooseId = data.deviceId
+      this.$emit('clickEvent', data)
+    },
+    channelLstClickHandler: function(data) {
+      this.$emit('clickEvent', {
+        leaf: true,
+        id: data.gbId
+      })
     }
   }
 }
@@ -375,7 +463,7 @@ export default {
 
 .flow-tree {
   overflow: auto;
-  margin: 10px;
+  padding-top: 10px;
 }
 .flow-tree  .vue-recycle-scroller__item-wrapper{
   height: 100%;
diff --git a/web/src/views/common/RegionTree.vue b/web/src/views/common/RegionTree.vue
index 1e2155a38..991396825 100755
--- a/web/src/views/common/RegionTree.vue
+++ b/web/src/views/common/RegionTree.vue
@@ -1,24 +1,14 @@
 <template>
-  <div id="DeviceTree" style="border-right: 1px solid #EBEEF5; padding: 0 20px">
-    <div v-if="showHeader" class="page-header">
-      <el-form :inline="true" size="mini">
-        <el-form-item style="visibility: hidden">
-          <el-input
-            v-model="searchSrt"
-            style="margin-right: 1rem; width: 12rem;"
-            size="mini"
-            placeholder="关键字"
-            prefix-icon="el-icon-search"
-            clearable
-            @input="search"
-          />
-        </el-form-item>
-        <el-form-item label="显示编号">
-          <el-checkbox v-model="showCode" />
-        </el-form-item>
-      </el-form>
+  <div id="regionTree" style="border-right: 1px solid #EBEEF5; height: 100%">
+    <div style="padding: 0 20px 0 10px;">
+      <el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
+<!--        <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
+<!--          <el-option label="目录" :value="0"></el-option>-->
+<!--          <el-option label="通道" :value="1"></el-option>-->
+<!--        </el-select>-->
+      </el-input>
     </div>
-    <div>
+    <div v-if="!searchStr">
       <el-alert
         v-if="showAlert && edit"
         title="操作提示"
@@ -26,6 +16,10 @@
         type="info"
         style="text-align: left"
       />
+      <div v-if="edit" style="float: right;margin-right: 24px;margin-top: 18px; font-size: 14px" >
+        显示编号： <el-checkbox v-model="showCode" />
+      </div>
+
       <vue-easy-tree
         ref="veTree"
         class="flow-tree"
@@ -75,6 +69,49 @@
         </template>
       </vue-easy-tree>
     </div>
+    <div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
+      <ul v-if="regionList.length > 0" style="list-style: none; margin: 0; padding: 10px">
+        <li v-for="item in regionList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
+          <span
+            v-if="chooseId !== item.deviceId"
+            style="color: #409EFF;  font-size: 20px"
+            class="iconfont icon-bianzubeifen3"
+          />
+          <span
+            v-if="chooseId === item.deviceId"
+            style="color: #c60135;  font-size: 20px"
+            class="iconfont icon-bianzubeifen3"
+          />
+          <div>
+            <div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.name}}</div>
+            <div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.deviceId}}</div>
+          </div>
+        </li>
+      </ul>
+
+      <ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
+        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
+          <span
+            v-if="item.gbStatus === 'ON'"
+            style="color: #409EFF; font-size: 20px"
+            class="iconfont icon-shexiangtou2"
+          />
+          <span
+            v-if="item.gbStatus !== 'ON'"
+            style="color: #808181; font-size: 20px"
+            class="iconfont icon-shexiangtou2"
+          />
+          <div>
+            <div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.gbName}}</div>
+            <div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.gbDeviceId}}</div>
+          </div>
+
+        </li>
+      </ul>
+      <div v-if="this.currentPage * this.count < this.total" style="text-align: center;">
+        <el-button type="text" @click="loadListMore">加载更多</el-button>
+      </div>
+    </div>
     <regionEdit ref="regionEdit" />
     <gbDeviceSelect ref="gbDeviceSelect" />
     <GbChannelSelect ref="gbChannelSelect" data-type="civilCode" />
@@ -86,6 +123,7 @@ import VueEasyTree from '@wchbrad/vue-easy-tree'
 import regionEdit from './../dialog/regionEdit'
 import gbDeviceSelect from './../dialog/GbDeviceSelect'
 import GbChannelSelect from '../dialog/GbChannelSelect.vue'
+import chooseCivilCode from '@/views/dialog/chooseCivilCode.vue'
 
 export default {
   name: 'DeviceTree',
@@ -93,17 +131,24 @@ export default {
     GbChannelSelect,
     VueEasyTree, regionEdit, gbDeviceSelect
   },
-  props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode', 'treeHeight'],
+  props: ['edit', 'enableAddChannel', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode', 'treeHeight'],
   data() {
     return {
       props: {
-        label: 'name'
+        label: 'name',
+        children: 'children'
       },
+      searchType: 0,
       showCode: false,
       showAlert: true,
-      searchSrt: '',
+      searchStr: '',
       chooseId: '',
-      treeData: []
+      treeData: [],
+      currentPage: this.defaultPage | 1,
+      count: this.defaultCount | 15,
+      total: 0,
+      regionList: [],
+      channelList: []
     }
   },
   created() {
@@ -117,8 +162,44 @@ export default {
     // this.performance = "";
   },
   methods: {
-    search() {
-
+    searchChange() {
+      this.currentPage = 1
+      this.total = 0
+      if (this.edit) {
+        this.regionList = []
+        this.queryRegion()
+      }else {
+        this.channelList = []
+        this.queryChannelList()
+      }
+    },
+    loadListMore: function() {
+      this.currentPage += 1
+      if (this.edit) {
+        this.queryRegion()
+      }else {
+        this.queryChannelList()
+      }
+    },
+    queryRegion: function() {
+      this.$store.dispatch('region/queryTree', {
+        query: this.searchStr,
+        page: this.currentPage,
+        count: this.count
+      }).then(data => {
+        this.total = data.total
+        this.regionList = this.regionList.concat(data.list)
+      })
+    },
+    queryChannelList: function() {
+      this.$store.dispatch('commonChanel/getList', {
+        page: this.currentPage,
+        count: this.count,
+        query: this.searchStr
+      }).then(data => {
+        this.total = data.total
+        this.channelList = this.channelList.concat(data.list)
+      })
     },
     loadNode: function(node, resolve) {
       if (node.level === 0) {
@@ -135,7 +216,7 @@ export default {
           return
         }
         this.$store.dispatch('region/getTreeList', {
-          query: this.searchSrt,
+          query: this.searchStr,
           parent: node.data.id,
           hasChannel: this.hasChannel
         })
@@ -158,7 +239,6 @@ export default {
       if (!this.edit) {
         return
       }
-      console.log(node.level)
       if (node.data.type === 0) {
         const menuItem = [
           {
@@ -349,9 +429,17 @@ export default {
     },
     nodeClickHandler: function(data, node, tree) {
       this.chooseId = data.deviceId
-      if (this.clickEvent) {
-        this.clickEvent(data)
-      }
+      this.$emit('clickEvent', data)
+    },
+    listClickHandler: function(data) {
+      this.chooseId = data.deviceId
+      this.$emit('clickEvent', data)
+    },
+    channelLstClickHandler: function(data) {
+      this.$emit('clickEvent', {
+        leaf: true,
+        id: data.gbId
+      })
     }
   }
 }
@@ -382,11 +470,18 @@ export default {
 
 .flow-tree {
   overflow: auto;
-  margin: 10px;
+  padding-top: 10px;
 }
 .flow-tree  .vue-recycle-scroller__item-wrapper{
   height: 100%;
   overflow-x: auto;
 }
-
+.channel-list-li {
+  height: 24px;
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  margin-bottom: 18px
+}
 </style>
diff --git a/web/src/views/common/channelPlayer/index.vue b/web/src/views/common/channelPlayer/index.vue
new file mode 100755
index 000000000..89cebde0d
--- /dev/null
+++ b/web/src/views/common/channelPlayer/index.vue
@@ -0,0 +1,899 @@
+<template>
+  <div id="devicePlayer" v-loading="isLoging">
+
+    <el-dialog
+      v-if="showVideoDialog"
+      v-el-drag-dialog
+      title="视频播放"
+      top="0"
+      :close-on-click-modal="false"
+      :visible.sync="showVideoDialog"
+      @close="close()"
+    >
+      <div style="width: 100%; height: 100%">
+        <el-tabs
+          v-if="Object.keys(this.player).length > 1"
+          v-model="activePlayer"
+          type="card"
+          :stretch="true"
+          @tab-click="changePlayer"
+        >
+          <el-tab-pane label="Jessibuca" name="jessibuca">
+            <jessibucaPlayer
+              v-if="activePlayer === 'jessibuca'"
+              ref="jessibuca"
+              :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
+              :error="videoError"
+              :message="videoError"
+              :has-audio="hasAudio"
+              fluent
+              autoplay
+              live
+            />
+          </el-tab-pane>
+          <el-tab-pane label="WebRTC" name="webRTC">
+            <rtc-player
+              v-if="activePlayer === 'webRTC'"
+              ref="webRTC"
+              :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
+              :error="videoError"
+              :message="videoError"
+              height="100px"
+              :has-audio="hasAudio"
+              fluent
+              autoplay
+              live
+            />
+          </el-tab-pane>
+          <el-tab-pane label="h265web" name="h265web">
+            <h265web
+              v-if="activePlayer === 'h265web'"
+              ref="h265web"
+              :video-url="videoUrl"
+              :error="videoError"
+              :message="videoError"
+              :has-audio="hasAudio"
+              fluent
+              autoplay
+              live
+              :show-button="true"
+            />
+
+          </el-tab-pane>
+        </el-tabs>
+        <jessibucaPlayer
+          v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
+          ref="jessibuca"
+          :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
+          :error="videoError"
+          :message="videoError"
+          :has-audio="hasAudio"
+          fluent
+          autoplay
+          live
+        />
+        <rtc-player
+          v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
+          ref="jessibuca"
+          :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
+          :error="videoError"
+          :message="videoError"
+          height="100px"
+          :has-audio="hasAudio"
+          fluent
+          autoplay
+          live
+        />
+        <h265web
+          v-if="Object.keys(this.player).length == 1 && this.player.h265web"
+          ref="jessibuca"
+          :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
+          :error="videoError"
+          :message="videoError"
+          height="100px"
+          :has-audio="hasAudio"
+          fluent
+          autoplay
+          live
+        />
+      </div>
+      <div id="shared" style="text-align: right; margin-top: 1rem;">
+
+        <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
+          <el-tab-pane label="实时视频" name="media">
+            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+              <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
+              <el-input v-model="getPlayerShared.sharedUrl" :disabled="true">
+                <template slot="append">
+                  <i
+                    class="cpoy-btn el-icon-document-copy"
+                    title="点击拷贝"
+                    style="cursor: pointer"
+                    @click="copyUrl(getPlayerShared.sharedUrl)"
+                  />
+                </template>
+              </el-input>
+            </div>
+            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+              <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
+              <el-input v-model="getPlayerShared.sharedIframe" :disabled="true">
+                <template slot="append">
+                  <i
+                    class="cpoy-btn el-icon-document-copy"
+                    title="点击拷贝"
+                    style="cursor: pointer"
+                    @click="copyUrl(getPlayerShared.sharedIframe)"
+                  />
+                </template>
+              </el-input>
+            </div>
+            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+              <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
+              <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true">
+                <el-button
+                  slot="append"
+                  icon="el-icon-document-copy"
+                  title="点击拷贝"
+                  style="cursor: pointer"
+                  @click="copyUrl(getPlayerShared.sharedIframe)"
+                />
+                <el-dropdown v-if="streamInfo" slot="prepend" trigger="click" @command="copyUrl">
+                  <el-button>
+                    更多地址<i class="el-icon-arrow-down el-icon--right" />
+                  </el-button>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv">
+                      <el-tag>FLV:</el-tag>
+                      <span>{{ streamInfo.flv }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.https_flv" :command="streamInfo.https_flv">
+                      <el-tag>FLV(https):</el-tag>
+                      <span>{{ streamInfo.https_flv }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.ws_flv" :command="streamInfo.ws_flv">
+                      <el-tag>FLV(ws):</el-tag>
+                      <span>{{ streamInfo.ws_flv }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.wss_flv" :command="streamInfo.wss_flv">
+                      <el-tag>FLV(wss):</el-tag>
+                      <span>{{ streamInfo.wss_flv }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.fmp4" :command="streamInfo.fmp4">
+                      <el-tag>FMP4:</el-tag>
+                      <span>{{ streamInfo.fmp4 }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.https_fmp4" :command="streamInfo.https_fmp4">
+                      <el-tag>FMP4(https):</el-tag>
+                      <span>{{ streamInfo.https_fmp4 }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.ws_fmp4" :command="streamInfo.ws_fmp4">
+                      <el-tag>FMP4(ws):</el-tag>
+                      <span>{{ streamInfo.ws_fmp4 }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.wss_fmp4" :command="streamInfo.wss_fmp4">
+                      <el-tag>FMP4(wss):</el-tag>
+                      <span>{{ streamInfo.wss_fmp4 }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.hls" :command="streamInfo.hls">
+                      <el-tag>HLS:</el-tag>
+                      <span>{{ streamInfo.hls }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.https_hls" :command="streamInfo.https_hls">
+                      <el-tag>HLS(https):</el-tag>
+                      <span>{{ streamInfo.https_hls }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.ws_hls" :command="streamInfo.ws_hls">
+                      <el-tag>HLS(ws):</el-tag>
+                      <span>{{ streamInfo.ws_hls }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.wss_hls" :command="streamInfo.wss_hls">
+                      <el-tag>HLS(wss):</el-tag>
+                      <span>{{ streamInfo.wss_hls }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.ts" :command="streamInfo.ts">
+                      <el-tag>TS:</el-tag>
+                      <span>{{ streamInfo.ts }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.https_ts" :command="streamInfo.https_ts">
+                      <el-tag>TS(https):</el-tag>
+                      <span>{{ streamInfo.https_ts }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.ws_ts" :command="streamInfo.ws_ts">
+                      <el-tag>TS(ws):</el-tag>
+                      <span>{{ streamInfo.ws_ts }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.wss_ts" :command="streamInfo.wss_ts">
+                      <el-tag>TS(wss):</el-tag>
+                      <span>{{ streamInfo.wss_ts }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.rtc" :command="streamInfo.rtc">
+                      <el-tag>RTC:</el-tag>
+                      <span>{{ streamInfo.rtc }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.rtcs" :command="streamInfo.rtcs">
+                      <el-tag>RTCS:</el-tag>
+                      <span>{{ streamInfo.rtcs }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.rtmp" :command="streamInfo.rtmp">
+                      <el-tag>RTMP:</el-tag>
+                      <span>{{ streamInfo.rtmp }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.rtmps" :command="streamInfo.rtmps">
+                      <el-tag>RTMPS:</el-tag>
+                      <span>{{ streamInfo.rtmps }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.rtsp" :command="streamInfo.rtsp">
+                      <el-tag>RTSP:</el-tag>
+                      <span>{{ streamInfo.rtsp }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="streamInfo.rtsps" :command="streamInfo.rtsps">
+                      <el-tag>RTSPS:</el-tag>
+                      <span>{{ streamInfo.rtsps }}</span>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-input>
+
+            </div>
+          </el-tab-pane>
+          <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
+          <!--遥控界面-->
+          <el-tab-pane v-if="showPtz" label="云台控制" name="control">
+            <div style="display: grid; grid-template-columns: 240px auto; height: 180px; overflow: auto">
+              <div style="display: grid; grid-template-columns: 6.25rem auto;">
+
+                <div class="control-wrapper">
+                  <div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
+                    <i class="el-icon-caret-top" />
+                    <div class="control-inner-btn control-inner" />
+                  </div>
+                  <div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
+                    <i class="el-icon-caret-left" />
+                    <div class="control-inner-btn control-inner" />
+                  </div>
+                  <div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
+                    <i class="el-icon-caret-bottom" />
+                    <div class="control-inner-btn control-inner" />
+                  </div>
+                  <div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
+                    <i class="el-icon-caret-right" />
+                    <div class="control-inner-btn control-inner" />
+                  </div>
+                  <div class="control-round">
+                    <div class="control-round-inner"><i class="fa fa-pause-circle" /></div>
+                  </div>
+                  <div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 6.25rem;">
+                    <el-slider v-model="controSpeed" :max="100" />
+                  </div>
+                </div>
+                <div>
+                  <div class="ptz-btn-box">
+                    <div style="" title="变倍+" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
+                      <i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.5rem;" />
+                    </div>
+                    <div style="" title="变倍-" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
+                      <i class="el-icon-zoom-out control-zoom-btn" style="font-size: 1.5rem;" />
+                    </div>
+                  </div>
+                  <div class="ptz-btn-box">
+                    <div title="聚焦+" @mousedown="focusCamera('near')" @mouseup="focusCamera('stop')">
+                      <i class="iconfont icon-bianjiao-fangda control-zoom-btn" style="font-size: 1.5rem;" />
+                    </div>
+                    <div title="聚焦-" @mousedown="focusCamera('far')" @mouseup="focusCamera('stop')">
+                      <i class="iconfont icon-bianjiao-suoxiao control-zoom-btn" style="font-size: 1.5rem;" />
+                    </div>
+                  </div>
+                  <div class="ptz-btn-box">
+                    <div title="光圈+" @mousedown="irisCamera('in')" @mouseup="irisCamera('stop')">
+                      <i class="iconfont icon-guangquan control-zoom-btn" style="font-size: 1.5rem;" />
+                    </div>
+                    <div title="光圈-" @mousedown="irisCamera('out')" @mouseup="irisCamera('stop')">
+                      <i class="iconfont icon-guangquan- control-zoom-btn" style="font-size: 1.5rem;" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div style="text-align: left" v-if="tabActiveName === 'control'">
+                <el-select
+                  v-model="ptzMethod"
+                  style="width: 100%"
+                  size="mini"
+                  placeholder="请选择云台功能"
+                >
+                  <el-option label="预置点" value="preset" />
+                  <el-option label="巡航组" value="cruise" />
+                  <el-option label="自动扫描" value="scan" />
+                  <el-option label="雨刷" value="wiper" />
+                  <el-option label="辅助开关" value="switch" />
+                </el-select>
+
+                <ptzPreset v-if="ptzMethod === 'preset'" :channel-id="channelId" style="margin-top: 1rem" />
+                <ptzCruising v-if="ptzMethod === 'cruise'" :channel-id="channelId" style="margin-top: 1rem" />
+                <ptzScan v-if="ptzMethod === 'scan'" :channel-id="channelId" style="margin-top: 1rem" />
+                <ptzWiper v-if="ptzMethod === 'wiper'" :channel-id="channelId" style="margin-top: 1rem" />
+                <ptzSwitch v-if="ptzMethod === 'switch'" :channel-id="channelId" style="margin-top: 1rem" />
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="编码信息" name="codec">
+            <mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
+          </el-tab-pane>
+          <el-tab-pane v-if="showBroadcast" label="语音对讲" name="broadcast">
+            <div style="padding: 0 10px">
+              <!--              <el-switch v-model="broadcastMode" :disabled="broadcastStatus !== -1" active-color="#409EFF"-->
+              <!--                         active-text="喊话(Broadcast)"-->
+              <!--                         inactive-text="对讲(Talk)"></el-switch>-->
+
+              <el-radio-group v-model="broadcastMode" :disabled="broadcastStatus !== -1">
+                <el-radio :label="true">喊话(Broadcast)</el-radio>
+                <el-radio :label="false">对讲(Talk)</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="trank" style="text-align: center;">
+              <el-button
+                :type="getBroadcastStatus()"
+                :disabled="broadcastStatus === -2"
+                circle
+                icon="el-icon-microphone"
+                style="font-size: 32px; padding: 24px;margin-top: 24px;"
+                @click="broadcastStatusClick()"
+              />
+              <p>
+                <span v-if="broadcastStatus === -2">正在释放资源</span>
+                <span v-if="broadcastStatus === -1">点击开始对讲</span>
+                <span v-if="broadcastStatus === 0">等待接通中...</span>
+                <span v-if="broadcastStatus === 1">请说话</span>
+              </p>
+
+            </div>
+          </el-tab-pane>
+
+        </el-tabs>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import elDragDialog from '@/directive/el-drag-dialog'
+import crypto from 'crypto'
+import rtcPlayer from '../rtcPlayer.vue'
+import jessibucaPlayer from '../jessibuca.vue'
+import PtzPreset from './ptzPreset.vue'
+import PtzCruising from './ptzCruising.vue'
+import ptzScan from './ptzScan.vue'
+import ptzWiper from './ptzWiper.vue'
+import ptzSwitch from './ptzSwitch.vue'
+import mediaInfo from '../mediaInfo.vue'
+import H265web from '../h265web.vue'
+
+export default {
+  name: 'DevicePlayer',
+  directives: { elDragDialog },
+  components: {
+    H265web,
+    PtzPreset, PtzCruising, ptzScan, ptzWiper, ptzSwitch, mediaInfo,
+    jessibucaPlayer, rtcPlayer
+  },
+  props: {},
+  data() {
+    return {
+      video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
+      videoUrl: '',
+      activePlayer: 'jessibuca',
+      // 如何你只是用一种播放器，直接注释掉不用的部分即可
+      player: {
+        jessibuca: ['ws_flv', 'wss_flv'],
+        webRTC: ['rtc', 'rtcs'],
+        h265web: ['ws_flv', 'wss_flv']
+      },
+      showVideoDialog: false,
+      channelId: null,
+      streamId: '',
+      ptzMethod: 'preset',
+      ptzPresetId: '',
+      app: '',
+      mediaServerId: '',
+      tabActiveName: 'media',
+      hasAudio: false,
+      loadingRecords: false,
+      recordsLoading: false,
+      isLoging: false,
+      controSpeed: 30,
+      timeVal: 0,
+      timeMin: 0,
+      timeMax: 1440,
+      presetPos: 1,
+      cruisingSpeed: 100,
+      cruisingTime: 5,
+      cruisingGroup: 0,
+      scanSpeed: 100,
+      scanGroup: 0,
+      tracks: [],
+      showPtz: true,
+      showBroadcast: true,
+      showRrecord: true,
+      sliderTime: 0,
+      seekTime: 0,
+      recordStartTime: 0,
+      showTimeText: '00:00:00',
+      streamInfo: null,
+      broadcastMode: true,
+      broadcastRtc: null,
+      broadcastStatus: -1 // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功
+    }
+  },
+  computed: {
+    getPlayerShared: function() {
+      return {
+        sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
+        sharedIframe: '' + window.location.origin + '<iframe src="/public#/play/wasm/"></iframe>' + encodeURIComponent(this.videoUrl) + '',
+        sharedRtmp: this.videoUrl
+      }
+    }
+  },
+  created() {
+    this.broadcastStatus = -1
+    if (Object.keys(this.player).length === 1) {
+      this.activePlayer = Object.keys(this.player)[0]
+    }
+  },
+  methods: {
+    tabHandleClick: function(tab, event) {
+      console.log(tab)
+      this.tracks = []
+      if (tab.name === 'codec') {
+        this.$refs.mediaInfo.startTask()
+      } else {
+        this.$refs.mediaInfo.stopTask()
+      }
+    },
+    changePlayer: function(tab) {
+      console.log(this.player[tab.name][0])
+      this.activePlayer = tab.name
+      this.videoUrl = this.getUrlByStreamInfo()
+      console.log(this.videoUrl)
+    },
+    openDialog: function(tab, channelId, param) {
+      if (this.showVideoDialog) {
+        return
+      }
+      this.tabActiveName = tab
+      this.channelId = channelId
+      this.streamId = ''
+      this.mediaServerId = ''
+      this.app = ''
+      this.videoUrl = ''
+      if (this.$refs[this.activePlayer]) {
+        this.$refs[this.activePlayer].pause()
+      }
+      switch (tab) {
+        case 'media':
+          this.play(param.streamInfo, param.hasAudio)
+          break
+        case 'streamPlay':
+          this.tabActiveName = 'media'
+          this.showRrecord = false
+          this.showPtz = false
+          this.showBroadcast = false
+          this.play(param.streamInfo, param.hasAudio)
+          break
+        case 'control':
+          break
+      }
+    },
+    play: function(streamInfo, hasAudio) {
+      this.streamInfo = streamInfo
+      this.hasAudio = hasAudio
+      this.isLoging = false
+      // this.videoUrl = streamInfo.rtc;
+      this.videoUrl = this.getUrlByStreamInfo()
+      this.streamId = streamInfo.stream
+      this.app = streamInfo.app
+      this.mediaServerId = streamInfo.mediaServerId
+      this.playFromStreamInfo(false, streamInfo)
+    },
+    getUrlByStreamInfo() {
+      console.log(this.streamInfo)
+      let streamInfo = this.streamInfo
+      if (this.streamInfo.transcodeStream) {
+        streamInfo = this.streamInfo.transcodeStream
+      }
+      if (location.protocol === 'https:') {
+        this.videoUrl = streamInfo[this.player[this.activePlayer][1]]
+      } else {
+        this.videoUrl = streamInfo[this.player[this.activePlayer][0]]
+      }
+      return this.videoUrl
+    },
+
+    playFromStreamInfo: function(realHasAudio, streamInfo) {
+      this.showVideoDialog = true
+      this.hasaudio = realHasAudio && this.hasaudio
+      if (this.$refs[this.activePlayer]) {
+        this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
+      } else {
+        this.$nextTick(() => {
+          this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
+        })
+      }
+    },
+    close: function() {
+      console.log('关闭视频')
+      if (this.$refs[this.activePlayer]) {
+        this.$refs[this.activePlayer].pause()
+      }
+      this.videoUrl = ''
+      this.showVideoDialog = false
+      this.stopBroadcast()
+    },
+    ptzCamera: function(command) {
+      console.log('云台控制：' + command)
+      this.$store.dispatch('commonChanel/ptz',
+        [
+          this.channelId,
+          command,
+          parseInt(this.controSpeed * 255 / 100),
+          parseInt(this.controSpeed * 255 / 100),
+          parseInt(this.controSpeed * 16 / 100)
+        ])
+    },
+    irisCamera: function(command) {
+      this.$store.dispatch('commonChanel/iris',
+        [
+          this.channelId,
+          command,
+          parseInt(this.controSpeed * 255 / 100)
+        ])
+    },
+    focusCamera: function(command) {
+      this.$store.dispatch('commonChanel/focus',
+        [
+          this.channelId,
+          command,
+          parseInt(this.controSpeed * 255 / 100)
+        ])
+    },
+    // ////////////////////播放器事件处理//////////////////////////
+    videoError: function(e) {
+      console.log('播放器错误：' + JSON.stringify(e))
+    },
+    copyUrl: function(dropdownItem) {
+      console.log(dropdownItem)
+      this.$copyText(dropdownItem).then((e) => {
+        this.$message.success({
+          showClose: true,
+          message: '成功拷贝到粘贴板'
+        })
+      }, (e) => {
+
+      })
+    },
+    getBroadcastStatus() {
+      if (this.broadcastStatus == -2) {
+        return 'primary'
+      }
+      if (this.broadcastStatus == -1) {
+        return 'primary'
+      }
+      if (this.broadcastStatus == 0) {
+        return 'warning'
+      }
+      if (this.broadcastStatus === 1) {
+        return 'danger'
+      }
+    },
+    broadcastStatusClick() {
+      if (this.broadcastStatus === -1) {
+        // 默认状态， 开始
+        this.broadcastStatus = 0
+        // 发起语音对讲
+        this.$store.dispatch('play/broadcastStart', [ this.channelId, this.broadcastMode])
+          .then(data => {
+            const streamInfo = data.streamInfo
+            if (document.location.protocol.includes('https')) {
+              this.startBroadcast(streamInfo.rtcs)
+            } else {
+              this.startBroadcast(streamInfo.rtc)
+            }
+          })
+      } else if (this.broadcastStatus === 1) {
+        this.broadcastStatus = -1
+        this.broadcastRtc.close()
+      }
+    },
+    startBroadcast(url) {
+      // 获取推流鉴权Key
+      this.$store.dispatch('user/getUserInfo')
+        .then((data) => {
+          if (data == null) {
+            this.broadcastStatus = -1
+            return
+          }
+          const pushKey = data.pushKey
+          // 获取推流鉴权KEY
+          url += '&sign=' + crypto.createHash('md5').update(pushKey, 'utf8').digest('hex')
+          console.log('开始语音喊话： ' + url)
+          this.broadcastRtc = new ZLMRTCClient.Endpoint({
+            debug: true, // 是否打印日志
+            zlmsdpUrl: url, // 流地址
+            simulecast: false,
+            useCamera: false,
+            audioEnable: true,
+            videoEnable: false,
+            recvOnly: false
+          })
+
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT, (e) => { // 获取到了本地流
+            console.error('不支持webrtc', e)
+            this.$message({
+              showClose: true,
+              message: '不支持webrtc, 无法进行语音喊话',
+              type: 'error'
+            })
+            this.broadcastStatus = -1
+          })
+
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => { // ICE 协商出错
+            console.error('ICE 协商出错')
+            this.$message({
+              showClose: true,
+              message: 'ICE 协商出错',
+              type: 'error'
+            })
+            this.broadcastStatus = -1
+          })
+
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => { // offer anwser 交换失败
+            console.error('offer anwser 交换失败', e)
+            this.$message({
+              showClose: true,
+              message: 'offer anwser 交换失败' + e,
+              type: 'error'
+            })
+            this.broadcastStatus = -1
+          })
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e) => { // offer anwser 交换失败
+            console.log('状态改变', e)
+            if (e === 'connecting') {
+              this.broadcastStatus = 0
+            } else if (e === 'connected') {
+              this.broadcastStatus = 1
+            } else if (e === 'disconnected') {
+              this.broadcastStatus = -1
+            }
+          })
+          this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (e) => { // offer anwser 交换失败
+            console.log('捕获流失败', e)
+            this.$message({
+              showClose: true,
+              message: '捕获流失败' + e,
+              type: 'error'
+            })
+            this.broadcastStatus = -1
+          })
+        }).catch(e => {
+          this.$message({
+            showClose: true,
+            message: e,
+            type: 'error'
+          })
+          this.broadcastStatus = -1
+        })
+    },
+    stopBroadcast() {
+      this.broadcastRtc.close()
+      this.broadcastStatus = -1
+      this.$store.dispatch('play/broadcastStop', [this.channelId])
+    }
+  }
+}
+</script>
+
+<style>
+.control-wrapper {
+  position: relative;
+  width: 6.25rem;
+  height: 6.25rem;
+  max-width: 6.25rem;
+  max-height: 6.25rem;
+  border-radius: 100%;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+  float: left;
+}
+
+.control-panel {
+  position: relative;
+  top: 0;
+  left: 5rem;
+  height: 11rem;
+  max-height: 11rem;
+}
+
+.control-btn {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  width: 44%;
+  height: 44%;
+  border-radius: 5px;
+  border: 1px solid #78aee4;
+  box-sizing: border-box;
+  transition: all 0.3s linear;
+}
+
+.control-btn:hover {
+  cursor: pointer
+}
+
+.control-btn i {
+  font-size: 20px;
+  color: #78aee4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.control-btn i:hover {
+  cursor: pointer
+}
+
+.control-zoom-btn:hover {
+  cursor: pointer
+}
+
+.control-round {
+  position: absolute;
+  top: 21%;
+  left: 21%;
+  width: 58%;
+  height: 58%;
+  background: #fff;
+  border-radius: 100%;
+}
+
+.control-round-inner {
+  position: absolute;
+  left: 13%;
+  top: 13%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  height: 70%;
+  font-size: 40px;
+  color: #78aee4;
+  border: 1px solid #78aee4;
+  border-radius: 100%;
+  transition: all 0.3s linear;
+}
+
+.control-inner-btn {
+  position: absolute;
+  width: 60%;
+  height: 60%;
+  background: #fafafa;
+}
+
+.control-top {
+  top: -8%;
+  left: 27%;
+  transform: rotate(-45deg);
+  border-radius: 5px 100% 5px 0;
+}
+
+.control-top i {
+  transform: rotate(45deg);
+  border-radius: 5px 100% 5px 0;
+}
+
+.control-top .control-inner {
+  left: -1px;
+  bottom: 0;
+  border-top: 1px solid #78aee4;
+  border-right: 1px solid #78aee4;
+  border-radius: 0 100% 0 0;
+}
+
+.control-top .fa {
+  transform: rotate(45deg) translateY(-7px);
+}
+
+.control-left {
+  top: 27%;
+  left: -8%;
+  transform: rotate(45deg);
+  border-radius: 5px 0 5px 100%;
+}
+
+.control-left i {
+  transform: rotate(-45deg);
+}
+
+.control-left .control-inner {
+  right: -1px;
+  top: -1px;
+  border-bottom: 1px solid #78aee4;
+  border-left: 1px solid #78aee4;
+  border-radius: 0 0 0 100%;
+}
+
+.control-left .fa {
+  transform: rotate(-45deg) translateX(-7px);
+}
+
+.control-right {
+  top: 27%;
+  right: -8%;
+  transform: rotate(45deg);
+  border-radius: 5px 100% 5px 0;
+}
+
+.control-right i {
+  transform: rotate(-45deg);
+}
+
+.control-right .control-inner {
+  left: -1px;
+  bottom: -1px;
+  border-top: 1px solid #78aee4;
+  border-right: 1px solid #78aee4;
+  border-radius: 0 100% 0 0;
+}
+
+.control-right .fa {
+  transform: rotate(-45deg) translateX(7px);
+}
+
+.control-bottom {
+  left: 27%;
+  bottom: -8%;
+  transform: rotate(45deg);
+  border-radius: 0 5px 100% 5px;
+}
+
+.control-bottom i {
+  transform: rotate(-45deg);
+}
+
+.control-bottom .control-inner {
+  top: -1px;
+  left: -1px;
+  border-bottom: 1px solid #78aee4;
+  border-right: 1px solid #78aee4;
+  border-radius: 0 0 100% 0;
+}
+
+.control-bottom .fa {
+  transform: rotate(-45deg) translateY(7px);
+}
+
+.trank {
+  width: 80%;
+  height: 180px;
+  text-align: left;
+  padding: 0 10%;
+  overflow: auto;
+}
+
+.trankInfo {
+  width: 80%;
+  padding: 0 10%;
+}
+.el-dialog__body{
+  padding: 10px 20px;
+}
+.ptz-btn-box {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 0 2rem;
+  height: 3rem;
+  line-height: 4rem;
+}
+</style>
diff --git a/web/src/views/common/channelPlayer/ptzCruising.vue b/web/src/views/common/channelPlayer/ptzCruising.vue
new file mode 100644
index 000000000..2c3572a69
--- /dev/null
+++ b/web/src/views/common/channelPlayer/ptzCruising.vue
@@ -0,0 +1,328 @@
+<template>
+  <div id="ptzCruising">
+    <div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
+      <span>巡航组号: </span>
+      <el-input
+        v-model="cruiseId"
+        min="1"
+        max="255"
+        placeholder="巡航组号"
+        addon-before="巡航组号"
+        addon-after="(1-255)"
+        size="mini"
+      />
+    </div>
+    <p>
+      <el-tag
+        v-for="(item, index) in presetList"
+        :key="item.presetId"
+        closable
+        style="margin-right: 1rem; cursor: pointer"
+        @close="delPreset(item, index)"
+      >
+        {{ item.presetName ? item.presetName : item.presetId }}
+      </el-tag>
+    </p>
+
+    <el-form v-if="selectPresetVisible" size="mini" :inline="true">
+      <el-form-item>
+        <el-select v-model="selectPreset" placeholder="请选择预置点">
+          <el-option
+            v-for="item in allPresetList"
+            :key="item.presetId"
+            :label="item.presetName"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="addCruisePoint">保存</el-button>
+        <el-button type="primary" @click="cancelAddCruisePoint">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button v-else size="mini" @click="selectPresetVisible=true">添加巡航点</el-button>
+
+    <el-form v-if="setSpeedVisible" size="mini" :inline="true">
+      <el-form-item>
+        <el-input
+          v-if="setSpeedVisible"
+          v-model="cruiseSpeed"
+          min="1"
+          max="4095"
+          placeholder="巡航速度"
+          addon-before="巡航速度"
+          addon-after="(1-4095)"
+          size="mini"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="setCruiseSpeed">保存</el-button>
+        <el-button @click="cancelSetCruiseSpeed">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button v-else size="mini" @click="setSpeedVisible = true">设置巡航速度</el-button>
+    <el-form v-if="setTimeVisible" size="mini" :inline="true">
+      <el-form-item>
+        <el-input
+          v-model="cruiseTime"
+          min="1"
+          max="4095"
+          placeholder="巡航停留时间(秒)"
+          addon-before="巡航停留时间(秒)"
+          addon-after="(1-4095)"
+          style="width: 100%;"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="setCruiseTime">保存</el-button>
+        <el-button @click="cancelSetCruiseTime">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button v-else size="mini" @click="setTimeVisible = true">设置巡航时间</el-button>
+    <el-button size="mini" @click="startCruise">开始巡航</el-button>
+    <el-button size="mini" @click="stopCruise">停止巡航</el-button>
+    <el-button size="mini" type="danger" @click="deleteCruise">删除巡航</el-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PtzCruising',
+  components: {},
+  props: ['channelId'],
+  data() {
+    return {
+      cruiseId: 1,
+      presetList: [],
+      allPresetList: [],
+      selectPreset: '',
+      inputVisible: false,
+      selectPresetVisible: false,
+      setSpeedVisible: false,
+      setTimeVisible: false,
+      cruiseSpeed: '',
+      cruiseTime: ''
+    }
+  },
+  created() {
+    this.getPresetList()
+  },
+  methods: {
+    getPresetList: function() {
+      this.$store.dispatch('commonChanel/queryPreset', [this.channelId])
+        .then((data) => {
+          this.allPresetList = data
+        })
+    },
+    addCruisePoint: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/addPointForCruise',
+        [this.channelId, this.cruiseId, this.selectPreset.presetId])
+        .then((data) => {
+          this.presetList.push(this.selectPreset)
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.selectPreset = ''
+          this.selectPresetVisible = false
+          loading.close()
+        })
+    },
+    cancelAddCruisePoint: function() {
+      this.selectPreset = ''
+      this.selectPresetVisible = false
+    },
+    delPreset: function(preset, index) {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/deletePointForCruise',
+        [this.channelId, this.cruiseId, preset.presetId])
+        .then((data) => {
+          this.presetList.splice(index, 1)
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          loading.close()
+        })
+    },
+    deleteCruise: function(preset, index) {
+      this.$confirm('确定删除此巡航组', '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          fullscreen: true,
+          text: '正在发送指令',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        this.$store.dispatch('commonChanel/deletePointForCruise',
+          [this.channelId, this.cruiseId, 0])
+          .then((data) => {
+            this.presetList = []
+          }).catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          }).finally(() => {
+            loading.close()
+          })
+      })
+    },
+    setCruiseSpeed: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/setCruiseSpeed',
+        [this.channelId, this.cruiseId, this.cruiseSpeed])
+        .then((data) => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.cruiseSpeed = ''
+          this.setSpeedVisible = false
+          loading.close()
+        })
+    },
+    cancelSetCruiseSpeed: function() {
+      this.cruiseSpeed = ''
+      this.setSpeedVisible = false
+    },
+    setCruiseTime: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/setCruiseTime',
+        [this.channelId, this.cruiseId, this.cruiseTime])
+        .then((data) => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.setTimeVisible = false
+          this.cruiseTime = ''
+          loading.close()
+        })
+    },
+    cancelSetCruiseTime: function() {
+      this.setTimeVisible = false
+      this.cruiseTime = ''
+    },
+    startCruise: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/startCruise',
+        [this.channelId, this.cruiseId])
+        .then((data) => {
+          this.$message({
+            showClose: true,
+            message: '发送成功',
+            type: 'success'
+          })
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.setTimeVisible = false
+          this.cruiseTime = ''
+          loading.close()
+        })
+    },
+    stopCruise: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/stopCruise',
+        [this.channelId, this.cruiseId])
+        .then((data) => {
+          this.$message({
+            showClose: true,
+            message: '发送成功',
+            type: 'success'
+          })
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.setTimeVisible = false
+          this.cruiseTime = ''
+          loading.close()
+        })
+    }
+  }
+}
+</script>
+<style>
+.channel-form {
+  display: grid;
+  background-color: #FFFFFF;
+  padding: 1rem 2rem 0 2rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+}
+</style>
diff --git a/web/src/views/common/channelPlayer/ptzPreset.vue b/web/src/views/common/channelPlayer/ptzPreset.vue
new file mode 100644
index 000000000..08851ef39
--- /dev/null
+++ b/web/src/views/common/channelPlayer/ptzPreset.vue
@@ -0,0 +1,152 @@
+<template>
+  <div id="ptzPreset" style="width: 100%">
+    <el-tag
+      v-for="item in presetList"
+      :key="item.presetId"
+      closable
+      size="mini"
+      style="margin-right: 1rem; cursor: pointer; margin-bottom: 0.6rem"
+      @close="delPreset(item)"
+      @click="gotoPreset(item)"
+    >
+      {{ item.presetName?item.presetName:item.presetId }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible"
+      ref="saveTagInput"
+      v-model="ptzPresetId"
+      min="1"
+      max="255"
+      placeholder="预置位编号"
+      addon-before="预置位编号"
+      addon-after="(1-255)"
+      style="width: 300px; vertical-align: bottom;"
+      size="small"
+    >
+      <template v-slot:append>
+        <el-button @click="addPreset()">保存</el-button>
+        <el-button @click="cancel()">取消</el-button>
+      </template>
+    </el-input>
+    <el-button v-else size="small" @click="showInput">+ 添加</el-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PtzPreset',
+  components: {},
+  props: ['channelId'],
+  data() {
+    return {
+      presetList: [],
+      inputVisible: false,
+      ptzPresetId: ''
+    }
+  },
+  created() {
+    this.getPresetList()
+  },
+  methods: {
+    getPresetList: function() {
+      this.$store.dispatch('commonChanel/queryPreset', [this.channelId])
+        .then(data => {
+          this.presetList = data
+          // 防止出现表格错位
+          this.$nextTick(() => {
+            this.$refs.channelListTable.doLayout()
+          })
+        })
+    },
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+    addPreset: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/addPreset', [this.channelId, this.ptzPresetId])
+        .then(data => {
+          setTimeout(() => {
+            this.inputVisible = false
+            this.ptzPresetId = ''
+            this.getPresetList()
+          }, 1000)
+        }).catch((error) => {
+          loading.close()
+          this.inputVisible = false
+          this.ptzPresetId = ''
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          loading.close()
+        })
+    },
+    cancel: function() {
+      this.inputVisible = false
+      this.ptzPresetId = ''
+    },
+    gotoPreset: function(preset) {
+      console.log(preset)
+      this.$store.dispatch('commonChanel/callPreset', [this.channelId, preset.presetId])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '调用成功',
+            type: 'success'
+          })
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
+    },
+    delPreset: function(preset) {
+      this.$confirm('确定删除此预置位', '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          fullscreen: true,
+          text: '正在发送指令',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        this.$store.dispatch('commonChanel/deletePreset', [this.channelId, preset.presetId])
+          .then(data => {
+            setTimeout(() => {
+              this.getPresetList()
+            }, 1000)
+          }).catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          }).finally(() => {
+            loading.close()
+          })
+      }).catch(() => {
+
+      })
+    }
+
+  }
+}
+</script>
diff --git a/web/src/views/common/channelPlayer/ptzScan.vue b/web/src/views/common/channelPlayer/ptzScan.vue
new file mode 100644
index 000000000..7c7d6bb98
--- /dev/null
+++ b/web/src/views/common/channelPlayer/ptzScan.vue
@@ -0,0 +1,212 @@
+<template>
+  <div id="ptzScan">
+    <div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
+      <span>扫描组号: </span>
+      <el-input
+        v-model="scanId"
+        min="1"
+        max="255"
+        placeholder="扫描组号"
+        addon-before="扫描组号"
+        addon-after="(1-255)"
+        size="mini"
+      />
+    </div>
+
+    <el-button size="mini" @click="setScanLeft">设置左边界</el-button>
+    <el-button size="mini" @click="setScanRight">设置右边界</el-button>
+
+    <el-form v-if="setSpeedVisible" size="mini" :inline="true">
+      <el-form-item>
+        <el-input
+          v-if="setSpeedVisible"
+          v-model="speed"
+          min="1"
+          max="4095"
+          placeholder="巡航速度"
+          addon-before="巡航速度"
+          addon-after="(1-4095)"
+          size="mini"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="setSpeed">保存</el-button>
+        <el-button @click="cancelSetSpeed">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button v-else size="mini" @click="setSpeedVisible = true">设置扫描速度</el-button>
+
+    <el-button size="mini" @click="startScan">开始自动扫描</el-button>
+    <el-button size="mini" @click="stopScan">停止自动扫描</el-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PtzScan',
+  components: {},
+  props: ['channelId'],
+  data() {
+    return {
+      scanId: 1,
+      setSpeedVisible: false,
+      speed: ''
+    }
+  },
+  created() {
+  },
+  methods: {
+    setSpeed: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/setSpeedForScan', [this.channelId, this.scanId, this.speed])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.speed = ''
+          this.setSpeedVisible = false
+          loading.close()
+        })
+    },
+    cancelSetSpeed: function() {
+      this.speed = ''
+      this.setSpeedVisible = false
+    },
+    setScanLeft: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/setLeftForScan', [this.channelId, this.scanId])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.speed = ''
+          this.setSpeedVisible = false
+          loading.close()
+        })
+    },
+    setScanRight: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/setRightForScan', [this.channelId, this.scanId])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.speed = ''
+          this.setSpeedVisible = false
+          loading.close()
+        })
+    },
+    startScan: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/startScan', [this.channelId, this.scanId])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '发送成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          loading.close()
+        })
+    },
+    stopScan: function() {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/stopScan', [this.channelId, this.scanId])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '发送成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          loading.close()
+        })
+    }
+  }
+}
+</script>
+<style>
+.channel-form {
+  display: grid;
+  background-color: #FFFFFF;
+  padding: 1rem 2rem 0 2rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+</style>
diff --git a/web/src/views/common/channelPlayer/ptzSwitch.vue b/web/src/views/common/channelPlayer/ptzSwitch.vue
new file mode 100644
index 000000000..fd76d1d07
--- /dev/null
+++ b/web/src/views/common/channelPlayer/ptzSwitch.vue
@@ -0,0 +1,76 @@
+<template>
+  <div id="ptzScan">
+    <el-form size="mini" :inline="true">
+      <el-form-item>
+        <el-input
+          v-model="switchId"
+          min="1"
+          max="4095"
+          placeholder="开关编号"
+          addon-before="开关编号"
+          addon-after="(2-255)"
+          size="mini"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" @click="open('on')">开启</el-button>
+        <el-button size="mini" @click="open('off')">关闭</el-button>
+      </el-form-item>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PtzScan',
+  components: {},
+  props: ['channelId'],
+  data() {
+    return {
+      switchId: 1
+    }
+  },
+  created() {
+  },
+  methods: {
+    open: function(command) {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/auxiliary', [this.channelId, command, this.switchId])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          loading.close()
+        })
+    }
+  }
+}
+</script>
+<style>
+.channel-form {
+  display: grid;
+  background-color: #FFFFFF;
+  padding: 1rem 2rem 0 2rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+</style>
diff --git a/web/src/views/common/channelPlayer/ptzWiper.vue b/web/src/views/common/channelPlayer/ptzWiper.vue
new file mode 100644
index 000000000..483f2a9e8
--- /dev/null
+++ b/web/src/views/common/channelPlayer/ptzWiper.vue
@@ -0,0 +1,58 @@
+<template>
+  <div id="ptzWiper">
+    <el-button size="mini" @click="open('on')">开启</el-button>
+    <el-button size="mini" @click="open('off')">关闭</el-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PtzWiper',
+  components: {},
+  props: ['channelId'],
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {
+    open: function(command) {
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('commonChanel/wiper', [this.channelId, command])
+        .then(data => {
+          this.$message({
+            showClose: true,
+            message: '保存成功',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          loading.close()
+        })
+    }
+  }
+}
+</script>
+<style>
+.channel-form {
+  display: grid;
+  background-color: #FFFFFF;
+  padding: 1rem 2rem 0 2rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+</style>
diff --git a/web/src/views/device/channel/index.vue b/web/src/views/device/channel/index.vue
index e7a0d01db..4089903fd 100755
--- a/web/src/views/device/channel/index.vue
+++ b/web/src/views/device/channel/index.vue
@@ -7,7 +7,7 @@
         </el-form-item>
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             placeholder="关键字"
             prefix-icon="el-icon-search"
@@ -248,7 +248,7 @@ export default {
       videoComponentList: [],
       currentPlayerInfo: {}, // 当前播放对象
       updateLooper: 0, // 数据刷新轮训标志
-      searchSrt: '',
+      searchStr: '',
       channelType: '',
       online: '',
       subStream: '',
@@ -322,7 +322,7 @@ export default {
       this.$store.dispatch('device/queryChannels', [this.deviceId, {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online,
         channelType: this.channelType
       }]).then(data => {
@@ -465,7 +465,7 @@ export default {
 
       var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.deviceId}`
       this.$router.push(url).then(() => {
-        this.searchSrt = ''
+        this.searchStr = ''
         this.channelType = ''
         this.online = ''
         this.initParam()
@@ -477,7 +477,7 @@ export default {
         {
           page: this.currentPage,
           count: this.count,
-          query: this.searchSrt,
+          query: this.searchStr,
           online: this.online,
           channelType: this.channelType
         },
diff --git a/web/src/views/device/list.vue b/web/src/views/device/list.vue
index c5d1e16c6..14a303559 100755
--- a/web/src/views/device/list.vue
+++ b/web/src/views/device/list.vue
@@ -3,7 +3,7 @@
     <el-form :inline="true" size="mini">
       <el-form-item label="搜索">
         <el-input
-          v-model="searchSrt"
+          v-model="searchStr"
           style="margin-right: 1rem; width: auto;"
           placeholder="关键字"
           prefix-icon="el-icon-search"
@@ -185,7 +185,7 @@ export default {
     return {
       deviceList: [], // 设备列表
       currentDevice: {}, // 当前操作设备对象
-      searchSrt: '',
+      searchStr: '',
       online: null,
       videoComponentList: [],
       updateLooper: 0, // 数据刷新轮训标志
@@ -231,7 +231,7 @@ export default {
       this.$store.dispatch('device/queryDevices', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         status: this.online
       }).then((data) => {
         this.total = data.total
diff --git a/web/src/views/dialog/GbChannelSelect.vue b/web/src/views/dialog/GbChannelSelect.vue
index fca0374da..54183b2a4 100644
--- a/web/src/views/dialog/GbChannelSelect.vue
+++ b/web/src/views/dialog/GbChannelSelect.vue
@@ -14,7 +14,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             placeholder="关键字"
             prefix-icon="el-icon-search"
@@ -117,7 +117,7 @@ export default {
       showDialog: false,
       channelList: [], // 设备列表
       currentDevice: {}, // 当前操作设备对象
-      searchSrt: '',
+      searchStr: '',
       online: null,
       channelType: '',
       videoComponentList: [],
@@ -154,7 +154,7 @@ export default {
           page: this.currentPage,
           count: this.count,
           channelType: this.channelType,
-          query: this.searchSrt,
+          query: this.searchStr,
           online: this.online
         })
           .then(data => {
@@ -167,7 +167,7 @@ export default {
         this.$store.dispatch('commonChanel/getParentList', {
           page: this.currentPage,
           count: this.count,
-          query: this.searchSrt,
+          query: this.searchStr,
           channelType: this.channelType,
           online: this.online
         })
diff --git a/web/src/views/dialog/GbDeviceSelect.vue b/web/src/views/dialog/GbDeviceSelect.vue
index 9dfd8769e..811947b93 100644
--- a/web/src/views/dialog/GbDeviceSelect.vue
+++ b/web/src/views/dialog/GbDeviceSelect.vue
@@ -13,7 +13,7 @@
     ><el-form :inline="true" size="mini">
        <el-form-item label="搜索">
          <el-input
-           v-model="searchSrt"
+           v-model="searchStr"
            style="margin-right: 1rem; width: auto;"
            size="mini"
            placeholder="关键字"
@@ -92,7 +92,7 @@ export default {
       showDialog: false,
       deviceList: [], // 设备列表
       currentDevice: {}, // 当前操作设备对象
-      searchSrt: '',
+      searchStr: '',
       online: null,
       videoComponentList: [],
       updateLooper: 0, // 数据刷新轮训标志
@@ -129,7 +129,7 @@ export default {
       this.$store.dispatch('device/queryDevices', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         status: this.online
       })
         .then(data => {
diff --git a/web/src/views/dialog/UnusualGroupChannelSelect.vue b/web/src/views/dialog/UnusualGroupChannelSelect.vue
index 6af2baeb5..b358657e6 100644
--- a/web/src/views/dialog/UnusualGroupChannelSelect.vue
+++ b/web/src/views/dialog/UnusualGroupChannelSelect.vue
@@ -14,7 +14,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             size="mini"
             placeholder="关键字"
@@ -132,7 +132,7 @@ export default {
     return {
       showDialog: false,
       channelList: [], // 设备列表
-      searchSrt: '',
+      searchStr: '',
       online: null,
       channelType: '',
       winHeight: 580,
@@ -165,7 +165,7 @@ export default {
         page: this.currentPage,
         count: this.count,
         channelType: this.channelType,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online
       })
         .then(data => {
diff --git a/web/src/views/dialog/UnusualRegionChannelSelect.vue b/web/src/views/dialog/UnusualRegionChannelSelect.vue
index 54294703d..ff236b52f 100644
--- a/web/src/views/dialog/UnusualRegionChannelSelect.vue
+++ b/web/src/views/dialog/UnusualRegionChannelSelect.vue
@@ -14,7 +14,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             size="mini"
             placeholder="关键字"
@@ -144,7 +144,7 @@ export default {
     return {
       showDialog: false,
       channelList: [], // 设备列表
-      searchSrt: '',
+      searchStr: '',
       online: null,
       channelType: '',
       winHeight: 580,
@@ -177,7 +177,7 @@ export default {
         page: this.currentPage,
         count: this.count,
         channelType: this.channelType,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online
       })
         .then((data) => {
diff --git a/web/src/views/dialog/linkChannelRecord.vue b/web/src/views/dialog/linkChannelRecord.vue
index b4ebe44c3..8a602199c 100755
--- a/web/src/views/dialog/linkChannelRecord.vue
+++ b/web/src/views/dialog/linkChannelRecord.vue
@@ -10,7 +10,7 @@
           <el-form :inline="true" size="mini">
             <el-form-item label="搜索">
               <el-input
-                v-model="searchSrt"
+                v-model="searchStr"
                 style="margin-right: 1rem; width: auto;"
                 placeholder="关键字"
                 prefix-icon="el-icon-search"
@@ -120,7 +120,7 @@ export default {
       showDialog: false,
       chooseData: {},
       channelList: [],
-      searchSrt: '',
+      searchStr: '',
       channelType: '',
       online: '',
       hasLink: 'false',
@@ -161,7 +161,7 @@ export default {
       this.$store.dispatch('recordPlan/queryChannelList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online,
         channelType: this.channelType,
         planId: this.planId,
diff --git a/web/src/views/dialog/shareChannelAdd.vue b/web/src/views/dialog/shareChannelAdd.vue
index 455715e30..0193ebe7f 100755
--- a/web/src/views/dialog/shareChannelAdd.vue
+++ b/web/src/views/dialog/shareChannelAdd.vue
@@ -8,7 +8,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             size="mini"
             placeholder="关键字"
@@ -134,7 +134,7 @@ export default {
   data() {
     return {
       channelList: [],
-      searchSrt: '',
+      searchStr: '',
       channelType: '',
       online: '',
       hasShare: 'false',
@@ -168,7 +168,7 @@ export default {
       this.$store.dispatch('platform/getChannelList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         online: this.online,
         channelType: this.channelType,
         platformId: this.platformId,
diff --git a/web/src/views/live/index.vue b/web/src/views/live/index.vue
index e027ae3d5..60956483e 100755
--- a/web/src/views/live/index.vue
+++ b/web/src/views/live/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="live" class="live-container">
     <div v-loading="loading" class="live-content" element-loading-text="拼命加载中">
-      <div class="device-tree-container">
-        <DeviceTree :click-event="clickEvent" :context-menu-event="contextMenuEvent" />
+      <div class="device-tree-container-box">
+        <DeviceTree @clickEvent="clickEvent" :context-menu-event="contextMenuEvent" />
       </div>
       <div class="video-container">
         <div class="control-bar">
@@ -281,7 +281,7 @@ export default {
   flex-direction: row;
 }
 
-.device-tree-container {
+.device-tree-container-box {
   width: 300px;
   min-width: 250px;
   max-width: 400px;
@@ -295,7 +295,7 @@ export default {
     flex-direction: column;
   }
 
-  .device-tree-container {
+  .device-tree-container-box {
     width: 100%;
     max-width: 100%;
     height: 200px;
@@ -402,76 +402,5 @@ export default {
   }
 }
 
-.videoList {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
 
-.video-item {
-  position: relative;
-  width: 15rem;
-  height: 10rem;
-  margin-right: 1rem;
-  background-color: #000000;
-}
-
-.video-item-img {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.video-item-img:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 3rem;
-  height: 3rem;
-  background-image: url("../../assets/loading.png");
-  background-size: cover;
-  background-color: #000000;
-}
-
-.video-item-title {
-  position: absolute;
-  bottom: 0;
-  color: #000000;
-  background-color: #ffffff;
-  line-height: 1.5rem;
-  padding: 0.3rem;
-  width: 14.4rem;
-}
-
-.baidumap {
-  width: 100%;
-  height: 100%;
-  border: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-}
-
-/* 去除百度地图版权那行字 和 百度logo */
-.baidumap > .BMap_cpyCtrl {
-  display: none !important;
-}
-
-.baidumap > .anchorBL {
-  display: none !important;
-}
 </style>
diff --git a/web/src/views/platform/index.vue b/web/src/views/platform/index.vue
index b112d12c7..3c88d6538 100755
--- a/web/src/views/platform/index.vue
+++ b/web/src/views/platform/index.vue
@@ -4,7 +4,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             size="mini"
             placeholder="关键字"
@@ -159,7 +159,7 @@ export default {
       defaultPlatform: null,
       platform: null,
       pushChannelLoading: false,
-      searchSrt: '',
+      searchStr: '',
       currentPage: 1,
       count: 15,
       total: 0
@@ -296,7 +296,7 @@ export default {
       this.$store.dispatch('platform/query', {
         count: this.count,
         page: this.currentPage,
-        query: this.searchSrt
+        query: this.searchStr
       })
         .then((data) => {
           this.total = data.total
diff --git a/web/src/views/recordPlan/index.vue b/web/src/views/recordPlan/index.vue
index 9acf29abb..c30631be4 100755
--- a/web/src/views/recordPlan/index.vue
+++ b/web/src/views/recordPlan/index.vue
@@ -4,7 +4,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             placeholder="关键字"
             prefix-icon="el-icon-search"
@@ -72,7 +72,7 @@ export default {
   data() {
     return {
       recordPlanList: [],
-      searchSrt: '',
+      searchStr: '',
       currentPage: 1,
       count: 15,
       total: 0,
@@ -101,7 +101,7 @@ export default {
       this.$store.dispatch('recordPlan/queryList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt
+        query: this.searchStr
       })
         .then(data => {
           this.total = data.total
diff --git a/web/src/views/streamProxy/index.vue b/web/src/views/streamProxy/index.vue
index 9888aab09..4467657d6 100755
--- a/web/src/views/streamProxy/index.vue
+++ b/web/src/views/streamProxy/index.vue
@@ -4,7 +4,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             placeholder="关键字"
             prefix-icon="el-icon-search"
@@ -144,7 +144,7 @@ export default {
       count: 15,
       total: 0,
       streamProxy: null,
-      searchSrt: '',
+      searchStr: '',
       mediaServerId: '',
       pulling: '',
       mediaServerList: []
@@ -193,7 +193,7 @@ export default {
       this.$store.dispatch('streamProxy/queryList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         pulling: this.pulling,
         mediaServerId: this.mediaServerId
       })
diff --git a/web/src/views/streamPush/buildPushStreamUrl.vue b/web/src/views/streamPush/buildPushStreamUrl.vue
index b8c0a1d92..650e47eef 100644
--- a/web/src/views/streamPush/buildPushStreamUrl.vue
+++ b/web/src/views/streamPush/buildPushStreamUrl.vue
@@ -56,7 +56,7 @@
           </el-form-item>
           <el-form-item>
             <div style="float: right;">
-              <el-button type="primary" @click="onSubmit">确认</el-button>
+              <el-button @click="close">关闭</el-button>
             </div>
           </el-form-item>
         </el-form>
@@ -126,9 +126,6 @@ export default {
     openDialog: function(callback) {
       this.endCallback = callback
       this.showDialog = true
-    },
-    onSubmit: function() {
-
     },
     close: function() {
       this.showDialog = false
diff --git a/web/src/views/streamPush/index.vue b/web/src/views/streamPush/index.vue
index a3554210d..0a2fcb6dc 100755
--- a/web/src/views/streamPush/index.vue
+++ b/web/src/views/streamPush/index.vue
@@ -4,7 +4,7 @@
       <el-form :inline="true" size="mini">
         <el-form-item label="搜索">
           <el-input
-            v-model="searchSrt"
+            v-model="searchStr"
             style="margin-right: 1rem; width: auto;"
             placeholder="关键字"
             prefix-icon="el-icon-search"
@@ -167,7 +167,7 @@ export default {
       currentPage: 1,
       count: 15,
       total: 0,
-      searchSrt: '',
+      searchStr: '',
       pushing: '',
       mediaServerId: '',
       mediaServerList: [],
@@ -204,7 +204,7 @@ export default {
       this.$store.dispatch('streamPush/queryList', {
         page: this.currentPage,
         count: this.count,
-        query: this.searchSrt,
+        query: this.searchStr,
         pushing: this.pushing,
         mediaServerId: this.mediaServerId
       })