kd-aiot-frontend-ehs/src/views/safetyTraining/components/learningPreview.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="学习预览"
    width="90vw"
    :fullscreen="true"
    append-to-body
    :close-on-click-modal="false"
    :maxable="true"
    @close="cancel"
  >
    <div class="preview-container">
      <!-- 左侧树形 -->
      <div class="left-tree">
        <div class="tree-header">{{ treeTitle }}</div>
        <el-tree
          ref="treeRef"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span :class="{ 'not-learned': data.isLeaf }">{{
              node.label
            }}</span>
            <span v-if="data.duration" class="node-duration">{{
              data.duration
            }}</span>
          </span>
        </el-tree>
      </div>

      <!-- 右侧内容 -->
      <div class="right-content">
        <div class="content-title">{{ currentTitle }}</div>
        <div class="iframe-wrapper">
          <!-- 附件预览：按 视频 / 图片 / 文档 分别渲染 -->
          <file-preview :ids="currentFileIds" class="preview-files" />

          <!-- 开始学习遮罩 -->
          <div v-if="showOverlay" class="start-overlay">
            <el-button type="primary" @click="handleStartLearn">
              开始学习
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <template v-slot:footer>
      <el-button @click="cancel">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import FilePreview from '@/components/FilePreview/index.vue';
  import { learn } from '@/api/onlineTrainingPlan/index.js';

  export default {
    components: {
      FilePreview
    },
    data() {
      return {
        visible: false,
        treeTitle: '',
        currentTitle: '',
        // 当前选中培训资源的附件id集合
        currentFileIds: [],
        showOverlay: true,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeData: [],
        // 当前学习的任务ID
        currentTaskId: null,
        // 每分钟上报学习进度的定时器
        learnTimer: null
      };
    },
    beforeDestroy() {
      this.stopLearnTimer();
    },
    methods: {
      open(row, needReport = false) {
        this.visible = true;
        this.currentTaskId = row && row.id ? row.id : null;
        const resources = (row && row.trainingResourceList) || [];
        const materialName = (row && row.materialName) || '培训资料';
        const children = resources.map((item, index) => ({
          id: item.id || `resource-${index}`,
          label: item.resourceName || `培训资源${index + 1}`,
          duration: item.suggestDuration
            ? `总时长: ${item.suggestDuration} 分钟`
            : '',
          attachment: this.parseAttachment(item.attachment),
          isLeaf: true
        }));
        this.treeTitle = materialName;
        this.currentTitle = children.length ? children[0].label : materialName;
        this.currentFileIds = children.length ? children[0].attachment : [];
        this.treeData = [
          {
            id: row.id || 'material',
            label: materialName,
            children
          }
        ];
        this.showOverlay = true;
        // 仅在「开始学习」调用时开启定时上报
        if (needReport) {
          this.startLearnTimer();
        }
        this.$nextTick(() => {
          if (children.length) {
            this.$refs.treeRef.setCurrentKey(children[0].id);
          }
        });
      },
      // 每分钟上报一次学习进度
      startLearnTimer() {
        this.stopLearnTimer();
        if (!this.currentTaskId) {
          return;
        }
        this.learnTimer = setInterval(() => {
          this.reportLearn();
        }, 60 * 1000);
      },
      stopLearnTimer() {
        if (this.learnTimer) {
          clearInterval(this.learnTimer);
          this.learnTimer = null;
        }
      },
      // 上报当前学习进度，无需传入learnedTime
      async reportLearn() {
        if (!this.currentTaskId) {
          return;
        }
        try {
          await learn({ taskId: this.currentTaskId });
        } catch (error) {
          this.$message.error(error.message || '学习进度上报失败');
        }
      },
      cancel() {
        this.stopLearnTimer();
        this.visible = false;
        this.showOverlay = true;
        this.currentFileIds = [];
        this.currentTaskId = null;
      },
      // 附件id标准化，兼容字符串和数组
      parseAttachment(attachment) {
        if (!attachment) {
          return [];
        }
        const list = Array.isArray(attachment)
          ? attachment
          : String(attachment).split(',');
        return list
          .map((item) => String(item || '').trim())
          .filter((item) => item);
      },
      handleNodeClick(data) {
        this.currentTitle = data.label;
        this.currentFileIds = data.attachment || [];
        this.showOverlay = true;
      },
      handleStartLearn() {
        this.showOverlay = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .preview-container {
    display: flex;
    height: calc(90vh - 160px);
    min-height: 500px;
  }

  .left-tree {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #ebeef5;
    overflow-y: auto;

    .tree-header {
      padding: 12px 15px;
      font-weight: bold;
      font-size: 14px;
      border-bottom: 1px solid #ebeef5;
    }

    ::v-deep .el-tree {
      padding: 10px;

      .el-tree-node__content {
        height: 36px;
      }
    }
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding-right: 8px;

    .not-learned {
      color: #409eff;
    }

    .node-duration {
      color: #909399;
      font-size: 12px;
      margin-left: 8px;
    }
  }

  .right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;

    .content-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      padding: 10px 0 20px;
    }

    .iframe-wrapper {
      flex: 1;
      position: relative;
      background-color: #eef5f9;
      border-radius: 4px;
      overflow: hidden;
    }

    .preview-files {
      width: 100%;
      height: 100%;
    }

    .preview-iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    .iframe-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
    }

    .start-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(238, 245, 249, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
  }
</style>