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.
181 lines
3.7 KiB
181 lines
3.7 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%">
|
|
<usable-area />
|
|
<parking-space />
|
|
</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/2"></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>
|
|
|
|
<!-- 底部区域 -->
|
|
<footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
|
|
|
|
<!-- 监控 -->
|
|
<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
|
|
frameborder="0"
|
|
height="100%"
|
|
scrolling="no"
|
|
src="https://www.tall.wiki/kangfu-v1/?key=230659446"
|
|
width="100%"
|
|
></iframe>
|
|
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
|
|
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 -->
|
|
<div class="screen">
|
|
<img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
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";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TopBar,
|
|
Container,
|
|
SideItem,
|
|
FooterBar,
|
|
Curve,
|
|
Amount,
|
|
Finance,
|
|
Warehouse,
|
|
ParkingSpace,
|
|
UsableArea,
|
|
Memorabilia,
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
showIndex: 1,
|
|
};
|
|
},
|
|
methods: {
|
|
showMonitor() {
|
|
console.log("显示");
|
|
this.show = true;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.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>
|
|
|