Pre Merge pull request !36 from 阿斌/N/A

调整菜单结构，增加通道列表，支持节点搜索
update src/main/resources/civilCode.csv.
2026-05-25 06:27:50 +08:00 · 2025-07-02 09:21:35 +00:00 · 2025-07-02 17:21:20 +08:00 · 2024-12-15 08:58:42 +00:00
45 changed files with 2868 additions and 252 deletions
--- 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
--- 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 = "更新区域")
--- 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 " +
--- 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 " +
--- 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);
 }
--- 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);
 }
--- 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);
+    }
 }
--- 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);
+    }
 }
--- a/src/main/resources/civilCode.csv
+++ b/src/main/resources/civilCode.csv
@ -861,7 +861,7 @@
 320623,如东县,3206
 320681,启东市,3206
 320682,如皋市,3206
-320684,海门市,3206
+320684,海门区,3206
 320685,海安市,3206
 3207,连云港市,32
 320703,连云区,3207
@ -918,8 +918,6 @@
 33,浙江省, 
 3301,杭州市,33
 330102,上城区,3301
-330103,下城区,3301
-330104,江干区,3301
 330105,拱墅区,3301
 330106,西湖区,3301
 330108,滨江区,3301
@ -927,6 +925,8 @@
 330110,余杭区,3301
 330111,富阳区,3301
 330112,临安区,3301
+330113,临平区,3301
+330114,钱塘区,3301
 330122,桐庐县,3301
 330127,淳安县,3301
 330182,建德市,3301
--- 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
+    }
+  })
+}
--- 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
+    }
+  })
+}

--- a/web/src/icons/svg/devices.svg
+++ 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>
--- a/web/src/icons/svg/devices1.svg
+++ 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>
--- 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>
--- 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' }
--- 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)
+      })
+    })
  }
 }

--- 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)
+      })
+    })
  }
 }

--- 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)
+      })
+    })
  }
 }

--- a/web/src/views/channel/edit.vue
+++ 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>
--- 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
--- a/web/src/views/channel/index.vue
+++ 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>
--- 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
--- 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)
      }
    }
  }
--- 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%;
--- 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>
--- a/web/src/views/common/channelPlayer/index.vue
+++ 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>
--- a/web/src/views/common/channelPlayer/ptzCruising.vue
+++ 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>
--- a/web/src/views/common/channelPlayer/ptzPreset.vue
+++ 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>
--- a/web/src/views/common/channelPlayer/ptzScan.vue
+++ 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>
--- a/web/src/views/common/channelPlayer/ptzSwitch.vue
+++ 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>
--- a/web/src/views/common/channelPlayer/ptzWiper.vue
+++ 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>
--- 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
        },
--- 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
--- 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
        })
--- 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 => {
--- 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 => {
--- 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) => {
--- 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,
--- 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,
--- 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>
--- 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
--- 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
--- 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
      })
--- 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
--- 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
      })
Author	SHA1	Message	Date
阿斌	2a880a5ea5	Pre Merge pull request !36 from 阿斌/N/A	2025-07-02 09:21:35 +00:00
lin	8d488b33e9	调整菜单结构，增加通道列表，支持节点搜索	2025-07-02 17:21:20 +08:00
阿斌	da98101aac	update src/main/resources/civilCode.csv. 行政规划错误。江苏南通海门市，修改为海门区，浙江杭州删除下城区、江干区，新增钱塘区，临平区 Signed-off-by: 阿斌 <38912748@qq.com>	2024-12-15 08:58:42 +00:00
				`@ -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>