Show.vue

<template>
  <div class>
    <el-header class="headers">
      <span class="title">实时分析展示</span>
    </el-header>
    <el-container style="min-height:calc(100vh - 64px);" class="showbox">
      <el-main style="padding: 12px;overflow:hidden">
        <div style="margin-bottom: 12px;">
          <el-row :gutter="20">
            <el-col :span="15">
              <div class="videoCon">
                <!-- 加入视频 -->
                <videoplay ref="videoplay" :playurl="playurl"></videoplay>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="imgCon">
                <div class="imgDiv">
                  <!-- 加入img 100% -->
                  <div v-if="resultData[0]">
                    <img :src="resultData[0].pic" class="photos" />
                  </div>
                </div>
                <div style="padding:0 10px 10px 10px">
                  <div class="textDiv">
                    <div v-if="resultData[0]">
                      <p>抓拍时间：{{ resultData[0].shoot_time }}</p>
                      <p>抓拍地点：{{ resultData[0].location_name }}</p>
                      <p>车牌号码：{{ resultData[0].vehicle_plate_text }}</p>
                      <p>
                        车辆类型：{{ resultData[0].vehicle_body_type_text }}
                      </p>
                      <p>
                        车身颜色：{{ resultData[0].vehicle_body_color_text }}
                      </p>
                      <p>违法类型：{{ resultData[0].illegalType }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div style="clear: both;"></div>
        </div>
        <el-row class="bottomDiv" :gutter="10">
          <!-- 循环生成lDiv -->
          <el-col :span="8" class="lDiv">
            <div class="leftImg">
              <!-- 加入img 100% -->
              <div v-if="resultData[1]">
                <img :src="resultData[1].pic" class="photos" />
              </div>
            </div>
            <div class="rightDiv">
              <div v-if="resultData[1]">
                <p>抓拍时间：{{ resultData[1].shoot_time }}</p>
                <p>抓拍地点：{{ resultData[1].location_name }}</p>
                <p>车牌号码：{{ resultData[1].vehicle_plate_text }}</p>
                <p>车辆类型：{{ resultData[1].vehicle_body_type_text }}</p>
                <p>车身颜色：{{ resultData[1].vehicle_body_color_text }}</p>
                <p>违法类型：{{ resultData[1].illegalType }}</p>
              </div>
            </div>
            <div style="clear: both;"></div>
          </el-col>

          <el-col :span="8" class="lDiv">
            <div class="leftImg">
              <!-- 加入img 100% -->
              <div v-if="resultData[2]">
                <img :src="resultData[2].pic" class="photos" />
              </div>
            </div>
            <div class="rightDiv">
              <div v-if="resultData[2]">
                <p>抓拍时间：{{ resultData[2].shoot_time }}</p>
                <p>抓拍地点：{{ resultData[2].location_name }}</p>
                <p>车牌号码：{{ resultData[2].vehicle_plate_text }}</p>
                <p>车辆类型：{{ resultData[2].vehicle_body_type_text }}</p>
                <p>车身颜色：{{ resultData[2].vehicle_body_color_text }}</p>
                <p>违法类型：{{ resultData[2].illegalType }}</p>
              </div>
            </div>
            <div style="clear: both;"></div>
          </el-col>

          <el-col :span="8" class="lDiv">
            <div class="leftImg">
              <!-- 加入img 100% -->
              <div v-if="resultData[3]">
                <img :src="resultData[3].pic" class="photos" />
              </div>
            </div>
            <div class="rightDiv">
              <div v-if="resultData[3]">
                <p>抓拍时间：{{ resultData[3].shoot_time }}</p>
                <p>抓拍地点：{{ resultData[3].location_name }}</p>
                <p>车牌号码：{{ resultData[3].vehicle_plate_text }}</p>
                <p>车辆类型：{{ resultData[3].vehicle_body_type_text }}</p>
                <p>车身颜色：{{ resultData[3].vehicle_body_color_text }}</p>
                <p>违法类型：{{ resultData[3].illegalType }}</p>
              </div>
            </div>
            <div style="clear: both;"></div>
          </el-col>

          <div style="clear: both;"></div>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import videoplay from "./public/videoPlay";
export default {
  name: "home",
  data() {
    return {
      isCollapse: false,
      conHeight: 0,
      playurl: "",
      subtaskid: "",
      taskid: "",
      showws: null,
      keepAlive: null,
      quitws: false,
      resultData: []
    };
  },
  created() {
    let url = location.href;
    let params = url.split("?")[1];
    this.taskid = this.getQueryVariable("taskid");
    this.subtaskid = this.getQueryVariable("subtaskid");
    this.playurl = this.getQueryVariable("playurl");
  },

  mounted() {
    this.$refs.videoplay.videoPlay();
  },
  components: {
    videoplay
    // HelloWorld
  },
  methods: {
    connectwebsocket(type) {
      let that = this;
      this.connect_id = new Date().getTime();
      this.showws = new WebSocket(
        "ws://" +
          this.$api.wsIP +
          "/websocket/v1/recv_data/connects/" +
          this.connect_id
      );
      this.showws.onopen = () => {
        console.log("ws事件推送服务连接成功");
        let send_mesage =
          '{"type":"request","connect_id": "' +
          this.connect_id +
          '","subtask_id":"' +
          this.subtaskid +
          '"}';
        this.showws.send(send_mesage);
      };
      this.showws.onmessage = evt => {
        let data = JSON.parse(evt.data);
        // eslint-disable-next-line no-empty
        if (data.command) {
        } else if (data.type == "response") {
          console.log("请求任务推送成功");
        } else if (data.event_cate) {
          if (data.event_cate != "flow") {
            try {
              data.picsEmpty = data.pics.length == 0 ? true : false;
              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);
              if (that.resultData.length > 4) {
                that.resultData.pop(data);
              } else {
                that.resultData.unshift(data);
              }
            } catch (err) {
              console.log(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.showws.readyState == 1) {
            that.showws.send(send_mesage);
          } else {
            clearInterval(that.keepAlive);
            that.connectwebsocket(1);
            console.log("推送服务断开连接");
          }
        }, 20000);
      } catch (err) {
        console.log(err);
      }
    },
    getQueryVariable(variable) {
      var query = window.location.href.split("?")[1];
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }
  },
  beforeMount() {
    this.connectwebsocket();

    //监听成功
    this.showws.onopen = () => {
      let send_mesage =
        '{"type":"request","connect_id": "' +
        this.connect_id +
        '","subtask_id":"' +
        this.subtaskid +
        '"}';
      this.showws.send(send_mesage);
      console.log("showws事件推送服务连接成功");
    };

    //监听断开
    this.showws.onclose = function() {
      if (quitws) return;
      window.clearInterval(this.keepAlive);
      this.connectwebsocket(1);
    };
  },
  beforeDestroy() {
    this.showws.close();
    this.quitws = true;
    try {
      window.clearTimeout(this.keepAlive);
    } catch (error) {}
  }
};
</script>
<style scoped="scoped">
.headers {
  line-height: 60px;
}
.title {
  font-size: 24px;
  font-family: MicrosoftYaHeiUI;
  color: rgba(255, 255, 255, 1);
  -webkit-background-clip: text;
}
.videoCon {
  background: #ffffff;
  width: 100%;
  height: 70vh;
}
.imgCon {
  height: 70vh;
  background: #ffffff;
}
.imgDiv {
  padding: 0 10px 0 10px;
  height: 40vh;
}
.imgDiv > div {
  height: 100%;
  background: #d8d8d8;
}
.lDiv {
  float: left;
}
.lDiv:nth-last-of-type(2) {
  margin: 0;
}
.rightDiv {
  width: 10.5vw;
  height: 20vh;
  border: 1px solid rgba(229, 229, 229, 1);
  border-left: none;
  color: #555555;
  font-size: 12px;
  float: left;
}
.rightDiv p {
  margin: 10px 0;
  margin-left: 10px;
}
.textDiv {
  height: 29vh;
  border: 1px solid rgba(229, 229, 229, 1);
  color: #555555;
  font-size: 22px;
}
.textDiv p {
  margin: 14px 0;
  margin-left: 37px;
}
.bottomDiv {
  padding: 7px;
  background: #ffffff;
  display: flex;
  flex-flow: row nowrap;
}
.leftImg {
  width: 21vw;
  height: 20.2vh;
  background: #d8d8d8;
  overflow: hidden;
  float: left;
}
.leftImg > div {
  height: 100%;
  width: 100%;
}
.photos {
  width: 100%;
  height: 100%;
}
</style>