eventTab.vue

<template>
  <div>
    <el-tabs v-model="activeName2" @tab-click="handleClick">
      <el-tab-pane label="全卡口" name="first">
        <Allalarm
          @showDitail="showDitail"
          :itemData="resultData"
          ref="allalarm"
        ></Allalarm>
      </el-tab-pane>
      <el-tab-pane label="机动车" name="second">
        <CarAlarm
          @showDitail="showDitail"
          :itemData="resultData"
          ref="caralarm"
        ></CarAlarm>
      </el-tab-pane>
      <el-tab-pane label="违法" name="third">
        <IllegalAlarm
          @showDitail="showDitail"
          :itemData="resultData"
          ref="illegalalarm"
        ></IllegalAlarm>
      </el-tab-pane>
      <el-tab-pane label="事件" name="fourth">
        <Eventalarm
          @showDitail="showDitail"
          :itemData="resultData"
          ref="eventalarm"
        ></Eventalarm>
      </el-tab-pane>
    </el-tabs>
    <div>
      <EventDetail
        ref="detail"
        @closeDetailModal="closeDetailModal"
        :curData="curdata"
      ></EventDetail>
    </div>
  </div>
</template>
<script>
var canvas = document.createElement("canvas");
// 分类报警
import Allalarm from "./eventData/allEvent.vue";
import CarAlarm from "./eventData/carEvent.vue";
import IllegalAlarm from "./eventData/illegalEvent.vue";
import Eventalarm from "./eventData/eventAlarm.vue";
import EventDetail from "./eventDetail.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeName2: "first",
      resultData: [],
      connect_id: "",
      curdata: "",
      curentId: "",
      cws: "",
      keepAlive: "",
      curType: "",
      quitws: false
    };
  },
  components: {
    Allalarm,
    CarAlarm,
    IllegalAlarm,
    Eventalarm,
    EventDetail
  },
  computed: {
    // ...mapState(["eventData", "wsclient"])
  },
  methods: {
    handleClick(tab, event) {},
    dataInit(cid, type) {
      this.$refs.allalarm.allAlarmData = [];
      this.$refs.caralarm.carAlarmData = [];
      this.$refs.illegalalarm.illAlarmData = [];
      this.$refs.eventalarm.eventAlarmData = [];
      this.resultData = "";
      this.curType = type;
      this.carItems = [];
      let send_mesage =
        '{"type":"request","connect_id": "' +
        this.connect_id +
        '","subtask_id":"' +
        cid +
        '"}';
      console.log("当前任务id", cid);
      this.cws.send(send_mesage);
      this.curentId = cid;
    },
    showDitail(data) {
      // this.$refs.ocxvido.show = false;
      this.$refs.detail.detailInfo(data);
    },
    closeDetailModal() {
      this.$store.commit("setocxstate", 1);
    },
    connectwebsocket(type) {
      let that = this;
      this.connect_id = new Date().getTime();
      this.cws = new WebSocket(
        "ws://" +
          this.$api.wsIP +
          "/websocket/v1/recv_data/connects/" +
          this.connect_id
      );
      this.cws.onopen = () => {
        console.log("ws事件推送服务连接成功");
        if (type == 1) {
          let send_mesage =
            '{"type":"request","connect_id": "' +
            this.connect_id +
            '","subtask_id":"' +
            this.curentId +
            '"}';
          this.cws.send(send_mesage);
        }
      };
      this.cws.onmessage = evt => {
        let data = JSON.parse(evt.data);
        if (data.command) {
          console.log("心跳连接正常！");
        } else if (data.type == "response") {
          console.log("请求任务推送成功");
        } else if (data.event_cate) {
          //根据抓拍图片坐标显示精确位置
          if (data.subtask_id != this.curentId) {
            return;
          }
          if (data.event_cate != "flow") {
              console.log(data);
            try {
              data.picsEmpty = data.pics.length == 0 ? true : false;
              if (data.pics[0].object_rect != undefined) {
                data.bigpic =
                  data.pics[0].src_url ||
                  "data:image/jpeg;base64," + data.pics[0].pic_base64;
                let img = new Image();
                let picOffset = data.pics[0].object_rect;
                canvas.width =
                  data.pics[0].width * (picOffset.right - picOffset.left) ||
                  189;
                canvas.height =
                  data.pics[0].hight * (picOffset.bottom - picOffset.top) ||
                  246;
                let ctx = canvas.getContext("2d");
                //设置图片跨域访问
                img.setAttribute("crossOrigin", "anonymous");
                const that = this;
                img.onload = function() {
                  //画图
                  let width = img.width * (picOffset.right - picOffset.left);
                  let height = img.height * (picOffset.bottom - picOffset.top);
                  if (width == 0) width = img.width;
                  if (height == 0) height = img.height;
                  ctx.drawImage(
                    img,
                    img.width * picOffset.left,
                    img.height * picOffset.top,
                    width,
                    height,
                    0,
                    0,
                    canvas.width,
                    canvas.height
                  );
                  // ctx.drawImage(img,0,0,width,height, 0, 0, canvas.width,canvas.height);
                  data.pic = canvas.toDataURL("image/jpeg");
                };
                img.src =
                  data.pics[0].src_url ||
                  "data:image/jpeg;base64," + data.pics[0].pic_base64;
              } else {
                data.pic =
                  data.pics[0].src_url ||
                  "data:image/jpeg;base64," + data.pics[0].pic_base64;
                data.bigpic =
                  data.pics[0].src_url ||
                  "data:image/jpeg;base64," + data.pics[0].pic_base64;
              }
              that.$buildCode.init(data);

              setTimeout(() => {
                that.resultData = data;
              }, 500);
            } catch (err) {
              console.log("err" + err);
            }
          }
        }
      };
      try {
        this.keepAlive = setInterval(() => {
          let send_mesage =
            '{"type":"request","id":"' +
            new Date().getTime() +
            '","mts":"' +
            new Date().getTime() +
            '","command": "get /websocket/v1/recv_data/connects/' +
            this.connect_id +
            '/keep_alive"}';
          if (that.cws.readyState == 1) {
            that.cws.send(send_mesage);
          } else {
            clearInterval(that.keepAlive);
            that.connectwebsocket(1);
            console.log("推送服务断开连接");
          }
        }, 20000);
      } catch (err) {
        console.log(err);
      }
    }
  },
  watch: {},
  beforeMount() {
    this.connectwebsocket();

    //监听成功
    this.cws.onopen = function() {
      console.log("ws事件推送服务连接成功");
    };

    //监听断开
    this.cws.onclose = () => {
      if (this.quitws) return;
      window.clearInterval(this.keepAlive);
      this.connectwebsocket(1);
    };
  },
  beforeDestroy() {
    this.cws.close();
    this.quitws = true;
    try {
      window.clearTimeout(this.keepAlive);
    } catch (error) {
      console.log(error);
    }
  }
};
</script>