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

<template>
  <div v-loading="loading" class="demonstrateDetail">
    <div class="card-title">
      {{ $t('demonstration.simulationName') + courseModel.name }}
    </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 v-if="!isLocal" type="success" :disabled="disabled" @click="buy">{{ $t('global.buy') }}</el-button> -->
      <el-button v-if="hasPermssion && !isComprehensive && !isLocal" type="primary" :disabled="disabled" @click="distribute">{{ $t('global.distributePermission') }}</el-button>
      <el-button :disabled="disabled" type="primary" @click="start">{{ $t('demonstration.startSimulation') }}</el-button>
    </div>
  </div>
</template>

<script>
import { getPublishMapInfo } from '@/api/jmap/map';
import { getGoodsTryUse } from '@/api/management/goods';
import { PermissionType, UrlConfig } from '@/scripts/ConstDic';
import { launchFullscreen } from '@/utils/screen';
import { createSimulationNew } from '@/api/simulation';
import { createSimulation } from '@/api/rtSimulation';
import LimitList from '@/views/components/limits/index';
import { getSubSystemDetail } from '@/api/trainingPlatform';
import { getSessionStorage } from '@/utils/auth';
import localStore from 'storejs';

export default {
    name: 'SimulationDetailList',
    components: {
        LimitList
    },
    data() {
        return {
            tryTime: 0,
            goodsId: '',
            tryUser: 0,
            newApi: false,
            loading: false,
            disabled: false,
            currentPrdType: '',
            courseModel: {
                id: '',
                name: '',
                mapId: '',
                lineCode: '',
                remarks: '',
                prdType: '',
                pmsList: []
            },
            lineCode:'',
            loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts']
        };
    },
    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 this.$store.state.user.companyId || isShow;
        },
        isLocal() { // 是否为本地项目
            return process.env.VUE_APP_PRO === 'local';
        },
        isComprehensive() {
            return this.courseModel.prdType === '03';
        },
        mapId() {
            return this.$route.query.mapId;
        },
        project() {
            return getSessionStorage('project');
        }
    },
    watch: {
        '$route': function (val, oldval) {
            this.loadInitData();
        }
    },
    async mounted() {
        this.loadInitData();
    },
    methods: {
        async loadInitData() {
            this.loading = true;
            try {
                let res;
                try {
                    res = await getPublishMapInfo(this.mapId);
                } catch (error) {
                    if (error.code == 30001 || error.code == 10007) {
                        const url = localStore.get('orignalTrainingPlatformRoute' + this.$store.state.user.id + this.project);
                        localStore.remove();
                        if (url) {
                            this.$router.push(url);
                        }
                    }
                }
                const resp = await getSubSystemDetail(this.$route.params.subSystem);
                this.tryUser = 0;
                this.loading = false;
                const remarksList = {
                    '01':'ATS现地工作站原理级仿真系统，实现车站值班员培训功能。',
                    '02':'ATS行调工作站原理级仿真系统，实现行车调度员培训功能。',
                    '03':'各岗位应急综合演练',
                    '04':'桌面版模拟驾驶系统，实现列车驾驶员培训功能。',
                    '05':'派班工作站主要是供车辆段/停车场派班员进行派班操作，可以自动生成派班计划，极大的简化了派班计划管理的复杂性。',
                    '06': '综合监控工作站原理级仿真系统，实现电调、环调及车站值班员培训功能。',
                    '07':'大屏仿真系统，可显示全线全站场实时状况，便于教学及观摩使用。'
                };
                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.newApi = resp.data.newApi;
                this.currentPrdType = resp.data.prdType;
                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.$message.error(this.$t('error.refreshFailed'));
            }
        },
        refresh() {
            this.loadInitData();
        },
        async enterIntegratedSimulation() {
            this.disabled = true;
            const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType };
            createSimulationNew(data).then(resp => {
                const query = { lineCode: this.courseModel.lineCode, group: resp.data, mapId: this.courseModel.mapId};
                if (this.loadingProjectList.includes(this.project)) {
                    this.$store.dispatch('app/transitionAnimations');
                }
                this.$router.push({ path: `/jointTrainingNew`, query: query });
                launchFullscreen();
            }).catch(error => {
                if (error.code == 10003) {
                    this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
                } else {
                    this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                }
                this.disabled = false;
            });
        },
        async enterISCS() {
            try {
                this.disabled = true;
                const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType, lineCode: this.courseModel.lineCode };
                let res = {};
                res = await createSimulationNew(data);
                if (res && res.code == 200) {
                    const query = { group: res.data, lineCode:this.courseModel.lineCode, mapId: this.courseModel.mapId };
                    this.$router.push({ path: `/displayIscs/system`, query: query });
                }
            } catch (error) {
                if (error.code == 10003) {
                    this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
                } else {
                    this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                }
                this.disabled = false;
            }
        },
        async enterScreen() {
            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 };
                if (this.loadingProjectList.includes(this.project)) {
                    this.$store.dispatch('app/transitionAnimations');
                }
                this.$router.push({ path: `/displayBigScreen/${this.courseModel.mapId}`, query: query });
            }).catch(error => {
                if (error.code == 10003) {
                    this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
                } else {
                    this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                }
                this.disabled = false;
            });
        },
        async start() {
            const jumpFunc = ['jump', 'jump', 'enterIntegratedSimulation', 'jump', 'jumpScheduling', 'enterISCS', 'enterScreen'];
            this[jumpFunc[parseInt(this.courseModel.prdType) - 1]]();
        },
        jumpSimulation() {
            this.disabled = true;
            const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType };
            if (this.newApi) {
                createSimulation(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, project: this.project, newApi: this.newApi };
                    this.$store.dispatch('training/setPrdType', this.currentPrdType); // 改变prdType
                    if (this.loadingProjectList.includes(this.project)) {
                        this.$store.dispatch('app/transitionAnimations');
                    }
                    this.$router.push({ path: `/displayCity/demon`, query: query });
                    launchFullscreen();
                }).catch(error=>{
                    if (error.code == 10003) {
                        this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
                    } else {
                        this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                    }
                    this.disabled = false;
                });
            } else {
                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, project: this.project, newApi: this.newApi };
                    this.$store.dispatch('training/setPrdType', this.currentPrdType); // 改变prdType
                    if (this.loadingProjectList.includes(this.project)) {
                        this.$store.dispatch('app/transitionAnimations');
                    }
                    if (this.currentPrdType === '02' && this.courseModel.lineCode === '14') {
                        this.$router.push({ path: `/displayBaSiDi/demon`, query: query });
                    } else {
                        this.$router.push({ path: `${UrlConfig.displayNew}/demon`, query: query });
                    }
                    launchFullscreen();
                }).catch(error=>{
                    if (error.code == 10003) {
                        this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
                    } else {
                        this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                    }
                    this.disabled = false;
                });
            }

        },
        jumpScheduling() {
            this.jumpSimulation();
        },
        jump() {
            this.jumpSimulation();
        },
        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>
    .demonstrateDetail{
        height: 100%;
        border: 1px solid #EBEEF5;
        overflow: hidden;
        display:flex;
        flex-direction: column;
    }
    .card-title{
        width: 100%;
        height: 47px;
        line-height: 47px;
        text-align: center;
        border-bottom: 1px solid #d6d6d6;
        font-weight: bold;
    }
    .simulation-detail {
        padding: 50px;
        padding-bottom: 0;
        overflow: auto;
        flex: 1;
    }

    .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;
        flex-shrink: 0;
    }

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