|
@@ -12,61 +12,61 @@
|
|
|
:props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover', disabled: 'runStatus'}"
|
|
|
:show-all-levels="false"></el-cascader>
|
|
|
</div>
|
|
|
- <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0" allowfullscreen="true"></iframe>
|
|
|
- </div>
|
|
|
- <div class="monit-right">
|
|
|
- <swiper style="height: 100%; margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">
|
|
|
- <swiper-slide v-for="(item, i) in videoList" :key="i">
|
|
|
- <div class="case">
|
|
|
- <template v-if="num === 0 && (i === 0 || i === 1 || i === 2)">
|
|
|
- <iframe :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0" allowfullscreen="true"></iframe>
|
|
|
- </template>
|
|
|
- <template v-else-if="num === 3 && (i ===3 || i === 4 || i === 5)">
|
|
|
- <iframe :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0" allowfullscreen="true"></iframe>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </swiper-slide>
|
|
|
- </swiper>
|
|
|
+ <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 80%; height: 100%; margin: 0 auto;" frameborder="0" allowfullscreen="true"></iframe>
|
|
|
</div>
|
|
|
+<!-- <div class="monit-right">-->
|
|
|
+<!-- <swiper style="height: 100%; margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">-->
|
|
|
+<!-- <swiper-slide v-for="(item, i) in videoList" :key="i">-->
|
|
|
+<!-- <div class="case">-->
|
|
|
+<!-- <template v-if="num === 0 && (i === 0 || i === 1 || i === 2)">-->
|
|
|
+<!-- <iframe :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0" allowfullscreen="true"></iframe>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <template v-else-if="num === 3 && (i ===3 || i === 4 || i === 5)">-->
|
|
|
+<!-- <iframe :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0" allowfullscreen="true"></iframe>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </swiper-slide>-->
|
|
|
+<!-- </swiper>-->
|
|
|
+<!-- </div>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
|
-import 'swiper/css/swiper.css'
|
|
|
+// import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
|
+// import 'swiper/css/swiper.css'
|
|
|
import {getVideoAll, getVideo, saveVideo, lastVideo, romVideo} from "@/utils/api";
|
|
|
import axios from "axios";
|
|
|
-const c_swiper = document.getElementsByClassName("swiper")
|
|
|
+// const c_swiper = document.getElementsByClassName("swiper")
|
|
|
|
|
|
export default {
|
|
|
name: "Monit",
|
|
|
components: {
|
|
|
- swiper,
|
|
|
- swiperSlide,
|
|
|
+ // swiper,
|
|
|
+ // swiperSlide,
|
|
|
},
|
|
|
data() {
|
|
|
- let self = this;
|
|
|
+ // let self = this;
|
|
|
return {
|
|
|
- swiperOption: {
|
|
|
- direction: 'vertical',
|
|
|
- slidesPerView: 3,
|
|
|
- slidesPerColumn: 1,
|
|
|
- slidesPerGroup: 3,
|
|
|
- // spaceBetween: 30,
|
|
|
- autoplay: {
|
|
|
- delay: 10000,
|
|
|
- disableOnInteraction: false
|
|
|
- },
|
|
|
- on: {
|
|
|
- slideChange() {
|
|
|
- // console.log(c_swiper[0].swiper)
|
|
|
- // this.num = c_swiper[0].swiper.activeIndex
|
|
|
- self.returnNum(c_swiper[0].swiper.activeIndex)
|
|
|
- // console.log(this.num);
|
|
|
- // return this.num
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ // swiperOption: {
|
|
|
+ // direction: 'vertical',
|
|
|
+ // slidesPerView: 3,
|
|
|
+ // slidesPerColumn: 1,
|
|
|
+ // slidesPerGroup: 3,
|
|
|
+ // // spaceBetween: 30,
|
|
|
+ // autoplay: {
|
|
|
+ // delay: 10000,
|
|
|
+ // disableOnInteraction: false
|
|
|
+ // },
|
|
|
+ // on: {
|
|
|
+ // slideChange() {
|
|
|
+ // // console.log(c_swiper[0].swiper)
|
|
|
+ // // this.num = c_swiper[0].swiper.activeIndex
|
|
|
+ // self.returnNum(c_swiper[0].swiper.activeIndex)
|
|
|
+ // // console.log(this.num);
|
|
|
+ // // return this.num
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
videoId: '',
|
|
|
isShow: false,
|
|
|
isVideo: false,
|
|
@@ -151,10 +151,10 @@ export default {
|
|
|
mounted() {
|
|
|
this.init()
|
|
|
this.initCrmea();
|
|
|
- var that = this;
|
|
|
- this.timer = setInterval(() => {
|
|
|
- that.initCrmea();
|
|
|
- }, 60000)
|
|
|
+ // var that = this;
|
|
|
+ // this.timer = setInterval(() => {
|
|
|
+ // that.initCrmea();
|
|
|
+ // }, 60000)
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timer);
|