airConditionerWebManager/src/views/serveAC/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="4" class="nav-class" v-loading="navLoading">
				<div class="nav-box">
					<div class="item-school" v-for="(item0, index0) in navData" :key="index0">
						<div class="school" @click="school_toggle(item0.id, item0.label)">
							<div>{{item0.label}}</div>
							<i v-if="item0.isShow" class="el-icon-arrow-down"></i>
							<i v-else class="el-icon-arrow-right"></i>
						</div>
						<div class="item-loudong" v-for="(item1, index1) in item0.children" :key="index1" :style="{display: item0.isShow ? '' : 'none'}">
							<div class="loudong" @click="loudong_toggle(item1.id + '|' + item0.id, item1.label + '|'+ item0.label)">
								<div class="louidong_text" :title="item1.label">{{item1.label}}</div>
								<i v-if="item1.isShow" class="el-icon-arrow-down"></i>
								<i v-else class="el-icon-arrow-right"></i>
							</div>
							<div class="item-louceng" v-for="(item2, index2) in item1.children" :key="index2" :style="{display: item1.isShow ? '' : 'none'}">
								<div :id="`louceng${index0}${index1}${index2}`" class="louceng" :class="louceng_click_id == item2.id ? 'louceng-clicked' : '' "
									@click="louceng_click($event, item2.id + '|' + item1.id + '|' + item0.id, item2.label + '|' + item1.label + '|'+ item0.label, item2.rooms)">
									{{item2.label}}
								</div>
							</div>
							<div class="loudong-add-louceng" :style="{display: item1.isShow ? '' : 'none'}"
								@click="add_louceng(item1.id + '|' + item0.id, item1.label + '|'+ item0.label)">
								<i class="el-icon-circle-plus-outline"></i>
								<div class="loudong-add-louceng-txt">添加楼层</div>
							</div>
						</div>
						<div class="add-loudong" @click="add_loudong(item0.id, item0.label)" :style="{display: item0.isShow ? '' : 'none'}">
							<i class="el-icon-circle-plus-outline"></i>
							<div class="add-loudong-txt">添加楼栋</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="20">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">{{currentData.title_any_where}} 空调管理</div>
							<div class="title-detail">房间：{{room_number}}间</div>
							<div class="title-detail">设备：{{device_number}}台</div>
							<div class="title-detail">离线：{{offline_device_number}}台</div>
							<div class="title-detail">关机：{{shutdown_device_number}}台</div>
							<div class="title-detail">已开：{{open_number}}台</div>
							<div class="title-detail">预警：{{warning_number}}台</div>
						</div>
						<div class="title-right">
							<el-button type="primary" @click="add_room">新增房间</el-button>
						</div>
					</div>
					<div class="cell-body" v-loading="listLoading">
						<div class="cell-body-top-btns">
							<el-button :class="btnActive == 'all' ? 'btn-active':'btn-no-active'" type="primary" size="medium" round
								@click="top_btn_click('all')">全部</el-button>
							<el-button :class="btnActive == 'powerOn' ? 'btn-active':'btn-no-active'" type="primary" size="medium" round
								@click="top_btn_click('powerOn')">开机</el-button>
							<el-button :class="btnActive == 'powerOff' ? 'btn-active':'btn-no-active'" type="primary" size="medium" round
								@click="top_btn_click('powerOff')">关机</el-button>
							<el-button :class="btnActive == 'abnormal' ? 'btn-active':'btn-no-active'" type="primary" size="medium" round
								@click="top_btn_click('abnormal')">离线</el-button>
						</div>
						<el-row>
							<el-col :span="12">
								<div class="panel-left" :style="{display: currentData.rooms[0].room == '' ? 'none' : ''}">
									<div class="panel-header">
										<div class="panel-title-caption">
											<svg-icon icon-class="panel-home" class="panel-title-icon" />
											<div class="panel-title">{{currentData.rooms[0].room}}</div>
										</div>
										<div class="panel-title-btns">
											<el-button class="panel-title-btn" type="text" icon="el-icon-edit-outline"
												@click="operate_modify_room(currentData.rooms[0].room)">编辑</el-button>
											<el-button class="panel-title-btn" type="text" icon="el-icon-delete"
												@click="operate_delete_room(currentData.rooms[0].room)">删除
											</el-button>
										</div>
									</div>
									<div class="panel-body">
										<el-table :data="currentData.rooms[0].tableData" height="170" v-loading="airsLoading[0].loading"
											:element-loading-text="airsLoading[0].text" element-loading-spinner="el-icon-loading" :cell-style="setCellStyle"
											element-loading-background="rgba(0, 0, 0, 0.8)" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center" width="140">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center" width="85">
												<template slot-scope="scope">
													<span>{{ scope.row.device }}</span>
												</template>
											</el-table-column>
											<el-table-column label="使用时长" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.userTime }}</span>
												</template>
											</el-table-column>
											<el-table-column label="告警状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.alarmStatus == '正常'">{{ scope.row.alarmStatus }}</span>
													<span v-else @click="alarm_status_click(scope.$index, scope.row)"
														class="txt-cell-blue">{{ scope.row.alarmStatus }}</span>
												</template>
											</el-table-column>
											<el-table-column label="开关状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.onOffStatus == 0" title="已关机"
														@click="open_close_airs(0, scope.$index, scope.row, 'open')">
														<svg-icon icon-class="power" class="power-icon-off" />
													</span>
													<span v-else class="txt-cell-blue" title="已开机"
														@click="open_close_airs(0, scope.$index, scope.row, 'close')">
														<svg-icon icon-class="power" class="power-icon-on" />
													</span>
												</template>
											</el-table-column>
											<el-table-column label="操作" align="center">
												<template slot-scope="scope">
													<el-button class="btn-cell-blue" size="mini" round
														@click="operate_delete_air(scope.$index, scope.row, currentData.rooms[0].room)">
														删除
													</el-button>
												</template>
											</el-table-column>
										</el-table>
									</div>
									<div class="panel-footer" @click="">
										<i class="el-icon-circle-plus-outline"></i>
										<div class="panel-footer-txt" @click="add_device(currentData.rooms[0].room)">
											添加设备</div>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="panel-right" :style="{display: currentData.rooms[1].room == '' ? 'none' : ''}">
									<div class="panel-header">
										<div class="panel-title-caption">
											<svg-icon icon-class="panel-home" class="panel-title-icon" />
											<div class="panel-title">{{currentData.rooms[1].room}}</div>
										</div>
										<div class="panel-title-btns">
											<el-button class="panel-title-btn" type="text" icon="el-icon-edit-outline"
												@click="operate_modify_room(currentData.rooms[1].room)">编辑</el-button>
											<el-button class="panel-title-btn" type="text" icon="el-icon-delete"
												@click="operate_delete_room(currentData.rooms[1].room)">删除
											</el-button>
										</div>
									</div>
									<div class="panel-body">
										<el-table :data="currentData.rooms[1].tableData" height="170" v-loading="airsLoading[1].loading"
											:element-loading-text="airsLoading[1].text" element-loading-spinner="el-icon-loading"
											element-loading-background="rgba(0, 0, 0, 0.8)" :cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center" width="140">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center" width="85">
												<template slot-scope="scope">
													<span>{{ scope.row.device }}</span>
												</template>
											</el-table-column>
											<el-table-column label="使用时长" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.userTime }}</span>
												</template>
											</el-table-column>
											<el-table-column label="告警状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.alarmStatus == '正常'">{{ scope.row.alarmStatus }}</span>
													<span v-else @click="alarm_status_click(scope.$index, scope.row)"
														class="txt-cell-blue">{{ scope.row.alarmStatus }}</span>
												</template>
											</el-table-column>
											<el-table-column label="开关状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.onOffStatus == 0" title="已关机"
														@click="open_close_airs(1, scope.$index, scope.row, 'open')">
														<svg-icon icon-class="power" class="power-icon-off" />
													</span>
													<span v-else class="txt-cell-blue" title="已开机"
														@click="open_close_airs(1, scope.$index, scope.row, 'close')">
														<svg-icon icon-class="power" class="power-icon-on" />
													</span>
												</template>
											</el-table-column>
											<el-table-column label="操作" align="center">
												<template slot-scope="scope">
													<el-button class="btn-cell-blue" size="mini" round
														@click="operate_delete_air(scope.$index, scope.row, currentData.rooms[1].room)">
														删除
													</el-button>
												</template>
											</el-table-column>
										</el-table>
									</div>
									<div class="panel-footer" @click="">
										<i class="el-icon-circle-plus-outline"></i>
										<div class="panel-footer-txt" @click="add_device(currentData.rooms[1].room)">
											添加设备</div>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<div class="panel-left" :style="{display: currentData.rooms[2].room == '' ? 'none' : ''}">
									<div class="panel-header">
										<div class="panel-title-caption">
											<svg-icon icon-class="panel-home" class="panel-title-icon" />
											<div class="panel-title">{{currentData.rooms[2].room}}</div>
										</div>
										<div class="panel-title-btns">
											<el-button class="panel-title-btn" type="text" icon="el-icon-edit-outline"
												@click="operate_modify_room(currentData.rooms[2].room)">编辑</el-button>
											<el-button class="panel-title-btn" type="text" icon="el-icon-delete"
												@click="operate_delete_room(currentData.rooms[2].room)">删除
											</el-button>
										</div>
									</div>
									<div class="panel-body">
										<el-table :data="currentData.rooms[2].tableData" height="170" v-loading="airsLoading[2].loading"
											:element-loading-text="airsLoading[2].text" element-loading-spinner="el-icon-loading"
											element-loading-background="rgba(0, 0, 0, 0.8)" :cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center" width="140">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center" width="85">
												<template slot-scope="scope">
													<span>{{ scope.row.device }}</span>
												</template>
											</el-table-column>
											<el-table-column label="使用时长" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.userTime }}</span>
												</template>
											</el-table-column>
											<el-table-column label="告警状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.alarmStatus == '正常'">{{ scope.row.alarmStatus }}</span>
													<span v-else @click="alarm_status_click(scope.$index, scope.row)"
														class="txt-cell-blue">{{ scope.row.alarmStatus }}</span>
												</template>
											</el-table-column>
											<el-table-column label="开关状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.onOffStatus == 0" title="已关机"
														@click="open_close_airs(2, scope.$index, scope.row, 'open')">
														<svg-icon icon-class="power" class="power-icon-off" />
													</span>
													<span v-else class="txt-cell-blue" title="已开机"
														@click="open_close_airs(2, scope.$index, scope.row, 'close')">
														<svg-icon icon-class="power" class="power-icon-on" />
													</span>
												</template>
											</el-table-column>
											<el-table-column label="操作" align="center">
												<template slot-scope="scope">
													<el-button class="btn-cell-blue" size="mini" round
														@click="operate_delete_air(scope.$index, scope.row, currentData.rooms[2].room)">
														删除
													</el-button>
												</template>
											</el-table-column>
										</el-table>
									</div>
									<div class="panel-footer" @click="">
										<i class="el-icon-circle-plus-outline"></i>
										<div class="panel-footer-txt" @click="add_device(currentData.rooms[2].room)">
											添加设备</div>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="panel-right" :style="{display: currentData.rooms[3].room == '' ? 'none' : ''}">
									<div class="panel-header">
										<div class="panel-title-caption">
											<svg-icon icon-class="panel-home" class="panel-title-icon" />
											<div class="panel-title">{{currentData.rooms[3].room}}</div>
										</div>
										<div class="panel-title-btns">
											<el-button class="panel-title-btn" type="text" icon="el-icon-edit-outline"
												@click="operate_modify_room(currentData.rooms[3].room)">编辑</el-button>
											<el-button class="panel-title-btn" type="text" icon="el-icon-delete"
												@click="operate_delete_room(currentData.rooms[3].room)">删除
											</el-button>
										</div>
									</div>
									<div class="panel-body">
										<el-table :data="currentData.rooms[3].tableData" height="170" v-loading="airsLoading[3].loading"
											:element-loading-text="airsLoading[3].text" element-loading-spinner="el-icon-loading"
											element-loading-background="rgba(0, 0, 0, 0.8)" :cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center" width="140">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center" width="85">
												<template slot-scope="scope">
													<span>{{ scope.row.device }}</span>
												</template>
											</el-table-column>
											<el-table-column label="使用时长" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.userTime }}</span>
												</template>
											</el-table-column>
											<el-table-column label="告警状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.alarmStatus == '正常'">{{ scope.row.alarmStatus }}</span>
													<span v-else @click="alarm_status_click(scope.$index, scope.row)"
														class="txt-cell-blue">{{ scope.row.alarmStatus }}</span>
												</template>
											</el-table-column>
											<el-table-column label="开关状态" align="center">
												<template slot-scope="scope">
													<span v-if="scope.row.onOffStatus == 0" title="已关机"
														@click="open_close_airs(3, scope.$index, scope.row, 'open')">
														<svg-icon icon-class="power" class="power-icon-off" />
													</span>
													<span v-else class="txt-cell-blue" title="已开机"
														@click="open_close_airs(3, scope.$index, scope.row, 'close')">
														<svg-icon icon-class="power" class="power-icon-on" />
													</span>
												</template>
											</el-table-column>
											<el-table-column label="操作" align="center">
												<template slot-scope="scope">
													<el-button class="btn-cell-blue" size="mini" round
														@click="operate_delete_air(scope.$index, scope.row, currentData.rooms[3].room)">
														删除
													</el-button>
												</template>
											</el-table-column>
										</el-table>
									</div>
									<div class="panel-footer" @click="">
										<i class="el-icon-circle-plus-outline"></i>
										<div class="panel-footer-txt" @click="add_device(currentData.rooms[3].room)">
											添加设备</div>
									</div>
								</div>
							</el-col>
						</el-row>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange" :hide-on-single-page="hideOnSinglePage"
								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize" layout="prev, pager, next, jumper"
								:total="pagination.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 添加楼栋 -->
		<el-dialog title="添加楼栋" custom-class="el-dialog-add-loudong" :visible.sync="dialog_add_loudong" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialog_close('form_add_loudong')">
			<!-- <el-form :model="form_add_loudong" ref="add_loudong_form" :rules="form_add_loudong_rules"> -->
			<el-form :model="form_add_loudong" ref="add_loudong_form">
				<el-form-item label="校区：" :label-width="formLabelWidth">
					<span>{{form_add_loudong.school}}</span>
				</el-form-item>
				<el-form-item label="楼栋：" :label-width="formLabelWidth" prop="building" :required="true">
					<el-input v-model="form_add_loudong.building" autocomplete="off" placeholder="请输入楼栋名称" ref="ref_loudong" maxlength="15"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_add_loudong = false">取 消</el-button>
				<el-button type="primary" @click="dialog_add_loudong_click">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加楼层 -->
		<el-dialog title="添加楼层" custom-class="el-dialog-add-louceng" :visible.sync="dialog_add_louceng" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialog_close('form_add_louceng')">
			<el-form :model="form_add_louceng" ref="add_louceng_form" :rules="form_add_louceng_rules">
				<el-form-item label="校区：" :label-width="formLabelWidth">
					<div>{{form_add_louceng.school}}</div>
				</el-form-item>
				<el-form-item label="楼栋：" :label-width="formLabelWidth">
					<div>{{form_add_louceng.building}}</div>
				</el-form-item>
				<el-form-item label="楼层：" :label-width="formLabelWidth" prop="floor" :required="true">
					<el-input v-model="form_add_louceng.floor" autocomplete="off" placeholder="请输入楼层号" ref="ref_louceng" maxlength="1"
						@keydown.enter.native="dialog_add_louceng_click"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_add_louceng = false">取 消</el-button>
				<el-button type="primary" @click="dialog_add_louceng_click">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 操作员详情 -->
		<el-dialog title="操作员详情" custom-class="el-dialog-operator_details" :visible.sync="dialog_operator_details"
			@close="dialog_close('form_operator_details')">
			<el-form :model="form_operator_details">
				<el-form-item label="姓　　名：" :label-width="formLabelWidth">
					<div>{{form_operator_details.name}}</div>
				</el-form-item>
				<el-form-item label="联系方式：" :label-width="formLabelWidth">
					<div>{{form_operator_details.contact}}</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 添加房间 -->
		<el-dialog title="新增房间" custom-class="el-dialog-add-room" :visible.sync="dialog_add_room" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialog_close('form_add_room')">
			<el-form :model="form_add_room" ref="add_room_form" :rules="form_add_room_rules">
				<el-form-item label="校区：" :label-width="formLabelWidth">
					<div>{{form_add_room.school}}</div>
				</el-form-item>
				<el-form-item label="楼栋：" :label-width="formLabelWidth">
					<div>{{form_add_room.building}}</div>
				</el-form-item>
				<el-form-item label="楼层：" :label-width="formLabelWidth">
					<div>{{form_add_room.floor}}</div>
				</el-form-item>
				<el-form-item label="房间：" :label-width="formLabelWidth" :required="true" prop="room">
					<el-input v-model="form_add_room.room" autocomplete="off" placeholder="请输入房间名称" ref="ref_add_room" maxlength="10"
						@keydown.enter.native="dialog_add_room_click"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_add_room = false">取 消</el-button>
				<el-button type="primary" @click="dialog_add_room_click">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加空调设备 -->
		<el-dialog :title="currentData.addDevice + ' 添加设备'" custom-class="el-dialog-add-device" :visible.sync="dialog_add_device" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialog_close('form_add_device')">
			<el-form :model="form_add_device" ref="add_device_form" :rules="form_add_device_rules">
				<el-form-item label="当前坐标：" :label-width="formLabelWidth">
					<div>{{form_add_device.school + ' / ' + form_add_device.build + ' / ' + form_add_device.floors}}
					</div>
				</el-form-item>
				<el-form-item label="操作员：" :label-width="formLabelWidth" prop="cao">
					<el-input v-model="cao" autocomplete="off" placeholder="请输入操作员" ref="ref_cao" readonly="" maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="手机号码：" :label-width="formLabelWidth" prop="contact">
					<el-input v-model="contact" autocomplete="off" placeholder="请输入手机号码" ref="ref_contact" maxlength="11" readonly=""></el-input>
				</el-form-item>
				<el-form-item label="设备名称：" :label-width="formLabelWidth" prop="deviceName" :required="true">
					<el-input v-model="form_add_device.deviceName" autocomplete="off" placeholder="请输入设备名称" ref="ref_deviceName" maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="设备IP/ID：" :label-width="formLabelWidth" prop="deviceIp" :required="true">
					<el-input v-model="form_add_device.deviceIp" autocomplete="off" placeholder="请输入设备IP/ID" maxlength="4">
					</el-input>
				</el-form-item>
				<el-form-item label="设备类型：" :label-width="formLabelWidth" prop="checkedDevice" :required="true">
					<el-checkbox-group v-model="form_add_device.checkedDevice" :min="0" :max="1" style="width: 380px;">
						<el-checkbox v-for="(device, index) in form_add_device.devices" :label="device" :key="index">
							{{device}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_add_device = false">取 消</el-button>
				<el-button type="primary" @click="dialog_add_air_click">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑房间 -->
		<el-dialog title="编辑房间" custom-class="el-dialog-modify-room" :visible.sync="dialog_modify_room" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialog_close('form_modify_room')">
			<el-form :model="form_modify_room" ref="modify_room_form" :rules="form_modify_room_rules">
				<el-form-item label="校区：" :label-width="formLabelWidth">
					<div>{{form_modify_room.school}}</div>
				</el-form-item>
				<el-form-item label="楼栋：" :label-width="formLabelWidth">
					<div>{{form_modify_room.building}}</div>
				</el-form-item>
				<el-form-item label="楼层：" :label-width="formLabelWidth">
					<div>{{form_modify_room.floor}}</div>
				</el-form-item>
				<el-form-item label="房间：" :label-width="formLabelWidth" :required="true" prop="room">
					<el-input v-model="form_modify_room.room" autocomplete="off" placeholder="请输入房间号" ref="ref_modi_room" maxlength="10"
						@keydown.enter.native="dialog_modify_room_click(show_modify_room)"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_modify_room = false">取 消</el-button>
				<el-button type="primary" @click="dialog_modify_room_click(show_modify_room)">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 删除房间 -->
		<el-dialog custom-class="el-dialog-delete-room" :visible.sync="dialog_delete_room" :close-on-click-modal="false" :close-on-press-escape="false"
			:show-close="false">
			<div slot="" class="del-air-body">
				<img src="../../icons/serveAC/del_warning.png" alt="">
				<div class="del-air-body-txt">是否确定删除房间【{{ show_delete_room }}】？</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_delete_room = false"> 否 </el-button>
				<el-button type="primary" @click="dialog_delete_rooms_click(show_delete_room)"> 是 </el-button>
			</div>
		</el-dialog>
		<!-- 删除空调 -->
		<el-dialog custom-class="el-dialog-delete-air" :visible.sync="dialog_delete_air" :close-on-click-modal="false" :close-on-press-escape="false"
			:show-close="false">
			<div slot="" class="del-air-body">
				<img src="../../icons/serveAC/del_warning.png" alt="">
				<div class="del-air-body-txt">是否确定刪除IP/ID为【{{delAir.deleteAirIp}}】的空调？</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_delete_air = false"> 否 </el-button>
				<el-button type="primary" @click="dialog_delete_air_click"> 是 </el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getBuildingData,
		addBuild,
		addFloors,
		addRooms,
		addAirs,
		getRoomAirs,
		deleteAirs,
		getRoomsAndAirs,
		getOpeningAndAbnomal,
		updateRooms,
		delRooms,
		startAirs,
		stopAirs,
		selAirsStatus,
		getDevices
	} from '@/api/serveAC';
	export default {
		data() {
			// var checkloudong = (rule, value, callback) => {
			// 	if (!value) {
			// 		return callback(new Error('请输入楼栋名称'));
			// 	}
			// 	setTimeout(() => {
			// 		var reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,10}$/
			// 		if (!reg.test(value)) {
			// 			callback(new Error('必须为2-10个汉字、数字、字母或下划线！'));
			// 		} else {
			// 			callback();
			// 		}
			// 	}, 100);
			// }
			var checklouceng = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入数字楼层号'));
				}
				setTimeout(() => {
					var reg = /^[1-9]{1}$/
					if (!reg.test(value)) {
						callback(new Error('楼层只能输入 1 到 9 的数字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkroom = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入房间号'));
				}

				setTimeout(() => {
					callback();
				}, 100);
				// setTimeout(() => {
				// 	var regH = /[\d]$/g;
				// 	var floor = this.currentData.floor.replace(regH, '');
				// 	var reg = /[1-9]{1}[0-9]{2,3}$/
				// 	if (value.indexOf(floor)) {
				// 		callback(new Error('房间号数字部分，必须以楼层号开头！'));
				// 	} else if (!reg.test(value)) {
				// 		callback(new Error('房间号数字部分，为3-4个数字，非0开头！栋号不需要添加！'));
				// 	} else {
				// 		callback();
				// 	}
				// }, 100);
			};

			// var checkCao = (rule, value, callback) => {
			// 	if (!value) {
			// 		return callback(new Error('请输入操作员'));
			// 	};

			// 	setTimeout(() => {
			// 		var reg = /^[\u4e00-\u9fa5]{2,10}$/
			// 		if (!reg.test(value)) {
			// 			callback(new Error('必须为2-10个汉字！'));
			// 		} else {
			// 			callback();
			// 		}
			// 	}, 100);
			// };

			// var checkcontact = (rule, value, callback) => {
			// 	if (!value) {
			// 		return callback(new Error('请输入手机号码'));
			// 	};

			// 	setTimeout(() => {
			// 		var reg =
			// 			/^((13[0-9])|(14[0|5|6|7|9])|(15[0-3])|(15[5-9])|(16[6|7])|(17[2|3|5|6|7|8])|(18[0-9])|(19[1|8|9]))\d{8}$/
			// 		if (!reg.test(value)) {
			// 			callback(new Error('手机号码输入不规范！'));
			// 		} else {
			// 			callback();
			// 		}
			// 	}, 100);
			// };
			var checkDeviceName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入设备名称'));
				}

				setTimeout(() => {
					var reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,10}$/
					if (!reg.test(value)) {
						callback(new Error('必须为2-10个汉字、数字、字母或下划线！'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkDeviceIp = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入设备IP/ID'));
				}

				setTimeout(() => {
					var reg = /^[0-9]{4}$/
					if (!reg.test(value)) {
						callback(new Error('必须为4位数字！'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkCheckedDevice = (rule, value, callback) => {
				if (!value[0]) {
					return callback(new Error('请选择设备类型'));
				} else {
					callback();
				}
			};
			return {
				hideOnSinglePage: true, // 只有一页时是否隐藏
				cao: this.$store.state.user.user_name, // 操作员
				contact: this.$store.state.user.phone,
				room_number: 0, // 房间数量
				device_number: 0, // 设备数量
				offline_device_number: 0, // 离线数量
				shutdown_device_number: 0, // 关机数量
				open_number: 0, // 已开启
				warning_number: 0, // 预警台数
				search_datatime: '',
				// 添加楼栋
				dialog_add_loudong: false, // 显示 或 隐藏 添加楼栋对话框
				form_add_loudong: { // 添加楼栋数据
					school: '',
					building: ''
				},
				// form_add_loudong_rules: { // 添加楼栋表单验证
				// 	building: [{
				// 		validator: checkloudong
				// 	}]
				// },
				// 添加楼层
				dialog_add_louceng: false,
				form_add_louceng: { // 添加楼层数据
					school: '',
					building: '',
					floor: ''
				},
				form_add_louceng_rules: { // 添加楼层表单验证
					floor: [{
						validator: checklouceng
					}]
				},
				// 新增房间
				dialog_add_room: false,
				form_add_room: { // 新增房间数据
					school: '',
					building: '',
					floor: '',
					room: ''
				},
				form_add_room_rules: { // 添加房间表单验证
					room: [{
						validator: checkroom
					}]
				},
				// 修改房间
				dialog_modify_room: false,
				form_modify_room: { // 修改房间数据
					school: '',
					building: '',
					floor: '',
					room: ''
				},
				form_modify_room_rules: { // 修改房间表单验证
					room: [{
						validator: checkroom
					}]
				},
				// 添加设备
				dialog_add_device: false,
				form_add_device: { // 添加设备数据
					school: '',
					build: '',
					floors: '',
					room: '',
					deviceName: '',
					deviceIp: '',
					checkedDevice: [],
					devices: [],
					duration_use: 0.00, // 使用时长
					is_normal: '1', // 是否正常
					is_on: '0' // 是否开启
				},
				form_add_device_rules: {
					deviceName: [{
						validator: checkDeviceName
					}],
					deviceIp: [{
						validator: checkDeviceIp
					}],
					checkedDevice: [{
						validator: checkCheckedDevice
					}],
					// cao: [{
					// 	validator: checkCao
					// }],
					// contact: [{
					// 	validator: checkcontact
					// }]
				},
				dialog_operator_details: false, // 操作员详情
				form_operator_details: { // 操作员详情数据
					name: '',
					contact: ''
				},
				dialog_delete_room: false, // 删除房间
				show_delete_room: '', // 记录需要删除的房间
				dialog_delete_air: false, // 删除空调
				show_modify_room: '', // 记录需要修改的房间
				btnActive: 'all',
				louceng_click_id: '',
				// 左侧导航数据：校区，楼栋，楼层
				navData: [],
				form: {
					status: '',
					name: '',
					building: '',
					floor: '',
					room: '',
					device: ''
				},
				formLabelWidth: '120px',
				// 保存当前页数据
				currentData: {
					school: '',
					building: '',
					floor: '',
					allRooms: [],
					rooms: [{
						room: '',
						tableData: []
					}, {
						room: '',
						tableData: []
					}, {
						room: '',
						tableData: []
					}, {
						room: '',
						tableData: []
					}],
					addDevice: '',
					title_any_where: '',
					clickElement: ''
				},
				// 分页参数
				pagination: {
					pageSize: 4,
					currentPage: 1,
					total: 0
				},
				delAir: {
					deleteAirIp: '',
					room: ''
				},
				navLoading: false, // 加载
				listLoading: false,
				airsLoading: [{
					loading: false,
					text: ''
				}, {
					loading: false,
					text: ''
				}, {
					loading: false,
					text: ''
				}, {
					loading: false,
					text: ''
				}],
				deviceOptions: []
			}
		},
		created() {
			// 获取表格数据
			this.get_loudong_data()
			// 默认选中第一个房间
			let auto_click = setInterval(() => {
				let louchen_first = document.getElementById("louceng000");
				if (louchen_first !== null) {
					louchen_first.click();
					clearInterval(auto_click);
				}
			}, 200);

			// 空调设备类型
			this.get_Devices();
		},
		mounted() {
			var obj = document.getElementsByClassName("el-pagination__jump")[0];
			if (typeof obj == 'undefined') {
				return;
			} else {
				obj[0].childNodes[0].nodeValue = "跳至";
			}
		},
		methods: {
			/**
			 * 获取所有的空调列表
			 */
			get_Devices() {
				var _this = this;
				// 开始发送请求，获取配置数据
				getDevices().then((res) => {
					// console.log(res.data);
					if (res.code == 200) {
						let resdata = res.data;
						_this.deviceOptions = [];
						for (var i = 0; i < resdata.length; i++) {
							_this.deviceOptions.push(resdata[i].air_config);
						}
						_this.deviceOptions.sort((a, b) => a - b);
						this.form_add_device.devices = _this.deviceOptions;
					} else {
						_this.deviceOptions = [];
						this.$message.warning('没有符合条件的数据！');
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				});
			},
			/**
			 * 开关空调
			 * @param {Object} roomIndex
			 * @param {Object} rowIndex
			 */
			open_close_airs(roomIndex, rowIndex, row, open_close) {
				// console.log(roomIndex, rowIndex, row, open_close);
				// console.log(this.currentData.rooms[roomIndex].tableData[rowIndex]);
				// console.log(row);
				let air_ip = this.currentData.rooms[roomIndex].tableData[rowIndex].ip;
				if (open_close == 'open') {
					this.$set(this.airsLoading[roomIndex], 'loading', true);
					this.$set(this.airsLoading[roomIndex], 'text', row.name + ' ' + row.device + ' 正在【开机】中...');
					let user = this.$store.state.user;
					startAirs({
						admin_name: user.name,
						password: user.pwd,
						air_ip: air_ip
					}).then((res) => {
						// console.log(res);
						if (typeof res.code == 'undefined' || res.code == '') {
							this.$message.error('返回数据格式问题，code未获取到！')
							return
						}

						if (res.code == 200) {
							this.$set(this.currentData.rooms[roomIndex].tableData[rowIndex], 'onOffStatus',
								res.is_on)
							if (res.is_normal == 1) {
								this.$set(this.currentData.rooms[roomIndex].tableData[rowIndex],
									'alarmStatus', '正常')
							} else {
								this.$set(this.currentData.rooms[roomIndex].tableData[rowIndex],
									'alarmStatus', '离线')
							}
							// let _this = this;
							// setTimeout(() => {
							// 	_this.getAirsStatus(roomIndex, rowIndex, air_ip)
							// }, 4000)
						} else {
							this.$message.error(res.message)
						}
						this.$set(this.airsLoading[roomIndex], 'loading', false);
						// 刷新顶部数据
						this.flush_top_data();
					}).catch((err) => {
						// console.log(err);
						// this.$message.error(err.message)
						this.$set(this.airsLoading[roomIndex], 'loading', false);
						// 刷新顶部数据
						this.flush_top_data();
					})
				} else if (open_close == 'close') {
					this.$set(this.airsLoading[roomIndex], 'loading', true);
					this.$set(this.airsLoading[roomIndex], 'text', row.name + ' ' + row.device + ' 正在【关机】中...');
					stopAirs({
						air_ip: air_ip
					}).then((res) => {
						// console.log(res);
						if (typeof res.code == 'undefined' || res.code == '') {
							this.$message.error('返回数据格式问题，code未获取到！')
							return
						}

						if (res.code == 200) {
							this.$set(this.currentData.rooms[roomIndex].tableData[rowIndex], 'onOffStatus',
								res.is_on)
							if (res.is_normal == 1) {
								this.$set(this.currentData.rooms[roomIndex].tableData[rowIndex],
									'alarmStatus', '正常')
							} else {
								this.$set(this.currentData.rooms[roomIndex].tableData[rowIndex],
									'alarmStatus', '离线')
							}
							// let _this = this;
							// setTimeout(() => {
							// 	_this.getAirsStatus(roomIndex, rowIndex, air_ip)
							// }, 4000)
						} else {
							this.$message.error(res.message)
						}
						this.$set(this.airsLoading[roomIndex], 'loading', false);
						// 刷新顶部数据
						this.flush_top_data();
					}).catch((err) => {
						// console.log(err);
						// this.$message.error(err.message)
						this.$set(this.airsLoading[roomIndex], 'loading', false);
						// 刷新顶部数据
						this.flush_top_data();
					})
				}
			},
			/**
			 * 获取空调状态
			 * @param {Object} roomIndex
			 * @param {Object} rowIndex
			 * @param {Object} air_ip
			 */
			getAirsStatus(roomIndex, rowIndex, air_ip) {
				// console.log(roomIndex, rowIndex);
				selAirsStatus({
					air_ip: air_ip
				}).then((res) => {
					console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}

					if (res.code == 200) {
						this.currentData.rooms[roomIndex].tableData[rowIndex].onOffStatus == res.is_on
						this.currentData.rooms[roomIndex].tableData[rowIndex].alarmStatus == res.is_normal
					} else {
						this.$message.error(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 编辑修改房间
			 */
			dialog_modify_room_click(room) {
				this.$refs["modify_room_form"].validate(validate => {
					if (validate) {
						updateRooms({
							school: this.form_modify_room.school,
							build: this.form_modify_room.building,
							floors: this.form_modify_room.floor,
							dom: this.form_modify_room.room,
							old_dom: room
						}).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								// 隐藏删除对话框
								this.dialog_modify_room = false
								// 更新本地变量中的房间
								let tmp = this.navData
								for (var i = 0; i < tmp.length; i++) {
									if (tmp[i].label == this.form_modify_room.school && typeof tmp[i]
										.children !==
										'undefined' && tmp[i].children.length > 0) {
										let tmp1 = tmp[i].children;
										for (var j = 0; j < tmp1.length; j++) {
											if (tmp1[j].label == this.form_modify_room.building &&
												typeof tmp1[j]
												.children !== 'undefined' && tmp1[j].children.length > 0) {
												let tmp2 = tmp1[j].children;
												for (var k = 0; k < tmp2.length; k++) {
													if (tmp2[k].label == this.form_modify_room.floor &&
														typeof tmp2[k]
														.rooms !== 'undefined' && tmp2[k].rooms.length > 0
													) {
														let tmp3 = tmp2[k].rooms;
														for (var p = 0; p < tmp3.length; p++) {
															if (tmp3[p] == room) {
																this.navData[i].children[j].children[k]
																	.rooms[p] =
																	this
																	.form_modify_room.building + '-' + this
																	.form_modify_room.room;
															}
														}
														this.navData[i].children[j].children[k].rooms
															.sort();
													}
												}
											}
										}
									}
								}
								// 自动点击
								this.currentData.clickElement.click()
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				});
			},
			/**
			 * 删除房间
			 * @param {Object} room
			 */
			dialog_delete_rooms_click(room) {
				let data = this.currentData.title_any_where.split('-')
				delRooms({
					school: data[0],
					build: data[1],
					floors: data[2],
					dom: room
				}).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}

					if (res.code == 200) {
						// 隐藏删除对话框
						this.dialog_delete_room = false
						// 更新本地变量中的房间
						let tmp = this.navData
						for (var i = 0; i < tmp.length; i++) {
							if (tmp[i].label == data[0] && typeof tmp[i].children !== 'undefined' && tmp[i]
								.children.length > 0) {

								let tmp1 = tmp[i].children
								for (var j = 0; j < tmp1.length; j++) {
									if (tmp1[j].label == data[1] && typeof tmp1[j].children !==
										'undefined' && tmp1[j].children.length > 0) {

										let tmp2 = tmp1[j].children
										for (var k = 0; k < tmp2.length; k++) {
											if (tmp2[k].label == data[2] && typeof tmp2[k].rooms !==
												'undefined' && tmp2[k].rooms.length > 0) {

												let tmp3 = tmp2[k].rooms
												for (var p = 0; p < tmp3.length; p++) {
													if (tmp3[p] == room) {

														this.navData[i].children[j].children[k].rooms
															.splice(p, 1)
													}
												}
												this.navData[i].children[j].children[k].rooms.sort()
											}
										}
									}
								}
							}
						}
						// 自动点击
						this.currentData.clickElement.click()
					} else {
						this.$message.error(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 获取楼栋信息
			 */
			get_loudong_data() {
				this.navLoading = true;

				getBuildingData().then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}
					// console.log(res.data);
					if (typeof res.data == 'undefined' || res.data == '') {
						this.$message.error('返回数据格式问题，data未获取到！');
						return;
					}
					// 校区
					let school = JSON.parse(res.data);
					// console.log('school', school);
					if (school.length > 0) {
						this.navData = []
						let tmpSchool = []
						for (var i = 0; i < school.length; i++) {
							let nData = []
							let builds = school[i].builds
							for (var j = 0; j < builds.length; j++) {
								let tmpBuilds = {}
								let tmpFloors = []
								let floors = builds[j]['floors']
								for (var k = 0; k < floors.length; k++) {
									let floor = {
										id: floors[k].id,
										label: floors[k].floor,
										rooms: floors[k].rooms
									}
									// 房间排序
									floor.rooms.sort();
									tmpFloors.push(floor);
								}
								// 楼层排序
								tmpFloors.sort((a, b) => {
									return (a.label - b.label)
								})
								tmpBuilds.id = builds[j].id
								tmpBuilds.label = builds[j].building
								tmpBuilds.isShow = true
								tmpBuilds.children = []
								tmpBuilds.children = tmpFloors
								nData.push(tmpBuilds)
							}
							// 楼栋排序
							nData.sort((a, b) => a.label.localeCompare(b.label))
							tmpSchool.push({
								id: school[i].id,
								label: school[i].school,
								isShow: true,
								children: nData
							})
						}
						// 校区排序
						tmpSchool.sort((a, b) => b.label.localeCompare(a.label))
						this.navData = tmpSchool
						// console.log(JSON.stringify(this.navData));
					} else {
						this.navData = []
						this.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				});

				this.navLoading = false;
			},
			/**
			 * 获取房间数据
			 * @param {Object} school
			 * @param {Object} build
			 * @param {Object} floors
			 * @param {Object} room
			 * @param {Object} index
			 */
			get_room_airs_data(school, build, floors, room, index) {
				// console.log(school, build, floors, room, index);
				let param = {
					school: school,
					build: build,
					floors: floors,
					dom: room
				}
				getRoomAirs(param).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}
					if (res.code == 200) {
						let data = res.data
						// 有设备数据
						if (typeof data !== 'undefined' && data !== '') {
							let tmpTableData = []
							for (var i = 0; i < data.length; i++) {
								let room = {}
								let param = this.btnActive
								if (param == 'all') { // 全部
									room = {
										name: data[i].air_name, // 名称
										ip: data[i].air_ip, // 空调ip或id
										building: data[i].build, // 楼栋
										device: data[i].air_config, // 空调配置
										userTime: data[i].duration_use, // 使用时长
										alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
										onOffStatus: data[i].is_on, // 是否开启
										userName: data[i].cao, // 操作员
										contact: '待接口返回，待优化' // 联系方式
									};
								} else if (param == 'powerOn' && data[i].is_on == '1') { // 开机
									room = {
										name: data[i].air_name, // 名称
										ip: data[i].air_ip, // 空调ip或id
										building: data[i].build, // 楼栋
										device: data[i].air_config, // 空调配置
										userTime: data[i].duration_use, // 使用时长
										alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
										onOffStatus: data[i].is_on, // 是否开启
										userName: data[i].cao, // 操作员
										contact: '待接口返回，待优化' // 联系方式
									};
								} else if (param == 'powerOff' && data[i].is_on == '0') { // 关机
									room = {
										name: data[i].air_name, // 名称
										ip: data[i].air_ip, // 空调ip或id
										building: data[i].build, // 楼栋
										device: data[i].air_config, // 空调配置
										userTime: data[i].duration_use, // 使用时长
										alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
										onOffStatus: data[i].is_on, // 是否开启
										userName: data[i].cao, // 操作员
										contact: '待接口返回，待优化' // 联系方式
									};
								} else if (param == 'abnormal' && data[i].is_normal == '0') { // 离线
									room = {
										name: data[i].air_name, // 名称
										ip: data[i].air_ip, // 空调ip或id
										building: data[i].build, // 楼栋
										device: data[i].air_config, // 空调配置
										userTime: data[i].duration_use, // 使用时长
										alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
										onOffStatus: data[i].is_on, // 是否开启
										userName: data[i].cao, // 操作员
										contact: '待接口返回，待优化' // 联系方式
									};
								}
								if (JSON.stringify(room) !== '{}') {
									// 每个房间的设备循环添加
									tmpTableData.push(room)
								}
							}
							if (tmpTableData.length > 0) {
								tmpTableData.sort((a, b) => a.ip.localeCompare(b.ip))
								this.currentData.rooms[index].tableData = tmpTableData
							}
						} else {
							// this.$message.warning(room + ' 没有设备的数据！')
						}
						this.currentData.rooms[index].room = room
					} else {
						this.$message.error('异常！请检查数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 选项的展开与收起，进行切换，递归调用
			 * @param {Object} obj
			 * @param {Object} id
			 */
			toggle_item(obj, id) {
				for (var i = 0; i < obj.length; i++) {
					if (obj[i].id == id) {
						if (obj[i].isShow) {
							obj[i].isShow = false
						} else {
							obj[i].isShow = true
						}
						return
					}

					if (typeof obj[i].children != 'undefined' && obj[i].children.length > 0) {
						this.toggle_item(obj[i].children, id)
					}
				}
			},
			/**
			 * 选项的展开与收起，进行切换
			 * @param {Object} e
			 */
			school_toggle(id, label) {
				// console.log(id);
				// console.log(label);
				// 获取id
				this.toggle_item(this.navData, id)
			},
			/**
			 * 单击楼栋
			 * @param {Object} e
			 */
			loudong_toggle(id, label) {
				this.pagination.pageSize = 4;
				this.pagination.currentPage = 1;
				this.pagination.total = 0;
				let ids = id.split('|')
				let labels = label.split('|')
				// console.log(ids);
				// console.log(labels);
				// 获取id
				this.toggle_item(this.navData, ids[0])
			},
			/**
			 * 单击楼层
			 * @param {Object} e
			 * @param {Object} id
			 * @param {Object} label
			 * @param {Object} rooms
			 */
			louceng_click(e, id, label, rooms) {
				// console.log(e, id, label, rooms);
				this.listLoading = true;
				let ids = id.split('|');
				let labels = label.split('|');
				// console.log(ids);
				// console.log(labels);
				// console.log(rooms);
				// 清空当前页面活动数据
				this.currentData = {
					school: '',
					building: '',
					floor: '',
					allRooms: [],
					rooms: [{
						room: '',
						tableData: []
					}, {
						room: '',
						tableData: []
					}, {
						room: '',
						tableData: []
					}, {
						room: '',
						tableData: []
					}],
					addDevice: '',
					title_any_where: '',
					clickElement: e.target
				};
				// 分页每次单价楼层时，都要初始化
				this.pagination = {
					pageSize: 4,
					currentPage: 1,
					total: 0
				};
				this.offline_device_number = 0; // 离线数量初始化
				this.shutdown_device_number = 0; // 关机数量初始化
				// 点击的楼层id
				this.louceng_click_id = ids[0];
				// 填充数据
				this.currentData.school = labels[2];
				this.currentData.building = labels[1];
				this.currentData.floor = labels[0];
				// 给右侧窗口标题赋值
				this.currentData.title_any_where = this.currentData.school + '-' + this.currentData
					.building + '-' + this.currentData.floor;
				// 获取开机、关机、异常的房间，空的不显示
				this.open_close_abnormal(this.currentData.school, this.currentData.building, this.currentData.floor,
					rooms);
				// 刷新顶部数据
				this.flush_top_data();
				// 延迟取消加载loading
				setTimeout(() => {
					this.listLoading = false;
				}, 500);
			},
			/**
			 * 刷新顶部数据
			 */
			flush_top_data() {
				// 某层房间、空调数
				this.getRoomsAndAirs(this.currentData.school, this.currentData.building, this.currentData.floor);
				// 某层空调开启和异常统计
				this.getOpeningAndAbnomal(this.currentData.school, this.currentData.building, this.currentData.floor);
			},
			/**
			 * 获取开机、关机、异常房间数
			 * @param {Object} school
			 * @param {Object} build
			 * @param {Object} floors
			 * @param {Object} rooms
			 */
			open_close_abnormal(school, build, floors, rooms) {
				// console.log(school, build, floors, rooms);
				let _this = this,
					len = rooms.length;
				for (var i = 0; i < len; i++) {
					// 延时执行
					(function(t, school, build, floors, room, len) { // 注意这里是形参
						setTimeout(function() {
							_this.get_rooms(t, school, build, floors, room, len)
						}, 50 * t); // 还是0.05执行一次，不是累加的
					})(i, school, build, floors, rooms[i], len - 1); // 注意这里是实参，这里把要用的参数传进去
				}
			},
			/**
			 * 获取房间数量
			 * @param {Object} school
			 * @param {Object} build
			 * @param {Object} floors
			 * @param {Object} room
			 */
			get_rooms(index, school, build, floors, room, len) {
				// console.log(index, school, build, floors, room, len);
				if (this.btnActive == 'all') {
					this.currentData.allRooms.push(room);
					if (index == len) {
						// console.log(this.currentData);
						this.pagination_showData()
					}
				} else {
					let param = {
						school: school,
						build: build,
						floors: floors,
						dom: room
					}
					getRoomAirs(param).then((res) => {
						// console.log(res);
						if (typeof res.code == 'undefined' || res.code == '') {
							// this.$message.error('返回数据格式问题，code未获取到！')
							return
						}
						if (res.code == 200) {
							let data = res.data
							// 有设备数据
							if (typeof data !== 'undefined' && data !== '') {
								let tmpTableData = []
								for (var i = 0; i < data.length; i++) {
									let room = {}
									let param = this.btnActive
									if (param == 'all') {
										room = {
											name: data[i].air_name, // 名称
											ip: data[i].air_ip, // 空调ip或id
											building: data[i].build, // 楼栋
											device: data[i].air_config, // 空调配置
											userTime: data[i].duration_use, // 使用时长
											alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
											onOffStatus: data[i].is_on, // 是否开启
											userName: data[i].cao, // 操作员
											contact: '待接口返回，待优化' // 联系方式
										}
									} else if (param == 'powerOn' && data[i].is_on == '1') {
										room = {
											name: data[i].air_name, // 名称
											ip: data[i].air_ip, // 空调ip或id
											building: data[i].build, // 楼栋
											device: data[i].air_config, // 空调配置
											userTime: data[i].duration_use, // 使用时长
											alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
											onOffStatus: data[i].is_on, // 是否开启
											userName: data[i].cao, // 操作员
											contact: '待接口返回，待优化' // 联系方式
										}
									} else if (param == 'powerOff' && data[i].is_on == '0') {
										room = {
											name: data[i].air_name, // 名称
											ip: data[i].air_ip, // 空调ip或id
											building: data[i].build, // 楼栋
											device: data[i].air_config, // 空调配置
											userTime: data[i].duration_use, // 使用时长
											alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
											onOffStatus: data[i].is_on, // 是否开启
											userName: data[i].cao, // 操作员
											contact: '待接口返回，待优化' // 联系方式
										}
									} else if (param == 'abnormal' && data[i].is_normal == '0') {
										room = {
											name: data[i].air_name, // 名称
											ip: data[i].air_ip, // 空调ip或id
											building: data[i].build, // 楼栋
											device: data[i].air_config, // 空调配置
											userTime: data[i].duration_use, // 使用时长
											alarmStatus: data[i].is_normal == 1 ? '正常' : '离线', // 是否正常
											onOffStatus: data[i].is_on, // 是否开启
											userName: data[i].cao, // 操作员
											contact: '待接口返回，待优化' // 联系方式
										}
									}
									if (JSON.stringify(room) !== '{}') {
										// 每个房间的设备循环添加
										tmpTableData.push(room)
									}
								}
								if (tmpTableData.length > 0) {
									this.currentData.allRooms.push(room)
								}
							} else {
								// this.$message.warning(room + ' 没有设备的数据！')
							}
						} else {
							this.$message.error('异常！请检查数据！')
						}

						if (index == len) {
							// console.log(this.currentData);
							this.pagination_showData()
						}
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message)
					});
				}
			},
			/**
			 * 分页显示数据
			 */
			pagination_showData() {
				// 赋值分页数据
				this.pagination.total = this.currentData.allRooms.length;
				// 最后一页删除后已经空了，则显示前一页或第1页
				let size = Math.ceil(this.pagination.total / 4);
				if (size != 0 && this.pagination.currentPage > size) {
					this.pagination.currentPage = size;
				}
				// 进行分页处理
				this.roomDataPagination(this.pagination.currentPage, this.pagination.pageSize, this
					.currentData.allRooms, this.currentData.school, this.currentData.building, this
					.currentData.floor);
			},
			/**
			 * 某层空调开启和异常统计
			 * @param {Object} school
			 * @param {Object} build
			 * @param {Object} floors
			 */
			getOpeningAndAbnomal(school, build, floors) {
				getOpeningAndAbnomal({
					school,
					build,
					floors
				}).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code == 200) {
						// 填充数据
						this.open_number = res.onNum; // 已开启
						this.warning_number = res.stateNum; // 预警台数
						this.offline_device_number = res.offlineNum // 离线数量
						this.shutdown_device_number = res.shutDownNum // 关机数量
					} else {
						this.open_number = 0;
						this.warning_number = 0;
						this.offline_device_number = 0;
						this.shutdown_device_number = 0;
						// this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 某层房间、空调数
			 * @param {Object} school
			 * @param {Object} build
			 * @param {Object} floors
			 */
			getRoomsAndAirs(school, build, floors) {
				getRoomsAndAirs({
					school,
					build,
					floors
				}).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code == 200) {
						// 填充数据
						this.room_number = res.domNum;
						this.device_number = res.airNum;
					} else {
						this.room_number = 0;
						this.device_number = 0;
						// this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 实现分页
			 * @param {Object} currentPage
			 * @param {Object} pageSize
			 * @param {Object} rooms
			 */
			roomDataPagination(currentPage, pageSize, rooms, school, build, floors) {
				// console.log(currentPage, pageSize, rooms, school, build, floors);
				let startRecord = (currentPage - 1) * pageSize
				// 避免最后一页不满4个的情况
				let len = rooms.length
				if (startRecord + pageSize < rooms.length) {
					len = startRecord + pageSize
				}
				let _this = this
				let index = 0
				for (var i = startRecord; i < len; i++) {
					// 延时执行
					(function(t, school, build, floors, room, index) { // 注意这里是形参
						setTimeout(function() {
							_this.get_room_airs_data(school, build, floors, room, index)
						}, 50 * t); // 还是0.05执行一次，不是累加的
					})(i, school, build, floors, rooms[i], index); // 注意这里是实参，这里把要用的参数传进去
					index = index + 1
				}
			},
			/**
			 * 添加房间
			 */
			add_room() {
				if (this.currentData.school == '' || this.currentData.building == '' || this.currentData.floor ==
					'') {
					this.$message.warning('请选择楼层后，再添加房间！')
					return
				}
				// 填充数据
				this.form_add_room.school = this.currentData.school
				this.form_add_room.building = this.currentData.building
				this.form_add_room.floor = this.currentData.floor
				// 显示添加房间
				this.dialog_add_room = true

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.ref_add_room.focus()
					})
				}, 500)
			},
			/**
			 * 添加楼层
			 * @param {Object} e
			 */
			add_louceng(id, label) {
				// let ids = id.split('|')
				let labels = label.split('|')
				// console.log(ids);
				// console.log(labels);
				this.form_add_louceng.school = labels[1]
				this.form_add_louceng.building = labels[0]
				// 显示添加楼层
				this.dialog_add_louceng = true

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.ref_louceng.focus()
					})
				}, 500)
			},
			/**
			 * 告警状态: 异常
			 * @param {Object} index
			 * @param {Object} row
			 */
			alarm_status_click(index, row) {
				// console.log(index, row);
				this.form_operator_details.name = row.userName
				this.form_operator_details.contact = row.contact
				// 显示操作详情
				this.dialog_operator_details = true
			},
			/**
			 * 添加楼栋
			 */
			add_loudong(id, label) {
				// console.log(id);
				// console.log(label);
				this.form_add_loudong.school = label
				// 显示添加楼栋
				this.dialog_add_loudong = true

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.ref_loudong.focus()
					})
				}, 500)
			},
			/**
			 * 添加楼栋对话框
			 */
			dialog_add_loudong_click() {
				this.$refs["add_loudong_form"].validate(validate => {
					if (validate) {
						// console.log(this.form_add_loudong);
						addBuild(this.form_add_loudong).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.get_loudong_data()
								this.$message.success('楼栋添加成功！')
								this.dialog_add_loudong = false
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 添加楼层对话框
			 */
			dialog_add_louceng_click() {
				this.$refs["add_louceng_form"].validate(validate => {
					if (validate) {
						// console.log(this.form_add_louceng);
						addFloors(this.form_add_louceng).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.get_loudong_data()
								this.$message.success('楼层添加成功！')
								this.dialog_add_louceng = false
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 添加房间对话框
			 */
			dialog_add_room_click() {
				this.$refs["add_room_form"].validate(validate => {
					if (validate) {
						// console.log(this.form_add_room);
						addRooms(this.form_add_room).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.get_loudong_data()
								this.$message.success('房间添加成功！')
								this.dialog_add_room = false
								let _this = this
								setTimeout(() => {
									_this.currentData.clickElement.click()
								}, 1000)
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 添加空调对话框
			 */
			dialog_add_air_click() {
				this.$refs["add_device_form"].validate(validate => {
					if (validate) {
						// console.log(this.form_add_device);
						addAirs(this.form_add_device).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.get_loudong_data()
								this.$message.success('空调设备添加成功！')
								this.dialog_add_device = false
								let _this = this
								setTimeout(() => {
									_this.currentData.clickElement.click()
								}, 1000)
								setTimeout(() => {

								}, 300)
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 刪除空调对话框
			 */
			dialog_delete_air_click() {
				let delAir = {
					school: this.currentData.school,
					build: this.currentData.building,
					floors: this.currentData.floor,
					dom: this.delAir.room,
					air_ip: this.delAir.deleteAirIp
				}
				// console.log(delAir);
				deleteAirs(delAir).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}

					if (res.code == 200) {
						this.get_loudong_data()
						this.$message.success('空调 ' + delAir.air_ip + ' 删除成功！')
						this.dialog_delete_air = false
						let _this = this
						setTimeout(() => {
							_this.currentData.clickElement.click()
						}, 1000)
					} else {
						this.$message.error(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 主题部分按钮的单击事件
			 * @param {Object} param
			 */
			top_btn_click(param) {
				// console.log(param);
				this.btnActive = param;
				if (param == 'all') {
					this.currentData.clickElement.click();
				} else if (param == 'powerOn') {
					this.currentData.clickElement.click();
				} else if (param == 'powerOff') {
					this.currentData.clickElement.click();
				} else if (param == 'abnormal') {
					this.currentData.clickElement.click();
				} else {
					this.$message.error('点击按钮出错！');
				}
			},
			/**
			 * 添加空调设备
			 * @param {Object} room
			 */
			add_device(room) {
				// this.$message.success(room);
				this.currentData.addDevice = room;
				// 填充数据
				this.form_add_device.school = this.currentData.school;
				this.form_add_device.build = this.currentData.building;
				this.form_add_device.floors = this.currentData.floor;
				this.form_add_device.room = room;
				// 显示对话框
				this.dialog_add_device = true;

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.ref_deviceName.focus();
					});
				}, 500);
			},
			/**
			 * 操作编辑修改房间
			 * @param {Object} room
			 */
			operate_modify_room(room) {
				let tmpData = this.currentData.title_any_where.split('-');
				this.form_modify_room.school = tmpData[0]
				this.form_modify_room.building = tmpData[1]
				this.form_modify_room.floor = tmpData[2]
				this.form_modify_room.room = room.split('-')[1]
				this.show_modify_room = room
				this.dialog_modify_room = true

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.ref_modi_room.focus()
					})
				}, 500)
			},
			/**
			 * 操作删除房间
			 */
			operate_delete_room(room) {
				this.show_delete_room = room
				this.dialog_delete_room = true
			},
			/**
			 * 操作删除空调
			 * @param {Object} index
			 * @param {Object} row
			 */
			operate_delete_air(index, row, room) {
				// console.log(index, row, row.ip, room);
				this.delAir.deleteAirIp = row.ip
				this.delAir.room = room
				this.dialog_delete_air = true
			},
			/**
			 * 对话框关闭时清理数据
			 */
			dialog_close(param) {
				if (param == 'form_add_loudong') {
					this.form_add_loudong = {
						school: '',
						building: ''
					}
				}

				if (param == 'form_add_louceng') {
					this.form_add_louceng = {
						school: '',
						building: '',
						floor: ''
					}
				}

				if (param == 'form_add_room') {
					this.form_add_room = {
						school: '',
						building: '',
						floor: '',
						room: ''
					}
				}

				if (param == 'form_modify_room') {
					this.form_modify_room = {
						school: '',
						building: '',
						floor: '',
						room: ''
					}
				}

				if (param == 'form_add_device') {
					this.form_add_device = {
						school: '',
						build: '',
						floors: '',
						room: '',
						deviceName: '',
						deviceIp: '',
						checkedDevice: [],
						devices: [],
						duration_use: 0.00, // 使用时长
						is_normal: '0', // 是否正常
						is_on: '0', // 是否开启
					}
				}

				if (param == 'form_operator_details') {
					this.form_operator_details = {
						name: '',
						contact: ''
					}
				}
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.listLoading = true;
				// console.log('当前页:' + val);
				// 清理一下当前数据中的rooms
				this.currentData.rooms = [{
					room: '',
					tableData: []
				}, {
					room: '',
					tableData: []
				}, {
					room: '',
					tableData: []
				}, {
					room: '',
					tableData: []
				}];
				this.pagination.currentPage = val;
				this.roomDataPagination(this.pagination.currentPage, this.pagination.pageSize, this.currentData
					.allRooms,
					this.currentData.school, this.currentData.building, this.currentData.floor);
				this.listLoading = false;
			},
			/**
			 * 设置表格单元格样式
			 */
			setCellStyle() {
				return `
				color: #53575A;
				font-size: 14px;
				font-family: Microsoft YaHei-3970(82674968);
				background-color: #ECF1F8;
				border-bottom: 1px solid #DBE0E7;
				`
			},
			/**
			 * 设置表格头部单元格样式
			 */
			setHeaderSellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 0) {
					return `
						background: #FFFFFF;
						color: #53575A;
						font-size: 14px;
						font-family: Microsoft YaHei-3970(82674968);
						border-radius: 6px 0 0 6px;
					`
				} else if (columnIndex === 6) {
					return `
						background: #FFFFFF;
						color: #53575A;
						font-size: 14px;
						font-family: Microsoft YaHei-3970(82674968);
						border-radius: 0 6px 6px 0;
					`
				} else {
					return `
						background: #FFFFFF;
						color: #53575A;
						font-size: 14px;
						font-family: Microsoft YaHei-3970(82674968);
					`
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.nav-class {
				.nav-box {
					height: 788px;
					overflow-x: hidden;
					overflow-y: scroll;
				}

				.nav-box::-webkit-scrollbar {
					display: none;
				}
			}

			.el-col {

				.nav-box {
					margin: 10px 5px 0 10px;
					padding: 20px 0;
					border-radius: 10px;
					background-color: #FFFFFF;
					font-size: 18px;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.item-school {
						margin-top: 0px;

						.school {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 10px;
							background: #2B4CFE;
							font-family: Microsoft YaHei-3970(82674968);
							font-weight: bold;
							color: #EDF0F5;
							cursor: pointer;
							white-space: nowrap;
						}

						.item-loudong {
							display: flex;
							flex-direction: column;
							padding: 10px 0 0 0;

							.loudong {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 10px 10px 10px 20px;
								background: #EDF0F5;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
								color: #2B4CFE;
								cursor: pointer;

								.louidong_text {
									white-space: nowrap;
									width: 260px;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.item-louceng {
								display: flex;
								flex-direction: column;
								margin-left: 40px;

								.louceng {
									display: flex;
									align-items: center;
									justify-content: space-between;
									padding: 10px;
									height: 30px;
									font-size: 18px;
									cursor: pointer;
								}

								.louceng:hover {
									background-color: #5c8aff;
									color: #FFFFFF;
								}

								.louceng-clicked {
									font-size: 20px;
									font-weight: bold;
									background-color: #3e5afe;
									color: #FFFFFF;
								}
							}

							.loudong-add-louceng {
								display: flex;
								align-items: center;
								padding: 10px 0 10px 30px;
								cursor: pointer;

								.loudong-add-louceng-txt {
									margin-left: 5px;
								}
							}
						}
					}

					.item-school .item-loudong:nth-child(2) {
						padding: 0;
					}

					.add-loudong {
						display: flex;
						align-items: center;
						padding: 10px 0 0 20px;
						cursor: pointer;

						.add-loudong-txt {
							margin-left: 5px;
						}
					}
				}

				.cell {
					margin: 10px 10px 10px 0;
					padding: 20px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20px;
						padding-bottom: 18px;
						border-bottom: 1px solid #CCCCCC;

						.title-left {
							width: 88%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							white-space: nowrap;

							.title {
								font-size: 22px;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
								color: #1A202B;
							}

							.title-detail {
								margin-left: 16px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #1A202B;
							}
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.cell-body-top-btns {
							display: flex;
							align-items: center;
							margin-bottom: 20px;

							.btn-active {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 66px;
								height: 36px;
								border-radius: 18px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								background: #2B4CFE;
								color: #FEFEFE;
								margin-right: 10px;
							}

							.btn-no-active {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 66px;
								height: 36px;
								border: none;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								background: none;
								color: #53575A;
								margin-right: 10px;
							}
						}

						.el-row {
							height: 286px;

							.el-col {

								.panel-left,
								.panel-right {
									background: #ECF1F8;
									border-radius: 10px;
									margin: 0 0 10px 0;
								}

								.panel-left,
								.panel-right {

									.panel-header {
										display: flex;
										justify-content: space-between;
										align-items: center;
										padding: 5px 20px;
										margin-bottom: 10px;
										border-bottom: 1px solid #D9D9D9;

										.panel-title-caption {
											display: flex;
											justify-content: space-between;
											align-items: center;

											.panel-title-icon {
												color: #2B4CFE;
												font-size: 20px;
												margin-right: 8px;
											}

											.panel-title {
												font-size: 20px;
											}
										}

										.panel-title-btns {

											.panel-title-btn {
												margin-left: 20px;
												font-size: 16px;
												font-family: Microsoft YaHei-3970(82674968);
												color: #2B4CFE;
											}
										}
									}

									.panel-body {

										/*将表格每一行的背景色去掉*/
										.el-table,
										.el-table__expanded-cell,
										.el-table tr {
											background-color: transparent;
										}

										::v-deep .el-table td,
										::v-deep .el-table th {
											padding: 6px 0;
										}

										.el-table {
											margin: 0 3px;
											width: calc(100% - 6px);

											.txt-cell-blue,
											.btn-cell-blue {
												color: #2B4CFE;
												border: none;
												font-size: 14px;
												cursor: pointer;
											}

											.btn-cell-blue {
												border: 1px solid #2B4CFE;
											}

											.power-icon-on {
												font-size: 22px;
												cursor: pointer;
												color: #00ff00;
											}

											.power-icon-off {
												font-size: 22px;
												cursor: pointer;
												color: #ff0000;
											}
										}
									}

									.panel-footer {
										display: flex;
										align-items: center;
										padding: 10px 30px 15px 25px;
										color: #2B4CFE;
										cursor: pointer;

										.panel-footer-txt {
											margin-left: 5px;
										}
									}
								}

								.panel-right {
									margin-right: 0px;
									margin-left: 10px;
								}
							}
						}

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 5px;
							padding-right: 100px;

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 400px;
			height: 320px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				background: #E6EBFE;
				border-radius: 10px 10px 0px 0px;
				font-weight: bold;
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item {

					.el-form-item__label,
					.el-form-item__content {
						font-size: 16px;
						font-family: Microsoft YaHei-3970(82674968);
						color: #53575A;
					}

					.el-input__inner {
						width: 180px;
					}
				}

				// 删除对话框的样式
				.del-air-body {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 180px;

					img {
						width: 72px;
					}

					.del-air-body-txt {
						height: 58px;
						line-height: 58px;
						font-size: 18px;
						font-family: Microsoft YaHei-3970(82674968);
						color: #333333;
						white-space: nowrap;
					}
				}
			}

			.el-dialog__footer {
				padding-bottom: 0 !important;
				text-align: center;

				.el-button.el-button--default {
					width: 75px;
					height: 40px;
					border: 1px solid #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #2B4CFE;
				}

				.el-button.el-button--primary {
					width: 75px;
					height: 40px;
					background: #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #FFFFFF;
					margin-left: 60px;
				}
			}
		}
	}
</style>

<style>
	.el-dialog-add-loudong {
		height: 300px !important;
	}

	.el-dialog-add-room {
		height: 420px !important;
	}

	.el-dialog-modify-room {
		height: 420px !important;
	}

	.el-dialog-add-louceng {
		height: 360px !important;
	}

	.el-dialog-operator_details {
		height: 300px !important;
	}

	.el-dialog-delete-room {
		height: fit-content !important;
		width: fit-content !important;
	}

	.el-dialog-add-device {
		height: fit-content !important;
		width: fit-content !important;
	}

	.el-dialog-delete-air {
		height: fit-content !important;
		width: fit-content !important;
	}

	.dialog-footer {
		height: 68px !important;
	}

	.el-dialog-delete-room .el-dialog__header,
	.el-dialog-delete-air .el-dialog__header {
		display: none !important;
	}
</style>