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" :courseModel="courseModel" @InitLoadPage="getScreenLists"></limit-list>
            <p style="display: flex; justify-content: center;">
                <span class="list-label"></span>
                <el-button type="success" @click="buy">购买</el-button>
                <el-button type="primary" @click="distribute" v-if="hasPermssion">权限分发</el-button>
                <el-button type="primary" @click="transfer" v-if="hasPermssion">权限转赠</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 { listPublishMap, 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',
        mixins: [
            WindowResizeHandler
        ],
        components: {
            LimitList
        },
        data() {
            return {
                height: '',
                courseModel: {
                    mapId: '',
                    name: '',
                    skinStyle: '',
                    updateTime: '',
                    pmsList: [],
                },
                EffectiveTypeList: [],
                screenList: [],
            }
        },
        mixins: [
            WindowResizeHandler
        ],
        filters: {
            setTime(val) {
                if (val <= 1) {
                    return `0分钟`;
                } else if (1 < val && val <= 60) {
                    return '1分钟';
                } else if (val > 60) {
                    let time = parseInt(val / 60);
                    return `${time}分钟`;
                }
            }
        },
        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() {
                let res = await queryPermissionScreen();
                this.screenList = res.data;
                this.courseModel = {
                    pmsList: this.screenList || [],
                };
            },
            async InitLoadPage() {
                let that = this;
                let data = { id: this.$route.params.lessonId };
                if (parseInt(data.id)) {
                    try {
                        let 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('map/setPrdType', res.data.prdType)
                        let 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() {
                let 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>