rt-sim-training-client/src/views/newMap/jointTrainingNew/menuDemon.vue

<template>
  <div>
    <chat-box :group="group" />
    <!-- <div v-show="!minimize" class="reminder-drag">
        <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" />
            </div>
          </div>
          <div class="tabs-content">
            <div v-show="activeName == 'first'">
              <chart-view
                ref="chatView"
                :group="group"
                :station-list="stationLists"
                @showChatSpeak="showChatSpeak"
                @showChat="showChat"
                @showChatNone="showChatNone"
              />
            </div>
            <div style="flex-grow: 1">
              <chart-window
                ref="chat"
                :group="group"
                :chat-show="chatShow"
                :speaking="isSpeaking"
                :is-show-auto="isShowAuto"
                @handleChatShow="handleChatShow"
                @handleChatList="handleChatList"
              />
            </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" :is-show-auto="true" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div> -->
    <!-- <div v-show="minimize" class="reminder-drag minimize-box">
        <div class="chat-title">聊天窗口</div>
        <div class="minimality" @click="handleMinimality('max')">
          <i class="el-icon-circle-plus" />
        </div>
      </div> -->
    <div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01'}">
      <el-button-group>
        <el-button v-if="isProject" type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
        <el-button v-if="isDriver" type="jumpjlmap3d" @click="jumpjlmap3d">{{ $t('joinTraining.driverPerspective') }}</el-button>
        <template v-if="isAdmin">
          <el-button type="success" :disabled="isDisable" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
          <el-button type="danger" :disabled="!isDisable" @click="end">{{ $t('joinTraining.exitPlan') }}</el-button>
        </template>
        <el-button type="primary" :loading="backLoading" @click="back">{{ $t('global.back') }}</el-button>
      </el-button-group>
    </div>
    <qr-code ref="qrCode" />
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
    <real-device ref="realDevice" />
  </div>
</template>

<script>
import QrCode from '@/components/QrCode';
// import ChartWindow from './chatWindow';
// import ChartView from './chartView';
import ChatBox from './chatBox';
import SetTime from '@/views/newMap/displayNew/demon/setTime';
import { ranAsPlan, exitRunPlan } from '@/api/simulation';
import { exitFullscreen } from '@/utils/screen';
import { putJointTrainingSimulationUserNew} from '@/api/jointTraining';
import { EventBus } from '@/scripts/event-bus';
import { getSessionStorage } from '@/utils/auth';
import RealDevice from './menuDraft/realDevice';

export default {
    name: 'MenuDemonJoint',
    components: {
        // ChartView,
        // ChartWindow,
        ChatBox,
        QrCode,
        SetTime,
        RealDevice
    },
    props: {
        group: {
            type: String,
            required: true
        },
        userRole: {
            type: String,
            required: true
        },
        deviceCode: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            isDisable: false,
            backLoading: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: true
        };
    },
    computed: {
        lineCode() {
            return this.$route.query.lineCode;
        },
        isSpeaking() {
            return this.userRole != 'DRIVER' && this.userRole != '';
        },
        isDriver() {
            return this.userRole == 'DRIVER';
        },
        isAdmin() {
            return this.userRole == 'ADMIN';
        },
        isProject() {
            return getSessionStorage('project').endsWith('gzb') && this.userRole === 'CI';
        }
    },
    watch: {
        '$store.state.config.menuBarLoadedCount': function (val) {
            this.setPosition();
        },
        '$store.state.map.map.stationList': function (val) { // 执行一次 以后不会有变化
            if (val && val.length) {
                this.stationList = val;
                this.stationLists = val;
            }
        },
        '$store.state.socket.roleList': function (val) {
            if (val && val.length) {
                this.$nextTick(() => {
                    this.addrolesList(val);
                    this.$store.dispatch('config/updateMenuBar');
                });
            }
        },
        '$store.state.socket.simulationStart': async function (val) {
            if (val) {
                this.$store.dispatch('training/simulationStart', { start: true });
            }
        }
    },
    async mounted() {
        this.userId = this.$store.state.user.id;
        this.backLoading = false;
        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');
                // }

            } 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;
        },

        // 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 司机 MAINTAINER 通号
        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 'STATION_SUPERVISOR':
                        if (!item['deviceCode']) {
                            this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
                            break;
                        }
                        this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
                        this.$emit('getUserRole');
                        break;
                    case 'CI':
                        this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'CI');
                        this.$emit('getUserRole');
                        break;
                    case 'DRIVER':
                        this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'DRIVER');
                        this.$emit('getUserRole');
                        break;
                    case 'MAINTAINER':
                        this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'MAINTAINER');
                        this.$emit('getUserRole');
                        break;
                    case 'IBP':
                        this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'IBP');
                        this.$emit('getUserRole');
                        break;
                    case 'BIGSCREEN':
                        this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'BIGSCREEN');
                        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();
            }
        },
        initPlannedDriving(isDisable) {
            this.isDisable = isDisable;
        },
        selectBeginTime() {
            this.$refs.setTime.doShow();
        },
        start(model) {
            this.isDisable = true;
            const data = {
                time: model.initTime
            };
            ranAsPlan(data, this.group).then(res => {
                this.$store.dispatch('training/simulationStart').then(() => {
                    this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
                });
            }).catch((error) => {
                this.isDisable = false;
                if (error.code == '5001') {
                    this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5002') {
                    this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5003') {
                    this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5004') {
                    this.$messageBox(this.$t('error.runningDataError') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5000') {
                    this.$messageBox(this.$t('error.systemError') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4000') {
                    this.$messageBox(this.$t('error.simulationDoesNotExist') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4001') {
                    this.$messageBox(this.$t('error.simulationOperationIsNotDefined') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4002') {
                    this.$messageBox(this.$t('error.simulationOperationProcessingMethodNotFound') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4003') {
                    this.$messageBox(this.$t('error.simulationOperationFailed') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4004') {
                    this.$messageBox(this.$t('error.operationConflict') + ',' + this.$t('error.startSimulationFailed'));
                }
            });
        },
        end() {
            this.isDisable = false;
            EventBus.$emit('trainView');
            exitRunPlan(this.group).catch(() => {
                this.$store.dispatch('training/over').then(() => {
                    this.isDisable = true;
                    this.$messageBox(this.$t('error.endSimulationFailed'));
                });
            });
        },
        back() {
            this.$store.dispatch('training/over').then(() => {
                this.backLoading = true;
                putJointTrainingSimulationUserNew(this.group).then(() => {
                    this.$router.replace({ path: `/trainroom`, query: { lineCode: this.lineCode, group: this.group, drawWay: true } });
                    exitFullscreen();
                    this.backLoading = false;
                });
            });
        },
        jumpjlmap3d() {
            this.$emit('hidepanel');
        },
        setRelDevice() {
            this.$refs.realDevice.doShow();
        }
    }
};
</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;
        }

    }

    .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;
        }
    }

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