847 lines
34 KiB
Vue
847 lines
34 KiB
Vue
|
<template>
|
||
|
|
<div class="room-box">
|
||
|
|
<div class="content-box">
|
||
|
|
<!-- title显示 -->
|
||
|
|
<div class="creator">
|
||
|
|
<p style="margin-top: 2px;font-size: 15px;">综合实训管理者: {{roomInfo.creator}}</p>
|
||
|
|
<p class="roomName">综合演练室</p>
|
||
|
|
<div style="padding-right: 30px;">
|
||
|
|
<p class="num">可分配角色数量: {{roomInfo.permissionNum - 1}}</p>
|
||
|
|
<!-- <p class="num">剩余可分配角色数量: {{roomInfo.permissionNum - num}}</p> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 聊天窗口 -->
|
||
|
|
<div class="chat-box">
|
||
|
|
<train-chat :groupRoom="roomInfo.group"></train-chat>
|
||
|
|
</div>
|
||
|
|
<!-- 参与人员 -->
|
||
|
|
<div class="personnel">
|
||
|
|
<div style="height: calc(100% - 64px); overflow-y: scroll;">
|
||
|
|
<div style="display: flex; justify-content: space-between;">
|
||
|
|
<div class="Scheduling">
|
||
|
|
<p class="title">调度员</p>
|
||
|
|
<ul>
|
||
|
|
<li class="selectPerson" v-for="(nor, index) in dispatchList">
|
||
|
|
<span>{{nor.nickName}}</span>
|
||
|
|
<i class="el-icon-close delPerson" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="delDispatch(nor, index)"></i>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="add-box" v-if="userId == roomInfo.creatorId">
|
||
|
|
<el-button icon="el-icon-plus" circle plain @click="addingRoles('dispatch', '增加调度人员')">
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="Scheduling bottomNone">
|
||
|
|
<p class="title">车站值班员</p>
|
||
|
|
<ul>
|
||
|
|
<li class="selectPerson" v-for="(nor, index) in equipmentList">
|
||
|
|
<span>{{nor.nickName}}</span>
|
||
|
|
<i class="el-icon-close delPerson" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="delEquipment(nor, index)"></i>
|
||
|
|
<div style="float: right; margin-right: 15px;">
|
||
|
|
<el-select v-model="nor.stationCode" placeholder="请选择"
|
||
|
|
@change="changeEquipment(nor)" size="mini"
|
||
|
|
:disabled="userId != roomInfo.creatorId">
|
||
|
|
<el-option v-for="item in stationList" :key="item.code" :label="item.name"
|
||
|
|
:value="item.code" :disabled="item.disabled">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="add-box" v-if="userId == roomInfo.creatorId">
|
||
|
|
<el-button icon="el-icon-plus" circle plain
|
||
|
|
@click="addingRoles('equipment', '增加车站值班员')">
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; justify-content: space-between;">
|
||
|
|
<div class="Scheduling ">
|
||
|
|
<p class="title">教员</p>
|
||
|
|
<ul>
|
||
|
|
<li class="selectPerson" v-for="(nor, index) in adminList">
|
||
|
|
<span>{{nor.nickName}}</span>
|
||
|
|
<i class="el-icon-close delPerson" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="delAdmin(nor, index)"></i>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="add-box" v-if="userId == roomInfo.creatorId">
|
||
|
|
<el-button icon="el-icon-plus" circle plain @click="addingRoles('admin', '增加教员')">
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="Scheduling ">
|
||
|
|
<p class="title">通号</p>
|
||
|
|
<ul>
|
||
|
|
<li class="selectPerson" v-for="(nor, index) in signalList">
|
||
|
|
<span>{{nor.nickName}}</span>
|
||
|
|
<i class="el-icon-close delPerson" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="delSignal(nor, index)"></i>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="add-box" v-if="userId == roomInfo.creatorId">
|
||
|
|
<el-button icon="el-icon-plus" circle plain @click="addingRoles('signal', '增加通号')">
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; justify-content: space-between;">
|
||
|
|
<div class="Scheduling bottomNone">
|
||
|
|
<p class="title">司机</p>
|
||
|
|
<ul>
|
||
|
|
<li class="selectPerson" v-for="(nor, index) in driverList">
|
||
|
|
<span>{{nor.nickName}}</span>
|
||
|
|
<i class="el-icon-close delPerson" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="delDriver(nor, index)"></i>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="add-box" v-if="userId == roomInfo.creatorId">
|
||
|
|
<el-button icon="el-icon-plus" circle plain @click="addingRoles('driver', '增加司机')">
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="start-box">
|
||
|
|
<div v-if="!starting" style="float: right; margin-left: 10px;">
|
||
|
|
<el-button type="primary" style="float: right;" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="start">
|
||
|
|
开始仿真</el-button>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<el-button type="primary" style="float: right; margin-right: 10px;" v-if=""
|
||
|
|
@click="joinJointTrain">
|
||
|
|
进入仿真</el-button>
|
||
|
|
<el-button type="" style="float: right; margin-right: 10px;" v-if="userId == roomInfo.creatorId"
|
||
|
|
@click="stop">
|
||
|
|
结束仿真</el-button>
|
||
|
|
</div>
|
||
|
|
<el-button type="" style="float: right; margin-right: 0px;" @click="postCode"
|
||
|
|
v-if="userId == roomInfo.creatorId">生成二维码
|
||
|
|
</el-button>
|
||
|
|
<el-button type="" style="float: right; margin-right: 10px;" @click="backRoom">返回
|
||
|
|
</el-button>
|
||
|
|
<el-button type="danger" style="float: right; margin-right: 0px;"
|
||
|
|
v-if="userId == roomInfo.creatorId" @click="exit">销毁房间
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 观众席 -->
|
||
|
|
<div class="person-box">
|
||
|
|
<div class="title">
|
||
|
|
<div style="float: left;"></div>
|
||
|
|
<div style="float: right; font-size: 15px;">{{treeData.length}}/{{roomInfo.totalNum}}</div>
|
||
|
|
</div>
|
||
|
|
<el-input placeholder="输入名称进行过滤" v-model="filterText" clearable> </el-input>
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper" :style="{ height: (height) +'px' }">
|
||
|
|
<el-tree ref="trainingTree" :data="treeData" :filter-node-method="filterNode" :lazy="false"
|
||
|
|
:props="defaultProps" @node-contextmenu="showContextMenu" class="tree-height-max">
|
||
|
|
<span slot-scope="{ node, data }">
|
||
|
|
<!-- inRoom true 在线 false 不在线 -->
|
||
|
|
<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"></add-person>
|
||
|
|
<qr-code ref="qrCode"></qr-code>
|
||
|
|
<tree-operate-menu ref="menu" :point="point" :clickUserId="clickUserId"></tree-operate-menu>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Vue from 'vue';
|
||
|
|
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||
|
|
import HZRecorder from '@/utils/HZRecorder';
|
||
|
|
import { postDataBd, postDataXf, getHistoryVoice, getJoinTrainCode, deljointTrainRoom, putUserRoles, postRoomDetail, getJointTrainRoomUserList, putJointTrainingExit, startJointTraining, putJointTrainingSimulation, putJointTrainingSimulationEntrance } from '@/api/chat';
|
||
|
|
import StompClient from '@/utils/sock';
|
||
|
|
import { handleToken } from '@/utils/auth';
|
||
|
|
import trainChat from './trainChat'
|
||
|
|
import AddPerson from './addPerson';
|
||
|
|
import QrCode from "@/components/QrCode";
|
||
|
|
import { getStationList } from '@/api/runplan';
|
||
|
|
import TreeOperateMenu from './operateMenu';
|
||
|
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
||
|
|
import { checkLoginLine } from '@/api/login';
|
||
|
|
import { getPublishMapInfo } from '@/api/jmap/map';
|
||
|
|
import { launchFullscreen } from '@/utils/screen';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'trainRoom',
|
||
|
|
components: {
|
||
|
|
trainChat,
|
||
|
|
AddPerson,
|
||
|
|
QrCode,
|
||
|
|
TreeOperateMenu
|
||
|
|
},
|
||
|
|
mixins: [WindowResizeHandler],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
height: 0,
|
||
|
|
userId: '',
|
||
|
|
roomInfo: {
|
||
|
|
creator: '',
|
||
|
|
totalNum: '',
|
||
|
|
creatorId: '',
|
||
|
|
group: '',
|
||
|
|
audienceNum: '',
|
||
|
|
permissionNum: '',
|
||
|
|
},
|
||
|
|
filterText: '',
|
||
|
|
isShow: false,
|
||
|
|
listName: 'dispatch',
|
||
|
|
treeData: [],
|
||
|
|
defaultProps: {
|
||
|
|
label: 'nickName',
|
||
|
|
},
|
||
|
|
dispatchList: [],
|
||
|
|
equipmentList: [],
|
||
|
|
adminList: [],
|
||
|
|
driverList: [],
|
||
|
|
signalList: [],
|
||
|
|
stationList: [], // 车站列表
|
||
|
|
point: {
|
||
|
|
x: 0,
|
||
|
|
y: 0
|
||
|
|
},
|
||
|
|
clickUserId: '', // 选择踢出用户id
|
||
|
|
timeDemon: null,
|
||
|
|
starting: false,
|
||
|
|
mapId: '',
|
||
|
|
num: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
filterText(val) {
|
||
|
|
this.$refs.trainingTree.filter(val);
|
||
|
|
},
|
||
|
|
'$store.state.socket.roleInfo': function (val) {
|
||
|
|
if (val.length) { // 分配角色信息
|
||
|
|
this.addrolesList(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.jointRoomInfo': function (val) {
|
||
|
|
if (val.creatorId) { // 房间消息
|
||
|
|
this.handleRoomInfo(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.userRoomKickOut': function (val) {
|
||
|
|
if (val.id) { // 用户被踢出信息
|
||
|
|
val.state = '03'
|
||
|
|
this.addPeopleList(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.userPermit': function (val) {
|
||
|
|
if (val.id) { // 用户扫码信息
|
||
|
|
val.state = '01'
|
||
|
|
this.addPeopleList(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.userInRoom': function (val) {
|
||
|
|
if (val.id) { // 用户从外部进入房间消息
|
||
|
|
val.state = '02'
|
||
|
|
this.addPeopleList(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.userOutRoom': function (val) {
|
||
|
|
if (val.id) { // 用户退出房间消息
|
||
|
|
val.state = '02'
|
||
|
|
this.addPeopleList(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.timeDemon) {
|
||
|
|
clearTimeout(this.timeDemon);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
this.getRoomState();
|
||
|
|
this.userId = this.$store.state.user.id;
|
||
|
|
this.getRoomInfo(); // 获取房间信息 info
|
||
|
|
this.getUserList(); // 房间人员 列表
|
||
|
|
this.timeDemon = setInterval(() => {
|
||
|
|
checkLoginLine();
|
||
|
|
}, 5000 * 60);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
resizeHandler() {
|
||
|
|
this.height = this._clientHeight - 95;
|
||
|
|
},
|
||
|
|
filterNode(value, data) {
|
||
|
|
if (!value) return true;
|
||
|
|
return data.name.indexOf(value) !== -1;
|
||
|
|
},
|
||
|
|
async handleRoomInfo(data) {
|
||
|
|
let 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: `/demonstration/detail/${param.mapId}` });
|
||
|
|
} else if (data.state == '01') { // 进入准备中
|
||
|
|
this.starting = false;
|
||
|
|
} else if (data.state == '02') {
|
||
|
|
this.starting = true;
|
||
|
|
await putJointTrainingSimulationEntrance(param.group);
|
||
|
|
let rest = await getPublishMapInfo(param.mapId);
|
||
|
|
let query = { skinStyle: rest.data.skinStyle, mapId: param.mapId, group: param.group, }
|
||
|
|
this.$router.push({ path: `/jointTraining`, query: query });
|
||
|
|
}
|
||
|
|
this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
|
||
|
|
},
|
||
|
|
// 获取房间状态
|
||
|
|
async getRoomState() {
|
||
|
|
let res = await postRoomDetail(this.$route.query.group);
|
||
|
|
this.mapId = res.data.mapId;
|
||
|
|
this.starting = false;
|
||
|
|
if (res.data.state == '02') {
|
||
|
|
this.starting = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 右键点击观众席
|
||
|
|
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() {
|
||
|
|
// launchFullscreen();
|
||
|
|
await putJointTrainingSimulationEntrance(this.$route.query.group);
|
||
|
|
let rest = await getPublishMapInfo(this.mapId);
|
||
|
|
let query = { skinStyle: rest.data.skinStyle, mapId: this.mapId, group: this.$route.query.group };
|
||
|
|
this.$router.push({ path: `/jointTraining`, query: query });
|
||
|
|
},
|
||
|
|
// 判断观众席在线/不在线
|
||
|
|
addPeopleList(obj) {
|
||
|
|
let 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 人员 在不在线
|
||
|
|
let index = this.treeData.findIndex(nor => nor.id == param.id);
|
||
|
|
if (index > -1) {
|
||
|
|
this.treeData[index].inRoom = param.inRoom;
|
||
|
|
}
|
||
|
|
} else if (obj.state == '03') { // 被踢出房间
|
||
|
|
let 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('您被管理员踢出房间。', 'warning');
|
||
|
|
} else {
|
||
|
|
param.userRole = '';
|
||
|
|
param['stationCode'] = '';
|
||
|
|
let arr = [];
|
||
|
|
arr.push(param);
|
||
|
|
this.addrolesList(arr); // 删除角色信息
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 分配角色
|
||
|
|
addrolesList(list) {
|
||
|
|
list.forEach(item => {
|
||
|
|
switch (item.userRole) {
|
||
|
|
case 'Instructor': {
|
||
|
|
this.adminList.push(item);
|
||
|
|
this.num++;
|
||
|
|
} break;
|
||
|
|
case 'Dispatcher': {
|
||
|
|
this.dispatchList.push(item);
|
||
|
|
this.num++;
|
||
|
|
} break;
|
||
|
|
case 'Attendant': {
|
||
|
|
this.equipmentList.forEach((nor, index) => {
|
||
|
|
if (nor.id == item.id) { // 修改状态
|
||
|
|
this.equipmentList.splice(index, 1);
|
||
|
|
this.num--;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.equipmentList.push(item); // 新增
|
||
|
|
this.num++;
|
||
|
|
} break;
|
||
|
|
case 'Driver': {
|
||
|
|
this.driverList.push(item);
|
||
|
|
this.num++;
|
||
|
|
} break;
|
||
|
|
case 'Repair': {
|
||
|
|
this.signalList.push(item);
|
||
|
|
this.num++;
|
||
|
|
} break;
|
||
|
|
default: {
|
||
|
|
this.dispatchList.forEach((nor, index) => {
|
||
|
|
if (item.id == nor.id) {
|
||
|
|
this.dispatchList.splice(index, 1);
|
||
|
|
this.num--;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.equipmentList.forEach((nor, index) => {
|
||
|
|
if (item.id == nor.id) {
|
||
|
|
this.equipmentList.splice(index, 1);
|
||
|
|
this.num--;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.adminList.forEach((nor, index) => {
|
||
|
|
if (item.id == nor.id) {
|
||
|
|
this.adminList.splice(index, 1);
|
||
|
|
this.num--;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.driverList.forEach((nor, index) => {
|
||
|
|
if (item.id == nor.id) {
|
||
|
|
this.driverList.splice(index, 1);
|
||
|
|
this.num--;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.signalList.forEach((nor, index) => {
|
||
|
|
if (item.id == nor.id) {
|
||
|
|
this.signalList.splice(index, 1);
|
||
|
|
this.num--;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async getRoomInfo() {
|
||
|
|
// 获取房间信息 创建人和权限总数
|
||
|
|
let res = await postRoomDetail(this.$route.query.group);
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取设备集中站
|
||
|
|
let resp = await getStationList(res.data.mapId);
|
||
|
|
resp.data.forEach(item => {
|
||
|
|
if (item.centralized) {
|
||
|
|
this.stationList.push(item);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.stationList.forEach(item => {
|
||
|
|
item.disabled = false;
|
||
|
|
this.equipmentList.forEach(nor => {
|
||
|
|
if (item.code == nor.stationCode) {
|
||
|
|
item.disabled = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取观众席list 分配角色 Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号
|
||
|
|
async getUserList() {
|
||
|
|
this.num = 0;
|
||
|
|
this.dispatchList = [];
|
||
|
|
this.equipmentList = [];
|
||
|
|
this.adminList = [];
|
||
|
|
this.driverList = [];
|
||
|
|
this.signalList = [];
|
||
|
|
let res = await getJointTrainRoomUserList(this.$route.query.group);
|
||
|
|
res.data.forEach(item => {
|
||
|
|
if (item.id == this.userId) {
|
||
|
|
item.disabled = true;
|
||
|
|
}
|
||
|
|
if (item.userRole != 'Audience' && item.userRole != '') this.num++
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this.treeData.push(item);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
async postCode() {
|
||
|
|
try {
|
||
|
|
let res = await getJoinTrainCode({}, this.$route.query.group);
|
||
|
|
let param = {
|
||
|
|
url: res.data,
|
||
|
|
title: '分发房间二维码'
|
||
|
|
}
|
||
|
|
if (this.$refs) {
|
||
|
|
this.$refs.qrCode.doShow(param);
|
||
|
|
}
|
||
|
|
} catch (error) { };
|
||
|
|
},
|
||
|
|
async start() {
|
||
|
|
let flag = true;
|
||
|
|
this.equipmentList.forEach(item => {
|
||
|
|
if (!item.stationCode) {
|
||
|
|
flag = false;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
if (flag) {
|
||
|
|
try {
|
||
|
|
let res = await startJointTraining(this.$route.query.group);
|
||
|
|
} catch (error) {
|
||
|
|
this.messageInfo('开始综合演练失败。', 'error');
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
this.messageInfo('车站值班员所属车站不能为空', 'error');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async stop() {
|
||
|
|
let res = await putJointTrainingSimulation(this.$route.query.group);
|
||
|
|
this.mapId = res.data.mapId;
|
||
|
|
if (res.data.state == '01') {
|
||
|
|
this.starting = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 返回
|
||
|
|
async backRoom() {
|
||
|
|
try {
|
||
|
|
let res = await putJointTrainingExit(this.$route.query.group);
|
||
|
|
this.$router.push({ path: `/` });
|
||
|
|
} catch (error) {
|
||
|
|
this.messageInfo('操作失败！', 'error');
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// 管理员销毁房间
|
||
|
|
exit() {
|
||
|
|
this.$confirm('您将销毁房间，是否确定执行此操作', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(async () => {
|
||
|
|
try {
|
||
|
|
let res = await deljointTrainRoom(this.$route.query.group);
|
||
|
|
} catch (error) {
|
||
|
|
this.messageInfo('销毁房间失败！', 'error');
|
||
|
|
};
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 设置所属集中站信息
|
||
|
|
changeEquipment(val) {
|
||
|
|
let params = [{
|
||
|
|
id: val.id,
|
||
|
|
nickName: val.nickName,
|
||
|
|
userRole: 'Attendant',
|
||
|
|
stationCode: val.stationCode,
|
||
|
|
}];
|
||
|
|
putUserRoles(params, this.$route.query.group);
|
||
|
|
this.stationList.forEach(item => {
|
||
|
|
item.disabled = false;
|
||
|
|
this.equipmentList.forEach(nor => {
|
||
|
|
if (item.code == nor.stationCode) {
|
||
|
|
item.disabled = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号
|
||
|
|
async handleDispatch(list) {
|
||
|
|
let arr = [];
|
||
|
|
list.forEach(item => {
|
||
|
|
let 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;
|
||
|
|
}
|
||
|
|
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('分配角色数量已超过可分配角色总数！', 'error');
|
||
|
|
}
|
||
|
|
this.treeData.forEach(item => {
|
||
|
|
if (item.userRole == '' || item.userRole == 'Audience') {
|
||
|
|
item.select = false;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 打开弹窗
|
||
|
|
addingRoles(name, title) {
|
||
|
|
this.listName = name;
|
||
|
|
let treeList = [];
|
||
|
|
this.treeData.forEach(item => {
|
||
|
|
if (!item.select) {
|
||
|
|
delete item.select;
|
||
|
|
treeList.push(item);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.$refs.addPerson.doShow(title, treeList);
|
||
|
|
},
|
||
|
|
handleUserList(list) {
|
||
|
|
this.treeData.forEach(item => {
|
||
|
|
list.forEach(nor => {
|
||
|
|
if (item.id == nor.id) {
|
||
|
|
item = nor;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 移出参与人员列表
|
||
|
|
delDispatch(item, index) {
|
||
|
|
this.dispatchList.splice(index, 1);
|
||
|
|
this.handleProperty(item);
|
||
|
|
},
|
||
|
|
delEquipment(item, index) {
|
||
|
|
this.equipmentList.splice(index, 1);
|
||
|
|
this.stationList.forEach(item => {
|
||
|
|
item.disabled = false;
|
||
|
|
this.equipmentList.forEach(nor => {
|
||
|
|
if (item.code == nor.stationCode) {
|
||
|
|
item.disabled = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
this.handleProperty(item);
|
||
|
|
},
|
||
|
|
delAdmin(item, index) {
|
||
|
|
this.adminList.splice(index, 1);
|
||
|
|
this.handleProperty(item);
|
||
|
|
},
|
||
|
|
delDriver(item, index) {
|
||
|
|
this.driverList.splice(index, 1);
|
||
|
|
this.handleProperty(item);
|
||
|
|
},
|
||
|
|
delSignal(item, index) {
|
||
|
|
this.signalList.splice(index, 1);
|
||
|
|
this.handleProperty(item);
|
||
|
|
},
|
||
|
|
handleProperty(item) {
|
||
|
|
let treeIndex = this.treeData.findIndex(nor => nor.id == item.id);
|
||
|
|
if (treeIndex > -1) {
|
||
|
|
this.num--;
|
||
|
|
this.treeData[treeIndex]['select'] = false;
|
||
|
|
this.treeData[treeIndex].userRole = 'Audience';
|
||
|
|
}
|
||
|
|
let params = [{
|
||
|
|
id: item.id,
|
||
|
|
nickName: item.nickName,
|
||
|
|
userRole: 'Audience',
|
||
|
|
stationCode: '',
|
||
|
|
}];
|
||
|
|
putUserRoles(params, this.$route.query.group);
|
||
|
|
},
|
||
|
|
messageInfo(message, type) {
|
||
|
|
this.$message({
|
||
|
|
showClose: true,
|
||
|
|
message: message,
|
||
|
|
type: type,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
/deep/ {
|
||
|
|
.Scheduling {
|
||
|
|
.el-input__inner {
|
||
|
|
height: 30px;
|
||
|
|
width: 140px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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 {
|
||
|
|
padding: 0px 60px;
|
||
|
|
width: calc(100% - 500px);
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
float: left;
|
||
|
|
|
||
|
|
.Scheduling {
|
||
|
|
width: calc(50% - 10px);
|
||
|
|
float: left;
|
||
|
|
height: 250px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottomNone {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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%;
|
||
|
|
height: 40px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1325px) {
|
||
|
|
.chat-box {
|
||
|
|
width: 380px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.personnel {
|
||
|
|
width: calc(100% - 400px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|