admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 布局修改

Browse Source
This commit is contained in:
kun 2024-03-18 09:52:59 +08:00
parent fd0b305808
commit 87a8f41875
1 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/sevenLargeScreen/videoManagement/index.vue
View File

@ -4,8 +4,9 @@
<div class="videoListBig"> <div class="videoListBig">
<Card title="监控设备列表"> <Card title="监控设备列表">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<!-- <el-tree ref="treeRef" default-expand-all :data="shipinList" node-key="name" :props="defaultProps"> </el-tree> --> <el-tree ref="treeRef" default-expand-all icon="ArrowRight" :data="shipinList" node-key="name" :props="defaultProps" @node-click="checkVideo">
<div class="decivList"> </el-tree>
<!-- <div class="decivList">
<div <div
class="menuDev" class="menuDev"
v-for="item in shipinList" v-for="item in shipinList"
@ -18,7 +19,7 @@
</div> </div>
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div> <div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
</div> </div>
</div> </div> -->
</el-scrollbar> </el-scrollbar>
<div class="notoDta" v-if="shipinList.length == 0"> <div class="notoDta" v-if="shipinList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
@ -110,19 +111,22 @@ let objData = ref({
//设备列表的点击操作 //设备列表的点击操作
const checkVideo = async (item: any) => { const checkVideo = async (item: any) => {
// 避免点击父节点导致无法出现视频
if(item.serialNumber){
ysyParams.value = item; ysyParams.value = item;
cameraIndexCode.value = item.serialNumber; cameraIndexCode.value = item.serialNumber;
if (videoType.value !== 1) { if (videoType.value !== 1) {
previewVideo(cameraIndexCode.value); previewVideo(cameraIndexCode.value);
} }
}
}; };
// 定义个变量保存播放ID // 定义个变量保存播放ID
// let firstVideoId = ref("" as any); // let firstVideoId = ref("" as any);
//获取视频列表 //获取视频列表
const getVideoList = async () => { const getVideoList = async () => {
let res: any = await selectProjectVideoListApi({ let res: any = await selectProjectVideoListApi({
projectSn: store.sn, projectSn: store.sn
all: 1 // all: 1
// all=1查全部 // all=1查全部
}); });
shipinList.value = res.result.videoList; shipinList.value = res.result.videoList;
@ -472,4 +476,36 @@ const previewVideo = (data: string | null) => {
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
// element-plus组件样式
:deep() {
.el-tree {
background-color: transparent;
}
.el-tree-node:focus > .el-tree-node__content {
// background-color: #141E2B;
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
background-size: 100% 100%;
}
.el-tree>.el-tree-node>.el-tree-node__content {
// background-color: #141E2B;
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
background-size: 100% 100%;
}
.el-tree-node__children .el-tree-node__content {
background-color: transparent;
}
.el-tree>.el-tree-node>.el-tree-node__content:hover {
// background-color: #141E2B;
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
background-size: 100% 100%;
}
.el-tree-node__label {
color: white;
font-size: 16px;
margin-bottom: 1px;
}
.el-tree-node__expand-icon {
font-size: 16px;
}
}
</style> </style>