122 lines
3.5 KiB
Vue
122 lines
3.5 KiB
Vue
|
<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">
|
||
|
|
<PeoCollection
|
||
|
|
:jczId="query.id"
|
||
|
|
v-if="item == '人员数据采集'"
|
||
|
|
></PeoCollection>
|
||
|
|
<PlowStatistics
|
||
|
|
:jczId="query.id"
|
||
|
|
v-if="item == '流入流出统计'"
|
||
|
|
></PlowStatistics>
|
||
|
|
<WarningCount
|
||
|
|
:jczId="query.id"
|
||
|
|
v-if="item == '预警统计'"
|
||
|
|
></WarningCount>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="mainBox">
|
||
|
|
<div class="main-top"><VideoMore></VideoMore></div>
|
||
|
|
<div class="main-bottom"><VideoFoot></VideoFoot></div>
|
||
|
|
</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>
|
||
|
|
<CarWarning
|
||
|
|
:jczId="query.id"
|
||
|
|
v-if="item == '车辆预警'"
|
||
|
|
></CarWarning>
|
||
|
|
<PeoWarning
|
||
|
|
:jczId="query.id"
|
||
|
|
v-if="item == '人员预警'"
|
||
|
|
></PeoWarning>
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
.mainBox_jcz {
|
||
|
|
position: absolute;
|
||
|
|
top: 65px;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 60px);
|
||
|
|
background: #000;
|
||
|
|
.asideBox {
|
||
|
|
width: 420px;
|
||
|
|
height: 100%;
|
||
|
|
.asideItem {
|
||
|
|
height: calc(100% / 3);
|
||
|
|
background: url("~@/assets/images/bg12.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding: 0 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.title {
|
||
|
|
height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
padding-left: 20px;
|
||
|
|
font-size: 20px;
|
||
|
|
font-family: "YSBTH";
|
||
|
|
background: linear-gradient(0deg, #59a6f4 0%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
.asideCnt {
|
||
|
|
height: calc(100% - 50px);
|
||
|
|
overflow: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mainBox {
|
||
|
|
flex: 1 0 0;
|
||
|
|
margin: 10px;
|
||
|
|
.main-top {
|
||
|
|
background: url("~@/assets/images/bg_13.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
height: 70%;
|
||
|
|
}
|
||
|
|
.main-bottom {
|
||
|
|
height: 30%;
|
||
|
|
background: url("~@/assets/images/bg_14.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|