alarmEvent.vue 3.97 KB
<template>
  <div class="alarm-event-box">
    <el-table :data="tableData" height="30vh">
      <el-table-column type="index" align="center" label="#"></el-table-column>
      <el-table-column align="center" prop="camername" label="事件地点"></el-table-column>
      <el-table-column align="center" prop="illname" label="抓拍类型"></el-table-column>
      <el-table-column align="center" prop="illdt" label="发生时间"></el-table-column>
      <el-table-column align="center" prop="operation" label="操作">
        <template slot-scope="scope">
          <el-tooltip content="查看" placement="bottom" effect="light" :visible-arrow="false">
            <img
              src="../../assets/img/home/look.png"
              alt
              class="edit"
              @click="editVideo(scope.$index, scope.row)"
            />
          </el-tooltip>
          <span class="tableSpanBorder"></span>
          <el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow="false">
            <img
              src="../../assets/img/home/del.png"
              alt
              class="del"
              @click="delFun(scope.$index, scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[]
    }
  },
  methods:{
    delFun(index, rows) {
      rows.splice(index, 1);
    },
    editVideo(index, rows){
      this.$emit('event',rows)
    },
  },
  beforeMount(){
    let that = this;
    this.connect_id = new Date().getTime()
    // this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
    this.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)

    this.cws.onopen = () =>{
      console.log('ws事件推送服务连接成功')
    }
    //事件断开
    this.cws.onclose = () =>{
      window.clearTimeout(that.keepAlive)
      console.log('ws事件推送服务断开')
      that.connect_id = new Date().getTime()
      that.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
        that.keepAlive = setInterval(() => {
          let message = {
            type: 'request',
            id: new Date().getTime(),
            mts: new Date().getTime(),
            command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive'
          }
          this.cws.send(JSON.stringify(message))
        }, 20000);
    }
    //事件推送信息
    let _this = this;
    this.cws.onmessage = (evt) =>{
      let data = JSON.parse(evt.data)
      try {
        if(data.event_data.illegal.state == 1){
           let illname = _this.getCode('违法类型',data.event_data.illegal.code) || '';
           let camername = data.event_data.location.name
           let dt = this.showLocalTime(data.event_dt).split(' ')[1];
           console.log(data.pics[0].src_url)
           let pics = data.pics[0].src_url
           let pos = data.event_data.location.pos
           let obj = {
             illname:illname,
             illdt:dt,
             camername:camername,
             pics:pics,
             pos:pos
           }
          if(that.tableData.length > 40) {
            that.tableData.pop(obj)
            } else {
            that.tableData.unshift(obj)
          }	
          that.tableData.unshift(obj)
        } else{
         
        }
      } catch (error) {

      }

      if(data.command){
          console.log('推送服务连接正常')
        } else if(data.type =='response'){
          console.log('请求任务推送成功')
        }

      }
      this.keepAlive = setInterval(() => {
      let message = {
        type: 'request',
        id: new Date().getTime(),
        mts: new Date().getTime(),
        command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive'
      }
      this.cws.send(JSON.stringify(message))
    }, 50000);
  }
};
</script>

<style>
</style>>