rt-sim-training-client/src/views/jointTraining/menuDemon.vue

<template>
  <div>
    <!-- <div>
            <div class="reminder-drag" v-show="!minimize">
                <div v-if="userRole != '05' && userRole != ''">
                    <div class="tabs-roles">
                        <div class="roles roles-first" :class="activeName == 'first' ? 'roles-active':''"
                            @click="clickRoles('first')">角色
                        </div>
                        <div class="roles" :class="activeName == 'second' ? 'roles-active':''"
                            @click="clickRoles('second')">所有人
                        </div>
                        <div class="minimality" @click="handleMinimality('min')">
                            <i class="el-icon-remove"></i>
                        </div>
                    </div>
                    <div class="tabs-content">
                        <div v-show="activeName == 'first'">
                            <chart-view ref="chatView" @showChatSpeak="showChatSpeak" @showChat="showChat"
                                :group="group" @showChatNone="showChatNone" :stationList="stationLists">
                            </chart-view>
                        </div>
                        <div style="flex-grow: 1">
                            <chart-window ref="chat" @handleChatShow="handleChatShow" @handleChatList="handleChatList"
                                :group="group" :chatShow="chatShow" :speaking="isSpeaking" :isShowAuto="isShowAuto">
                            </chart-window>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <el-tabs v-model="activeName2" type="card">
                        <el-tab-pane label="所有人" name="second">
                            <chart-window :speaking="isSpeaking" :group="group" :isShowAuto="true"></chart-window>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="reminder-drag minimize-box" v-show="minimize">
                <div class="chat-title">聊天窗口</div>
                <div class="minimality" @click="handleMinimality('max')">
                    <i class="el-icon-circle-plus"></i>
                </div>
            </div>
        </div> -->
    <div class="display-draft">
      <el-button-group>
        <el-button v-if="this.$store.state.map.roles == 'Driver'" type="jumpjlmap3d" @click="jumpjlmap3d">司机视角</el-button>
        <el-button
          v-if="this.$store.state.map.roles == 'Admin'"
          type="success"
          :disabled="isDisable"
          @click="selectBeginTime"
        >按计划行车</el-button>
        <el-button v-if="this.$store.state.map.roles == 'Admin'" type="danger" :disabled="!isDisable" @click="end">
          退出计划</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>
    <qr-code ref="qrCode" />
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
  </div>
</template>

<script>
// import ChartView from '@/views/jointTraining/chartView';
// import ChartWindow from './chatWindow';
import QrCode from '@/components/QrCode';
import SetTime from '@/views/display/demon/setTime';
import { runDiagramIsStart, runDiagramStart, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
import { exitFullscreen } from '@/utils/screen';
import { putJointTrainingSimulationUser } from '@/api/chat';
import { timeFormat } from '@/utils/date';
import { EventBus } from '@/scripts/event-bus';

export default {
	name: 'MenuDemonJoint',
	components: {
		// ChartView,
		// ChartWindow,
		QrCode,
		SetTime
	},
	props: {
		group: {
			type: String,
			required: true
		},
		userRole: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			isDisable: false,
			timeNow: 0,
			remainingTime: 0,
			recordStep: 'BGSetting',
			training: {
				id: '',
				name: '',
				remarks: ''
			},
			chatShow: true,
			isShowAuto: false,
			offset: 10,
			userId: '',
			activeName: 'first',
			activeName2: 'second',
			stationList: [],
			stationLists: [],
			minimize: false
		};
	},
	computed: {
		isSpeaking() {
			return this.userRole != 'Driver' && this.userRole != '';
		}
	},
	watch: {
		'$store.state.config.menuBarLoadedCount': function (val) {
			this.setPosition();
		},
		'$store.state.map.map.stationList': function (val) { // 执行一次 以后不会有变化
			if (val.length) {
				this.stationList = val;
				this.stationLists = val;
			}
		},
		'$store.state.socket.roleInfo': function (val) {
			if (val.length) {
				this.addrolesList(val);
				this.$nextTick(() => {
					this.$store.dispatch('config/updateMenuBar');
				});
			}
		},
		'$store.state.socket.simulationStart': async function (val) {
			if (val) {
				await this.loadSystemTime();
				this.$store.dispatch('training/simulationStart', { start: true });
			}
		}
	},
	async mounted() {
		this.userId = this.$store.state.user.id;
		await this.initLoadPage();
	},
	beforeDestroy() {
		this.$store.dispatch('training/setGroup', '');
	},
	methods: {
		async initLoadPage() {
			try {
				const resp = await runDiagramIsStart(this.group);
				if (resp && resp.data) {
					this.isDisable = true;
					this.$store.dispatch('training/simulationStart');
				} else {
					this.isDisable = false;
					this.$store.dispatch('training/over');
				}

				await this.loadSystemTime();
			} catch (error) {
				console.log(error);
			}
		},
		// 切换角色tab
		clickRoles(active) {
			if (active == 'first') {
				this.chatShow = true;
				this.isShowAuto = false;
				this.$refs.chatView.select(); // 清空选中
				this.$refs.chat.clearPlay('', ''); // 清空自动播放 会话id

			} else {
				this.chatShow = false;
				this.isShowAuto = true;
				this.$refs.chat.getChathistory('', ''); // 获取所有人列表
			}
			this.activeName = active;
		},
		loadSystemTime() {
			runDiagramGetTime(this.group).then(response => {
				this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${timeFormat(response.data)}`));
			});
		},
		handleMinimality(data) {
			if (data == 'min') {
				this.minimize = true;
			} else {
				this.minimize = false;
			}
		},
		handleChatShow(data) {
			if (!this.minimize) { // 最大化状态
				if (this.activeName == 'first') {
					this.$refs.chatView.select(data.id);
					this.chatShow = false;
					this.isShowAuto = false;
					this.$refs.chat.handleTextList(data.conversationId);
				} else {
					this.activeName = 'first';
					this.handleChatShow(data);
				}
			} else { // 最小化状态
				this.minimize = false;
				this.handleChatShow(data);
			}
		},
		// 切到未读消息并说话
		showChatSpeak(data) {
			this.chatShow = false;
			this.isShowAuto = false;
			this.$refs.chat.handleTextList(data.conversationId);
		},
		// 获取历史纪录list
		showChat(obj) {
			this.chatShow = false;
			this.$refs.chat.getChathistory(obj.code, obj.id);
		},
		handleChatList(data) {
			this.$refs.chatView.hintInfo(data);
		},
		// 设置不显示
		showChatNone() {
			this.chatShow = true;
		},
		messageInfo(message, type) {
			this.$message({
				showClose: true,
				message: message,
				type: type
			});
		},
		setPosition() {
			this.$nextTick(() => {
				let offset = 10;
				const menuBar = document.getElementById('menuBar');
				const menuTool = document.getElementById('menuTool');

				if (menuBar) {
					offset += (menuBar.offsetHeight || 0);
				}

				if (menuTool) {
					offset += (menuTool.offsetHeight || 0);
				}

				if (this.offset != offset) {
					this.offset = offset;
				}
			});
		},
		// 设置用户角色  Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号
		addrolesList(list) {
			list.forEach(item => {
				if (this.userId == item.id) {
					switch (item.userRole) {
					case 'Instructor':
						this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Instructor');
						this.$emit('getUserRole');
						break;
					case 'Dispatcher':
						this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Dispatcher');
						this.$emit('getUserRole');
						break;
					case 'Attendant':
						if (!item['stationCode']) {
							this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Attendant');
							break;
						}
						this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'Attendant');
						this.$emit('getUserRole');
						break;
					case 'Driver':
						this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Driver');
						this.$emit('getUserRole');
						break;
					case 'Repair':
						this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Repair');
						this.$emit('getUserRole');
						break;
					default:
						this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Audience');
						this.$emit('getUserRole');
						break;
					}
				}
			});
			if (this.$refs.chatView) {
				this.$refs.chatView.getUserRole();
			}
		},
		handleClick(tab, event) {
			if (this.activeName == 'second') {
				this.$refs.chat.getChathistory();
			}
		},
		selectBeginTime() {
			this.$refs.setTime.doShow();
		},
		start(model) {
			this.isDisable = true;
			runDiagramStart(model, this.group).then(res => {
				this.$store.dispatch('training/simulationStart').then(() => {
					this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
				});
			}).catch(() => {
				this.isDisable = false;
				this.$messageBox('开始仿真失败，请返回重试');
			});
		},
		end() {
			this.isDisable = false;
			EventBus.$emit('trainView');
			runDiagramOver(this.group).catch(() => {
				this.$store.dispatch('training/over').then(() => {
					this.isDisable = true;
					this.$messageBox('结束仿真失败，请返回');
				});
			});
		},
		back() {
			this.$store.dispatch('training/over').then(() => {
				putJointTrainingSimulationUser(this.group).then(() => {
					this.$router.push({ path: `/trainroom`, query: { group: this.group } });
					exitFullscreen();
				});
			});
		},
		jumpjlmap3d() {
			this.$emit('hidepanel');
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .tabs-roles {
        overflow: hidden;
        border-bottom: 1px solid #e4e7ed;
        height: 40px;
        line-height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .roles {
            padding: 0 20px;
            height: 41px;
            list-style: none;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            cursor: pointer;
            border-left: 1px solid #e4e7ed;
            border-right: 1px solid #e4e7ed;
            float: left;
        }

        .roles-first {
            border-right: none;
        }

        .roles-active {
            border-bottom-color: #fff;
            color: #409EFF;
        }

        .minimality {
            float: right;
            line-height: 40px;
            margin-right: 10px;
            cursor: pointer;
        }
    }

    .tabs-content {
        height: 300px;
        width: 100%;
        display: flex;
    }

    .display-score {
        background-color: black;
        display: -moz-inline-box;
        display: inline-block;
        text-align: left;
        height: 32px;
        line-height: 24px;
        border-radius: 4px;
        padding-left: 2px;
        margin-left: 10px;
        font-family: "Microsoft" !important;
        font-size: 18px !important;
        color: #fff;
    }

    .reminder-drag {
        position: absolute;
        float: left;
        left: 10px;
        bottom: 10px;
        width: 500px;
        height: 340px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        z-index: 2;
        font-size: 18px;

        /deep/ {
            .el-tabs__header {
                margin: 0;
            }
        }

        .title-bar {
            height: 40px;
        }

        .content {
            height: 300px;
        }
    }

    .minimize-box {
        bottom: 10px;
        width: 300px;
        height: 40px;

        .chat-title {
            float: left;
            font-size: 16px;
            margin-left: 10px;
            line-height: 40px;
        }

        .minimality {
            float: right;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
            cursor: pointer;
        }
    }

    .display-draft {
        position: absolute;
        float: right;
        right: 40px;
        bottom: 28px;
    }
</style>