|
|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<div class="index-box">
|
|
|
- <div class="contetn_left">
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-if="!isFullScreen" class="contetn_left">
|
|
|
<ItemWrap class="contetn_left-top contetn_lr-item" title="档案在位情况">
|
|
|
<LeftTop />
|
|
|
</ItemWrap>
|
|
|
@@ -11,22 +12,25 @@
|
|
|
<LeftBottom />
|
|
|
</ItemWrap>
|
|
|
</div>
|
|
|
- <div class="contetn_center" id="contetn_center">
|
|
|
- <Iot3d v-if="shouldShowComponent" style="z-index:200" />
|
|
|
+ </transition>
|
|
|
+ <div class="contetn_center" :class="{'is-fullscreen': isFullScreen }">
|
|
|
+ <Load3D></Load3D>
|
|
|
</div>
|
|
|
- <div class="contetn_centerbottom">
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-if="!isFullScreen" class="contetn_centerbottom">
|
|
|
<ItemWrap class="contetn_center-bottom contetn_lr-item" title="视频监控">
|
|
|
- <!-- <CenterBottom /> -->
|
|
|
-<!-- <Monitor></Monitor>-->
|
|
|
- <div class="monitor-container">
|
|
|
- <div class="monitor" v-for="(stream, index) in stream_url">
|
|
|
+ <n-carousel autoplay show-arrow :per-view="2" interval="5000">
|
|
|
+ <div class="monitor-container" v-for="(group, groupIndex) in groupedStreams" :key="groupIndex">
|
|
|
+ <div class="monitor" v-for="(stream, index) in group">
|
|
|
<webrtc :key="stream.id" :streamurl="stream.url" :videoId="'video-' + index"></webrtc>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </n-carousel>
|
|
|
</ItemWrap>
|
|
|
</div>
|
|
|
+ </transition>
|
|
|
<div class="contetn_bottom" id="contetn_bottom">
|
|
|
- <n-button strong secondary type="info" class="tech-button" tag="a" @click="$router.push('/archives')">全屏展示
|
|
|
+ <n-button strong secondary type="info" class="tech-button" tag="a" @click="toggleFullScreen">全屏展示
|
|
|
<template #icon>
|
|
|
<n-icon size="20">
|
|
|
<img src="@/assets/img/full.svg">
|
|
|
@@ -71,7 +75,8 @@
|
|
|
</template>
|
|
|
</n-button>
|
|
|
</div>
|
|
|
- <div class="contetn_right">
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-if="!isFullScreen" class="contetn_right">
|
|
|
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="温湿度实时曲线">
|
|
|
<RightTop />
|
|
|
</ItemWrap>
|
|
|
@@ -82,10 +87,11 @@
|
|
|
<RightBottom />
|
|
|
</ItemWrap>
|
|
|
</div>
|
|
|
+ </transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref,computed } from 'vue'
|
|
|
import ItemWrap from "@/components/item-wrap";
|
|
|
import LeftTop from "./left-top.vue";
|
|
|
import LeftCenter from "./left-center.vue";
|
|
|
@@ -94,25 +100,36 @@ import RightTop from "./right-top.vue";
|
|
|
import RightCenter from "./right-center.vue";
|
|
|
import RightBottom from "./right-bottom.vue";
|
|
|
import webrtc from './webrtc.vue';
|
|
|
-import { NIcon } from "naive-ui";
|
|
|
+import { NIcon,NCarousel } from "naive-ui";
|
|
|
import Iot3d from "./iot3d.vue";
|
|
|
import { onBeforeRouteLeave } from 'vue-router';
|
|
|
import WebH5 from './webH5.vue';
|
|
|
import Monitor from './monitor.vue';
|
|
|
import { id } from 'element-plus/es/locale';
|
|
|
+import Load3D from "@/views/index/Load3D.vue";
|
|
|
const shouldShowComponent = ref(true);
|
|
|
|
|
|
let stream_url = ref([
|
|
|
{ id: 1, url: 'rtsp://admin:jxzs12345@192.168.1.2:554/h264/ch1/main/av_stream' },
|
|
|
{ id: 2, url: 'rtsp://admin:jxzs12345@192.168.1.3:554/h264/ch1/main/av_stream' },
|
|
|
- // { id: 3, url: 'rtsp://admin:jxzs12345@192.168.1.4:554/h264/ch1/main/av_stream' },
|
|
|
- // { id: 4, url: 'rtsp://admin:jxzs12345@192.168.1.5:554/h264/ch1/main/av_stream' },
|
|
|
- // { id: 5, url: 'rtsp://admin:jxzs12345@192.168.1.6:554/h264/ch1/main/av_stream' },
|
|
|
- // { id: 6, url: 'rtsp://admin:jxzs12345@192.168.1.7:554/h264/ch1/main/av_stream' },
|
|
|
- // { id: 7, url: 'rtsp://admin:jxzs12345@192.168.1.8:554/h264/ch1/main/av_stream' },
|
|
|
- // { id: 8, url: 'rtsp://admin:jxzs12345@192.168.1.64:554/h264/ch1/main/av_stream' },
|
|
|
+ { id: 3, url: 'rtsp://admin:jxzs12345@192.168.1.4:554/h264/ch1/main/av_stream' },
|
|
|
+ { id: 4, url: 'rtsp://admin:jxzs12345@192.168.1.5:554/h264/ch1/main/av_stream' },
|
|
|
+ { id: 5, url: 'rtsp://admin:jxzs12345@192.168.1.6:554/h264/ch1/main/av_stream' },
|
|
|
+ { id: 6, url: 'rtsp://admin:jxzs12345@192.168.1.7:554/h264/ch1/main/av_stream' },
|
|
|
+ { id: 7, url: 'rtsp://admin:jxzs12345@192.168.1.8:554/h264/ch1/main/av_stream' },
|
|
|
+ { id: 8, url: 'rtsp://admin:jxzs12345@192.168.1.64:554/h264/ch1/main/av_stream' },
|
|
|
]);
|
|
|
-
|
|
|
+const isFullScreen = ref(false);
|
|
|
+const toggleFullScreen = () => {
|
|
|
+ isFullScreen.value = !isFullScreen.value;
|
|
|
+};
|
|
|
+const groupedStreams = computed(() => {
|
|
|
+ const groups = [];
|
|
|
+ for (let i = 0; i < stream_url.value.length; i += 2) {
|
|
|
+ groups.push(stream_url.value.slice(i, i + 2));
|
|
|
+ }
|
|
|
+ return groups;
|
|
|
+});
|
|
|
onBeforeRouteLeave((to, from, next) => {
|
|
|
shouldShowComponent.value = false;
|
|
|
next();
|
|
|
@@ -120,7 +137,6 @@ onBeforeRouteLeave((to, from, next) => {
|
|
|
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
<style scoped lang="scss">
|
|
|
.index-box {
|
|
|
width: 100%;
|
|
|
@@ -149,13 +165,25 @@ onBeforeRouteLeave((to, from, next) => {
|
|
|
width: 440px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.contetn_center {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ //border: 1px solid #e3b337; /* 默认边框样式 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 全屏时的样式 */
|
|
|
+.contetn_center.is-fullscreen{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 920px !important;
|
|
|
+ z-index: 1000;
|
|
|
+ //border: 1px solid #e3378d; /* 全屏时的边框样式 */
|
|
|
}
|
|
|
|
|
|
+
|
|
|
.contetn_lr-item {
|
|
|
height: 310px;
|
|
|
font-size: large;
|
|
|
@@ -165,14 +193,11 @@ onBeforeRouteLeave((to, from, next) => {
|
|
|
width: 100%;
|
|
|
margin-top: auto;
|
|
|
position: absolute;
|
|
|
- /* 添加绝对定位 */
|
|
|
bottom: 0;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
transform: translateY(-10px);
|
|
|
- /* 向上“浮动”10px */
|
|
|
transition: transform 0.3s ease;
|
|
|
- /* 添加过渡效果 */
|
|
|
}
|
|
|
|
|
|
.tech-button {
|
|
|
@@ -200,22 +225,36 @@ onBeforeRouteLeave((to, from, next) => {
|
|
|
margin-top: -55px;
|
|
|
font-size: large;
|
|
|
}
|
|
|
-.index-box{
|
|
|
+
|
|
|
+.index-box {
|
|
|
z-index: 1000000 !important;
|
|
|
}
|
|
|
+
|
|
|
.monitor {
|
|
|
margin-left: 10px;
|
|
|
width: 50% !important;
|
|
|
height: 100% !important;
|
|
|
- // border: #ffea00 solid 1px;
|
|
|
}
|
|
|
-.monitor-container{
|
|
|
+
|
|
|
+.monitor-container {
|
|
|
width: 100% !important;
|
|
|
height: 100% !important;
|
|
|
display: flex;
|
|
|
}
|
|
|
-.fullscreen{
|
|
|
+
|
|
|
+.fullscreen {
|
|
|
margin-top: -50px;
|
|
|
margin-left: 350px;
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+/* 过渡效果 */
|
|
|
+.fade-enter-active,
|
|
|
+.fade-leave-active {
|
|
|
+ transition: opacity 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter-from,
|
|
|
+.fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+</style>
|
