You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
7.6 KiB
368 lines
7.6 KiB
<template>
|
|
<!-- 顶栏 -->
|
|
<top-bar />
|
|
|
|
<container>
|
|
<template v-slot:left>
|
|
<side-item title="大事记">
|
|
<memorabilia />
|
|
</side-item>
|
|
<side-item title="饱和量仪表盘">
|
|
<div class="flex justify-between" style="width: 100%; height: 100%">
|
|
<parking-space />
|
|
<usable-area />
|
|
</div>
|
|
</side-item>
|
|
<side-item title="仓库吞吐量对比图">
|
|
<warehouse />
|
|
</side-item>
|
|
</template>
|
|
|
|
<template v-slot:center>
|
|
<iframe
|
|
class="block frame"
|
|
frameborder="0"
|
|
src="https://www.tall.wiki/wl/1"
|
|
></iframe>
|
|
</template>
|
|
|
|
<template v-slot:right>
|
|
<side-item title="货物吞吐量曲线">
|
|
<curve />
|
|
</side-item>
|
|
<side-item title="进出车次统计">
|
|
<amount />
|
|
</side-item>
|
|
<side-item title="人员数据统计表">
|
|
<finance />
|
|
</side-item>
|
|
</template>
|
|
</container>
|
|
|
|
<!-- 长时间不操作屏幕跳出视频 -->
|
|
<div
|
|
id="thvideo"
|
|
class="out-img flex justify-center align-center"
|
|
v-if="timeOut"
|
|
>
|
|
<video
|
|
id="myAudio"
|
|
class="video"
|
|
:src="vList[curr]"
|
|
controls
|
|
autoplay
|
|
></video>
|
|
</div>
|
|
|
|
<!-- 音频 -->
|
|
<audio
|
|
v-if="!timeOut"
|
|
:src="src"
|
|
controls
|
|
autoplay
|
|
loop="loop"
|
|
id="audioBtn"
|
|
ref="audio"
|
|
></audio>
|
|
|
|
<!-- 底部区域 -->
|
|
<footer-bar :showIndex="showIndex"></footer-bar>
|
|
|
|
<!-- 监控1 -->
|
|
<img
|
|
@click="getWarehouses('show1')"
|
|
class="monitor—btn"
|
|
src="../assets/img/monitor.png"
|
|
style
|
|
/>
|
|
<div class="vedio" v-show="show">
|
|
<div class="head">
|
|
<div class="camera">摄像头监控视频</div>
|
|
<img @click="show = false" class="close" src="../assets/img/close.png" />
|
|
</div>
|
|
<div class="monitor">
|
|
<div class="monitor1">
|
|
<iframe
|
|
:src="iframeSrc1"
|
|
frameborder="0"
|
|
height="100%"
|
|
scrolling="no"
|
|
width="100%"
|
|
></iframe>
|
|
<div class="screen">
|
|
<img
|
|
@click="showScreen = true"
|
|
class="monitor2"
|
|
src="../assets/img/fullScreen.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 全屏监控 -->
|
|
<video-screen
|
|
:iframeSrc="iframeSrc1"
|
|
@closeScreen="closeScreen"
|
|
v-if="showScreen"
|
|
/>
|
|
|
|
<!-- 监控2 -->
|
|
<img
|
|
@click="getWarehouses('show2')"
|
|
class="monitor—btn monitor—btn1"
|
|
src="../assets/img/monitor-left.png"
|
|
style
|
|
/>
|
|
<div class="vedio" v-show="show2">
|
|
<div class="head">
|
|
<div class="camera">摄像头监控视频</div>
|
|
<img @click="show2 = false" class="close" src="../assets/img/close.png" />
|
|
</div>
|
|
<div class="monitor">
|
|
<div class="monitor1">
|
|
<iframe
|
|
:src="iframeSrc2"
|
|
frameborder="0"
|
|
height="100%"
|
|
scrolling="no"
|
|
width="100%"
|
|
></iframe>
|
|
<div class="screen">
|
|
<img
|
|
@click="showScreen = true"
|
|
class="monitor2"
|
|
src="../assets/img/fullScreen.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 全屏监控 -->
|
|
<video-screen
|
|
:iframeSrc="iframeSrc2"
|
|
@closeScreen="closeScreen"
|
|
v-if="showScreen"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import senaudio from "../assets/sedaudio.wav";
|
|
import thvideo from "../assets/thvideo.mp4";
|
|
import forvideo from "../assets/forvideo.mp4";
|
|
import fifivideo from "../assets/fifvideo.mp4";
|
|
import sixvideo from "../assets/sixvideo.mp4";
|
|
import sevenvideo from "../assets/sevenvideo.mp4";
|
|
import { defineComponent } from "vue";
|
|
import TopBar from "comp/top-bar.vue";
|
|
import Container from "comp/content.vue";
|
|
import SideItem from "comp/side-item.vue";
|
|
import FooterBar from "comp/footer-bar.vue";
|
|
import Curve from "comp/curve.vue";
|
|
import Amount from "@/components/amount.vue";
|
|
import Finance from "@/components/finance.vue";
|
|
import Warehouse from "@/components/warehouse.vue";
|
|
import ParkingSpace from "@/components/parkingSpace.vue";
|
|
import UsableArea from "@/components/usableArea.vue";
|
|
import Memorabilia from "@/components/memorabilia.vue";
|
|
import VideoScreen from "@/components/videoScreen.vue";
|
|
// import { getWarehouses } from "api/index";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TopBar,
|
|
Container,
|
|
SideItem,
|
|
FooterBar,
|
|
Curve,
|
|
Amount,
|
|
Finance,
|
|
Warehouse,
|
|
ParkingSpace,
|
|
UsableArea,
|
|
Memorabilia,
|
|
VideoScreen,
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
show2: false,
|
|
showScreen: false,
|
|
showIndex: 0,
|
|
iframeSrc1: "",
|
|
iframeSrc2: "",
|
|
timeOut: false, //设置超时的时间：1分钟
|
|
timer: 0,
|
|
src: senaudio,
|
|
curr: 0,
|
|
vList: [thvideo, forvideo, fifivideo, sixvideo, sevenvideo],
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
const that = this;
|
|
// window.addEventListener("mousemove", this.move);
|
|
window.addEventListener("mousemove", function () {
|
|
that.move();
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
//弹出视频
|
|
move() {
|
|
this.timeOut = false;
|
|
const that = this;
|
|
setTimeout(async () => {
|
|
that.timeOut = true;
|
|
await that.videoEnd();
|
|
}, 5 * 60 * 1000);
|
|
},
|
|
|
|
//视频播放结束切换下一个视频
|
|
videoEnd() {
|
|
var aud = document.getElementById("myAudio");
|
|
// console.log(aud);
|
|
const that = this;
|
|
aud.onended = function () {
|
|
// alert("音频播放完成");
|
|
if (that.curr === that.vList.length - 1) {
|
|
that.curr = 0;
|
|
} else {
|
|
that.curr++;
|
|
}
|
|
};
|
|
},
|
|
|
|
// 关闭大屏
|
|
closeScreen() {
|
|
this.showScreen = false;
|
|
},
|
|
|
|
// 获取仓库信息
|
|
async getWarehouses(value) {
|
|
try {
|
|
if (value === "show1") {
|
|
if (this.show2) {
|
|
this.show2 = false;
|
|
}
|
|
this.show = true;
|
|
}
|
|
if (value === "show2") {
|
|
if (this.show) {
|
|
this.show = false;
|
|
}
|
|
this.show2 = true;
|
|
}
|
|
// const data = await getWarehouses({ parkId: 1 });
|
|
// if (data && data.parkEquipment && data.parkEquipment.length) {
|
|
// this.iframeSrc1 = data.parkEquipment[0].equipmentLocation;
|
|
// this.iframeSrc2 = data.parkEquipment[1].equipmentLocation;
|
|
// }
|
|
} catch (error) {
|
|
console.log("error: ", error);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.out-img {
|
|
position: absolute;
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
z-index: 100;
|
|
/* padding: 30px; */
|
|
background-color: white;
|
|
}
|
|
|
|
/* .video {
|
|
border-top: 30px solid #fff;
|
|
border-bottom: 30px solid #fff;
|
|
} */
|
|
|
|
.monitor—btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 20%;
|
|
z-index: 99;
|
|
width: 48rem;
|
|
height: 50rem;
|
|
}
|
|
|
|
.monitor—btn1 {
|
|
top: 28%;
|
|
}
|
|
|
|
.frame {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.vedio {
|
|
position: absolute;
|
|
bottom: 15%;
|
|
left: 37%;
|
|
z-index: 99;
|
|
width: 524rem;
|
|
height: 369rem;
|
|
background: url(/src/assets/img/vedio.png) center no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.head {
|
|
text-align: center;
|
|
font-size: 20rem;
|
|
padding-top: 30rem;
|
|
padding-bottom: 10rem;
|
|
}
|
|
|
|
.camera {
|
|
color: #fff;
|
|
font-size: 12rem;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 7%;
|
|
right: 8%;
|
|
width: 20rem;
|
|
height: 20rem;
|
|
}
|
|
|
|
.monitor {
|
|
width: 446rem;
|
|
height: 287rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.monitor1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.screen {
|
|
width: 100%;
|
|
height: 40rem;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -1px;
|
|
z-index: 9;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.monitor2 {
|
|
width: 30rem;
|
|
height: 30rem;
|
|
position: absolute;
|
|
right: 15rem;
|
|
bottom: 5rem;
|
|
}
|
|
</style>
|
|
|