icve-urc 1.0.0

package/src/components/filePreview.vue

@@ -0,0 +1,670 @@
+<!-- 文件预览 -->
+<template>
+  <div
+    class="FilePreview"
+    v-loading="loading"
+    element-loading-text="加载中"
+    ref="FilePreview"
+  >
+    <div class="info">
+      <!-- 文档预览 -->
+      <div
+        v-if="curType == 'office' || curType == 'pic'"
+        v-loading="photoList.length == 0"
+        element-loading-text="加载中"
+        class="office"
+        style="padding: 0 30px; height: 100%"
+      >
+        <el-carousel
+          ref="carousel"
+          :autoplay="false"
+          class="carousel"
+          :loop="false"
+          indicator-position="none"
+          @change="carouselChange"
+        >
+          <el-carousel-item v-for="(item, index) in photoList" :key="index">
+            <img
+              ref="preview"
+              class="img-preview"
+              v-lazy="item"
+              oncontextmenu="return false;"
+              title="点击放大查看"
+              @click="changeShow(item)"
+              @load="handleImageLoaded"
+            />
+          </el-carousel-item>
+        </el-carousel>
+        <div class="page" v-if="curType == 'office'">
+          <el-button plain size="mini" type="primary" @click="prev"
+            >上一页
+          </el-button>
+          {{ carouselIndex + 1 }} / {{ photoList.length }}
+          <el-button plain size="mini" type="primary" @click="next"
+            >下一页
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频预览 -->
+      <div v-else-if="curType == 'video'" class="video">
+        <AliPlayer
+          :source="vodSource"
+          :options="playerOptions"
+          :savedProgress="progress"
+          :isDrag="isDrag"
+          @loadedmetadata="handleVideoMetadata1"
+          @pause="handleVideoPause1"
+          @play="handleVideoPlay1"
+          @ended="handleVideoEnd1"
+        />
+        <!-- <video
+          ref="video"
+          :src="videoUrl"
+          @pause="handleVideoPause"
+          @play="handleVideoPlay"
+          @ended="handleVideoEnd"
+          @loadedmetadata="handleVideoMetadata"
+          controls
+          @timeupdate="handleTimeUpdate"
+        ></video> -->
+      </div>
+      <!-- 音频预览 -->
+      <div v-else-if="curType == 'audio'" class="audio">
+        <audio
+          ref="audio"
+          controls="controls"
+          @pause="handleVideoPause"
+          @play="handleVideoPlay"
+          @ended="handleVideoEnd"
+          @loadedmetadata="handleVideoMetadata"
+          @timeupdate="handleTimeUpdate"
+        >
+          <source :src="audioUrl" type="audio/mpeg" />
+          <h2>我们很抱歉，您的浏览器<strong>不支持audio播放</strong></h2>
+        </audio>
+      </div>
+      <!-- 模型预览 -->
+      <div v-else-if="curType == 'model'" class="model">
+        <iframe
+          :src="modelUrl"
+          width="100%"
+          frameborder="0"
+          style="border: none"
+          height="100%"
+        ></iframe>
+      </div>
+      <div class="other" v-else>
+        {{ errMassage || "该文件不支持预览" }}
+      </div>
+      <!-- 大图预览 -->
+      <el-image-viewer
+        v-if="showViewer"
+        ref="ElImageViewer"
+        :initial-index="carouselIndex"
+        :on-close="closeViewer"
+        :onSwitch="handleImageChange"
+        :url-list="photoList"
+        :z-index="9999"
+      ></el-image-viewer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { filePreview } from "@/api/resourceManagement";
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import AliPlayer from "./AliPlayer.vue";
+export default {
+  name: "FilePreview",
+  components: {
+    ElImageViewer,
+    AliPlayer,
+  },
+  props: {
+    // 进度
+    progress: {
+      type: Number,
+      default: 0,
+    },
+    // 是否拖动
+    isDrag: {
+      type: Boolean,
+      default: false,
+    },
+    // 文件id
+    urlShort: {
+      type: String,
+      default: "",
+    },
+    // 用户Id
+    userId: {
+      type: String,
+      default: "",
+    },
+    // 产品id
+    productId: {
+      type: String,
+      default: "",
+    },
+    videoHeight: {
+      type: String,
+      default: "500px",
+    },
+  },
+  watch: {
+    carouselIndex: {
+      handler(newVal) {
+        if (this.showViewer) {
+          this.$refs.carousel.setActiveItem(newVal);
+        }
+      },
+    },
+    urlShort: {
+      handler(newVal) {
+        if (newVal) {
+          this.getFilePreview(newVal, this.localUserId, this.localProductId);
+        }
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      localProductId: this.productId,
+      localUserId: this.userId,
+      curType: null,
+      photoList: [],
+      carouselIndex: this.progress,
+      showViewer: false,
+      videoUrl: "",
+      audioUrl: "",
+      whetherDragAndDropIsAllowed: this.isDrag,
+      videoDuration: 0,
+      videoTime: 0,
+      watchMaxTime: 0,
+      VideoSuffix: "",
+      office: [
+        ".doc",
+        ".docx",
+        ".pptx",
+        ".ppt",
+        ".pdf",
+        ".txt",
+        ".rtf",
+        ".xls",
+        ".xlsx",
+        ".wps",
+        ".wpt",
+        ".dps",
+        "文档",
+        ".c",
+        ".cpp",
+        ".java",
+        ".php",
+        ".python",
+        ".JavaScript",
+        ".go",
+        ".net",
+      ],
+      pic: [
+        ".png",
+        ".jpeg",
+        ".jpg",
+        ".gif",
+        ".bmp",
+        ".tif",
+        ".tiff",
+        ".wmf",
+        ".dwg",
+        "图片",
+        ".jfif",
+      ],
+      video: [
+        ".mp4",
+        ".mpg",
+        ".WebM",
+        ".ogg",
+        ".flv",
+        ".asf",
+        ".avi",
+        ".wmv",
+        ".mpg",
+        ".rm",
+        ".rmvb",
+        ".mov",
+        ".mts",
+        ".f4v",
+        ".m4v",
+        "视频",
+      ],
+      audio: [".mp3", ".wav", ".m4a", ".3gp", ".wma", ".aac", ".flac", ".ape"],
+      model: [".fbx", ".glb", ".obj", ".stl"],
+      modelUrl: "",
+      loading: true,
+      errMassage: "",
+      vodSource: {
+        source: "",
+      },
+      playerOptions: {
+        width: "100%",
+        height: this.videoHeight,
+        cover: "", // 封面图
+      },
+    };
+  },
+  methods: {
+    // 获取文件预览
+    async getFilePreview(urlShort, userId, productId) {
+      await this.addHead();
+      this.curType = null;
+      this.errMassage = "";
+      this.photoList = [];
+      this.loading = true;
+      filePreview({
+        userId: userId,
+        urlShort: urlShort,
+        productId: productId,
+      }).then((res) => {
+        if (res.code == 200 && res.data.status == 2) {
+          this.typeFiltering(
+            res.data.ossOriUrl,
+            {
+              ...res.data.args,
+              clarityList: res.data.clarityList || [],
+            },
+            res.data.ossGenUrl
+          );
+        } else if (res.code == 200 && res.data.status == 1) {
+          this.errMassage = "文件已经上传，等待转换中";
+          this.curType = "other";
+          this.loading = false;
+        } else if (res.code == 200 && res.data.status == -1) {
+          this.errMassage = "文件正在转换";
+          this.curType = "other";
+          this.loading = false;
+        } else if (res.code == 200 && res.data.status == -2) {
+          this.errMassage = "文件预览失败";
+          this.curType = "other";
+          this.loading = false;
+        } else if (res.code == 200 && res.data.status == -3) {
+          this.errMassage = "文件不支持转换";
+          this.curType = "other";
+          this.loading = false;
+        } else {
+          this.errMassage = "文件不存在";
+          this.curType = "other";
+          this.loading = false;
+        }
+      });
+    },
+    // 新增：图片加载完成时调整轮播高度
+    handleImageLoaded() {
+      this.$nextTick(() => {
+        this.$refs.carousel.setActiveItem(this.carouselIndex);
+        // 使用定时器等待图片加载完成
+        const timer = setInterval(() => {
+          const imgPreview = this.$refs.preview && this.$refs.preview[0];
+          const carousel = this.$refs.carousel && this.$refs.carousel.$el;
+          if (imgPreview && carousel && imgPreview.offsetHeight) {
+            carousel.style.height = `${imgPreview.offsetHeight}px`;
+            clearInterval(timer);
+          }
+        }, 500);
+        // 5秒后清除定时器,避免无限循环
+        setTimeout(() => {
+          clearInterval(timer);
+        }, 5000);
+      });
+    },
+    // 类型过滤
+    async typeFiltering(fileUrl, args, fileGenUrl) {
+      this.loading = false;
+      let curFileType = fileUrl
+        .substring(fileUrl.lastIndexOf("."))
+        .toLowerCase();
+      if (this.office.includes(curFileType)) {
+        this.curType = "office";
+        await this.getViewList(args, fileGenUrl);
+      } else if (this.pic.includes(curFileType)) {
+        this.curType = "pic";
+        this.photoList.push(fileUrl);
+      } else if (this.video.includes(curFileType)) {
+        await this.getVideoPreviewUrl(fileUrl, args, fileGenUrl);
+        this.curType = "video";
+      } else if (this.audio.includes(curFileType)) {
+        this.curType = "audio";
+        this.audioUrl = fileGenUrl + "/file.mp3";
+        this.$nextTick(() => {
+          this.$refs.audio.currentTime = this.carouselIndex;
+        });
+      } else if (this.model.includes(curFileType)) {
+        this.curType = "model";
+        this.modelUrl = `https://zyk.icve.com.cn/icve-3dveiw/index.html#model=${fileUrl}`;
+      } else {
+        this.curType = "other";
+      }
+    },
+    // 动态添加头部标签
+    addHead() {
+      // 封装一个通用函数来添加资源，减少代码重复
+      function addResource(type, url, charset = null) {
+        const selector =
+          type === "stylesheet" ? 'link[rel="stylesheet"]' : "script";
+        const existingResource = Array.from(
+          document.head.querySelectorAll(selector)
+        ).find((el) => (type === "stylesheet" ? el.href : el.src) === url);
+
+        if (!existingResource) {
+          const element = document.createElement(
+            type === "stylesheet" ? "link" : "script"
+          );
+          if (type === "stylesheet") {
+            element.rel = "stylesheet";
+            element.href = url;
+          } else {
+            if (charset) element.charset = charset;
+            element.src = url;
+          }
+          // 在head的第一个子节点前插入元素，即头部位置
+          document.head.insertBefore(element, document.head.firstChild);
+        }
+      }
+
+      // 调用通用函数添加样式文件
+      addResource(
+        "stylesheet",
+        "https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css"
+      );
+      // 调用通用函数添加脚本文件
+      addResource(
+        "script",
+        "https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js",
+        "utf-8"
+      );
+    },
+    // 获取预览图
+    async getViewList(args, fileGenUrl) {
+      this.photoList = [];
+      if (args && args.html5state) {
+        for (let i = 1; i < args.page_count + 1; i++) {
+          this.photoList.push(fileGenUrl + "/" + i + ".png");
+        }
+      } else {
+        for (let i = 1; i < args.page_count + 1; i++) {
+          this.photoList.push(fileGenUrl + "/" + i + ".png");
+          window.parent.postMessage(
+            {
+              // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(mp3) video(mp4) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+              type: this.curType,
+              data: {
+                //pause(暂停) play(播放) complete(完成) change(上一页/下一页) start(开始)
+                status: "start",
+                // 当前观看页数/秒数
+                statistics: this.carouselIndex,
+                // 总时长/秒数
+                total: this.photoList.length,
+              },
+            },
+            "*"
+          ); // 添加目标源参数"*"允许跨域通信
+        }
+      }
+    },
+    // 获取视频预览地址
+    async getVideoPreviewUrl(fileUrl, args, fileGenUrl) {
+      this.VideoSuffix = args.type == "m3u8" ? ".m3u8" : ".mp4";
+      let resolution = {};
+
+      if (args && args.clarityList.length > 0) {
+        args.clarityList.forEach((item) => {
+          resolution[item] = fileGenUrl + "/" + item + this.VideoSuffix;
+        });
+      }
+      this.vodSource.source = JSON.stringify(resolution);
+      console.log(this.vodSource.source, "this.vodSource.source");
+    },
+    //获取素材详情
+    getMaterialDetail() {
+      console.log("getMaterialDetail");
+    },
+    handleImageChange(idx) {
+      if (idx < this.carouselIndex && idx != 0) {
+        this.prev();
+      } else if (idx > this.carouselIndex && idx != this.photoList.length - 1) {
+        this.next();
+      } else if (idx < this.carouselIndex && idx == 0) {
+        this.$refs.carousel.setActiveItem(0);
+      } else if (idx > this.carouselIndex && idx == this.photoList.length - 1) {
+        this.$refs.carousel.setActiveItem(this.photoList.length - 1);
+      }
+    },
+    // 大图预览
+    changeShow() {
+      this.showViewer = true;
+    },
+    // 关闭大图
+    closeViewer() {
+      this.showViewer = false;
+    },
+    // 上一页
+    prev() {
+      if (this.carouselIndex > 0) {
+        this.carouselIndex--;
+        this.$refs.carousel.setActiveItem(this.carouselIndex);
+      } else {
+        this.carouselIndex = this.photoList.length - 1;
+        this.$refs.carousel.setActiveItem(this.carouselIndex);
+      }
+    },
+    // 下一页
+    next() {
+      if (this.carouselIndex < this.photoList.length - 1) {
+        this.carouselIndex++;
+        this.$refs.carousel.setActiveItem(this.carouselIndex);
+      } else {
+        this.carouselIndex = 0;
+        this.$refs.carousel.setActiveItem(this.carouselIndex);
+      }
+    },
+    // 轮播图切换
+    carouselChange(index) {
+      this.carouselIndex = index;
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页)
+          status: "change",
+          // 当前观看页数/秒数
+          statistics: this.carouselIndex,
+          // 总页数/秒数
+          total: this.photoList.length,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleVideoMetadata(e) {
+      this.videoDuration = e.target.duration;
+    },
+    handleVideoMetadata1(e) {
+      this.videoDuration = e;
+    },
+    handleVideoPause(e) {
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页) play(播放)
+          status: "pause",
+          // 当前观看页数/秒数
+          statistics: e.target.currentTime,
+          // 总页数/秒数
+          total: this.videoDuration,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleVideoPause1(e) {
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页) play(播放)
+          status: "pause",
+          // 当前观看页数/秒数
+          statistics: e,
+          // 总页数/秒数
+          total: this.videoDuration,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleVideoPlay(e) {
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页) play(播放)
+          status: "play",
+          // 当前观看页数/秒数
+          statistics: e.target.currentTime,
+          // 总页数/秒数
+          total: this.videoDuration,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleVideoPlay1(e) {
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页) play(播放)
+          status: "play",
+          // 当前观看页数/秒数
+          statistics: e,
+          // 总页数/秒数
+          total: this.videoDuration,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleVideoEnd(e) {
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页) play(播放)
+          status: "complete",
+          // 当前观看页数/秒数
+          statistics: e.target.currentTime,
+          // 总页数/秒数
+          total: this.videoDuration,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleVideoEnd1(e) {
+      const data = {
+        // office(doc,docx,pdf,ppt,pptx,xls,xlsx) audio(音频类) video(视频类) pic(png,jpg,gif,bmp,tif,tiff,wmf,dwg,jfif)
+        type: this.curType,
+        data: {
+          //pause(暂停) complete(完成) change(上一页/下一页) play(播放)
+          status: "complete",
+          // 当前观看页数/秒数
+          statistics: e,
+          // 总页数/秒数
+          total: this.videoDuration,
+        },
+      };
+      this.$emit("liveEvents", data);
+    },
+    handleTimeUpdate(e) {
+      if (
+        e.target.currentTime > this.watchMaxTime &&
+        this.whetherDragAndDropIsAllowed &&
+        this.carouselIndex == 0
+      ) {
+        //但如果相差1秒就证明是往后拖时间了 正常来说是每次时长更新相差0.3s
+        var num =
+          parseFloat(e.target.currentTime) - parseFloat(this.watchMaxTime);
+        if (num < 1) {
+          //正常播放时，记录当前播放时间
+          this.watchMaxTime = e.target.currentTime;
+          this.videoTime = e.target.currentTime;
+        } else if (this.curType == "audio") {
+          // 差值大于1s时，视为拖动，将上一次记录的播放时间赋值给当前播放器的播放时间
+          this.$refs.audio.currentTime = this.watchMaxTime;
+          this.videoTime = this.watchMaxTime;
+        } else {
+          // 差值大于1s时，视为拖动，将上一次记录的播放时间赋值给当前播放器的播放时间
+          this.$refs.video.currentTime = this.watchMaxTime;
+          this.videoTime = this.watchMaxTime;
+        }
+      } else {
+        this.carouselIndex = 0;
+      }
+    },
+  },
+  // 组件销毁时清除定时器
+  destroyed() {
+    // 销毁当前元素
+    this.$refs.FilePreview && this.$refs.FilePreview.remove();
+    // 销毁页面时清除视频和音频播放
+    if (this.curType === "video") {
+      this.$refs.video && this.$refs.video.pause();
+    } else if (this.curType === "audio") {
+      this.$refs.audio && this.$refs.audio.pause();
+    }
+  },
+
+  created() {},
+};
+</script>
+<style lang="scss" scoped>
+.FilePreview {
+  height: 100%;
+  overflow-y: auto;
+  .info {
+    height: 100%;
+  }
+  .model {
+    height: 100%;
+  }
+}
+::v-deep .el-carousel {
+  // height: calc(100% - 54px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+::v-deep .el-carousel__container {
+  height: auto;
+  flex: 1;
+  .el-carousel__item {
+    .img-preview {
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+}
+.video {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.audio {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.other {
+  text-align: center;
+  margin-top: 20px;
+}
+.page {
+  padding-top: 10px;
+  text-align: center;
+}
+</style>