realty/virgo.wzfrontend/console/src/views/work/operation/device/monitor.vue

<template>
	<div class="work-monitor">
		<div class="yui-tree-box">
			<div class="hui-left-tree">
				<div class="hui-left-tree-title">
					<svg-icon name="zhuangshi" width="16" height="20"></svg-icon>
					<span class="hui-left-tree-sub">摄像列表</span>
				</div>
				<div class="hui-left-tree-content">
					<el-collapse v-model="activeName">
						<el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id">
							<template slot="title">
								<i class="iconfont huifont-shuzhuangcaidantubiao"></i>
								<span class="el-collapse-name">{{item.name}}</span>
							</template>
							<div>
								<el-tree :data="item.projectItemTargetList" :props="defaultProps"
									@node-click="selectItem">
									<div :class="'tree-node' + (data.id == nowItem.id ? ' active':'')"
										slot-scope="{ node, data }">
										<span class="tree-node-label">{{ node.label }}</span>
										<i class="iconfont huifont-shexiangtou"></i>
									</div>
								</el-tree>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
			<div class="hui-tree-content">
				<model type="monitor" fileId="10000786668235" @tipClick="tipClick"></model>
			</div>
			<div class="placeholder"></div>
		</div>
		<div :class="'monitor-box' + (isOpen?' open':'')">
			<div class="monitor-tag" @click="isOpen = !isOpen">
				<div class="iconfont-box">
					<i class="iconfont huifont-a-zhankaishousuo"></i>
				</div>
			</div>
			<div class="hui-flex box-background">
				<div class="monitor-box-title">
					二号楼 / 二层
				</div>
				<div class="monitor-list hui-flex-box">
					<div class="monitor-item">
						<div class="monitor-item-box">
							<play-video :width="352" :height="198"></play-video>
							<!-- <div class="monitor-date">2023-12-22 04:12:32</div>
							<div class="monitor-space">1号楼-3层-设备间-摄像头001</div>
							<div class="monitor-operation"></div>
							<div class="monitor-download">
								<i class="iconfont huifont-xiazai"></i>
							</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="摄像头" custom-class="monitor-dialog" :visible.sync="visible" width="900px" height="500px"
			:append-to-body="true">
			<div class="hui-dialog">
				<play-video :width="900" :height="445"></play-video>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getProjectDetailById,
	} from '@/httpApi/space'
	import playVideo from '@/components/work/common/playVideo'
	import model from '@/components/work/common/model'
	import {
		roomList
	} from '@/uitls';
	export default {
		data() {
			return {
				type: 'device',
				treeData: [],
				nowItem: {},
				defaultProps: {
					label: 'name'
				},
				activeName: [],
				isOpen: false,
				visible: false
			}
		},
		created() {
			this.initList();
		},
		components: {
			playVideo,
			model
		},
		methods: {
			initList() {
				getProjectDetailById(this.$store.getters.project.id).then(res => {
					if (res.state) {
						this.treeData = res.data.projectItemList;
						this.activeName = this.treeData.map(node => node.id);
					}
				})
			},
			selectItem(item) {
				if (item.projectItemTargetId) this.nowItem = item;
			},
			tipClick() {
				this.visible = true;
			}
		},
	}
</script>

<style lang="scss">
	.el-dialog.monitor-dialog {
		height: 500px;
		margin-top: 20vh !important;
	}

	.work-monitor {
		position: relative;
		width: 100%;
		height: 100%;

		.yui-tree-box {
			width: 100%;
			height: 100%;
		}

		.tree-node {
			display: flex;
			align-items: center;

			.tree-node-label {
				flex: 1;
				width: 0;
			}

			i {
				opacity: 0.5;
			}
		}

		.active {
			color: $--color-primary;

			i {
				opacity: 1;
			}
		}

		.placeholder {
			width: 400px;
		}



		.monitor-box {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 412px;
			padding-left: 12px;
			background: #11131B;

			.monitor-tag {
				position: absolute;
				top: 50%;
				left: 0px;
				width: 12px;
				line-height: 70px;
				opacity: 0.8;
				text-align: center;
				cursor: pointer;

				.iconfont-box {
					display: inline-block;
				}

				i {
					position: relative;
					font-size: 12px;
				}
			}

			.monitor-tag::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-right: 12px solid #303848;
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
			}

			.monitor-box-title {
				padding: 20px;
				padding-bottom: 10px;
			}

			.monitor-list {
				padding: 10px 5px 5px 20px;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
			}

			.monitor-item {
				padding-bottom: 15px;
				padding-right: 15px;
				font-size: 12px;
				cursor: pointer;
				width: 100%;

				.monitor-item-box {
					width: 100%;
					height: 100%;
					border: 1px solid #607182;
					position: relative;
					height: 200px;
					overflow: hidden;
				}

				img {
					width: 100%;
					height: 100%;
				}

				.monitor-date {
					position: absolute;
					top: 8px;
					left: 14px;
					text-shadow: 0px 1px 2px #000000;

				}

				.monitor-space {
					position: absolute;
					bottom: 0;
					width: 100%;
					font-size: 12px;
					padding: 5px 18px;
				}

				.monitor-operation {
					width: 100%;
					position: absolute;
					height: 30px;
					background: #000000;
					bottom: -30px;
					transition: all 200ms linear;
				}

				.monitor-download {
					width: 24px;
					height: 24px;
					background: #000000;
					border-radius: 2px;
					opacity: 0.79;
					position: absolute;
					top: 8px;
					right: 8px;
					text-align: center;
					line-height: 24px;
					top: -24px;
					transition: all 200ms linear;
					padding-right: 1px;
				}
			}

			.monitor-item:hover {

				.monitor-item-box {
					border: 1px solid $--color-primary;
				}

				.monitor-operation {
					bottom: 0px;
				}

				.monitor-download {
					opacity: 1;
					top: 8px;
				}
			}
		}

		.open.monitor-box {
			width: 100%;


			.monitor-item {
				width: 25%;
				min-width: 360px;
			}

			.monitor-tag {
				.iconfont-box {
					transform: rotate(180deg);
				}
			}
		}
	}
</style>