152 lines
4.5 KiB
Vue
152 lines
4.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="display-card" :style="{top: offset+'px'}">
|
|
<el-row>
|
|
<span v-if="countTime" class="display-score">{{ $t('display.screen.trialTime') }} {{ countTime }}</span>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getGoodsTryUse } from '@/api/management/goods';
|
|
import { PermissionType } from '@/scripts/ConstDic';
|
|
import { getCountTime } from '@/utils/index';
|
|
import { runDiagramIsStart, runDiagramGetTime, runDiagramStart } from '@/api/simulation';
|
|
import { timeFormat } from '@/utils/date';
|
|
|
|
export default {
|
|
name: 'MenuScreen',
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tryTime: 0, // 进入页面多少秒
|
|
timeNow: 0, // 进入页面 相对时间
|
|
time: null, // 定时器
|
|
countTime: 0, // 显示 倒计时
|
|
remainingTime: 0,
|
|
goodsId: this.$route.query.goodsId,
|
|
try: this.$route.query.try, // 是否是试用权限
|
|
training: {
|
|
id: '',
|
|
name: '',
|
|
remarks: ''
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
'$store.state.training.subscribeCount': function () {
|
|
this.group && this.initLoadPage();
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
if (this.time) {
|
|
this.setTryTime();
|
|
clearTimeout(this.time);
|
|
}
|
|
},
|
|
methods: {
|
|
async initLoadPage() {
|
|
try {
|
|
if (this.try != '0') {
|
|
const data = {
|
|
permissionType: PermissionType.SCREEN
|
|
};
|
|
|
|
const resr = await getGoodsTryUse(data);
|
|
if (resr && resr.code == 200) {
|
|
this.remainingTime = resr.data.tryTime;
|
|
this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
|
|
if (this.try) {
|
|
this.time = setInterval(() => {
|
|
this.tryTime += 1;
|
|
this.countTime = getCountTime(this.timeNow);
|
|
if (this.countTime == -1) {
|
|
this.back();
|
|
}
|
|
}, 1000);
|
|
}
|
|
} else {
|
|
this.$messageBox(this.$t('display.screen.getTimeFail'));
|
|
}
|
|
}
|
|
|
|
const initTime = this.$route.query.initTime;
|
|
const retp = await runDiagramIsStart(this.group);
|
|
if (retp && !retp.data) {
|
|
await runDiagramStart({ initTime: initTime }, this.group);
|
|
}
|
|
|
|
await this.$store.dispatch('training/simulationStart');
|
|
await this.loadSystemTime();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
async loadSystemTime() {
|
|
const rest = await runDiagramGetTime(this.group);
|
|
if (rest && rest.code == 200) {
|
|
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${timeFormat(rest.data)}`));
|
|
}
|
|
},
|
|
setTryTime() {
|
|
if (this.try) {
|
|
this.$emit('tryTime', { time: this.tryTime, goodsId: this.goodsId });
|
|
}
|
|
},
|
|
back() {
|
|
this.$store.dispatch('training/over').then(() => {
|
|
Notification.closeAll();
|
|
history.go(-1);
|
|
// exitFullscreen();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.display-card {
|
|
z-index: 9;
|
|
display: inline;
|
|
position: absolute;
|
|
top: 17px;
|
|
left: 30px;
|
|
}
|
|
|
|
.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>
|