rt-sim-training-client/src/views/demonstration/detail/index.vue

<template>
  <div v-loading="loading" class="joylink-card">
    <div class="card-title">
      <span><b>{{ $t('demonstration.simulationName') + courseModel.name }}</b></span>
    </div>
    <div class="simulation-detail">
      <p class="list-item">
        <span class="list-label">{{ $t('demonstration.productDescription') }}</span>
        <span class="list-elem">{{ courseModel.remarks }}</span>
      </p>
      <p class="list-item">
        <span class="list-label">{{ $t('global.permissionList') }}</span>
      </p>
      <limit-list :ref="`limit`" :course-model="courseModel" @initLoadPage="refresh" />
    </div>
    <div class="btn-buy">
      <el-button type="success" :disabled="disabled" @click="buy">{{ $t('global.buy') }}</el-button>
      <el-button v-if="hasPermssion && !isComprehensive" type="primary" :disabled="disabled" @click="distribute">{{ $t('global.distributePermission') }}</el-button>
      <el-button v-show="isStartDemon" :disabled="disabled" type="primary" @click="start">{{ $t('demonstration.startSimulation') }}</el-button>
      <el-button v-show="isCreateRoom" :disabled="disabled" type="primary" @click="start">{{ $t('demonstration.createRoom') }}</el-button>
      <el-button v-show="isInRoom" :disabled="disabled" type="primary" @click="joinRoom">{{ $t('demonstration.enterRoom') }}</el-button>
    </div>
  </div>
</template>

<script>
import { getPublishMapInfo } from '@/api/jmap/map';
import { getGoodsTryUse } from '@/api/management/goods';
import { PermissionType } from '@/scripts/ConstDic';
import { launchFullscreen } from '@/utils/screen';
import { postCreateRoom, getjointTraining, checkRoomExist } from '@/api/chat';
import { UrlConfig } from '@/router/index';
import { simulationNotify, schedulingNotify, createSimulationNew } from '@/api/simulation';
import LimitList from '@/views/components/limits/index';
import { getSubSystemDetail } from '@/api/trainingPlatform';

export default {
    name: 'ExamDetailList',
    components: {
        LimitList
    },
    data() {
        return {
            tryTime: 0,
            goodsId: '',
            tryUser: 0,
            loading: true,
            disabled: false,
            currentLessonId: '',
            currentPrdType: '',
            productList: [],
            courseModel: {
                id: '',
                name: '',
                mapId: '',
                lineCode: '',
                remarks: '',
                prdType: '',
                pmsList: []
            },
            jointShow: false,
            jointGroup: '',
            lineCode:'',
            drawWay: false // 是否新版地图
        };
    },
    computed: {
        hasPermssion() {
            let isShow = false;
            if (this.courseModel.pmsList && this.courseModel.pmsList.length) {
                let count = 0;
                this.courseModel.pmsList.forEach(element => {
                    count += element.remains;
                });
                if (count > 0) {
                    isShow = true;
                }
            }
            return isShow;
        },
        isComprehensive() {
            return this.courseModel.prdType === '03';
        },
        isStartDemon() {
            return this.courseModel.prdType !== '03' && (this.hasPermssion || this.tryTime > 0);
        },
        isCreateRoom() {
            return this.courseModel.prdType === '03' && this.hasPermssion && !this.jointShow;
        },
        isInRoom() {
            return this.courseModel.prdType === '03' && this.hasPermssion && this.jointShow;
        },
        mapId() {
            return this.$route.query.mapId;
        }
    },
    watch: {
        '$route': function (val) {
            this.loadInitData();
        }
    },
    async mounted() {
        this.loadInitData();
    },
    methods: {
        async loadInitData() {
            this.loading = true;
            try {
                const res = await getPublishMapInfo(this.mapId);
                const resp = await getSubSystemDetail(this.$route.params.subSystem);
                this.tryUser = 0;
                this.loading = false;
                const remarksList = {'01':'ATS现地工作站原理级仿真实训课程', '02':'ATS行调工作站原理级仿真实训课程', '03':'各岗位应急综合演练', '04':'桌面版模拟驾驶系统', '05':'派班工作站主要是供车辆段/停车场派班员进行派班操作，可以自动生成派班计划，极大的简化了派班计划管理的复杂性'};
                this.courseModel = {
                    id: resp.data.id,
                    name: resp.data.name,
                    mapId: this.mapId,
                    lineCode: res.data.lineCode,
                    remarks: remarksList[resp.data.prdType],
                    prdType: resp.data.prdType,
                    pmsList: resp.data.permissionList || [],
                    PermissionType: PermissionType.SIMULATION
                };
                this.currentPrdType = resp.data.prdType;
                if (resp.data.prdType === '03') {
                    this.getJointTrainingList();
                }
                if (!this.courseModel.pmsList) {
                    this.tryUser = 1;
                    const paras = {
                        mapId: this.mapId,
                        prdType: this.courseModel.prdType,
                        permissionType: PermissionType.SIMULATION
                    };

                    try {
                        const resr = await getGoodsTryUse(paras);
                        if (resr.data.tryTime <= 0) {
                            this.tryTime = 0;
                        } else {
                            this.tryTime = resr.data.tryTime;
                            this.goodsId = resr.data.goodsId;
                        }
                    } catch (error) {
                        this.tryTime = 0;
                    }
                }
            } catch (error) {
                this.loading = false;
                this.$messageBox(this.$t('error.refreshFailed') + error);
            }
        },
        refresh() {
            this.loadInitData();
        },
        async getJointTrainingList() {
            try {
                if (this.mapId) {
                    const res = await checkRoomExist({ mapId: this.mapId });
                    this.jointGroup = res.data;
                    this.jointShow = false;
                    if (res.data) {
                        this.jointShow = true;
                    }
                }
            } catch (error) {
                console.error(error, '获取是否拥有综合演练房间');
            }
        },
        async joinRoom() {
            this.disabled = true;
            await getjointTraining(this.jointGroup);
            const query = { lineCode: this.courseModel.lineCode, group: this.jointGroup};
            this.$router.push({ path: `/trainroom`, query: query });
        },
        async createRoom() {
            try {
                this.disabled = true;
                const param = {
                    mapId: Number(this.mapId),
                    prdType: this.courseModel.prdType
                };
                const res = await postCreateRoom(param);
                if (res && res.code == 200) {
                    const query = { lineCode: this.courseModel.lineCode, group: res.data };
                    this.$router.push({ path: `/trainroom`, query: query });
                }
            } catch (error) {
                this.disabled = false;
                if (error.code == 20001) {
                    this.$confirm(this.$t('tip.createRoomFailedHint'), this.$t('global.tips'), {
                        confirmButtonText: this.$t('global.confirm'),
                        cancelButtonText: this.$t('global.cancel'),
                        type: 'warning'
                    }).then(() => {}).catch(() => {});
                }
                if (error.code == 500009) {
                    this.$messageBox(error.message);
                }
            }
        },
        async start() {
            if (this.courseModel.prdType == '05') {
                this.jumpScheduling();
            } else if (this.courseModel.prdType == '03') {
                this.createRoom();
            } else {
                if (this.courseModel.pmsList && this.courseModel.pmsList.length) {
                    this.jump();
                } else {
                    if (this.tryTime <= 1) {
                        this.$confirm(this.$t('tip.noPermissionHint'), this.$t('global.tips'), {
                            confirmButtonText: this.$t('global.confirm'),
                            cancelButtonText: this.$t('global.cancel'),
                            type: 'warning'
                        }).then(() => {
                            this.buy();
                        }).catch(() => { });
                    } else {
                        this.jump();
                    }
                }
            }
        },
        jumpScheduling() {
            this.disabled = true;
            setTimeout(() => {
                const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType };
                schedulingNotify(data).then(resp => {
                    const query = { lineCode: this.courseModel.lineCode, group: resp.data, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, goodsId: this.goodsId, try: this.tryUser };
                    if (this.drawWay) {
                        this.$router.push({ path: `${UrlConfig.displayNew}/demon`, query: query });
                    } else {
                        this.$router.push({ path: `${UrlConfig.display}/demon`, query: query });
                    }
                    launchFullscreen();
                }).catch(error => {
                    this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                    this.disabled = false;
                });
            }, 100);
        },
        jump() {
            this.disabled = true;
            setTimeout(() => {
                if (!this.drawWay) {
                    const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType };
                    simulationNotify(data).then(resp => {
                        const query = { lineCode: this.courseModel.lineCode, group: resp.data, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, goodsId: this.goodsId, try: this.tryUser };
                        this.$router.push({ path: `${UrlConfig.display}/demon`, query: query });
                        launchFullscreen();
                    }).catch(error => {
                        this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                        this.disabled = false;
                    });
                } else {
                    const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType };
                    createSimulationNew(data).then(resp => {
                        const query = { lineCode: this.courseModel.lineCode, group: resp.data, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, goodsId: this.goodsId, try: this.tryUser };
                        this.$router.push({ path: `${UrlConfig.displayNew}/demon`, query: query });
                        launchFullscreen();
                    }).catch(error => {
                        this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                        this.disabled = false;
                    });
                }
            }, 100);
        },
        buy() {
            // this.disabled = true;
            // setTimeout(() => {
            //     this.$router.push({
            //         path: `${UrlConfig.trainingPlatform.pay}/${this.courseModel.id}`,
            //         query: { permissionType: PermissionType.SIMULATION, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, subSystem: this.$route.params.subSystem }
            //     });
            // }, 100);
            this.$messageBox(this.$t('global.buyingTips'));
        },
        distribute() {
            this.disabled = true;
            if (this.$refs) {
                this.$refs[`limit`].distribute(this.courseModel);
            }
            this.disabled = false;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .joylink-card{
        height: 100%;
        overflow: hidden;
        .card-title{
            height: 47px;
            line-height: 47px;
            text-align: center;
            border-bottom: 1px solid #d6d6d6;
        }
    }
    .simulation-detail {
        padding: 50px;
        padding-bottom: 0;
        height: calc(100% - 107px);
        overflow: auto;
    }

    .list-item {
        font-size: 14px;
        margin-bottom: 20px;
        padding: 0px;
    }

    .list-label {
        display: -moz-inline-box;
        display: inline-block;
        text-align: left;
    }

    .list-elem {
        color: #808080 !important;
    }

    .btn-buy {
        text-align: center;
        padding: 10px 0;
    }

    .el-tabs--border-card>.el-tabs__header .el-tabs__item {
        font-weight: bold !important;
    }
</style>