2025-06-02 20:25:19 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="homeBox" @click="handless">
|
|
|
|
|
<Head :title="query.name" :query="query.name"></Head>
|
|
|
|
|
<div class="mainBox_jcz hidden flex">
|
|
|
|
|
<ul class="asideBox">
|
|
|
|
|
<li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
|
|
|
|
|
<div class="title">{{ item }}</div>
|
|
|
|
|
<div class="asideCnt" @click="handless">
|
2025-09-17 09:20:55 +08:00
|
|
|
<PeoCollection :jczId="query.id" v-if="item == '人员数据采集'"></PeoCollection>
|
|
|
|
|
<PlowStatistics :jczId="query.id" v-if="item == '流入流出统计'"></PlowStatistics>
|
|
|
|
|
<WarningCount :jczId="query.id" v-if="item == '预警统计'"></WarningCount>
|
2025-06-02 20:25:19 +08:00
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="mainBox">
|
2025-09-17 09:20:55 +08:00
|
|
|
<div class="main-top">
|
|
|
|
|
<VideoMore></VideoMore>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-bottom">
|
|
|
|
|
<VideoFoot></VideoFoot>
|
|
|
|
|
</div>
|
2025-06-02 20:25:19 +08:00
|
|
|
</div>
|
|
|
|
|
<ul class="asideBox">
|
|
|
|
|
<li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
|
|
|
|
|
<div class="title">{{ item }}</div>
|
|
|
|
|
<div class="asideCnt">
|
|
|
|
|
<BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
|
2025-09-17 09:20:55 +08:00
|
|
|
<CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning>
|
|
|
|
|
<PeoWarning :jczId="query.id" v-if="item == '人员预警'"></PeoWarning>
|
2025-06-02 20:25:19 +08:00
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import Head from "@/views/home/layout/head.vue";
|
|
|
|
|
import PeoCollection from "./layout/PeoCollection.vue";
|
|
|
|
|
import PlowStatistics from "./layout/FlowStatistics.vue";
|
|
|
|
|
import WarningCount from "./layout/WarningCount.vue";
|
|
|
|
|
import BeOnDuty from "./layout/BeOnDuty.vue";
|
|
|
|
|
import CarWarning from "./layout/CarWarning.vue";
|
|
|
|
|
import PeoWarning from "./layout/PeoWarning.vue";
|
|
|
|
|
import VideoMore from "./layout/VideoMore.vue";
|
|
|
|
|
import VideoFoot from "./layout/VideoFoot.vue";
|
|
|
|
|
import { useRoute } from "vue-router";
|
|
|
|
|
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
|
|
|
|
|
const router = useRoute();
|
|
|
|
|
const meun = reactive({
|
|
|
|
|
leftMeun: ["人员数据采集", "流入流出统计", "预警统计"],
|
|
|
|
|
rightMeun: ["值班备勤", "车辆预警", "人员预警"]
|
|
|
|
|
});
|
|
|
|
|
const query = computed(() => {
|
|
|
|
|
return router.query;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.homeBox {
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.mainBox_jcz {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 65px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh - 60px);
|
|
|
|
|
background: #000;
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.asideBox {
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 100%;
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.asideItem {
|
|
|
|
|
height: calc(100% / 3);
|
|
|
|
|
background: url("~@/assets/images/bg12.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
box-sizing: border-box;
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.title {
|
|
|
|
|
height: 50px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-family: "YSBTH";
|
2025-09-28 15:53:38 +08:00
|
|
|
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
2025-06-02 20:25:19 +08:00
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
}
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.asideCnt {
|
|
|
|
|
height: calc(100% - 50px);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.mainBox {
|
|
|
|
|
flex: 1 0 0;
|
|
|
|
|
margin: 10px;
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.main-top {
|
|
|
|
|
background: url("~@/assets/images/bg_13.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
height: 70%;
|
|
|
|
|
}
|
2025-09-17 09:20:55 +08:00
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
.main-bottom {
|
|
|
|
|
height: 30%;
|
|
|
|
|
background: url("~@/assets/images/bg_14.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
