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;">综合实训管理者: {{ 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 :group-room="roomInfo.group" />
      </div>
      <!-- 参与人员 -->
      <div class="personnel">
        <div style="height: calc(100% - 20px); overflow-y: scroll;">
          <div style="display: flex; justify-content: space-between;">
            <div class="Scheduling">
              <p class="title">调度员</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 bottomNone">
              <p class="title">车站值班员</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="handleDelEquipment(nor, index)"
                  />
                  <div style="float: right; margin-right: 15px;">
                    <el-select
                      v-model="nor.deviceCode"
                      placeholder="请选择"
                      size="mini"
                      :disabled="userId != roomInfo.creatorId"
                      @change="changeEquipment(nor)"
                    >
                      <el-option
                        v-for="item in stationList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      />
                    </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">教员</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">通号</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 bottomNone">
              <p class="title">司机</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 bottomNone">
              <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="handleDelUser(ibpList, nor, index)"
                  />
                </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 class="start-box">
            <div v-if="!starting" style="float: right; margin-left: 10px;">
              <el-button
                v-if="userId == roomInfo.creatorId"
                type="primary"
                style="float: right;"
                :loading="loading"
                @click="start"
              >
                开始仿真</el-button>
            </div>
            <div v-else>
              <el-button
                type="primary"
                style="float: right; margin-right: 10px;"
                :loading="loading"
                @click="joinJointTrain"
              >
                进入仿真</el-button>
              <el-button
                v-if="userId == roomInfo.creatorId"
                type=""
                style="float: right; margin-right: 10px;"
                :loading="loading"
                @click="stop"
              >
                结束仿真</el-button>
            </div>
            <el-button
              v-if="userId == roomInfo.creatorId"
              type=""
              style="float: right; margin-right: 0px;"
              :loading="loading"
              @click="postCode"
            >生成二维码
            </el-button>
            <el-button type="" style="float: right; margin-right: 10px;" @click="backRoom">返回
            </el-button>
            <el-button
              v-if="userId == roomInfo.creatorId"
              type="danger"
              style="float: right; margin-right: 0px;"
              :loading="loading"
              @click="exit"
            >销毁房间
            </el-button>
          </div>
        </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="输入名称进行过滤" 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 } from '@/api/chat';
import { getStationList } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { DeviceMenu } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
import { getPublishMapInfo } from '@/api/jmap/map';
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 {
			userId: '',
			roomInfo: {
				creator: '',
				totalNum: '',
				creatorId: '',
				group: '',
				audienceNum: '',
				permissionNum: ''
			},
			filterText: '',
			isShow: false,
			listName: 'dispatch',
			treeData: [],
			defaultProps: {
				label: 'nickName'
			},
			dispatchList: [],
			equipmentList: [],
			adminList: [],
			driverList: [],
			signalList: [],
			stationList: [], // 车站列表
			ibpList: [],
			point: {
				x: 0,
				y: 0
			},
			clickUserId: '', // 选择踢出用户id
			timeDemon: null,
			starting: false,
			mapId: '',
			num: 0,
			loading: false
		};
	},
	computed: {
		height() {
			return this.$store.state.app.height - 95;
		}
	},
	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: {
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		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: `/demonstration/detail/${param.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 };
				this.$router.push({ path: `/jointTraining`, query: query });
				launchFullscreen();
			}
			this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
		},
		//  获取房间状态
		async getRoomState() {
			const 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() {
			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 };
			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('您被管理员踢出房间。', 'warning');
				} else {
					param.userRole = '';
					param['deviceCode'] = '';
					const 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;
				case 'IBP':
					this.ibpList.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--;
						}
					});
					this.ibpList.forEach((nor, index) => {
						if (item.id == nor.id) {
							this.ibpList.splice(index, 1);
							this.num--;
						}
					});
					break;
				}
			});
		},
		async getRoomInfo() {
			// 获取房间信息 创建人和权限总数
			const 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
			};

			// 获取设备集中站
			const 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.deviceCode) {
						item.disabled = true;
					}
				});
			});
		},
		// 获取观众席list 分配角色    Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号 IBP IBP盘
		async getUserList() {
			this.num = 0;
			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;
				}
				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);
					break;
				case 'IBP':
					item.select = true;
					this.ibpList.push(item);
					break;
				}
				this.treeData.push(item);
			});
		},
		async postCode() {
			this.loading = true;
			const res = await getJoinTrainCode({}, this.$route.query.group);
			if (res.code == '200') {
				const param = {
					url: res.data,
					title: '分发房间二维码'
				};
				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('开始综合演练失败。', 'error');
					this.loading = false;
				}
			} else {
				this.messageInfo('车站值班员所属车站不能为空', '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: `/demonstration/detail/${this.mapId}` });
			} catch (error) {
				this.messageInfo('操作失败！', 'error');
			}
		},
		// 管理员销毁房间
		exit() {
			this.loading = false;
			this.$confirm('您将销毁房间，是否确定执行此操作', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					await deljointTrainRoom(this.$route.query.group);
				} catch (error) {
					this.messageInfo('销毁房间失败！', 'error');
				}
			});
		},
		// 设置所属集中站信息
		changeEquipment(val) {
			const params = [{
				id: val.id,
				nickName: val.nickName,
				userRole: 'Attendant',
				deviceCode: val.deviceCode
			}];
			putUserRoles(params, this.$route.query.group);
			this.stationList.forEach(item => {
				item.disabled = false;
				this.equipmentList.forEach(nor => {
					if (item.code == nor.deviceCode) {
						item.disabled = true;
					}
				});
			});
		},
		// 打开弹窗
		addingRoles(name, 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;
				}
				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;
						}
					});
				}
			}
		},
		handleUserList(list) {
			this.treeData.forEach(item => {
				list.forEach(nor => {
					if (item.id == nor.id) {
						item = nor;
					}
				});
			});
		},
		handleDelUser(list, item, index) {
			list.splice(index, 1);
			this.handleProperty(item);
		},
		handleDelEquipment(item, index) {
			this.equipmentList.splice(index, 1);
			this.stationList.forEach(item => {
				item.disabled = false;
				this.equipmentList.forEach(nor => {
					if (item.code == nor.deviceCode) {
						item.disabled = true;
					}
				});
			});
			this.handleProperty(item);
		},
		handleProperty(item) {
			const treeIndex = this.treeData.findIndex(nor => nor.id == item.id);
			if (treeIndex > -1) {
				this.num--;
				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
			});
		}
	}
};
</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 20px;
        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>