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-21 10:25:12 +08:00
parent a44347ebfe
commit 5651cc6d01
1 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,9 @@
<div class="videoListBig">
<Card title="监控设备列表">
<el-scrollbar style="height: 100%">
<div class="decivList">
<el-tree ref="treeRef" default-expand-all icon="ArrowRight" :data="shipinList" node-key="name" :props="defaultProps" @node-click="checkVideo">
</el-tree>
<!-- <div class="decivList">
<div
class="menuDev"
v-for="item in shipinList"
@ -17,7 +19,7 @@
</div>
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
</div>
</div>
</div> -->
</el-scrollbar>
<div class="notoDta" v-if="shipinList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
@ -61,11 +63,16 @@ import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } fr
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import { selectProjectVideoListApi, getSafeHatSessionApi, getVideoItemInfoApi } from "@/api/modules/video";
const store = GlobalStore();
const defaultProps = {
children: "list",
label: (data: any, node: any) => node.data.name
};
let videoType = ref("") as any;
let ysyParams = ref({} as any);
let shipinList = ref([] as any);
const store = GlobalStore();
const playWndBox = ref(null);
let playWndHeight = ref("");
let playWndWidth = ref("");
@ -125,7 +132,7 @@ const checkVideo = async (item: any) => {
const getVideoList = async () => {
let res: any = await selectProjectVideoListApi({
projectSn: store.sn,
all: 1
// all: 1
// all=1查全部
});
shipinList.value = res.result.videoList;
@ -475,4 +482,49 @@ const previewVideo = (data: string | null) => {
background-size: 100% 100%;
}
}
// element-plus组件样式
:deep() {
.el-tree {
background-color: transparent;
}
.el-tree>.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%;
position: relative;
z-index: 10;
}
.el-tree-node__children .el-tree-node__content {
background-color: transparent;
}
.el-tree-node__children .el-tree-node {
margin-top: 3%;
}
.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>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
margin-left: 8%;
}
.el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__expand-icon {
color: white;
font-size: 16px;
position: absolute;
right: 0;
top: 0;
}
}
</style>