334 lines
13 KiB
Vue
334 lines
13 KiB
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;
|
|
this.drawWay = res.data.drawWay;
|
|
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>
|