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

<template>
	<div class="yui-tree-box">
		<div class="hui-tree-content" style="padding: 0;">
			<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">{{testCount}}</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="hui-flex-box hui-no-tips" v-if="list.length === 0">
										<empty width="100" description="暂无报警记录"></empty>
									</div>
									<div class="alarm-table hui-flex-box" v-else>
										<div class="alarm-tr" v-for="(item,index) in list" :key="index">
											<span class="tr-100 hui-ellipsis">{{item.deviceName}}</span>
											<span class="tr-flex hui-ellipsis">{{item.info}}</span>
											<span class="tr-130">{{item.date}}</span>
											<span class="tr-50 tr-center">
												<span class="color-red" v-if="!item.state">报警中</span>
												<span class="color-blue" v-else-if="item.state === 1">处理中</span>
												<span class="color-green" v-else-if="item.state === 2">已处理</span>
											</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 hui-no-tips" v-if="liftList.length === 0">
						<empty width="100" description="暂无电梯"></empty>
					</div>
					<div class="lift-box" v-else>
						<div class="lift-prev">
							<div class="icon"></div>
						</div>
						<div class="lift-list">
							<div class="lift-view">
								<div class="lift-item" v-for="(item,index) in liftList">
									<div class="lift-title">{{item.name}}</div>
									<div class="lift-content">
										<div class="lift-bage" :style="'bottom:'+returnHeight(item.data)+'%'">
											<span>{{item.data.nowLevel}}F</span>
											<div class="bage" v-if="!item.state"></div>
											<div class="bage error" v-else></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">{{personCount.averageNum}}</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">{{personCount.inNum}}</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">{{personCount.outNum}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="bim-box">
						<model ref="model" type="lift" fileId="10000892771892"></model>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import model from '@/components/work/common/model'
	import {
		getDeviceCountList,
		getDeviceAlarmList,
		getEnergyDeviceList
	} from '@/httpApi/test'
	export default {
		data() {
			return {
				list: [],
				testCount: 0,
				personCount: {
					averageNum: 0,
					inNum: 0,
					outNum: 0,
				},
				liftList: []
			}
		},
		created() {
			this.init();
		},
		components: {
			model
		},
		methods: {
			init() {
				let postData = {
					type: 16,
					projectId: this.$store.getters.project.id
				}
				getDeviceCountList(postData).then(res => {
					if (res.state) {
						this.testCount = res.data[0] ? res.data[0].offline : 0;
					}
				})
				getDeviceAlarmList(postData).then(res => {
					if (res.state) {
						this.list = res.data;
					}
				})
				getEnergyDeviceList({
					projectId: this.$store.getters.project.id,
					type: 3
				}).then(res => {
					let inNum = 0,
						outNum = 0;
					this.liftList = res.data.map(node => {
						if (node['data']) node['data'] = JSON.parse(node.data);
						if (node['column2']) node['column2'] = JSON.parse(node.column2);
						inNum += parseInt(node.column1);
						outNum += parseInt(node.column3);
						return node;
					})
					if (this.liftList.length == 0) {
						this.personCount = {
							averageNum: 0,
							inNum: 0,
							outNum: 0,
						}
					} else {
						this.personCount = {
							averageNum: Math.floor(inNum / this.liftList.length),
							inNum: inNum,
							outNum: outNum,
						}
					}
					if (this.$refs.model) this.$refs.model.setData(this.liftList);
				})
			},
			returnHeight(data) {
				let all = data.max - data.min;
				return ((data.nowLevel - data.min) / all).toFixed(4) * 90
			}
		}
	}
</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: 100%;
				}
			}

			.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: 60px;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
				padding: 0 2px;

			}

			.lift-content {
				width: 26px;
				flex: 1;
				height: 0;
				background: rgba(39, 54, 83, 0.3);
				border: 1px solid rgba(50, 74, 120, 0.7);
				position: relative;
			}
		}
	}
</style>