smartpark-front/src/components/monitoring/lift.vue

<template>
	<!-- 电梯信息 -->
	<div class="liftBox" v-if="dtState">
		<!-- 返回主视角 -->
		<backHome :bimModel="bimModel" type="电梯" dom=".mapDom"></backHome>
		<!-- <p>1111</p> -->
		<!-- 设备概况 -->
		<div style="position: absolute;left: 84px;top: 20px;" v-if="bimModel == 1">
			<div class="build-message"
				style="color: white;text-align: center;border: 1px solid rgb(0, 187, 255);width: 110px;margin: 0 auto;border-radius: 5px;padding: 5px 0;">
				{{ buildMessage }}
			</div>
			<div class="mapDom" style="width: 250px;height: 180px;margin-top: 20px;"></div>
		</div>
		<div class="box2" :class="bimModel == 2 ? 'tataigen' : ''">
			<div class="title flex-center">
				<img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png">
				<span>设备概况</span>
			</div>
			<div class="state flex-center-center">
				<div class="zc flex-center" style="font-family:fantasy;"><span style="margin-left: 72px;">{{
						normalEquipNumber
				}}</span></div>
				<div class="lx flex-center" style="font-family:fantasy;"><span style="margin-left: 72px;">{{
						warnEquipEquipNumber
				}}</span></div>
			</div>
			<div class="stateName flex-center-center">
				<span class="zc">正常</span>
				<span class="lx">故障报警</span>
			</div>
			<div class="tab_box">
				<div class="tab_one" @click="clickAlarm(1)" :style="{ color: isAlarm ? 'red' : '#fff' }">
					<el-badge :is-dot='isAlarm' class="item">设备报警</el-badge><span
						style="margin-left:5px;vertical-align: bottom;">({{ warnEquipWarnNumber }})</span>
				</div>
			</div>
			<div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
				<p>设备名称</p>
				<span>|</span>
				<p>报警信息</p>
				<span>|</span>
				<p>报警时间</p>
			</div>
			<div v-if="listData.length == 0" class="noBjxx">暂无故障报警信息
			</div>
			<div v-else class="warp">
				<div class="item flex-center" v-for="(item, index) in listData" :key="index" style="position: relative;"
					@mouseenter="showAlarkAlert(item, index)" @mouseleave="closeAlarkAlert(item, index)">
					<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
						<p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)">
							<img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="">
							<span>确认告警</span>
						</p>
						<span v-if="item.warnStatus == 1">|</span>
						<p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
						<i class="el-icon-refresh-right" style="margin-right:10px;"></i>
						<span>告警恢复</span>
						</p>
					</div>
					<div class="box flex-center" style="justify-content: space-around;"
						:class="bimModel == 2 ? 'tataicon' : ''">
						<div class="left flex-center-center">
							<img class="icon" src="../../../public/img/monitoring/electricity/lx.png"
								v-if="item.warnStatus == '2'">
							<img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else>
							<span class="message" v-text="item.name"
								:style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }"
								:title="item.name"></span>
						</div>
						<span></span>
						<span class="data"
							:style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }"
							:title="item.warnContent">{{ item.warnContent }}</span>
						<span class=""></span>
						<span class="time"
							:style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{
									item.warnDate.substring(5, 16)
							}}</span>
					</div>
				</div>
			</div>
			<div
				style="position: absolute;bottom: 10px;right: 10px;width:345px;text-align:right;color:rgb(7, 230, 237);font-size:14px;cursor:pointer;">
				<span @click="goMoreWarnList">查看报警详情</span>
			</div>
		</div>
		<!-- 设备列表 -->
		<div class="tab" :class="bimModel == 2 ? 'tataigen' : ''">
			<div class="title flex-center">
				<img src="../../../public/img/monitoring/electricity/listIcon3.png">
				<span id="lift_box">设备列表</span>
			</div>
			<div class="tabBox">
				<el-table @row-click="tableClick" :data="arr" style="width: 100%;max-height: 220px;" @row-contextmenu="tableContext"
					:class="bimModel == 2 ? 'tataitab' : ''">
					<el-table-column label="设备名称" width="160">
						<template slot-scope="scope">
							<div class="flex-center mon_box">
								<img v-if="scope.row.status == 90000" style="margin: 0 6px;"
									src="../../../public/img/monitoring/electricity/listIcon.png">
								<img v-else-if="scope.row.status == 90001" style="margin: 0 6px;"
									src="../../../public/img/monitoring/electricity/listIcon2.png">
								<img v-else style="margin: 0 6px;"
									src="../../../public/img/monitoring/electricity/listIcon4.png">
								<span
									:style="{ color: scope.row.status == 90000 ? 'white' : scope.row.status == 90001 ? '#a5bbe5' : '#ff0000', cursor: 'pointer' }"
									:title="scope.row.name">{{ scope.row.name }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="|" width="10">
					</el-table-column>
					<el-table-column label="设备位置">
						<template slot-scope="scope">
							<div class="flex-center mon_box">
								<span
									:style="{ color: scope.row.status == 90000 ? 'white' : scope.row.status == 90001 ? '#a5bbe5' : '#ff0000' }"
									style="width: 80px;" :title="scope.row.location">
									{{ scope.row.location }}</span>

							</div>
						</template>
					</el-table-column>
					<el-table-column label="|" width="10">
					</el-table-column>
					<el-table-column label="运行方向" style="width: 80px;">
						<template slot-scope="scope">
							<div class="flex-center">
								<!-- <span :style="{color:scope.row.status == 'NORMAL工作正常'?'':'red'}"
									style="padding-left: 10px;">{{scope.row.status == 'NORMAL工作正常'?'正常':'异常'}}</span> -->
								<span
									:style="{ color: scope.row.status == 90000 ? 'white' : scope.row.status == 90001 ? '#a5bbe5' : '#ff0000' }">{{
											scope.row.direction
									}}</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination :pager-count="4" background @current-change="handleCurrentChange"
					:current-page.sync="current" :page-size="7" layout="total, prev, pager, next" :total="arr.length">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
import * as bfHelper from '../../util/bfHelper';
import * as commonValue from '../../util/commonValue';
import {
	// 业务区
	getYwqLiftData, // 获取所以电梯运行状态数据
	getLifList,
	getLiftWarnList,//告警列表
	getCancelWarn,//确认告警
  	recoveryWarn,//恢复告警
} from '@/api/garden/monitoring';
import backHome from './backHome';
import { dateFormat } from "@/util/date";
export default {
	props: {
		dtState: {
			type: Boolean,
		},
		bimModel: {
			type: Number
		}
	},
	components: {
		backHome
	},
	data() {
		return {
			pos: 0,
			height: 5350,
			offsetZ: 250,
			path: "ws://192.168.1.3/blade-websocket/ws?lift",
			// path: "ws://10.90.100.204/blade-websocket/ws?lift",
			socket: "",
			arr: [], //电梯信息
			listData: [],
			labels: [{ //1号楼
				id: 2,
				location: '1号楼',
				objectId: "37f3262a-504a-4233-87b2-7ce32a042fe4",
				worldPosition: {
					x: 93607.94228431502,
					y: -6640.460729435042,
					z: -500
				},
				index: "10000753440674.2772097",
				name: '升降电梯(1)'
			}, { //2
				id: 1,
				location: '2号楼',
				objectId: "da579e23-603a-43ed-98cc-034e90799983",
				worldPosition: {
					x: 70389.96145101362,
					y: 21111.28165847061,
					z: 7879.99999809265
				},
				index: "10000752822816.1066785",
				name: '升降电梯(2)'
			}, { //4
				id: 0,
				location: '4号楼',
				objectId: "e6f8820b-5536-4bb4-82b2-506f887a638b",
				worldPosition: {
					x: 149168.9375,
					y: 74527.67355197835,
					z: 289.9493728786847,
				},
				index: "10000752830259.2306329",
				name: '升降电梯(4)'
			},



			{ //6号楼
				id: 3,
				location: '6号楼',
				objectId: "8ec550b9-6539-4da9-8aa5-9113cef7816c",
				worldPosition: {
					x: 151204.97680521014,
					y: -17898.693359375,
					z: 7412.6652844985865
				},
				index: "10000752830313.1884001",
				name: '升降电梯(6)'
			},
			],
			isAlarm: false,
			isSafe: false,
			normalEquipNumber: 0,//正常设备数量
			warnEquipEquipNumber: 0,//告警设备数量
			warnEquipWarnNumber: 0,//告警数量
			buildMessage: '',
			tower: null,
			layer: null,
			liftArr: [],
		}
	},
	watch: {
		bimModel: {
			handler(newVal, oldVal) {
				this.getLiftWarnList();//设备告警列表
				window.removeEventListener('click', this.windowClick);
			}
		},
		//模型是否加载完成监听
		"$store.state.bfHelperState.bfState": {
			immediate: true,
			handler(newval, olval) {
				if (newval) {
					// 清除外部构件
					// bfHelper.clearComponent();
					bfHelper.extObjMngClear(); //清除外部构件
					// 模型恢复全部状态
					bfHelper.resetStatus(2);
					if (this.bimModel == 1) {
						bfHelper.lookEquipmentCop('电梯');;
						bfHelper.setOpacityFun();
						setTimeout(() => {
							this.setTowerLift();
						}, 300);
						bfHelper.setCameraStatus({
							aspect: 1.889763779527559,
							coordinateSystem: "world",
							far: 960464.7787185954,
							fov: 45,
							name: "persp",
							near: 105041.57557288553,
							position: {
								x: 114923.08877241895,
								y: -391542.9803033385,
								z: 219845.7809478254
							},
							target: {
								x: -8729.420142852026,
								y: 863922.0428858905,
								z: -496665.6824418152
							},
							up: {
								x: -0.048407478040169157,
								y: 0.4914893345691443,
								z: 0.8695372045373162
							},
							version: 1,
							zoom: 1
						});
						// }

					} else {
						// 查看管线
						bfHelper.TtLookEquipmentCop('电梯');
						bfHelper.setOpacityFun1();
						this.setTowerLift();
						setTimeout(() => {
							this.liftCustom1()
						}, 500);
					}
				}
			},
		}
	},
	created() {
		this.getLiftWarnList();//设备告警列表
	},
	mounted() {
		let dom = document.getElementById('lift_box');
		dom.addEventListener('contextmenu', (event)=> {
			event.preventDefault(); // 阻止默认菜单
			const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0700' } });
			window.open(routerUrl.href, "_blank");
		});
		if (this.bimModel == 1) {
			this.getNavigationMap()
		}
	},
	beforeDestroy() {
		if (this.socket) {
			console.log('close scoket');
			this.socket.close();
			this.socket = "";
		}
		window.removeEventListener('click', this.windowClick);
	},
	destroyed() {
		// 销毁监听
		if (this.socket) {
			console.log('close scoket');
			this.socket.close();
			this.socket = "";
		}
		if (this.animationId) {
			cancelAnimationFrame(this.animationId);
		}
		if (this.animationId1) {
			cancelAnimationFrame(this.animationId1);
		}
		bfHelper.clearComponent();
	},
	methods: {
		tableContext(row,column, event){
			event.preventDefault(); // 阻止默认菜单
			const routerUrl = this.$router.resolve({ path: '/equipment/index', query: {code: row.code } });
			window.open(routerUrl.href, "_blank");
		//  this.dialogVisible = true
		// console.log(row)
		},
		//确认告警 - 重新查询告警列表
		doCancelWarn(item) {
			getCancelWarn(item.id).then((res) => {
				// this.getFiredWarnList();
        		item.confirmStatus = 1;
			})
		},
		//恢复告警
		doRecoveryWarn(item) {
		recoveryWarn(item.id).then((res) => {
			item.warnStatus = 2;
		})
		},
		//跳转历史告警列表
		goMoreWarnList() {
			// this.$router.push({ path: '/equipment/warnHistory' });
			const routerUrl = this.$router.resolve({ path: '/equipment/warnHistory', query: { classCode: '0700', area: this.bimModel } });
			window.open(routerUrl.href, "_blank");
		},
		// 报警记录-20221031改版
		getLiftWarnList() {
			getLiftWarnList({
				area: this.bimModel,
				build: this.tower ? this.tower : "",
				floor: this.layer ? this.layer : "",
			}).then((res) => {
				this.listData = res.data.data.warnEquipList;
				this.normalEquipNumber = res.data.data.normalEquipNumber;
				this.warnEquipEquipNumber = res.data.data.warnEquipEquipNumber;
				this.warnEquipWarnNumber = res.data.data.warnEquipWarnNumber;
				for (let i = 0; i < this.listData.length; i++) {
					this.listData[i].showAlert = false;
				}
			});
		},
		showAlarkAlert(item, index) {
			item.showAlert = true;
			this.listData.splice(index, 1, item)
		},
		closeAlarkAlert(item, index) {
			item.showAlert = false;
			this.listData.splice(index, 1, item)
		},
		getLifLists() {
			getLifList(this.bimModel).then(res => {
				if (res.data.code == 200) {
					this.arr = res.data.data;
					this.setLiftColor(this.arr);
					setTimeout(() => {
						if (this.bimModel == 1) {
							this.liftCustom();
						} else {
							this.liftCustom1();
						}
					}, 300);
				}
			})
		},
		getNavigationMap() {
			commonValue.getNavigationMap('water')

		},
		setTowerLift(i, j) {
			this.current = 1; //当前页
			this.total = 0; //总条目数
			this.tower = i;
			// if(j){
			this.layer = j
			// }
			this.getLifLists();
			if (this.bimModel == 1) {
				this.buildMessage = '园区';
				commonValue.getUpdateMap("water", i, j);
				// bfHelper.mapUpdate(
				// 	require("../../../public/img/monitoring/mapviewer/total.png"),
				// 	bfHelper.mapViewerCamera[0][0].mapAnchors,
				// 	bfHelper.mapViewerCamera[0][0].modelAnchors
				// );

			}
		},
		liftCustom1() { //塔台电梯
			// 取消电梯的半透明
			bfHelper.restoreComponentsOpacityByObjectData([{
				"fileId": bfHelper.ttTowerFileId[0],
				"family": "升降电梯"
			}, {
				"fileId": bfHelper.ttTowerFileId[0],
				"family": "升降电梯",
				'familyType': "DT 1000*1100*2500"
			}])
			// 指定构件转化为外部构件
			bfHelper.transitionExternalComponent('塔楼南电梯', bfHelper.ttTowerFileId[0] + ".1256693");
			bfHelper.transitionExternalComponent('塔楼北电梯', bfHelper.ttTowerFileId[0] + ".1256694");
			getLifList(this.bimModel).then(res => {
				this.arr = res.data.data;
				this.arr = res.data.data;
				// console.log(this.arr)
				for (let i = 0; i < this.arr.length; i++) {
					let name = '';
					if (this.arr[i].code == '20700000001') {
						name = '塔楼南电梯';
						this.arr[i].height = this.height * (this.arr[i].floor * 1 - 1);
					} else if (this.arr[i].code == '20700000002') {
						name = '塔楼北电梯';
						this.arr[i].height = this.height * (this.arr[i].floor * 1 - 1);
					}
					this.arr[i].floor = this.arr[i].floor ? this.arr[i].floor : '1'
					bfHelper.setExternalComponentZ(name, this.height * (this.arr[i].floor * 1 -
						1));
				}
				// this.animate1()
				if (!this.socket) {
					this.init();
				}
				for (let j = 0; j < this.arr.length; j++) {
					let content = this.getContent(j, this.arr[j]);

					let objectId = bfHelper.getExternalComponentId(this.arr[j].name)
					bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
					bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null,
						content, objectId)

				}

				window.addEventListener('click', this.windowClick)
			})
		},
		liftCustom() { //业务区电梯
			// 取消电梯的半透明
			bfHelper.restoreComponentsOpacityByObjectData([{
				"fileId": bfHelper.ywqTowerFileId[0],
				"family": "升降电梯(1)"
			}, {
				"fileId": bfHelper.ywqTowerFileId[1],
				"family": "升降电梯",
				'familyType': "DT 2400*3000*2500"
			}, {
				"fileId": bfHelper.ywqTowerFileId[3],
				"family": "升降电梯(1)"
			}, {
				"fileId": bfHelper.ywqTowerFileId[5],
				"family": "升降电梯(1)"
			}])

			// 指定构件转化为外部构件
			bfHelper.transitionExternalComponent('升降电梯(1)', bfHelper.ywqTowerFileId[0] + ".2772097");
			bfHelper.transitionExternalComponent('升降电梯(2)', bfHelper.ywqTowerFileId[1] + ".1066785");
			bfHelper.transitionExternalComponent('升降电梯(4)', bfHelper.ywqTowerFileId[3] + ".2306329");
			bfHelper.transitionExternalComponent('升降电梯(6)', bfHelper.ywqTowerFileId[5] + ".1884001");

			this.arr.reverse()
			for (let i = 0; i < this.arr.length; i++) {
				this.arr[i].height = this.height * (this.arr[i].floor * 1 - 1);
				this.arr[i].floor = this.arr[i].floor ? this.arr[i].floor : '1'
				bfHelper.setExternalComponentZ(this.arr[i].modelId, this.height * (this.arr[i].floor * 1 - 1));
			}
			// console.log(this.arr)
			// this.animate();
			if (!this.socket) {
				this.init()
			}

			for (let j = 0; j < this.labels.length; j++) {
				let content = this.getContent(j, this.arr[j]);

				let objectId = bfHelper.getExternalComponentId(this.arr[j].modelId)
				bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
				bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null,
					content, objectId)

			}
			window.addEventListener('click', this.windowClick)
		},
		setLiftColor(arr) {
			let arrs = []
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].status != 90000) {
					arrs.push(arr[i])
				}
			}

			let offList = [];
			let bjList = [];
			let normalList = []
			for (let i = 0; i < arr.length; i++) {
				let objectId = bfHelper.getExternalComponentId(arr[i].modelId)
				if (arr[i].status == 90000) {
					normalList.push(objectId)
				} else if (arr[i].status == 90001) {
					offList.push(objectId)
				} else {
					bjList.push(objectId)
				}

			}
			bfHelper.restoreColor(normalList)
			bfHelper.setFlicker(bjList, '#ff0000', 100);
			bfHelper.cancelFlicker(normalList);
			bfHelper.setColor('#a5bbe5', offList);
		},
		init: function () {
			if (typeof (WebSocket) === "undefined") {
				alert("您的浏览器不支持socket");
			} else {
				this.socket = new WebSocket(this.path);
				// 监听socket连接
				this.socket.onopen = this.open;
				// 监听socket错误信息
				this.socket.onerror = this.error;
				// 监听socket消息
				this.socket.onmessage = this.getMessage;
			}
		},
		windowClick(e) {
			if (e.target.id.indexOf('lift') > -1) {
				this.arr.map((item, index) => {
					document.getElementById('lift-block' + index).style.display = 'none';
				})
				let id = 'lift-block' + e.target.id.replace('lift-name', '');
				document.getElementById(id).style.display = 'block';
			}
			else {
				this.arr.map((item, index) => {
					if (document.getElementById('lift-block' + index)) {
						document.getElementById('lift-block' + index).style.display = 'none';
					}
				})
			}
		},
		open: function () {
			console.log("socket连接成功")
		},
		error: function () {
			console.log("连接错误");
			// setTimeout(() => {
			// 	console.log('ws重连');
			// 	this.init();
			// },10000);
		},
		getMessage(msg) {
			let obj = JSON.parse(msg.data)
			// obj.createTime = dateFormat(new Date(obj.createTime), 'yyyy-MM-dd hh:mm');
			// obj.tendingTime = dateFormat(new Date(obj.tendingTime), 'yyyy-MM-dd hh:mm');
			// if(obj.status != 90000){
			let idx = this.arr.findIndex(item => { return item.id == obj.id });
			if (idx > -1) {
				// this.arr[idx].modelId = obj.modelId;
				// this.arr[idx].status = obj.status;
				// this.arr[idx].createTime = obj.createTime;
				// this.arr[idx].tendingTime = obj.tendingTime;
				// this.arr[idx].factory = obj.factory;
				// this.arr[idx].floor = obj.floor;
				// this.arr[idx].statusMsg = obj.statusMsg;
				this.arr[idx].direction = obj.direction;

				let _obj = JSON.parse(JSON.stringify(this.arr[idx]));
				_obj.floor = obj.floor;

				this.setLiftColor(this.arr)
				if (this.bimModel == 1) {
					let content = this.getContent(idx, _obj);
					let objectId = bfHelper.getExternalComponentId(obj.modelId);

					// console.log(obj.modelId, obj.floor, this.height * ((obj.floor * 1) - (this.arr[idx].floor * 1)))
					if (this.arr[idx].floor != obj.floor) {
						bfHelper.setExternalComponentZ(obj.modelId, this.height * ((obj.floor * 1) - (this.arr[idx].floor * 1)));
					}
					bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
					bfHelper.clearDrawableContainerById(objectId);
					bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null,
						content, objectId);
					setTimeout(() => {
						this.arr[idx].floor = obj.floor;
					}, 150);
				} else {
					let content = this.getContent(idx, _obj);

					if (this.arr[idx].floor != obj.floor) {
						bfHelper.setExternalComponentZ(obj.modelId, this.height * ((obj.floor * 1) - (this.arr[idx].floor * 1)));
					}
					bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
					bfHelper.clearDrawableContainerById(objectId);
					bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null,
						content, objectId);
					setTimeout(() => {
						this.arr[idx].floor = obj.floor;
					}, 150);
				}
			}
			// }

		},
		//动态标签
		getContent(idx, obj) {
			let content;
			if (this.bimModel == 1) {
				if (obj.location == '1号楼' || obj.location == '2号楼') {
					content =
						`<div class="leadTips" style="transform: translateY(-72px);">
										<div style="display: flex;width:max-content">
											<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-reverse.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-reverse.png' : '../../../public/img/monitoring/electricity/customTag3-reverse.png')}" style="width:87px;height:53px;margin-left:-87px"/>
											<div style="margin-top: -41px;margin-left:-270px">
												<div id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag4.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-1reverse.png' : '../../../public/img/monitoring/electricity/customTag3-1.png')}');">
													<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;cursor:pointer" id="lift-name${idx}">${obj.name}</span>
												</div>	
												<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute;
													left:-260px;top:15px;padding:10px;display:none;z-index:999">
													<div style="display:flex;justify-content: space-between;">
														<span style="font-size:13px;color:silver">生产厂家：</span>
														<span style="font-size:14px;color:white">${obj.factory}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">投入时间：</span>
														<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">设备状态：</span>
														<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == 90001 ? '离线' : obj.statusMsg}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">所在楼层：</span>
														<span style="font-size:14px;color:white">${obj.floor}F</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保时间：</span>
														<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保人：</span>
														<span style="font-size:14px;color:white">${obj.tendingUser}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保电话：</span>
														<span style="font-size:14px;color:white">${obj.tendingPhone}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">运行方向：</span>
														<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" 
															style="width:50px;height:50px;"/>
													</div>
												</div>
											</div>
										</div>	
									</div>`
				} else {
					content =
						`<div class="leadTips" style="transform: translateY(-72px);">
										<div style="display: flex;width:max-content">
											<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2.png' : '../../../public/img/monitoring/electricity/customTag3.png')}" style="width:87px;height:53px;"/>
											<div style="margin-top: -42px;">
												<div id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-1.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-1.png' : '../../../public/img/monitoring/electricity/customTag3-1.png')}');">
													<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;cursor:pointer" id="lift-name${idx}">${obj.name}</span>
												</div>	
												<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute;
												left:90px;top:15px;padding:10px;display:none;z-index:999">
													<div style="display:flex;justify-content: space-between;">
														<span style="font-size:13px;color:silver">生产厂家：</span>
														<span style="font-size:14px;color:white">${obj.factory}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">投入时间：</span>
														<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">设备状态：</span>
														<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == '90001' ? '离线' : obj.statusMsg}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">所在楼层：</span>
														<span style="font-size:14px;color:white">${obj.floor}F</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保时间：</span>
														<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保人：</span>
														<span style="font-size:14px;color:white">${obj.tendingUser}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保电话：</span>
														<span style="font-size:14px;color:white">${obj.tendingPhone}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">运行方向：</span>
														<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" 
														style="width:50px;height:50px;"/>
													</div>
												</div>
											</div>
										</div>	
									</div>`
				}
			} else {
				if (this.arr[idx].location == '塔楼南侧') {
					content =
						`<div class="leadTips" style="transform: translateY(-72px);">
										<div style="display: flex;width:max-content">
											<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-reverse.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-reverse.png' : '../../../public/img/monitoring/electricity/customTag3-reverse.png')}" style="width:87px;height:53px;margin-left:-87px"/>
											<div style="margin-top: -41px;margin-left:-270px">
												<div id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag4.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-1reverse.png' : '../../../public/img/monitoring/electricity/customTag3-1.png')}');">
													<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;cursor:pointer" id="lift-name${idx}">${obj.name}</span>
												</div>	
												<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute;
													left:-260px;top:15px;padding:10px;display:none;z-index:999">
													<div style="display:flex;justify-content: space-between;">
														<span style="font-size:13px;color:silver">生产厂家：</span>
														<span style="font-size:14px;color:white">${obj.factory}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">投入时间：</span>
														<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">设备状态：</span>
														<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == 90001 ? '离线' : obj.statusMsg}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">所在楼层：</span>
														<span style="font-size:14px;color:white">${obj.floor}F</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保时间：</span>
														<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保人：</span>
														<span style="font-size:14px;color:white">${obj.tendingUser}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保电话：</span>
														<span style="font-size:14px;color:white">${obj.tendingPhone}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">运行方向：</span>
														<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" 
															style="width:50px;height:50px;"/>
													</div>
												</div>
											</div>
										</div>	
									</div>`
				} else {
					content =
						`<div class="leadTips" style="transform: translateY(-72px);">
										<div style="display: flex;width:max-content">
											<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2.png' : '../../../public/img/monitoring/electricity/customTag3.png')}" style="width:87px;height:53px;"/>
											<div style="margin-top: -42px;">
												<div id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-1.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-1.png' : '../../../public/img/monitoring/electricity/customTag3-1.png')}');">
													<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;cursor:pointer" id="lift-name${idx}">${obj.name}</span>
												</div>	
												<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute;
												left:90px;top:15px;padding:10px;display:none;z-index:999">
													<div style="display:flex;justify-content: space-between;">
														<span style="font-size:13px;color:silver">生产厂家：</span>
														<span style="font-size:14px;color:white">${obj.factory}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">投入时间：</span>
														<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">设备状态：</span>
														<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == '90001' ? '离线' : obj.statusMsg}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">所在楼层：</span>
														<span style="font-size:14px;color:white">${obj.floor}F</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保时间：</span>
														<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保人：</span>
														<span style="font-size:14px;color:white">${obj.tendingUser}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">维保电话：</span>
														<span style="font-size:14px;color:white">${obj.tendingPhone}</span>
													</div>
													<div style="display:flex;justify-content: space-between;margin-top:5px">
														<span style="font-size:13px;color:silver">运行方向：</span>
														<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" 
														style="width:50px;height:50px;"/>
													</div>
												</div>
											</div>
										</div>	
									</div>`
				}
			}
			return content;
		},
		// 计算电梯所在楼层高度
		calcHeight(liftObj) {
			return this.height * (liftObj.floor * 1 - 1);
		},
		send: function () {
			this.socket.send()
		},
		close: function () {
			console.log("socket已经关闭")
		},
		animate() {
			this.animationId = requestAnimationFrame(this.animate);
			for (let i = 0; i < this.arr.length; i++) {
				// console.log(this.arr[i].status,this.arr[i].direction)
				if (this.arr[i].status == 90000 && this.arr[i].direction != "停止") {
					// console.log(i)
					let name = '';
					// console.log(this.arr[i].code)
					if (this.arr[i].code == '10700000001') {
						name = '升降电梯(1)';
						this.playFun(i, name)
					} else if (this.arr[i].code == '10700000002') {
						name = '升降电梯(2)';
						this.playFun(i, name)
					} else if (this.arr[i].code == '10700000003') {
						name = '升降电梯(4)';
						this.playFun(i, name)
					} else if (this.arr[i].code == '10700000004') {
						name = '升降电梯(6)';
						this.playFun(i, name)
					}
				}
			}
		},
		animate1() {
			this.animationId1 = requestAnimationFrame(this.animate1);

			for (let i = 0; i < this.arr.length; i++) {
				// console.log(this.arr[i].status,this.arr[i].direction)
				if (this.arr[i].status == 90000 && this.arr[i].direction != "停止") {
					let name = '';
					if (this.arr[i].code == '20700000001') {
						name = '塔楼南电梯';
						this.playFun(i, name)
					} else if (this.arr[i].code == '20700000002') {
						name = '塔楼北电梯';
						this.playFun(i, name)
					}
				}
			}
		},
		playFun(i, name) {
			// console.log('jjjjjj')
			// console.log(i,name)
			if (this.arr[i].direction == '向上' && this.arr[i].height <= this.height * this.arr[i].floor) {
				// console.log(1111111)
				this.arr[i].height += this.offsetZ;
				bfHelper.setExternalComponentZ(name, this.offsetZ);
			}
			if (this.arr[i].direction == '向上' && this.arr[i].height >= this.height * this.arr[i].floor) {
				this.arr[i].direction = '停止';
				// console.log(2222222)
				this.arr[i].floor = this.arr[i].floor * 1 + 1;
				cancelAnimationFrame(this.animationId);
				console.log('向上停止', this.arr[i].floor);
			}
			if (this.arr[i].direction == '向下' && this.arr[i].height >= this.height * (this.arr[i].floor * 1 - 2)) {
				this.arr[i].height -= this.offsetZ;
				bfHelper.setExternalComponentZ(name, -this.offsetZ);
			}
			if (this.arr[i].direction == '向下' && this.arr[i].height <= this.height * (this.arr[i].floor * 1 - 2)) {
				this.arr[i].direction = '停止';
				// console.log(4444444)
				this.arr[i].floor = this.arr[i].floor * 1 - 1;
				cancelAnimationFrame(this.animationId);
				console.log('向下停止', this.arr[i].floor);
			}
			let objectId = bfHelper.getExternalComponentId(this.arr[i].modelId);
			bfHelper.clearDrawableContainerById(objectId);
			bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null,
				this.getContent(i, this.arr[i]), objectId);
		},
	}
}
</script>

<style scoped lang="scss">
// 设备概况
.box2 {
	z-index: 99;
	background: url(../../../public/img/monitoring/electricity/genbag.png) no-repeat;
	background-size: 100% 100%;
	width: 402px;
	height: 450px;
	position: absolute;
	top: 150px;
	right: 40px;

	&.tataigen {
		background: url(../../../public/img/monitoring/electricity/genbac.png);
		background-size: 100% 100%;
	}

	.title {
		margin: 17px 0 0 17px;
		font-size: 15px;
		font-weight: bold;
		color: #ffffff;

		img {
			margin-right: 5px;
			width: 20px;
			height: 19px;
		}
	}

	.state {
		margin-top: 30px;
		font-size: 28px;
		line-height: 17px;
		color: #ffffff;

		.zc {
			// padding-right: 36px;
			box-sizing: border-box;
			// justify-content: flex-end;
			background: url(../../../public/img/monitoring/electricity/normal.png) no-repeat;
			background-size: cover;
			width: 176px;
			height: 78px;
		}

		.lx {
			// padding-right: 36px;
			box-sizing: border-box;
			// justify-content: flex-end;
			background: url(../../../public/img/monitoring/electricity/guzhangbg.png) no-repeat;
			background-size: cover;
			width: 176px;
			height: 78px;
		}
	}

	.stateName {
		margin: 5px 0 20px;
		color: #2cd52c;
		font-size: 14px;
		display: flex;
		justify-content: space-around;

		.lx {
			// padding-left: 146px;
			// color: red;
			color: #ec9b28;
		}
	}

	.tab_box {
		width: 80%;
		display: flex;
		margin-top: 25px;
		margin-bottom: 30px;
		margin-left: 23px;
		color: #fff;

		.tab_one {
			cursor: pointer;
		}

		.tab_two {
			margin-left: 20px;
		}

		/deep/ .item .is-dot {
			background: red;
			border: none;
		}

		// .circle{
		// 	display: inline-block;
		// 	width: 8px;
		// 	height: 8px;
		// 	background: red;
		// 	border-radius: 50%;
		// 	position: relative;
		// 	top: -8px;
		// 	left: -3px;
		// }
	}

	.tit {
		margin: 0 auto 6px;
		width: 345px;
		height: 34px;
		line-height: 34px;
		background-color: #07A7FF;
		font-size: 14px;
		color: white;
		justify-content: space-around;

		&.tataitit {
			background: rgb(34, 110, 196);

			span {
				color: #1851ab;
			}
		}

		p {
			width: 33.3%;
			text-align: center;
		}

		span {
			color: silver;
		}

	}

	.noBjxx {
		color: white;
		font-size: 1rem;
		margin: 2.5rem 0 0;
		text-align: center;
	}

	.warp {
		height: 120px;
		width: 345px;
		margin: auto;
		overflow-y: auto;

		.item {
			height: 40px;
			font-size: 14px;
			color: #9d9d9d;

			.alark-alert {
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(11, 34, 74, .8);
				// display: flex;
				justify-content: space-around;
				align-items: center;
				color: #07e6ed;

				p {
					display: flex;
					align-items: center;

					img {
						margin-right: 7px;
					}
				}
			}

			.box {
				width: 100%;
				height: 34px;
				background-color: rgba($color: #0d318b, $alpha: 0.6);

				&.tataicon {
					background-color: rgba($color: #1f355c, $alpha: 1);

					span {
						color: #1851ab;
					}
				}

				.left {
					width: 33.3%;
					text-align: center;

					img {
						width: 16px;
						height: auto;
						margin: 0 5px 0 10px;
					}

					.message {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.data {
					width: 33.3%;
					text-align: center;
				}

				.time {
					width: 33.3%;
					text-align: center;
				}
			}
		}

		.item:hover {
			cursor: pointer
		}
	}

	.more {
		justify-content: flex-end;
		font-size: 14px;
		color: #07e6ed;
		margin: 10px 27px 0 0;
	}
}

// 设备列表
.tab {
	z-index: 99;
	position: absolute;
	right: 39px;
	bottom: 41px;
	width: 402px;
	height: 342px;
	background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat;
	background-size: cover;

	&.tataigen {
		background: url(../../../public/img/monitoring/electricity/genbac.png) no-repeat;
		background-size: 100% 100%;
	}

	.title {
		margin: 1rem 0 2rem 1.25rem;
		color: #fff;
		font-size: 15px;
		font-weight: bold;

		img {
			display: block;
			width: 16px;
			margin-right: 10px;
		}
	}

	.tabBox {
		border: 1px solid #07A7FF;
		width: 21.563rem;
		margin: 1rem auto 0;

		.mon_box {
			width: 100%;
		}

		/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
			background-color: transparent !important;
		}

		/deep/ .el-table__header-wrapper .has-gutter th {
			border-bottom: none;
			padding: 0;
			text-align: center;
		}

		/deep/ .el-table__header-wrapper .has-gutter th .cell {
			line-height: 31px;
			padding: 0;
			background-color: #07a7ff;
			color: white;
		}

		/deep/ .tataitab .el-table__header-wrapper .has-gutter th .cell {
			background: rgb(33, 110, 196);
		}

		/deep/ .tataitab .el-table__header-wrapper .has-gutter th:nth-of-type(even) .cell {
			color: rgb(31, 91, 180);
		}

		/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
			color: white;
			background-color: rgba($color: #1E419D, $alpha: 1);
		}

		/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) {
			background-color: rgba($color: #0D318B, $alpha: 1);
			color: white;
		}

		/deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
			color: white;
			background-color: rgba($color: #384c6f, $alpha: 1);
		}

		/deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) {
			background-color: rgba($color: #1f355c, $alpha: 1);
			color: white;
		}

		/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td {
			border-bottom: none;
			padding: 0;
			text-align: center;
		}

		/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td .cell {
			display: flex;
			line-height: 36px;
			align-content: center;
			justify-content: center;
		}

		/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__empty-block {
			background-color: #3656AE;
			height: 252px !important;
		}

		/deep/ .el-table::before {
			background-color: transparent
		}


	}

	// 分页
	.pagination {
		position: absolute;
		right: 15px;
		bottom: 8px;
	}

	.pagination .el-pagination.is-background {
		display: flex;
		justify-content: flex-end;
	}

	/deep/ .el-pagination.is-background .btn-next,
	/deep/ .el-pagination.is-background .btn-prev,
	/deep/ .el-pagination.is-background .el-pager li {
		min-width: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
	}

	/deep/ .el-pagination__total {
		height: 20px;
		line-height: 20px;
		color: #07e6ed;
	}
}

.lift-block {
	position: relative;
	width: 300px;

	.lift-block-top {
		width: 300px;
		height: 100px;
		background-size: 100% 100%;
	}

	.lift-block-top1 {
		background-image: url(../../../public/img/monitoring/electricity/liftbg1.png)
	}

	.lift-block-top2 {
		background-image: url(../../../public/img/monitoring/electricity/liftbg2.png)
	}


}
</style>
<style scoped lang="scss">
/deep/.bf-drawable-context .bf-drawable-text:nth-of-type(3) {
	z-index: 2000 !important;
}
</style>