diff --git a/package-lock.json b/package-lock.json index 37d3d94..87e8056 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "element-plus": "^2.9.0", "flv.js": "^1.6.2", "hls.js": "^1.5.18", + "lodash": "^4.17.21", "mitt": "^3.0.1", "pinia": "^2.2.6", "pubsub-js": "^1.9.5", diff --git a/package.json b/package.json index afc64e7..b6af09e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "element-plus": "^2.9.0", "flv.js": "^1.6.2", "hls.js": "^1.5.18", + "lodash": "^4.17.21", "mitt": "^3.0.1", "pinia": "^2.2.6", "pubsub-js": "^1.9.5", diff --git a/src/api/monitor.js b/src/api/monitor.js index cc9280f..1065a92 100644 --- a/src/api/monitor.js +++ b/src/api/monitor.js @@ -18,6 +18,15 @@ export function getVideoRegionsApi(data) { }) } +// 获取区域摄像头搜索 +export function getVideoRegionsSearchApi(data) { + return request({ + url: '/fjtcc-api/api/largeScreen/video/regions/search', + method: 'post', + data + }) +} + // 更新视频资源 export function postVideoRemainApi(data) { return request({ diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue index 903c27e..11697b7 100644 --- a/src/views/monitor/components/box-2.vue +++ b/src/views/monitor/components/box-2.vue @@ -17,25 +17,27 @@
- +
-
-
- - {{ item.regions }} +
+
+ + {{ item.regions }}
-
- +
+ +
{{ resource.cameraName || resource.cameraIndexCode }} - +
+
@@ -71,7 +73,6 @@ import { getVideoListApi, postRefreshApi, getPreviewUrlApi } from '@/api/home' import { getVideoTypeApi, getVideoRegionsApi, postVideoRemainApi } from '@/api/monitor' + import { debounce } from 'lodash' import PubSub from 'pubsub-js' import Hls from 'hls.js' @@ -149,6 +151,7 @@ let show = ref(false) let loading = ref(false) let total = ref(0) + let cameraName = ref('') let params = reactive({ pageNum: 1, pageSize: 6, @@ -181,6 +184,11 @@ }) }) } + + const onInput = debounce((e) => { + getVideoRegions() + }, 500) + const currentChange = (e) => { videoList.value = [] getVideoList() @@ -213,19 +221,9 @@ }) if (type == 100) initVideo() }, 1000) - // nextTick(() => { - // const hls = new Hls({ - // maxBufferLength: 10, // 最大缓冲长度（秒） - // maxMaxBufferLength: 15, // 缓冲区长度的上限 - // maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） - // }) - // hls.loadSource(url) - // hls.attachMedia(videoRef.value) - // hls.on(Hls.Events.MANIFEST_PARSED, () => { - // videoRef.value.play() - // }) - // if (type == 100) initVideo() - // }) + } + const handleRegions = (e) => { + regionList.value[e].show = !regionList.value[e].show } const handleCamera = async (cameraIndexCode) => { show.value = true @@ -291,9 +289,24 @@ ] } else { let res = await getVideoRegionsApi({ - businessScenicArea: params.businessScenicArea + businessScenicArea: params.businessScenicArea, + cameraName: cameraName.value }) regionList.value = res.data + console.log(regionList.value, 'regionList.value') + // .map((i) => { + // return { + // ...i, + // label: i.regions, + // children: i.videoResources.map((x) => { + // return { + // ...x, + // label: x.cameraName || x.cameraIndexCode, + // children: [] + // } + // }) + // } + // }) } } const onMonitorChange = () => { @@ -335,6 +348,11 @@ display: flex; flex: 1; } + :deep(.el-input__inner) { + height: vh(36); + font-size: vw(16); + color: #ffffff; + } .left-nav { margin: 0 vw(8); width: vw(250); @@ -343,12 +361,12 @@ 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; - background: rgba(217, 217, 217, 0); .search-icon { width: vw(20); @@ -359,49 +377,87 @@ .tree-box { position: relative; - height: vh(550); - padding: 0 vw(8); + height: vh(490); + padding: 0 vw(20); overflow-y: auto; overflow-x: hidden; /* 滚动条整体样式 */ &::-webkit-scrollbar { - width: vw(0); /* 滚动条的宽度 */ + width: vw(4); /* 滚动条的宽度 */ } /* 滚动条轨道 */ &::-webkit-scrollbar-track { - background: #f1f1f1; /* 轨道的背景色 */ + background: 'transparent'; /* 轨道的背景色 */ } /* 滚动条滑块 */ &::-webkit-scrollbar-thumb { - background: #888; /* 滑块的背景色 */ + background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */ border-radius: 5px; /* 滑块的圆角 */ } - /* 当鼠标悬停在滚动条上时滑块的样式 */ - &::-webkit-scrollbar-thumb:hover { - background: #555; /* 滑块的背景色 */ - } - .tree-a { + .tree-item { + cursor: pointer; position: relative; - border-left: vw(2) #37d8fc solid; - - .node { - position: absolute; - left: vw(-8); + 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: vw(16); } - .name-1 { + &__name { padding: 0 vw(20); display: block; font-weight: 400; font-size: vw(15); color: #ffffff; - height: vh(30); - line-height: vh(30); text-align: left; font-style: normal; text-transform: none; } + &__child { + position: relative; + margin-top: vh(20); + margin-left: vw(40); + 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 { + cursor: pointer; + padding: vh(0) vw(20) vh(20) vw(20); + display: block; + font-weight: 400; + font-size: vw(15); + display: flex; + align-items: flex-start; + color: #ffffff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + &:nth-last-of-type(1) { + padding: vh(0) vw(20); + } + } } .tree-b::before { position: absolute; @@ -413,26 +469,26 @@ background-image: url('/src/assets/images/icon-a-1.png'); background-size: 100% 100%; } - .tree-b { - position: relative; - border-left: vw(3) solid; - border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1; - margin-left: vw(30); - margin-top: vh(10); - .name-2 { - cursor: pointer; - padding: 0 vw(20); - display: block; - font-weight: 400; - font-size: vw(15); - color: #ffffff; - height: vh(30); - line-height: vh(30); - white-space: nowrap; /* 保证文本在一行内显示 */ - overflow: hidden; /* 隐藏溢出的内容 */ - text-overflow: ellipsis; /* 使用省略号表示文本溢出 */ - } - } + // .tree-b { + // position: relative; + // border-left: vw(3) solid; + // border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1; + // margin-left: vw(30); + // margin-top: vh(10); + // .name-2 { + // cursor: pointer; + // padding: 0 vw(20); + // display: block; + // font-weight: 400; + // font-size: vw(15); + // color: #ffffff; + // height: vh(30); + // line-height: vh(30); + // white-space: nowrap; /* 保证文本在一行内显示 */ + // overflow: hidden; /* 隐藏溢出的内容 */ + // text-overflow: ellipsis; /* 使用省略号表示文本溢出 */ + // } + // } } } .ul { diff --git a/src/views/workOrder/components/box-3.vue b/src/views/workOrder/components/box-3.vue index 660aff6..d2397f0 100644 --- a/src/views/workOrder/components/box-3.vue +++ b/src/views/workOrder/components/box-3.vue @@ -122,6 +122,8 @@ background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); .list { + height: vh(500); + overflow: auto; /* 滚动条整体样式 */ &::-webkit-scrollbar { width: vw(4); /* 滚动条的宽度 */ @@ -135,8 +137,6 @@ background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */ border-radius: 5px; /* 滑块的圆角 */ } - height: vh(500); - overflow: auto; .item:nth-child(odd) { background: rgba(3, 78, 153, 0.3); }