rt-sim-training-client/src/views/trainRoom/index.vue

<template>
  <div class="room-box">
    <div class="content-box">
      <!-- title显示 -->
      <div class="creator">
        <p style="margin-top: 2px;font-size: 15px;">{{ $t('trainRoom.comprehensiveTrainingManager') + roomInfo.creator }}</p>
        <p class="roomName">{{ $t('trainRoom.comprehensiveDrillRoom') }}</p>
        <div style="padding-right: 30px;">
          <p class="num">{{ $t('trainRoom.numberOfAssignableRoles') }}{{ permissionRest }} / {{ roomInfo.permissionNum - 1 }}</p>
        </div>
      </div>
      <!-- 聊天窗口 -->
      <div class="chat-box">
        <train-chat :group-room="roomInfo.group" />
      </div>
      <!-- 参与人员 -->
      <div class="personnel">
        <div style="height: calc(100% - 20px); overflow-y: scroll; padding: 0px 30px;">
          <div style="display: flex; justify-content: space-between;">
            <div class="Scheduling">
              <p class="title">{{ $t('trainRoom.dispatcher') }}</p>
              <ul>
                <li v-for="(nor, index) in dispatchList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUser(dispatchList, nor, index)"
                  />
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button icon="el-icon-plus" circle plain @click="addingRoles('dispatch', '增加调度人员')" />
              </div>
            </div>
            <div class="Scheduling">
              <p class="title">{{ $t('trainRoom.stationAttendant') }}</p>
              <ul>
                <li v-for="(nor, index) in equipmentList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUserForStation(nor, index, stationListForEquipment, equipmentList)"
                  />
                  <div style="float: right; margin-right: 15px;">
                    <el-select
                      v-model="nor.deviceCode"
                      :placeholder="$t('global.choose')"
                      size="mini"
                      :disabled="userId != roomInfo.creatorId"
                      @change="handleChangeUser(nor, 'Attendant', stationListForEquipment, equipmentList)"
                    >
                      <el-option
                        v-for="item in stationListForEquipment"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                        style="margin-left: 10px"
                      />
                    </el-select>
                  </div>
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button
                  icon="el-icon-plus"
                  circle
                  plain
                  @click="addingRoles('equipment', '增加车站值班员')"
                />
              </div>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <div class="Scheduling ">
              <p class="title">{{ $t('trainRoom.teacher') }}</p>
              <ul>
                <li v-for="(nor, index) in adminList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUser(adminList, nor, index)"
                  />
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button icon="el-icon-plus" circle plain @click="addingRoles('admin', '增加教员')" />
              </div>
            </div>
            <div class="Scheduling ">
              <p class="title">{{ $t('trainRoom.universalAccount') }}</p>
              <ul>
                <li v-for="(nor, index) in signalList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUser(signalList, nor, index)"
                  />
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button icon="el-icon-plus" circle plain @click="addingRoles('signal', '增加通号')" />
              </div>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <div class="Scheduling">
              <p class="title">{{ $t('trainRoom.driver') }}</p>
              <ul>
                <li v-for="(nor, index) in driverList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUser(driverList, nor, index)"
                  />
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button icon="el-icon-plus" circle plain @click="addingRoles('driver', '增加司机')" />
              </div>
            </div>
            <div class="Scheduling">
              <p class="title">IBP</p>
              <ul>
                <li v-for="(nor, index) in ibpList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUserForStation(nor, index, stationListForIBP, ibpList)"
                  />
                  <div style="float: right; margin-right: 15px;">
                    <el-cascader
                      v-model="nor.deviceCode"
                      size="mini"
                      :placeholder="$t('global.choose')"
                      :disabled="userId != roomInfo.creatorId"
                      :options="stationListForIBP"
                      @change="handleChangeUser(nor, 'IBP', stationListForIBP, ibpList)"
                    />
                  </div>
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button
                  icon="el-icon-plus"
                  circle
                  plain
                  @click="addingRoles('ibp', '增加IBP')"
                />
              </div>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <div class="Scheduling">
              <p class="title">{{ $t('trainRoom.bigScreen') }}</p>
              <ul>
                <li v-for="(nor, index) in bigScreenList" :key="index" class="selectPerson">
                  <span>{{ nor.nickName }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelUser(bigScreenList, nor, index)"
                  />
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button icon="el-icon-plus" circle plain @click="addingRoles('bigScreen', '增加大屏')" />
              </div>
            </div>
            <div class="Scheduling">
              <p class="title">{{ $t('trainRoom.realDevice') }}-<span>{{ hasPlc?$t('trainRoom.plcGatewayOnline'):$t('trainRoom.plcGatewayOffline') }}</span></p>
              <ul>
                <li v-for="(nor, index) in stationStandList" :key="index" class="selectPerson">
                  <span>{{ realDeviceType[nor.deviceType] }}</span>
                  <i
                    v-if="userId == roomInfo.creatorId"
                    class="el-icon-close delPerson"
                    @click="handleDelDevice(nor)"
                  />
                  <div style="float: right; margin-right: 15px;">
                    <el-select
                      v-model="nor.deviceCode"
                      :placeholder="$t('global.choose')"
                      size="mini"
                      :disabled="userId != roomInfo.creatorId"
                      @change="handleChangeDevice(nor, doorList, stationStandList)"
                    >
                      <el-option
                        v-for="item in doorList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                        style="margin-left: 10px"
                      />
                    </el-select>
                  </div>
                </li>
              </ul>
              <div v-if="userId == roomInfo.creatorId" class="add-box">
                <el-button icon="el-icon-plus" circle plain @click="addingDevice" />
              </div>
            </div>
          </div>
        </div>
        <div class="start-box">
          <el-button
            v-if="userId == roomInfo.creatorId"
            style="margin-left: 10px"
            type="danger"
            :loading="loading"
            @click="exit"
          >{{ $t('trainRoom.destroyRoom') }}
          </el-button>
          <el-button
            v-if="userId == roomInfo.creatorId"
            style="margin-left: 10px"
            type="success"
            :loading="loading"
            @click="postCode"
          >{{ $t('trainRoom.generatingQRCode') }}
          </el-button>
          <template v-if="!starting">
            <el-button
              v-if="userId == roomInfo.creatorId"
              style="margin-left: 10px"
              type="primary"
              :loading="loading"
              @click="start"
            >
              {{ $t('trainRoom.startSimulation') }}</el-button>
          </template>
          <template v-else>
            <el-button
              type="primary"
              style="margin-left: 10px"
              :loading="loading"
              @click="joinJointTrain"
            >
              {{ $t('trainRoom.enterSimulation') }}</el-button>
            <el-button
              v-if="userId == roomInfo.creatorId"
              style="margin-left: 10px"
              type="warning"
              :loading="loading"
              @click="stop"
            >
              {{ $t('trainRoom.endSimulation') }}</el-button>
          </template>
          <el-button type="" @click="backRoom">{{ $t('global.back') }}
          </el-button>
        </div>
      </div>
    </div>
    <!-- 观众席 -->
    <div class="person-box">
      <div class="title">
        <div style="float: left;" />
        <div style="float: right; font-size: 15px;">{{ treeData.length }}/{{ roomInfo.totalNum }}</div>
      </div>
      <el-input v-model="filterText" :placeholder="this.$t('global.enterNameToFilter')" clearable />
      <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height) +'px' }">
        <el-tree
          ref="trainingTree"
          :data="treeData"
          :filter-node-method="filterNode"
          :lazy="false"
          :props="defaultProps"
          class="tree-height-max"
          @node-contextmenu="showContextMenu"
        >
          <span slot-scope="{ node, data }">
            <span v-if="node.data.inRoom" style="color: green;">{{ data.nickName }}</span>
            <span v-else style="color: #ccc;">{{ data.nickName }}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
    <add-person ref="addPerson" @handleDispatch="handleDispatch" @handleUserList="handleUserList" />
    <qr-code ref="qrCode" />
    <tree-operate-menu ref="menu" :point="point" :click-user-id="clickUserId" />
  </div>
</template>

<script>
import { getJoinTrainCode, deljointTrainRoom, putUserRoles, postRoomDetail, getJointTrainRoomUserList, putJointTrainingExit, startJointTraining, putJointTrainingSimulation, putJointTrainingSimulationEntrance, setRealDevice, delRealDevice, getRealDevices } from '@/api/chat';
import { getStationList } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { DeviceMenu, RealDeviceType } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
import { getPublishMapInfo, hasDoorStationList } from '@/api/jmap/map';
import { getPlcGateway } from '@/api/simulation';
import trainChat from './trainChat';
import AddPerson from './addPerson';
import QrCode from '@/components/QrCode';
import TreeOperateMenu from './operateMenu';

export default {
	name: 'TrainRoom',
	components: {
		trainChat,
		AddPerson,
		QrCode,
		TreeOperateMenu
	},
	data() {
		return {
			testData: ['Station_203_0.07533', 'left'],
			userId: '',
			permissionRest: 0,
			roomInfo: {
				creator: '',
				totalNum: '',
				creatorId: '',
				group: '',
				audienceNum: 0,
				permissionNum: 0
			},
			filterText: '',
			isShow: false,
			listName: 'dispatch',
			treeData: [],
			defaultProps: {
				label: 'nickName'
			},
			dispatchList: [],
			equipmentList: [],
			adminList: [],
			driverList: [],
			signalList: [],
			bigScreenList: [],
			stationList: [],
			stationStandList: [],
			ibpList: [],
			point: {
				x: 0,
				y: 0
			},
			clickUserId: '', // 选择踢出用户id
			timeDemon: null,
			starting: false,
			mapId: '',
			loading: false,
			hasPlc: false,
			doorList: [],
			realDeviceType: RealDeviceType
		};
	},
	computed: {
		height() {
			return this.$store.state.app.height - 95;
		},
		stationListForEquipment() {
			return this.stationList.filter(elem => { return elem.centralized; }).map(item => {
				const elem = { code: item.code, name: item.name, disabled: false };
				this.equipmentList.forEach(nor => {
					if (elem.code == nor.deviceCode) {
						elem.disabled = true;
					}
				});
				return elem;
			});
		},
		stationListForIBP() {
			return this.stationList.map(item => {
				const elem = { value: item.code, label: item.name, children: [{value: 'left', label: this.$t('trainRoom.left')}, {value: 'right', label: this.$t('trainRoom.right')}] };
				return elem;
			});
		}
	},
	watch: {
		filterText(val) {
			this.$refs.trainingTree.filter(val);
		},
		'$store.state.socket.roleInfo': async function (val) {
			if (val.length) { 		// 分配角色信息
				await this.addrolesList(val);
			}
		},
		'$store.state.socket.jointRoomInfo': async function (val) {
			if (val.creatorId) { 	// 房间消息
				await this.handleRoomInfo(val);
			}
		},
		'$store.state.socket.userPermit': async function (val) {
			if (val.id) { 			// 用户扫码信息
				val.state = '01';
				await this.addPeopleList(val);
			}
		},
		'$store.state.socket.userRoomKickOut': async function (val) {
			if (val.id) { 			// 用户被踢出信息
				val.state = '03';
				await this.addPeopleList(val);
			}
		},
		'$store.state.socket.userInRoom': async function (val) {
			if (val.id) { 			// 用户从外部进入房间消息
				val.state = '02';
				await this.addPeopleList(val);
			}
		},
		'$store.state.socket.userOutRoom': async function (val) {
			if (val.id) { 			// 用户退出房间消息
				val.state = '02';
				await this.addPeopleList(val);
			}
		},
		'$store.state.socket.realDeviceInfo': async function (val) {
			await this.getDevicesList(); // 分配设备信息
		}
	},
	beforeDestroy() {
		if (this.timeDemon) {
			clearTimeout(this.timeDemon);
		}
	},
	async mounted() {
		this.userId = this.$store.state.user.id;
		this.getRoomInfo(); // 获取房间信息 info
		this.getUserList(); // 房间人员 列表
		this.checkPlcGateway(); // PLC网关
		this.getDevicesList(); // 获取真实设备列表
		this.timeDemon = setInterval(() => {
			checkLoginLine();
		}, 5000 * 60);
	},
	methods: {
		computePermissionRest() {
			this.permissionRest = this.roomInfo.permissionNum > 0
				?this.roomInfo.permissionNum - [
					...this.adminList,
					...this.dispatchList,
					...this.equipmentList,
					...this.driverList,
					...this.signalList,
					...this.ibpList,
					...this.bigScreenList
				].length - 1: 0;
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		ibpRoleData(nor) {
			return [nor.deviceCode, nor.ibpPart];
		},
		async handleRoomInfo(data) {
			const param = {
				creatorId: data.creatorId,
				group: data.group,
				mapId: data.mapId,
				permissionNum: data.permissionNum,
				roomName: data.roomName,
				state: data.state
			};

			if (data.state == '03') { // 房间销毁
				this.$router.push({ path: `/trainingPlatform/detail/${this.$route.query.subSystem}`, query: {mapId: this.mapId}});
			} else if (data.state == '01') { // 进入准备中
				this.starting = false;
			} else if (data.state == '02') {
				this.starting = true;
				await putJointTrainingSimulationEntrance(param.group);
				const rest = await getPublishMapInfo(param.mapId);
				const query = { skinCode: rest.data.skinCode, mapId: param.mapId, group: param.group, subSystem: this.$route.query.subSystem };
				this.$router.push({ path: `/jointTraining`, query: query });
				launchFullscreen();
			}
			this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
		},
		// 右键点击观众席
		showContextMenu(e, obj, node, vueElem) {
			e.preventDefault();
			this.point = {
				x: e.clientX,
				y: e.clientY
			};
			if (this.userId == this.roomInfo.creatorId) {
				this.clickUserId = obj.id;
				this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: DeviceMenu.JointRoom });
			}
		},
		async joinJointTrain() {
			this.loading = true;
			await putJointTrainingSimulationEntrance(this.$route.query.group);
			const rest = await getPublishMapInfo(this.mapId);
			const query = { skinCode: rest.data.skinCode, mapId: this.mapId, group: this.$route.query.group, subSystem: this.$route.query.subSystem };
			this.$router.push({ path: `/jointTraining`, query: query });
			launchFullscreen();
		},
		// 判断观众席在线/不在线
		addPeopleList(obj) {
			const param = {
				id: obj.id,
				inRoom: obj.inRoom,
				inSimulation: obj.inSimulation,
				name: obj.name,
				nickName: obj.nickName,
				userRole: obj.userRole
			};
			if (obj.state == '01') { // 扫码信息
				this.treeData.push(param);
			} else if (obj.state == '02') { // 判断 inRoom 人员 在不在线
				const index = this.treeData.findIndex(nor => nor.id == param.id);
				if (index > -1) {
					this.treeData[index].inRoom = param.inRoom;
				}
			} else if (obj.state == '03') { // 被踢出房间
				const index = this.treeData.findIndex(nor => nor.id == param.id);
				this.treeData.splice(index, 1);
				if (this.userId == param.id) {
					this.$router.push({ path: `/` });
					this.messageInfo(this.$t('tip.beKickedOut'), 'warning');
				} else {
					param.userRole = '';
					param['deviceCode'] = '';
					const arr = [];
					arr.push(param);
					this.addrolesList(arr); // 删除角色信息
				}
			}
			this.computePermissionRest();
		},
		// 分配角色
		addrolesList(list) {
			list.forEach(item => {
				switch (item.userRole) {
				case 'Instructor':
					this.adminList.push(item);
					break;
				case 'Dispatcher':
					this.dispatchList.push(item);
					break;
				case 'Attendant':
					this.equipmentList.forEach((nor, index) => {
						if (nor.id == item.id) {
							this.equipmentList.splice(index, 1);
						}
					});
					this.equipmentList.push(item);
					break;
				case 'Driver':
					this.driverList.push(item);
					break;
				case 'Repair':
					this.signalList.push(item);
					break;
				case 'IBP':
					this.ibpList.forEach((nor, index) => {
						if (nor.id == item.id) {
							this.ibpList.splice(index, 1);
						}
					});
					item.deviceCode = [item.deviceCode, item.ibpPart];
					this.ibpList.push(item);
					break;
				case 'BigScreen':
					this.bigScreenList.push(item);
					break;
				default:
					this.dispatchList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.dispatchList.splice(index, 1);
						}
					});
					this.equipmentList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.equipmentList.splice(index, 1);
						}
					});
					this.adminList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.adminList.splice(index, 1);
						}
					});
					this.driverList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.driverList.splice(index, 1);
						}
					});
					this.signalList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.signalList.splice(index, 1);
						}
					});
					this.ibpList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.ibpList.splice(index, 1);
						}
					});
					this.bigScreenList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.bigScreenList.splice(index, 1);
						}
					});
					break;
				}
			});
			this.computePermissionRest();
		},
		async getRoomInfo() {
			// 获取房间信息 创建人和权限总数
			const res = await postRoomDetail(this.$route.query.group);

			this.starting = res.data.state == '02';
			this.mapId = res.data.mapId;
			this.prodId = res.data.mapPrdCode;
			this.roomInfo = {
				creatorId: res.data.creatorId,
				totalNum: Number(res.data.permissionNum) + Number(res.data.audiencePermissionNum),
				creator: res.data.creator.nickName,
				group: res.data.group,
				audienceNum: res.data.audiencePermissionNum,
				permissionNum: res.data.permissionNum
			};

			// 获取设备集中站
			const resp = await getStationList(res.data.mapId);
			this.stationList = resp.data;
			this.computePermissionRest();
			// 获取屏蔽门列表
			this.handleDoorList(res.data.mapId, resp.data);
		},
		// 获取观众席list 分配角色    Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号 IBP IBP盘
		async getUserList() {
			this.dispatchList = [];
			this.equipmentList = [];
			this.adminList = [];
			this.driverList = [];
			this.signalList = [];
			this.ibpList = [];
			const res = await getJointTrainRoomUserList(this.$route.query.group);
			res.data.forEach(item => {
				if (item.id == this.userId) {
					item.disabled = true;
				}
				switch (item.userRole) {
				case 'Instructor':
					item.select = true;
					this.adminList.push(item);
					break;
				case 'Dispatcher':
					item.select = true;
					this.dispatchList.push(item);
					break;
				case 'Attendant':
					item.select = true;
					this.equipmentList.push(item);
					break;
				case 'Driver':
					item.select = true;
					this.driverList.push(item);
					break;
				case 'Repair':
					item.select = true;
					this.signalList.push(item);
					break;
				case 'IBP':
					item.select = true;
					item.deviceCode = [item.deviceCode, item.ibpPart];
					this.ibpList.push(item);
					break;
				case 'BigScreen':
					item.select = true;
					this.bigScreenList.push(item);
					break;
				}
				this.treeData.push(item);
			});
			this.computePermissionRest();
		},
		async postCode() {
			this.loading = true;
			const res = await getJoinTrainCode({}, this.$route.query.group);
			if (res.code == '200') {
				const param = {
					url: res.data,
					title: this.$t('trainRoom.distributeTheRoomQRCode')
				};
				if (this.$refs) {
					this.$refs.qrCode.doShow(param);
				}
			}
			this.loading = false;
		},
		async start() {
			let flag = true;
			this.loading = true;
			this.equipmentList.forEach(item => {
				if (!item.deviceCode) {
					flag = false;
				}
			});

			if (flag) {
				try {
					await startJointTraining(this.$route.query.group);
					this.loading = false;
				} catch (error) {
					this.messageInfo( this.$t('error.startedComprehensiveDrillFailure'), 'error');
					this.loading = false;
				}
			} else {
				this.messageInfo( this.$t('error.stationAttendantStationCannotBeEmpty'), 'error');
				this.loading = false;
			}
		},
		async stop() {
			this.loading = true;
			const res = await putJointTrainingSimulation(this.$route.query.group);
			this.mapId = res.data.mapId;
			if (res.data.state == '01') {
				this.starting = false;
			}
			this.loading = false;
		},
		// 返回
		async backRoom() {
			try {
				this.loading = true;
				await putJointTrainingExit(this.$route.query.group);
				this.loading = false;
				this.$router.push({ path: `/trainingPlatform/detail/${this.$route.query.subSystem}`, query: {mapId: this.mapId}});
			} catch (error) {
				this.messageInfo( this.$t('error.operationFailure'), 'error');
			}
		},
		// 管理员销毁房间
		exit() {
			this.loading = false;
			this.$confirm( this.$t('tip.destroyRoomHint'), this.$t('tip.hint'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(async () => {
				try {
					await deljointTrainRoom(this.$route.query.group);
				} catch (error) {
					this.messageInfo(this.$t('error.destroyedRoomFailed'), 'error');
				}
			});
		},
		// 打开弹窗
		addingRoles(name, title) {
			const titleMap = {
				'增加调度人员': this.$t('trainRoom.increaseDispatchers'),
				'增加车站值班员': this.$t('trainRoom.increaseStationAttendant'),
				'增加教员': this.$t('trainRoom.increaseTeacher'),
				'增加通号': this.$t('trainRoom.increaseUniversalAccount'),
				'增加司机': this.$t('trainRoom.driver'),
				'增加大屏': this.$t('trainRoom.increaseBigScreen'),
				'增加IBP': this.$t('trainRoom.increaseIbp')
			};
			title = titleMap[title];
			this.listName = name;
			const treeList = [];
			this.treeData.forEach(item => {
				if (!item.select) {
					delete item.select;
					treeList.push(item);
				}
			});
			this.$refs.addPerson.doShow(title, treeList);
		},
		//  Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号
		async handleDispatch(list) {
			const arr = [];
			list.forEach(item => {
				const params = {
					id: item.id,
					nickName: item.nickName,
					userRole: ''
				};
				switch (this.listName) {
				case 'admin': 		// 教员
					params.userRole = 'Instructor';
					break;
				case 'dispatch': 	// 调度员
					params.userRole = 'Dispatcher';
					break;
				case 'equipment': 	// 车站值班员
					params.userRole = 'Attendant';
					break;
				case 'driver': 		// 司机
					params.userRole = 'Driver';
					break;
				case 'signal': 		// 通号
					params.userRole = 'Repair';
					break;
				case 'ibp': 		// IBP
					params.userRole = 'IBP';
					break;
				case 'bigScreen': 	// 大屏
					params.userRole = 'BigScreen';
					break;
				}
				arr.push(params);
			});
			if (arr.length) {
				try {
					await putUserRoles(arr, this.$route.query.group);
					arr.forEach(item => {
						this.treeData.forEach(nor => {
							if (item.id == nor.id) {
								nor.userRole = item.userRole;
							}
						});
					});
				} catch (error) {
					if (error.code == 500009) {
						this.messageInfo(this.$t('error.exceededTheTotalNumberOfAssignableRoles'), 'error');
					}
					this.treeData.forEach(item => {
						if (item.userRole == '' || item.userRole == 'Audience' || item.userRole == 'IBP') {
							item.select = false;
						}
					});
				}
			}
		},
		handleUserList(list) {
			this.treeData.forEach(item => {
				list.forEach(nor => {
					if (item.id == nor.id) {
						item = nor;
					}
				});
			});
		},
		handleChangeUser(val, role, stationList, list) {
			let deviceCode = '';
			if (role === 'IBP') {
				val.ibpPart = val.deviceCode[1];
				deviceCode = val.deviceCode[0];
			} else {
				val.ibpPart = '';
				deviceCode = val.deviceCode;
			}
			const params = [{
				id: val.id,
				nickName: val.nickName,
				userRole: role,
				deviceCode: deviceCode,
				ibpPart: val.ibpPart
			}];
			putUserRoles(params, this.$route.query.group);
			stationList.forEach(item => {
				item.disabled = false;
				list.forEach(nor => {
					if (item.code == nor.deviceCode[0]) {
						item.disabled = true;
					}
				});
			});
		},
		handleDelUser(list, item, index) {
			list.splice(index, 1);
			this.handleProperty(item);
		},
		handleDelUserForStation(item, index, stationList, list) {
			list.splice(index, 1);
			stationList.forEach(item => {
				item.disabled = false;
				list.forEach(nor => {
					if (item.code == nor.deviceCode) {
						item.disabled = true;
					}
				});
			});
			this.handleProperty(item);
		},
		handleProperty(item, role) {
			const treeIndex = this.treeData.findIndex(nor => nor.id == item.id);
			if (treeIndex > -1) {
				this.treeData[treeIndex]['select'] = false;
				this.treeData[treeIndex].userRole = 'Audience';
			}
			const params = [{
				id: item.id,
				nickName: item.nickName,
				userRole: 'Audience',
				deviceCode: ''
			}];
			putUserRoles(params, this.$route.query.group);
		},
		messageInfo(message, type) {
			this.$message({
				showClose: true,
				message: message,
				type: type
			});
		},
		checkPlcGateway() {
			getPlcGateway(this.$route.query.group).then(resp=>{
				if (resp.data) {
					this.hasPlc = true;
				} else {
					this.hasPlc = false;
				}
			}).catch(() => {
				this.$messageBox(this.$t('error.inquiryPLCDeviceFailed'));
			});
		},
		handleDoorList(mapId, stationList) {
			const doorList = [];
			hasDoorStationList(mapId).then(res =>{
				stationList.forEach(item => {
					res.data.forEach(it =>{
						if (item.code === it.stationCode) {
							const direction = parseInt(it.doorLocationType)%2 ===0? this.$t('trainRoom.uplinkPlatform'):this.$t('trainRoom.downlinkPlatform');
							doorList.push({code: it.code, name: item.name+direction});
						}
					});
				});
				this.doorList = doorList;
			}).catch(() => {
				this.$messageBox(this.$t('error.getScreenDoorsListFailed'));
			});
		},
		addingDevice() {
			const roomDeviceVo = {id: '', deviceType: 'ScreenDoor', deviceCode: ''};
			let typeSame = false;
			this.stationStandList.forEach( item =>{
				if (item.deviceType === roomDeviceVo.deviceType) {
					typeSame = true;
				}
			});
			if (typeSame) {
				this.$message.info(this.$t('error.theDeviceTypeAlreadyExists'));
				return;
			}
			setRealDevice(this.$route.query.group, roomDeviceVo);
		},
		handleChangeDevice(nor, doorList, stationStandList) {
			setRealDevice(this.$route.query.group, nor).then(resp => {
			}).catch(() => {
				this.$messageBox(this.$t('error.connectToRealDeviceFailed'));
			});
		},
		getDevicesList() {
			getRealDevices(this.$route.query.group).then( resp => {
				this.stationStandList = resp.data;
			}).catch(() => {
				this.$messageBox(this.$t('error.getRealDeviceListFailed'));
			});
		},
		handleDelDevice(nor) {
			delRealDevice(nor.id, this.$route.query.group).then( resp => {
			}).catch(() => {
				this.$messageBox(this.$t('error.deleteRealDeviceFailed'));
			});
		}
	}
};
</script>

<style scoped lang="scss">
    /deep/ {
    .Scheduling {
    .el-input__inner {
        height: 30px;
        width: 180px;
    }
    }
    }

    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #c7c7c7;
    }

    .room-box {
        position: relative;
        height: 100%;
        min-width: 1300px;

    .content-box {
        width: calc(100% - 320px);
        height: 100%;
        float: left;
        position: relative;

    .creator {
        padding-left: 50px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

    .num {
        float: left;
        margin-left: 15px;
        margin-top: 14px;
    }
    }

    .roomName {
        margin-left: 20px;
        margin: 0;
        font-size: 25px;
        line-height: 30px;
    }
    }

    .person-box {
        width: 320px;
        height: 100%;
        float: right;
        padding: 5px;
        border: 1px solid #ccc;

    .title {
        padding-left: 5px;
        font-size: 20px;
        margin: 10px 0;
        overflow: hidden;
    }
    }
    }

    .chat-box {
        float: left;
        margin-left: 20px;
        height: calc(100% - 60px);
        width: 480px;
    }

    .personnel {
        width: calc(100% - 500px);
        height: calc(100% - 120px);
        float: left;

    .Scheduling {
        width: calc(50% - 10px);
        float: left;
        height: 240px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        overflow-y: scroll;
        position: relative;

    .title {
        padding: 0;
        margin: 0;
        padding: 5px;
    }

    .add-box {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 40px;
        height: 40px;
    }
    }

    .selectPerson {
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        margin-bottom: 2px;

    &:hover {
         background-color: #f1f1f1;
     }

    .delPerson {
        float: right;
        margin-right: 10px;
        margin-top: 7px;
        cursor: pointer;
    }
    }

    }

    .start-box {
        width: 100%;
        display: flex;
        justify-content: center;
        background: #f1f1f1;
        padding: 20px 0px;
    }

    @media screen and (max-width: 1325px) {
        .chat-box {
            width: 380px;
        }

        .personnel {
            width: calc(100% - 400px);
        }
    }
</style>