fix

virgo.wzfrontend/console/package-lock.json

@@ -7066,6 +7066,11 @@
 			"integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
 			"dev": true
 		},
+		"ezuikit-js": {
+			"version": "7.7.7",
+			"resolved": "https://registry.npmmirror.com/ezuikit-js/-/ezuikit-js-7.7.7.tgz",
+			"integrity": "sha512-VRkQN5u7bTdSwCqQYk3db7lR2kiXdCrMzr/rwmRZww8xqeXaghgttPjjI/kS+u/xVMAkl6hp9+47Yxs/zBRB8A=="
+		},
 		"fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",

virgo.wzfrontend/console/package.json

@@ -12,6 +12,7 @@
 		"core-js": "^3.3.2",
 		"dayjs": "^1.11.11",
 		"element-ui": "^2.15.13",
+		"ezuikit-js": "^7.7.7",
 		"jquery": "^3.7.1",
 		"path-browserify": "^1.0.1",
 		"svg-sprite-loader": "^6.0.11",

virgo.wzfrontend/console/src/components/common/model.vue

@@ -1132,7 +1132,6 @@
 							} else if (this.type === 'outdoor') {
 								this.bimViewer.setCameraState(this.outdoorState);
 								this.bimViewer.overrideComponentsColorByObjectData();
-								this.bimViewer.setGlowEffectById(["912369"]);
 							} else if (this.type === 'lift') {
 								this.bimViewer.setCameraState(this.liftState);
 								for (var i = 0; i < this.liftPosition.length; i++) {
@@ -1344,6 +1343,13 @@
 					a
 				}
 			},
+			outdoor(isOpen, ids) {
+				if (isOpen) {
+					this.bimViewer.setGlowEffectById(ids);
+				} else {
+					this.bimViewer.removeGlowEffectById(ids);
+				}
+			}
 		},
 	}
 </script>

virgo.wzfrontend/console/src/components/work/common/playVideo.vue

@@ -0,0 +1,153 @@
+<template>
+	<div id="video-box" class="video">
+		<div :id="'ezuikit-player' + _uid"></div>
+	</div>
+</template>
+<script>
+	import EZUIKit from 'ezuikit-js';
+	import {
+		getCameraAccessToken
+	} from '@/httpApi/operation'
+	export default {
+		props: {
+			width: {
+				type: Number,
+				default: 352
+			},
+			height: {
+				type: Number,
+				default: 198
+			},
+			sourceUrl: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				player: null
+			};
+		},
+		computed: {},
+		created() {
+			let _self = this;
+			_self.$nextTick(() => {
+				this.init();
+			});
+		},
+		beforeDestroy() {
+			if (this.player) this.destroy() //销毁并停止直播视频
+		},
+		destroy() {
+			if (this.player) this.destroy() //销毁并停止直播视频
+		},
+		methods: {
+			init() {
+				if (this.player) {
+					this.destroy();
+				}
+				getCameraAccessToken().then(res => {
+					if (res.state) {
+						this.player = new EZUIKit.EZUIKitPlayer({
+							id: "ezuikit-player" + this._uid, // 视频容器ID
+							accessToken: res.data,
+							url: "ezopen://open.ys7.com/G99198109/1.hd.live",
+							template: "simple",
+							audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
+							autoplay: false,
+							width: this.width,
+							height: this.height,
+							handleSuccess: () => {
+								// this.stop();
+								console.log('-----success');
+							}
+						});
+					}
+				})
+			},
+			play() {
+				var playPromise = this.player.play();
+				playPromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			stop() {
+				var stopPromise = this.player.stop();
+				stopPromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			getOSDTime() {
+				var getOSDTimePromise = this.player.getOSDTime();
+				getOSDTimePromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			capturePicture() {
+				var capturePicturePromise = this.player.capturePicture(
+					`${new Date().getTime()}`
+				);
+				capturePicturePromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			openSound() {
+				var openSoundPromise = this.player.openSound();
+				openSoundPromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			closeSound() {
+				var openSoundPromise = this.player.closeSound();
+				openSoundPromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			startSave() {
+				var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
+				startSavePromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			stopSave() {
+				var stopSavePromise = this.player.stopSave();
+				stopSavePromise.then((data) => {
+					console.log("promise 获取 数据", data);
+				});
+			},
+			ezopenStartTalk() {
+				this.player.startTalk();
+			},
+			ezopenStopTalk() {
+				this.player.stopTalk();
+			},
+			fullScreen() {
+				this.player.fullScreen();
+			},
+			destroy() {
+				if (!this.player.destroy) return;
+				this.stop();
+				var destroyPromise = this.player.destroy();
+				destroyPromise.then((data) => {
+					console.log("promise 移除", data);
+				});
+				this.player = null;
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.video {
+		width: 100%;
+		height: 100%;
+
+		.loading {
+			display: none;
+		}
+	}
+
+	#webpack-dev-server-client-overlay {
+		display: none !important;
+	}
+</style>

virgo.wzfrontend/console/src/components/work/common/selectSpace.vue

@@ -0,0 +1,63 @@
+<template>
+	<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>
+							</div>
+						</el-tree>
+					</div>
+				</el-collapse-item>
+			</el-collapse>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		getProjectDetailById,
+	} from '@/httpApi/space'
+	export default {
+		data() {
+			return {
+				treeData: [],
+				nowItem: {},
+				defaultProps: {
+					label: 'name'
+				},
+				activeName: [],
+			}
+		},
+		created() {
+			this.initList();
+		},
+		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;
+			},
+		},
+	}
+</script>
+
+<style>
+</style>

virgo.wzfrontend/console/src/components/work/common/testAlarm.vue

@@ -0,0 +1,85 @@
+<template>
+	<div class="hui-test-alarm">
+		<div class="test-box">
+			<div class="test-item">
+				<div class="test-icon">
+					<i class="iconfont huifont-yunhang"></i>
+				</div>
+				<div class="test-label">
+					<div class="test-name">设备总数</div>
+					<div class="test-value alibaba">100</div>
+				</div>
+			</div>
+			<div class="test-item">
+				<div class="test-icon green">
+					<i class="iconfont huifont-shebei"></i>
+				</div>
+				<div class="test-label">
+					<div class="test-name">运行设备</div>
+					<div class="test-value alibaba">86</div>
+				</div>
+			</div>
+			<div class="test-item">
+				<div class="test-icon gray">
+					<i class="iconfont huifont-lixian"></i>
+				</div>
+				<div class="test-label">
+					<div class="test-name">离线设备</div>
+					<div class="test-value alibaba">14</div>
+				</div>
+			</div>
+		</div>
+		<div class="alarm-table-box hui-flex">
+			<div class="alarm-title">
+				<div class="hui-chart-title">
+					设备报警
+				</div>
+				<div class="alarm-tr">
+					<span class="tr-100">设备名称</span>
+					<span class="tr-flex">报警信息</span>
+					<span class="tr-130">报警时间</span>
+					<span class="tr-50">状态</span>
+				</div>
+			</div>
+			<div class="alarm-table hui-flex-box">
+				<div class="alarm-tr">
+					<span class="tr-100 hui-ellipsis">设备1</span>
+					<span class="tr-flex hui-ellipsis">报警信息发的啥响声</span>
+					<span class="tr-130">2024-01-12 12:14:10</span>
+					<span class="tr-50 color-red">报警中</span>
+				</div>
+				<div class="alarm-tr">
+					<span class="tr-100 hui-ellipsis">设备2</span>
+					<span class="tr-flex hui-ellipsis">报警信息发的啥响声</span>
+					<span class="tr-130">2024-01-12 12:14:10</span>
+					<span class="tr-50 color-primary">修复中</span>
+				</div>
+				<div class="alarm-tr">
+					<span class="tr-100 hui-ellipsis">设备3</span>
+					<span class="tr-flex hui-ellipsis">报警信息发的啥响声</span>
+					<span class="tr-130">2024-01-12 12:14:10</span>
+					<span class="tr-50 color-green">已修复</span>
+				</div>
+				<div class="alarm-tr">
+					<span class="tr-100 hui-ellipsis">设备4</span>
+					<span class="tr-flex hui-ellipsis">报警信息发的啥响声</span>
+					<span class="tr-130">2024-01-12 12:14:10</span>
+					<span class="tr-50 color-red">报警中</span>
+				</div>
+				<div class="alarm-tr">
+					<span class="tr-100 hui-ellipsis">设备5</span>
+					<span class="tr-flex hui-ellipsis">报警信息发的啥响声</span>
+					<span class="tr-130">2024-01-12 12:14:10</span>
+					<span class="tr-50 color-red">报警中</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	
+</style>

virgo.wzfrontend/console/src/httpApi/operation.js

@@ -119,7 +119,7 @@ export function updateMeeting(data) {
 		method: 'put',
 		data: data
 	})
-}
+}
 /* 
  * 获取会议详情
  * 
@@ -141,4 +141,15 @@ export function deleteMeetingById(id) {
 		url: `/api/meetingMinutes/${id}`,
 		method: 'delete'
 	})
+}
+/* 
+ * 获取摄像头AccessToken
+ * @data {Object}
+ * 
+ */
+export function getCameraAccessToken() {
+	return request({
+		url: `/ringzle/iot/camera/accessToken`,
+		method: 'get'
+	})
 }

virgo.wzfrontend/console/src/router/modules/operation.js

@@ -20,11 +20,25 @@ const operation = [{
 		title: '会议设置'
 	}
 }, {
-	path: 'operation/bim',
-	component: () => import('@/views/work/operation/bim'),
-	name: '模型设备',
+	path: 'operation/device/device',
+	component: () => import('@/views/work/operation/device/device'),
+	name: '冷源设备',
 	meta: {
-		title: '模型设备'
+		title: '冷源设备'
+	}
+}, {
+	path: 'operation/device/monitor',
+	component: () => import('@/views/work/operation/device/monitor'),
+	name: '监控设备',
+	meta: {
+		title: '监控设备'
+	}
+}, {
+	path: 'operation/device/outdoor',
+	component: () => import('@/views/work/operation/device/outdoor'),
+	name: '照明设备',
+	meta: {
+		title: '照明设备'
 	}
 }]
 export default operation;

virgo.wzfrontend/console/src/uitls/controls.js

@@ -484,6 +484,10 @@ class bimView {
 			model3D.getComponentsByConditions(query, data => {
 				this.setGlowEffectById(data);
 			})
+		}
+		this.removeGlowEffectById = (ids) => {
+			model3D.removeGlowEffectById(ids);
+			viewer3D.render();
 		}
 		this.clearGlowEffect = () => {
 			model3D.clearGlowEffect();

virgo.wzfrontend/console/src/views/system/log.vue

@@ -137,27 +137,36 @@
 				<div class="log-box">
 					<div class="log-item">1、修改用户登录不同类型项目和身份显示不同菜单。</div>
 					<div class="log-item">2、切换项目身份显示不同菜单。</div>
-					<div class="log-item">3、编写用户手册的部分功能(<span class="download-item" @click="download(13808)">点击下载</span>)。
+					<div class="log-item">3、编写用户手册的部分功能(<span class="download-item"
+							@click="download(13808)">点击下载</span>)。
+					</div>
+				</div>
+			</el-timeline-item>
+			<el-timeline-item timestamp="2024-07-02" placement="top">
+				<div class="log-box">
+					<div class="log-item">1、新增运维管理-模型设备，展示BIM模型。</div>
+					<div class="log-item">2、实现部分小程序页面(<span class="download-item" @click="download(13809)">点击下载</span>)。
+					</div>
+				</div>
+			</el-timeline-item>
+			<el-timeline-item timestamp="2024-07-03" placement="top">
+				<div class="log-box">
+					<div class="log-item">
+						1、完成用户手册的全部功能的编写(<span class="download-item" @click="download(13816)">点击下载用户手册</span>)。
+					</div>
+					<div class="log-item">2、修复一些自测时的BUG
+						<div class="log-item">1、修复工单过程操作显示的BUG。</div>
+						<div class="log-item">2、修复账单操作显示的BUG。</div>
+					</div>
+				</div>
+			</el-timeline-item>
+			<el-timeline-item timestamp="2024-07-04" placement="top">
+				<div class="log-box">
+					<div class="log-item">
+						1、新增监控设备功能。
+						2、新增照明设备功能，开关灯能在模型上体现。
 					</div>
 				</div>
-			</el-timeline-item>
-			<el-timeline-item timestamp="2024-07-02" placement="top">
-				<div class="log-box">
-					<div class="log-item">1、新增运维管理-模型设备，展示BIM模型。</div>
-					<div class="log-item">2、实现部分小程序页面(<span class="download-item" @click="download(13809)">点击下载</span>)。
-					</div>
-				</div>
-			</el-timeline-item>
-			<el-timeline-item timestamp="2024-07-03" placement="top">
-				<div class="log-box">
-					<div class="log-item">
-						1、完成用户手册的全部功能的编写(<span class="download-item" @click="download(13816)">点击下载用户手册</span>)。
-					</div>
-					<div class="log-item">2、修复一些自测时的BUG
-						<div class="log-item">1、修复工单过程操作显示的BUG。</div>
-						<div class="log-item">2、修复账单操作显示的BUG。</div>
-					</div>
-				</div>
 			</el-timeline-item>
 		</el-timeline>
 	</div>

virgo.wzfrontend/console/src/views/work/operation/bim.vue

@@ -345,7 +345,7 @@
 </template>
 
 <script>
-	import model from '@/components/common/model'
+	import model from '@/components/work/common/model'
 	export default {
 		data() {
 			return {
@@ -755,7 +755,7 @@
 			top: 20px;
 			width: 210px;
 			height: 80px;
-			background-image: url(../../../assets/image/coldsource/time3.png);
+			background-image: url(../../../../assets/image/coldsource/time3.png);
 			background-size: 100% 100%;
 			display: flex;
 			align-items: center;
@@ -765,7 +765,7 @@
 			.real-time-image {
 				width: 60px;
 				height: 60px;
-				background-image: url(../../../assets/image/coldsource/time2.png);
+				background-image: url(../../../../assets/image/coldsource/time2.png);
 				background-size: 100% 100%;
 				margin-right: 10px;
 				position: relative;
@@ -776,7 +776,7 @@
 				content: '';
 				width: 20px;
 				height: 20px;
-				background-image: url(../../../assets/image/coldsource/time1.png);
+				background-image: url(../../../../assets/image/coldsource/time1.png);
 				background-size: 100% 100%;
 				top: 20px;
 				left: 20px;
@@ -847,7 +847,7 @@
 
 			.cold-energy-label {
 				margin: 10px auto;
-				background-image: url(../../../assets/image/coldsource/chart-box.png);
+				background-image: url(../../../../assets/image/coldsource/chart-box.png);
 				background-size: 100% 100%;
 				width: 210px;
 				height: 35px;
@@ -956,7 +956,7 @@
 
 		.chart-title::before {
 			content: '';
-			background-image: url(../../../assets/image/coldsource/chart-line.png);
+			background-image: url(../../../../assets/image/coldsource/chart-line.png);
 			background-size: 100% 100%;
 			bottom: 0;
 			left: 0;
@@ -971,7 +971,7 @@
 			.now-item {
 				flex: 1;
 				margin-right: 10px;
-				background-image: url(../../../assets/image/coldsource/chart-image3.png);
+				background-image: url(../../../../assets/image/coldsource/chart-image3.png);
 				background-size: 100% 100%;
 				font-size: 12px;
 				margin-bottom: 8px;
@@ -1060,7 +1060,7 @@
 			.count-label {
 				flex: 1;
 				width: 0;
-				background-image: url(../../../assets/image/coldsource/chart-box.png);
+				background-image: url(../../../../assets/image/coldsource/chart-box.png);
 				background-size: 100% 100%;
 				display: flex;
 				align-items: center;
@@ -1091,11 +1091,11 @@
 			}
 
 			.count-image1 {
-				background-image: url(../../../assets/image/coldsource/chart-image1.png);
+				background-image: url(../../../../assets/image/coldsource/chart-image1.png);
 			}
 
 			.count-image2 {
-				background-image: url(../../../assets/image/coldsource/chart-image2.png);
+				background-image: url(../../../../assets/image/coldsource/chart-image2.png);
 			}
 		}
 	}

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

@@ -0,0 +1,311 @@
+<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>

virgo.wzfrontend/console/src/views/work/operation/device/outdoor.vue

@@ -0,0 +1,268 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="outdoor box-background">
+				<div class="outdoor-box">
+					<div class="outdoor-center">
+						<div class="bim-box" style="margin-top: 0;">
+							<model ref="model" type="outdoor" fileId="10000780512264"></model>
+						</div>
+					</div>
+					<div class="outdoor-right color-font">
+						<div class="outdoor-light-all">
+							<div class="hui-chart-title">
+								照明控制
+							</div>
+							<div class="light-box">
+								<span class="light-label">
+									照明群控
+								</span>
+								<div class="light-operation">
+									<i class="iconfont huifont-zhaoming"></i>
+									<span class="label">{{allChecked?'全关':'全开'}}</span>
+									<el-switch v-model="allChecked" @change="changeAllChecked"></el-switch>
+								</div>
+							</div>
+						</div>
+						<div class="outdoor-light">
+							<div class="outdoor-operation-title">
+								<div class="hui-chart-title">
+									照明控制
+								</div>
+							</div>
+							<div class="outdoor-operation-list">
+								<div class="light-box">
+									<span class="light-label">
+										独立控制
+									</span>
+									<div class="light-operation" v-if="checkList.length > 0">
+										<el-button size="mini" type="primary" @click="open(true)">打开</el-button>
+										<el-button size="mini" @click="open(false)">关闭</el-button>
+									</div>
+								</div>
+								<el-checkbox-group class="outdoor-operation-box" v-model="checkList">
+									<div class="outdoor-operation-item" v-for="(item,index) in itemList" :key="item.id">
+										<div class="outdoor-operation-box">
+											<el-checkbox :label="item.id">
+												{{item.name}}
+											</el-checkbox>
+											<span class="label color-primary" v-if="item.isOpen">打开</span>
+											<span class="label" v-else>关闭</span>
+										</div>
+									</div>
+								</el-checkbox-group>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import testAlarm from '@/components/work/common/testAlarm'
+	import selectSpace from '@/components/work/common/selectSpace'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {
+				allChecked: false,
+				checkList: [],
+				itemList: [{
+					id: 1,
+					name: '1F',
+					isOpen: false,
+					elementId: '834601'
+				}, {
+					id: 2,
+					name: '2F',
+					isOpen: false,
+					elementId: '856814'
+				}, {
+					id: 3,
+					name: '3F',
+					isOpen: false,
+					elementId: '883538'
+				}, {
+					id: 4,
+					name: '外墙',
+					isOpen: false,
+					elementId: '912369'
+				}]
+			}
+		},
+		methods: {
+			name() {
+
+			},
+			changeAllChecked(val) {
+				this.$refs.model.outdoor(val, this.itemList.map(node => node.elementId));
+				for (var i = 0; i < this.itemList.length; i++) {
+					this.itemList[i].isOpen = val;
+				}
+			},
+			open(isOpen) {
+				let data = this.itemList.filter(node => this.checkList.filter(res => res === node.id).length > 0);
+				this.$refs.model.outdoor(isOpen, data.map(node => node.elementId));
+				for (var i = 0; i < data.length; i++) {
+					data[i].isOpen = isOpen;
+				}
+				this.allChecked = this.itemList.filter(res => !res.isOpen) == 0;
+				this.checkList = [];
+				this.$message.success('操作成功');
+			}
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.outdoor {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.outdoor-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.outdoor-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.outdoor-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.outdoor-title {
+			padding: 20px 20px 0 20px;
+			margin-bottom: 12px;
+		}
+
+		.outdoor-light-all {
+			padding: 20px 10px 20px 20px;
+			background: rgba(0, 4, 10, 0.3);
+		}
+
+		.outdoor-light {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.outdoor-operation-title {
+			padding: 20px 20px 0px 20px;
+		}
+
+		.outdoor-operation-list {
+			flex: 1;
+			height: 0;
+			overflow-y: auto;
+			padding: 0 10px 0 20px;
+			margin-bottom: 20px;
+		}
+
+		.outdoor-operation-box {
+			display: flex;
+			flex-wrap: wrap;
+
+			.outdoor-operation-item {
+				flex: 1;
+				margin-top: 10px;
+				width: 0;
+				min-width: 50%;
+				padding-right: 10px;
+
+				.outdoor-operation-box {
+					display: flex;
+					align-items: center;
+					padding: 0 16px;
+					height: 48px;
+					background: #1E2430;
+					border-radius: 8px;
+				}
+
+				.label {
+					font-size: 14px;
+				}
+			}
+
+			.el-checkbox {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+			}
+		}
+
+		.light-box {
+			height: 68px;
+			background: #1E2430;
+			border-radius: 8px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 16px;
+			padding: 0 20px;
+			margin-right: 10px;
+
+			.huifont-zhaoming {
+				font-size: 20px;
+			}
+
+			.light-operation {
+				display: flex;
+				align-items: center;
+
+				.label {
+					margin: 0 8px 0 12px;
+				}
+			}
+		}
+
+		.el-switch {
+			.el-switch__core {
+				width: 24px !important;
+				height: 12px;
+				line-height: 12px;
+				background: rgba(255, 255, 255, 0.2);
+				border: none;
+			}
+		}
+
+		.el-switch.is-checked .el-switch__core {
+			background: $--color-primary;
+		}
+
+		.el-switch .el-switch__core::after {
+			width: 10px;
+			height: 10px;
+			top: 1px;
+		}
+
+		.el-switch.is-checked .el-switch__core::after {
+			margin-left: -10px;
+		}
+	}
+</style>