增加通道关联以及录制计划接口完善

src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java

@@ -459,4 +459,93 @@ public interface CommonGBChannelMapper {
 
     @SelectProvider(type = ChannelProvider.class, method = "queryList")
     List<CommonGBChannel> queryList(@Param("query") String query, @Param("online") Boolean online, @Param("hasRecordPlan") Boolean hasRecordPlan, @Param("channelType") Integer channelType);
+
+    @Update(value = {" <script>" +
+            " UPDATE wvp_device_channel " +
+            " SET record_plan_id = null" +
+            " WHERE id in "+
+            " <foreach collection='channelIds'  item='item'  open='(' separator=',' close=')' > #{item}</foreach>" +
+            " </script>"})
+    void removeRecordPlan(List<Integer> channelIds);
+
+    @Update(value = {" <script>" +
+            " UPDATE wvp_device_channel " +
+            " SET record_plan_id = #{planId}" +
+            " WHERE id in "+
+            " <foreach collection='channelIds'  item='item'  open='(' separator=',' close=')' > #{item}</foreach>" +
+            " </script>"})
+    void addRecordPlan(List<Integer> channelIds, @Param("planId") Integer planId);
+
+    @Update(value = {" <script>" +
+            " UPDATE wvp_device_channel " +
+            " SET record_plan_id = #{planId}" +
+            " </script>"})
+    void addRecordPlanForAll(@Param("planId") Integer planId);
+
+    @Update(value = {" <script>" +
+            " UPDATE wvp_device_channel " +
+            " SET record_plan_id = null" +
+            " WHERE record_plan_id = #{planId} "+
+            " </script>"})
+    void removeRecordPlanByPlanId( @Param("planId") Integer planId);
+
+
+    @Select("<script>" +
+            " select " +
+            "    wdc.id as gb_id,\n" +
+            "    wdc.device_db_id as gb_device_db_id,\n" +
+            "    wdc.stream_push_id,\n" +
+            "    wdc.stream_proxy_id,\n" +
+            "    wdc.create_time,\n" +
+            "    wdc.update_time,\n" +
+            "    coalesce( wdc.gb_device_id, wdc.device_id) as gb_device_id,\n" +
+            "    coalesce( wdc.gb_name, wdc.name) as gb_name,\n" +
+            "    coalesce( wdc.gb_manufacturer, wdc.manufacturer) as gb_manufacturer,\n" +
+            "    coalesce( wdc.gb_model, wdc.model) as gb_model,\n" +
+            "    coalesce( wdc.gb_owner, wdc.owner) as gb_owner,\n" +
+            "    coalesce( wdc.gb_civil_code, wdc.civil_code) as gb_civil_code,\n" +
+            "    coalesce( wdc.gb_block, wdc.block) as gb_block,\n" +
+            "    coalesce( wdc.gb_address, wdc.address) as gb_address,\n" +
+            "    coalesce( wdc.gb_parental, wdc.parental) as gb_parental,\n" +
+            "    coalesce( wdc.gb_parent_id, wdc.parent_id) as gb_parent_id,\n" +
+            "    coalesce( wdc.gb_safety_way, wdc.safety_way) as gb_safety_way,\n" +
+            "    coalesce( wdc.gb_register_way, wdc.register_way) as gb_register_way,\n" +
+            "    coalesce( wdc.gb_cert_num, wdc.cert_num) as gb_cert_num,\n" +
+            "    coalesce( wdc.gb_certifiable, wdc.certifiable) as gb_certifiable,\n" +
+            "    coalesce( wdc.gb_err_code, wdc.err_code) as gb_err_code,\n" +
+            "    coalesce( wdc.gb_end_time, wdc.end_time) as gb_end_time,\n" +
+            "    coalesce( wdc.gb_secrecy, wdc.secrecy) as gb_secrecy,\n" +
+            "    coalesce( wdc.gb_ip_address, wdc.ip_address) as gb_ip_address,\n" +
+            "    coalesce( wdc.gb_port, wdc.port) as gb_port,\n" +
+            "    coalesce( wdc.gb_password, wdc.password) as gb_password,\n" +
+            "    coalesce( wdc.gb_status, wdc.status) as gb_status,\n" +
+            "    coalesce( wdc.gb_longitude, wdc.longitude) as gb_longitude,\n" +
+            "    coalesce( wdc.gb_latitude, wdc.latitude) as gb_latitude,\n" +
+            "    coalesce( wdc.gb_ptz_type, wdc.ptz_type) as gb_ptz_type,\n" +
+            "    coalesce( wdc.gb_position_type, wdc.position_type) as gb_position_type,\n" +
+            "    coalesce( wdc.gb_room_type, wdc.room_type) as gb_room_type,\n" +
+            "    coalesce( wdc.gb_use_type, wdc.use_type) as gb_use_type,\n" +
+            "    coalesce( wdc.gb_supply_light_type, wdc.supply_light_type) as gb_supply_light_type,\n" +
+            "    coalesce( wdc.gb_direction_type, wdc.direction_type) as gb_direction_type,\n" +
+            "    coalesce( wdc.gb_resolution, wdc.resolution) as gb_resolution,\n" +
+            "    coalesce( wdc.gb_business_group_id, wdc.business_group_id) as gb_business_group_id,\n" +
+            "    coalesce( wdc.gb_download_speed, wdc.download_speed) as gb_download_speed,\n" +
+            "    coalesce( wdc.gb_svc_space_support_mod, wdc.svc_space_support_mod) as gb_svc_space_support_mod,\n" +
+            "    coalesce( wdc.gb_svc_time_support_mode, wdc.svc_time_support_mode) as gb_svc_time_support_mode \n" +
+            " from wvp_device_channel wdc" +
+            " where wdc.channel_type = 0 " +
+            " <if test='query != null'> " +
+            " AND (coalesce(wdc.gb_device_id, wdc.device_id) LIKE concat('%',#{query},'%') escape '/' " +
+            "      OR coalesce(wdc.gb_name, wdc.name)  LIKE concat('%',#{query},'%') escape '/')</if> " +
+            " <if test='online == true'> AND coalesce(wdc.gb_status, wdc.status) = 'ON'</if> " +
+            " <if test='online == false'> AND coalesce(wdc.gb_status, wdc.status) = 'OFF'</if> " +
+            " <if test='hasLink == true'> AND wdc.record_plan_id = #{planId}</if> " +
+            " <if test='hasLink == false'> AND wdc.record_plan_id is null</if> " +
+            " <if test='channelType == 0'> AND wdc.device_db_id is not null</if> " +
+            " <if test='channelType == 1'> AND wdc.stream_push_id is not null</if> " +
+            " <if test='channelType == 2'> AND wdc.stream_proxy_id is not null</if> " +
+            "</script>")
+    List<CommonGBChannel> queryForRecordPlanForWebList(@Param("planId") Integer planId, @Param("query") String query,
+                                                       @Param("channelType") Integer channelType, @Param("online") Boolean online,
+                                                       @Param("hasLink") Boolean hasLink);
 }

src/main/java/com/genersoft/iot/vmp/gb28181/dao/DeviceChannelMapper.java

@@ -93,8 +93,9 @@ public interface DeviceChannelMapper {
     @SelectProvider(type = DeviceChannelProvider.class, method = "queryChannelsByDeviceDbId")
     List<DeviceChannel> queryChannelsByDeviceDbId(@Param("deviceDbId") int deviceDbId);
 
-    @Select("select id from wvp_device_channel where device_db_id = #{deviceDbId}")
-    List<Integer> queryChaneIdListByDeviceDbId(@Param("deviceDbId") int deviceDbId);
+    @Select("select id from wvp_device_channel where device_db_id in  " +
+            " <foreach item='item' index='index' collection='deviceDbIds' open='(' separator=',' close=')'> #{item} </foreach> </if>")
+    List<Integer> queryChaneIdListByDeviceDbIds(List<Integer> deviceDbIds);
 
     @Delete("DELETE FROM wvp_device_channel WHERE device_db_id=#{deviceId}")
     int cleanChannelsByDeviceId(@Param("deviceId") int deviceId);

src/main/java/com/genersoft/iot/vmp/gb28181/service/IDeviceChannelService.java

@@ -124,5 +124,5 @@ public interface IDeviceChannelService {
 
     List<DeviceChannel> queryChaneListByDeviceDbId(Integer deviceDbId);
 
-    List<Integer> queryChaneIdListByDeviceDbId(Integer deviceDbId);
+    List<Integer> queryChaneIdListByDeviceDbIds(List<Integer> deviceDbId);
 }

src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/DeviceChannelServiceImpl.java

@@ -356,8 +356,8 @@ public class DeviceChannelServiceImpl implements IDeviceChannelService {
     }
 
     @Override
-    public List<Integer> queryChaneIdListByDeviceDbId(Integer deviceDbId) {
-        return channelMapper.queryChaneIdListByDeviceDbId(deviceDbId);
+    public List<Integer> queryChaneIdListByDeviceDbIds(List<Integer> deviceDbIds) {
+        return channelMapper.queryChaneIdListByDeviceDbIds(deviceDbIds);
     }
 
     @Override

src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/PlatformChannelServiceImpl.java

@@ -55,6 +55,11 @@ public class PlatformChannelServiceImpl implements IPlatformChannelService {
     @Override
     public PageInfo<PlatformChannel> queryChannelList(int page, int count, String query, Integer channelType, Boolean online, Integer platformId, Boolean hasShare) {
         PageHelper.startPage(page, count);
+        if (query != null) {
+            query = query.replaceAll("/", "//")
+                    .replaceAll("%", "/%")
+                    .replaceAll("_", "/_");
+        }
         List<PlatformChannel> all = platformChannelMapper.queryForPlatformForWebList(platformId, query, channelType, online, hasShare);
         return new PageInfo<>(all);
     }

src/main/java/com/genersoft/iot/vmp/service/IRecordPlanService.java

@@ -1,7 +1,8 @@
 package com.genersoft.iot.vmp.service;
 
+import com.genersoft.iot.vmp.gb28181.bean.CommonGBChannel;
+import com.genersoft.iot.vmp.gb28181.bean.PlatformChannel;
 import com.genersoft.iot.vmp.service.bean.RecordPlan;
-import com.genersoft.iot.vmp.service.bean.RecordPlanItem;
 import com.github.pagehelper.PageInfo;
 
 import java.util.List;
@@ -19,5 +20,11 @@ public interface IRecordPlanService {
 
     void add(RecordPlan plan);
 
-    void linke(List<Integer> channelIds, Integer planId);
+    void link(List<Integer> channelIds, Integer planId);
+
+    PageInfo<CommonGBChannel> queryChannelList(int page, int count, String query, Integer channelType, Boolean online, Integer planId, Boolean hasLink);
+
+    void linkAll(Integer planId);
+
+    void cleanAll(Integer planId);
 }

src/main/java/com/genersoft/iot/vmp/service/impl/RecordPlanServiceImpl.java

@@ -1,6 +1,8 @@
 package com.genersoft.iot.vmp.service.impl;
 
+import com.genersoft.iot.vmp.conf.exception.ControllerException;
 import com.genersoft.iot.vmp.gb28181.bean.CommonGBChannel;
+import com.genersoft.iot.vmp.gb28181.bean.PlatformChannel;
 import com.genersoft.iot.vmp.gb28181.dao.CommonGBChannelMapper;
 import com.genersoft.iot.vmp.service.IRecordPlanService;
 import com.genersoft.iot.vmp.service.bean.CloudRecordItem;
@@ -8,6 +10,7 @@ import com.genersoft.iot.vmp.service.bean.RecordPlan;
 import com.genersoft.iot.vmp.service.bean.RecordPlanItem;
 import com.genersoft.iot.vmp.storager.dao.RecordPlanMapper;
 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 lombok.extern.slf4j.Slf4j;
@@ -33,9 +36,13 @@ public class RecordPlanServiceImpl implements IRecordPlanService {
         plan.setCreateTime(DateUtil.getNow());
         plan.setUpdateTime(DateUtil.getNow());
         recordPlanMapper.add(plan);
-        if (plan.getId() > 0) {
+        if (plan.getId() > 0 && !plan.getPlanItemList().isEmpty()) {
+            for (RecordPlanItem recordPlanItem : plan.getPlanItemList()) {
+                recordPlanItem.setPlanId(plan.getId());
+            }
             recordPlanMapper.batchAddItem(plan.getId(), plan.getPlanItemList());
         }
+        // TODO  更新录像队列
     }
 
     @Override
@@ -52,14 +59,30 @@ public class RecordPlanServiceImpl implements IRecordPlanService {
     }
 
     @Override
+    @Transactional
     public void update(RecordPlan plan) {
         plan.setUpdateTime(DateUtil.getNow());
         recordPlanMapper.update(plan);
+        recordPlanMapper.cleanItems(plan.getId());
+        if (plan.getPlanItemList() != null){
+            recordPlanMapper.batchAddItem(plan.getId(), plan.getPlanItemList());
+        }
+        // TODO  更新录像队列
+       
     }
 
     @Override
+    @Transactional
     public void delete(Integer planId) {
+        RecordPlan recordPlan = recordPlanMapper.get(planId);
+        if (recordPlan == null) {
+            throw new ControllerException(ErrorCode.ERROR100.getCode(), "录制计划不存在");
+        }
+        // 清理关联的通道
+        channelMapper.removeRecordPlanByPlanId(recordPlan.getId());
+        recordPlanMapper.cleanItems(planId);
         recordPlanMapper.delete(planId);
+        // TODO  更新录像队列
     }
 
     @Override
@@ -75,13 +98,35 @@ public class RecordPlanServiceImpl implements IRecordPlanService {
     }
 
     @Override
-    public void linke(List<Integer> channelIds, Integer planId) {
+    public void link(List<Integer> channelIds, Integer planId) {
         if (planId == null) {
             log.info("[录制计划] 移除通道关联的计划");
             channelMapper.removeRecordPlan(channelIds);
         }else {
             channelMapper.addRecordPlan(channelIds, planId);
         }
+        // TODO  更新录像队列
+    }
+
+    @Override
+    public PageInfo<CommonGBChannel> queryChannelList(int page, int count, String query, Integer channelType, Boolean online, Integer planId, Boolean hasLink) {
+        PageHelper.startPage(page, count);
+        if (query != null) {
+            query = query.replaceAll("/", "//")
+                    .replaceAll("%", "/%")
+                    .replaceAll("_", "/_");
+        }
+        List<CommonGBChannel> all = channelMapper.queryForRecordPlanForWebList(planId, query, channelType, online, hasLink);
+        return new PageInfo<>(all);
+    }
 
+    @Override
+    public void linkAll(Integer planId) {
+        channelMapper.addRecordPlanForAll(planId);
+    }
+
+    @Override
+    public void cleanAll(Integer planId) {
+        channelMapper.removeRecordPlanByPlanId(planId);
     }
 }

src/main/java/com/genersoft/iot/vmp/storager/dao/RecordPlanMapper.java

@@ -10,7 +10,7 @@ import java.util.List;
 public interface RecordPlanMapper {
 
     @Insert(" <script>" +
-            "INSERT INTO wvp_cloud_record (" +
+            "INSERT INTO wvp_record_plan (" +
             " name," +
             " snap," +
             " create_time," +
@@ -25,15 +25,14 @@ public interface RecordPlanMapper {
     void add(RecordPlan plan);
 
     @Insert(" <script>" +
-            "INSERT INTO wvp_device_channel (" +
+            "INSERT INTO wvp_record_plan_item (" +
             "start_time," +
             "stop_time, " +
             "week_day," +
-            "create_time," +
-            "update_time) " +
+            "plan_id) " +
             "VALUES" +
-            "<foreach collection='commonGBChannels' index='index' item='item' separator=','> " +
-            "(#{item.startTime}, #{item.stopTime}, #{item.weekDay},#{item.planId},#{item.createTime},#{item.updateTime})" +
+            "<foreach collection='planItemList' index='index' item='item' separator=','> " +
+            "(#{item.startTime}, #{item.stopTime}, #{item.weekDay},#{planId})" +
             "</foreach> " +
             " </script>")
     void batchAddItem(@Param("planId") int planId, List<RecordPlanItem> planItemList);
@@ -42,7 +41,8 @@ public interface RecordPlanMapper {
     RecordPlan get(@Param("planId") Integer planId);
 
     @Select(" <script>" +
-            "select * from wvp_record_plan where  1=1" +
+            " SELECT wrp.*, (select count(1) from wvp_device_channel where record_plan_id = wrp.id) AS channelCount\n" +
+            " FROM wvp_record_plan wrp where  1=1" +
             " <if test='query != null'> AND (name LIKE concat('%',#{query},'%') escape '/' )</if> " +
             " </script>")
     List<RecordPlan> query(@Param("query") String query);
@@ -50,9 +50,12 @@ public interface RecordPlanMapper {
     @Update("UPDATE wvp_record_plan SET update_time=#{updateTime}, name=#{name}, snap=#{snap} WHERE id=#{id}")
     void update(RecordPlan plan);
 
-    @Delete("DELETE FROM wvp_record_plan WHERE id=#{id}")
+    @Delete("DELETE FROM wvp_record_plan WHERE id=#{planId}")
     void delete(@Param("planId") Integer planId);
 
+    @Select("select * from wvp_record_plan_item where  plan_id = #{planId}")
+    List<RecordPlanItem> getItemList(@Param("planId") Integer planId);
 
-    List<RecordPlanItem> getItemList(Integer planId);
+    @Delete("DELETE FROM wvp_record_plan_item WHERE plan_id = #{planId}")
+    void cleanItems(@Param("planId") Integer planId);
 }

src/main/java/com/genersoft/iot/vmp/vmanager/recordPlan/RecordPlanController.java

@@ -2,6 +2,8 @@ package com.genersoft.iot.vmp.vmanager.recordPlan;
 
 import com.genersoft.iot.vmp.conf.exception.ControllerException;
 import com.genersoft.iot.vmp.conf.security.JwtUtils;
+import com.genersoft.iot.vmp.gb28181.bean.CommonGBChannel;
+import com.genersoft.iot.vmp.gb28181.bean.PlatformChannel;
 import com.genersoft.iot.vmp.gb28181.service.IDeviceChannelService;
 import com.genersoft.iot.vmp.service.IRecordPlanService;
 import com.genersoft.iot.vmp.service.bean.RecordPlan;
@@ -15,6 +17,7 @@ import io.swagger.v3.oas.annotations.tags.Tag;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.util.Assert;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.ArrayList;
@@ -45,23 +48,31 @@ public class RecordPlanController {
     }
 
     @ResponseBody
-    @PostMapping("/linke")
+    @PostMapping("/link")
     @Operation(summary = "通道关联录制计划", security = @SecurityRequirement(name = JwtUtils.HEADER))
     @Parameter(name = "param", description = "通道关联录制计划", required = false)
-    public void linke(@RequestBody RecordPlanParam param) {
-        if (param.getChannelId() == null && param.getDeviceDbId() == null) {
+    public void link(@RequestBody RecordPlanParam param) {
+        if (param.getChannelIds() == null && param.getDeviceDbIds() == null) {
             throw new ControllerException(ErrorCode.ERROR100.getCode(), "通道ID和国标设备ID不可都为NULL");
         }
+        if (param.getAll() != null) {
+            if (param.getAll()) {
+                recordPlanService.linkAll(param.getPlanId());
+            }else {
+                recordPlanService.cleanAll(param.getPlanId());
+            }
+            return;
+        }
         List<Integer> channelIds = new ArrayList<>();
-        if (param.getChannelId() != null) {
-            channelIds.add(param.getChannelId());
+        if (param.getChannelIds() != null) {
+            channelIds.addAll(param.getChannelIds());
         }else {
-            List<Integer> chanelIdList = deviceChannelService.queryChaneIdListByDeviceDbId(param.getDeviceDbId());
+            List<Integer> chanelIdList = deviceChannelService.queryChaneIdListByDeviceDbIds(param.getDeviceDbIds());
             if (chanelIdList == null || chanelIdList.isEmpty()) {
                 channelIds = chanelIdList;
             }
         }
-        recordPlanService.linke(channelIds, param.getPlanId());
+        recordPlanService.link(channelIds, param.getPlanId());
     }
 
     @ResponseBody
@@ -88,11 +99,36 @@ public class RecordPlanController {
         return recordPlanService.query(page, count, query);
     }
 
+    @Operation(summary = "分页查询级联平台的所有所有通道", security = @SecurityRequirement(name = JwtUtils.HEADER))
+    @Parameter(name = "page", description = "当前页", required = true)
+    @Parameter(name = "count", description = "每页条数", required = true)
+    @Parameter(name = "planId", description = "录制计划ID")
+    @Parameter(name = "channelType", description = "通道类型， 0：国标设备，1：推流设备，2：拉流代理")
+    @Parameter(name = "query", description = "查询内容")
+    @Parameter(name = "online", description = "是否在线")
+    @Parameter(name = "hasLink", description = "是否已经关联")
+    @GetMapping("/channel/list")
+    @ResponseBody
+    public PageInfo<CommonGBChannel> queryChannelList(int page, int count,
+                                                      @RequestParam(required = false) Integer planId,
+                                                      @RequestParam(required = false) String query,
+                                                      @RequestParam(required = false) Integer channelType,
+                                                      @RequestParam(required = false) Boolean online,
+                                                      @RequestParam(required = false) Boolean hasLink) {
+
+        Assert.notNull(planId, "录制计划ID不可为NULL");
+        if (org.springframework.util.ObjectUtils.isEmpty(query)) {
+            query = null;
+        }
+
+        return recordPlanService.queryChannelList(page, count, query, channelType,  online, planId, hasLink);
+    }
+
     @ResponseBody
-    @PostMapping("/edit")
-    @Operation(summary = "编辑录制计划", security = @SecurityRequirement(name = JwtUtils.HEADER))
+    @PostMapping("/update")
+    @Operation(summary = "更新录制计划", security = @SecurityRequirement(name = JwtUtils.HEADER))
     @Parameter(name = "plan", description = "计划", required = true)
-    public void edit(@RequestBody RecordPlan plan) {
+    public void update(@RequestBody RecordPlan plan) {
         if (plan == null || plan.getId() == 0) {
             throw new ControllerException(ErrorCode.ERROR400);
         }

src/main/java/com/genersoft/iot/vmp/vmanager/recordPlan/bean/RecordPlanParam.java

@@ -12,10 +12,13 @@ import java.util.List;
 public class RecordPlanParam {
 
     @Schema(description = "关联的通道ID")
-    private Integer channelId;
+    private List<Integer> channelIds;
 
     @Schema(description = "关联的设备ID，会为设备下的所有通道关联此录制计划，channelId存在是此项不生效，")
-    private Integer deviceDbId;
+    private List<Integer> deviceDbIds;
+
+    @Schema(description = "全部关联/全部取消关联")
+    private Boolean all;
 
     @Schema(description = "录制计划ID, ID为空是删除关联的计划")
     private Integer planId;

web_src/src/components/RecordPLan.vue

@@ -9,82 +9,30 @@
             搜索:
             <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
                       prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
-
-            在线状态:
-            <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="online"
-                       placeholder="请选择"
-                       default-first-option>
-              <el-option label="全部" value=""></el-option>
-              <el-option label="在线" value="true"></el-option>
-              <el-option label="离线" value="false"></el-option>
-            </el-select>
-            录制计划:
-            <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="hasRecordPlan"
-                       placeholder="请选择"
-                       default-first-option>
-              <el-option label="全部" value=""></el-option>
-              <el-option label="已设置" value="true"></el-option>
-              <el-option label="未设置" value="false"></el-option>
-            </el-select>
-            类型:
-            <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList"
-                       v-model="channelType" placeholder="请选择"
-                       default-first-option>
-              <el-option label="全部" value=""></el-option>
-              <el-option label="国标设备" :value="0"></el-option>
-              <el-option label="推流设备" :value="1"></el-option>
-              <el-option label="拉流代理" :value="2"></el-option>
-            </el-select>
             <el-button size="mini" type="primary" @click="add()">
-              按国标设备添加
-            </el-button>
-            <el-button size="mini" type="danger" @click="remove()">
-              按国标设备移除
+              添加
             </el-button>
-            <el-button icon="el-icon-refresh-right" circle size="mini" @click="getChannelList()"></el-button>
+            <el-button icon="el-icon-refresh-right" circle size="mini" @click="getRecordPlanList()"></el-button>
           </div>
         </div>
       </div>
-      <el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
+      <el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="winHeight" style="width: 100%"
                 header-row-class-name="table-header" >
         <el-table-column type="selection" width="55" >
         </el-table-column>
-        <el-table-column prop="gbName" label="名称" min-width="180">
-        </el-table-column>
-        <el-table-column prop="gbDeviceId" label="编号" min-width="180">
+        <el-table-column prop="name" label="名称" >
         </el-table-column>
-        <el-table-column prop="gbManufacturer" label="厂家" min-width="100">
-        </el-table-column>
-
-        <el-table-column label="类型" min-width="100">
-          <template v-slot:default="scope">
-            <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" effect="plain" v-if="scope.row.gbDeviceDbId">国标设备</el-tag>
-              <el-tag size="medium" effect="plain" type="success" v-if="scope.row.streamPushId">推流设备</el-tag>
-              <el-tag size="medium" effect="plain" type="warning" v-if="scope.row.streamProxyId">拉流代理</el-tag>
-            </div>
-          </template>
+        <el-table-column prop="channelCount" label="关联通道" >
         </el-table-column>
-        <el-table-column label="状态" min-width="100">
-          <template v-slot:default="scope">
-            <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" v-if="scope.row.gbStatus === 'ON'">在线</el-tag>
-              <el-tag size="medium" type="info" v-if="scope.row.gbStatus !== 'ON'">离线</el-tag>
-            </div>
-          </template>
+        <el-table-column prop="updateTime" label="更新时间">
         </el-table-column>
-        <el-table-column label="录制计划" min-width="100">
-          <template v-slot:default="scope">
-            <div slot="reference" class="name-wrapper">
-              <el-tag size="medium" effect="dark" v-if="scope.row.recordPlanId">已设置</el-tag>
-              <el-tag size="medium" effect="dark" v-else>未设置</el-tag>
-            </div>
-          </template>
+        <el-table-column prop="createTime" label="创建时间">
         </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
+        <el-table-column label="操作" width="300" fixed="right">
           <template v-slot:default="scope">
-            <el-button size="medium" icon="el-icon-edit" type="text" v-if="scope.row.recordPlan" @click="edit(scope.row)">编辑</el-button>
-            <el-button size="medium" icon="el-icon-plus" type="text" v-else @click="edit(scope.row)">添加</el-button>
+            <el-button size="medium" icon="el-icon-link" type="text" @click="link(scope.row)">关联通道</el-button>
+            <el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
+            <el-button size="medium" icon="el-icon-delete" style="color: #f56c6c" type="text" @click="deletePlan(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -99,37 +47,31 @@
         :total="total">
       </el-pagination>
     <editRecordPlan ref="editRecordPlan"></editRecordPlan>
+    <LinkChannelRecord ref="linkChannelRecord"></LinkChannelRecord>
   </div>
 </template>
 
 <script>
 import uiHeader from '../layout/UiHeader.vue'
 import EditRecordPlan from "./dialog/editRecordPlan.vue";
+import LinkChannelRecord from "./dialog/linkChannelRecord.vue";
 
 export default {
   name: 'recordPLan',
   components: {
     EditRecordPlan,
+    LinkChannelRecord,
     uiHeader,
   },
   data() {
     return {
-      channelList: [],
+      recordPlanList: [],
       searchSrt: "",
-      channelType: "",
-      online: "",
-      hasRecordPlan: "",
-      hasGroup: "false",
       winHeight: window.innerHeight - 180,
       currentPage: 1,
       count: 15,
       total: 0,
       loading: false,
-      loadSnap: {},
-      groupId: "",
-      businessGroup: "",
-      regionParents: ["请选择虚拟组织"],
-      multipleSelection: []
     };
   },
 
@@ -140,7 +82,7 @@ export default {
   },
   methods: {
     initData: function () {
-      this.getChannelList();
+      this.getRecordPlanList();
     },
     currentChange: function (val) {
       this.currentPage = val;
@@ -148,27 +90,24 @@ export default {
     },
     handleSizeChange: function (val) {
       this.count = val;
-      this.getChannelList();
+      this.getRecordPlanList();
     },
-    getChannelList: function () {
+    getRecordPlanList: function () {
       this.$axios({
         method: 'get',
-        url: `/api/common/channel/list`,
+        url: `/api/record/plan/query`,
         params: {
           page: this.currentPage,
           count: this.count,
           query: this.searchSrt,
-          online: this.online,
-          hasRecordPlan: this.hasRecordPlan,
-          channelType: this.channelType,
         }
       }).then((res) => {
         if (res.data.code === 0) {
           this.total = res.data.data.total;
-          this.channelList = res.data.data.list;
+          this.recordPlanList = res.data.data.list;
           // 防止出现表格错位
           this.$nextTick(() => {
-            this.$refs.channelListTable.doLayout();
+            this.$refs.recordPlanListTable.doLayout();
           })
         }
 
@@ -188,14 +127,56 @@ export default {
     refresh: function () {
       this.initData();
     },
-    onChannelChange: function (deviceId) {
-      //
+    add: function () {
+      this.$refs.editRecordPlan.openDialog(null, ()=>{
+        this.initData()
+      })
+    },
+    edit: function (plan) {
+      this.$refs.editRecordPlan.openDialog(plan, ()=>{
+        this.initData()
+      })
     },
-    edit: function (channel) {
-      this.$refs.editRecordPlan.openDialog(channel, ()=>{
+    link: function (plan) {
+      this.$refs.linkChannelRecord.openDialog(plan.id, ()=>{
         this.initData()
       })
     },
+    deletePlan: function (plan) {
+      this.$confirm('确定删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'delete',
+          url: "/api/record/plan/delete",
+          params: {
+            planId: plan.id,
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.$message({
+              showClose: true,
+              message: '删除成功',
+              type: 'success',
+            });
+            this.initData();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+      }).catch(() => {
+
+      });
+
+    },
   }
 };
 </script>

web_src/src/components/dialog/editRecordPlan.vue

@@ -10,8 +10,13 @@
       @close="close()"
     >
       <div id="shared" style="margin-right: 20px;">
-        <ByteWeektimePicker v-model="byteTime" name="name"/>
         <el-form >
+          <el-form-item label="名称">
+            <el-input type="text" v-model="planName"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <ByteWeektimePicker v-model="byteTime" name="name"/>
+          </el-form-item>
           <el-form-item>
             <div style="float: right; margin-top: 20px">
               <el-button type="primary" @click="onSubmit">保存</el-button>
@@ -38,67 +43,111 @@ export default {
     return {
       options: [],
       loading: false,
+      edit: false,
+      planName: null,
+      id: null,
       showDialog: false,
-      channel: "",
-      deviceDbId: "",
       endCallback: "",
       byteTime: "",
-      planList: [],
     };
   },
   methods: {
-    openDialog: function (channel, deviceDbId, endCallback) {
-      this.channel = channel;
-      this.deviceDbId = deviceDbId;
+    openDialog: function (recordPlan, endCallback) {
+      console.log(recordPlan);
       this.endCallback = endCallback;
       this.showDialog = true;
       this.byteTime= "";
-      if (channel.recordPlanId) {
-        // 请求plan信息
+      if (recordPlan) {
+        this.edit = true
+        this.planName = recordPlan.name
+        this.id = recordPlan.id
+        this.$axios({
+          method: 'get',
+          url: "/api/record/plan/get",
+          params: {
+            planId: recordPlan.id,
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.byteTime = this.plan2Byte(res.data.data.planItemList)
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
 
       }
     },
     onSubmit: function () {
       let planList = this.byteTime2PlanList();
-      console.log(planList)
-      this.$axios({
-        method: 'post',
-        url: "/api/record/plan/add",
-        params: {
-          channelId: this.channel?this.channel.id:null,
-          deviceDbId: this.deviceDbId,
-          planList: planList
-        }
-      }).then((res) => {
-        if (res.data.code === 0) {
-          this.$message({
-            showClose: true,
-            message: '添加成功',
-            type: 'success',
-          });
-          this.showDialog = false;
-          this.endCallback()
-        } else {
-          this.$message({
-            showClose: true,
-            message: res.data.msg,
-            type: 'error'
-          });
-        }
-      }).catch((error) => {
-        console.error(error)
-      });
+      if (!this.edit) {
+        this.$axios({
+          method: 'post',
+          url: "/api/record/plan/add",
+          data: {
+            name: this.planName,
+            planItemList: planList
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.$message({
+              showClose: true,
+              message: '添加成功',
+              type: 'success',
+            });
+            this.showDialog = false;
+            this.endCallback()
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+      }else {
+        this.$axios({
+          method: 'post',
+          url: "/api/record/plan/update",
+          data: {
+            id: this.id,
+            name: this.planName,
+            planItemList: planList
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.$message({
+              showClose: true,
+              message: '更新成功',
+              type: 'success',
+            });
+            this.showDialog = false;
+            this.endCallback()
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+      }
+
     },
     close: function () {
-      this.channel = "";
-      this.deviceDbId = "";
       this.showDialog = false;
+      this.id = null
+      this.planName = null
+      this.byteTime = ""
+      this.endCallback = ""
       if(this.endCallback) {
         this.endCallback();
       }
     },
     byteTime2PlanList() {
-      this.planList = []
       if (this.byteTime.length === 0) {
         return;
       }
@@ -114,8 +163,8 @@ export default {
           continue
         }
         for (let j = 0; j < planArray.length; j++) {
-          console.log(planArray[j])
           planList.push({
+            id: this.id,
             startTime: planArray[j].startTime,
             stopTime: planArray[j].stopTime,
             weekDay: week
@@ -149,6 +198,27 @@ export default {
         }
       }
       return result;
+    },
+    plan2Byte(planList) {
+      console.log(planList);
+      let byte = ""
+      let indexArray = {}
+      for (let i = 0; i < planList.length; i++) {
+        let index = planList[i].startTime/1000/60/30
+        let endIndex = planList[i].stopTime/1000/60/30
+        for (let j = index; j <= endIndex; j++) {
+          indexArray[j + (planList[i].weekDay - 1 )*48] = j + i*48
+        }
+      }
+      console.log(indexArray)
+      for (let i = 0; i < 336; i++) {
+        if (indexArray[i]){
+          byte += "1"
+        }else {
+          byte += "0"
+        }
+      }
+      return byte
     }
   },
 };

web_src/src/components/dialog/linkChannelRecord.vue

@@ -0,0 +1,500 @@
+<template>
+  <div id="linkChannelRecord" style="width: 100%;  background-color: #FFFFFF; display: grid; grid-template-columns: 200px auto;">
+    <el-dialog title="通道共享" v-loading="dialogLoading" v-if="showDialog" top="2rem" width="80%" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
+      <div style="display: grid; grid-template-columns: 100px auto;">
+        <el-tabs tab-position="left" style="" v-model="hasLink" @tab-click="search">
+          <el-tab-pane label="未关联" name="false"></el-tab-pane>
+          <el-tab-pane label="已关联" name="true"></el-tab-pane>
+        </el-tabs>
+        <div>
+          <div class="page-header">
+            <div class="page-header-btn" >
+              <div  style="display: inline;">
+                搜索:
+                <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
+                          prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
+
+                在线状态:
+                <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择"
+                           default-first-option>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="在线" value="true"></el-option>
+                  <el-option label="离线" value="false"></el-option>
+                </el-select>
+                类型:
+                <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="channelType" placeholder="请选择"
+                           default-first-option>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="国标设备" :value="0"></el-option>
+                  <el-option label="推流设备" :value="1"></el-option>
+                  <el-option label="拉流代理" :value="2"></el-option>
+                </el-select>
+                <el-button v-if="hasLink !=='true'" size="mini" type="primary" @click="add()">
+                  添加
+                </el-button>
+                <el-button v-if="hasLink ==='true'" size="mini" type="danger" @click="remove()">
+                  移除
+                </el-button>
+                <el-button size="mini" v-if="hasLink !=='true'" @click="addByDevice()">按设备添加</el-button>
+                <el-button size="mini" v-if="hasLink ==='true'" @click="removeByDevice()">按设备移除</el-button>
+                <el-button size="mini" v-if="hasLink !=='true'" @click="addAll()">全部添加</el-button>
+                <el-button size="mini" v-if="hasLink ==='true'" @click="removeAll()">全部移除</el-button>
+                <el-button size="mini" @click="getChannelList()">刷新</el-button>
+              </div>
+            </div>
+          </div>
+          <el-table size="small"  ref="channelListTable" :data="channelList" :height="winHeight"
+                    header-row-class-name="table-header" @selection-change="handleSelectionChange" >
+            <el-table-column type="selection" width="55" >
+            </el-table-column>
+            <el-table-column prop="gbName" label="名称" min-width="180">
+            </el-table-column>
+            <el-table-column prop="gbDeviceId" label="编号" min-width="180">
+            </el-table-column>
+            <el-table-column prop="gbManufacturer" label="厂家" min-width="100">
+            </el-table-column>
+            <el-table-column label="类型" min-width="100">
+              <template v-slot:default="scope">
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium" effect="plain" v-if="scope.row.gbDeviceDbId">国标设备</el-tag>
+                  <el-tag size="medium" effect="plain" type="success" v-if="scope.row.streamPushId">推流设备</el-tag>
+                  <el-tag size="medium" effect="plain" type="warning" v-if="scope.row.streamProxyId">拉流代理</el-tag>
+                </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 size="medium" v-if="scope.row.gbStatus === 'ON'">在线</el-tag>
+                  <el-tag size="medium" type="info" v-if="scope.row.gbStatus !== 'ON'">离线</el-tag>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            style="text-align: right"
+            @size-change="handleSizeChange"
+            @current-change="currentChange"
+            :current-page="currentPage"
+            :page-size="count"
+            :page-sizes="[15, 25, 35, 50]"
+            layout="total, sizes, prev, pager, next"
+            :total="total">
+          </el-pagination>
+          <gbDeviceSelect ref="gbDeviceSelect"></gbDeviceSelect>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import gbDeviceSelect from "./GbDeviceSelect.vue";
+
+export default {
+  name: 'linkChannelRecord',
+  components: {gbDeviceSelect},
+  data() {
+    return {
+      dialogLoading: false,
+      showDialog: false,
+      chooseData: {},
+      channelList: [],
+      searchSrt: "",
+      channelType: "",
+      online: "",
+      hasLink: "false",
+      winHeight: window.innerHeight - 250,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      loading: false,
+      planId: null,
+      loadSnap: {},
+      multipleSelection: []
+    };
+  },
+
+  created() {
+    this.initData();
+  },
+  destroyed() {},
+  methods: {
+    openDialog(planId, closeCallback) {
+      this.planId = planId
+      this.showDialog = true
+      this.closeCallback = closeCallback
+    },
+    initData: function () {
+      this.getChannelList();
+    },
+    currentChange: function (val) {
+      this.currentPage = val;
+      this.initData();
+    },
+    handleSizeChange: function (val) {
+      this.count = val;
+      this.getChannelList();
+    },
+    getChannelList: function () {
+      this.$axios({
+        method: 'get',
+        url: `/api/record/plan/channel/list`,
+        params: {
+          page: this.currentPage,
+          count: this.count,
+          query: this.searchSrt,
+          online: this.online,
+          channelType: this.channelType,
+          planId: this.planId,
+          hasLink: this.hasLink
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.total = res.data.data.total;
+          this.channelList = res.data.data.list;
+          // 防止出现表格错位
+          this.$nextTick(() => {
+            this.$refs.channelListTable.doLayout();
+          })
+        }
+
+      }).catch((error)=> {
+
+        console.log(error);
+      });
+    },
+    handleSelectionChange: function (val){
+      this.multipleSelection = val;
+    },
+    add: function (row) {
+      let channels = []
+      for (let i = 0; i < this.multipleSelection.length; i++) {
+        channels.push(this.multipleSelection[i].gbId)
+      }
+      if (channels.length === 0) {
+        this.$message.info({
+          showClose: true,
+          message: "请选择通道"
+        })
+        return;
+      }
+      this.loading = true
+
+      this.$axios({
+        method: 'post',
+        url: `/api/record/plan/link`,
+        data: {
+          planId: this.planId,
+          all: true,
+          channelIds: channels
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.$message.success({
+            showClose: true,
+            message: "保存成功"
+          })
+          this.getChannelList()
+        }else {
+          this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+        }
+        this.loading = false
+      }).catch((error)=> {
+        this.$message.error({
+            showClose: true,
+            message: error
+          })
+        this.loading = false
+      });
+    },
+    addAll: function (row) {
+      this.$confirm("确定全部添加？", '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true
+
+        this.$axios({
+          method: 'post',
+          url: `/api/platform/channel/add`,
+          data: {
+            platformId: this.platformId,
+            all: true
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            this.$message.success({
+            showClose: true,
+            message: "保存成功"
+          })
+            this.getChannelList()
+          }else {
+            this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+          }
+          this.loading = false
+        }).catch((error)=> {
+          this.$message.error({
+            showClose: true,
+            message: error
+          })
+          this.loading = false
+        });
+      }).catch(() => {
+      });
+    },
+
+    addByDevice: function (row) {
+      this.$refs.gbDeviceSelect.openDialog((rows)=>{
+        let deviceIds = []
+        for (let i = 0; i < rows.length; i++) {
+          deviceIds.push(rows[i].id)
+        }
+        this.$axios({
+          method: 'post',
+          url: `/api/platform/channel/device/add`,
+          data: {
+            platformId: this.platformId,
+            deviceIds: deviceIds,
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            this.$message.success({
+              showClose: true,
+              message: "保存成功"
+            })
+            this.initData()
+          }else {
+            this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+          }
+        }).catch((error)=> {
+          this.$message.error({
+            showClose: true,
+            message: error
+          })
+          this.loading = false
+        });
+      })
+    },
+
+    removeByDevice: function (row) {
+      this.$refs.gbDeviceSelect.openDialog((rows)=>{
+        let deviceIds = []
+        for (let i = 0; i < rows.length; i++) {
+          deviceIds.push(rows[i].id)
+        }
+        this.$axios({
+          method: 'post',
+          url: `/api/platform/channel/device/remove`,
+          data: {
+            platformId: this.platformId,
+            deviceIds: deviceIds,
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            this.$message.success({
+              showClose: true,
+              message: "保存成功"
+            })
+            this.initData()
+          }else {
+            this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+          }
+        }).catch((error)=> {
+          this.$message.error({
+            showClose: true,
+            message: error
+          })
+          this.loading = false
+        });
+      })
+    },
+    remove: function (row) {
+      let channels = []
+      for (let i = 0; i < this.multipleSelection.length; i++) {
+        channels.push(this.multipleSelection[i].gbId)
+      }
+      if (channels.length === 0) {
+        this.$message.info({
+          showClose: true,
+          message: "请选择通道"
+        })
+        return;
+      }
+      this.loading = true
+
+      this.$axios({
+        method: 'delete',
+        url: `/api/platform/channel/remove`,
+        data: {
+          platformId: this.platformId,
+          channelIds: channels
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.$message.success({
+            showClose: true,
+            message: "保存成功"
+          })
+          this.getChannelList()
+        }else {
+          this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+        }
+        this.loading = false
+      }).catch((error)=> {
+        this.$message.error({
+            showClose: true,
+            message: error
+          })
+        this.loading = false
+      });
+    },
+    removeAll: function (row) {
+
+      this.$confirm("确定全部移除？", '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true
+        this.$axios({
+          method: 'delete',
+          url: `/api/platform/channel/remove`,
+          data: {
+            platformId: this.platformId,
+            all: true
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            this.$message.success({
+            showClose: true,
+            message: "保存成功"
+          })
+            this.getChannelList()
+          }else {
+            this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+          }
+          this.loading = false
+        }).catch((error)=> {
+          this.$message.error({
+            showClose: true,
+            message: error
+          })
+          this.loading = false
+        });
+      }).catch(() => {
+      });
+
+    },
+    saveCustom: function (row) {
+      this.$axios({
+        method: 'post',
+        url: `/api/platform/channel/custom/update`,
+        data: row
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.$message.success({
+            showClose: true,
+            message: "保存成功"
+          })
+          this.initData()
+        }else {
+          this.$message.error({
+            showClose: true,
+            message: res.data.msg
+          })
+        }
+      }).catch((error)=> {
+        this.$message.error({
+          showClose: true,
+          message: error
+        })
+      });
+    },
+    search: function () {
+      this.currentPage = 1;
+      this.total = 0;
+      this.initData();
+    },
+    refresh: function () {
+      this.initData();
+    },
+  }
+};
+</script>
+
+<style>
+.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;
+}
+</style>