人工智能分析 gengdidi

danger-manage-admin/src/main/java/com/zehong/web/controller/system/TDeviceAlarmInfoController.java

@@ -111,4 +111,9 @@ public class TDeviceAlarmInfoController extends BaseController
     {
         return toAjax(tDeviceAlarmInfoService.deleteTDeviceAlarmInfoByIds(alarmIds));
     }
+
+    @GetMapping("/sumAlarmTotal")
+    public AjaxResult sumAlarmTotal(){
+        return AjaxResult.success(tDeviceAlarmInfoService.sumAlarmTotal());
+    }
 }

danger-manage-admin/src/main/java/com/zehong/web/controller/videomonitor/SubscriptionEventController.java

+package com.zehong.web.controller.videomonitor;
+
+import cn.hutool.core.util.ObjectUtil;
+import com.alibaba.fastjson.JSON;
+import com.github.pagehelper.util.StringUtil;
+import com.zehong.common.core.domain.AjaxResult;
+import com.zehong.common.core.redis.RedisCache;
+import com.zehong.system.domain.TDeviceAlarmInfo;
+import com.zehong.system.service.ITDeviceAlarmInfoService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Date;
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * @author geng
+ * 订阅海康事件信息接收
+ */
+@RestController
+@RequestMapping("/subscription")
+public class SubscriptionEventController {
+
+    private Logger logger = LoggerFactory.getLogger(SubscriptionEventController.class);
+
+    @Autowired
+    private RedisCache redisCache;
+    @Autowired
+    private ITDeviceAlarmInfoService tDeviceAlarmInfoService;
+
+    /**
+     * 烟雾检测订阅事件
+     * @param smoke 入参
+     * @return AjaxResult
+     */
+    @PostMapping("/smokeCheck")
+    public AjaxResult smokeCheck(@RequestBody Map<String,Object> smoke){
+        logger.info("烟雾检测信息："+ JSON.toJSONString(smoke));
+        return AjaxResult.success();
+    }
+
+    /**
+     * 烟火检测订阅事件
+     * @param pyrotechnic 入参
+     * @return AjaxResult
+     */
+    @PostMapping("/pyrotechnicCheck")
+    public AjaxResult pyrotechnicCheck(@RequestBody Map<String,Object> pyrotechnic){
+        logger.info("烟火检测信息："+ JSON.toJSONString(pyrotechnic));
+        return AjaxResult.success();
+    }
+
+    /**
+     * 设置订阅事件缓存
+     * @param deviceCode 设备编号
+     * @param imageUrl 报警图片信息
+     * @return boolean
+     */
+    private boolean getEventCacheInfo(String deviceCode,String imageUrl){
+        Map<String,TDeviceAlarmInfo> tDeviceAlarmInfoCache = redisCache.getCacheObject("dangroueSubsciription");
+        if(ObjectUtil.isNotNull(tDeviceAlarmInfoCache) && tDeviceAlarmInfoCache.containsKey(deviceCode)){
+            //更新设备预警图像信息
+            if(StringUtil.isNotEmpty(imageUrl)){
+                tDeviceAlarmInfoCache.get(deviceCode).setAlarmImageUrl(imageUrl);
+            }
+            tDeviceAlarmInfoCache.get(deviceCode).setAlarmBeginTime(new Date());
+            redisCache.setCacheObject("dangrousSubsciription",tDeviceAlarmInfoCache);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * 设置订阅事件缓存
+     * @param deviceCode 设备编号
+     * @param imageUrl 报警图片信息
+     *
+     * @return boolean
+     */
+    private boolean setEventCacheInfo(String deviceCode,String imageUrl) throws Exception {
+        if(StringUtil.isEmpty(deviceCode)){
+            throw new Exception("设备编号为空！");
+        }
+        Map<String,TDeviceAlarmInfo> tDeviceAlarmInfoCache = redisCache.getCacheObject("dangrousSubsciription");
+        if(null !=tDeviceAlarmInfoCache && tDeviceAlarmInfoCache.containsKey(deviceCode)){
+            //更新设备预警图像信息
+            if(StringUtil.isNotEmpty(imageUrl)){
+                tDeviceAlarmInfoCache.get(deviceCode).setAlarmImageUrl(imageUrl);
+            }
+            tDeviceAlarmInfoCache.get(deviceCode).setAlarmBeginTime(new Date());
+            redisCache.setCacheObject("dangrousSubsciription",tDeviceAlarmInfoCache);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * 初始化报警信息
+     * @param deviceCode 设备编号
+     * @param imageUrl 报警图片
+     * @param type 报警类型
+     * @return TDeviceAlarmInfo
+     */
+    private TDeviceAlarmInfo initAlarmInfo(String deviceCode,String imageUrl,int type){
+        TDeviceAlarmInfo alarmInfo = new TDeviceAlarmInfo();
+        alarmInfo.setRelationDeviceId(deviceCode);
+        alarmInfo.setAlarmContent(type);
+        alarmInfo.setAlarmBeginTime(new Date());
+        alarmInfo.setAlarmStatus("0");
+        if(StringUtil.isNotEmpty(imageUrl)){
+            alarmInfo.setAlarmImageUrl(imageUrl);
+        }
+        tDeviceAlarmInfoService.insertTDeviceAlarmInfo(alarmInfo);
+        Map<String,TDeviceAlarmInfo> tDeviceAlarmInfoCache = redisCache.getCacheObject("dangrousSubsciription");
+        if(null != tDeviceAlarmInfoCache){
+            tDeviceAlarmInfoCache.put(deviceCode,alarmInfo);
+            redisCache.setCacheObject("dangrousSubsciription",tDeviceAlarmInfoCache);
+        }else{
+            Map<String,TDeviceAlarmInfo> alarmInfoMap = new HashMap<>(16);
+            alarmInfoMap.put(deviceCode,alarmInfo);
+            redisCache.setCacheObject("dangrousSubsciription",alarmInfoMap);
+        }
+        return alarmInfo;
+    }
+
+}

danger-manage-common/pom.xml

@@ -119,6 +119,18 @@
             <artifactId>javax.servlet-api</artifactId>
         </dependency>
 
+        <!-- websocket 支持 -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-websocket</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>cn.hutool</groupId>
+            <artifactId>hutool-all</artifactId>
+            <version>5.7.12</version>
+        </dependency>
+
     </dependencies>
 
 </project>
\ No newline at end of file

danger-manage-common/src/main/java/com/zehong/common/config/WebSocketConfig.java

+package com.zehong.common.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.socket.server.standard.ServerEndpointExporter;
+
+@Configuration
+public class WebSocketConfig {
+    @Bean
+    public ServerEndpointExporter serverEndpointExporter() {
+        return new ServerEndpointExporter();
+    }
+
+}

danger-manage-quartz/src/main/java/com/zehong/quartz/task/SubscriptEventTask.java

+package com.zehong.quartz.task;
+
+import com.zehong.common.core.redis.RedisCache;
+import com.zehong.system.domain.TDeviceAlarmInfo;
+import com.zehong.system.service.ITDeviceAlarmInfoService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Component;
+import java.util.Date;
+import java.util.Iterator;
+import java.util.Map;
+
+/**
+ * @author geng
+ * 订阅事件job
+ */
+
+@Component("subscriptEventTask")
+public class SubscriptEventTask {
+
+    private Logger logger = LoggerFactory.getLogger(SubscriptEventTask.class);
+
+    @Autowired
+    private RedisCache redisCache;
+
+    @Autowired
+    private ITDeviceAlarmInfoService tDeviceAlarmInfoService;
+
+    /**
+     *  自动消警
+     */
+    public void automaticAlarmElimination(){
+        try {
+            logger.info("--------------- 自动消警开始 -------------");
+            //获取缓存信息
+            Map<String,TDeviceAlarmInfo> tDeviceAlarmInfoCache = redisCache.getCacheObject("dangrousSubsciription");
+            Iterator<Map.Entry<String, TDeviceAlarmInfo>> it = tDeviceAlarmInfoCache.entrySet().iterator();
+            boolean hasEndAlarm = false;
+            while(it.hasNext()){
+                TDeviceAlarmInfo alarmInfo = it.next().getValue();
+                Date day=new Date();
+                long timeSpace = (day.getTime() - alarmInfo.getAlarmBeginTime().getTime()) /(60 * 1000) ;
+                if(timeSpace > 5){
+                    TDeviceAlarmInfo alarm = tDeviceAlarmInfoService.selectTDeviceAlarmInfoById(alarmInfo.getAlarmId());
+                    if("0".equals(alarm.getAlarmStatus())){
+                        //更新报警结束时间
+                        alarmInfo.setAlarmEndTime(new Date());
+                        alarmInfo.setAlarmStatus("1");
+                        tDeviceAlarmInfoService.updateTDeviceAlarmInfo(alarmInfo);
+                    }
+                    //清除缓存
+                    it.remove();
+                    hasEndAlarm = true;
+                }
+            }
+            if(hasEndAlarm){
+                redisCache.setCacheObject("dangrousSubsciription",tDeviceAlarmInfoCache);
+            }
+
+        }catch (Exception e){
+            logger.error("自动消警开始失败：" + e);
+        }
+    }
+}

danger-manage-system/src/main/java/com/zehong/system/domain/WebSocketBean.java

+package com.zehong.system.domain;
+
+import javax.websocket.Session;
+import java.util.concurrent.atomic.AtomicInteger;
+
+/**
+ * <websocket信息对象>
+ * <用于存储secket连接信息>
+ * @author wzh
+ * @version 2018-07-08 18:49
+ * @see [相关类/方法] (可选)
+ **/
+public class WebSocketBean {
+
+    /**
+     * 连接session对象
+     */
+    private Session session;
+
+    /**
+     * 连接错误次数
+     */
+    private AtomicInteger erroerLinkCount = new AtomicInteger(0);
+
+    public int getErroerLinkCount() {
+        // 线程安全,以原子方式将当前值加1，注意：这里返回的是自增前的值
+        return erroerLinkCount.getAndIncrement();
+    }
+
+    public void cleanErrorNum()
+    {
+        // 清空计数
+        erroerLinkCount = new AtomicInteger(0);
+    }
+
+    public Session getSession() {
+        return session;
+    }
+
+    public void setSession(Session session) {
+        this.session = session;
+    }
+
+}
\ No newline at end of file

danger-manage-system/src/main/java/com/zehong/system/mapper/TDeviceAlarmInfoMapper.java

@@ -83,4 +83,22 @@ public interface TDeviceAlarmInfoMapper
      * @return
      */
     public List<Map<String,Object>> selectEveryDay();
+
+    /**
+     * 预警年累计
+     * @return
+     */
+    int sumAlarmByYear();
+
+    /**
+     * 预警月累计
+     * @return
+     */
+    int sumAlarmByMonth();
+
+    /**
+     * 预警日累计
+     * @return
+     */
+    int sumAlarmByDay();
 }

danger-manage-system/src/main/java/com/zehong/system/service/ITDeviceAlarmInfoService.java

@@ -66,4 +66,10 @@ public interface ITDeviceAlarmInfoService
      * @return
      */
     public Map<String,Object> selectStatistics();
+
+    /**
+     * 预警累计量统计
+     * @return
+     */
+    Map<String,Integer> sumAlarmTotal();
 }

danger-manage-system/src/main/java/com/zehong/system/service/WebSocketServer.java

+package com.zehong.system.service;
+
+import javax.websocket.EndpointConfig;
+import javax.websocket.Session;
+
+/**
+ * <基于javax websocket通讯>
+ * <功能详细描述>
+ * @author wzh
+ * @version 2018-07-08 17:11
+ * @see [相关类/方法] (可选)
+ **/
+public interface WebSocketServer {
+
+    /**
+     * 连接建立成功调用的方法
+     * @param session session 对象
+     */
+    public void onOpen(Session session, EndpointConfig config);
+
+    /**
+     * 断开连接方法
+     */
+    public void onClose(Session session);
+
+    /**
+     * 收到客户端消息后调用的方法
+     * @param session session 对象
+     * @param message 返回客户端的消息
+     */
+    public void onMessage(Session session, String message);
+
+    /**
+     * 发生异常时触发的方法
+     * @param session session 对象
+     * @param throwable 抛出的异常
+     */
+    public void onError(Session session, Throwable throwable);
+
+    /**
+     * 向单个客户端发送消息
+     * @param session session 对象
+     * @param message 发送给客户端的消息
+     */
+    public void sendMessage(Session session, String message);
+
+    /**
+     * 向所有在线用户群发消息
+     * @param message 发送给客户端的消息
+     */
+    public void batchSendMessage(String message);
+}
\ No newline at end of file

danger-manage-system/src/main/java/com/zehong/system/service/impl/TDeviceAlarmInfoServiceImpl.java

@@ -177,4 +177,17 @@ public class TDeviceAlarmInfoServiceImpl implements ITDeviceAlarmInfoService
         }
         return list;
     }
+
+    /**
+     * 预警累计量统计
+     * @return
+     */
+    @Override
+    public Map<String,Integer> sumAlarmTotal(){
+        Map<String,Integer> total = new HashMap<>();
+        total.put("yearTotal",tDeviceAlarmInfoMapper.sumAlarmByYear());
+        total.put("monthTotal",tDeviceAlarmInfoMapper.sumAlarmByMonth());
+        total.put("dayTotal",tDeviceAlarmInfoMapper.sumAlarmByDay());
+        return total;
+    }
 }

danger-manage-system/src/main/java/com/zehong/system/service/impl/WebSocketServiceImpl.java

+package com.zehong.system.service.impl;
+
+import com.zehong.system.domain.WebSocketBean;
+import com.zehong.system.service.WebSocketServer;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Component;
+
+import javax.websocket.*;
+import javax.websocket.server.ServerEndpoint;
+import java.util.Map;
+import java.util.Set;
+import java.util.concurrent.ConcurrentHashMap;
+
+/**
+ * <基于javax websocket通讯>
+ * <各个方法的参数都是可以根据项目的实际情况改的>
+ * @author wzh
+ * @version 2018-07-08 17:11
+ * @see [相关类/方法] (可选)
+ **/
+@ServerEndpoint(value = "/websocketServer")
+@Component("webSocketService")
+public class WebSocketServiceImpl implements WebSocketServer {
+
+    private Logger log = LoggerFactory.getLogger(WebSocketServiceImpl.class);
+
+    /**
+     * 错误最大重试次数
+     */
+    private static final int MAX_ERROR_NUM = 10;
+
+    /**
+     * 用来存放每个客户端对应的webSocket对象。
+     */
+    private static Map<String,WebSocketBean> webSocketInfo;
+
+    static
+    {
+        // concurrent包的线程安全map
+        webSocketInfo = new ConcurrentHashMap<>();
+    }
+
+    @OnOpen
+    @Override
+    public void onOpen(Session session, EndpointConfig config) {
+
+        // 如果是session没有激活的情况，就是没有请求获取或session，这里可能会取出空，需要实际业务处理
+       /* HttpSession httpSession= (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
+        if(httpSession != null)
+        {
+            log.info("获取到httpsession" + httpSession.getId());
+        }else {
+            log.error("未获取到httpsession");
+        }*/
+
+        // 连接成功当前对象放入websocket对象集合
+        WebSocketBean bean = new WebSocketBean();
+        bean.setSession(session);
+        webSocketInfo.put(session.getId(),bean);
+
+        log.info("客户端连接服务器session id :"+session.getId()+"，当前连接数：" + webSocketInfo.size());
+    }
+
+    @OnClose
+    @Override
+    public void onClose(Session session) {
+
+        // 客户端断开连接移除websocket对象
+        webSocketInfo.remove(session.getId());
+        log.info("客户端断开连接，当前连接数：" + webSocketInfo.size());
+
+    }
+
+    @OnMessage
+    @Override
+    public void onMessage(Session session, String message) {
+
+        log.info("客户端 session id: "+session.getId()+"，消息:" + message);
+
+        // 此方法为客户端给服务器发送消息后进行的处理，可以根据业务自己处理，这里返回页面
+        sendMessage(session, "服务端返回" + message);
+
+    }
+
+    @OnError
+    @Override
+    public void onError(Session session, Throwable throwable) {
+
+        log.error("发生错误"+ throwable.getMessage(),throwable);
+    }
+
+    @Override
+    public void sendMessage(Session session, String message) {
+
+        try
+        {
+            // 发送消息
+            session.getBasicRemote().sendText(message);
+
+            // 清空错误计数
+            webSocketInfo.get(session.getId()).cleanErrorNum();
+        }
+        catch (Exception e)
+        {
+            log.error("发送消息失败"+ e.getMessage(),e);
+            int errorNum = webSocketInfo.get(session.getId()).getErroerLinkCount();
+
+            // 小于最大重试次数重发
+            if(errorNum <= MAX_ERROR_NUM)
+            {
+                sendMessage(session, message);
+            }
+            else{
+                log.error("发送消息失败超过最大次数");
+                // 清空错误计数
+                webSocketInfo.get(session.getId()).cleanErrorNum();
+            }
+        }
+    }
+
+    @Override
+    public void batchSendMessage(String message) {
+        Set<Map.Entry<String, WebSocketBean>> set = webSocketInfo.entrySet();
+        for (Map.Entry<String, WebSocketBean> map : set)
+        {
+            sendMessage(map.getValue().getSession(),message);
+        }
+    }
+}

danger-manage-system/src/main/resources/mapper/system/TDeviceAlarmInfoMapper.xml

@@ -39,6 +39,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="alarmEndTime != null "> and alarm_end_time = #{alarmEndTime}</if>
             <if test="alarmStatus != null  and alarmStatus != ''"> and alarm_status = #{alarmStatus}</if>
         </where>
+        ORDER BY create_time DESC
     </select>
     
     <select id="selectTDeviceAlarmInfoById" parameterType="Long" resultMap="TDeviceAlarmInfoResult">
@@ -136,4 +137,29 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         alarm_begin_time > (SELECT DATE_SUB(CURDATE(), INTERVAL '29 0:0:0' DAY_SECOND))
         GROUP BY beginTime
     </select>
+
+    <select id="sumAlarmByYear" resultType="java.lang.Integer">
+        SELECT
+            COUNT(alarm_id)
+        FROM
+            t_device_alarm_info alarm
+        WHERE year(create_time) = year(now())
+    </select>
+
+    <select id="sumAlarmByMonth" resultType="java.lang.Integer">
+        SELECT
+          COUNT(alarm_id)
+        FROM
+          t_device_alarm_info alarm
+        WHERE month(create_time) = month(now())
+    </select>
+
+    <select id="sumAlarmByDay" resultType="java.lang.Integer">
+        SELECT
+          COUNT(alarm_id)
+        FROM
+          t_device_alarm_info alarm
+        WHERE day(create_time) = day(now())
+    </select>
+
 </mapper>
\ No newline at end of file

danger-manage-web/src/api/system/alarm.js

@@ -15,6 +15,13 @@ export function getStatistics() {
     method: 'get',
   })
 }
+
+export function sumAlarmTotal() {
+  return request({
+    url: '/system/alarm/sumAlarmTotal',
+    method: 'get',
+  })
+}
 // 查询报警记录详细
 export function getAlarm(alarmId) {
   return request({

danger-manage-web/src/components/Video/PlayVideo.vue

+<template>
+  <div :class="isChoice?'showVideo':'closeVideo'">
+    <div class="videoTitle">
+      <span style="margin-left: 15px;color: #334d6e">
+         <img src="@/assets/images/camera.png" alt="fold" style="width: 18px;height: 18px">
+        {{ videoName }}
+      </span>
+      <el-button v-if="videoName !=''" type="text" size="medium" style="margin-left: 8px;" @click="closeVideo">关闭</el-button>
+      <el-dropdown @command="videoSetting" trigger="click" style="float: right;margin-right: 15px">
+              <span class="el-dropdown-link">
+                <img src="@/assets/images/setting.png" alt="fold" style="width: 18px;height: 18px">
+              </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="1">全屏 </el-dropdown-item>
+          <el-dropdown-item command="2">抓图(.JPEG) </el-dropdown-item>
+          <el-dropdown-item command="3">抓图(.BMP) </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div :id="playId" class="videoContent"></div>
+    <div class="mask" @dblclick="fullScreen"></div>
+  </div>
+</template>
+
+<script>
+import { getPreviewURLs } from "@/api/video/video";
+const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+export default {
+  name: "play-video",
+  props:{
+    playId:{
+      type: String
+    },
+    isChoice:{
+      type: Boolean,
+      default: false
+    }
+  },
+  data(){
+    return{
+      showVideoNum: 1,
+      player: null,
+      cameraIndexCode: "",
+      videoName: ""
+    }
+  },
+  created(){
+   // console.log(this.playId,"gagaga")
+  },
+  mounted() {
+    if(!window.JSPlugin){
+      this.loadScript("/h5player/h5player.min.js").then(() =>{
+        this.createPlayer();
+      this.init()
+    })
+    }else{
+      this.createPlayer();
+      this.init()
+    }
+  },
+  methods:{
+    init() {
+      // 设置播放容器的宽高并监听窗口大小变化
+      window.addEventListener('resize', () => {
+        this.player.JS_Resize()
+      })
+    },
+    createPlayer() {
+      this.player = new window.JSPlugin({
+        szId: this.playId,
+        szBasePath: "/h5player",
+        iMaxSplit: 1,
+        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
+        openDebug: true,
+        oStyle: {
+          borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+        }
+      });
+    },
+    loadScript(src){
+      return new Promise(reslove =>{
+        let scpritE1 = document.createElement("script");
+      scpritE1.type = "text/javascript";
+      scpritE1.src = src;
+      scpritE1.onload = () => {
+        reslove();
+      }
+      document.body.appendChild(scpritE1);
+    })
+    },
+    playVideo(data){
+      this.videoName = data.label;
+     /* if(this.cameraIndexCode == data.deviceNum){
+        return;
+      }*/
+      this.cameraIndexCode = data.deviceNum;
+      if(data.deviceNum){
+        getPreviewURLs({cameraIndexCode: data.deviceNum}).then(response =>{
+          if(response.data.code == '0'){
+            this.videoOpenNum++;
+            let url = response.data.data.url;
+            this.player.JS_Play(url,{playURL: url, mode: 0 }, 0).then(() => {
+                console.log('realplay success')
+            },
+              e => { console.error(e) }
+            )
+          }
+        });
+      }
+    },
+    videoSetting(val){
+      if(val== '1'){
+        this.fullScreen();
+      }
+      if(val == '2'){
+        this.capture("'JPEG'")
+      }
+      if(val == '3'){
+        this.capture("'BMP'")
+      }
+    },
+    //分屏设置自适应
+    fit(){
+      this.player.JS_Resize();
+    },
+    //全屏
+    fullScreen(){
+      this.player.JS_FullScreenDisplay(true).then(
+        () => { console.log(`wholeFullScreen success`) },
+        e => { console.error(e) }
+      )
+    },
+    //抓图
+    capture(imageType) {
+      this.player.JS_CapturePicture(0, 'img', imageType).then(
+          () => { console.log('capture success', imageType) },
+        e => { console.error(e) }
+      )
+    },
+    //关闭视频
+    closeVideo(){
+      this.player.JS_Stop().then(() => {
+            this.videoName = "";
+            console.log('stop realplay success')
+       },
+        e => { console.error(e) }
+      )
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .showVideo{
+    border: 2px solid #334d6e;
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    box-shadow: 6px 0px 18px 1px rgba(0, 0, 0, 0.06);
+  }
+
+  .closeVideo{
+    //border: 1px solid blue;
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    box-shadow: 6px 0px 6px 6px rgba(0, 0, 0, 0.06);
+  }
+
+  .videoTitle{
+    //border: 1px solid darkgreen;
+    height: 40px;
+    line-height: 36px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #F5F7FA;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+    font-size: 20px;
+    color: blue;
+  }
+
+  .videoContent{
+    height: 100%;
+    padding: 40px 0px 0px 0px
+  }
+
+  .mask{
+    position: absolute;
+    top: 40px;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .el-button--text{
+    color: #334d6e;
+  }
+
+</style>

danger-manage-web/src/components/Video/SplitVideoView.vue

+<template>
+    <div class="video">
+      <div style="height: 5%;padding: 6px;">
+        <el-dropdown @command="handleCommand" trigger="click">
+          <span class="el-dropdown-link">
+            <img src="@/assets/images/spilt.png" alt="spilt" style="width: 18px;height: 18px">
+            分屏设置
+          </span>
+          <el-dropdown-menu slot="dropdown" style="width:100px">
+            <el-dropdown-item command="1">1x1 </el-dropdown-item>
+            <el-dropdown-item command="4">2x2</el-dropdown-item>
+            <el-dropdown-item command="9">3x3</el-dropdown-item>
+            <el-dropdown-item command="16">4x4</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+
+      <div style="height: 95%;width: 100%;" ref="playVideo">
+        <div v-for="num in spiltNum" class="videoShow" :style="{'width': countWidth,'height':countHeight}" @click="changeVideo('play'+num,num)">
+          <PlayVideo
+            :playId="'play'+num"
+            :isChoice="showVideoNum == num"
+            :ref="'play'+num"
+            :key="Math.random()"
+          >
+          </PlayVideo>
+
+        </div>
+      </div>
+
+    </div>
+</template>
+
+<script>
+  import PlayVideo from "@/components/Video/PlayVideo"
+    export default {
+      name: "split-videoview",
+      components:{
+        PlayVideo
+      },
+      data(){
+        return{
+          spiltNum: 0,
+          showVideoNum: 1,
+          playId: "play1",
+        }
+      },
+      mounted(){
+        this.spiltNum = 4;
+      },
+      computed:{
+        countWidth(){
+          return (this.$refs.playVideo.offsetWidth-2)/Math.sqrt(this.spiltNum) + 'px';
+        },
+        countHeight(){
+          return (this.$refs.playVideo.offsetHeight-2)/Math.sqrt(this.spiltNum) + 'px';
+        }
+      },
+      methods:{
+        changeVideo(playId,num){
+          this.playId = playId;
+          this.showVideoNum = num;
+        },
+        handleCommand(val){
+          this.spiltNum = eval(val);
+          this.playId = "play1";
+          this.showVideoNum = 1;
+        },
+        playVideo(video){
+          this.$refs[this.playId][0].playVideo(video);
+        }
+      }
+    }
+</script>
+
+<style scoped lang="scss">
+  .videoShow{
+    float: left;
+    padding: 6px;
+  }
+  .video{
+    height: 100%;
+    width: 100%;
+    margin-left: 6px;
+    float: left;
+    background: #fff;
+  }
+
+</style>