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_dt}}</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].illegal_text}}</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_dt}}</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].illegal_text}}</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_dt}}</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].illegal_text}}</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_dt}}</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].illegal_text}}</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(){
		this.taskid = this.$route.params.taskid
		this.subtaskid = this.$route.params.subtaskid
		this.playurl = this.$route.params.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);
        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);
      }
    }
	},
	 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" lang="scss">
	.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>