rt-sim-training-client/src/views/newMap/displayNew/menuScript.vue

<template>
  <div>
    <div class="display-draft">
      <!-- :style="{bottom: offsetBottom + 'px'}" -->
      <el-button-group>
        <el-button v-if="!isScriptCommand" type="success" :disabled="isDisable || dataError" @click="selectBeginTime">{{ $t('scriptRecord.drivingByPlan') }}</el-button>
        <el-button v-if="!isScriptCommand" type="danger" :disabled="dataError" @click="end">初始化</el-button>
        <el-button type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
      </el-button-group>
    </div>
    <div v-if="!dataError" class="display_top_draft" :style="{top: offset+textStatusHeight+'px'}">
      <div class="btn_hover" @click="menuClick">菜单</div>
      <el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
        <!-- 地图错误判断 -->
        <!-- 设备视图 -->
        <!-- <el-button v-if="isShow3dmodel && !isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button> -->
        <!-- 三维视图 -->
        <el-button v-if="!isShowScheduling&&!isDriver" size="small" @click="jumpjlmap3d">{{ $t('display.demon.threeDimensionalView') }}</el-button>
        <!-- 故障设备视图 -->
        <el-button v-if="isStation" size="small" @click="jumpjlmap3dFault">故障设备</el-button>
        <!-- cctv视图 -->
        <!-- <el-button v-if="!isShowScheduling" size="small" @click="jumpjl3dpassflow">{{ jl3dpassflow }}</el-button> -->
        <!-- 司机视角 -->
        <el-button v-if="isDriver" size="small" type="jumpjlmap3d" @click="jumpjlmap3dDriver">{{ $t('joinTraining.driverPerspective') }}</el-button>
      </el-button-group>
    </div>
    <script-chat ref="chatbox" :group="group" :user-role="userRole" />
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
    <tip-script-record-new ref="tipTaskRecordNew" :group="group" :offset-bottom="offsetBottom" :offset="offset" />
  </div>
</template>

<!-- 单人仿真 -->
<script>
import { getToken } from '@/utils/auth';
import ScriptChat from './scriptChat';
import TipScriptRecordNew from '@/views/scriptManage/tipScriptRecord';
import SetTime from './demon/setTime';
import { Notification } from 'element-ui';
import { ranAsPlan, exitRunPlan } from '@/api/simulation';
import { mapGetters } from 'vuex';

export default {
    name: 'MenuTask',
    components: {
        SetTime,
        ScriptChat,
        TipScriptRecordNew
    },
    props: {
        offsetBottom: {
            type: Number,
            required: true
        },
        dataError: {
            type: Boolean,
            default() {
                return false;
            }
        },
        offset: {
            type: Number,
            required: true
        },
        textStatusHeight: {
            type: Number,
            default() {
                return 0;
            }
        },
        project:{
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            isDisable: false,
            isScriptCommand:false,
            hoverBtn: false,
            btnWidth: 0
        };
    },

    computed: {
        scriptId() {
            return this.$route.query.scriptId;
        },
        ...mapGetters('map', [
            'trainList'
        ]),
        group() {
            return this.$route.query.group;
        },
        userRole() {
            return this.$store.state.scriptRecord.userRole ? this.$store.state.scriptRecord.userRole : 'ADMIN';
        },
        isDriver() {
            return this.$store.state.scriptRecord.userRole == 'DRIVER';
        },
        isShowScheduling() {
            return this.$store.state.training.prdType == '05';
        },
        isStation() {
            return this.$store.state.training.prdType == '01';
        }
    },
    watch: {
        '$store.state.scriptRecord.bgSet':function (val) {
            this.isScriptCommand = val;
        }
    },
    beforeDestroy() {
    },
    mounted() {
        // this.$store.state.training.prdType
        this.isScriptCommand = this.$store.state.scriptRecord.bgSet;
        // if (!this.isScriptCommand) {
        //     this.$store.dispatch('training/setPrdType', '02');
        // }
        this.$nextTick(() => {
            this.menuClick();
        });
    },
    methods: {
        initPlannedDriving(isDisable) {
            this.isDisable = isDisable;
        },
        selectBeginTime() {
            this.$refs.setTime.doShow();
        },
        resetBeginTime() {
            this.isDisable = false;
        },
        menuClick() {
            this.hoverBtn = !this.hoverBtn;
            if (this.hoverBtn) {
                // this.$refs.button_group_box.$el.clientWidth ||
                this.btnWidth = 500; // 默认宽度
            } else {
                // button_group_box
                this.btnWidth = 0;
            }
        },
        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().toLocaleDateString()} ${model.initTime}`));
                    this.$store.dispatch('map/setShowCentralizedStationNum');
                });
            }).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;
            exitRunPlan(this.group).then(() => {
                this.$store.dispatch('training/over').then(() => {
                    this.$store.dispatch('training/setMapDefaultState').then(() => {
                        this.$store.dispatch('map/clearJlmapTrainView');
                        this.$store.dispatch('map/resetActiveTrainList');
                        this.$store.dispatch('map/setTrainWindowShow', false);
                    });
                });
            }).catch(() => {
                this.isDisable = true;
                this.$messageBox(this.$t('display.demon.endSimulationFail'));
            });
        },
        back() {
            this.$store.dispatch('training/over').then(() => {
                this.$store.dispatch('map/resetActiveTrainList');
                history.go(-1);
                Notification.closeAll();
            });
        },
        jumpjlmap3dDriver() {
            this.$emit('script3ddriveshow');
        },
        jumpjlmap3d() {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/sandbox',
                query:{
                    mapid:this.$route.query.mapId,
                    group:this.group,
                    token:getToken(),
                    project: this.project,
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank', 'noopener noreferrer');
        },
        jumpjlmap3dFault() {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/maintainer',
                query:{
                    mapid:this.$route.query.mapId,
                    group:this.group,
                    token:getToken(),
                    project: this.project,
                    noPreLogout: true
                }
            });
            this.openWindow = window.open(routeData.href);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .display-card {
        z-index: 9;
        display: inline-block;
        position: absolute;
        top: 17px;
        left: 160px;
        height: 32px;
    }

    .display-card .el-row {
        line-height: 32px !important;
    }

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

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