车船信息
This commit is contained in:
duanliang
@@ -1,5 +1,57 @@
|
||||
<template>
|
||||
<div class="video-box">
|
||||
<div class="left-nav">
|
||||
<div v-if="showNav" class="ul">
|
||||
<div
|
||||
class="li"
|
||||
:class="{ active: current == index }"
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
@click="handleNav(index)"
|
||||
>
|
||||
<span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
|
||||
<span v-else>
|
||||
{{ item.dictLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: current == 3 }"
|
||||
@click="handleNav(3)" class="li">
|
||||
<span>自定义</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<Title2 title="检索" />
|
||||
<div class="search-box">
|
||||
<el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
|
||||
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="tree-box">
|
||||
<div class="tree-item" v-for="(item, i) in regionList" :key="i">
|
||||
<div class="tree-item__node" @click="handleRegions(i)">
|
||||
<img
|
||||
class="tree-item__icon"
|
||||
:class="{ 'tree-item__icon-up': item.show }"
|
||||
src="@/assets/images/arrow-down.png"
|
||||
alt=""
|
||||
/>
|
||||
<span class="tree-item__name">{{ item.regions }}</span>
|
||||
</div>
|
||||
<div v-if="item.show" class="tree-item__child">
|
||||
<div
|
||||
class="tree-item__child-item"
|
||||
v-for="(resource, x) in item.videoResources"
|
||||
:key="x"
|
||||
@click="handleCamera(resource.cameraIndexCode,resource)"
|
||||
>
|
||||
{{ resource.cameraName || resource.cameraIndexCode }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="videoLog == 1" class="video-wrapper">
|
||||
<div class="video-list">
|
||||
<div class="empty-box" v-if="videoList.length==0&&cond">
|
||||
@@ -124,6 +176,7 @@
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" />
|
||||
</div> -->
|
||||
</div>
|
||||
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isCollect="isCollect" :src="videoSrc" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -138,6 +191,7 @@
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
import emptyIco from '@/assets/images/n-icon.png'
|
||||
import { debounce } from 'lodash'
|
||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||
const UP = 'UP' // 上转
|
||||
@@ -158,12 +212,15 @@
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
@@ -214,6 +271,18 @@
|
||||
hlsRef.destroy()
|
||||
initVideo()
|
||||
}
|
||||
let isCollect = ref(0)
|
||||
let videoSrc = ref('')
|
||||
const handleCamera = async (itemCode,resource) => {
|
||||
show.value = true
|
||||
let res = await getPreviewUrlApi({
|
||||
type: 'hls',
|
||||
cameraIndexCode:itemCode
|
||||
})
|
||||
cameraIndexCode.value = itemCode;
|
||||
isCollect.value = resource.isCollect
|
||||
videoSrc.value = res.data.url
|
||||
}
|
||||
//清除 hls
|
||||
const clearHlsRefs = () => {
|
||||
if (hlsRefs.length > 0) {
|
||||
@@ -240,7 +309,6 @@
|
||||
videoList.value = res.data
|
||||
cond.value = true
|
||||
total.value = res.total
|
||||
console.log(videoList.value,'酒店视频列表')
|
||||
nextTick(() => {
|
||||
if(!videoList.value.length) return false
|
||||
videoList.value.forEach(async (x, index) => {
|
||||
@@ -313,11 +381,35 @@
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
const getVideoRegions = async () => {
|
||||
console.log(params.businessScenicArea,7788888)
|
||||
let res = await getVideoRegionsApi({
|
||||
cameraName: cameraName.value,
|
||||
businessScenicArea: params.businessScenicArea
|
||||
})
|
||||
regionList.value = res.data
|
||||
regionList.value[0].show = true
|
||||
console.log(regionList.value, ' regionList.value')
|
||||
}
|
||||
const handleRegions = (e) => {
|
||||
regionList.value[e].show = !regionList.value[e].show
|
||||
}
|
||||
const onInput = debounce((e) => {
|
||||
getVideoRegions()
|
||||
}, 500)
|
||||
let hotelChange = null;
|
||||
onMounted(()=>{
|
||||
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
getVideoRegions()
|
||||
console.log(data,'777888888')
|
||||
})
|
||||
onMonitorChange()
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearHlsRefs()
|
||||
if (hotelChange) pubSub.unsubscribe(hotelChange)
|
||||
if (timer) clearInterval(timer)
|
||||
pubSub.unsubscribe(monitorChange)
|
||||
})
|
||||
@@ -365,6 +457,9 @@
|
||||
}
|
||||
}
|
||||
.video-box {
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
margin-top: vh(120);
|
||||
@@ -379,7 +474,7 @@
|
||||
gap: vw(6);
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: vw(610);
|
||||
width: vw(210);
|
||||
height: vh(380);
|
||||
padding: vh(12) vw(12);
|
||||
box-sizing: border-box;
|
||||
@@ -438,7 +533,7 @@
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
width: vw(810);
|
||||
width: vw(720);
|
||||
height: vh(380);
|
||||
padding: vh(10) vw(10);
|
||||
background-image: url('/src/assets/images/item-primary.png');
|
||||
@@ -708,4 +803,132 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-nav {
|
||||
margin: 0 vw(8);
|
||||
width: vw(250);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
.bom-box {
|
||||
margin-top: vh(20);
|
||||
.search-box {
|
||||
border-radius: vw(2);
|
||||
height: vh(36);
|
||||
border: 1px solid #0096ff;
|
||||
margin: vh(10) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.search-icon {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
margin-right: vw(10);
|
||||
}
|
||||
}
|
||||
|
||||
.tree-box {
|
||||
position: relative;
|
||||
height: vh(750);
|
||||
padding: 0 vw(20);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
.tree-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-top: vh(20);
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
&:nth-child(1) {
|
||||
padding-top: 0;
|
||||
}
|
||||
&__node {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&__icon {
|
||||
margin-left: vw(-8);
|
||||
width: vw(16);
|
||||
height: auto;
|
||||
}
|
||||
&__icon-up {
|
||||
@extend .tree-item__icon;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&__name {
|
||||
padding: 0 vw(20);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
&__child {
|
||||
position: relative;
|
||||
margin-top: vh(20);
|
||||
margin-left: vw(20);
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
}
|
||||
&-top__icon {
|
||||
position: absolute;
|
||||
left: vw(-8);
|
||||
top: vh(0);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
}
|
||||
&-bottom__icon {
|
||||
position: absolute;
|
||||
left: vw(-8);
|
||||
bottom: vh(0);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
}
|
||||
&__child-item {
|
||||
padding: vh(0) vw(20) vh(20) vw(20);
|
||||
cursor: pointer;
|
||||
color: rgb(192,216,254);
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
&:nth-last-of-type(1) {
|
||||
padding: vh(0) vw(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//背景色设置为透明
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
//输入框颜色
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(36);
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user