fix

virgo.wzfrontend/console/package-lock.json

@@ -14014,6 +14014,15 @@
 				}
 			}
 		},
+		"vue-organization-chart": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmmirror.com/vue-organization-chart/-/vue-organization-chart-1.1.6.tgz",
+			"integrity": "sha512-ahBOihCLxuCIAjRWAKysVUuAZgP+lcNKq2x2OQOGnzrI8QIeINx+fmAESpQT8uwmCRiMlwRhfd7Rr1ORXYQxbg==",
+			"requires": {
+				"jquery": "^3.3.1",
+				"vue": "^2.5.17"
+			}
+		},
 		"vue-router": {
 			"version": "3.6.5",
 			"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",

virgo.wzfrontend/console/package.json

@@ -19,6 +19,7 @@
 		"svg-sprite-loader": "^6.0.11",
 		"terser-webpack-plugin": "^3.0.1",
 		"vue": "^2.6.10",
+		"vue-organization-chart": "^1.1.6",
 		"vue-router": "^3.1.3",
 		"vuex": "^3.0.1"
 	},

virgo.wzfrontend/console/public/index.html

@@ -5,7 +5,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<link rel="icon" href="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3156449b8a1a4874981b2a76d5947721">
 		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>reset.css" />
-		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_7ta6ukcxj3a.css">
+		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_x95h0gxg7vk.css">
 		<title>有极</title>
 		<script src="<%= BASE_URL %>jquery.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

virgo.wzfrontend/console/src/axios/index.js

@@ -7,7 +7,8 @@ import {
 	Message
 } from 'element-ui'
 const service = axios.create({
-	baseURL: baseConfig.baseURL,
+	baseURL: baseConfig.baseURL,
+	// baseURL:'https://116.204.115.255',
 	timeout: 6000000, // 请求超时时间
 })
 /* 消息提示 */

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

@@ -0,0 +1,123 @@
+<template>
+	<div class="year-range-picker">
+		<el-date-picker v-model="dateList[0]" prefix-icon="-" type="year" placeholder="开始年份" :size="size"
+			class="year-pickers" format="yyyy" :value-format="valueFormat" :picker-options="startDatePicker">
+		</el-date-picker>
+		<span class="range-word"> 至 </span>
+		<el-date-picker v-model="dateList[1]" prefix-icon="-" type="year" placeholder="结束年份" :size="size"
+			class="year-pickers" :value-format="valueFormat" :picker-options="endDatePicker">
+		</el-date-picker>
+	</div>
+</template>
+
+
+<script>
+	export default {
+		name: "el-year-picker",
+		// 接收父组件传入的数据
+		props: {
+			value: {
+				// type: Array,
+				required: true,
+			},
+			size: {
+				type: String,
+				default: 'mini'
+			},
+			valueFormat: {
+				type: String,
+				default: 'yyyy'
+			},
+		},
+		data() {
+			return {
+				dateList: [],
+				startDatePicker: this.beginDate(),
+				endDatePicker: this.processDate(),
+			};
+		},
+		watch: {
+			value(v) {
+				this.dateList = v || []
+			},
+			dateList(v) {
+				this.$emit('input', v)
+			}
+		},
+		mounted() {},
+		methods: {
+			// 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间
+
+			// 提出开始时间必须小于提出结束时间
+			beginDate() {
+				let self = this
+				return {
+					disabledDate(time) {
+						if (self.dateList[1] !== '') {
+							let fixedTime = new Date(time)
+							return fixedTime.getFullYear() > self.dateList[1]
+						}
+					}
+				}
+			},
+			// 提出结束时间必须大于提出开始时间
+			processDate() {
+				let self = this
+				return {
+					disabledDate(time) {
+						// let fixedTime = new Date(self.oldTime).getTime()
+						// return time.getTime() < fixedTime
+						let fixedTime = new Date(time)
+						return fixedTime.getFullYear() < self.dateList[0]
+					}
+				}
+			},
+
+		},
+	};
+</script>
+
+
+<style lang="scss">
+	.year-range-picker {
+		border: 1px solid $--input-border;
+		border-radius: 2px;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		height: 21px;
+
+		.range-word {
+			font-size: 12px;
+		}
+
+		.year-pickers {
+			.el-input__inner {
+				border: none;
+				text-align: center;
+				height: 19px;
+				line-height: 19px;
+			}
+		}
+	}
+
+	.year-range-picker:hover {
+		border-color: $--color-primary;
+	}
+
+	.el-picker-panel.el-date-picker.el-popper {
+		.el-date-picker__header--bordered {
+			border-color: $--color-border;
+		}
+
+		td .cell {
+			color: $--color-common
+		}
+
+		.el-year-table td.disabled .cell {
+			color: #606266;
+			background: transparent;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/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/iot'
+	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/G87900549/34.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/common/progressBar.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="progress-bar color-font" :style="'--percent:'+percent+';'">
+		<div class="title">{{title}}</div>
+		<svg class="progress-circle">
+			<circle stroke="var(--inactive-color)"
+				style="stroke-dasharray: calc(3.1415 * var(--r) * (360 - 120) / 180),calc(3.1415 * var(--r) * 120 / 180)" />
+			<circle stroke="var(--color)"
+				style="stroke-dasharray: calc(3.1415 * var(--r) * var(--percent) * var(--active-degree) / 180 / 100), 1000" />
+		</svg>
+		<div class="progress-label">
+			<span class="alibaba number">{{percent}}</span><span class="unit">%</span>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		props: ['percent', 'title'],
+		data() {
+			return {};
+		},
+		created() {},
+		methods: {}
+	};
+</script>
+
+<style lang="scss">
+	.progress-bar {
+		width: 140px;
+		position: relative;
+
+		.title {
+			text-align: center;
+			margin-bottom: 20px;
+			font-weight: 600;
+		}
+
+		.progress-label {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			left: 0;
+			width: 100%;
+			bottom: 60px;
+			justify-content: center;
+
+			.number {
+				font-size: 28px;
+			}
+
+			.unit {
+				opacity: 0.6;
+				margin-left: 4px;
+			}
+		}
+
+		/* 百分数 */
+		--percent: 100;
+		/* 尺寸大小 */
+		--size: 140px;
+		/* 环形宽度（粗细） */
+		--border-width: 9px;
+		/* 主色 */
+		--color: #2DB85C;
+		/* 辅助色 */
+		--inactive-color: #283040;
+		--r: calc((var(--size) - var(--border-width)) / 2);
+		--gap-degree: 120;
+		--active-degree: calc(360 - var(--gap-degree));
+
+		.progress-circle {
+			width: var(--size);
+			height: var(--size);
+			transform: rotate(-90deg);
+			border-radius: 50%;
+
+		}
+
+		circle {
+			cx: calc(var(--size) / 2);
+			cy: calc(var(--size) / 2);
+			r: calc((var(--size) - var(--border-width)) / 2);
+			fill: none;
+			stroke-width: var(--border-width);
+			stroke-linecap: round;
+			transition: stroke-dasharray 0.4s linear, stroke .3s;
+			transform: rotate(calc((var(--gap-degree) + (360 - var(--gap-degree)) / 2) * 1deg));
+			transform-origin: center;
+		}
+	}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="model-box">
+	<div class="model-box" @click="getView">
 		<div :id="'previewBim' + _uid" class="preview-bim"></div>
 	</div>
 </template>
@@ -423,26 +423,26 @@
 				powerdistributionState: {
 					"name": "persp",
 					"position": {
-						"x": 18981.703213178294,
-						"y": 21346.91584395075,
-						"z": 9020.996186069891
+						"x": 5534.535803870811,
+						"y": 90876.53553995928,
+						"z": -3314.823840911769
 					},
 					"target": {
-						"x": 52339.63442098335,
-						"y": 87432.90976155052,
-						"z": -39815.984792304145
+						"x": 38892.46701167584,
+						"y": 156962.5294575589,
+						"z": -52151.804819285775
 					},
 					"up": {
-						"x": 0.2481433070782138,
-						"y": 0.4915967416393178,
-						"z": 0.8347200385529828
+						"x": 0.24814330707818513,
+						"y": 0.49159674163953404,
+						"z": 0.8347200385528641
 					},
-					"near": 5.7482302730257295,
-					"far": 53553.619475280284,
-					"zoom": 5.457729171738497,
+					"near": 5.777222038555453,
+					"far": 40980.73258230227,
+					"zoom": 23.947915797812488,
 					"version": 1,
 					"fov": 45,
-					"aspect": 2.133676092544987,
+					"aspect": 2.0854271356783918,
 					"coordinateSystem": "world"
 				},
 				indoorState: {
@@ -1059,9 +1059,9 @@
 								this.bimViewer.setCameraState(this.powerdistributionState);
 								this.bimViewer.addDrawable({
 									position: {
-										"x": 31698.413249867033,
-										"y": 41833.74949199628,
-										"z": -2279.99997138977
+										"x": 7621.26346650055,
+										"y": 97886.27164849853,
+										"z": -6705.819606781007
 									},
 									html: `<div class="tips-5" style="width:170px;transform: scale(0.7);transform-origin: 0% 0%;">
 												<div class="title"><i class="iconfont huifont-shuzhuangcaidanxiala"></i>电配箱</div>
@@ -1091,9 +1091,9 @@
 								this.bimViewer.setCameraState(this.powerdistributionState);
 								this.bimViewer.addDrawable({
 									position: {
-										"x": 31698.413249867033,
-										"y": 41833.74949199628,
-										"z": -2279.99997138977
+										"x": 7621.26346650055,
+										"y": 97886.27164849853,
+										"z": -6705.819606781007
 									},
 									html: `<div class="tips-5" style="width:170px;transform: scale(0.7);transform-origin: 0% 0%;">
 												<div class="title"><i class="iconfont huifont-shuzhuangcaidanxiala"></i>电表1</div>

virgo.wzfrontend/console/src/components/work/energy/analysis/floorHvac.vue

@@ -0,0 +1,694 @@
+<template>
+	<div class="floor-hvac color-font">
+		<div class="floor-hvac-flex" style="margin-bottom: 16px;">
+			<div class="floor-hvac-item floor-hvac-item-big">
+				<div class="hui-chart-title">
+					楼层用电量统计
+					<div class="combination-select">
+						<el-select size="mini" v-model="value" placeholder="请选择">
+							<el-option label="1F" :value="1">
+							</el-option>
+							<el-option label="2F" :value="2">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="floor-hvac-content">
+					<div class="floor-hvac-test">
+						<div class="floor-hvac-number">
+							<div class="number-item">
+								<div class="number-icon">
+									<i class="iconfont huifont-dian"></i>
+								</div>
+								<div class="number-text">
+									<div class="number-count">
+										<span class="alibaba number">18</span>
+										<span class="unit">kwh</span>
+									</div>
+									<div class="number-label">
+										当日用电量
+									</div>
+								</div>
+							</div>
+							<div class="number-item">
+								<div class="number-icon">
+									<i class="iconfont huifont-kongtiao"></i>
+								</div>
+								<div class="number-text">
+									<div class="number-count">
+										<span class="alibaba number">18</span>
+										<span class="unit">kwh</span>
+									</div>
+									<div class="number-label">
+										当日制冷量
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="floor-hvac-list">
+							<div class="hvac-tr">
+								<div class="hvac-td hvac-flex">
+									单位面积用电量(kwh/m³)
+								</div>
+								<div class="hvac-td alibaba hvac-80 number">
+									156.2
+								</div>
+								<div class="hvac-td alibaba hvac-50 label">
+									年环比
+								</div>
+								<div class="hvac-td">
+									<div>
+										<span class="color-green alibaba">11.23%</span>
+										<i class="el-icon-bottom color-green"></i>
+									</div>
+								</div>
+							</div>
+							<div class="hvac-tr">
+								<div class="hvac-td hvac-flex">
+									当月用电量(kwh)
+								</div>
+								<div class="hvac-td alibaba hvac-80 number">
+									58
+								</div>
+								<div class="hvac-td alibaba hvac-50 label">
+									<div>年环比</div>
+									<div>月环比</div>
+								</div>
+								<div class="hvac-td">
+									<div>
+										<span class="color-green alibaba">11.23%</span>
+										<i class="el-icon-bottom color-green"></i>
+									</div>
+									<div>
+										<span class="color-red alibaba">1.23%</span>
+										<i class="el-icon-top color-red"></i>
+									</div>
+								</div>
+							</div>
+							<div class="hvac-tr">
+								<div class="hvac-td hvac-flex">
+									当年用电量(kwh)
+								</div>
+								<div class="hvac-td alibaba hvac-80 number">
+									156.2
+								</div>
+								<div class="hvac-td alibaba hvac-50 label">
+									年环比
+								</div>
+								<div class="hvac-td">
+									<div>
+										<span class="color-green alibaba">11.23%</span>
+										<i class="el-icon-bottom color-green"></i>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="hvac-electricity-box">
+						<div class="hvac-chart-title">
+							<span class="label">楼层电量趋势图</span>
+							<div class="year-picker">
+								<el-year-picker size="mini" v-model="year"></el-year-picker>
+							</div>
+						</div>
+						<div ref="chart1" class="hvac-chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="floor-hvac-item floor-hvac-item-small">
+				<div class="hui-chart-title">
+					楼层用电量排名
+					<div class="year-picker">
+						<el-year-picker size="mini" v-model="year"></el-year-picker>
+					</div>
+				</div>
+				<div class="floor-hvac-chart">
+					<div class="floor-hvac-chart-item">
+						<span class="label">平均值</span>
+						<span class="alibaba">72.36</span>
+						<span class="label">kwh</span>
+					</div>
+					<div class="floor-hvac-chart-item">
+						<span class="label">最大值</span>
+						<span class="alibaba">72.36</span>
+						<span class="label">kwh</span>
+					</div>
+					<div class="floor-hvac-chart-item">
+						<span class="label">最小值</span>
+						<span class="alibaba">12.36</span>
+						<span class="label">kwh</span>
+					</div>
+				</div>
+				<div ref="chart3" class="hvac-chart-box"></div>
+			</div>
+		</div>
+		<div class="floor-hvac-flex">
+			<div class="floor-hvac-item floor-hvac-item-big">
+				<div class="hui-chart-title">
+					楼层用电量统计
+					<div class="combination-select">
+						<el-select size="mini" v-model="value" placeholder="请选择">
+							<el-option label="1F" :value="1">
+							</el-option>
+							<el-option label="2F" :value="2">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="floor-hvac-content">
+					<div class="floor-hvac-test">
+						<div class="floor-hvac-number">
+							<div class="number-item">
+								<div class="number-icon">
+									<i class="iconfont huifont-dian"></i>
+								</div>
+								<div class="number-text">
+									<div class="number-count">
+										<span class="alibaba number">18</span>
+										<span class="unit">t</span>
+									</div>
+									<div class="number-label">
+										当日用水量
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="floor-hvac-list">
+							<div class="hvac-tr">
+								<div class="hvac-td hvac-flex">
+									单位面积用水量(t/m³)
+								</div>
+								<div class="hvac-td alibaba hvac-80 number">
+									156.2
+								</div>
+								<div class="hvac-td alibaba hvac-50 label">
+									年环比
+								</div>
+								<div class="hvac-td">
+									<div>
+										<span class="color-green alibaba">11.23%</span>
+										<i class="el-icon-bottom color-green"></i>
+									</div>
+								</div>
+							</div>
+							<div class="hvac-tr">
+								<div class="hvac-td hvac-flex">
+									当月用水量(t)
+								</div>
+								<div class="hvac-td alibaba hvac-80 number">
+									58
+								</div>
+								<div class="hvac-td alibaba hvac-50 label">
+									<div>年环比</div>
+									<div>月环比</div>
+								</div>
+								<div class="hvac-td">
+									<div>
+										<span class="color-green alibaba">11.23%</span>
+										<i class="el-icon-bottom color-green"></i>
+									</div>
+									<div>
+										<span class="color-red alibaba">1.23%</span>
+										<i class="el-icon-top color-red"></i>
+									</div>
+								</div>
+							</div>
+							<div class="hvac-tr">
+								<div class="hvac-td hvac-flex">
+									当年用水量(t)
+								</div>
+								<div class="hvac-td alibaba hvac-80 number">
+									156.2
+								</div>
+								<div class="hvac-td alibaba hvac-50 label">
+									年环比
+								</div>
+								<div class="hvac-td">
+									<div>
+										<span class="color-green alibaba">11.23%</span>
+										<i class="el-icon-bottom color-green"></i>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="hvac-electricity-box">
+						<div class="hvac-chart-title">
+							<span class="label">楼层水量趋势图</span>
+							<div class="year-picker">
+								<el-year-picker size="mini" v-model="year"></el-year-picker>
+							</div>
+						</div>
+						<div ref="chart2" class="hvac-chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="floor-hvac-item floor-hvac-item-small">
+				<div class="hui-chart-title">
+					楼层用水量排名
+					<div class="year-picker">
+						<el-year-picker size="mini" v-model="year"></el-year-picker>
+					</div>
+				</div>
+				<div class="floor-hvac-chart">
+					<div class="floor-hvac-chart-item">
+						<span class="label">平均值</span>
+						<span class="alibaba">72.36</span>
+						<span class="label">t</span>
+					</div>
+					<div class="floor-hvac-chart-item">
+						<span class="label">最大值</span>
+						<span class="alibaba">72.36</span>
+						<span class="label">t</span>
+					</div>
+					<div class="floor-hvac-chart-item">
+						<span class="label">最小值</span>
+						<span class="alibaba">12.36</span>
+						<span class="label">t</span>
+					</div>
+				</div>
+				<div ref="chart4" class="hvac-chart-box"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import elYearPicker from '@/components/common/elYearPicker'
+	export default {
+		data() {
+			return {
+				value: '',
+				year: []
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart1(this.$refs.chart1, [1, 2, 2, 3, 2, 3], [2, 3, 3, 4, 3, 4], new echarts.graphic
+					.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#FFD577'
+						},
+						{
+							offset: 1,
+							color: '#FFAA42'
+						}
+					]))
+				this.chart1(this.$refs.chart2, [1, 2, 2, 3, 2, 3], [2, 3, 3, 4, 3, 4], new echarts.graphic
+					.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#80DCBD'
+						},
+						{
+							offset: 1,
+							color: '#49B788'
+						}
+					]))
+				this.chart(this.$refs.chart3, [1, 2, 2, 3, 2, 3, 1, 2, 2, 3, 2, 3, 1, 1], new echarts.graphic
+					.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#FFD577'
+						},
+						{
+							offset: 1,
+							color: '#FFAA42'
+						}
+					]))
+				this.chart(this.$refs.chart4, [1, 2, 2, 3, 2, 3, 1, 2, 2, 3, 2, 3, 1, 1], new echarts.graphic
+					.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#80DCBD'
+						},
+						{
+							offset: 1,
+							color: '#49B788'
+						}
+					]))
+			})
+		},
+		methods: {
+			chart(elem, data, color) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: ['1F', '2F', '3F', '4F', '5F', '6F', '7F', '8F', '9F', '10F', '11F', '12F', '13F',
+							'14F'
+						],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '单位',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'bar',
+						barWidth: 10,
+						color: color,
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+			chart1(elem, data, data1, color) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '55',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '单位',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'bar',
+						barWidth: 10,
+						color: color,
+						z: 99
+					}, {
+						data: data1,
+						type: 'line',
+						symbolSize: 6,
+						color: ['#AFB9CC'],
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data1,
+						type: 'line',
+						showSymbol: false,
+						color: ['#AFB9CC'],
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			}
+		},
+		components: {
+			elYearPicker
+		}
+	}
+</script>
+
+<style lang="scss">
+	.floor-hvac {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+		font-size: 12px;
+
+		.floor-hvac-flex {
+			display: flex;
+		}
+
+		.floor-hvac-item-small {
+			flex: 1;
+			width: 0;
+			display: flex;
+			flex-direction: column;
+
+			.floor-hvac-chart {
+				padding-top: 30px;
+				display: flex;
+				justify-content: flex-end;
+			}
+
+			.floor-hvac-chart-item {
+				padding: 0 20px;
+
+				.alibaba {
+					margin: 0 3px 0 10px;
+					font-size: 14px;
+				}
+
+				.label {
+					opacity: 0.6;
+				}
+			}
+		}
+
+		.floor-hvac-item-big {
+			width: 800px;
+			margin-right: 16px;
+		}
+
+		.hvac-electricity-box {
+			width: 370px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.hvac-chart-box {
+			flex: 1;
+		}
+
+		.hvac-chart-title {
+			display: flex;
+			justify-content: space-between;
+
+			.label {
+				font-weight: 600;
+			}
+
+			.select {
+				width: 96px;
+			}
+
+			.date-picker {
+				width: 210px;
+			}
+
+			.year-picker {
+				width: 170px;
+			}
+		}
+
+		.floor-hvac-list {
+			margin-top: 13px;
+		}
+
+		.hvac-tr {
+			display: flex;
+			align-items: center;
+			background: #121926;
+			padding: 10px 12px;
+			margin-top: 5px;
+
+			.hvac-flex {
+				flex: 1;
+			}
+
+			.hvac-80 {
+				width: 80px;
+			}
+
+			.hvac-50 {
+				width: 50px;
+			}
+
+			.label {
+				opacity: 0.6;
+			}
+
+			.number {
+				font-size: 14px;
+			}
+		}
+
+		.floor-hvac-content {
+			padding-top: 16px;
+			display: flex;
+
+			.floor-hvac-test {
+				flex: 1;
+				margin-right: 20px;
+			}
+		}
+
+		.floor-hvac-number {
+			display: flex;
+
+			.number-item {
+				background: #121926;
+				flex: 1;
+				margin-right: 12px;
+				padding: 20px;
+				display: flex;
+				align-items: center;
+			}
+
+			.number-item:last-child {
+				margin-right: 0;
+			}
+
+			.number-icon {
+				width: 44px;
+				height: 44px;
+				border-radius: 16px;
+				text-align: center;
+				line-height: 44px;
+				background-color: #15223D;
+				margin-right: 16px;
+			}
+
+			.iconfont {
+				font-size: 24px;
+			}
+
+			.number {
+				font-size: 18px;
+				margin-right: 6px;
+			}
+
+			.number-count {
+				display: flex;
+				align-items: center;
+			}
+
+			.unit,
+			.number-label {
+				opacity: 0.6;
+			}
+		}
+
+		.floor-hvac-item {
+			background: #0E131C;
+			padding: 20px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/work/energy/analysis/hvac.vue

@@ -0,0 +1,675 @@
+<template>
+	<div class="hvac-electricity color-font">
+		<div class="hvac-electricity-item">
+			<div class="hvac-electricity-title">
+				<div class="hui-chart-title">
+					单项耗能
+					<div class="combination-select">
+						<el-select size="mini" v-model="value" placeholder="请选择">
+							<el-option label="冷源系统" :value="1">
+							</el-option>
+							<el-option label="热源系统" :value="2">
+							</el-option>
+						</el-select>
+						<el-select size="mini" v-model="value" placeholder="请选择">
+							<el-option label="空调" :value="1">
+							</el-option>
+							<el-option label="末端" :value="2">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="hvac-electricity-download">
+					<span>单项耗能报表</span>
+					<div class="download-icon">
+						<i class="iconfont huifont-xiazai1"></i>
+					</div>
+				</div>
+			</div>
+			<div class="chart-box">
+				<div class="hvac-electricity-box">
+					<div class="hvac-chart-title">
+						<span class="label">今日逐时能耗</span>
+					</div>
+					<div ref="chart1" class="hvac-chart-box"></div>
+				</div>
+				<div class="hvac-electricity-box">
+					<div class="hvac-chart-title">
+						<span class="label">月逐日能耗</span>
+						<div class="select">
+							<el-select size="mini" v-model="value" placeholder="请选择">
+								<el-option label="2024-01" :value="1">
+								</el-option>
+								<el-option label="2024-02" :value="2">
+								</el-option>
+							</el-select>
+						</div>
+					</div>
+					<div ref="chart2" class="hvac-chart-box"></div>
+				</div>
+				<div class="hvac-electricity-box">
+					<div class="hvac-chart-title">
+						<span class="label">年逐月能耗</span>
+						<div class="select">
+							<el-select size="mini" v-model="value" placeholder="请选择">
+								<el-option label="2024" :value="1">
+								</el-option>
+								<el-option label="2023" :value="2">
+								</el-option>
+							</el-select>
+						</div>
+					</div>
+					<div ref="chart3" class="hvac-chart-box"></div>
+				</div>
+				<div class="hvac-electricity-box">
+					<div class="hvac-chart-title">
+						<span class="label">年累计能耗</span>
+						<div class="year-picker">
+							<el-year-picker size="mini" v-model="year"></el-year-picker>
+						</div>
+					</div>
+					<div ref="chart4" class="hvac-chart-box"></div>
+				</div>
+			</div>
+		</div>
+		<div class="hvac-electricity-item">
+			<div class="hvac-electricity-title">
+				<div class="hui-chart-title">
+					分项耗能
+				</div>
+				<div class="hvac-electricity-download">
+					<span>单项耗能报表</span>
+					<div class="download-icon">
+						<i class="iconfont huifont-xiazai1"></i>
+					</div>
+				</div>
+			</div>
+			<div class="charts-box">
+				<div class="charts-item">
+					<div class="hvac-electricity-box">
+						<div class="hvac-chart-title">
+							<span class="label">今日耗电量</span>
+						</div>
+						<div ref="chart5" class="hvac-chart-box"></div>
+					</div>
+					<div class="hvac-pie">
+						<div ref="chart6" class="pie-chart"></div>
+						<div class="chart-legend">
+							<div class="legend-item">
+								<span class="legend-bage"></span>
+								<span class="legend-label">冷水机组</span>
+								<span class="legend-label">
+									<span class="alibaba">10</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage blue"></span>
+								<span class="legend-label">冷冻水泵</span>
+								<span class="legend-label">
+									<span class="alibaba">20</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage yellow"></span>
+								<span class="legend-label">冷却水泵</span>
+								<span class="legend-label">
+									<span class="alibaba">30</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage orange"></span>
+								<span class="legend-label">冷却塔</span>
+								<span class="legend-label">
+									<span class="alibaba">5</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="charts-item">
+					<div class="hvac-electricity-box">
+						<div class="hvac-chart-title">
+							<span class="label">今日耗电量</span>
+						</div>
+						<div ref="chart7" class="hvac-chart-box"></div>
+					</div>
+					<div class="hvac-pie">
+						<div ref="chart8" class="pie-chart"></div>
+						<div class="chart-legend">
+							<div class="legend-item">
+								<span class="legend-bage"></span>
+								<span class="legend-label">冷水机组</span>
+								<span class="legend-label">
+									<span class="alibaba">10</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage blue"></span>
+								<span class="legend-label">冷冻水泵</span>
+								<span class="legend-label">
+									<span class="alibaba">20</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage yellow"></span>
+								<span class="legend-label">冷却水泵</span>
+								<span class="legend-label">
+									<span class="alibaba">30</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage orange"></span>
+								<span class="legend-label">冷却塔</span>
+								<span class="legend-label">
+									<span class="alibaba">5</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="charts-item">
+					<div class="hvac-electricity-box">
+						<div class="hvac-chart-title">
+							<span class="label">今日耗电量</span>
+						</div>
+						<div ref="chart9" class="hvac-chart-box"></div>
+					</div>
+					<div class="hvac-pie">
+						<div ref="chart10" class="pie-chart"></div>
+						<div class="chart-legend">
+							<div class="legend-item">
+								<span class="legend-bage"></span>
+								<span class="legend-label">冷水机组</span>
+								<span class="legend-label">
+									<span class="alibaba">10</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage blue"></span>
+								<span class="legend-label">冷冻水泵</span>
+								<span class="legend-label">
+									<span class="alibaba">20</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage yellow"></span>
+								<span class="legend-label">冷却水泵</span>
+								<span class="legend-label">
+									<span class="alibaba">30</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage orange"></span>
+								<span class="legend-label">冷却塔</span>
+								<span class="legend-label">
+									<span class="alibaba">5</span>
+									<span class="unit">kwh</span>
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import elYearPicker from '@/components/common/elYearPicker'
+	export default {
+		data() {
+			return {
+				value: 1,
+				value1: '',
+				year: ''
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart2, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart3, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart4, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart5, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart7, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart9, [1, 3, 2, 6, 1]);
+				this.charts(this.$refs.chart6);
+				this.charts(this.$refs.chart8);
+				this.charts(this.$refs.chart10);
+
+			})
+		},
+		components: {
+			elYearPicker
+		},
+		methods: {
+			charts(elem) {
+				let chart = echarts.init(elem);
+				let title = '冷水机组',
+					len = "23.5"
+				let option = {
+					title: {
+						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
+						left: 'center',
+						top: 'center',
+						textStyle: {
+							rich: {
+								name: {
+									color: "rgba(255,255,255,0.6)",
+									fontSize: 12,
+									lineHeight: 16
+								},
+								percent: {
+									color: "#fff",
+									fontSize: 16,
+									lineHeight: 20,
+									fontFamily: 'alibabaMedium'
+								},
+							}
+						}
+					},
+					color: ['#73DEB3', '#73A0FA', '#F7C739', '#EB7E65'],
+					series: [{
+						type: 'pie',
+						center: ['50%', '50%'],
+						radius: ['60%', '90%'],
+						avoidLabelOverlap: false,
+						itemStyle: {
+							borderColor: '#0E131C',
+							borderWidth: 5
+						},
+						label: {
+							show: false,
+							position: 'center'
+						},
+						emphasis: {
+							label: {
+								show: true,
+								formatter: (params) => {
+									return ("{name|" + params.name + "}" + "\n{percent|" +
+										params.percent.toFixed(2) + "}{name|%}");
+								},
+								rich: {
+									name: {
+										color: "rgba(255,255,255,0.6)",
+										fontSize: 12,
+										lineHeight: 16
+									},
+									percent: {
+										color: "#fff",
+										fontSize: 16,
+										lineHeight: 20,
+										fontFamily: 'alibabaMedium'
+									},
+								}
+							},
+						},
+						labelLine: {
+							show: false
+						},
+						data: [{
+								value: 3,
+								name: "冷水机组"
+							},
+							{
+								value: 2,
+								name: "冷冻水泵"
+							},
+							{
+								value: 1,
+								name: "冷却水泵"
+							},
+							{
+								value: 1,
+								name: "冷却塔"
+							}
+						]
+					}]
+				};
+				chart.setOption(option);
+				// 高亮时
+				chart.on('highlight', (e) => {
+					chart.setOption({
+						title: {
+							show: false
+						}
+					});
+				});
+				// 取消高亮时
+				chart.on('downplay', (e) => {
+					chart.setOption({
+						title: {
+							show: true
+						}
+					});
+				});
+				// 鼠标移入数据时
+				chart.on('mouseover', {
+					componentType: 'series',
+					seriesType: 'pie'
+				}, (params) => {
+					chart.setOption({
+						title: {
+							show: false
+						}
+					});
+				});
+				// 鼠标移出数据时
+				chart.on('mouseout', {
+					componentType: 'series',
+					seriesType: 'pie'
+				}, (params) => {
+					chart.setOption({
+						title: {
+							show: true
+						}
+					});
+				});
+			},
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#d39524'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(229,154,61,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(229,154,61,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(229,154,61,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(229,154,61,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.hvac-electricity {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		display: flex;
+
+		.charts-box {
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			height: 0;
+
+			.charts-item {
+				display: flex;
+				flex: 1;
+				height: 0;
+			}
+
+			.hvac-electricity-box,
+			.hvac-pie {
+				width: 100%;
+			}
+
+			.hvac-pie {
+				display: flex;
+				align-items: center;
+				margin-left: 10px;
+
+				.pie-chart {
+					width: 110px;
+					height: 110px;
+					margin-right: 20px;
+				}
+			}
+
+			.hvac-electricity-box {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.chart-legend {
+				.legend-item {
+					display: flex;
+					align-items: center;
+					font-size: 12px;
+					margin-bottom: 5px;
+				}
+
+				.legend-bage {
+					width: 8px;
+					height: 8px;
+					background: #73DEB3;
+					margin-right: 9px;
+				}
+
+				.legend-label {
+					margin-right: 10px;
+					display: flex;
+					align-items: center;
+				}
+
+				.unit {
+					opacity: 0.6;
+					margin-left: 4px;
+				}
+
+				.green {
+					background: #73DEB3;
+				}
+
+				.yellow {
+					background: #F7C739;
+				}
+
+				.blue {
+					background: #73A0FA;
+				}
+
+				.orange {
+					background: #EB7E65;
+				}
+			}
+		}
+
+		.chart-box {
+			width: 100%;
+			padding: 20px;
+			overflow-y: auto;
+			font-size: 12px;
+			flex: 1;
+			height: 0;
+			display: flex;
+			flex-wrap: wrap;
+
+			.hvac-electricity-box {
+				width: 50%;
+				height: 50%;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.hvac-electricity-box:nth-child(1),
+			.hvac-electricity-box:nth-child(2) {
+				padding-bottom: 15px;
+			}
+
+			.hvac-electricity-box:nth-child(3),
+			.hvac-electricity-box:nth-child(4) {
+				padding-top: 15px;
+			}
+
+			.hvac-electricity-box:nth-child(2n) {
+				padding-left: 20px;
+			}
+
+			.hvac-electricity-box:nth-child(2n-1) {
+				padding-right: 20px;
+			}
+
+		}
+
+		.hvac-chart-box {
+			flex: 1;
+		}
+
+		.hvac-chart-title {
+			display: flex;
+			justify-content: space-between;
+
+			.label {
+				font-weight: 600;
+			}
+
+			.select {
+				width: 96px;
+			}
+
+			.date-picker {
+				width: 210px;
+			}
+
+			.year-picker {
+				width: 170px;
+			}
+		}
+
+		.hvac-electricity-title {
+			padding: 20px 20px 12px 20px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.hui-chart-title {
+				width: 370px;
+			}
+
+			.hvac-electricity-download {
+				display: flex;
+				align-items: center;
+
+
+				.download-icon {
+					width: 16px;
+					line-height: 16px;
+					color: $--color-primary;
+					background: #121C32;
+					border-radius: 6px;
+					margin-left: 10px;
+					text-align: center;
+				}
+
+				.iconfont {
+					font-size: 10px;
+				}
+			}
+		}
+
+		.hvac-electricity-item {
+			flex: 1;
+			background: #0E131C;
+			margin-right: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.hvac-electricity-item:last-child {
+			margin-right: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/work/iot/security/electronicPatrolDetail.vue

@@ -0,0 +1,237 @@
+<template>
+	<div class="hui-detail electronic-patrol-detail">
+		<div class="hui-detail-title">基础信息</div>
+		<div class="hui-detail-content">
+			<div class="hui-detail-item">
+				<div class="hui-detail-label">单位工程</div>
+				<div class="hui-detail-value">一号楼</div>
+			</div>
+			<div class="hui-detail-item">
+				<div class="hui-detail-label">具体位置</div>
+				<div class="hui-detail-value">一层</div>
+			</div>
+			<div class="hui-detail-item">
+				<div class="hui-detail-label">路径名称</div>
+				<div class="hui-detail-value">路径1</div>
+			</div>
+			<div class="hui-detail-item">
+				<div class="hui-detail-label">点位数量</div>
+				<div class="hui-detail-value">6</div>
+			</div>
+			<div class="hui-detail-item">
+				<div class="hui-detail-label">今日打卡</div>
+				<div class="hui-detail-value">4</div>
+			</div>
+			<div class="hui-detail-item">
+				<div class="hui-detail-label">累计打卡</div>
+				<div class="hui-detail-value">193</div>
+			</div>
+		</div>
+		<div class="hui-detail-title">今日打卡记录</div>
+		<el-collapse>
+			<el-collapse-item title="打卡点位1">
+				<div class="clock-now">今天</div>
+				<div class="clock-list">
+					<div class="clock-item">
+						<div class="clock-date">
+							14:12:36
+						</div>
+						<div class="clock-content">
+							<div class="name">周星星</div>
+							<div class="content">
+								<div class="remark">
+									公司要举办关于对方的计算机反对司法解释放2023年年会的活动
+								</div>
+								<div class="remark-file">
+									<upload :list="list"></upload>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="clock-item">
+						<div class="clock-date">
+							14:12:36
+						</div>
+						<div class="clock-content">
+							<div class="name">周星星</div>
+							<div class="content">
+								<div class="remark">
+									公司要举办关于对方的计算机反对司法解释放2023年年会的活动
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="clock-item">
+						<div class="clock-date">
+							14:12:36
+						</div>
+						<div class="clock-content">
+							<div class="name">周星星</div>
+						</div>
+					</div>
+				</div>
+			</el-collapse-item>
+			<el-collapse-item title="打卡点位2">
+				<div class="clock-now">今天</div>
+				<div class="clock-list">
+					<div class="clock-item">
+						<div class="clock-date">
+							14:12:36
+						</div>
+						<div class="clock-content">
+							<div class="name">周星星</div>
+							<div class="content">
+								<div class="remark">
+									公司要举办关于对方的计算机反对司法解释放2023年年会的活动
+								</div>
+								<div class="remark-file">
+									<upload :list="list"></upload>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="clock-item">
+						<div class="clock-date">
+							14:12:36
+						</div>
+						<div class="clock-content">
+							<div class="name">周星星</div>
+							<div class="content">
+								<div class="remark">
+									公司要举办关于对方的计算机反对司法解释放2023年年会的活动
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="clock-item">
+						<div class="clock-date">
+							14:12:36
+						</div>
+						<div class="clock-content">
+							<div class="name">周星星</div>
+						</div>
+					</div>
+				</div>
+			</el-collapse-item>
+		</el-collapse>
+	</div>
+</template>
+
+<script>
+	import upload from '@/components/common/upload'
+	export default {
+		data() {
+			return {
+				list: [{
+						"id": 13700,
+						"name": "photo4.png",
+						"url": "https://file-node.oss-cn-shanghai.aliyuncs.com/youji/31025fc5b8b44183bf1cdf39f821ca5d",
+						"type": "png"
+					},
+					{
+						"id": 13701,
+						"name": "photo11.jpeg",
+						"url": "https://file-node.oss-cn-shanghai.aliyuncs.com/youji/bc203e8392044054aaf090ea9a34b009",
+						"type": "jpeg"
+					}
+				]
+			}
+		},
+		components: {
+			upload
+		},
+	}
+</script>
+
+<style lang="scss">
+	.electronic-patrol-detail {
+		.clock-list {
+			.clock-item {
+				display: flex;
+				padding: 8px 0 17px 0;
+				position: relative;
+			}
+
+			.clock-item::before {
+				position: absolute;
+				content: '';
+				width: 1px;
+				top: 29px;
+				bottom: -8px;
+				left: 31px;
+				border-left: 1px dashed #374156;
+			}
+		}
+
+		.clock-now {
+			width: 62px;
+			text-align: center;
+			font-size: 15px;
+			font-weight: 600;
+		}
+
+		.clock-date {
+			width: 62px;
+			height: 21px;
+			line-height: 21px;
+			background: rgba(255, 255, 255, 0.05);
+			border-radius: 11px;
+			margin-right: 12px;
+			text-align: center;
+			font-size: 12px;
+		}
+
+		.clock-content {
+			flex: 1;
+			width: 0;
+
+			.name {
+				font-size: 14px;
+				margin-bottom: 10px;
+			}
+
+			.content {
+				background: rgba(50, 56, 68, 0.2);
+				border-radius: 8px;
+				padding: 10px;
+				font-size: 12px;
+			}
+		}
+
+		.el-collapse {
+			border: none;
+
+		}
+
+		.el-collapse-item {
+			border: none;
+			border-radius: 8px;
+			background: rgba(50, 56, 68, 0.2);
+			margin-bottom: 12px;
+		}
+
+		.el-collapse-item__header,
+		.el-collapse-item__wrap {
+			background: transparent;
+			border: none;
+		}
+
+		.el-collapse-item__wrap {
+			border-top: 1px solid $--color-border;
+		}
+
+		.el-collapse-item__content {
+			color: $--color-common;
+			padding: 20px;
+		}
+
+		.el-collapse-item__header {
+			font-weight: 600;
+			height: 44px;
+			line-height: 44px;
+			padding-left: 20px;
+			font-size: 14px;
+			color: $--color-common !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,555 @@
+import request from '@/axios'
+let axios = {
+	post: (postUrl, data) => {
+		return request({
+			method: 'post',
+			url: '/ringzle' + postUrl,
+			data: data,
+		})
+	},
+	get: (getUrl, params) => {
+		let param = params || '';
+		return request({
+			method: 'get',
+			url: '/ringzle' + getUrl + param
+		})
+	},
+	put: (putUrl, data) => {
+		return request({
+			method: 'put',
+			url: '/ringzle' + putUrl,
+			data: data,
+		})
+	},
+	del: (deleteUrl, params) => {
+		let param = params || '';
+		return request({
+			method: 'delete',
+			url: '/ringzle' + deleteUrl + param
+		})
+	},
+	delData: (deleteUrl, data) => {
+		return request({
+			method: 'delete',
+			url: '/ringzle' + deleteUrl,
+			data: data,
+		})
+	},
+}
+import {
+	param
+} from '@/uitls'
+/* 
+ * 获取协议配置列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,order|排序方式 可选值(asc、desc),orderField|排序字段}
+ */
+export function getProtocolPage(data) {
+	return axios.get('/iot/protocol/config/getProtocolPage?' + param(data));
+}
+/* 
+ * 获取解码器列表
+ */
+export function getProtocolCodec(data) {
+	return axios.get('/iot/protocol/config/codec');
+}
+/* 
+ * 保存协议配置
+ * @param {Object} 
+ * data = {name|协议名称,transportType|传输协议类型,adaptorClassName|适配器,codecClassName|解码器,attribute|{Object}配置相关属性}
+ * attribute = {host|协议地址,port|协议端口,username|用户名,password|密码,messageTopic|发布主题,commandTopic|订阅主题}
+ */
+export function insertProtocol(data) {
+	return axios.post('/iot/protocol/config', data);
+}
+/* 
+ * 修改协议配置
+ * @param {Object} 
+ * data = {name|协议名称,transportType|传输协议类型,adaptorClassName|适配器,codecClassName|解码器,attribute|{Object}配置相关属性}
+ * attribute = {host|协议地址,port|协议端口,username|用户名,password|密码,messageTopic|发布主题,commandTopic|订阅主题}
+ */
+export function putProtocol(data) {
+	return axios.put('/iot/protocol/config', data);
+}
+/* 
+ * 删除协议配置
+ * @param {Object} 
+ * data = {ids|删除的id列表}
+ */
+export function deleteProtocol(data) {
+	return axios.delData('/iot/protocol/config', data);
+}
+/* 
+ * 获取项目分页列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,order|排序方式 可选值(asc、desc),orderField|排序字段,projectName|项目名称}
+ */
+export function getProjectPage(data) {
+	return axios.get('/iot/project/page?' + param(data));
+}
+/* 
+ * 获取项目列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,order|排序方式 可选值(asc、desc),orderField|排序字段,projectName|项目名称}
+ */
+export function getProject() {
+	return axios.get('/iot/project/list');
+}
+
+/* 
+ * 保存项目
+ * @param {Object} 
+ * data = {name|协议名称,description|描述}
+ */
+export function insertProject(data) {
+	return axios.post('/iot/project', data);
+}
+/* 
+ * 修改项目
+ * @param {Object} 
+ * data = {projectName|项目名称,description|描述}
+ */
+export function putProject(data) {
+	return axios.put('/iot/project', data);
+}
+/* 
+ * 删除项目
+ * @param {Object} 
+ * data = {ids|删除的id列表}
+ */
+export function deleteProject(data) {
+	return axios.delData('/iot/project', data);
+}
+/* 
+ * 获取产品品类分页列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,order|排序方式 可选值(asc、desc),orderField|排序字段,name|品类名称或者所属场景，pid|领域id}
+ */
+export function getProductCategoryPage(data) {
+	return axios.get('/iot/productcategory/page?' + param(data));
+}
+/* 
+ * 获取产品品类列表
+ */
+export function getProductCategoryList(data) {
+	return axios.get('/iot/productcategory/list');
+}
+/* 
+ * 保存产品品类
+ * @param {Object} 
+ * data = {categoryName|协议名称,categoryKey|描述,level|等级,pid|上级ID,scenarios|所属场景,sort|排序,territory|所属领域}
+ */
+export function insertProductCategory(data) {
+	return axios.post('/iot/productcategory', data);
+}
+/* 
+ * 修改产品品类
+ * @param {Object} 
+ * data = {categoryName|协议名称,categoryKey|描述,level|等级,pid|上级ID,scenarios|所属场景,sort|排序,territory|所属领域}
+ */
+export function putProductCategory(data) {
+	return axios.put('/iot/productcategory', data);
+}
+/* 
+ * 删除产品品类
+ * @param {Object} 
+ * data = {ids|删除的id列表}
+ */
+export function deleteProductCategory(data) {
+	return axios.delData('/iot/productcategory', data);
+}
+/* 
+ * 获取产品分页列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,productName|产品名称，projectId｜项目id}
+ */
+export function getProductPage(data) {
+	return axios.get('/iot/product/page?' + param(data));
+}
+/* 
+ * 保存产品
+ * @param {Object} 
+ * data = {categoryId|品类id,description|描述,deviceType|节点类型,productName|产品名称,projectId|项目id,protocolConfigId|链接协议id}
+ */
+export function insertProduct(data) {
+	return axios.post('/iot/product', data);
+}
+/* 
+ * 修改产品
+ * @param {Object} 
+ * data = {categoryId|品类id,description|描述,deviceType|节点类型,productName|产品名称,projectId|项目id,protocolConfigId|链接协议id}
+ */
+export function putProduct(data) {
+	return axios.put('/iot/product', data);
+}
+/* 
+ * 删除产品
+ * @param {Object} 
+ * data = {ids|删除的id列表}
+ */
+export function deleteProduct(data) {
+	return axios.delData('/iot/product', data);
+}
+/* 
+ * 获取产品详情
+ * @param {Object} 
+ * data = {id｜产品id}
+ */
+export function getProductId(id) {
+	return axios.get('/iot/product/' + id);
+}
+/* 
+ * 获取产品列表
+ * @param {Object} 
+ */
+export function getProduct(id) {
+	return axios.get('/iot/product/getProductSearchBox');
+}
+/* 
+ * 物模型修改
+ * @param {Object} 
+ * data = {id|产品id,tslJsonStr|tsljson数据}
+ */
+export function updateTsl(data) {
+	return axios.put('/iot/product/updateTsl', data);
+}
+/* 
+ * 获取设备分页列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,deviceName|设备名称,gatewayDeviceId|网关设备id,productId｜产品id}
+ */
+export function getDevicePage(data) {
+	return axios.get('/iot/device/page?' + param(data));
+}
+/* 
+ * 保存设备
+ * @param {Object} 
+ * data = {deviceName|设备名称,deviceId|设备序列号,productId|所属产品id,slaveAddress|设备从站地址(所选产品连接协议为mdb时必填)}
+ */
+export function insertDevice(data) {
+	return axios.post('/iot/device', data);
+}
+/* 
+ * 删除设备
+ * @param {Object} 
+ * data = {ids|删除的id列表}
+ */
+export function deleteDevice(data) {
+	return axios.delData('/iot/device', data);
+}
+/* 
+ * 设备启用、禁用
+ * @param {Object} 
+ * data = {ids|设备id列表,status|状态: 1启用 2禁用}
+ */
+export function changeDeviceStatus(data) {
+	return axios.post('/iot/device/changeStatus', data);
+}
+/* 
+ * 获取设备详情
+ * @param {Object} 
+ * data = {id|设备id}
+ */
+export function getDeviceId(id) {
+	return axios.get('/iot/device/' + id);
+}
+/* 
+ * 获取设备列表
+ * @param {Object} 
+ * data = {deviceName|设备名称,productId|产品id}
+ */
+export function getDevice(data) {
+	return axios.get('/iot/device/getDeviceSearchBox?' + param(data));
+}
+/* 
+ * 保存子设备
+ * @param {Object} 
+ * data = {id|当前网关设备主键id,childIdList|子设备序列号集合}
+ */
+export function insertChildDevice(data) {
+	return axios.post('/iot/device/addChildDevice', data);
+}
+/* 
+ * 删除子设备
+ * @param {Object} 
+ * data = {id|当前网关设备主键id,childIdList|子设备序列号集合}
+ */
+export function deleteChildDevice(data) {
+	return axios.post('/iot/device/delChildDevice', data);
+}
+/* 
+ * 获取产品原型分页列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,categoryId|所属品类id,order|排序方式 可选值(asc、desc),orderField|排序字段}
+ */
+export function getPrototypePage(data) {
+	return axios.get('/iot/prototype/page?' + param(data));
+}
+/* 
+ * 获取产品原型列表
+ * @param {Object} 
+ * data = {deviceId|设备主键id}
+ */
+export function getPropertySearchBox(data) {
+	return axios.get('/iot/prototype/getPropertySearchBox?' + param(data));
+}
+/* 
+ * 保存产品原型
+ * @param {Object} 
+ * data = {abilityType|功能类型: properties属性 services服务 events事件,callType|同步异步：SYNC同步，异步ASYNC	,categoryId"|所属品类id,
+ * dataSpecs|数据参数,dataType|数据类型,description|描述,identifier|标识符,isStd|是否标准功能 1是0否(0即为自定义功能),name|功能名称,required|是否必填 1是0否,
+ * rwFlag|读写标识: 1只读 2读写, type|属性类型 0 表示实时状态， 1表示累计状态}
+ * dataSpecs={dataLength|数据长度,dataType|数据类型,identifier|标识符,max|最大值,min|最小值,name|参数名称,precise|精度,step|步长,unit|单位,
+ * unitName|单位名称,value|数值,transmitParams|拓展描述}
+ * transmitParams={bigLittleFormat|大小端格式 1大端,2小端,identifier645|645数据标识,registerAddress|寄存器地址,registerByteNum|寄存器字节个数,
+ * rfunctionCode|运行函数代码,wfunctionCode|等待函数代买}
+ */
+export function insertPrototype(data) {
+	return axios.post('/iot/prototype', data);
+}
+/* 
+ * 保存产品原型
+ * @param {Object} 
+ * data = {abilityType|功能类型: properties属性 services服务 events事件,callType|同步异步：SYNC同步，异步ASYNC	,categoryId"|所属品类id,
+ * dataSpecs|数据参数,dataType|数据类型,description|描述,identifier|标识符,isStd|是否标准功能 1是0否(0即为自定义功能),name|功能名称,required|是否必填 1是0否,
+ * rwFlag|读写标识: 1只读 2读写, type|属性类型 0 表示实时状态， 1表示累计状态}
+ * dataSpecs={dataLength|数据长度,dataType|数据类型,identifier|标识符,max|最大值,min|最小值,name|参数名称,precise|精度,step|步长,unit|单位,
+ * unitName|单位名称,value|数值,transmitParams|拓展描述}
+ * transmitParams={bigLittleFormat|大小端格式 1大端,2小端,identifier645|645数据标识,registerAddress|寄存器地址,registerByteNum|寄存器字节个数,
+ * rfunctionCode|运行函数代码,wfunctionCode|等待函数代买}
+ */
+export function putPrototype(data) {
+	return axios.put('/iot/prototype', data);
+}
+/* 
+ * 删除产品原型
+ * @param {Object} 
+ * data = {ids|删除的id列表}
+ */
+export function deletePrototype(data) {
+	return axios.delData('/iot/prototype', data);
+}
+/* 
+ * 获取产品原型
+ * @param {Object} 
+ * data = {queryId|查询id,categoryId｜所属品类id}
+ */
+export function getPrototype(data) {
+	return axios.delData('/iot/prototype', data);
+}
+/* 
+ * 获取设备告警配置分页列表
+ * @param {Object} 
+ * data = {limit|每页显示记录数,page|当前页码,deviceId|设备标识id,order|排序方式 可选值(asc、desc),orderField|排序字段}
+ */
+export function getDeviceAlertConfigPage(data) {
+	return axios.get('/iot/deviceAlertConfig/page?' + param(data));
+}
+/* 
+ * 保存设备告警配置
+ * @param {Object} 
+ * data = {}
+ */
+export function insertDeviceAlertConfig(data) {
+	return axios.post('/iot/deviceAlertConfig', data);
+}
+/* 
+ * 编辑设备告警配置
+ * @param {Object} 
+ * data = {}
+ */
+export function putDeviceAlertConfig(data) {
+	return axios.put('/iot/deviceAlertConfig', data);
+}
+/* 
+ * 删除设备告警配置
+ * @param {Object} 
+ * data = {deviceId|设备id,enable|状态 0:停用 1:启用,ids|删除的id列表}
+ */
+export function deleteDeviceAlertConfig(data) {
+	return axios.delData('/iot/deviceAlertConfig', data);
+}
+/* 
+ * 设备告警配置启用、禁用
+ * @param {Object} 
+ * data = {ids|设备id列表,status|状态: 1启用 2禁用}
+ */
+export function changeDeviceAlertConfigStatus(data) {
+	return axios.post('/iot/deviceAlertConfig/changeStatus', data);
+}
+/* 
+ * 获取设备数据传输配置
+ * @param {Object} 
+ * data = {id|设备id}
+ */
+export function getChildConfigInfo(id) {
+	return axios.get('/iot/transmit/getChildConfigInfo/' + id);
+}
+/* 
+ * 保存设备数据传输配置
+ * @param {Object} 
+ * data = {id|设备id}
+ */
+export function insertChildConfigInfo(data) {
+	return axios.post('/iot/transmit/setTransmitConfig', data);
+}
+/* 
+ * 获取规则分页数据
+ * @param {Object} 
+ * data = {}
+ */
+export function getRulePage(data) {
+	return axios.get('/iot/rule/page?', param(data));
+}
+/* 
+ * 保存规则
+ * @param {Object} 
+ * data = {}
+ */
+export function insertRule(data) {
+	return axios.post('/iot/rule', data);
+}
+/* 
+ * 编辑规则
+ * @param {Object} 
+ * data = {}
+ */
+export function putRule(data) {
+	return axios.put('/iot/rule', data);
+}
+/* 
+ * 编辑规则
+ * @param {Object} 
+ * data = {}
+ */
+export function deleteRule(id) {
+	return axios.delData('/iot/rule/' + id, {});
+}
+/* 
+ * 启用禁用规则
+ * @param {Object} 
+ * data = {}
+ */
+export function setRuleEnable(data) {
+	return axios.post('/iot/rule/setRuleEnable', data);
+}
+/* 
+ * 获取报警统计
+ * @param {Object} 
+ * data = {}
+ */
+export function getAlertReport() {
+	return axios.post('/iot/devicealert/alertReport', {});
+}
+/* 
+ * 获取报警日志分页列表
+ * @param {Object} 
+ * data = {}
+ */
+export function getAlertReportPage(data) {
+	return axios.get('/iot/devicealert/page?' + param(data));
+}
+/* 
+ * 获取使用设备列表
+ * @param {String} params = {data}
+ * 
+ */
+export function getIotentityList(data) {
+	return axios.post('/ringzle/iotentity/query', data);
+}
+/* 
+ * 新增使用设备
+ * @data {Object}
+ * 
+ */
+export function insertIotentity(data) {
+	return axios.post('/ringzle/iotentity', data);
+}
+/* 
+ * 编辑使用设备
+ * @data {Object}
+ * 
+ */
+export function editIotentity(data) {
+	return axios.put('/ringzle/iotentity', data);
+}
+/* 
+ * 删除使用设备
+ * @data {Object}
+ * 
+ */
+export function deleteIotentity(id) {
+	return axios.del('/ringzle/iotentity/' + id);
+}
+/* 
+ * 绑定模型
+ * @data {Object}
+ * 
+ */
+export function bindBim(data) {
+	return axios.post('/iot/bindbim', data);
+}
+/* 
+ * 获取绑定模型数据
+ * @data {Object}
+ * 
+ */
+export function getBindBim(data) {
+	return axios.post('/iot/bindbim/query', data);
+}
+/* 
+ * 修改绑定模型
+ * @data {Object}
+ * 
+ */
+export function updateBindBim(data) {
+	return axios.put('/iot/bindbim', data);
+}
+/* 
+ * 设备模型规则
+ * @data {Object}
+ * 
+ */
+export function setBimRule(data) {
+	return axios.post('/iot/bindrule', data);
+}
+/* 
+ * 获取设备模型规则
+ * @data {Object}
+ * 
+ */
+export function getBimRule(data) {
+	return axios.post('/iot/bindrule/query', data);
+}
+/* 
+ * 修改设备模型规则
+ * @data {Object}
+ * 
+ */
+export function updateBimRule(data) {
+	return axios.put('/iot/bindrule', data);
+}
+/* 
+ * 删除设备模型规则
+ * @data {Object}
+ * 
+ */
+export function deleteBimRule(id) {
+	return axios.del('/iot/bindrule/' + id);
+}
+/* 
+ * 获取设备属性
+ * @data {Object}
+ * 
+ */
+export function getIotentityData(id) {
+	return axios.get('/ringzle/iotentity/data/' + id);
+}
+/* 
+ * 获取摄像头AccessToken
+ * @data {Object}
+ * 
+ */
+export function getCameraAccessToken() {
+	return axios.get('/iot/camera/accessToken');
+}

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

@@ -341,4 +341,15 @@ export function getProjectListByIdentity() {
 		url: `/api/project/projectListIdentity`,
 		method: 'get'
 	})
+}
+/* 
+ * 获取空间层级关系
+ * 
+ * 
+ */
+export function getProjectTreeList(projectId) {
+	return request({
+		url: `/api/project/getProject/${projectId}`,
+		method: 'get'
+	})
 }

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

@@ -0,0 +1,135 @@
+const energy = [{
+	path: 'energy/electrical/powerdistribution',
+	component: () => import('@/views/work/energy/electrical/powerdistribution'),
+	name: '供配电',
+	meta: {
+		title: '供配电'
+	}
+}, {
+	path: 'energy/electrical/lift',
+	component: () => import('@/views/work/energy/electrical/lift'),
+	name: '电梯',
+	meta: {
+		title: '电梯'
+	}
+}, {
+	path: 'energy/electrical/elevator',
+	component: () => import('@/views/work/energy/electrical/elevator'),
+	name: '电梯机房',
+	meta: {
+		title: '电梯机房'
+	}
+}, {
+	path: 'energy/electrical/lighting/indoor',
+	component: () => import('@/views/work/energy/electrical/lighting/indoor'),
+	name: '室内',
+	meta: {
+		title: '室内'
+	}
+}, {
+	path: 'energy/electrical/lighting/outdoor',
+	component: () => import('@/views/work/energy/electrical/lighting/outdoor'),
+	name: '泛光',
+	meta: {
+		title: '泛光'
+	}
+}, {
+	path: 'energy/water/hvac/coldsource',
+	component: () => import('@/views/work/energy/water/hvac/coldsource'),
+	name: '冷源系统',
+	meta: {
+		title: '冷源系统'
+	}
+}, {
+	path: 'energy/water/hvac/heatsource',
+	component: () => import('@/views/work/energy/water/hvac/heatsource'),
+	name: '热源系统',
+	meta: {
+		title: '热源系统'
+	}
+}, {
+	path: 'energy/water/hvac/end',
+	component: () => import('@/views/work/energy/water/hvac/end'),
+	name: '末端系统',
+	meta: {
+		title: '末端系统'
+	}
+}, {
+	path: 'energy/water/supply/life',
+	component: () => import('@/views/work/energy/water/supply/life'),
+	name: '生活排水',
+	meta: {
+		title: '生活排水'
+	}
+}, {
+	path: 'energy/water/supply/firefighting',
+	component: () => import('@/views/work/energy/water/supply/firefighting'),
+	name: '消防排水',
+	meta: {
+		title: '消防排水'
+	}
+}, {
+	path: 'energy/water/supply/drainage',
+	component: () => import('@/views/work/energy/water/supply/drainage'),
+	name: '排水',
+	meta: {
+		title: '排水'
+	}
+}, {
+	path: 'energy/water/supply/lowcarbon',
+	component: () => import('@/views/work/energy/water/supply/lowcarbon'),
+	name: '绿色低碳',
+	meta: {
+		title: '绿色低碳'
+	}
+}, {
+	path: 'energy/ventilate/basement',
+	component: () => import('@/views/work/energy/ventilate/basement'),
+	name: '地下室通风',
+	meta: {
+		title: '地下室通风'
+	}
+}, {
+	path: 'energy/ventilate/vrv/vrv',
+	component: () => import('@/views/work/energy/ventilate/vrv/vrv'),
+	name: '多联机',
+	meta: {
+		title: '多联机'
+	}
+}, {
+	path: 'energy/ventilate/vrv/freshair',
+	component: () => import('@/views/work/energy/ventilate/vrv/freshair'),
+	name: '新风管道',
+	meta: {
+		title: '新风管道'
+	}
+}, {
+	path: 'energy/ventilate/vrv/indoor3d',
+	component: () => import('@/views/work/energy/ventilate/vrv/indoor3d'),
+	name: '室内三维',
+	meta: {
+		title: '室内三维'
+	}
+}, {
+	path: 'energy/analysis',
+	component: () => import('@/views/work/energy/analysis'),
+	name: '用能分析',
+	meta: {
+		title: '用能分析'
+	}
+}, {
+	path: 'energy/strategy/conservation',
+	component: () => import('@/views/work/energy/strategy/conservation'),
+	name: '节能诊断',
+	meta: {
+		title: '诊断与策略'
+	}
+}, {
+	path: 'energy/strategy/prediction',
+	component: () => import('@/views/work/energy/strategy/prediction'),
+	name: '预测与控制',
+	meta: {
+		title: '预测与控制'
+	}
+}]
+export default energy;

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

@@ -0,0 +1,114 @@
+const iot = [{
+	path: 'iot/device/monitor',
+	component: () => import('@/views/work/iot/device/monitor'),
+	name: '设备监测',
+	meta: {
+		title: '设备监测'
+	}
+}, {
+	path: 'iot/device/alarmMonitor',
+	component: () => import('@/views/work/iot/device/alarmMonitor'),
+	name: '告警监测',
+	meta: {
+		title: '告警监测'
+	}
+}, {
+	path: 'iot/device/detail',
+	component: () => import('@/views/work/iot/device/detail'),
+	name: '设备详情',
+	meta: {
+		title: '设备详情'
+	}
+}, {
+	path: 'iot/security/monitor',
+	component: () => import('@/views/work/iot/security/monitor'),
+	name: '视频监控',
+	meta: {
+		title: '视频监控'
+	}
+}, {
+	path: 'iot/security/accessControl',
+	component: () => import('@/views/work/iot/security/accessControl'),
+	name: '楼宇门禁',
+	meta: {
+		title: '楼宇门禁'
+	}
+}, {
+	path: 'iot/security/infrared',
+	component: () => import('@/views/work/iot/security/infrared'),
+	name: '周界报警',
+	meta: {
+		title: '周界报警'
+	}
+}, {
+	path: 'iot/security/car',
+	component: () => import('@/views/work/iot/security/car'),
+	name: '车辆管理',
+	meta: {
+		title: '车辆管理'
+	}
+}, {
+	path: 'iot/security/electronicPatrol',
+	component: () => import('@/views/work/iot/security/electronicPatrol'),
+	name: '电子巡更',
+	meta: {
+		title: '电子巡更'
+	}
+}, {
+	path: 'iot/firefighting/facilities',
+	component: () => import('@/views/work/iot/firefighting/facilities'),
+	name: '消防设施',
+	meta: {
+		title: '消防设施'
+	}
+}, {
+	path: 'iot/firefighting/thoroughfare',
+	component: () => import('@/views/work/iot/firefighting/thoroughfare'),
+	name: '消防通道',
+	meta: {
+		title: '消防通道'
+	}
+}, {
+	path: 'iot/firefighting/system',
+	component: () => import('@/views/work/iot/firefighting/system'),
+	name: '消防体系',
+	meta: {
+		title: '消防体系'
+	}
+}, {
+	path: 'iot/dangerous/flammability',
+	component: () => import('@/views/work/iot/dangerous/flammability'),
+	name: '易燃易爆品',
+	meta: {
+		title: '易燃易爆品'
+	}
+}, {
+	path: 'iot/dangerous/pollute',
+	component: () => import('@/views/work/iot/dangerous/pollute'),
+	name: '污染废弃物',
+	meta: {
+		title: '污染废弃物'
+	}
+}, {
+	path: 'iot/dangerous/chemistry',
+	component: () => import('@/views/work/iot/dangerous/chemistry'),
+	name: '化学用品',
+	meta: {
+		title: '化学用品'
+	}
+}, {
+	path: 'iot/environment/air',
+	component: () => import('@/views/work/iot/environment/air'),
+	name: '空气监测',
+	meta: {
+		title: '空气监测'
+	}
+}, {
+	path: 'iot/environment/monitor',
+	component: () => import('@/views/work/iot/environment/monitor'),
+	name: '环境监测',
+	meta: {
+		title: '环境监测'
+	}
+}]
+export default iot;

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

@@ -10,11 +10,10 @@ import store from '../store';
 import {
 	Message
 } from 'element-ui'
-import Vue from 'vue'
 NProgress.configure({
 	showSpinner: false
 })
-const baseUrl = ['/', '/401', '/404', '/loginRegister/login', '/message', '/space/project'];
+const baseUrl = ['/', '/401', '/404', '/loginRegister/login', '/message', '/space/project', '/iot/device/detail'];
 
 const testBaseUrl = (path) => { //判断公共路由
 	let nowBaseUrl = ['/loginRegister/login'].filter((item) => {

virgo.wzfrontend/console/src/views/work/energy/electrical/elevator.vue

@@ -0,0 +1,532 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="elevator box-background">
+				<div class="elevator-box">
+					<div class="elevator-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="elevator" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="elevator-right hui-flex">
+						<div class="elevator-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div class="hui-flex-box">
+								<div ref="chart1" class="chart"></div>
+							</div>
+						</div>
+						<div class="elevator-list hui-flex-box">
+							<div class="elevator-item-box">
+								<div class="elevator-item">
+									<div class="elevator-title color-font">
+										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+										<span class="elevator-space hui-ellipsis">1F</span>
+										<span class="elevator-title-name hui-ellipsis">
+											1F默认房间
+										</span>
+									</div>
+									<div class="elevator-content">
+										<div class="content-item">
+											<div class="item-title color-font">
+												<div class="hui-tag hui-tag-primary">在线</div>
+												<span class="name">电表1</span>
+												<div class="nuit">
+													本月电量 <span class="number alibaba color-cyan">132153.1</span>kwh
+												</div>
+											</div>
+											<div class="item-box">
+												<div class="item-number">
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															236
+														</div>
+														<div class="label">
+															Ua电压(V)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															236
+														</div>
+														<div class="label">
+															la电压(A)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															236
+														</div>
+														<div class="label">
+															三相有功功率(KW)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															52321.0
+														</div>
+														<div class="label">
+															三相无功功率(KVar)
+														</div>
+													</div>
+												</div>
+												<div class="item-number">
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															233
+														</div>
+														<div class="label">
+															Ub电压(V)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															255
+														</div>
+														<div class="label">
+															la电流(B)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															0
+														</div>
+														<div class="label">
+															PVUR(%)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															0
+														</div>
+														<div class="label">
+															漏电电流(mA)
+														</div>
+													</div>
+												</div>
+												<div class="item-number">
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															233.2
+														</div>
+														<div class="label">
+															Uc电压(V)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															234.4
+														</div>
+														<div class="label">
+															la电流(C)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															234.6
+														</div>
+														<div class="label">
+															PVR(%)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															55
+														</div>
+														<div class="label">
+															频率(Hz)
+														</div>
+													</div>
+												</div>
+											</div>
+										</div>
+										<div class="content-item">
+											<div class="item-title color-font">
+												<div class="hui-tag hui-tag-info">离线</div>
+												<span class="name">电报2</span>
+												<div class="nuit">
+													本月电量 <span class="number alibaba color-cyan">132153.1</span>kwh
+												</div>
+											</div>
+											<div class="item-box">
+												<div class="item-number">
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															236
+														</div>
+														<div class="label">
+															Ua电压(V)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															236
+														</div>
+														<div class="label">
+															la电压(A)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															236
+														</div>
+														<div class="label">
+															三相有功功率(KW)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															52321.0
+														</div>
+														<div class="label">
+															三相无功功率(KVar)
+														</div>
+													</div>
+												</div>
+												<div class="item-number">
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															233
+														</div>
+														<div class="label">
+															Ub电压(V)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															255
+														</div>
+														<div class="label">
+															la电流(B)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															0
+														</div>
+														<div class="label">
+															PVUR(%)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															0
+														</div>
+														<div class="label">
+															漏电电流(mA)
+														</div>
+													</div>
+												</div>
+												<div class="item-number">
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															233.2
+														</div>
+														<div class="label">
+															Uc电压(V)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															234.4
+														</div>
+														<div class="label">
+															la电流(C)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															234.6
+														</div>
+														<div class="label">
+															PVR(%)
+														</div>
+													</div>
+													<div class="number-item">
+														<div class="number alibaba color-green">
+															55
+														</div>
+														<div class="label">
+															频率(Hz)
+														</div>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.elevator {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.chart {
+			width: 100%;
+			height: 100%;
+		}
+
+		.elevator-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.elevator-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.elevator-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+		}
+
+		.elevator-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.elevator-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px 0;
+		}
+
+		.elevator-item-box {
+			width: 100%;
+			height: 100%;
+			padding: 0 20px;
+			overflow-y: auto;
+		}
+
+		.elevator-item {
+			border: 1px solid rgba(97, 133, 214, 0.15);
+			font-size: 12px;
+
+			.content-item {
+				border-bottom: 1px solid rgba(97, 133, 214, 0.15);
+			}
+
+			.content-item:last-child {
+				border-bottom: none;
+			}
+
+			.elevator-title {
+				background: rgba(97, 133, 214, 0.08);
+				display: flex;
+				align-items: center;
+				padding: 0 10px;
+				height: 36px;
+			}
+
+			.elevator-space {
+				width: 40px;
+			}
+
+			.huifont-shuzhuangcaidanxiala {
+				font-size: 7px;
+				margin-right: 5px;
+			}
+
+			.elevator-title-name {
+				flex: 1;
+				width: 0;
+
+			}
+
+			.item-box {
+				display: flex;
+				padding: 16px;
+				justify-content: space-between;
+
+				.number-item {
+					margin-bottom: 16px;
+					height: 37px;
+				}
+
+				.number-item:last-child {
+					margin-bottom: 0px;
+				}
+
+				.number {
+					margin-bottom: 3px;
+					line-height: 17px;
+				}
+			}
+
+			.item-title {
+				display: flex;
+				align-items: center;
+				padding: 0 12px;
+				margin-top: 20px;
+
+				.name {
+					flex: 1;
+					margin-left: 8px;
+				}
+
+				.unit {
+					display: flex;
+					align-items: center;
+				}
+
+				.number {
+					line-height: 20px;
+					text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+					margin: 0 2px;
+					font-size: 14px;
+				}
+			}
+		}
+
+		.elevator-item:last-child {
+			margin-bottom: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/electrical/lift.vue

@@ -0,0 +1,543 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="box-background lift">
+				<div class="lift-lists">
+					<div class="hui-chart-title">电梯告警信息</div>
+					<div class="lift-alarm">
+						<div class="device-alarm-test">
+							<div class="alarm-img"></div>
+							<div class="test-number">
+								<span class="number alibaba">3</span>
+								<span class="unit">台</span>
+							</div>
+							<div class="test-btn">
+								故障电梯
+							</div>
+						</div>
+						<div class="alarm-list">
+							<div class="hui-test-alarm">
+								<div class="alarm-table-box hui-flex">
+									<div class="alarm-title">
+										<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>
+						</div>
+					</div>
+					<div class="hui-chart-title">
+						<span>电梯运行情况</span>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background: #2DB85C;"></span>
+								<span class="legend-name">正常</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background: #F04243;"></span>
+								<span class="legend-name">报警</span>
+							</div>
+						</div>
+					</div>
+					<div class="lift-box">
+						<div class="lift-prev">
+							<div class="icon"></div>
+						</div>
+						<div class="lift-list">
+							<div class="lift-view">
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯1
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage">
+											-2F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯2
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 20%;">
+											2F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯3
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 30%;">
+											-3F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯4
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="top: 0;bottom: auto;">
+											10F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯5
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 70%;">
+											7F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯6
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="top: 0;bottom: auto;">
+											10F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯7
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="top: 0;bottom: auto;">
+											10F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯8
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 20%;">
+											2F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯9
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 50%;">
+											5F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯10
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 50%;">
+											5F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯11
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 0;">
+											-2F
+											<div class="bage error"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯8
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 20%;">
+											2F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+								<div class="lift-item">
+									<div class="lift-title">
+										客梯9
+									</div>
+									<div class="lift-content">
+										<div class="lift-bage" style="bottom: 50%;">
+											5F
+											<div class="bage"></div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="lift-next">
+							<div class="icon"></div>
+						</div>
+					</div>
+				</div>
+				<div class="lift-test">
+					<div class="test-top">
+						<div class="hui-chart-title">今日客流量统计</div>
+						<div class="test-count">
+							<div class="test-item">
+								<div class="test-icon">
+									<i class="iconfont huifont-zaichangrenshu"></i>
+								</div>
+								<div class="test-label">
+									<div class="test-name">平均流量</div>
+									<div class="test-value alibaba">256</div>
+								</div>
+							</div>
+							<div class="test-item">
+								<div class="test-icon green">
+									<i class="iconfont huifont-jinchang"></i>
+								</div>
+								<div class="test-label">
+									<div class="test-name">进场人次</div>
+									<div class="test-value alibaba">2580</div>
+								</div>
+							</div>
+							<div class="test-item">
+								<div class="test-icon red">
+									<i class="iconfont huifont-chuchang"></i>
+								</div>
+								<div class="test-label">
+									<div class="test-name">出场人次</div>
+									<div class="test-value alibaba">1236</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="bim-box">
+						<model type="lift" fileId="10000786668492"></model>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import model from '@/components/work/common/model'
+	import selectSpace from '@/components/work/common/selectSpace'
+	export default {
+		data() {
+			return {}
+		},
+		created() {},
+		components: {
+			model,
+			selectSpace
+		},
+		methods: {}
+	}
+</script>
+
+<style lang="scss">
+	.lift {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		padding: 20px;
+
+		.lift-test {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.test-top {
+				background: #151A25;
+				padding: 20px;
+			}
+
+			.test-count {
+				margin-top: 20px;
+				display: flex;
+
+				.test-item {
+					flex: 1;
+					height: 94px;
+					background: #19202E;
+					display: flex;
+					align-items: center;
+					padding-left: 24px;
+					color: #D2E4FF;
+					margin-right: 12px;
+				}
+
+				.test-item:last-child {
+					margin-right: 0;
+				}
+
+				.test-label {
+					flex: 1;
+					width: 0;
+					overflow: hidden;
+				}
+
+				.test-value {
+					font-size: 24px;
+					margin-top: 5px;
+				}
+
+				.test-icon {
+					width: 56px;
+					height: 56px;
+					background: #3371FF;
+					border-radius: 20px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-right: 16px;
+
+					i {
+						font-size: 32px;
+						color: #e6e6e6;
+					}
+				}
+
+				.green {
+					background: $--color-green;
+				}
+
+				.gray {
+					background: #AFB9CC;
+				}
+
+				.purple {
+					background: #9D60FB;
+				}
+
+				.red {
+					background: $--color-red;
+				}
+			}
+		}
+
+		.lift-lists {
+			flex: 1;
+			background: #151A25;
+			border-radius: 2px;
+			display: flex;
+			flex-direction: column;
+			padding: 20px;
+			margin-right: 13px;
+
+			.hui-chart-title {
+				margin-bottom: 20px;
+			}
+
+			.legend-box {
+				width: 150px;
+				position: relative;
+			}
+
+			.lift-alarm {
+				margin-bottom: 30px;
+				display: flex;
+			}
+
+			.alarm-list {
+				flex: 1;
+				width: 0;
+
+				.alarm-title,
+				.alarm-table {
+					padding: 0;
+					margin: 0;
+				}
+
+				.hui-test-alarm {
+					height: auto;
+				}
+			}
+
+			.alarm-img {
+				width: 104px;
+				height: 104px;
+				background-image: url(../../../../assets/img/work/lift/alarm.png);
+				background-size: 100% 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-top: 32px;
+			}
+
+			.test-btn {
+				width: 126px;
+				line-height: 26px;
+				background-image: url(../../../../assets/img/work/device/btn-bg.png);
+				background-size: 100% 100%;
+				text-align: center;
+				margin-top: 7px;
+				color: #FFE6E6;
+			}
+
+			.device-alarm-test {
+				width: 168px;
+				height: 232px;
+				background: rgba(97, 133, 214, 0.05);
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+
+			.test-number {
+				display: flex;
+				align-items: center;
+				margin-top: 12px;
+			}
+
+			.number {
+				font-size: 24px;
+				font-weight: bold;
+				color: #FFE6E6;
+				line-height: 33px;
+				text-shadow: 0px 0px 12px rgba(249, 51, 59, 0.5);
+				margin-right: 4px;
+			}
+
+			.unit {
+				font-size: 12px;
+				text-shadow: 0px 0px 12px rgba(249, 51, 59, 0.5);
+			}
+
+			.lift-title {
+				width: 100%;
+				overflow: hidden;
+				height: 17px;
+				line-height: 17px;
+				margin-bottom: 6px;
+				text-align: center;
+			}
+
+			.lift-bage {
+				position: absolute;
+				bottom: 0;
+				text-align: center;
+				width: 100%;
+			}
+
+			.bage {
+				width: 12px;
+				height: 6px;
+				background: #2DB85C;
+				box-shadow: 0px 0px 4px 0px rgba(45, 184, 92, 0.5);
+				border-radius: 4px;
+				margin: 5px auto;
+			}
+
+			.bage.error {
+				background: #F04243;
+				box-shadow: 0px 0px 4px 0px rgba(240, 66, 67, 0.5);
+			}
+
+			.lift-view {
+				display: flex;
+				height: 100%;
+			}
+
+			.lift-box {
+				display: flex;
+				flex: 1;
+				height: 0;
+				overflow: hidden;
+			}
+
+			.lift-list {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+			}
+
+			.icon {
+				background: url(../../../../assets/image/device/prev.png) no-repeat;
+				width: 16px;
+				height: 18px;
+				background-size: 100% 100%;
+				cursor: pointer;
+			}
+
+			.lift-next .icon {
+				transform: rotate(180deg);
+			}
+
+			.lift-item {
+				width: 42px;
+				min-width: 42px;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				font-size: 12px;
+				padding: 0 2px;
+
+			}
+
+			.lift-content {
+				width: 22px;
+				flex: 1;
+				height: 0;
+				background: rgba(39, 54, 83, 0.3);
+				border: 1px solid rgba(50, 74, 120, 0.7);
+				position: relative;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/electrical/lighting/indoor.vue

@@ -0,0 +1,241 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="indoor box-background">
+				<div class="indoor-box">
+					<div class="indoor-center">
+						<div class="bim-box" style="margin-top: 0;">
+							<model ref="model" type="indoor" fileId="10000746828136"></model>
+						</div>
+					</div>
+					<div class="indoor-right color-font">
+						<div class="light-operation">
+							<div class="indoor-title">
+								<div class="hui-chart-title">
+									照明控制
+								</div>
+							</div>
+							<div class="operation">
+								<div class="hui-operation">
+									<div class="operation-item">
+										<div class="operation-label">
+											<span class="label">开灯数</span>
+											<span class="number alibaba">0</span>
+										</div>
+										<div class="operation-test">
+											<div class="test-number" style="width:0%;background: #F9B115;"></div>
+										</div>
+									</div>
+									<div class="operation-item">
+										<div class="operation-label">
+											<span class="label">关闭数</span>
+											<span class="number alibaba">1</span>
+										</div>
+										<div class="operation-test">
+											<div class="test-number" style="width:100%;background: #BDC7DB;"></div>
+										</div>
+									</div>
+								</div>
+								<div class="light-list">
+									<div class="light-item">
+										<div class="item-box">
+											<div class="light-top">
+												<i class="iconfont huifont-zhaoming"></i>
+												<el-switch v-model="value" @change="changeDoor"></el-switch>
+											</div>
+											<div class="label hui-ellipsis">
+												照明1
+											</div>
+										</div>
+									</div>
+								</div>
+							</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 {
+				value: false
+			}
+		},
+		methods: {
+			changeDoor() {
+				this.$refs.model.indoor(this.value, ['2828342']);
+			}
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.indoor {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.indoor-title {
+			padding: 20px 20px 0 20px;
+			margin-bottom: 12px;
+		}
+
+		.indoor-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.indoor-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.indoor-right {
+			height: 100%;
+			width: 350px;
+			background: rgba(0, 4, 10, 0.3);
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.light-operation {
+			flex: 1;
+			height: 0;
+			display: flex;
+			flex-direction: column;
+
+			.operation {
+				flex: 1;
+				height: 0;
+				overflow-y: auto;
+				padding: 0px 10px 0px 20px;
+			}
+		}
+
+		.curtain-list {
+			.curtain-item {
+				height: 180px;
+				background: #1E2430;
+				border-radius: 8px;
+				margin-top: 12px;
+				padding: 16px 12px;
+			}
+
+			.curtain-title {
+				margin-bottom: 10px;
+			}
+
+			.curtain-box {
+				text-align: center;
+				margin-bottom: 26px;
+				justify-content: center;
+			}
+
+			.huifont-chuanglian {
+				font-size: 56px;
+				color: #576171;
+			}
+
+			.curtain-operation {
+				display: flex;
+				justify-content: center;
+			}
+
+			.curtain-operation-item {
+				width: 32px;
+				line-height: 24px;
+				background: rgba(255, 255, 255, 0.1);
+				border-radius: 4px;
+				text-align: center;
+				cursor: pointer;
+				margin: 0 6px;
+			}
+
+			.curtain-operation-item:hover {
+				color: $--color-primary;
+				background: rgba(51, 113, 255, 0.1);
+			}
+		}
+
+		.light-list {
+			display: flex;
+			flex-wrap: wrap;
+
+			.light-line {
+				width: 10px;
+			}
+
+			.light-top {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				i {
+					font-size: 28px;
+				}
+			}
+
+			.light-item {
+				flex: 1;
+				min-width: 33.33333%;
+				margin-top: 12px;
+				padding-right: 10px;
+			}
+
+			.item-box {
+				height: 100px;
+				padding: 14px 10px 16px 10px;
+				background: #1E2430;
+				border-radius: 8px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+
+			.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>

virgo.wzfrontend/console/src/views/work/energy/electrical/lighting/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>

virgo.wzfrontend/console/src/views/work/energy/electrical/powerdistribution.vue

@@ -0,0 +1,469 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="powerdistribution box-background">
+				<div class="powerdistribution-box">
+					<div class="powerdistribution-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="powerdistribution" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="powerdistribution-right">
+						<div class="device-item-box">
+							<div class="device-item">
+								<div class="item-title color-font">
+									<div class="hui-tag hui-tag-success">正常</div>
+									<span class="name">3号变压器</span>
+									<div class="nuit">
+										本月电量 <span class="number alibaba color-cyan">132153.1</span>kwh
+									</div>
+								</div>
+								<div class="item-box">
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												Ua电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												la电压(A)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												三相有功功率(KW)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												52321.0
+											</div>
+											<div class="label">
+												三相无功功率(KVar)
+											</div>
+										</div>
+									</div>
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												233
+											</div>
+											<div class="label">
+												Ub电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												255
+											</div>
+											<div class="label">
+												la电流(B)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												0
+											</div>
+											<div class="label">
+												PVUR(%)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												0
+											</div>
+											<div class="label">
+												漏电电流(mA)
+											</div>
+										</div>
+									</div>
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												233.2
+											</div>
+											<div class="label">
+												Uc电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												234.4
+											</div>
+											<div class="label">
+												la电流(C)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												234.6
+											</div>
+											<div class="label">
+												PVR(%)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												55
+											</div>
+											<div class="label">
+												频率(Hz)
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="device-item">
+								<div class="item-title color-font">
+									<div class="hui-tag hui-tag-error">故障</div>
+									<span class="name">3号变压器</span>
+									<div class="nuit">
+										本月电量 <span class="number alibaba color-cyan">132153.1</span>kwh
+									</div>
+								</div>
+								<div class="item-box">
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-red">
+												236
+											</div>
+											<div class="label">
+												Ua电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												la电压(A)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												三相有功功率(KW)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												52321.0
+											</div>
+											<div class="label">
+												三相无功功率(KVar)
+											</div>
+										</div>
+									</div>
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												233
+											</div>
+											<div class="label">
+												Ub电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												255
+											</div>
+											<div class="label">
+												la电流(B)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												0
+											</div>
+											<div class="label">
+												PVUR(%)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												0
+											</div>
+											<div class="label">
+												漏电电流(mA)
+											</div>
+										</div>
+									</div>
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												233.2
+											</div>
+											<div class="label">
+												Uc电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												234.4
+											</div>
+											<div class="label">
+												la电流(C)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												234.6
+											</div>
+											<div class="label">
+												PVR(%)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												55
+											</div>
+											<div class="label">
+												频率(Hz)
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="device-item">
+								<div class="item-title color-font">
+									<div class="hui-tag hui-tag-info">离线</div>
+									<span class="name">3号变压器</span>
+									<div class="nuit">
+										本月电量 <span class="number alibaba color-cyan">132153.1</span>kwh
+									</div>
+								</div>
+								<div class="item-box">
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												Ua电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												la电压(A)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												236
+											</div>
+											<div class="label">
+												三相有功功率(KW)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												52321.0
+											</div>
+											<div class="label">
+												三相无功功率(KVar)
+											</div>
+										</div>
+									</div>
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												233
+											</div>
+											<div class="label">
+												Ub电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												255
+											</div>
+											<div class="label">
+												la电流(B)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												0
+											</div>
+											<div class="label">
+												PVUR(%)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												0
+											</div>
+											<div class="label">
+												漏电电流(mA)
+											</div>
+										</div>
+									</div>
+									<div class="item-number">
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												233.2
+											</div>
+											<div class="label">
+												Uc电压(V)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												234.4
+											</div>
+											<div class="label">
+												la电流(C)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												234.6
+											</div>
+											<div class="label">
+												PVR(%)
+											</div>
+										</div>
+										<div class="number-item">
+											<div class="number alibaba color-green">
+												55
+											</div>
+											<div class="label">
+												频率(Hz)
+											</div>
+										</div>
+									</div>
+								</div>
+							</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 {
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.powerdistribution {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.powerdistribution-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.powerdistribution-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.powerdistribution-right {
+			height: 100%;
+			width: 350px;
+			padding: 20px 0;
+			background: rgba(0, 4, 10, 0.3);
+			margin-left: 12px;
+
+			.device-item-box {
+				width: 100%;
+				height: 100%;
+				padding: 0 20px;
+				overflow-y: auto;
+			}
+
+			.device-item {
+				background: #181F2D;
+				border: 1px solid rgba(97, 133, 214, 0.15);
+				font-size: 12px;
+				margin-bottom: 12px;
+
+				.item-box {
+					display: flex;
+					padding: 16px;
+					justify-content: space-between;
+
+					.number-item {
+						margin-bottom: 16px;
+						height: 37px;
+					}
+
+					.number-item:last-child {
+						margin-bottom: 0px;
+					}
+
+					.number {
+						margin-bottom: 3px;
+						line-height: 17px;
+					}
+				}
+
+				.item-title {
+					height: 36px;
+					background: rgba(97, 133, 214, 0.08);
+					display: flex;
+					align-items: center;
+					padding: 0 8px;
+
+					.name {
+						flex: 1;
+						margin-left: 8px;
+					}
+
+					.unit {
+						display: flex;
+						align-items: center;
+					}
+
+					.number {
+						line-height: 20px;
+						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+						margin: 0 2px;
+						font-size: 14px;
+					}
+				}
+			}
+
+			.device-item:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/strategy/conservation.vue

@@ -0,0 +1,920 @@
+<template>
+	<div class="hui-flex hui-content conservation-item">
+		<div class="hui-content-title">
+			<div class="hui-title-item active">输配侧</div>
+			<div class="hui-title-item">换热侧</div>
+			<div class="hui-title-item">室外侧</div>
+			<div class="hui-title-item">设备侧</div>
+		</div>
+		<div class="hui-flex-box">
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					输配侧
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							冷却水供/回水温度
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">冷却水管供水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却水管回水温度</span>
+							</div>
+						</div>
+						<div ref="chart1" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷冻水供/回水温度
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">冷却水管供水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却水管回水温度</span>
+							</div>
+						</div>
+						<div ref="chart2" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					冷却塔换热侧
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							1#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart3" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							2#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart4" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							3#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart5" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							4#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart6" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					输配侧
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							室外气象数据
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">室外干球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page"
+									style="background: linear-gradient(360deg, rgba(157,96,251,0) 0%, #9D60FB 100%);"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+						</div>
+						<div ref="chart7" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷冻水供/回水温度
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">监测室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">预测室外相对温度</span>
+							</div>
+						</div>
+						<div ref="chart8" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					室外侧
+				</div>
+				<div class="conservation-select combination-select">
+					<el-select size="mini" v-model="value" placeholder="请选择">
+						<el-option label="浓度" :value="1">
+						</el-option>
+						<el-option label="浊度" :value="2">
+						</el-option>
+					</el-select>
+					<el-select size="mini" v-model="value" placeholder="请选择">
+						<el-option label="浓度" :value="1">
+						</el-option>
+						<el-option label="浊度" :value="2">
+						</el-option>
+					</el-select>
+					<el-date-picker size="mini" v-model="value1" type="daterange" range-separator="-"
+						start-placeholder="开始日期" end-placeholder="结束日期">
+					</el-date-picker>
+				</div>
+				<div class="chart-table">
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div ref="chart9" class="big-chart"></div>
+					</div>
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div class="big-chart">
+							<el-table :data="tableData" style="width: 100%" height="100%">
+								<el-table-column prop="type" label="负荷率" width="120">
+								</el-table-column>
+								<el-table-column label="冷却水进水温度(°C)">
+									<el-table-column prop="name" label="4°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="20°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="22°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="24°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="26°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="28°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="30°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="32°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="124°C" min-width="80">
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+						</div>
+					</div>
+				</div>
+				<div class="chart-table">
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div ref="chart10" class="big-chart"></div>
+					</div>
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div class="big-chart">
+							<el-table :data="tableData" style="width: 100%" height="100%">
+								<el-table-column prop="type" label="负荷率" width="120">
+								</el-table-column>
+								<el-table-column label="冷却水进水温度(°C)">
+									<el-table-column prop="name" label="4°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="20°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="22°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="24°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="26°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="28°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="30°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="32°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="124°C" min-width="80">
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+						</div>
+					</div>
+				</div>
+				<div class="conservation-select combination-select">
+					<el-select size="mini" v-model="value" placeholder="请选择">
+						<el-option label="浓度" :value="1">
+						</el-option>
+						<el-option label="浊度" :value="2">
+						</el-option>
+					</el-select>
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							蒸发器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart11" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷凝器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart12" class="chart-box"></div>
+					</div>
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							蒸发器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart13" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷凝器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart14" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+				value1: [],
+				tableData: [{
+					type: '0%',
+					name: 10,
+				}, {
+					type: '10%',
+					name: 10,
+				}, {
+					type: '20%',
+					name: 10,
+				}, {
+					type: '30%',
+					name: 10,
+				}, {
+					type: '40%',
+					name: 10,
+				}, {
+					type: '50%',
+					name: 10,
+				}, {
+					type: '60%',
+					name: 10,
+				}, {
+					type: '70%',
+					name: 10,
+				}, {
+					type: '80%',
+					name: 10,
+				}, {
+					type: '90%',
+					name: 10,
+				}, {
+					type: '100%',
+					name: 10,
+				}, {
+					type: '时间权重总汇',
+					name: 10,
+				}, {
+					type: '总时长(H)',
+					name: 10,
+				}]
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				])
+				this.chart(this.$refs.chart2, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				])
+				this.chart(this.$refs.chart3, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart4, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart5, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart6, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart7, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				], 'bar', [2, 3, 1, 4, 4, 2, 3, 1, 4, 4])
+				this.chart(this.$refs.chart8, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				])
+				this.chart2(this.$refs.chart9);
+				this.chart2(this.$refs.chart10);
+				this.chart(this.$refs.chart11, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+				this.chart(this.$refs.chart12, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+				this.chart(this.$refs.chart13, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+				this.chart(this.$refs.chart14, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+			})
+		},
+		methods: {
+			chart(elem, data, color, x, type, data1) {
+				let chart = echarts.init(elem);
+				let series = [];
+				for (var i = 0; i < data.length; i++) {
+					series = series.concat([{
+						data: data[i],
+						type: 'line',
+						symbolSize: 6,
+						color: color[i],
+						lineStyle: {
+							width: 1
+						},
+						z: 99
+					}, {
+						data: data[i],
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						lineStyle: {
+							width: 1
+						},
+						color: color[i],
+						z: 99
+					}]);
+				}
+				if (type === 'bar') {
+					series.push({
+						data: data1,
+						type: 'bar',
+						barWidth: 6,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#9D60FB'
+						}, {
+							offset: 1,
+							color: 'rgba(157, 96, 251, 0)'
+						}, ]),
+					})
+				}
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '35',
+						right: '15',
+						bottom: '25',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: x,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: true,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: series
+				};
+				chart.setOption(option);
+			},
+			chart2(elem) {
+				let chart = echarts.init(elem);
+				// prettier-ignore
+				var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+					'7a', '8a', '9a', '10a', '11a',
+					'12p', '1p', '2p', '3p', '4p', '5p',
+					'6p', '7p', '8p', '9p', '10p', '11p'
+				];
+				// prettier-ignore
+				var days = ['Saturday', 'Friday', 'Thursday',
+					'Wednesday', 'Tuesday', 'Monday', 'Sunday'
+				];
+				// prettier-ignore
+				var data = [
+					[0, 10, 0],
+					[0, 11, 2],
+					[0, 12, 4],
+					[0, 13, 1],
+					[0, 14, 1],
+					[0, 15, 3],
+					[0, 16, 4],
+					[0, 17, 6],
+					[0, 18, 4],
+					[0, 19, 4],
+					[0, 20, 3],
+					[0, 21, 3],
+					[0, 22, 2],
+					[0, 23, 5],
+					[1, 0, 7],
+					[1, 1, 0],
+					[1, 2, 0],
+					[1, 3, 0],
+					[1, 4, 0],
+					[1, 5, 0],
+					[1, 6, 0],
+					[1, 7, 0],
+					[1, 8, 0],
+					[1, 9, 0],
+					[1, 10, 5],
+					[1, 23, 2],
+					[2, 0, 1],
+					[2, 1, 1],
+					[2, 14, 8],
+					[2, 15, 10],
+					[2, 16, 6],
+					[2, 17, 5],
+					[2, 18, 5],
+					[2, 19, 5],
+					[2, 20, 7],
+					[2, 21, 4],
+					[2, 22, 2],
+					[2, 23, 4],
+					[3, 0, 7],
+					[3, 1, 3],
+					[3, 2, 0],
+					[3, 3, 0],
+					[3, 4, 0],
+					[3, 5, 0],
+					[3, 6, 0],
+					[3, 7, 0],
+					[3, 20, 6],
+					[3, 21, 4],
+					[3, 22, 4],
+					[3, 23, 1],
+					[4, 0, 1],
+					[4, 1, 3],
+					[4, 2, 0],
+					[4, 20, 3],
+					[4, 21, 7],
+					[4, 22, 3],
+					[4, 23, 0],
+					[5, 8, 2],
+					[5, 9, 0],
+					[5, 10, 4],
+					[5, 11, 1],
+					[5, 12, 5],
+					[5, 13, 10],
+					[5, 14, 5],
+					[5, 15, 7],
+					[5, 16, 11],
+				];
+				let option = {
+					tooltip: {},
+					visualMap: {
+						max: 20,
+						inRange: {
+							color: [
+								'#313695',
+								'#4575b4',
+								'#74add1',
+								'#abd9e9',
+								'#e0f3f8',
+								'#ffffbf',
+								'#fee090',
+								'#fdae61',
+								'#f46d43',
+								'#d73027',
+								'#a50026'
+							]
+						}
+					},
+					xAxis3D: {
+						type: 'category',
+						data: hours,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					yAxis3D: {
+						type: 'category',
+						data: days,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					zAxis3D: {
+						type: 'value',
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					grid3D: {
+						boxWidth: 140,
+						boxHeight: 60,
+						boxDepth: 60,
+						viewControl: {
+							// projection: 'orthographic'
+						},
+						light: {
+							main: {
+								intensity: 1.2,
+								shadow: true
+							},
+							ambient: {
+								intensity: 0.3
+							}
+						}
+					},
+					series: [{
+						type: 'bar3D',
+						data: data.map(function(item) {
+							return {
+								value: [item[1], item[0], item[2]]
+							};
+						}),
+						shading: 'lambert',
+						label: {
+							fontSize: 16,
+							borderWidth: 1
+						},
+						emphasis: {
+							label: {
+								fontSize: 20,
+								color: '#900'
+							},
+							itemStyle: {
+								color: '#900'
+							}
+						}
+					}]
+				};
+				chart.setOption(option);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.conservation-item {
+		margin-bottom: 12px;
+
+		.chart-table {
+			display: flex;
+			font-size: 12px;
+
+
+			.chart-table-item {
+				flex: 1;
+				width: 0;
+				margin-right: 12px;
+			}
+
+			.title {
+				margin: 13px 0;
+				font-weight: 600;
+			}
+
+			.big-chart {
+				height: 601px;
+				background: #222433;
+			}
+
+			.el-table {
+				font-size: 12px;
+				color: #D2E4FF;
+				border-color: rgba(97, 133, 214, 0.15);
+				background: transparent;
+
+				thead.is-group th.el-table__cell {
+					background: rgba(97, 133, 214, 0.05);
+					text-align: center;
+				}
+
+				tr,
+				th.el-table__cell.is-leaf,
+				td.el-table__cell {
+					background: transparent;
+				}
+
+				.el-table__cell {
+					padding: 8px 0;
+					text-align: center;
+					border-right: 1px solid rgba(97, 133, 214, 0.15);
+				}
+
+				thead {
+					color: #D2E4FF;
+				}
+
+				.el-table__header th.el-table__cell,
+				th.el-table__cell.is-leaf,
+				td.el-table__cell {
+					border-color: rgba(97, 133, 214, 0.15);
+				}
+			}
+
+			.el-table--group::after,
+			.el-table--border::after,
+			.el-table::before {
+				display: none;
+			}
+
+			.chart-table-item:last-child {
+				margin-right: 0;
+
+				.big-chart {
+					background: transparent;
+				}
+			}
+		}
+
+		.conservation-select {
+			display: flex;
+			margin-top: 20px;
+
+			.el-select {
+				width: 140px;
+			}
+
+			.date {
+				width: 184px;
+			}
+		}
+
+		.hui-flex-box {
+			margin: 20px 0;
+			padding: 0 20px;
+		}
+
+		.conservation-item {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.conservation-chart {
+			margin-top: 18px;
+			display: flex;
+		}
+
+		.chart-item {
+			background: #181F2D;
+			flex: 1;
+			margin-right: 12px;
+			position: relative;
+		}
+
+		.chart-item:last-child {
+			margin-right: 0;
+		}
+
+		.legend-box {
+			width: 100%;
+			top: 52px;
+		}
+
+		.chart-title {
+			font-weight: 600;
+			line-height: 48px;
+			padding-left: 20px;
+		}
+
+		.chart-box {
+			height: 200px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/strategy/prediction.vue

@@ -0,0 +1,920 @@
+<template>
+	<div class="hui-flex hui-content conservation-item">
+		<div class="hui-content-title">
+			<div class="hui-title-item active">输配侧</div>
+			<div class="hui-title-item">换热侧</div>
+			<div class="hui-title-item">室外侧</div>
+			<div class="hui-title-item">设备侧</div>
+		</div>
+		<div class="hui-flex-box">
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					输配侧
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							冷却水供/回水温度
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">冷却水管供水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却水管回水温度</span>
+							</div>
+						</div>
+						<div ref="chart1" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷冻水供/回水温度
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">冷却水管供水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却水管回水温度</span>
+							</div>
+						</div>
+						<div ref="chart2" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					冷却塔换热侧
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							1#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart3" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							2#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart4" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							3#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart5" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							4#冷却塔
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">冷却塔出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F04243;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#2DB85C;"></span>
+								<span class="legend-name">逼近温度</span>
+							</div>
+						</div>
+						<div ref="chart6" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					输配侧
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							室外气象数据
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">室外干球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page"
+									style="background: linear-gradient(360deg, rgba(157,96,251,0) 0%, #9D60FB 100%);"></span>
+								<span class="legend-name">室外湿球温度</span>
+							</div>
+						</div>
+						<div ref="chart7" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷冻水供/回水温度
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">监测室外湿球温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">预测室外相对温度</span>
+							</div>
+						</div>
+						<div ref="chart8" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+			<div class="conservation-item">
+				<div class="hui-chart-title">
+					室外侧
+				</div>
+				<div class="conservation-select combination-select">
+					<el-select size="mini" v-model="value" placeholder="请选择">
+						<el-option label="浓度" :value="1">
+						</el-option>
+						<el-option label="浊度" :value="2">
+						</el-option>
+					</el-select>
+					<el-select size="mini" v-model="value" placeholder="请选择">
+						<el-option label="浓度" :value="1">
+						</el-option>
+						<el-option label="浊度" :value="2">
+						</el-option>
+					</el-select>
+					<el-date-picker size="mini" v-model="value1" type="daterange" range-separator="-"
+						start-placeholder="开始日期" end-placeholder="结束日期">
+					</el-date-picker>
+				</div>
+				<div class="chart-table">
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div ref="chart9" class="big-chart"></div>
+					</div>
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div class="big-chart">
+							<el-table :data="tableData" style="width: 100%" height="100%">
+								<el-table-column prop="type" label="负荷率" width="120">
+								</el-table-column>
+								<el-table-column label="冷却水进水温度(°C)">
+									<el-table-column prop="name" label="4°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="20°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="22°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="24°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="26°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="28°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="30°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="32°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="124°C" min-width="80">
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+						</div>
+					</div>
+				</div>
+				<div class="chart-table">
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div ref="chart10" class="big-chart"></div>
+					</div>
+					<div class="chart-table-item">
+						<div class="title">冷却水进水温度及负荷率与时间组合分布图</div>
+						<div class="big-chart">
+							<el-table :data="tableData" style="width: 100%" height="100%">
+								<el-table-column prop="type" label="负荷率" width="120">
+								</el-table-column>
+								<el-table-column label="冷却水进水温度(°C)">
+									<el-table-column prop="name" label="4°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="20°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="22°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="24°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="26°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="28°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="30°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="32°C" min-width="60">
+									</el-table-column>
+									<el-table-column prop="name" label="124°C" min-width="80">
+									</el-table-column>
+								</el-table-column>
+							</el-table>
+						</div>
+					</div>
+				</div>
+				<div class="conservation-select combination-select">
+					<el-select size="mini" v-model="value" placeholder="请选择">
+						<el-option label="浓度" :value="1">
+						</el-option>
+						<el-option label="浊度" :value="2">
+						</el-option>
+					</el-select>
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							蒸发器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart11" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷凝器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart12" class="chart-box"></div>
+					</div>
+				</div>
+				<div class="conservation-chart">
+					<div class="chart-item">
+						<div class="chart-title">
+							蒸发器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart13" class="chart-box"></div>
+					</div>
+					<div class="chart-item">
+						<div class="chart-title">
+							冷凝器换热能力情况
+						</div>
+						<div class="legend-box">
+							<div class="legend-item">
+								<span class="legend-page" style="background:#3371FF;"></span>
+								<span class="legend-name">蒸发器出水温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#06E0E9;"></span>
+								<span class="legend-name">蒸发温度</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-page" style="background:#F9B115;"></span>
+								<span class="legend-name">趋近温度</span>
+							</div>
+						</div>
+						<div ref="chart14" class="chart-box"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+				value1: [],
+				tableData: [{
+					type: '0%',
+					name: 10,
+				}, {
+					type: '10%',
+					name: 10,
+				}, {
+					type: '20%',
+					name: 10,
+				}, {
+					type: '30%',
+					name: 10,
+				}, {
+					type: '40%',
+					name: 10,
+				}, {
+					type: '50%',
+					name: 10,
+				}, {
+					type: '60%',
+					name: 10,
+				}, {
+					type: '70%',
+					name: 10,
+				}, {
+					type: '80%',
+					name: 10,
+				}, {
+					type: '90%',
+					name: 10,
+				}, {
+					type: '100%',
+					name: 10,
+				}, {
+					type: '时间权重总汇',
+					name: 10,
+				}, {
+					type: '总时长(H)',
+					name: 10,
+				}]
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				])
+				this.chart(this.$refs.chart2, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				])
+				this.chart(this.$refs.chart3, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart4, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart5, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart6, [
+					[1, 3, 2, 6, 1, 1],
+					[2, 3, 1, 4, 4, 2],
+					[3, 2, 1, 5, 3, 3],
+				], ['#06E0E9', '#F04243', '#2DB85C'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6'])
+				this.chart(this.$refs.chart7, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				], 'bar', [2, 3, 1, 4, 4, 2, 3, 1, 4, 4])
+				this.chart(this.$refs.chart8, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4]
+				], ['#3371FF', '#06E0E9'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9',
+					'类目10'
+				])
+				this.chart2(this.$refs.chart9);
+				this.chart2(this.$refs.chart10);
+				this.chart(this.$refs.chart11, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+				this.chart(this.$refs.chart12, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+				this.chart(this.$refs.chart13, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+				this.chart(this.$refs.chart14, [
+					[1, 3, 2, 6, 1, 1, 3, 2, 6, 1],
+					[2, 3, 1, 4, 4, 2, 3, 1, 4, 4],
+					[3, 4, 3, 4, 5, 3, 2, 3, 1, 3]
+				], ['#3371FF', '#06E0E9', '#F9B115'], ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7',
+					'类目8', '类目9', '类目10'
+				])
+			})
+		},
+		methods: {
+			chart(elem, data, color, x, type, data1) {
+				let chart = echarts.init(elem);
+				let series = [];
+				for (var i = 0; i < data.length; i++) {
+					series = series.concat([{
+						data: data[i],
+						type: 'line',
+						symbolSize: 6,
+						color: color[i],
+						lineStyle: {
+							width: 1
+						},
+						z: 99
+					}, {
+						data: data[i],
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						lineStyle: {
+							width: 1
+						},
+						color: color[i],
+						z: 99
+					}]);
+				}
+				if (type === 'bar') {
+					series.push({
+						data: data1,
+						type: 'bar',
+						barWidth: 6,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: '#9D60FB'
+						}, {
+							offset: 1,
+							color: 'rgba(157, 96, 251, 0)'
+						}, ]),
+					})
+				}
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '35',
+						right: '15',
+						bottom: '25',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: x,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: true,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: series
+				};
+				chart.setOption(option);
+			},
+			chart2(elem) {
+				let chart = echarts.init(elem);
+				// prettier-ignore
+				var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+					'7a', '8a', '9a', '10a', '11a',
+					'12p', '1p', '2p', '3p', '4p', '5p',
+					'6p', '7p', '8p', '9p', '10p', '11p'
+				];
+				// prettier-ignore
+				var days = ['Saturday', 'Friday', 'Thursday',
+					'Wednesday', 'Tuesday', 'Monday', 'Sunday'
+				];
+				// prettier-ignore
+				var data = [
+					[0, 10, 0],
+					[0, 11, 2],
+					[0, 12, 4],
+					[0, 13, 1],
+					[0, 14, 1],
+					[0, 15, 3],
+					[0, 16, 4],
+					[0, 17, 6],
+					[0, 18, 4],
+					[0, 19, 4],
+					[0, 20, 3],
+					[0, 21, 3],
+					[0, 22, 2],
+					[0, 23, 5],
+					[1, 0, 7],
+					[1, 1, 0],
+					[1, 2, 0],
+					[1, 3, 0],
+					[1, 4, 0],
+					[1, 5, 0],
+					[1, 6, 0],
+					[1, 7, 0],
+					[1, 8, 0],
+					[1, 9, 0],
+					[1, 10, 5],
+					[1, 23, 2],
+					[2, 0, 1],
+					[2, 1, 1],
+					[2, 14, 8],
+					[2, 15, 10],
+					[2, 16, 6],
+					[2, 17, 5],
+					[2, 18, 5],
+					[2, 19, 5],
+					[2, 20, 7],
+					[2, 21, 4],
+					[2, 22, 2],
+					[2, 23, 4],
+					[3, 0, 7],
+					[3, 1, 3],
+					[3, 2, 0],
+					[3, 3, 0],
+					[3, 4, 0],
+					[3, 5, 0],
+					[3, 6, 0],
+					[3, 7, 0],
+					[3, 20, 6],
+					[3, 21, 4],
+					[3, 22, 4],
+					[3, 23, 1],
+					[4, 0, 1],
+					[4, 1, 3],
+					[4, 2, 0],
+					[4, 20, 3],
+					[4, 21, 7],
+					[4, 22, 3],
+					[4, 23, 0],
+					[5, 8, 2],
+					[5, 9, 0],
+					[5, 10, 4],
+					[5, 11, 1],
+					[5, 12, 5],
+					[5, 13, 10],
+					[5, 14, 5],
+					[5, 15, 7],
+					[5, 16, 11],
+				];
+				let option = {
+					tooltip: {},
+					visualMap: {
+						max: 20,
+						inRange: {
+							color: [
+								'#313695',
+								'#4575b4',
+								'#74add1',
+								'#abd9e9',
+								'#e0f3f8',
+								'#ffffbf',
+								'#fee090',
+								'#fdae61',
+								'#f46d43',
+								'#d73027',
+								'#a50026'
+							]
+						}
+					},
+					xAxis3D: {
+						type: 'category',
+						data: hours,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					yAxis3D: {
+						type: 'category',
+						data: days,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					zAxis3D: {
+						type: 'value',
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					grid3D: {
+						boxWidth: 140,
+						boxHeight: 60,
+						boxDepth: 60,
+						viewControl: {
+							// projection: 'orthographic'
+						},
+						light: {
+							main: {
+								intensity: 1.2,
+								shadow: true
+							},
+							ambient: {
+								intensity: 0.3
+							}
+						}
+					},
+					series: [{
+						type: 'bar3D',
+						data: data.map(function(item) {
+							return {
+								value: [item[1], item[0], item[2]]
+							};
+						}),
+						shading: 'lambert',
+						label: {
+							fontSize: 16,
+							borderWidth: 1
+						},
+						emphasis: {
+							label: {
+								fontSize: 20,
+								color: '#900'
+							},
+							itemStyle: {
+								color: '#900'
+							}
+						}
+					}]
+				};
+				chart.setOption(option);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.conservation-item {
+		margin-bottom: 12px;
+
+		.chart-table {
+			display: flex;
+			font-size: 12px;
+
+
+			.chart-table-item {
+				flex: 1;
+				width: 0;
+				margin-right: 12px;
+			}
+
+			.title {
+				margin: 13px 0;
+				font-weight: 600;
+			}
+
+			.big-chart {
+				height: 601px;
+				background: #222433;
+			}
+
+			.el-table {
+				font-size: 12px;
+				color: #D2E4FF;
+				border-color: rgba(97, 133, 214, 0.15);
+				background: transparent;
+
+				thead.is-group th.el-table__cell {
+					background: rgba(97, 133, 214, 0.05);
+					text-align: center;
+				}
+
+				tr,
+				th.el-table__cell.is-leaf,
+				td.el-table__cell {
+					background: transparent;
+				}
+
+				.el-table__cell {
+					padding: 8px 0;
+					text-align: center;
+					border-right: 1px solid rgba(97, 133, 214, 0.15);
+				}
+
+				thead {
+					color: #D2E4FF;
+				}
+
+				.el-table__header th.el-table__cell,
+				th.el-table__cell.is-leaf,
+				td.el-table__cell {
+					border-color: rgba(97, 133, 214, 0.15);
+				}
+			}
+
+			.el-table--group::after,
+			.el-table--border::after,
+			.el-table::before {
+				display: none;
+			}
+
+			.chart-table-item:last-child {
+				margin-right: 0;
+
+				.big-chart {
+					background: transparent;
+				}
+			}
+		}
+
+		.conservation-select {
+			display: flex;
+			margin-top: 20px;
+
+			.el-select {
+				width: 140px;
+			}
+
+			.date {
+				width: 184px;
+			}
+		}
+
+		.hui-flex-box {
+			margin: 20px 0;
+			padding: 0 20px;
+		}
+
+		.conservation-item {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.conservation-chart {
+			margin-top: 18px;
+			display: flex;
+		}
+
+		.chart-item {
+			background: #181F2D;
+			flex: 1;
+			margin-right: 12px;
+			position: relative;
+		}
+
+		.chart-item:last-child {
+			margin-right: 0;
+		}
+
+		.legend-box {
+			width: 100%;
+			top: 52px;
+		}
+
+		.chart-title {
+			font-weight: 600;
+			line-height: 48px;
+			padding-left: 20px;
+		}
+
+		.chart-box {
+			height: 200px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/ventilate/basement.vue

@@ -0,0 +1,461 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="basement box-background">
+				<div class="basement-box">
+					<div class="basement-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="basement" fileId="10000786668082"></model>
+						</div>
+					</div>
+					<div class="basement-right">
+						<div class="basement-operation">
+							<div class="basement-title">
+								<div class="hui-chart-title">
+									风机柜控制
+								</div>
+							</div>
+							<div class="light-list">
+								<div class="light-item">
+									<div class="item-box">
+										<div class="light-top">
+											<i class="iconfont huifont-fengdiangui"></i>
+											<el-switch v-model="value1">
+											</el-switch>
+										</div>
+										<div class="label hui-ellipsis">
+											风机柜1
+										</div>
+									</div>
+								</div>
+								<div class="light-item">
+									<div class="item-box">
+										<div class="light-top">
+											<i class="iconfont huifont-fengdiangui"></i>
+											<el-switch v-model="value1">
+											</el-switch>
+										</div>
+										<div class="label hui-ellipsis">
+											风机柜2
+										</div>
+									</div>
+								</div>
+								<div class="light-item">
+									<div class="item-box">
+										<div class="light-top">
+											<i class="iconfont huifont-fengdiangui"></i>
+											<el-switch v-model="value1">
+											</el-switch>
+										</div>
+										<div class="label hui-ellipsis">
+											风机柜3
+										</div>
+									</div>
+								</div>
+								<div class="light-item">
+									<div class="item-box">
+										<div class="light-top">
+											<i class="iconfont huifont-fengdiangui"></i>
+											<el-switch v-model="value1">
+											</el-switch>
+										</div>
+										<div class="label hui-ellipsis">
+											风机柜4
+										</div>
+									</div>
+								</div>
+								<div class="light-item">
+									<div class="item-box">
+										<div class="light-top">
+											<i class="iconfont huifont-fengdiangui"></i>
+											<el-switch v-model="value1">
+											</el-switch>
+										</div>
+										<div class="label hui-ellipsis">
+											风机柜5
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="co-operation">
+							<div class="basement-title">
+								<div class="hui-chart-title">
+									CO传感器
+								</div>
+							</div>
+							<div class="co-list">
+								<div class="co-item">
+									<div class="co-title">
+										CO传感器1
+									</div>
+									<div class="co-label">
+										<div class="co-icon">
+											<i class="iconfont huifont-eryanghuatan"></i>
+										</div>
+										<span class="label">实时CO浓度</span>
+										<span class="number alibaba color-cyan">0.4</span>
+										<span class="unit">ppm</span>
+									</div>
+									<div ref="chart1" class="co-chart"></div>
+								</div>
+								<div class="co-item">
+									<div class="co-title">
+										CO传感器1
+									</div>
+									<div class="co-label">
+										<div class="co-icon">
+											<i class="iconfont huifont-eryanghuatan"></i>
+										</div>
+										<span class="label">实时CO浓度</span>
+										<span class="number alibaba color-cyan">0.4</span>
+										<span class="unit">ppm</span>
+									</div>
+									<div ref="chart2" class="co-chart"></div>
+								</div>
+								<div class="co-item">
+									<div class="co-title">
+										CO传感器1
+									</div>
+									<div class="co-label">
+										<div class="co-icon">
+											<i class="iconfont huifont-eryanghuatan"></i>
+										</div>
+										<span class="label">实时CO浓度</span>
+										<span class="number alibaba color-cyan">0.4</span>
+										<span class="unit">ppm</span>
+									</div>
+									<div ref="chart3" class="co-chart"></div>
+								</div>
+							</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 {
+				value1: true
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart2, [1, 3, 2, 6, 1]);
+				this.chart(this.$refs.chart3, [1, 3, 2, 6, 1]);
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			initList() {
+				getProjectTreeList(this.$store.getters.project.id).then(res => {
+					if (res.state) {
+						this.treeData = roomList(res.data.projectItemList, 'room');
+						this.activeName = this.treeData.map(node => node.id);
+					}
+				})
+			},
+			selectItem(item) {
+				if (item.projectItemTargetId) this.nowItem = item;
+			},
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '20',
+						top: '35',
+						right: '20',
+						bottom: '15',
+						containLabel: true
+					},
+					color: ['#AFB9CC'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '当日趋势',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'center',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.basement {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.co-list {
+			padding: 0 20px;
+			flex: 1;
+			height: 0;
+			overflow-y: auto;
+			margin-bottom: 20px;
+
+			.co-item {
+				margin-top: 10px;
+				background: #181F2D;
+				border: 1px solid rgba(97, 133, 214, 0.15);
+			}
+
+			.co-title {
+				line-height: 36px;
+				background: rgba(97, 133, 214, 0.08);
+				padding: 0 16px;
+			}
+
+			.co-label {
+				display: flex;
+				align-items: center;
+				padding: 20px;
+				border-bottom: 1px solid rgba(97, 133, 214, 0.15);
+
+				.co-icon {
+					width: 28px;
+					height: 28px;
+					background: #AFB9CC;
+					border-radius: 7px;
+					text-align: center;
+					line-height: 28px;
+					margin-right: 8px;
+
+					i {
+						font-size: 20px;
+						color: #fff;
+					}
+				}
+
+				.label {
+					flex: 1;
+					width: 0;
+				}
+
+				.number {
+					font-size: 20px;
+					margin-right: 6px;
+				}
+
+				.unit {
+					opacity: 0.6;
+				}
+			}
+
+			.co-chart {
+				height: 178px;
+			}
+		}
+
+		.basement-title {
+			padding: 20px 20px 0 20px;
+			margin-bottom: 12px;
+		}
+
+		.basement-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.basement-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.basement-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.basement-operation {
+			background: rgba(0, 4, 10, 0.3);
+			height: 194px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.co-operation {
+			flex: 1;
+			background: rgba(0, 4, 10, 0.3);
+			margin-top: 10px;
+			display: flex;
+			flex-direction: column;
+			height: 0;
+		}
+
+		.light-list {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 10px 0 20px;
+			margin-bottom: 20px;
+			flex: 1;
+			overflow-y: auto;
+
+			.light-line {
+				width: 10px;
+			}
+
+			.light-top {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				i {
+					font-size: 28px;
+				}
+			}
+
+			.light-item {
+				flex: 1;
+				min-width: 33.33333%;
+				margin-top: 12px;
+				padding-right: 10px;
+			}
+
+			.item-box {
+				height: 100px;
+				padding: 14px 10px 16px 10px;
+				background: #1E2430;
+				border-radius: 8px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+		}
+
+		.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>

virgo.wzfrontend/console/src/views/work/energy/ventilate/vrv/freshair.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="freshair box-background">
+				<div class="freshair-box">
+					<div class="freshair-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="freshair" fileId="10000786668082"></model>
+						</div>
+					</div>
+					<div class="freshair-right">
+						<div class="freshair-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="freshair-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.freshair {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.freshair-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.freshair-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.freshair-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.freshair-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.freshair-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/ventilate/vrv/indoor3d.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="indool3d box-background">
+				<div class="indool3d-box">
+					<div class="indool3d-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="indoor3d" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="indool3d-right">
+						<div class="indool3d-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="indool3d-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.indool3d {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.indool3d-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.indool3d-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.indool3d-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.indool3d-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.indool3d-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/ventilate/vrv/vrv.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="vrv box-background">
+				<div class="vrv-box">
+					<div class="vrv-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="vrv" fileId="10000786668082"></model>
+						</div>
+					</div>
+					<div class="vrv-right">
+						<div class="vrv-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="vrv-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.vrv {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.vrv-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.vrv-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.vrv-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.vrv-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.vrv-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/water/hvac/end.vue

@@ -0,0 +1,354 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="end-box box-background">
+				<model type="end" fileId="10000786667774"></model>
+				<div class="hui-chart-tip">
+					<div class="hui-tip-title">图列</div>
+					<div class="hui-tip-box">
+						<div class="hui-tip-item">
+							<span class="hui-tip-dage cyan"></span>
+							<span class="hui-tip-name">开机</span>
+						</div>
+						<div class="hui-tip-item">
+							<span class="hui-tip-dage blue"></span>
+							<span class="hui-tip-name">关机</span>
+						</div>
+						<div class="hui-tip-item">
+							<span class="hui-tip-dage red"></span>
+							<span class="hui-tip-name">故障</span>
+						</div>
+						<div class="hui-tip-item">
+							<span class="hui-tip-dage orange"></span>
+							<span class="hui-tip-name">警告</span>
+						</div>
+						<div class="hui-tip-item">
+							<span class="hui-tip-dage gray"></span>
+							<span class="hui-tip-name">离线</span>
+						</div>
+					</div>
+				</div>
+				<div class="end-list">
+					<div class="end-list-box">
+						<div class="end-item">
+							<div class="end-title">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+								<span class="end-space hui-ellipsis">1F</span>
+								<span class="end-title-name hui-ellipsis">
+									1F默认房间
+								</span>
+							</div>
+							<div class="end-content">
+								<div class="content-item">
+									<div class="content-label">
+										平均温度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">12</span>℃
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										平均湿度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">15</span>%
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										开启设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">5</span>台
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										故障设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">0</span>台
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="end-item">
+							<div class="end-title">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+								<span class="end-space hui-ellipsis">1F</span>
+								<span class="end-title-name hui-ellipsis">
+									1F默认房间
+								</span>
+							</div>
+							<div class="end-content">
+								<div class="content-item">
+									<div class="content-label">
+										平均温度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">12</span>℃
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										平均湿度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">15</span>%
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										开启设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">5</span>台
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										故障设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">0</span>台
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="end-item">
+							<div class="end-title">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+								<span class="end-space hui-ellipsis">1F</span>
+								<span class="end-title-name hui-ellipsis">
+									1F默认房间
+								</span>
+							</div>
+							<div class="end-content">
+								<div class="content-item">
+									<div class="content-label">
+										平均温度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">12</span>℃
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										平均湿度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">15</span>%
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										开启设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">5</span>台
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										故障设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">0</span>台
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="end-item">
+							<div class="end-title">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+								<span class="end-space  hui-ellipsis">1F</span>
+								<span class="end-title-name hui-ellipsis">
+									1F默认房间
+								</span>
+							</div>
+							<div class="end-content">
+								<div class="content-item">
+									<div class="content-label">
+										平均温度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">12</span>℃
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										平均湿度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">15</span>%
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										开启设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">5</span>台
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										故障设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">0</span>台
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="end-item">
+							<div class="end-title">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+								<span class="end-space hui-ellipsis">1F</span>
+								<span class="end-title-name hui-ellipsis">
+									1F默认房间
+								</span>
+							</div>
+							<div class="end-content">
+								<div class="content-item">
+									<div class="content-label">
+										平均温度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">12</span>℃
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										平均湿度
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">15</span>%
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										开启设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">5</span>台
+									</div>
+								</div>
+								<div class="content-item">
+									<div class="content-label">
+										故障设备
+									</div>
+									<div class="content-value">
+										<span class="content-number alibaba color-cyan">0</span>台
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import model from '@/components/work/common/model'
+	export default {
+		components: {
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.end-box {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		.hui-chart-tip {
+			position: absolute;
+			bottom: 20px;
+			left: 20px;
+		}
+
+		.end-list {
+			background: rgba(0, 4, 10, 0.3);
+			top: 25px;
+			right: 25px;
+			bottom: 25px;
+			width: 350px;
+			position: absolute;
+			padding: 20px 0px 20px 20px;
+
+			.end-list-box {
+				width: 100%;
+				height: 100%;
+				padding-right: 20px;
+				overflow-y: auto;
+			}
+
+			.end-item {
+				border: 1px solid rgba(97, 133, 214, 0.15);
+				font-size: 12px;
+				margin-bottom: 12px;
+
+				.end-title {
+					background: rgba(97, 133, 214, 0.08);
+					display: flex;
+					align-items: center;
+					padding: 0 10px;
+					height: 36px;
+				}
+
+				.end-space {
+					width: 40px;
+				}
+
+				.huifont-shuzhuangcaidanxiala {
+					font-size: 7px;
+					margin-right: 5px;
+				}
+
+				.end-title-name {
+					flex: 1;
+					width: 0;
+
+				}
+
+				.end-content {
+					height: 74px;
+					background: rgba(24, 31, 45, 0.3);
+					display: flex;
+					align-items: center;
+
+					.content-item {
+						width: 25%;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+					}
+
+					.content-value {
+						margin-top: 4px;
+						line-height: 20px;
+					}
+
+					.content-number {
+						font-size: 14px;
+						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+					}
+				}
+			}
+
+			.end-item:last-child {
+				margin-bottom: 0;
+			}
+
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/water/hvac/heatsource.vue

@@ -0,0 +1,415 @@
+<template>
+	<div class="work-heatsource">
+		<model type="heatsource" fileId="10000786667774"></model>
+		<div class="heatsource-count">
+			<div class="count-item">
+				<div class="count-item-label hui-ellipsis">1#主管能量计</div>
+				<div class="count-item-value">
+					<span>流量</span>
+					<span class="count-number alibaba color-cyan">12</span>
+					<span>kw</span>
+				</div>
+			</div>
+			<div class="count-item">
+				<div class="count-item-label hui-ellipsis">2#主管能量计</div>
+				<div class="count-item-value">
+					<span>流量</span>
+					<span class="count-number alibaba color-cyan">32</span>
+					<span>kw</span>
+				</div>
+			</div>
+			<div class="count-item">
+				<div class="count-item-label hui-ellipsis">3#主管能量计</div>
+				<div class="count-item-value">
+					<span>流量</span>
+					<span class="count-number alibaba color-cyan">55.4</span>
+					<span>kw</span>
+				</div>
+			</div>
+			<div class="count-item">
+				<div class="count-item-label hui-ellipsis">4#主管能量计</div>
+				<div class="count-item-value">
+					<span>流量</span>
+					<span class="count-number alibaba color-cyan">1.23</span>
+					<span>kw</span>
+				</div>
+			</div>
+		</div>
+		<div class="heatsource-list">
+			<div class="heatsource-list-box">
+				<div class="heatsource-item">
+					<div class="heatsource-title">
+						<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+						<span class="heatsource-title-name hui-ellipsis">
+							蒸汽锅炉-卧式_64294:蒸汽锅炉-卧蒸汽锅炉-卧式_64294:蒸汽锅炉-卧
+						</span>
+					</div>
+					<div class="heatsource-content">
+						<div class="content-item">
+							<div class="content-label">
+								运行状态
+							</div>
+							<div class="content-value">
+								<el-switch v-model="value1">
+								</el-switch>
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								控制温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">12</span>℃
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								供水温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">18.2</span>℃
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								回水温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">15.2</span>℃
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="heatsource-item">
+					<div class="heatsource-title">
+						<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+						<span class="heatsource-title-name hui-ellipsis">
+							蒸汽锅炉-卧式_64294:蒸汽锅炉-卧蒸汽锅炉-卧式_64294:蒸汽锅炉-卧
+						</span>
+					</div>
+					<div class="heatsource-content">
+						<div class="content-item">
+							<div class="content-label">
+								运行状态
+							</div>
+							<div class="content-value">
+								<el-switch v-model="value2">
+								</el-switch>
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								控制温度
+							</div>
+							<div class="content-value">
+								-
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								供水温度
+							</div>
+							<div class="content-value">
+								-
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								回水温度
+							</div>
+							<div class="content-value">
+								-
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="heatsource-item">
+					<div class="heatsource-title">
+						<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+						<span class="heatsource-title-name hui-ellipsis">
+							蒸汽锅炉-卧式_64294:蒸汽锅炉-卧蒸汽锅炉-卧式_64294:蒸汽锅炉-卧
+						</span>
+					</div>
+					<div class="heatsource-content">
+						<div class="content-item">
+							<div class="content-label">
+								运行状态
+							</div>
+							<div class="content-value">
+								<el-switch v-model="value1">
+								</el-switch>
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								控制温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">12</span>℃
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								供水温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">18.2</span>℃
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								回水温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">15.2</span>℃
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="heatsource-item">
+					<div class="heatsource-title">
+						<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+						<span class="heatsource-title-name hui-ellipsis">
+							蒸汽锅炉-卧式_64294:蒸汽锅炉-卧蒸汽锅炉-卧式_64294:蒸汽锅炉-卧
+						</span>
+					</div>
+					<div class="heatsource-content">
+						<div class="content-item">
+							<div class="content-label">
+								运行状态
+							</div>
+							<div class="content-value">
+								<el-switch v-model="value2">
+								</el-switch>
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								控制温度
+							</div>
+							<div class="content-value">
+								-
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								供水温度
+							</div>
+							<div class="content-value">
+								-
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								回水温度
+							</div>
+							<div class="content-value">
+								-
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="heatsource-item">
+					<div class="heatsource-title">
+						<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+						<span class="heatsource-title-name hui-ellipsis">
+							蒸汽锅炉-卧式_64294:蒸汽锅炉-卧蒸汽锅炉-卧式_64294:蒸汽锅炉-卧
+						</span>
+					</div>
+					<div class="heatsource-content">
+						<div class="content-item">
+							<div class="content-label">
+								运行状态
+							</div>
+							<div class="content-value">
+								<el-switch v-model="value1">
+								</el-switch>
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								控制温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">12</span>℃
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								供水温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">18.2</span>℃
+							</div>
+						</div>
+						<div class="content-item">
+							<div class="content-label">
+								回水温度
+							</div>
+							<div class="content-value">
+								<span class="content-number alibaba color-cyan">15.2</span>℃
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {
+				value1: true,
+				value2: false,
+			}
+		},
+		components: {
+			model
+		},
+	}
+</script>
+
+<style lang="scss">
+	.work-heatsource {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		.heatsource-count {
+			position: absolute;
+			top: 40px;
+			left: 40px;
+			max-height: 208px;
+			overflow-y: auto;
+			padding-right: 5px;
+
+			.count-item {
+				padding: 0 15px;
+				height: 44px;
+				width: 220px;
+				display: flex;
+				align-items: center;
+				border-left: 3px solid rgba(121, 138, 180, 0.4);
+				background: linear-gradient(90deg, rgba(0, 10, 23, 0.6) 0%, rgba(0, 4, 10, 0.3) 100%);
+				font-size: 12px;
+				margin-bottom: 8px;
+			}
+
+			.count-item-label {
+				width: 85px;
+				overflow: hidden;
+				margin-right: 15px;
+			}
+
+			.count-item-value {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+				display: flex;
+				align-items: center;
+			}
+
+			.count-number {
+				font-size: 16px;
+				margin: 0 4px;
+			}
+		}
+
+		.heatsource-list {
+			background: rgba(0, 4, 10, 0.3);
+			top: 25px;
+			right: 25px;
+			bottom: 25px;
+			width: 350px;
+			position: absolute;
+			padding: 20px 0px 20px 20px;
+
+			.heatsource-list-box {
+				width: 100%;
+				height: 100%;
+				padding-right: 20px;
+				overflow-y: auto;
+			}
+
+			.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;
+			}
+
+			.heatsource-item {
+				border: 1px solid rgba(97, 133, 214, 0.15);
+				font-size: 12px;
+				margin-bottom: 12px;
+
+				.heatsource-title {
+					background: rgba(97, 133, 214, 0.08);
+					display: flex;
+					align-items: center;
+					padding: 0 10px;
+					height: 36px;
+				}
+
+				.huifont-shuzhuangcaidanxiala {
+					font-size: 8px;
+					margin-right: 5px;
+				}
+
+				.heatsource-title-name {
+					flex: 1;
+					width: 0;
+
+				}
+
+				.heatsource-content {
+					height: 74px;
+					background: rgba(24, 31, 45, 0.3);
+					display: flex;
+					align-items: center;
+
+					.content-item {
+						width: 25%;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+					}
+
+					.content-value {
+						margin-top: 4px;
+						line-height: 20px;
+					}
+
+					.content-number {
+						font-size: 14px;
+						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+					}
+				}
+			}
+
+			.heatsource-item:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/water/supply/drainage.vue

@@ -0,0 +1,416 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="drainage box-background">
+				<div class="drainage-box">
+					<div class="drainage-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="drainage" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="drainage-right">
+						<div class="drainage-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="drainage-list">
+							<div class="hui-chart-title">
+								排水机组
+							</div>
+							<div class="cold-water-box">
+								<div class="cold-water-image">
+									<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/9cd9340b47d8419e9da73321edad0f42"
+										alt="" />
+								</div>
+								<div class="cold-water-list">
+									<div class="cold-water-item">
+										<span class="cold-water-count">1#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.02</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">2#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.03</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">3#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.05</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value2">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">4#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.01</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value2">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">5#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.06</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value2">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">5#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.08</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">6#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.01</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">7#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.02</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">8#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.01</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">9#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.03</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+									<div class="cold-water-item">
+										<span class="cold-water-count">10#</span>
+										<span class="cold-water-content">
+											排水泵
+											<span class="color-cyan">0.06</span>
+										</span>
+										<span class="cold-water-operation">
+											<el-switch v-model="value1">
+											</el-switch>
+										</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {
+				value1: true,
+				value2: false
+			}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.drainage {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.drainage-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.drainage-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.bim-box {
+			flex: 1;
+			height: 0;
+			background: rgba(0, 4, 10, 0.3);
+			margin-top: 12px;
+		}
+
+		.drainage-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.drainage-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.drainage-list {
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+			overflow-y: hidden;
+			margin-top: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.hui-chart-title {
+				margin: 20px 20px 0 20px;
+			}
+		}
+
+		.cold-water-box {
+			display: flex;
+			align-items: center;
+			padding: 20px 0;
+			flex: 1;
+			height: 0;
+		}
+
+		.cold-water-image {
+			padding-left: 10px;
+			width: 100px;
+			text-align: center;
+		}
+
+		.cold-water-list {
+			padding: 0 20px 0 10px;
+			flex: 1;
+			width: 0;
+			height: 100%;
+			overflow-y: auto;
+		}
+
+		.cold-water-item {
+			height: 32px;
+			display: flex;
+			align-items: center;
+			background: linear-gradient(180deg, rgba(19, 27, 40, 0) 0%, rgba(71, 119, 227, 0.2) 100%);
+			border: 1px solid rgba(71, 119, 227, 0.3);
+			padding: 0 10px;
+			margin-bottom: 4px;
+
+			.cold-water-content {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+				margin-left: 10px;
+
+				span {
+					margin-left: 4px;
+				}
+			}
+		}
+
+		.cold-water-item:last-child {
+			margin-bottom: 0;
+		}
+
+		.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>

virgo.wzfrontend/console/src/views/work/energy/water/supply/firefighting.vue

@@ -0,0 +1,222 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="firefighting box-background">
+				<div class="firefighting-box">
+					<div class="firefighting-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="firefighting" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="firefighting-right">
+						<div class="water-tank">
+							<div class="hui-chart-title">
+								消防水箱
+							</div>
+							<div class="tank-label color-font">
+								<div class="tank-icon">
+									<i class="iconfont huifont-shuiwei"></i>
+								</div>
+								<span class="label">实时液位高度</span>
+								<span class="number alibaba">82</span>
+								<span class="unit">cm</span>
+							</div>
+						</div>
+						<div class="water-chart">
+							<div class="hui-chart-title">
+								消防用水趋势
+							</div>
+							<div ref="chart1" class="water-chart-box"></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 {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, {
+					data1: [1, 3, 2, 6, 1],
+					data2: [0, 4, 3, 4, 0]
+				});
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '0',
+						top: '20',
+						right: '10',
+						bottom: '0',
+						containLabel: true
+					},
+					color: ['#2DB85C', '#AFB9CC'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data.data1,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						smooth: true,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(45,184,92,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(45,184,92,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data.data2,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						smooth: true,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.firefighting {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.firefighting-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.firefighting-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.firefighting-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			overflow-y: auto;
+		}
+
+		.water-chart {
+			background: rgba(0, 4, 10, 0.3);
+			height: 282px;
+			padding: 20px;
+			margin-top: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.water-chart-box {
+				flex: 1;
+				height: 0;
+
+			}
+		}
+
+		.water-tank {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 22px 20px 20px 20px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/water/supply/life.vue

@@ -0,0 +1,301 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="life box-background">
+				<div class="life-box">
+					<div class="life-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="life" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="life-right">
+						<div class="water-tank">
+							<div class="hui-chart-title">
+								生活给水水箱
+							</div>
+							<div class="tank-label color-font">
+								<div class="tank-icon">
+									<i class="iconfont huifont-shuiwei"></i>
+								</div>
+								<span class="label">实时液位</span>
+								<span class="number alibaba">82</span>
+								<span class="unit">cm</span>
+							</div>
+						</div>
+						<div class="water-instrument">
+							<div class="hui-chart-title">
+								水质检测仪
+							</div>
+							<div class="instrument-box">
+								<div class="instrument-item">
+									<div class="color-cyan">0.5</div>
+									<div class="label">浊度(NTU)</div>
+								</div>
+								<div class="instrument-item">
+									<div class="color-cyan">0.3</div>
+									<div class="label">余氣(mg/L)</div>
+								</div>
+								<div class="instrument-item">
+									<div class="color-cyan">6.5</div>
+									<div class="label">PH(单位)</div>
+								</div>
+								<div class="instrument-item">
+									<div class="color-cyan">236</div>
+									<div class="label">TDS(mg/L)</div>
+								</div>
+							</div>
+						</div>
+						<div class="water-chart">
+							<div class="hui-chart-title">
+								生活水泵用水趋势
+								<div class="select">
+									<el-select size="mini" v-model="value" placeholder="请选择">
+										<el-option label="浓度" :value="1">
+										</el-option>
+										<el-option label="浊度" :value="2">
+										</el-option>
+									</el-select>
+								</div>
+							</div>
+							<div ref="chart1" class="water-chart-box"></div>
+						</div>
+						<div class="water-chart">
+							<div class="hui-chart-title">
+								生活水泵用能趋势
+								<div class="select">
+									<el-select size="mini" v-model="value" placeholder="请选择">
+										<el-option label="浓度" :value="1">
+										</el-option>
+										<el-option label="浊度" :value="2">
+										</el-option>
+									</el-select>
+								</div>
+							</div>
+							<div ref="chart2" class="water-chart-box"></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 {
+				value: ''
+			}
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, {
+					data1: [1, 3, 2, 6, 1],
+					data2: [0, 4, 3, 4, 0]
+				});
+				this.chart(this.$refs.chart2, {
+					data1: [1, 3, 2, 6, 1],
+					data2: [0, 4, 3, 4, 0]
+				});
+			})
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '0',
+						top: '20',
+						right: '10',
+						bottom: '0',
+						containLabel: true
+					},
+					color: ['#2DB85C', '#AFB9CC'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data.data1,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						smooth: true,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(45,184,92,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(45,184,92,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data.data2,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						smooth: true,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.life {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.life-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.life-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.life-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			overflow-y: auto;
+		}
+
+		.water-chart {
+			background: rgba(0, 4, 10, 0.3);
+			height: 282px;
+			padding: 20px;
+			margin-top: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.water-chart-box {
+				flex: 1;
+				height: 0;
+
+			}
+		}
+
+		.water-instrument {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 22px 20px 20px 20px;
+			margin-top: 12px;
+
+			.instrument-box {
+				font-size: 12px;
+				display: flex;
+				margin-top: 20px;
+				margin-bottom: 2px;
+			}
+
+			.instrument-item {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+
+				.color-cyan {
+					line-height: 17px;
+				}
+
+				.label {
+					margin-top: 3px;
+					line-height: 20px;
+				}
+			}
+		}
+
+		.water-tank {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 22px 20px 20px 20px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/energy/water/supply/lowcarbon.vue

@@ -0,0 +1,459 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="lowcarbon box-background">
+				<div class="lowcarbon-box">
+					<div class="lowcarbon-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="firefighting" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="lowcarbon-right">
+						<div class="water-tank">
+							<div class="hui-chart-title">
+								雨水清水池液位高度
+							</div>
+							<div class="tank-label color-font">
+								<div class="tank-icon">
+									<i class="iconfont huifont-shuiwei"></i>
+								</div>
+								<span class="label">实时液位高度</span>
+								<span class="number alibaba">82</span>
+								<span class="unit">cm</span>
+							</div>
+						</div>
+						<div class="water-chart">
+							<div class="hui-chart-title">
+								生活水泵用水趋势
+							</div>
+							<div ref="chart1" class="water-chart-box"></div>
+						</div>
+						<div class="water-instrument">
+							<div class="hui-chart-title">
+								水质检测仪
+							</div>
+							<div class="instrument-box">
+								<div class="instrument-item">
+									<div class="color-cyan">0.5</div>
+									<div class="label">浊度(NTU)</div>
+								</div>
+								<div class="instrument-item">
+									<div class="color-cyan">0.3</div>
+									<div class="label">余氣(mg/L)</div>
+								</div>
+								<div class="instrument-item">
+									<div class="color-cyan">6.5</div>
+									<div class="label">PH(单位)</div>
+								</div>
+								<div class="instrument-item">
+									<div class="color-cyan">236</div>
+									<div class="label">TDS(mg/L)</div>
+								</div>
+							</div>
+							<div class="water-instrument-title">
+								<div class="label">
+									当日趋势
+								</div>
+								<div class="select">
+									<el-select size="mini" v-model="value" placeholder="请选择">
+										<el-option label="浓度" :value="1">
+										</el-option>
+										<el-option label="浊度" :value="2">
+										</el-option>
+									</el-select>
+								</div>
+							</div>
+							<div class="water-instrument-chart">
+								<div ref="chart2" class="chart"></div>
+							</div>
+							<div class="water-instrument-title">
+								<div class="label">
+									报警信息
+								</div>
+							</div>
+							<div class="lowcarbon-list">
+								<div class="lowcarbon-item">
+									<div class="label">报警信息原因</div>
+									<div class="date">2024-01-01 12:00:01</div>
+								</div>
+								<div class="lowcarbon-item">
+									<div class="label">报警信息原因</div>
+									<div class="date">2024-01-01 12:00:01</div>
+								</div>
+							</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 {
+				value: ''
+			}
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, {
+					data1: [1, 3, 2, 6, 1],
+					data2: [0, 4, 3, 4, 0]
+				});
+				this.chart1(this.$refs.chart2, [1, 3, 2, 6, 1]);
+			})
+		},
+		methods: {
+			chart1(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '5',
+						top: '40',
+						right: '10',
+						bottom: '0',
+						containLabel: true
+					},
+					color: ['#AFB9CC'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '单位',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(175,185,204,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(175,185,204,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '5',
+						top: '40',
+						right: '10',
+						bottom: '0',
+						containLabel: true
+					},
+					color: ['#3371FF', '#06E0E9'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '单位',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data.data1,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(51,113,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(51,113,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data.data2,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(6,224,233,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(6,224,233,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.lowcarbon {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.lowcarbon-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.lowcarbon-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.lowcarbon-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			overflow-y: auto;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.water-chart {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+			margin-top: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.water-chart-box {
+				height: 161px;
+			}
+		}
+
+		.water-instrument {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 22px 20px 11px 20px;
+			margin-top: 12px;
+			flex: 1;
+			height: 0;
+			min-height: 477px;
+			display: flex;
+			flex-direction: column;
+
+			.instrument-box {
+				font-size: 12px;
+				display: flex;
+				margin-top: 20px;
+				margin-bottom: 2px;
+				border-bottom: 1px solid $--color-border;
+				padding-bottom: 20px;
+			}
+
+			.instrument-item {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+
+				.color-cyan {
+					line-height: 17px;
+				}
+
+				.label {
+					margin-top: 3px;
+					line-height: 20px;
+				}
+			}
+		}
+
+		.water-instrument-chart {
+			width: 100%;
+			padding-bottom: 20px;
+			border-bottom: 1px solid $--color-border;
+
+			.chart {
+				height: 144px;
+			}
+		}
+
+		.water-instrument-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 20px;
+			font-size: 12px;
+
+			.label {
+				font-weight: 600;
+			}
+
+			.select {
+				width: 94px;
+			}
+		}
+
+		.lowcarbon-list {
+			flex: 1;
+			height: 0;
+			overflow-y: auto;
+			font-size: 12px;
+			margin-top: 10px;
+
+			.lowcarbon-item {
+				height: 36px;
+				background: rgba(97, 133, 214, 0.05);
+				display: flex;
+				align-items: center;
+				padding: 0 12px;
+				margin-bottom: 4px;
+
+				.label {
+					flex: 1;
+					width: 0;
+				}
+			}
+
+			.lowcarbon-item:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.water-tank {
+			background: rgba(0, 4, 10, 0.3);
+			padding: 22px 20px 20px 20px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/dangerous/chemistry.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="chemistry box-background">
+				<div class="chemistry-box">
+					<div class="chemistry-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="chemistry" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="chemistry-right">
+						<div class="chemistry-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="chemistry-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.chemistry {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.chemistry-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.chemistry-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.chemistry-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.chemistry-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.chemistry-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/dangerous/flammability.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="flammability box-background">
+				<div class="flammability-box">
+					<div class="flammability-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="flammability" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="flammability-right">
+						<div class="flammability-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="flammability-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.flammability {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.flammability-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.flammability-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.flammability-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.flammability-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.flammability-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/dangerous/pollute.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="pollute box-background">
+				<div class="pollute-box">
+					<div class="pollute-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="pollute" fileId="10000815010702"></model>
+						</div>
+					</div>
+					<div class="pollute-right">
+						<div class="pollute-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="pollute-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.pollute {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.pollute-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.pollute-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.pollute-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.pollute-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.pollute-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,677 @@
+<template>
+	<div class="device-monitor color-font">
+		<div class="device-monitor-box">
+			<div class="monitor-top">
+				<div class="monitor-number">
+					<div class="number-all">
+						<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="number-list">
+						<div class="hui-chart-title">
+							设备状态
+						</div>
+						<div class="number-item" style="margin-top: 16px;">
+							<div class="number-icon green">
+								<i class="iconfont huifont-kaiqi"></i>
+							</div>
+							<div class="number-label">开启</div>
+							<div class="alibaba color-green">82</div>
+						</div>
+						<div class="number-item">
+							<div class="number-icon red">
+								<i class="iconfont huifont-jinggao"></i>
+							</div>
+							<div class="number-label">故障</div>
+							<div class="alibaba color-red">6</div>
+						</div>
+						<div class="number-item">
+							<div class="number-icon gray">
+								<i class="iconfont huifont-guanbi1"></i>
+							</div>
+							<div class="number-label">关闭</div>
+							<div class="alibaba">12</div>
+						</div>
+					</div>
+				</div>
+				<div class="device-list hui-flex hui-content">
+					<div class="hui-content-title">
+						<div class="hui-title-item active">电气系统</div>
+						<div class="hui-title-item">暖通系统</div>
+						<div class="hui-title-item">给排水系统</div>
+						<div class="hui-title-item">安防系统</div>
+						<div class="hui-title-item">电梯系统</div>
+						<div class="hui-title-item">环境系统</div>
+					</div>
+					<div class="hui-flex-box">
+						<div class="device-type-list">
+							<div class="device-type-item">
+								<div class="device-type-title">
+									<span class="label">设备类型1</span>
+									<span class="alibaba color-cyan number">203</span>
+								</div>
+								<div class="device-type-content">
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="device-type-item">
+								<div class="device-type-title">
+									<span class="label">设备类型1</span>
+									<span class="alibaba color-cyan number">203</span>
+								</div>
+								<div class="device-type-content">
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="device-type-item">
+								<div class="device-type-title">
+									<span class="label">设备类型1</span>
+									<span class="alibaba color-cyan number">203</span>
+								</div>
+								<div class="device-type-content">
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+									<div class="device-types-item">
+										<div class="device-types-label">设备子类型1</div>
+										<div class="device-types-content">
+											<div class="device-types-number">
+												<span>开启</span>
+												<span class="alibaba color-green">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>故障</span>
+												<span class="alibaba color-red">102</span>
+											</div>
+											<div class="device-types-number">
+												<span>关闭</span>
+												<span class="alibaba">102</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="monitor-bottom">
+				<div class="params-title">
+					<div class="hui-chart-title">
+						设备监测
+						<div class="select-box combination-select">
+							<el-select size="mini" v-model="value" placeholder="空间位置">
+								<el-option label="1F" :value="1">
+								</el-option>
+								<el-option label="2F" :value="2">
+								</el-option>
+							</el-select>
+							<el-select size="mini" v-model="value" placeholder="设备类型">
+								<el-option label="冷源" :value="1">
+								</el-option>
+								<el-option label="2F" :value="2">
+								</el-option>
+							</el-select>
+							<el-select size="mini" v-model="value" placeholder="设备">
+								<el-option label="1F" :value="1">
+								</el-option>
+								<el-option label="2F" :value="2">
+								</el-option>
+							</el-select>
+							<el-date-picker size="mini" v-model="value1" type="daterange" range-separator="-"
+								start-placeholder="开始日期" end-placeholder="结束日期">
+							</el-date-picker>
+							<el-button size="mini" type="primary">查询</el-button>
+							<div class="hui-tag">下载</div>
+							<div class="hui-tag" @click="$router.push('/iot/device/detail')">设备详情</div>
+						</div>
+					</div>
+					<div class="params-item">
+						<div class="params-date">记录时间</div>
+						<div class="params-td">控制温度</div>
+						<div class="params-td">供水温度(°C)</div>
+						<div class="params-td">回水温度(°C)</div>
+						<div class="params-td">非烟温度</div>
+						<div class="params-td">介质压力</div>
+						<div class="params-td">介质温度</div>
+						<div class="params-td">瞬时流量</div>
+						<div class="params-td">机组负荷</div>
+						<div class="params-td">故障</div>
+						<div class="params-td">设定温度(°C)</div>
+						<div class="params-td">设启停状态</div>
+					</div>
+				</div>
+				<div class="params-box">
+					<div class="params-item params-tr">
+						<div class="params-date">2024-01-12 12:14:10</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td color-green">开启</div>
+					</div>
+					<div class="params-item params-tr">
+						<div class="params-date">2024-01-12 12:14:10</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td color-green">开启</div>
+					</div>
+					<div class="params-item params-tr">
+						<div class="params-date">2024-01-12 12:14:10</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td color-green">开启</div>
+					</div>
+					<div class="params-item params-tr">
+						<div class="params-date">2024-01-12 12:14:10</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td color-green">开启</div>
+					</div>
+					<div class="params-item params-tr">
+						<div class="params-date">2024-01-12 12:14:10</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td color-green">开启</div>
+					</div>
+					<div class="params-item params-tr">
+						<div class="params-date">2024-01-12 12:14:10</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td">23.6</div>
+						<div class="params-td color-green">开启</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+				value1: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.device-monitor {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.device-monitor-box {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			height: 100%;
+			min-width: 1256px;
+			min-height: 700px;
+		}
+
+		.select-box {
+			display: flex;
+
+			.hui-tag {
+				cursor: pointer;
+			}
+
+			.el-select {
+				width: 200px;
+				margin-right: 8px;
+			}
+
+			.el-range-editor--mini {
+				width: 220px;
+			}
+
+			.hui-tag {
+				margin-left: 8px;
+			}
+
+			.el-button {
+				margin-left: 8px;
+			}
+		}
+
+		.monitor-bottom {
+			flex: 1;
+			height: 0;
+			background: #141A24;
+			margin-top: 12px;
+			padding: 20px 0;
+			display: flex;
+			flex-direction: column;
+
+			.params-title {
+				padding: 0px 20px 0px 20px;
+			}
+
+			.params-box {
+				flex: 1;
+				height: 0;
+				padding: 0 20px;
+				overflow-y: auto;
+			}
+
+			.params-item {
+				height: 36px;
+				display: flex;
+				align-items: center;
+				padding: 0 20px;
+				font-size: 12px;
+			}
+
+			.params-tr {
+				background: rgba(97, 133, 214, 0.05);
+				margin-bottom: 4px;
+			}
+
+			.params-tr:last-child {
+				margin-bottom: 0px;
+			}
+
+			.params-td {
+				flex: 1;
+			}
+
+			.params-date {
+				width: 140px;
+			}
+		}
+
+		.device-type-item {
+			font-size: 12px;
+			background: #181F2D;
+			border: 1px solid rgba(97, 133, 214, 0.15);
+			margin-bottom: 12px;
+
+			.device-type-title {
+				height: 36px;
+				background: rgba(97, 133, 214, 0.08);
+				padding-left: 16px;
+				display: flex;
+				align-items: center;
+
+				.label {
+					margin-right: 20px;
+				}
+
+				.number {
+					font-size: 16px;
+				}
+			}
+
+			.device-type-content {
+				padding: 3px 5px 13px 15px;
+				display: flex;
+				flex-wrap: wrap;
+			}
+
+			.device-types-item {
+				padding: 11px;
+				border: 1px solid rgba(97, 133, 214, 0.15);
+				margin-right: 10px;
+				margin-top: 10px;
+			}
+
+			.device-types-label {
+				font-weight: 600;
+			}
+
+			.device-types-content {
+				display: flex;
+				margin-top: 6px;
+
+
+				.device-types-number {
+					margin-right: 25px;
+				}
+
+				.alibaba {
+					font-size: 14px;
+					margin-left: 7px;
+				}
+			}
+		}
+
+		.monitor-top {
+			display: flex;
+			height: 445px;
+
+			.device-list {
+				flex: 1;
+				width: 0;
+				background: #141A24;
+
+				.hui-flex-box {
+					padding: 20px 0;
+				}
+
+				.device-type-list {
+					height: 100%;
+					padding: 0 20px;
+					overflow-y: auto;
+				}
+			}
+
+			.hui-content-title {
+				color: #617491;
+			}
+
+			.hui-title-item.active,
+			.hui-title-item:hover {
+				font-weight: 600;
+			}
+		}
+
+		.monitor-number {
+			width: 350px;
+			margin-right: 12px;
+		}
+
+		.number-list {
+			padding: 20px;
+			background: #141A24;
+			margin-top: 12px;
+
+			.number-item {
+				height: 68px;
+				background: #181F2D;
+				display: flex;
+				align-items: center;
+				padding: 0 24px 0 20px;
+				margin-top: 12px;
+
+				.alibaba {
+					font-size: 20px;
+				}
+			}
+
+			.number-label {
+				flex: 1;
+			}
+
+			.number-icon {
+				width: 36px;
+				height: 36px;
+				text-align: center;
+				line-height: 36px;
+				border-radius: 12px;
+				margin-right: 10px;
+
+				.iconfont {
+					font-size: 25px;
+				}
+			}
+
+			.green {
+				background: $--color-green;
+			}
+
+			.red {
+				background: $--color-red;
+			}
+
+			.gray {
+				background: $--color-common;
+			}
+		}
+
+		.number-all {
+
+			height: 120px;
+			background: #141A24;
+			display: flex;
+			align-items: center;
+			padding-left: 32px;
+
+			.test-label {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+			}
+
+			.test-value {
+				font-size: 24px;
+				margin-top: 5px;
+			}
+
+			.test-icon {
+				width: 56px;
+				height: 56px;
+				background: #3371FF;
+				border-radius: 20px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-right: 16px;
+
+				i {
+					font-size: 32px;
+					color: #e6e6e6;
+				}
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/environment/air.vue

@@ -0,0 +1,235 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content" style="padding: 0;">
+			<div class="hui-flex hui-content box-background">
+				<div class="hui-content-title">
+					<div class="hui-title-item active">空气检测</div>
+				</div>
+				<div class="hui-flex-box smell-list">
+					<div class="smell-item">
+						<div class="smell-item-title">
+							<i class="iconfont huifont-shouye"></i>
+							<span>区域1</span>
+						</div>
+						<div class="smell-item-box">
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">-12</div>
+									<div class="smell-item-name">温度(°C)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">0.5</div>
+									<div class="smell-item-name">Tvoc(ppm)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">55.3</div>
+									<div class="smell-item-name">湿度(%)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value color-green">32</div>
+									<div class="smell-item-name">PM2.5(ug/m3)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">589</div>
+									<div class="smell-item-name">CO2(ppm)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">69</div>
+									<div class="smell-item-name">PM10(ug/m3)</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="smell-item">
+						<div class="smell-item-title">
+							<i class="iconfont huifont-shouye"></i>
+							<span>区域2</span>
+						</div>
+						<div class="smell-item-box">
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">-12</div>
+									<div class="smell-item-name">温度(°C)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">0.5</div>
+									<div class="smell-item-name">Tvoc(ppm)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">55.3</div>
+									<div class="smell-item-name">湿度(%)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value color-green">32</div>
+									<div class="smell-item-name">PM2.5(ug/m3)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">589</div>
+									<div class="smell-item-name">CO2(ppm)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">69</div>
+									<div class="smell-item-name">PM10(ug/m3)</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="smell-item">
+						<div class="smell-item-title">
+							<i class="iconfont huifont-shouye"></i>
+							<span>区域3</span>
+						</div>
+						<div class="smell-item-box">
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">-12</div>
+									<div class="smell-item-name">温度(°C)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">0.5</div>
+									<div class="smell-item-name">Tvoc(ppm)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">55.3</div>
+									<div class="smell-item-name">湿度(%)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value color-green">32</div>
+									<div class="smell-item-name">PM2.5(ug/m3)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">589</div>
+									<div class="smell-item-name">CO2(ppm)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">69</div>
+									<div class="smell-item-name">PM10(ug/m3)</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="smell-item">
+						<div class="smell-item-title">
+							<i class="iconfont huifont-shouye"></i>
+							<span>区域4</span>
+						</div>
+						<div class="smell-item-box">
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">-12</div>
+									<div class="smell-item-name">温度(°C)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">0.5</div>
+									<div class="smell-item-name">Tvoc(ppm)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">55.3</div>
+									<div class="smell-item-name">湿度(%)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value color-green">32</div>
+									<div class="smell-item-name">PM2.5(ug/m3)</div>
+								</div>
+							</div>
+							<div class="smell-item-row">
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">589</div>
+									<div class="smell-item-name">CO2(ppm)</div>
+								</div>
+								<div class="smell-item-label">
+									<div class="smell-item-value alibaba color-green">69</div>
+									<div class="smell-item-name">PM10(ug/m3)</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	export default {
+		components: {
+			selectSpace
+		}
+	}
+</script>
+
+<style lang="scss">
+	.smell-list {
+		padding: 15px 0 0 15px;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+
+		.smell-item {
+			width: 276px;
+			height: 160px;
+			background: #232A37;
+			border-radius: 2px;
+			overflow: hidden;
+			margin-right: 15px;
+			margin-bottom: 15px;
+
+			.smell-item-title {
+				width: 276px;
+				height: 40px;
+				background: #2B3446;
+				display: flex;
+				align-items: center;
+				padding: 0 13px;
+				border-bottom: 1px solid $--color-border;
+
+				.huifont-shouye {
+					font-size: 22px;
+					opacity: 0.7;
+					margin-right: 4px;
+				}
+			}
+
+			.smell-item-box {
+				display: flex;
+				flex-wrap: wrap;
+				padding-left: 14px;
+				padding-top: 10px;
+			}
+
+			.smell-item-row {
+				padding-right: 14px;
+			}
+
+			.smell-item-label {
+				overflow: hidden;
+				height: 40px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				margin-bottom: 14px;
+
+				.smell-item-name {
+					font-size: 12px;
+				}
+
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/environment/monitor.vue

@@ -0,0 +1,535 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="monitor box-background">
+				<div class="monitor-box">
+					<div class="monitor-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="enviroment-monitor" fileId="10000786668573"></model>
+						</div>
+					</div>
+					<div class="monitor-right">
+						<div class="hui-chart-title">
+							环境设备列表
+						</div>
+						<div class="environment-list">
+							<div class="smell-item">
+								<div class="smell-item-title color-font">
+									<span>财务室</span>
+								</div>
+								<div class="smell-item-box">
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">-12</div>
+											<div class="smell-item-name">温度(°C)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">0.5</div>
+											<div class="smell-item-name">Tvoc(ppm)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">55.3</div>
+											<div class="smell-item-name">湿度(%)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">32</div>
+											<div class="smell-item-name">PM2.5(ug/m3)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">589</div>
+											<div class="smell-item-name">CO2(ppm)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">69</div>
+											<div class="smell-item-name">PM10(ug/m3)</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="smell-item">
+								<div class="smell-item-title color-font">
+									<span>财务室</span>
+								</div>
+								<div class="smell-item-box">
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">-12</div>
+											<div class="smell-item-name">温度(°C)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">0.5</div>
+											<div class="smell-item-name">Tvoc(ppm)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">55.3</div>
+											<div class="smell-item-name">湿度(%)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">32</div>
+											<div class="smell-item-name">PM2.5(ug/m3)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">589</div>
+											<div class="smell-item-name">CO2(ppm)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">69</div>
+											<div class="smell-item-name">PM10(ug/m3)</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="smell-item">
+								<div class="smell-item-title color-font">
+									<span>财务室</span>
+								</div>
+								<div class="smell-item-box">
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">-12</div>
+											<div class="smell-item-name">温度(°C)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">0.5</div>
+											<div class="smell-item-name">Tvoc(ppm)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">55.3</div>
+											<div class="smell-item-name">湿度(%)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">32</div>
+											<div class="smell-item-name">PM2.5(ug/m3)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">589</div>
+											<div class="smell-item-name">CO2(ppm)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">69</div>
+											<div class="smell-item-name">PM10(ug/m3)</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="smell-item">
+								<div class="smell-item-title color-font">
+									<span>财务室</span>
+								</div>
+								<div class="smell-item-box">
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">-12</div>
+											<div class="smell-item-name">温度(°C)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">0.5</div>
+											<div class="smell-item-name">Tvoc(ppm)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">55.3</div>
+											<div class="smell-item-name">湿度(%)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">32</div>
+											<div class="smell-item-name">PM2.5(ug/m3)</div>
+										</div>
+									</div>
+									<div class="smell-item-row">
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">589</div>
+											<div class="smell-item-name">CO2(ppm)</div>
+										</div>
+										<div class="smell-item-label">
+											<div class="smell-item-value alibaba color-green">69</div>
+											<div class="smell-item-name">PM10(ug/m3)</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="pass-rate">
+					<div class="hui-chart-title">
+						合格率统计
+					</div>
+					<div class="pass-rate-box">
+						<div class="pass-rate-item">
+							<progress-bar title="温度合格率" :percent="70"></progress-bar>
+						</div>
+						<div class="pass-rate-item">
+							<progress-bar title="湿度合格率" :percent="49"></progress-bar>
+						</div>
+						<div class="pass-rate-item">
+							<progress-bar title="CO2合格率" :percent="81.12"></progress-bar>
+						</div>
+						<div class="pass-rate-item">
+							<progress-bar title="甲醛合格率" :percent="12.6"></progress-bar>
+						</div>
+						<div class="pass-rate-item">
+							<progress-bar title="TVOC合格率" :percent="32"></progress-bar>
+						</div>
+						<div class="pass-rate-item">
+							<progress-bar title="PM2.5合格率" :percent="81.12"></progress-bar>
+						</div>
+					</div>
+				</div>
+				<div class="statistics-box">
+					<div class="hui-chart-title">
+						近24小时统计
+					</div>
+					<div class="statistics-chart">
+						<div class="statistics-chart-item">
+							<div class="chart-box">
+								<div class="chart-title">
+									近24小时温度
+								</div>
+								<div ref="chart1" class="chart-dom"></div>
+							</div>
+						</div>
+						<div class="statistics-chart-item">
+							<div class="chart-box">
+								<div class="chart-title">
+									近24小时湿度
+								</div>
+								<div ref="chart2" class="chart-dom"></div>
+							</div>
+						</div>
+						<div class="statistics-chart-item">
+							<div class="chart-box">
+								<div class="chart-title">
+									近24小时CO2
+								</div>
+								<div ref="chart3" class="chart-dom"></div>
+							</div>
+						</div>
+						<div class="statistics-chart-item">
+							<div class="chart-box">
+								<div class="chart-title">
+									近24小时甲醛
+								</div>
+								<div ref="chart4" class="chart-dom"></div>
+							</div>
+						</div>
+						<div class="statistics-chart-item">
+							<div class="chart-box">
+								<div class="chart-title">
+									近24小时TVOC
+								</div>
+								<div ref="chart5" class="chart-dom"></div>
+							</div>
+						</div>
+						<div class="statistics-chart-item">
+							<div class="chart-box">
+								<div class="chart-title">
+									近24小时PM2.5
+								</div>
+								<div ref="chart6" class="chart-dom"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import testAlarm from '@/components/work/common/testAlarm'
+	import selectSpace from '@/components/work/common/selectSpace'
+	import progressBar from '@/components/common/progressBar'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 2, 2, 3, 2, 3], '#DE4749');
+				this.chart(this.$refs.chart2, [1, 2, 2, 3, 2, 3], '#00D5FF');
+				this.chart(this.$refs.chart3, [1, 2, 2, 3, 2, 3], '#A4B0D0');
+				this.chart(this.$refs.chart4, [1, 2, 2, 3, 2, 3], '#8441C2');
+				this.chart(this.$refs.chart5, [1, 2, 2, 3, 2, 3], '#FFC073');
+				this.chart(this.$refs.chart6, [1, 2, 2, 3, 2, 3], '#49B788');
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			progressBar,
+			model
+		},
+		methods: {
+			chart(elem, data, color) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '55',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: [color],
+					xAxis: {
+						type: 'category',
+						data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '单位',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.monitor {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.monitor-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.monitor-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.monitor-right {
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+			background: rgba(0, 4, 10, 0.3);
+
+			.hui-chart-title {
+				margin: 20px 20px 12px 20px;
+			}
+
+			.environment-list {
+				padding: 0px 20px 0px 20px;
+				margin-bottom: 20px;
+				overflow-y: auto;
+			}
+
+			.smell-item {
+				width: 100%;
+				height: 160px;
+				background: #181F2D;
+				border-radius: 2px;
+				overflow: hidden;
+				margin-bottom: 12px;
+				border: 1px solid rgba(97, 133, 214, 0.15);
+
+				.smell-item-title {
+					height: 40px;
+					background: rgba(97, 133, 214, 0.08);
+					display: flex;
+					align-items: center;
+					padding: 0 16px;
+					font-size: 12px;
+				}
+
+				.smell-item-box {
+					display: flex;
+					flex-wrap: wrap;
+					padding-left: 14px;
+					padding-top: 10px;
+				}
+
+				.smell-item-row {
+					padding-right: 14px;
+				}
+
+				.smell-item-label {
+					overflow: hidden;
+					height: 40px;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					margin-bottom: 14px;
+
+					.smell-item-name {
+						font-size: 12px;
+					}
+
+				}
+			}
+
+			.smell-item:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.pass-rate {
+			height: 326px;
+			background: rgba(0, 4, 10, 0.3);
+			margin-top: 12px;
+			padding: 22px 20px;
+			min-width: 1100px;
+
+			.pass-rate-box {
+				margin-top: 20px;
+				display: flex;
+			}
+
+			.pass-rate-item {
+				flex: 1;
+				width: 0;
+				height: 216px;
+				background: #181F2D;
+				display: flex;
+				justify-content: center;
+				padding-top: 30px;
+				margin-right: 18px;
+			}
+
+			.pass-rate-item:last-child {
+				margin-right: 0px;
+			}
+		}
+
+		.statistics-box {
+			height: 500px;
+			background: rgba(0, 4, 10, 0.3);
+			margin-top: 12px;
+			min-width: 1100px;
+			padding: 22px 20px;
+
+			.statistics-chart {
+				width: 100%;
+				display: flex;
+				flex-wrap: wrap;
+				padding-top: 20px;
+			}
+
+			.statistics-chart-item {
+				width: 33.3333%;
+				height: 192px;
+				padding-right: 20px;
+				margin-bottom: 20px;
+			}
+
+			.statistics-chart-item:nth-child(3n) {
+				padding-right: 0px;
+			}
+
+			.chart-box {
+				width: 100%;
+				height: 100%;
+				background: #181F2D;
+				position: relative;
+			}
+
+			.chart-title {
+				position: absolute;
+				top: 16px;
+				width: 110px;
+				text-align: center;
+				height: 20px;
+				font-weight: 600;
+				color: #D0DEEE;
+				left: 50%;
+				margin-left: -44px;
+			}
+
+			.chart-dom {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/firefighting/facilities.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="electronic-patrol box-background">
+				<div class="electronic-patrol-box">
+					<div class="electronic-patrol-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="facilities" fileId="10000786667614"></model>
+						</div>
+					</div>
+					<div class="electronic-patrol-right">
+						<div class="electronic-patrol-chart">
+							<div class="alarm-table-box hui-flex">
+								<div class="alarm-title">
+									<div class="hui-chart-title">
+										消防报警
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">报警信息</span>
+										<span class="tr-130">报警时间</span>
+									</div>
+								</div>
+								<div class="alarm-table hui-flex-box">
+									<div class="alarm-tr">
+										<span class="tr-flex">这个设备有问题</span>
+										<span class="tr-130">2020-02-02 10:01:11</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">这个设备有问题</span>
+										<span class="tr-130">2020-02-02 10:01:11</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">这个设备有问题</span>
+										<span class="tr-130">2020-02-02 10:01:11</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="electronic-patrol-list">
+							<div class="alarm-table-box hui-flex">
+								<div class="alarm-title">
+									<div class="hui-chart-title">
+										消防设施
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">设备类型</span>
+										<span class="tr-80 tr-center alibaba">设备数量</span>
+										<span class="tr-80 tr-center alibaba">故障设备</span>
+									</div>
+								</div>
+								<div class="alarm-table hui-flex-box">
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">消防栓</span>
+										<span class="tr-80 tr-center alibaba color-blue">10</span>
+										<span class="tr-80 tr-center alibaba color-red">2</span>
+									</div>
+								</div>
+							</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 {
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.electronic-patrol {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.electronic-patrol-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.electronic-patrol-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.electronic-patrol-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.electronic-patrol-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+
+		.electronic-patrol-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/firefighting/system.vue

@@ -0,0 +1,510 @@
+<template>
+	<div class="firefighting-system">
+		<div class="firefighting-system-box">
+			<div class="firefighting-system-item">
+				<div class="firefighting-system-table-box hui-flex">
+					<div class="hui-chart-title">
+						<span>管理体系</span>
+						<el-button type="primary" size="mini">新增</el-button>
+					</div>
+					<div class="firefighting-system-table hui-flex-box">
+						<div class="firefighting-system-tr">
+							<div class="name">林夕三</div>
+							<div class="content">
+								<div class="label">组长</div>
+								<div class="line"></div>
+								<div class="value hui-ellipsis">
+									应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感
+								</div>
+							</div>
+						</div>
+						<div class="firefighting-system-tr">
+							<div class="name">林夕三</div>
+							<div class="content">
+								<div class="label">副组长</div>
+								<div class="line"></div>
+								<div class="value hui-ellipsis">
+									应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感
+								</div>
+							</div>
+						</div>
+						<div class="firefighting-system-tr">
+							<div class="name">鹿功良</div>
+							<div class="content">
+								<div class="label">副组长</div>
+								<div class="line"></div>
+								<div class="value hui-ellipsis">
+									应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感
+								</div>
+							</div>
+						</div>
+						<div class="firefighting-system-tr">
+							<div class="name">林夕三</div>
+							<div class="content">
+								<div class="label">组员</div>
+								<div class="line"></div>
+								<div class="value hui-ellipsis">
+									应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感
+								</div>
+							</div>
+						</div>
+						<div class="firefighting-system-tr">
+							<div class="name">林夕三</div>
+							<div class="content">
+								<div class="label">组员</div>
+								<div class="line"></div>
+								<div class="value hui-ellipsis">
+									应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感
+								</div>
+							</div>
+						</div>
+						<div class="firefighting-system-tr">
+							<div class="name">林夕三</div>
+							<div class="content">
+								<div class="label">组员</div>
+								<div class="line"></div>
+								<div class="value hui-ellipsis">
+									应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感应当展现对工作的认真态度和对工作的责任感
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="firefighting-system-item">
+				<organization-chart :datasource="ds">
+					<template slot-scope="{ nodeData }">
+						<div>
+							<div class="organization-content">
+								<div class="title">{{nodeData.title}}</div>
+								<div class="name">
+									<div class="name-box">{{nodeData.name}}</div>
+								</div>
+							</div>
+							<div class="childrens-box" v-if="nodeData.childrens && nodeData.childrens.length > 0">
+								<div class="childrens-box-line"></div>
+								<div class="organization-content node-box" v-for="(item, index) in nodeData.childrens"
+									:key="index"
+									:style="(index % 2 == 0 ? 'left:' : 'right:') + -(120 + parseInt(index / 2) * 185) + 'px;'">
+									<div class="title">{{item.title}}</div>
+									<div class="name">
+										<div class="name-box">{{item.name}}</div>
+									</div>
+									<div class="childrens-box-lines"
+										:class="index % 2 == 0 ? 'node-box-line-left' : 'node-box-line-right'">
+									</div>
+								</div>
+							</div>
+						</div>
+					</template>
+				</organization-chart>
+			</div>
+		</div>
+		<div class="firefighting-system-box">
+			<div class="firefighting-system-item">
+				<div class="alarm-table-box hui-flex">
+					<div class="alarm-title">
+						<div class="hui-chart-title">
+							<span>教育培训</span>
+							<el-button type="primary" size="mini">新增</el-button>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">教育培训名称</span>
+							<span class="tr-130">培训时间</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">备注</span>
+							<span class="tr-50">操作</span>
+						</div>
+					</div>
+					<div class="alarm-table hui-flex-box">
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">教育培训内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="firefighting-system-item">
+				<div class="alarm-table-box hui-flex">
+					<div class="alarm-title">
+						<div class="hui-chart-title">
+							<span>消防演练</span>
+							<el-button type="primary" size="mini">新增</el-button>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">消防演练名称</span>
+							<span class="tr-130">培训时间</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">备注</span>
+							<span class="tr-50">操作</span>
+						</div>
+					</div>
+					<div class="alarm-table hui-flex-box">
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+						<div class="alarm-tr">
+							<span class="tr-flex">演练培训名称</span>
+							<span class="tr-130">2020-02-02</span>
+							<span class="tr-flex">消防演练内容</span>
+							<span class="tr-flex">演练培训备注</span>
+							<span class="tr-50">
+								<span class="color-primary">查看</span>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import OrganizationChart from 'vue-organization-chart'
+	import 'vue-organization-chart/dist/orgchart.css'
+	export default {
+		components: {
+			OrganizationChart
+		},
+		data() {
+			return {
+				ds: {
+					id: 1,
+					name: '林夕三',
+					title: '组长',
+					childrens: [{
+						id: 2,
+						name: '林夕三',
+						title: '副组长'
+					}, {
+						id: 4,
+						name: '林夕三',
+						title: '副组长'
+					}],
+					children: [{
+							id: 5,
+							name: '林夕三',
+							title: '组员'
+						},
+						{
+							id: 6,
+							name: '林夕三',
+							title: '组员'
+						}, {
+
+							id: 7,
+							name: '林夕三',
+							title: '组员'
+						}, {
+
+							id: 8,
+							name: '林夕三',
+							title: '组员'
+						},
+					]
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.firefighting-system {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 20px;
+		font-size: 12px;
+
+		.firefighting-system-box {
+			flex: 1;
+			height: 0;
+			overflow: hidden;
+			display: flex;
+
+			.firefighting-system-item {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+				background: rgba(0, 4, 10, 0.3);
+			}
+
+			.firefighting-system-item:first-child {
+				margin-right: 12px;
+			}
+		}
+
+		.firefighting-system-box:first-child {
+			margin-bottom: 12px;
+		}
+
+		.firefighting-system-table-box {
+			padding: 20px;
+		}
+
+		.firefighting-system-table {
+			margin-top: 16px;
+		}
+
+		.firefighting-system-tr {
+			display: flex;
+			margin-bottom: 4px;
+
+			.name {
+				width: 88px;
+				height: 36px;
+				line-height: 36px;
+				background: rgba(97, 133, 214, 0.1);
+				text-align: center;
+				margin-right: 4px;
+			}
+
+			.content {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+				height: 36px;
+				line-height: 36px;
+				background: rgba(97, 133, 214, 0.05);
+				display: flex;
+				align-items: center;
+			}
+
+			.label {
+				width: 92px;
+				padding: 0 20px;
+			}
+
+			.line {
+				width: 1px;
+				height: 16px;
+				background: rgba(97, 133, 214, 0.15);
+			}
+
+			.value {
+				flex: 1;
+				padding: 0 20px;
+			}
+		}
+
+		.orgchart-container {
+			width: 100%;
+			height: 100%;
+			border: none;
+
+			.orgchart {
+				background: transparent;
+			}
+
+			.orgchart .lines .downLine {
+				background: #545F79;
+			}
+
+			.orgchart .lines .rightLine,
+			.orgchart .lines .topLine,
+			.orgchart .lines .leftLine {
+				border-color: #545F79;
+			}
+
+			.orgchart .node.focused,
+			.orgchart .node:hover {
+				background-color: transparent;
+			}
+
+			.node-box {
+				position: absolute;
+				top: 10px;
+			}
+
+			.orgchart .node {
+				padding: 0;
+				border: 0;
+			}
+
+			.childrens-box {
+				height: 70px;
+				position: relative;
+
+				.childrens-box-line {
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					width: 2px;
+					background: #545F79;
+					left: 50%;
+					margin-left: -1px;
+				}
+
+				.childrens-box-lines {
+					position: absolute;
+					width: 63px;
+					top: 36px;
+					height: 2px;
+					background: #545F79;
+				}
+
+				.node-box-line-left {
+					left: 120px;
+				}
+
+				.node-box-line-right {
+					right: 120px;
+				}
+			}
+
+			.organization-content {
+				width: 120px;
+				height: 69px;
+				background: #181F2D;
+				border-radius: 8px;
+				border: 1px solid rgba(97, 133, 214, 0.15);
+
+				.title {
+					height: 28px;
+					background: rgba(97, 133, 214, 0.08);
+					text-align: center;
+					line-height: 28px;
+				}
+
+				.name-box {
+					margin: 10px auto;
+					width: 68px;
+					height: 21px;
+					line-height: 19px;
+					border-radius: 2px;
+					border: 1px solid #545F79;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/firefighting/thoroughfare.vue

@@ -0,0 +1,234 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="access-control box-background">
+				<div class="access-control-box">
+					<div class="access-control-center">
+						<div class="hui-test-alarm">
+							<div class="test-box">
+								<div class="test-item">
+									<div class="test-icon">
+										<i class="iconfont huifont-zaichangrenshu"></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-chuchang"></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 red">
+										<i class="iconfont huifont-chuchang"></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-flex">层数</span>
+										<span class="tr-80 tr-center">进场人数</span>
+										<span class="tr-80 tr-center">出场人数</span>
+										<span class="tr-80 tr-center">现场人数</span>
+									</div>
+								</div>
+								<div class="alarm-table hui-flex-box">
+									<div class="alarm-tr">
+										<span class="tr-flex">一层</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-blue alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">二层</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-blue alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">三层</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-blue alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">四层</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-blue alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">三层</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-blue alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">四层</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-blue alibaba">0</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="bim-box">
+							<model type="thoroughfare" fileId="10000754876737"></model>
+						</div>
+					</div>
+					<div class="access-control-right">
+						<div class="access-control-record alarm-table-box hui-flex">
+							<div class="access-control-record-title">
+								<div class="hui-chart-title">
+									消防通道巡查记录
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容</span>
+									<span class="tr-130">巡查时间</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+							</div>
+						</div>
+						<div class="access-control-record alarm-table-box hui-flex">
+							<div class="access-control-record-title">
+								<div class="hui-chart-title">
+									防火门巡查记录
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容</span>
+									<span class="tr-130">巡查时间</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
+									<span class="tr-130">2020-01-01 20:00:06</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import model from '@/components/work/common/model'
+	export default {
+		components: {
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.access-control {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.access-control-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.access-control-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.access-control-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.access-control-record {
+				flex: 1;
+				height: 0;
+				background: rgba(0, 4, 10, 0.3);
+				width: 100%;
+				margin-bottom: 12px;
+
+				.access-control-record-title {
+					padding: 20px 20px 0 20px;
+				}
+			}
+
+			.access-control-record:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/security/accessControl.vue

@@ -0,0 +1,268 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="access-controls box-background">
+				<div class="access-control-box">
+					<div class="access-control-center">
+						<div class="hui-test-alarm">
+							<div class="test-box">
+								<div class="test-item">
+									<div class="test-icon">
+										<i class="iconfont huifont-zaichangrenshu"></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-chuchang"></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 red">
+										<i class="iconfont huifont-chuchang"></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-flex">公司名称</span>
+										<span class="tr-80 tr-center">职工进场</span>
+										<span class="tr-80 tr-center">职工出场</span>
+										<span class="tr-80 tr-center">访客进场</span>
+										<span class="tr-80 tr-center">访客出场</span>
+									</div>
+								</div>
+								<div class="alarm-table hui-flex-box">
+									<div class="alarm-tr">
+										<span class="tr-flex">常州红信数据科技有限公司</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-green alibaba">1</span>
+										<span class="tr-80 tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">常州红信数据科技有限公司</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-green alibaba">1</span>
+										<span class="tr-80 tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">常州红信数据科技有限公司</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-green alibaba">1</span>
+										<span class="tr-80 tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">常州红信数据科技有限公司</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-green alibaba">1</span>
+										<span class="tr-80 tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">常州红信数据科技有限公司</span>
+										<span class="tr-80 tr-center color-green alibaba">12</span>
+										<span class="tr-80 tr-center color-red alibaba">11</span>
+										<span class="tr-80 tr-center color-green alibaba">1</span>
+										<span class="tr-80 tr-center color-red alibaba">0</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="bim-box">
+							<model type="accessControl" fileId="10000786668492"></model>
+						</div>
+					</div>
+					<div class="access-control-right">
+						<div class="access-control-record alarm-table-box hui-flex">
+							<div class="access-control-record-title">
+								<div class="hui-chart-title">
+									通行记录
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">人员姓名</span>
+									<span class="tr-flex">通过时间</span>
+									<span class="tr-50 tr-center">进出类型</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+							</div>
+						</div>
+						<div class="access-control-record alarm-table-box hui-flex">
+							<div class="access-control-record-title">
+								<div class="hui-chart-title">
+									访客记录
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">人员姓名</span>
+									<span class="tr-flex">通过时间</span>
+									<span class="tr-50 tr-center">进出类型</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">林夕三</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import model from '@/components/work/common/model'
+	export default {
+		components: {
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.access-controls {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.access-control-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.access-control-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.access-control-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.access-control-record {
+				flex: 1;
+				height: 0;
+				background: rgba(0, 4, 10, 0.3);
+				width: 100%;
+				margin-bottom: 12px;
+
+				.access-control-record-title {
+					padding: 20px 20px 0 20px;
+				}
+			}
+
+			.access-control-record:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/security/car.vue

@@ -0,0 +1,262 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="car box-background">
+				<div class="car-box">
+					<div class="car-center">
+						<div class="hui-test-alarm">
+							<div class="test-box">
+								<div class="test-item">
+									<div class="test-icon">
+										<i class="iconfont huifont-zongchewei"></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-shengyuchewei"></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 purple">
+										<i class="iconfont huifont-yitingchewei"></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-flex">区域名称</span>
+										<span class="tr-flex tr-center">已停车位</span>
+										<span class="tr-flex tr-center">剩余车位</span>
+										<span class="tr-flex tr-center">故障车位</span>
+									</div>
+								</div>
+								<div class="alarm-table hui-flex-box">
+									<div class="alarm-tr">
+										<span class="tr-flex">A区</span>
+										<span class="tr-flex tr-center color-yellow alibaba">1</span>
+										<span class="tr-flex tr-center color-blue alibaba">356</span>
+										<span class="tr-flex tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">B区</span>
+										<span class="tr-flex tr-center color-yellow alibaba">1</span>
+										<span class="tr-flex tr-center color-blue alibaba">356</span>
+										<span class="tr-flex tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">C区</span>
+										<span class="tr-flex tr-center color-yellow alibaba">1</span>
+										<span class="tr-flex tr-center color-blue alibaba">356</span>
+										<span class="tr-flex tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">D区</span>
+										<span class="tr-flex tr-center color-yellow alibaba">1</span>
+										<span class="tr-flex tr-center color-blue alibaba">356</span>
+										<span class="tr-flex tr-center color-red alibaba">0</span>
+									</div>
+									<div class="alarm-tr">
+										<span class="tr-flex">E区</span>
+										<span class="tr-flex tr-center color-yellow alibaba">1</span>
+										<span class="tr-flex tr-center color-blue alibaba">356</span>
+										<span class="tr-flex tr-center color-red alibaba">0</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="bim-box">
+							<model type="car" fileId="10000808025971"></model>
+						</div>
+					</div>
+					<div class="car-right">
+						<div class="car-record alarm-table-box hui-flex">
+							<div class="car-record-title">
+								<div class="hui-chart-title">
+									通行记录
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">车牌号</span>
+									<span class="tr-flex">通过时间</span>
+									<span class="tr-50 tr-center">进出类型</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+							</div>
+						</div>
+						<div class="car-record alarm-table-box hui-flex">
+							<div class="car-record-title">
+								<div class="hui-chart-title">
+									访客记录
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">车牌号</span>
+									<span class="tr-flex">通过时间</span>
+									<span class="tr-50 tr-center">进出类型</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-red alibaba">出场</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-100">浙A88888</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center color-green alibaba">进场</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import model from '@/components/work/common/model'
+	export default {
+		components: {
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.car {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.car-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.car-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.car-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.car-record {
+				flex: 1;
+				height: 0;
+				background: rgba(0, 4, 10, 0.3);
+				width: 100%;
+				margin-bottom: 12px;
+
+				.car-record-title {
+					padding: 20px 20px 0 20px;
+				}
+			}
+
+			.car-record:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/security/electronicPatrol.vue

@@ -0,0 +1,265 @@
+<template>
+	<div class="yui-tree-box">
+		<select-space></select-space>
+		<div class="hui-tree-content">
+			<div class="electronic-patrol box-background">
+				<div class="electronic-patrol-box">
+					<div class="electronic-patrol-center">
+						<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 red">
+										<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>
+						<div class="bim-box">
+							<model type="electronicPatrol" fileId="10000786668235"></model>
+						</div>
+					</div>
+					<div class="electronic-patrol-right">
+						<div class="electronic-patrol-record alarm-table-box hui-flex">
+							<div class="alarm-title">
+								<div class="hui-chart-title">
+									打卡事件
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">路径名称</span>
+									<span class="tr-flex tr-center">点位数量</span>
+									<span class="tr-flex tr-center">今日打卡</span>
+									<span class="tr-flex tr-center">累计打卡</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-flex">路径1</span>
+									<span class="tr-flex tr-center color-purple alibaba">6</span>
+									<span class="tr-flex tr-center color-green alibaba">7</span>
+									<span class="tr-flex tr-center color-blue alibaba">192</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">路径2</span>
+									<span class="tr-flex tr-center color-purple alibaba">6</span>
+									<span class="tr-flex tr-center color-green alibaba">7</span>
+									<span class="tr-flex tr-center color-blue alibaba">192</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">路径3</span>
+									<span class="tr-flex tr-center color-purple alibaba">6</span>
+									<span class="tr-flex tr-center color-green alibaba">7</span>
+									<span class="tr-flex tr-center color-blue alibaba">192</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">路径4</span>
+									<span class="tr-flex tr-center color-purple alibaba">6</span>
+									<span class="tr-flex tr-center color-green alibaba">7</span>
+									<span class="tr-flex tr-center color-blue alibaba">192</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">路径5</span>
+									<span class="tr-flex tr-center color-purple alibaba">6</span>
+									<span class="tr-flex tr-center color-green alibaba">7</span>
+									<span class="tr-flex tr-center color-blue alibaba">192</span>
+								</div>
+								<div class="alarm-tr">
+									<span class="tr-flex">路径6</span>
+									<span class="tr-flex tr-center color-purple alibaba">6</span>
+									<span class="tr-flex tr-center color-green alibaba">7</span>
+									<span class="tr-flex tr-center color-blue alibaba">192</span>
+								</div>
+							</div>
+						</div>
+						<div class="electronic-patrol-record 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-50 tr-center">巡更人</span>
+								</div>
+							</div>
+							<div class="alarm-table hui-flex-box">
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更1</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更2</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更3</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更4</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更5</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更6</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更7</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+								<div class="alarm-tr" @click="drawer = true">
+									<span class="tr-100">巡更8</span>
+									<span class="tr-flex">2020-01-01 20:00:06</span>
+									<span class="tr-50 tr-center">林夕三</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<el-drawer title="打卡详情" :visible.sync="drawer" :size="400" :append-to-body="true">
+			<electronic-patrol-detail v-if="drawer"></electronic-patrol-detail>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import electronicPatrolDetail from '@/components/work/iot/security/electronicPatrolDetail'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {
+				drawer: false
+			}
+		},
+		components: {
+			electronicPatrolDetail,
+			selectSpace,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.electronic-patrol {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.electronic-patrol-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.electronic-patrol-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.electronic-patrol-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+
+			.electronic-patrol-record {
+				flex: 1;
+				height: 0;
+				background: rgba(0, 4, 10, 0.3);
+				width: 100%;
+				margin-bottom: 12px;
+			}
+
+			.electronic-patrol-record:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/security/infrared.vue

@@ -0,0 +1,250 @@
+<template>
+	<div class="yui-tree-box">
+		<!-- <select-space></select-space> -->
+		<div class="hui-tree-content" style="padding: 0;">
+			<div class="infrared box-background">
+				<div class="infrared-box">
+					<div class="infrared-center">
+						<test-alarm></test-alarm>
+						<div class="bim-box">
+							<model type="infrared" fileId="10000754876737"></model>
+						</div>
+					</div>
+					<div class="infrared-right">
+						<div class="infrared-chart hui-flex">
+							<div class="hui-chart-title">
+								统计分析
+							</div>
+							<div ref="chart1" class="hui-flex-box"></div>
+						</div>
+						<div class="infrared-list">
+							<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-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-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-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">设备3</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-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-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-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-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-130">2024-01-12 12:14:10</span>
+										<span class="tr-50 color-red">未处理</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import selectSpace from '@/components/work/common/selectSpace'
+	import testAlarm from '@/components/work/common/testAlarm'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {}
+		},
+		created() {
+			this.$nextTick(() => {
+				this.chart(this.$refs.chart1, [1, 3, 2, 6, 1])
+			})
+		},
+		components: {
+			testAlarm,
+			selectSpace,
+			model
+		},
+		methods: {
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '25',
+						right: '15',
+						bottom: '5',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['安装', '保养', '维修', '巡检', '拆除'],
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						boundaryGap: false,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'line',
+						symbolSize: 6,
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}, {
+						data: data,
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgba(0,150,255,0.15)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(0,150,255,0)'
+								}
+							])
+						},
+						z: 99
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.infrared {
+		width: 100%;
+		height: 100%;
+		padding: 20px;
+		overflow: auto;
+
+		.infrared-box {
+			width: 100%;
+			height: 100%;
+			min-width: 1100px;
+			min-height: 699px;
+			display: flex;
+		}
+
+		.infrared-center {
+			flex: 1;
+			width: 0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.infrared-right {
+			height: 100%;
+			width: 350px;
+			margin-left: 12px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.infrared-chart {
+			height: 306px;
+			background: rgba(0, 4, 10, 0.3);
+			padding: 20px;
+		}
+
+		.infrared-list {
+			margin-top: 12px;
+			background: rgba(0, 4, 10, 0.3);
+			flex: 1;
+			height: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/views/work/iot/security/monitor.vue

@@ -0,0 +1,334 @@
+<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">
+					<project-item-tree @treeclick="treeclick"></project-item-tree>
+				</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">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<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 class="monitor-item">
+						<div class="monitor-item-box">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<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 class="monitor-item">
+						<div class="monitor-item-box">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<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 class="monitor-item">
+						<div class="monitor-item-box">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<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 class="monitor-item">
+						<div class="monitor-item-box">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<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 class="monitor-item">
+						<div class="monitor-item-box">
+							<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/854594e68cd64a41a296be319b295a04"
+								alt="" />
+							<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 model from '@/components/work/common/model'
+	import projectItemTree from '@/components/common/projectItemTree'
+	export default {
+		data() {
+			return {
+				type: 'device',
+				treeData: [],
+				nowItem: {},
+				defaultProps: {
+					label: 'name'
+				},
+				activeName: [],
+				isOpen: false,
+				visible: false
+			}
+		},
+		created() {},
+		components: {
+			model,
+			projectItemTree
+		},
+		methods: {
+			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>