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

<template>
	<div class="yui-tree-box">
		<project-item-tree @treeclick="treeclick" iconfontClass="el-icon-place"></project-item-tree>
		<div class="hui-tree-content">
			<div class="basement box-background">
				<div class="basement-box">
					<div class="basement-center">
						<test-alarm ref="testAlarm" :type="30"></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 hui-no-tips" v-if="windList.length === 0">
								<empty width="40" description="暂无风柜机"></empty>
							</div>
							<div class="light-list" v-else>
								<div class="light-item" v-for="(item,index) in windList" :key="index">
									<div class="item-box">
										<div class="light-top">
											<i class="iconfont huifont-fengdiangui"></i>
											<el-switch v-model="item.state" :active-value="1" :inactive-value="2"
												@change="value=>changeDoor(value,item)">
											</el-switch>
										</div>
										<div class="label hui-ellipsis">{{item.name}}</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 hui-no-tips" v-if="windList.length === 0">
								<empty width="100" description="暂无CO传感器"></empty>
							</div>
							<div class="co-list" v-else>
								<basement-item v-for="(item,index) in list" :key="index" :list="item"></basement-item>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import testAlarm from '@/components/work/common/testAlarm'
	import projectItemTree from '@/components/common/projectItemTree'
	import model from '@/components/work/common/model'
	import basementItem from '@/components/work/energy/ventilate/basementItem'
	import {
		getEnergyDeviceList,
		updateEnergyDevice
	} from '@/httpApi/test'
	export default {
		data() {
			return {
				option: null,
				windList: [],
				list: []
			}
		},
		created() {
			this.init();
		},
		components: {
			testAlarm,
			projectItemTree,
			model,
			basementItem
		},
		methods: {
			init(option) {
				let postData = {
					type: 12,
					projectId: this.$store.getters.project.id
				}
				this.option = option;
				if (option) postData = Object.assign(postData, option);
				getEnergyDeviceList(postData).then(res => {
					if (res.state) {
						this.windList = res.data.filter(node => node.column3 === '风机柜');
						let data = res.data.filter(node => node.column3 === 'CO传感器');
						let obj = {},list = [];
						for (let i = 0; i < data.length; i++) {
							if(!obj[data[i].name]){
								obj[data[i].name] = 1;
								list.push({
									name:data[i].name,
									node:[]
								})
							}
							list.find(node=>node.name === data[i].name).node.push(data[i])
						}
						this.list = list;
					}
				})
			},
			treeclick(item) {
				let obj = item.id ? {
					projectItemTargetId: item.id
				} : {}
				if (this.$refs.testAlarm) this.$refs.testAlarm.init(obj);
				this.init(obj);
			},
			changeDoor(value, item) {
				updateEnergyDevice({
					id: item.id,
					state: value
				}).then(res => {
					if (res.state) {
						this.$message.success('操作成功');
						this.init(this.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: 10px;
		}

		.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>