154 lines
3.6 KiB
Vue
154 lines
3.6 KiB
Vue
<template>
|
||
<div>
|
||
<div class="display-card" :style="{top: offset+'px'}">
|
||
<el-row>
|
||
<span v-if="countTime" class="display-score">试用时间：{{ countTime }}</span>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getGoodsTryUse } from '@/api/management/goods';
|
||
import { PermissionType } from '@/scripts/ConstDic';
|
||
import { exitFullscreen } from '@/utils/screen';
|
||
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 = {
|
||
productType: 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(`获取时间失败`);
|
||
}
|
||
}
|
||
|
||
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>
|