alarmEvent.vue 4.53 KB
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index" align="center" label="#"></el-table-column>
      <el-table-column
        align="center"
        prop="eventType"
        label="事件地点"
        :formatter="eventFormatter"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="locationName"
        label="抓拍类型"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="startDt"
        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);
    },
    eventFormatter(row, column, cellValue, index) {
      let value = "";
      this.eventTypeList.forEach(item => {
        if (item.code == cellValue) {
          value = item.name;
        }
      });
      return value;
    }
  },
  beforeMount() {
    try {
      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/integrated/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/integrated/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);
      };
      //事件推送信息
      this.cws.onmessage = evt => {
        let data = JSON.parse(evt.data);
        try {
          if (data.event_cate == "behavior") {
            let illame = this.getCode("安防事件", data.event_type);
            let camername = data.event_data.device
              ? data.event_data.device.name
              : "";
            let addressname = data.event_data.location
              ? data.event_data.location.name
              : "";
            let dt = this.showLocalTime(data.event_dt).split(" ")[1];
            let pics = "data:image/jpeg;base64," + data.pics[0].pic_base64;
            let obj = {
              illame: illame,
              illdt: dt,
              addressname: addressname,
              camername: camername,
              pics: pics
            };
            that.tableData.unshift(obj);
          }
        } 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);
    } catch (err) {
      console.log(err);
    }
  }
};
</script>

<style></style>>