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}});
                this.$router.go(-1);
            } 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.replace({ 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.replace({ 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;
                if (this.$route.query.subSystem) {
                    this.$router.push({ path: `/trainingPlatform/detail/${this.$route.query.subSystem}`, query: {mapId: this.mapId}});
                } else {
                    this.$router.go(-1);
                }
            } 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>