346 lines
14 KiB
Vue
346 lines
14 KiB
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 });
|
||
// }
|
||
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>
|