|
|
@@ -3,17 +3,15 @@
|
|
|
* @Autor: lin
|
|
|
* @Date: 2024-04-09 14:26:43
|
|
|
* @LastEditors: lin
|
|
|
- * @LastEditTime: 2024-04-20 09:24:07
|
|
|
+ * @LastEditTime: 2024-04-20 09:37:36
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="bigBg">
|
|
|
- <el-carousel indicator-position="outside" class="deviceBox" :autoplay="false" :interval="10000"
|
|
|
+ <el-carousel indicator-position="outside" :autoplay="false" trigger="click" class="deviceBox" :interval="10000"
|
|
|
@change="changeSlider">
|
|
|
<el-carousel-item v-for="(item, index) in deviceList" :key="item.id">
|
|
|
- <transition leave-active-class='animate__animated animate__fast animate__fadeOutRight'
|
|
|
- enter-active-class="animate__animated animate__fast animate__fadeInRight">
|
|
|
- <div class="flexBox topBox" v-if="index == activeIndex">
|
|
|
- <div class="rowFlex">
|
|
|
+ <div class="flexBox topBox">
|
|
|
+ <div class="rowFlex" v-show="index == activeIndex">
|
|
|
<div class="card">
|
|
|
<Title text="设备信息"></Title>
|
|
|
<div class="deviceInfo">
|
|
|
@@ -92,7 +90,7 @@
|
|
|
</div>
|
|
|
<!-- <video class="charBox" :id="`play${item.id}`" :src="item.jk_addr.hlsHd" muted autoplay poster='' controls playsInline webkit-playsinline></video> -->
|
|
|
</div>
|
|
|
- <div class="rowFlex">
|
|
|
+ <div class="rowFlex" v-if="index == activeIndex">
|
|
|
<div class="card">
|
|
|
<Title text="设备图片"></Title>
|
|
|
<el-carousel v-if="pestImgList[index]" indicator-position="none" class="charBox" :autoplay="false"
|
|
|
@@ -119,9 +117,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </transition>
|
|
|
- <transition leave-active-class='animate__animated animate__fast animate__fadeOutRight'
|
|
|
- enter-active-class="animate__animated animate__fast animate__fadeInRight">
|
|
|
<div class="flexBox bottomBox" v-if="index == activeIndex">
|
|
|
<div class="card">
|
|
|
<Title text="环境温湿度"></Title>
|
|
|
@@ -162,7 +157,6 @@
|
|
|
<div class="charBox" :id="`pestDateChar${item.id}`"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </transition>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
@@ -209,6 +203,13 @@ export default {
|
|
|
this.activeIndex = index;
|
|
|
this.$nextTick(() => {
|
|
|
this.initCharByIndex(index);
|
|
|
+ // this.videoList.forEach((item, videoIndex) => {
|
|
|
+ // if (videoIndex != index) {
|
|
|
+ // item.stop()
|
|
|
+ // } else {
|
|
|
+ // item.play()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
@@ -307,18 +308,18 @@ export default {
|
|
|
this.getLineDate(item.id, index);
|
|
|
item.jk_addr = item.jk_addr ? eval('(' + item.jk_addr + ')') : {};
|
|
|
if (item.jk_addr == '') return
|
|
|
- // let playHtml = `<video id="play${item.id}" autoplay muted poster='' controls playsInline webkit-playsinline src="${item.jk_addr.hlsHd}" style="width:100%; height:100%;"></video>`;
|
|
|
- // document.getElementById(
|
|
|
- // 'playBox' + item.id
|
|
|
- // ).innerHTML = playHtml;
|
|
|
- // // // 视频
|
|
|
- // this.$nextTick(() => {
|
|
|
- // let playerObj = new EZUIKit.EZUIPlayer({
|
|
|
- // id: `play${item.id}`
|
|
|
- // });
|
|
|
- // console.log(playerObj, 'playerObj')
|
|
|
- // this.videoList.push(playerObj)
|
|
|
- // })
|
|
|
+ // // 视频
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let playHtml = `<video id="play${item.id}" autoplay muted poster='' controls playsInline webkit-playsinline src="${item.jk_addr.hlsHd}" style="width:100%; height:100%;"></video>`;
|
|
|
+ document.getElementById(
|
|
|
+ 'playBox' + item.id
|
|
|
+ ).innerHTML = playHtml;
|
|
|
+ let playerObj = new EZUIKit.EZUIPlayer({
|
|
|
+ id: `play${item.id}`
|
|
|
+ });
|
|
|
+ console.log(playerObj, 'playerObj')
|
|
|
+ this.videoList.push(playerObj)
|
|
|
+ })
|
|
|
// this.$nextTick(() => {
|
|
|
// let char = echarts.init(document.getElementById(`temChar${item.id}`));
|
|
|
// this.setLineOption(char, ['温度（℃）', '湿度（%）'], item.ath.addtime, [item.ath.tem, item.ath.hum], [['#90ff0366', '#8fff0010'], ['#0066ff59', '#0066ff00']], ['#19E4A6', '#1588F2'])
|
