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>{{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">已开启：{{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"
											:cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center" width="130">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center">
												<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"
														@click="open_close_airs(0, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</span>
													<span v-else class="txt-cell-blue"
														@click="open_close_airs(0, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</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"
											:cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center" width="130">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center">
												<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"
														@click="open_close_airs(1, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</span>
													<span v-else class="txt-cell-blue"
														@click="open_close_airs(1, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</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"
											:cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center" width="130">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center">
												<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"
														@click="open_close_airs(2, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</span>
													<span v-else class="txt-cell-blue"
														@click="open_close_airs(2, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</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"
											:cell-style="setCellStyle" :header-cell-style="setHeaderSellStyle">
											<el-table-column label="名称" align="center">
												<template slot-scope="scope">
													<span>{{ scope.row.name }}</span>
												</template>
											</el-table-column>
											<el-table-column label="ID" align="center" width="130">
												<template slot-scope="scope">
													<span>{{ scope.row.ip }}</span>
												</template>
											</el-table-column>
											<el-table-column label="类型" align="center">
												<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"
														@click="open_close_airs(3, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</span>
													<span v-else class="txt-cell-blue"
														@click="open_close_airs(3, scope.$index)">
														<svg-icon icon-class="power" class="power-icon" />
													</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"
								: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-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="10"></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="3"></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_room"
						maxlength="4"></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" :required="true">
					<el-input v-model="form_add_device.cao" autocomplete="off" placeholder="请输入操作员" ref="ref_cao"
						maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="手机号码：" :label-width="formLabelWidth" prop="contact" :required="true">
					<el-input v-model="form_add_device.contact" autocomplete="off" placeholder="请输入手机号码"
						ref="ref_contact" maxlength="11"></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">
						<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_room"
						maxlength="4"></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
	} from '@/api/serveAC'
	const deviceOptions = ['1匹', '1.5匹', '2匹', '3匹', '天花机器（3匹）'];
	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][0-9]?[楼]{1,3}$/
					if (!reg.test(value)) {
						callback(new Error('1到2位数字+楼，不能0打头，如：1楼 或 99楼'));
					} else {
						callback();
					}
				}, 100);
			}
			var checkroom = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入房间名称'));
				}

				setTimeout(() => {
					var regH = /[^\d]/g;
					var floor = this.currentData.floor.replace(regH, '');
					var reg = /^[1-9]+[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 {
				room_number: 0, // 房间数量
				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: deviceOptions,
					duration_use: 0.00, // 使用时长
					is_normal: '1', // 是否正常
					is_on: '0', // 是否开启
					cao: '', // 操作员
					contact: ''
				},
				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
			}
		},
		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);
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			/**
			 * 开关空调
			 * @param {Object} roomIndex
			 * @param {Object} rowIndex
			 */
			open_close_airs(roomIndex, rowIndex) {
				console.log(this.currentData);
				console.log(roomIndex, rowIndex);
			},
			/**
			 * 编辑修改房间
			 */
			dialog_modify_room_click(room) {
				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)
				})
			},
			/**
			 * 删除房间
			 * @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;
					}
					// 校区
					let school = JSON.parse(res.data);
					// console.log('school', school);
					if (typeof school !== 'undefined' && school !== '') {
						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) => a.label.localeCompare(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;
			},
			/**
			 * 获取房间数据
			 */
			get_room_airs_data(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) {
				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) {
				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
				}
				// 点击的楼层id
				this.louceng_click_id = ids[0]
				// 填充数据
				this.currentData.school = labels[2]
				this.currentData.building = labels[1]
				this.currentData.floor = labels[0]
				this.currentData.allRooms = rooms
				// 给右侧窗口标题赋值
				this.currentData.title_any_where = this.currentData.school + '-' + this.currentData.building + '-' + this
					.currentData.floor
				// 赋值分页数据
				this.pagination.total = rooms.length
				// 最后一页删除后已经空了，则显示前一页
				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);
				// 某层房间空调数	
				this.getRoomsAndAirs(this.currentData.school, this.currentData.building, this.currentData.floor)
				// 某层空调开启和异常统计
				this.getOpeningAndAbnomal(this.currentData.school, this.currentData.building, this.currentData.floor)
				this.listLoading = false
			},
			/**
			 * 某层空调开启和异常统计
			 * @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
					} else {
						// 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.$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) {
				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_room.focus()
					})
				}, 100)
			},
			/**
			 * 添加楼层
			 * @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()
					})
				}, 100)
			},
			/**
			 * 告警状态: 异常
			 * @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()
					})
				}, 100)
			},
			/**
			 * 添加楼栋对话框
			 */
			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)
				})
			},
			// 主题部分按钮的单击事件
			top_btn_click(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_cao.focus()
					})
				}, 100)
			},
			/**
			 * 操作编辑修改房间
			 * @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
			},
			/**
			 * 操作删除房间
			 */
			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: deviceOptions,
						duration_use: 0.00, // 使用时长
						is_normal: '0', // 是否正常
						is_on: '0', // 是否开启
						cao: '' // 操作员
					}
				}

				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: 20px;

						.school,
						.loudong {
							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;
						}

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

							.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: #5c87ff;
									color: #FFFFFF;
								}

								.louceng-clicked {
									font-size: 20px;
									font-weight: bold;
									background-color: #5c87ff;
									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 {
							display: flex;
							align-items: center;

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

							.title-detail {
								margin-left: 40px;
								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 {
												font-size: 20px;
												cursor: pointer;
											}
										}
									}

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

			.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: 300px !important;
		width: 500px !important;
	}

	.el-dialog-add-device {
		height: 590px !important;
		width: 500px !important;
	}

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

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