<script setup>
|
import FlexBox from "@/components/FlexBox.vue";
|
import ChartBox from "@/components/chartBox.vue";
|
import {onMounted, ref} from "vue";
|
import AbsPosLayout from "@/components/absPosLayout.vue";
|
import VideoItemIcon from "@/components/videoItemIcon.vue";
|
import videoContent from "@/assets/images/video-content.jpeg";
|
const num = ref([]);
|
const imgSrc = ref("http://192.168.1.109:8080/?action=stream");
|
|
const changeVideoState = (data)=>{
|
num.value.forEach(item=>{
|
item.active = false;
|
});
|
data.active = true;
|
}
|
onMounted(()=>{
|
for(let i=0; i<10; i++) {
|
num.value.push({
|
active: false,
|
state: 0,
|
label: "摄像头"+i,
|
key: 'key'+i
|
})
|
}
|
|
num.value[0].active = true;
|
num.value[1].state = 1;
|
num.value[2].state = 2;
|
});
|
</script>
|
|
<template>
|
<div class="video-show-wrapper">
|
<div class="video-show-layout">
|
<div class="video-show-header">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box title="实时监控列表">
|
<abs-pos-layout>
|
<div class="video-list-container">
|
<div
|
class="video-item"
|
v-for="item in num" :key="item.key"
|
:class="{'active': item.active}" @click="changeVideoState(item)">
|
<video-item-icon :state="item.state"></video-item-icon>
|
<div class="video-item-content">{{item.label}}</div>
|
</div>
|
</div>
|
</abs-pos-layout>
|
<template #footer>
|
<div class="video-desc">
|
<div class="video-desc-item">
|
<span class="video-desc-txt">正常：</span><video-item-icon :state="0"></video-item-icon>
|
</div>
|
<div class="video-desc-item">
|
<span class="video-desc-txt">告警：</span><video-item-icon :state="1"></video-item-icon>
|
</div>
|
<div class="video-desc-item">
|
<span class="video-desc-txt">异常：</span><video-item-icon :state="2"></video-item-icon>
|
</div>
|
</div>
|
</template>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
<div class="video-show-body">
|
<flex-box>
|
<abs-pos-layout>
|
<div class="img-container">
|
<img :src="imgSrc" alt="" />
|
</div>
|
</abs-pos-layout>
|
</flex-box>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.video-show-wrapper {
|
height: 100%;
|
background: url("@/assets/images/dw_bg.jpg") no-repeat;
|
background-size: 100% 100%;
|
}
|
.video-show-layout {
|
display: flex;
|
height: 100%;
|
.video-show-header {
|
width: 20rem;
|
padding: 8px 4px 8px 8px;
|
}
|
.video-show-body {
|
flex: 1;
|
padding: 8px 8px 8px 4px;
|
}
|
}
|
.flex-box-content {
|
height: 100%;
|
padding: 8px 0 8px 8px;
|
}
|
.video-list-container {
|
user-select: none;
|
.video-item {
|
color: #FFFFFF;
|
padding: 4px;
|
margin-top: 8px;
|
margin-right: 8px;
|
background: linear-gradient(to bottom, #0363f1, #0464f6, #0363f1);
|
.video-item-content {
|
display: inline-block;
|
font-size: 14px;
|
vertical-align: middle;
|
}
|
&.active {
|
background: linear-gradient(to bottom, #0363f1, #154a9b, #0363f1);
|
&:hover {
|
background: linear-gradient(to bottom, #0363f1, #154a9b, #0363f1);
|
}
|
}
|
&:hover {
|
background: #0d62ce;
|
cursor: pointer;
|
}
|
}
|
}
|
.video-desc {
|
text-align: center;
|
color: #FFFFFF;
|
.video-desc-item {
|
display: inline-block;
|
padding: 0 8px;
|
.video-desc-txt {
|
font-size: 14px;
|
}
|
}
|
}
|
.img-container {
|
height: 100%;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
