lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:完善监控播放器

Browse Source
This commit is contained in:
zjc
2025-02-27 21:00:12 +08:00
parent 2bfd46a636
commit 3832e3617f
4 changed files with 406 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/monitor/components/box-2.vue
View File

@@ -21,14 +21,20 @@
<el-input placeholder="请输入内容" v-model="cameraName" clearable @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" src="@/assets/images/node.png" alt="" />
<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">
<img class="tree-item-top__icon" src="@/assets/images/node.png" alt="" />
<div v-if="item.show" class="tree-item__child">
<!-- <img class="tree-item-top__icon" src="@/assets/images/node.png" alt="" /> -->
<div
class="tree-item__child-item"
v-for="(resource, x) in item.videoResources"
@@ -179,6 +185,11 @@
const STOP = 'STOP' // 停止操作
let ACTION = '0'
const props = {
value: 'id',
label: 'label',
children: 'children'
}
let command = ref('')
let videoList = ref([])
let navList = ref([])
@@ -377,24 +388,10 @@
]
} else {
let res = await getVideoRegionsApi({
businessScenicArea: params.businessScenicArea,
cameraName: cameraName.value
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
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 = () => {
@@ -517,7 +514,7 @@
cursor: pointer;
position: relative;
padding-top: vh(20);
border-left: vw(2) solid #37d8fc;
// border-left: vw(2) solid #37d8fc;
&:nth-child(1) {
padding-top: 0;
}
@@ -529,7 +526,11 @@
&__icon {
margin-left: vw(-8);
width: vw(16);
height: vw(16);
height: auto;
}
&__icon-up {
@extend .tree-item__icon;
transform: rotate(180deg);
}
&__name {
padding: 0 vw(20);
@@ -544,8 +545,8 @@
&__child {
position: relative;
margin-top: vh(20);
margin-left: vw(40);
border-left: vw(2) solid #37d8fc;
margin-left: vw(20);
// border-left: vw(2) solid #37d8fc;
}
&-top__icon {
position: absolute;
@@ -562,17 +563,16 @@
height: vw(16);
}
&__child-item {
cursor: pointer;
padding: vh(0) vw(20) vh(20) vw(20);
display: block;
cursor: pointer;
color: #999;
font-weight: 400;
font-size: vw(15);
display: flex;
align-items: flex-start;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: flex-start;
&:nth-last-of-type(1) {
padding: vh(0) vw(20);
}