From 5651cc6d01e0a6c760d6294bb2f0f90f381acb5c Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Thu, 21 Mar 2024 10:25:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B8=83=E5=B1=80=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../videoManagement/index.vue                 | 60 +++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/views/sevenLargeScreen/videoManagement/index.vue b/src/views/sevenLargeScreen/videoManagement/index.vue
index c5b3351..5f10891 100644
--- a/src/views/sevenLargeScreen/videoManagement/index.vue
+++ b/src/views/sevenLargeScreen/videoManagement/index.vue
@@ -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>