fix

virgo.wzfrontend/console/package-lock.json

@@ -7086,9 +7086,9 @@
 			"dev": true
 		},
 		"ezuikit-js": {
-			"version": "7.7.7",
-			"resolved": "https://registry.npmmirror.com/ezuikit-js/-/ezuikit-js-7.7.7.tgz",
-			"integrity": "sha512-VRkQN5u7bTdSwCqQYk3db7lR2kiXdCrMzr/rwmRZww8xqeXaghgttPjjI/kS+u/xVMAkl6hp9+47Yxs/zBRB8A=="
+			"version": "7.7.0",
+			"resolved": "https://registry.npmmirror.com/ezuikit-js/-/ezuikit-js-7.7.0.tgz",
+			"integrity": "sha512-nJXSR0XPKKA3YL0k4jSfj+qtieDHnpKqlA4ihnkCRrYvnnIAa1kSdprMM1/msgCrlTKqqVFb8Bo4d16tXYwhbA=="
 		},
 		"fast-deep-equal": {
 			"version": "3.1.3",

virgo.wzfrontend/console/package.json

@@ -13,7 +13,7 @@
 		"core-js": "^3.3.2",
 		"dayjs": "^1.11.11",
 		"element-ui": "^2.15.13",
-		"ezuikit-js": "^7.7.7",
+		"ezuikit-js": "^7.7.0",
 		"jquery": "^3.7.1",
 		"path-browserify": "^1.0.1",
 		"pinyin-pro": "^3.25.0",

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

@@ -1,5 +1,5 @@
 <template>
-	<div id="video-box" class="video">
+	<div :id="'video-box' + _uid" class="video">
 		<div :id="'ezuikit-player' + _uid"></div>
 	</div>
 </template>
@@ -10,37 +10,41 @@
 	} from '@/httpApi/iot'
 	export default {
 		props: {
-			width: {
-				type: Number,
-				default: 352
-			},
-			height: {
-				type: Number,
-				default: 198
-			},
 			sourceUrl: {
 				type: String,
 				default: ''
+			},
+			template: {
+				type: String,
+				default: 'simple'
+			},
+			time: {
+				type: Number,
+				default: 1
 			}
 		},
 		data() {
 			return {
-				player: null
+				player: null,
+				width: 352,
+				height: 198,
+				reset: 0
 			};
 		},
 		computed: {},
 		created() {
 			let _self = this;
 			_self.$nextTick(() => {
-				this.init();
+				this.width = document.getElementById('video-box' + this._uid).clientWidth;
+				this.height = document.getElementById('video-box' + this._uid).clientHeight;
+				if (this.sourceUrl) setTimeout(() => {
+					this.init();
+				}, 2000 * this.time);
 			});
 		},
 		beforeDestroy() {
 			if (this.player) this.destroy() //销毁并停止直播视频
 		},
-		destroy() {
-			if (this.player) this.destroy() //销毁并停止直播视频
-		},
 		methods: {
 			init() {
 				if (this.player) {
@@ -51,16 +55,20 @@
 						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,
+							url: this.sourceUrl,
+							template: this.template,
 							width: this.width,
 							height: this.height,
 							handleSuccess: () => {
-								// this.stop();
-								console.log('-----success');
-							}
+								this.reset = 0;
+							},
+							handleError: (data) => {
+								if (data.msg == "该用户不拥有该设备") return;
+								if (this.reset < 5) {
+									this.play();
+									this.reset++
+								}
+							},
 						});
 					}
 				})
@@ -125,11 +133,12 @@
 				this.player.fullScreen();
 			},
 			destroy() {
-				if (!this.player.destroy) return;
+				if (!this.player.destroy) return this.$emit('closeVideoModel');
 				this.stop();
 				var destroyPromise = this.player.destroy();
 				destroyPromise.then((data) => {
-					console.log("promise 移除", data);
+					console.log('关闭流成功');
+					this.$emit('closeVideoModel');
 				});
 				this.player = null;
 			}

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

@@ -7,8 +7,13 @@
 					<span class="el-collapse-name">{{item.name}}</span>
 				</template>
 				<div>
-					<el-tree :data="item.projectItemTargetList" :props="defaultProps" :expand-on-click-node="false"
-						@node-click="nodeClick">
+					<el-tree :data="item.projectItemTargetList" :props="defaultProps">
+						<div class="custom-tree-node" slot-scope="{ node, data }">
+							<div class="label">{{node.label}}</div>
+							<div :class="nowData.id === data.id ? 'active':''" @click.stop="nodeClick(data)">
+								<i :class="iconfontClass"></i>
+							</div>
+						</div>
 					</el-tree>
 				</div>
 			</el-collapse-item>
@@ -21,6 +26,12 @@
 		getProjectDetailById,
 	} from '@/httpApi/space'
 	export default {
+		props: {
+			iconfontClass: {
+				type: String,
+				default: 'iconfont huifont-shexiangtou'
+			},
+		},
 		data() {
 			return {
 				treeData: [],
@@ -28,6 +39,7 @@
 					children: 'children',
 					label: 'name'
 				},
+				nowData: {}
 			}
 		},
 		created() {
@@ -37,12 +49,19 @@
 			init() {
 				getProjectDetailById(this.$store.getters.project.id).then(res => {
 					if (res.state) {
-						this.treeData = res.data.projectItemList;
+						this.treeData = res.data.projectItemList.map(node => {
+							node.projectItemTargetList = node.projectItemTargetList.map(target => {
+								target['projectItemName'] = node.name
+								return target;
+							})
+							return node;
+						});
 					}
 				})
 			},
 			nodeClick(item) {
-				this.$emit('treeclick', item.id);
+				this.nowData = this.nowData.id === item.id ? {} : item;
+				this.$emit('treeclick', this.nowData);
 			}
 		}
 	}

virgo.wzfrontend/console/src/components/work/bim/bimForm.vue

@@ -79,15 +79,20 @@
 				this.bimForm.bim = {};
 			},
 			submit() {
-				this.loading = true;
-				let id = this.$refs.projectItem.formBox.projectItemTargetId;
-				getProjectItemTargetBimList(id).then(res => {
-					if (res.state) {
-						let bims = res.data ? res.data.bims : res.data;
-						!bims ? this.insertProjectItemTargetBim(id) : this.updateProjectItemTargetBim(id, bims, res
-							.data.id);
-					} else {
-						this.loading = false;
+				this.$refs.projectItem.submitValidate((data, state) => {
+					if (!this.bimForm.bim.id) return this.$message.warning('请上传模型');
+					if (state) {
+						this.loading = true;
+						let id = this.$refs.projectItem.formBox.projectItemTargetId;
+						getProjectItemTargetBimList(id).then(res => {
+							if (res.state) {
+								let bims = res.data ? res.data.bims : res.data;
+								!bims ? this.insertProjectItemTargetBim(id) : this
+									.updateProjectItemTargetBim(id, bims, res.data.id);
+							} else {
+								this.loading = false;
+							}
+						})
 					}
 				})
 			},

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

@@ -21,4 +21,28 @@ export function getCallAlarmList(data) {
 		method: 'post',
 		data: data
 	})
+}
+/* 
+ * 获取设备检测
+ * 
+ * 
+ */
+export function getMonitoringList(data) {
+	return request({
+		url: `/api/test/monitoring/get`,
+		method: 'post',
+		data: data
+	})
+}
+/* 
+ * 获取摄像头列表
+ * 
+ * 
+ */
+export function getMonitorList(data) {
+	return request({
+		url: `/api/test/camera/1/100`,
+		method: 'post',
+		data: data
+	})
 }

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

@@ -20,8 +20,12 @@
 				<div class="hui-content-title">
 					<div class="hui-title-item active">BIM漫游设置</div>
 				</div>
-				<div class="hui-flex-box hui-flex">
-					<bim-roam v-if="projectItem.id" :projectItem="projectItem" :key="projectItem.id"></bim-roam>
+				<div class="hui-flex-box">
+					<div v-if="!projectItem.bimIntegrateId"
+						style="display: flex;align-items: center;justify-content: center;height: 100%;">
+						<empty description="该楼宇暂无集成模型"></empty>
+					</div>
+					<bim-roam v-else :projectItem="projectItem" :key="projectItem.id"></bim-roam>
 				</div>
 			</div>
 		</div>

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

@@ -62,7 +62,7 @@
 						<div class="legend-item" v-for="(item,index) in topAlarm" :key="index">
 							<span :class="'legend-bage bg'+(index+1)"></span>
 							<span class="legend-label">{{item.name}}</span>
-							<span class="legend-label alibaba">{{item.number}}</span>
+							<span class="legend-label alibaba">{{item.value}}</span>
 						</div>
 					</div>
 				</div>
@@ -84,7 +84,7 @@
 									<div :class="'tr-top'+(index+1)">{{returnTop(String(index+1))}}</div>
 								</span>
 								<span class="tr-flex">{{item.name}}</span>
-								<span class="tr-flex tr-center alibaba">{{item.number}}</span>
+								<span class="tr-flex tr-center alibaba">{{item.value}}</span>
 							</div>
 						</div>
 					</div>
@@ -248,30 +248,6 @@
 						<div class="alarm-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" style="margin-left: 8px;">查询</el-button>
-								</div>
 							</div>
 							<div class="alarm-tr">
 								<span class="tr-50">序号</span>
@@ -322,11 +298,11 @@
 					</div>
 					<div class="params-chart-box">
 						<div class="params-chart-item params-chart-left">
-							<div class="title">参数告警趋势(累计)</div>
+							<div class="title">类型告警趋势</div>
 							<div ref="chart2" class="chart-box"></div>
 						</div>
 						<div class="params-chart-item params-chart-right">
-							<div class="title">告警趋势(最近30天)</div>
+							<div class="title">告警趋势</div>
 							<div ref="chart3" class="chart-box"></div>
 						</div>
 					</div>
@@ -372,15 +348,6 @@
 					max: 100,
 					value: 99
 				});
-				
-				this.chart1(this.$refs.chart2, [
-					[1, 3, 2, 6, 1]
-				])
-				this.chart1(this.$refs.chart3, [
-					[0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-						1, 1
-					]
-				])
 			})
 		},
 		methods: {
@@ -401,146 +368,150 @@
 			},
 			testTopData() {
 				let obj = {},
-					list = [];
+					list = [],
+					all = 0,
+					dateObj = {},
+					dateList = [];
 				for (let i = 0; i < this.alarmList.length; i++) {
-					console.log(this.alarmList[i]);
+					let date = this.$dayjs(this.alarmList[i].date).format('YYYY/MM/DD');
+					if (!dateObj[date]) {
+						dateObj[date] = 1;
+						dateList.push({
+							name: date,
+							value: 0
+						})
+					}
 					if (!obj[this.alarmList[i].deviceId]) {
 						obj[this.alarmList[i].deviceId] = 1;
 						list.push({
 							id: this.alarmList[i].deviceId,
 							name: this.alarmList[i].deviceName,
-							number: 0,
+							value: 0,
 						})
 					}
-					list.find(node => node.id == this.alarmList[i].deviceId).number++
+					list.find(node => node.id == this.alarmList[i].deviceId).value++;
+					all++;
+					dateList.find(node => node.name == date).value++;
 				}
-				this.topAlarm = list.sort((a, b) => a.number > b.number);
-				this.chart();
+				this.topAlarm = list.sort((a, b) => a.value > b.value);
+				let title = this.topAlarm[0].name;
+				let len = this.topAlarm[0].value;
+				this.chart(title, ((len / all) * 100).toFixed(2).padStart(5, '0'), this.topAlarm);
+				this.chart1(this.$refs.chart2, [this.topAlarm.map(node => node.value)], this.topAlarm.map(node => node
+					.name))
+				this.chart1(this.$refs.chart3, [dateList.map(node => node.value)], dateList.map(node => node
+					.name))
 			},
 			returnTop(number) {
 				let str = number.length === 1 ? ('0' + number) : number;
 				return 'TOP' + str;
-			},
-			chart() {
-				let chart = echarts.init(this.$refs.chart1);
-				let title = '设备名称2',
-					len = "50.00"
-				let option = {
-					title: {
-						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
-						left: 'center',
-						top: 'center',
-						textStyle: {
-							rich: {
-								name: {
-									color: "#fff",
-									fontSize: 12,
-									lineHeight: 16
-								},
-								percent: {
-									color: "#fff",
-									fontSize: 28,
-									lineHeight: 38,
-									fontFamily: 'alibabaMedium'
-								},
-							}
-						}
-					},
-					color: ['#EB7E65', '#9D60FB', '#5AD8A6', '#F7C739', '#5B8FF9', '#5D7092', '#6DC8EC', '#FF9D4D'],
-					series: [{
-						type: 'pie',
-						center: ['50%', '50%'],
-						radius: ['60%', '90%'],
-						avoidLabelOverlap: false,
-						itemStyle: {
-							borderColor: 'RGBA(21, 26, 37, 1)',
-							borderWidth: 10
-						},
-						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: "#fff",
-										fontSize: 12,
-										lineHeight: 16
-									},
-									percent: {
-										color: "#fff",
-										fontSize: 28,
-										lineHeight: 38,
-										fontFamily: 'alibabaMedium'
-									},
-								}
-							},
-						},
-						labelLine: {
-							show: false
-						},
-						data: [{
-								value: 3,
-								name: "设备名称2"
-							},
-							{
-								value: 2,
-								name: "设备名称3"
-							},
-							{
-								value: 1,
-								name: "设备名称4"
-							}
-						]
-					}]
-				};
-				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
-						}
-					});
-				});
 			},
-			chart1(elem, data) {
+			chart(title, len, data) {
+				let chart = echarts.init(this.$refs.chart1);
+				let option = {
+					title: {
+						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
+						left: 'center',
+						top: 'center',
+						textStyle: {
+							rich: {
+								name: {
+									color: "#fff",
+									fontSize: 12,
+									lineHeight: 16
+								},
+								percent: {
+									color: "#fff",
+									fontSize: 28,
+									lineHeight: 38,
+									fontFamily: 'alibabaMedium'
+								},
+							}
+						}
+					},
+					color: ['#EB7E65', '#9D60FB', '#5AD8A6', '#F7C739', '#5B8FF9', '#5D7092', '#6DC8EC', '#FF9D4D'],
+					series: [{
+						type: 'pie',
+						center: ['50%', '50%'],
+						radius: ['60%', '90%'],
+						avoidLabelOverlap: false,
+						itemStyle: {
+							borderColor: 'RGBA(21, 26, 37, 1)',
+							borderWidth: 10
+						},
+						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: "#fff",
+										fontSize: 12,
+										lineHeight: 16
+									},
+									percent: {
+										color: "#fff",
+										fontSize: 28,
+										lineHeight: 38,
+										fontFamily: 'alibabaMedium'
+									},
+								}
+							},
+						},
+						labelLine: {
+							show: false
+						},
+						data: data
+					}]
+				};
+				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
+						}
+					});
+				});
+			},
+			chart1(elem, data, x) {
 				let chart = echarts.init(elem);
 				let series = [];
 				for (var i = 0; i < data.length; i++) {
@@ -568,11 +539,6 @@
 					obj['data'] = data[i];
 					series.push(obj);
 				}
-				let x = ['类目一', '类目二', '类目三', '类目四', '类目五'];
-				if (data.length > 1) x = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日',
-					'14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日',
-					'28日', '29日', '30日'
-				]
 				let option = {
 					tooltip: {
 						show: true,
@@ -606,7 +572,6 @@
 							color: '#D0DEEE',
 							fontSize: 10
 						},
-						boundaryGap: false,
 						axisLine: {
 							lineStyle: {
 								color: '#6C8097'

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

@@ -269,32 +269,6 @@
 				<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>
@@ -312,89 +286,23 @@
 					</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 class="params-item params-tr" v-for="(item,index) in list" :key="item.id">
+						<div class="params-date">{{item.date}}</div>
+						<div class="params-td">{{item.controlTemperature}}</div>
+						<div class="params-td">{{item.supplyWaterTemperature}}</div>
+						<div class="params-td">{{item.backWaterTemperature}}</div>
+						<div class="params-td">{{item.nonSmokingTemperature}}</div>
+						<div class="params-td">{{item.mediumPressure}}</div>
+						<div class="params-td">{{item.mediumTemperature}}</div>
+						<div class="params-td">{{item.instantaneousFlowRate}}</div>
+						<div class="params-td">{{item.unitLoad}}</div>
+						<div class="params-td">{{item.fault}}</div>
+						<div class="params-td">{{item.setTemperature}}</div>
+						<div class="params-td">
+							<div class="color-gray" v-if="!item.state">关闭</div>
+							<div class="color-green" v-else-if="item.state === 1">开启</div>
+							<div class="color-orange" v-else="item.state === 2">故障</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -403,13 +311,31 @@
 </template>
 
 <script>
+	import {
+		getMonitoringList
+	} from '@/httpApi/test'
 	export default {
 		data() {
 			return {
+				list: [],
 				value: '',
 				value1: ''
 			}
-		}
+		},
+		created() {
+			this.init();
+		},
+		methods: {
+			init() {
+				getMonitoringList({
+					projectId: this.$store.getters.project.id
+				}).then(res => {
+					if (res.state) {
+						this.list = res.data;
+					}
+				})
+			}
+		},
 	}
 </script>
 

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

@@ -11,7 +11,7 @@
 				</div>
 			</div>
 			<div class="hui-tree-content">
-				<model type="monitor" fileId="10000786668235" @tipClick="tipClick"></model>
+				<model ref="model" type="monitor" fileId="10000786668235" @tipClick="tipClick"></model>
 			</div>
 			<div class="placeholder"></div>
 		</div>
@@ -23,122 +23,100 @@
 			</div>
 			<div class="hui-flex box-background">
 				<div class="monitor-box-title">
-					二号楼 / 二层
+					<span v-if="target.id">{{target.projectItemName}} / {{target.name}}</span>
+					<span v-else>全部列表</span>
 				</div>
 				<div class="monitor-list hui-flex-box">
-					<div class="monitor-item">
+					<div class="monitor-item" v-for="(item,index) in list" :key="item.id">
 						<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>
+							<play-video :ref="item.number" :sourceUrl="item.appKey" template="simple">
+							</play-video>
+							<div class="monitor-space">{{item.name}}</div>
+							<div class="video-mask" @click="clickVideo(item)">
+								<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-		<el-dialog :close-on-click-modal="false" 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 class="video-toggle" v-if="isVideo">
+			<div class="title">
+				<div class="title-icon"><i></i></div>
+				<span class="label">摄像头</span>
+				<i class="el-icon-close" @click="closeVideo"></i>
+			</div>
+			<div class="video-toggle-box">
+				<play-video ref="playVideo" v-if="nowVideo.id && isVideo" :sourceUrl="nowVideo.appKey" template="pcLive"
+					@closeVideoModel="isVideo = false">
+				</play-video>
 			</div>
-		</el-dialog>
+		</div>
+		<div class="video-mask" v-if="isVideo"></div>
 	</div>
 </template>
 
 <script>
 	import model from '@/components/work/common/model'
 	import projectItemTree from '@/components/common/projectItemTree'
+	import {
+		getMonitorList
+	} from '@/httpApi/test'
+	import playVideo from '@/components/common/playVideo.vue'
 	export default {
 		data() {
 			return {
-				type: 'device',
-				treeData: [],
-				nowItem: {},
-				defaultProps: {
-					label: 'name'
-				},
-				activeName: [],
+				target: {},
+				list: [],
 				isOpen: false,
-				visible: false
+				isVideo: false,
+				nowVideo: {}
 			}
 		},
-		created() {},
+		created() {
+			this.init();
+		},
 		components: {
 			model,
-			projectItemTree
+			projectItemTree,
+			playVideo
 		},
 		methods: {
-			treeclick() {
-
+			init(option) {
+				let postData = option || {
+					projectId: this.$store.getters.project.id
+				}
+				getMonitorList(postData).then(res => {
+					if (res.state) {
+						this.list = res.data.dataList.map(node => {
+							node['position'] = JSON.parse(node.secret);
+							return node;
+						});
+						this.$refs.model.setData(this.list);
+					}
+				})
+			},
+			treeclick(item) {
+				this.target = item;
+				if (!item.id) return this.init();
+				this.init({
+					projectItemTargetId: item.id
+				})
+			},
+			tipClick(id) {
+				let item = this.list.find(node => node.id === id);
+				if (!item || !item.id) return;
+				this.clickVideo(item)
+			},
+			clickVideo(item) {
+				this.nowVideo = item;
+				this.$refs[this.nowVideo.number][0].stop();
+				this.isVideo = true;
+			},
+			closeVideo() {
+				if (this.$refs[this.nowVideo.number][0]) this.$refs[this.nowVideo.number][0].play();
+				this.$refs.playVideo.destroy();
 			},
-			tipClick() {
-				this.visible = true;
-			}
 		},
 	}
 </script>
@@ -154,6 +132,114 @@
 		width: 100%;
 		height: 100%;
 
+		.video-toggle {
+			position: fixed;
+			width: 700px;
+			height: 500px;
+			background: #000;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			display: flex;
+			flex-direction: column;
+			z-index: 101;
+
+			.title {
+				display: flex;
+				align-items: center;
+				position: relative;
+				background: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, 0.2));
+				margin-bottom: 2px;
+				line-height: 32px;
+				padding: 0 10px;
+
+				.title-icon {
+					width: 14px;
+					height: 14px;
+					border: 1px solid #4f7adb;
+					margin-right: 10px;
+					box-shadow: 0px 0px 6px 2px rgba(110, 163, 255, 0.2);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					i {
+						display: inline-block;
+						width: 4px;
+						height: 4px;
+						background: rgba(110, 163, 255, 0.6);
+					}
+				}
+
+				&:before {
+					content: '';
+					left: -1px;
+					bottom: 0px;
+					position: absolute;
+					width: 15px;
+					height: 2px;
+					border-radius: 2px;
+					background: #4777e3;
+				}
+
+				.label {
+					flex: 1;
+					width: 0;
+					overflow: hidden;
+					font-weight: 500;
+				}
+
+				.title-option {
+					display: flex;
+					align-items: center;
+					background: rgba(26, 38, 60, 0.8);
+					height: 20px;
+					border-radius: 2px;
+				}
+
+				.option-item {
+					width: 60px;
+					height: 20px;
+					color: #818CA2;
+					font-size: 12px;
+					text-align: center;
+					line-height: 20px;
+					border-radius: 2px;
+					cursor: pointer;
+				}
+
+				.option-item.active,
+				.option-item:hover {
+					background: #6c7589;
+					color: #D2E4FF;
+				}
+
+				.more {
+					color: $--color-primary;
+					font-size: 12px;
+					cursor: pointer;
+				}
+
+				.el-icon-close {
+					font-size: 20px;
+					cursor: pointer;
+				}
+			}
+
+			.video-toggle-box {
+				flex: 1;
+				height: 0;
+				display: flex;
+				align-items: center;
+				padding: 0 20px 20px 20px;
+				box-sizing: border-box;
+			}
+
+			video {
+				max-height: 100%;
+			}
+		}
+
 		.yui-tree-box {
 			width: 100%;
 			height: 100%;
@@ -299,12 +385,30 @@
 					transition: all 200ms linear;
 					padding-right: 1px;
 				}
+
+				.video-mask {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background: rgba(0, 0, 0, 0.5);
+					z-index: 3;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					opacity: 0;
+					transition: 300ms;
+
+					i {
+						font-size: 24px;
+					}
+				}
 			}
 
 			.monitor-item:hover {
-
-				.monitor-item-box {
-					border: 1px solid $--color-primary;
+				.video-mask {
+					opacity: 1;
 				}
 
 				.monitor-operation {