人工智能分析 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>

danger-manage-web/src/views/intellect/index.vue

 <template>
     <div style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
-        <div class="intellect">
-            <div class="intellect-top">
-                <div class="in-top-l">
-                    <span>视频设备</span>
-                    <div class="top-l">
-                        <div class="topl active">
-                            <span>出入口相机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>储罐区摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>化工罐区摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>危险作业区摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>库区摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>危险作业区摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>中控值班室摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>中控重点工位摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
-                        <div class="topl active">
-                            <span>巡检点摄像机</span>
-                            <img src="../../assets/img/live-fill.png" alt="" >
-                        </div>
+      <div class="intellect">
+          <div class="intellect-top">
+              <div class="in-top-l">
+                  <span>视频设备</span>
+                  <div class="top-l">
+                    <div :class="checkIndex=== index ? 'active' : 'topl'" v-for="(item,index) in videoLists" @click="checkVideo(index,item)">
+                      <span>{{item.mapDeviceName}}</span>
+                      <img src="../../assets/img/live-fill.png" alt="" >
                     </div>
-                    
-                    
-                </div>
-                <div class="in-top-c">
-                    <div style="height: 5%;padding: 6px;">
-                        <el-dropdown  trigger="click">
-                          <span class="el-dropdown-link">
-                            <img src="@/assets/img/spilt.png" alt="spilt" style="width: 15px;height: 15px">
-                            分屏设置
-                          </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" class="video">
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
+                  </div>
+              </div>
+              <div class="in-top-c">
+                <SplitVideoView ref="video"/>
+              </div>
+              <div class="in-top-r">
+                  <div class="top-r-t">
+                      <div class="ent-ru-in">
+                          <div class="ru-in-l">
+                              <img src="../../assets/img/zhan.png" alt="">
+                          </div>
+                          <div class="ru-in-r">
+                              <span>最新预警</span>
+                              <div v-if="alarmList[0]">{{alarmList[0].alarmBeginTime}}</div>
+                          </div>
                       </div>
-                </div>
-                <div class="in-top-r">
-                    <div class="top-r-t">
-                        <div class="ent-ru-in">
-                            <div class="ru-in-l">
-                                <img src="../../assets/img/zhan.png" alt="">
-                            </div>
-                            <div class="ru-in-r">
-                                <span>最新预警</span>
-                                <div>2022-10-22 20:20:20</div>
-                            </div>
-                        </div>
-                        <div class="rt-b">
-                            <span> 预警：</span>
-                            <div>
-                                储罐区有火焰从原料罐冒出，目前有溢出风险
-                            </div>
-                        </div>
-                        <div class="intellect-btn">
-                            <el-button class="but">查看实时视频</el-button>
-                        </div>
-                    </div>
-                    <div class="top-r-b">
-                        <div class="r-b-l">
-                            <img src="../../assets/img/up.png" alt="" width="50px">
-                            <div>预警统计</div>
-                        </div>
-                        <div class="ent-ruchang">
-                            <div class="ent-ru-in">
-                                <div class="ru-in-l">
-                                    <img src="../../assets/img/down.png" alt="">
-                                </div>
-                                <div class="ru-in-r">
-                                    <span>日累积预警</span>
-                                    <div>0</div>
-                                </div>
-                            </div>
-                            <div class="ent-ru-in">
-                                <div class="ru-in-l">
-                                    <img src="../../assets/img/down1.png" alt="">
-                                </div>
-                                <div class="ru-in-r">
-                                    <span>月累积预警</span>
-                                    <div>0</div>
-                                </div>
-                            </div>
-                            <div class="ent-ru-in">
-                                <div class="ru-in-l">
-                                    <img src="../../assets/img/down2.png" alt="">
-                                </div>
-                                <div class="ru-in-r">
-                                    <span>年累积预警</span>
-                                    <div>0</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="intellect-bottom">
-                <p>园区内车辆</p>
-                <div class="ent-yuanqu">
-                    <el-table
-                    :data="tableData"
-                    style="width: 100%">
-                    <el-table-column
-                        prop="date"
-                        label="预警信息">
-                    </el-table-column>
-                    <el-table-column
-                        prop="name"
-                        label="预警类型">
-                    </el-table-column>
-                    <el-table-column
-                        prop="address1"
-                        label="预警开始时间">
-                    </el-table-column>
-                    <el-table-column
-                        prop="address2"
-                        label="预警结束时间">
-                    </el-table-column>
-                    <el-table-column
-                        prop="end"
-                        label="结果">
-                    </el-table-column>
-                    <el-table-column
-                        prop="video"
-                        label="视频">
-                        <template slot-scope="scope">
-                                <img class="demo" :src="require(`../../assets/img/live-fill.png`)" />
-                        </template>
-                    </el-table-column>
-                    </el-table>
-                    <el-pagination
-                        layout="prev, pager, next"
-                        :total="1000">
-                    </el-pagination>
-                </div>
-            </div>
+                      <div class="rt-b">
+                          <span> 预警：</span>
+                          <div>
+                              储罐区有火焰从原料罐冒出，目前有溢出风险
+                          </div>
+                      </div>
+                      <div class="intellect-btn">
+                          <el-button @click="videoView(alarmList[0])" class="but">查看实时视频</el-button>
+                      </div>
+                  </div>
+                  <div class="top-r-b">
+                      <div class="r-b-l">
+                          <img src="../../assets/img/up.png" alt="" width="50px">
+                          <div>预警统计</div>
+                      </div>
+                      <div class="ent-ruchang">
+                          <div class="ent-ru-in">
+                              <div class="ru-in-l">
+                                  <img src="../../assets/img/down.png" alt="">
+                              </div>
+                              <div class="ru-in-r">
+                                  <span>日累积预警</span>
+                                  <div>{{dayTotal}}</div>
+                              </div>
+                          </div>
+                          <div class="ent-ru-in">
+                              <div class="ru-in-l">
+                                  <img src="../../assets/img/down1.png" alt="">
+                              </div>
+                              <div class="ru-in-r">
+                                  <span>月累积预警</span>
+                                  <div>{{monthTotal}}</div>
+                              </div>
+                          </div>
+                          <div class="ent-ru-in">
+                              <div class="ru-in-l">
+                                  <img src="../../assets/img/down2.png" alt="">
+                              </div>
+                              <div class="ru-in-r">
+                                  <span>年累积预警</span>
+                                  <div>{{yearTotal}}</div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+          <div class="intellect-bottom">
+              <p>园区内车辆</p>
+              <div class="ent-yuanqu">
+                <el-table v-loading="loading" :data="alarmList">
+                  <!--<el-table-column type="selection" width="55" align="center" />-->
+                  <!--<el-table-column label="id" align="center" prop="alarmId" />-->
+                  <!--<el-table-column label="报警设备" align="center" prop="deviceName" />-->
+                  <el-table-column label="预警类型" align="center" prop="alarmContent" :formatter="alarmContentFormat" />
+                  <el-table-column label="报警级别" align="center" prop="alarmLevel"  >
+                    <template slot-scope="scope">
+                      <span :style="colorList[scope.row.alarmLevel]" >{{alarmLevelFormat(scope.row,null)}}</span>
+                    </template>
+                  </el-table-column>
+                  <!--:formatter="alarmLevelFormat"-->
+                  <el-table-column label="报警开始时间" align="center" prop="alarmBeginTime" width="180"/>
+
+                  <el-table-column label="报警结束时间" align="center" prop="alarmEndTime" width="180"/>
+
+                  <el-table-column label="报警状态" align="center" prop="alarmStatus" >
+                    <template slot-scope="scope">
+                      <span style="color: red" v-if="scope.row.alarmStatus==0">正在报警</span>
+                      <span  v-if="scope.row.alarmStatus==1">自动消警</span>
+                      <span  v-if="scope.row.alarmStatus==2">手动消警</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="预警图片" align="center" prop="alarmImageUrl" >
+                    <template slot-scope="scope">
+                      <img :src="scope.row.alarmImageUrl" style="width: 20%;vertical-align:middle;cursor:pointer;" @click="showPicture(scope.row)"/>
+                      <el-image :ref="'a'+scope.row.id" :src="scope.row.alarmImageUrl" v-show="false" :preview-src-list="[scope.row.alarmImageUrl]" v-if="scope.row.alarmImageUrl != '' && scope.row.alarmImageUrl != null"></el-image>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="video"
+                    label="视频">
+                    <template slot-scope="scope">
+                      <img class="demo" @click="videoView(scope.row)" :src="require(`../../assets/img/live-fill.png`)" />
+                    </template>
+                  </el-table-column>
+                </el-table>
+
+                <pagination
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.pageNum"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getAlarmList"
+                />
+              </div>
+          </div>
+      </div>
+      <el-dialog :title= "title" :visible.sync="dialogTableVisible">
+        <div style="height: 500px">
+          <PlayVideo
+            playId="play"
+            :isChoice = "false"
+            ref="play"
+          >
+          </PlayVideo>
         </div>
+      </el-dialog>
     </div>
 </template>
 
 <script>
     import livefill from "../../assets/img/live-fill.png";
+    import {deviceInfoLists} from "@/api/map/deviceInfo";
+    import SplitVideoView from "@/components/Video/SplitVideoView";
+    import PlayVideo from "@/components/Video/PlayVideo"
+    import { listAlarm, sumAlarmTotal } from "@/api/system/alarm";
     export default {
-        data() {
-            return {
-                tableData: [
-                    { date: '储罐区有火焰产生',name: '火焰',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
-                    { date: '进入人员未佩戴安全头盔',name: '未佩戴安全头盔',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
-                    { date: '储罐区有设备预警',name: '设备预警',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
-                    { date: '储罐区有设备预警',name: '设备预警',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
-                ]
-            }
+      name:"intellect",
+      components:{
+        SplitVideoView,
+        PlayVideo
+      },
+      data() {
+          return {
+            videoLists:[],
+            //选中视频
+            checkIndex:-1,
+            queryParams: {
+              pageNum: 1,
+              pageSize: 10,
+              alarmBeginTime: null,
+              alarmEndTime: null,
+              alarmStatus: null,
+            },
+            alarmList:[],
+            total: 0,
+            loading: true,
+            // 预警类型字典
+            alarmContentOptions: [],
+            // 报警级别字典
+            alarmLevelOptions: [],
+            colorList:[
+              "color:red",
+              "color:red;font-weight: bolder;",
+              "color:#ff7744",
+              "color:#ffaa33",
+              "color:#bbbb00",
+              "color:#ccff33",
+            ],
+            dialogTableVisible:false,
+            title:"",
+            monthTotal:0,
+            dayTotal:0,
+            yearTotal:0
+
+          }
+      },
+      created(){
+        this.getVideos();
+        this.getAlarmList();
+        this.getDicts("t_alarm_content").then(response => {
+            this.alarmContentOptions = response.data;
+        });
+        this.getDicts("t_alarm_level").then(response => {
+            this.alarmLevelOptions = response.data;
+        });
+        this.getTotalAlarm();
+      },
+      methods:{
+        //获取视频列表
+        getVideos(){
+          deviceInfoLists({mapDeviceType:"5"}).then(res =>{
+            this.videoLists = res;
+          })
+        },
+        //视频选择
+        checkVideo(index,videoData){
+          this.checkIndex = index;
+          let video = {};
+          video.deviceNum = videoData.mapDeviceNum;
+          video.label = videoData.mapDeviceName;
+          this.$refs.video.playVideo(video);
+        },
+        getAlarmList(){
+          this.loading = true;
+          listAlarm(this.queryParams).then(res =>{
+            this.alarmList = res.rows;
+            this.total = res.total;
+            this.loading = false;
+          })
         },
-        computed:{
+        // 预警类型字典翻译
+        alarmContentFormat(row, column) {
+          return this.selectDictLabel(this.alarmContentOptions, row.alarmContent);
         },
+        // 报警级别字典翻译
+        alarmLevelFormat(row, column) {
+          return this.selectDictLabel(this.alarmLevelOptions, row.alarmLevel);
+        },
+        showPicture(row){
+          this.$refs['a'+row.id].showViewer = true;
+        },
+        videoView(row){
+          //this.title = row.deviceName;
+          this.dialogTableVisible = true;
+          let video = {};
+          video.deviceNum = row.relationDeviceId;
+          video.label = "视频";
+          this.$nextTick(() => {
+              this.$refs.play.playVideo(video);
+          })
+        },
+        getTotalAlarm(){
+          sumAlarmTotal().then(res =>{
+           this.yearTotal = res.data.yearTotal;
+           this.monthTotal = res.data.monthTotal;
+           this.dayTotal =  res.data.dayTotal;
+          })
+        }
+      }
     };
 </script>
 <style lang="scss" scoped>
@@ -209,7 +270,21 @@
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
-                justify-content: space-around;
+                overflow-y: scroll;
+                overflow-x: hidden;
+                &::-webkit-scrollbar {
+                  width:0px;
+                }
+                &::-webkit-scrollbar-track {
+                  -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
+                  border-radius:10px;
+                }
+                &::-webkit-scrollbar-thumb {
+                  border-radius:5px;
+                  background:rgba(0,0,0,0.1);
+                  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
+                }
+                //justify-content: space-around;
                 .topl{
                     width: 100%;
                     height: 40px;
@@ -221,6 +296,7 @@
                     border-radius: 10px;
                     background-color: #fff;
                     font-size: 14px;
+                    cursor: pointer;
                     img{
                         width: 20px;
                         height: 20px;
@@ -228,7 +304,7 @@
                     }
                 }
             }
-            
+
         }
         .in-top-c{
             width: 62%;
@@ -364,6 +440,20 @@
         background-color: #fff;
         border-radius: 15px;
         padding: 10px 20px 20px 20px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        &::-webkit-scrollbar {
+          width:0px;
+        }
+        &::-webkit-scrollbar-track {
+          -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
+          border-radius:10px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius:5px;
+          background:rgba(0,0,0,0.1);
+          -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
+        }
         .ent-yuanqu{
                 width: 100%;
                 height: 95%;
@@ -377,4 +467,23 @@
 ::v-deep .el-table tr td .cell {
     text-align: center;
 }
-</style>
\ No newline at end of file
+.active{
+  width: 100%;
+  height: 40px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px;
+  border: 1px solid rgb(235, 232, 232);
+  border-radius: 10px;
+  background-color: #e7f4fd;
+  color: #3662ec;
+  cursor:pointer;
+  font-size: 14px;
+  img{
+    width: 20px;
+    height: 20px;
+    margin-top: 5px;
+  }
+}
+</style>