rt-sim-training-client/src/views/newMap/displayNew/tipTrainingDetail.vue

<template>
  <!-- v-drag  拖拽 调整宽高 -->
  <div v-quickMenuDrag class="reminder-drag">
    <div ref="drapBox" class="reminder-box" :style="{bottom: offsetBottom + 'px'}">
      <div class="tip-title">
        <i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
        <i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
        <p v-if="isShrink" style="color: #fff;">
          <span>{{ lessonName }}</span>
        </p>
      </div>
      <div ref="dragBody" class="tip-body-box">
        <div class="tip-body">
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <p class="list-item">
              <span class="list-label">{{ $t('display.training.trainingName') }}</span>
              <span class="list-elem">{{ courseModel.name }}</span>
            </p>
            <p class="list-item">
              <span class="list-label">{{ $t('display.training.bestTime') }}</span>
              <span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>
            </p>
            <p class="list-item">
              <span class="list-label">{{ $t('display.training.maximumTime') }}</span>
              <span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
            </p>
            <p class="list-item">
              <span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
              <span class="list-elem elem-span">{{ courseModel.remarks }}</span>
            </p>
          </el-scrollbar>
        </div>
        <div class="drag-right" />
        <div class="drag-left" />
        <div class="drag-bottom" />
        <div class="drag-top" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getPublishLessonDetail } from '@/api/jmap/lesson';
import { launchFullscreen } from '@/utils/screen';

export default {
    name: 'TipTrainingDetail',
    props: {
        trainingObj: {
            type: Object,
            default() {
                return null;
            }
        },
        offsetBottom: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            training: {
                id: '',
                name: '',
                remarks: ''
            },
            isShrink: true,
            lessonName: '',
            courseModel: {
                id: '',
                name: '',
                maxDuration: '',
                minDuration: '',
                remarks: '',
                updateTime: ''
            },
            showSumbit: false,
            lessonIndex: 0
        };
    },
    computed: {
        ...mapGetters('trainingList', [
            'trainingList'
        ])
    },
    watch: {
        'trainingObj': function (val) {
            if (val) {
                this.courseModel = {
                    id: val.id,
                    name: val.name,
                    maxDuration: val.maxDuration,
                    minDuration: val.minDuration,
                    remarks: val.remarks,
                    updateTime: val.updateTime
                };
            }
        }
    },
    mounted() {
        this.loadInitData(this.$route.query);
    },
    methods: {
        loadInitData(obj) {
            this.showSumbit = false;
            this.lessonName = '';
            this.courseModel = {
                id: '',
                name: '',
                maxDuration: '',
                minDuration: '',
                remarks: '',
                updateTime: ''
            };

            if (parseInt(obj.lessonId)) {
                getPublishLessonDetail({ id: obj.lessonId }).then(response => {
                    this.lessonName = response.data.name;
                }).catch(error => {
                    this.$message.error(this.$t('display.training.getCourseInformationFail') + ':' + error.message);
                });
            }
        },
        jump(obj) {
            const query = {
                group: this.$route.query.group,
                trainingId: this.$route.query.trainingId,
                lessonId: this.$route.query.lessonId
            };
            this.$router.push({ path: `/display/${this.$route.params.mode}`, query: query });
            launchFullscreen();
        },
        shrink() {
            const height = this.$refs.dragBody.offsetHeight + 40;
            const top = this.$refs.drapBox.style.top;
            if (this.isShrink) {
                this.$refs.drapBox.style.height = '40px';
                this.$refs.drapBox.style.top = '';
                this.isShrink = false;
            } else {
                this.$refs.drapBox.style.height = height + 'px';
                this.$refs.drapBox.style.top = top;
                this.isShrink = true;
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .tip-body-box {
        position: relative;
        height: 260px;
    }

    .reminder-drag{
      position: relative;
    }

    .elem-span{
        display:inline-block;width:77%;line-height:26px;margin-top:-4px;
    }

    .reminder-box {
        position: absolute;
        float: left;
        left: 15px;
        bottom: 15px;
        width: 500px;
        height: 300px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        z-index: 10;
        font-size: 18px;

        .tip-title {
            width: 100%;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            background-color: #409EFF;
            border-radius: 5px 5px 0 0;
            justify-content: space-between;
            padding: 0 10px;
        }

        .drag-right,
        .drag-left {
            width: 10px;
            cursor: e-resize;
            background-color: yellow;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .drag-left {
            left: 0;
        }

        .drag-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 10px;
            cursor: s-resize;
            background-color: yellow;
            opacity: 0;
        }

        .drag-top {
            position: absolute;
            top: -45px;
            left: 0;
            width: 100%;
            height: 10px;
            cursor: s-resize;
            background-color: yellow;
            opacity: 0;
        }

        .tip-body {
            height: 366px;
            padding: 10px;

            .list-label {
                width: 105px;
            }
        }

        .tip-foot {
            width: 100%;
            position: absolute;
            right: 0px;
            bottom: 0px;
            background-color: #fff;
            padding: 10px 0 10px 10px;

            .foot-detail {
                height: 100%;
                float: right;
                margin-top: 9px;
                padding-right: 15px;
            }

            .foot-submit {
                float: right;
                margin-top: 9px;
                padding-right: 15px;
            }
        }

        .icon {
            float: right;
            margin-right: 10px;
            cursor: pointer;
            background-color: #f3f3f3;
            border-radius: 50%;
        }

        /deep/ {
            .el-tree-node__content {
                margin-bottom: 4px;
            }

            .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #d6e5f7;
            }
        }
    }
</style>