rt-sim-training-client/src/views/planMonitor/detail.vue

<template>
  <el-card>
    <div slot="header" style="text-align: center;">
      <span class=" title">线路： {{ courseModel.name }}</span>
    </div>
    <div style="margin:50px; overflow-x: auto;" :style="{ height: height - 150 +'px' }">
      <p class="list-item">
        <span class="list-label">更新时间：</span>
        <span class="list-elem">{{ courseModel.updateTime }}</span>
      </p>
      <p class="list-item">
        <span class="list-label">权限列表：</span>
      </p>
      <limit-list ref="limitList" :course-model="courseModel" @initLoadPage="getScreenLists" />
      <p style="display: flex; justify-content: center;">
        <span class="list-label" />
        <el-button type="success" @click="buy">购买</el-button>
        <el-button v-if="hasPermssion" type="primary" @click="distribute">权限分发</el-button>
        <el-button v-if="hasPermssion" type="primary" @click="transfer">权限转赠</el-button>
        <el-button type="primary" @click="start">离线编图软件</el-button>
      </p>
    </div>
  </el-card>
</template>
<script>
// import { mapGetters } from 'vuex';
// import { getCourseLessonTree } from '@/api/management/exam';
import { getPublishMapInfo } from '@/api/jmap/map';
import { queryPermissionScreen } from '@/api/management/author';
// import { getGoodsTryUse } from '@/api/management/goods';
import { PermissionType } from '@/scripts/ConstDic';
// import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
import LimitList from '@/views/components/limits/index';

export default {
	name: 'ExamDetailList',
	components: {
		LimitList
	},
	filters: {
		setTime(val) {
			if (val <= 1) {
				return `0分钟`;
			} else if (val > 1 && val <= 60) {
				return '1分钟';
			} else if (val > 60) {
				const time = parseInt(val / 60);
				return `${time}分钟`;
			}
		}
	},
	mixins: [
		WindowResizeHandler
	],
	data() {
		return {
			height: '',
			courseModel: {
				mapId: '',
				name: '',
				skinStyle: '',
				updateTime: '',
				pmsList: []
			},
			EffectiveTypeList: [],
			screenList: []
		};
	},
	computed: {
		hasPermssion() {
			let isShow = false;
			this.courseModel.pmsList.forEach(item => {
				if (item.canDistribute) {
					isShow = true;
				}
			});
			return isShow;
		}
	},
	watch: {
		$route(newVal) {
			this.initLoadPage();
		}
	},
	async mounted() {
		this.$Dictionary.effectiveType().then(list => {
			this.EffectiveTypeList = list;
		});
		await this.getScreenLists();
		this.initLoadPage();
	},
	methods: {
		resizeHandler: function () {
			this.height = this._clientHeight;
		},
		async getScreenLists() {
			const res = await queryPermissionScreen();
			this.screenList = res.data;
			this.courseModel = {
				pmsList: this.screenList || []
			};
		},
		async initLoadPage() {
			const that = this;
			const data = { id: this.$route.params.lessonId };
			if (parseInt(data.id)) {
				try {
					const res = await getPublishMapInfo(data.id);
					this.tryUser = 0;
					that.courseModel = {
						name: res.data.name,
						mapId: res.data.id,
						skinStyle: res.data.skinStyle,
						updateTime: res.data.updateTime,
						pmsList: that.screenList || [],
						PermissionType: PermissionType.PLAN
					};

					this.$store.dispatch('training/setPrdType', res.data.prdType);
					// const paras = {
					// 	productType: PermissionType.PLAN
					// };
				} catch (error) {
					this.$messageBox('刷新失败');
				}
			}
		},
		buy() {
			this.$router.push({
				path: `${UrlConfig.plan.pay}/${this.$route.params.lessonId}`,
				query: { permissionType: PermissionType.SCREEN, prdCode: this.courseModel.prdCode, mapId: this.courseModel.mapId }
			});
		},
		transfer() {
			if (this.$refs) {
				this.$refs.limitList.transfer(this.courseModel);
			}
		},
		distribute() {
			if (this.$refs) {
				this.$refs.limitList.distribute(this.courseModel);
			}
		},
		jump() {
			const query = {
				skinStyle: this.courseModel.skinStyle, mapId: this.courseModel.mapId
			};
			this.$router.push({ path: `${UrlConfig.plan.tool}`, query: query });
		},
		start() {
			this.jump();
		}
	}
};
</script>
<style scoped>
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .title {
        font-weight: bold
    }

    .time-item {
        font-size: 24px;
        color: black !important;
    }

    .time-label {
        display: -moz-inline-box;
        display: inline-block;
        text-align: right;
        margin-left: 14px;
    }

    .time-elem {
        color: rgb(90, 89, 89) !important;
    }

    .list-item {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .list-label {
        display: -moz-inline-box;
        display: inline-block;
        text-align: right;
        /* width: 160px; */
    }

    .list-elem {
        color: #808080 !important;
    }
</style>