ai视频二期功能提交-编辑ai摘要

src/views/course/aiSet/aiAbstract.vue

@@ -1,27 +1,32 @@
 <template>
   <div class="aiAbstract">
-    <div class="ai-left">
-      <div class="left-title">{{courseName}}</div>
-      <ul class="ai-list">
-        <li class="ai-item" v-for="(item, index) in videoList" @click="currentVideo = item" :class="{'active': currentVideo.id === item.id}" :key="index">
-          <div class="ai-item-title">{{item.name}}</div>
-        </li>
+    <div class="ai-left" v-if="sections.length > 0">
+      <div class="left-title">{{courseInfo.name}}</div>
+      <ul class="ai-list" >
+        <template v-for="c in chapterList">
+          <li class="ai-item" v-for="(item, index) in c.children" @click="handleSelectVideo(item, index+1)" :class="{'active': currentVideo.id === item.id}" :key="index">
+            <div class="ai-item-title">{{item.chapterName}}-{{'视频' + (index + 1)}}</div>
+          </li>
+        </template>
       </ul>
     </div>
     <div class="ai-right">
       <div class="right-title">
-        <h3>{{currentVideo.name}}</h3>
+        <h3>{{videoName}}</h3>
         <div>
-          <el-button type="primary" @click="status = 1">下架本课程AI摘要</el-button>
+          <el-button type="primary" @click="handleSummaryStatus">{{courseInfo.aiAbstract == 1 ? '下架' : '上架'}}本课程AI摘要</el-button>
         </div>
       </div>
       <div class="ai-content">
         <div class="videoBox">
-          <videoPlayer :src="testUrl" style="height: auto;"> </videoPlayer>
+          <videoPlayer 
+            :src="blobUrl"
+            :blobId="blobId"
+            style="height: auto;"> </videoPlayer>
           <div class="video-content">
             <h4>视频摘要</h4>
             <p>
-              {{currentVideo.aiAbstract}}
+              {{videoSummary}}
             </p>
           </div>
         </div>
@@ -29,17 +34,18 @@
           <div class="opera-title">
             <h4>课程摘要</h4>
             <div class="opera-btn">
-              <el-button type="primary" plain round  size="mini" @click="status = 2">重新生成</el-button>
-              <el-button type="primary" plain round  size="mini" @click="status = 4">编辑</el-button>
-              <el-button plain round  size="mini" @click="status = 3">取消</el-button>
+              <el-button v-if="type == 1" type="primary" plain round  size="mini" @click="retrySummaryTxt">重新生成</el-button>
+              <el-button v-if="type == 1" type="primary" plain round  size="mini" @click="type = 4">编辑</el-button>
+              <el-button v-if="type == 4" plain round  size="mini" @click="type = 1">取消</el-button>
+              <el-button v-if="type == 4" type="primary" plain round  size="mini" @click="updateSummary">确认</el-button>
             </div>
           </div>
-          <div class="opera-content" v-show="status != 4">
-            <span v-show="status == 1">{{ aiAbstract }}</span>
-            <p v-show="status == 2" style="color: rgba(207, 207, 207, 1);text-align: center;margin-top: 48%;">AI 摘要重新生成中，过程可能耗时较长，<br>无需在此等待哦～</p>
-            <img v-show="status == 3" src="@/assets/images/course/generationFailed.png" alt="" width="150" height="159" style="display: flex;margin: 35% auto 0 auto;">
+          <div class="opera-content" v-show="type != 4">
+            <span v-show="type == 1">{{ aiAbstract }}</span>
+            <p v-show="type == 2" style="color: rgba(207, 207, 207, 1);text-align: center;margin-top: 48%;">AI 摘要重新生成中，过程可能耗时较长，<br>无需在此等待哦～</p>
+            <img v-show="type == 3" src="@/assets/images/course/generationFailed.png" alt="" width="150" height="159" style="display: flex;margin: 35% auto 0 auto;">
           </div>
-          <el-input v-show="status == 4"
+          <el-input v-show="type == 4"
             type="textarea"
             placeholder="请输入内容"
             autosize
@@ -52,7 +58,13 @@
 </template>
 
 <script>
+import { mapGetters, mapMutations } from "vuex";
 import videoPlayer from "@/components/VideoPlayer/index.vue";
+import apiStudy from "@/api/modules/courseStudy.js";
+import cookies from "vue-cookies";
+import apiAiVideo from "@/api/modules/courseAiVideo.js";
+import apiCourse from '@/api/modules/course.js';
+import { encrypt } from "@/utils/jsencrypt.js";
 export default {
   name: 'aiAbstract',
   // ai播放器相关
@@ -61,39 +73,201 @@ export default {
   },
   data() {
     return {
-      courseName: '企业经营法则--课程单元',
-      videoList: [
-        {
-          id: 1,
-          name: '1. 开源节流1',
-          aiAbstract: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。'
-        },
-        {
-          id: 2,
-          name: '2. 企业经营法则总述',
-          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
-        },
-        {
-          id: 3,
-          name: '3. 企业经营法则总述',
-          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
-        },
-        {
-          id: 4,
-          name: '4. 企业经营法则总述',
-          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
-        },
-      ],
-      testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
+      chapterList: [],
+      videoName: '',
       currentVideo: {},
-      aiAbstract: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。',
-      status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中
+      aiAbstract: '',
+      type: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中
+      courseId: '',
+      courseInfo: {},
+      sections: [],
+      blobId: '',
+      blobUrl: '',
+      videoSummary: '',
     }
   },
-  mounted() {
-    this.currentVideo = this.videoList[0];
+  created() {
+    this.courseId = this.$route.query.id;
+    console.log(this.courseId);
+    this.getCourseInfo();
+    this.getCourseSummary();
   },
-  methods: {}
+  mounted() {
+  },
+  methods: {
+    ...mapMutations({
+      SET_selectableLang: 'video/SET_selectableLang',
+      SET_courseInfo: 'video/SET_courseInfo',
+    }),
+    // 上下架状态
+    handleSummaryStatus() {
+      apiCourse.benchAiSet({courseList:[{id: this.courseId, aiAbstract: this.courseInfo.aiAbstract == 1 ? 0 : 1}]}).then(res => {
+        if(res.status === 200){
+          this.$message.success(this.courseInfo.aiAbstract == 1 ? '下架成功!' : '上架成功!');
+          this.getCourseInfo();
+        }else{
+          this.$message.error(this.courseInfo.aiAbstract == 1 ? '下架失败!' : '上架失败!');
+        }
+      })
+    },
+    // 下载摘要 - 不需要
+    downloadSummary() {
+      apiAiVideo.downloadSummaryTxt(this.courseId)
+      .then((rs) => {
+        console.log('下载',rs);
+        // 1. 创建 Blob 的临时 URL
+        const url = URL.createObjectURL(rs);
+        
+        // 2. 创建隐藏的 <a> 标签
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = '课程摘要.txt'; // 设置下载的文件名
+        a.style.display = 'none';
+        
+        // 3. 添加到文档中并触发点击
+        document.body.appendChild(a);
+        a.click();
+        
+        // 4. 清理
+        setTimeout(() => {
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url); // 释放 URL 对象
+        }, 100);
+      })
+    },
+    updateSummary() {
+      apiAiVideo.updateVideoSummary({
+        courseId: this.courseId,
+        summaryContent: this.aiAbstract,
+      })
+      .then((rs) => {
+        if (rs.rspCode == '0000') {
+          this.type = '1';
+          this.getCourseSummary();
+        }
+      })
+    },
+    retrySummaryTxt() {
+      this.type = '2';
+      apiAiVideo.retrySummaryTxt({
+        courseId: this.courseId,
+      })
+      .then((rs) => {
+        if (rs.rspCode == '0000') {
+          this.type = '1';
+          this.getCourseSummary();
+        } else {
+          this.type = '3';
+        }
+      })
+    },
+    getVideoSummary(id) {
+      apiAiVideo.selectById(id)
+      .then((rs) => {
+        this.videoSummary = ''
+        if (rs.rspCode == '0000') {
+          this.videoSummary = rs.data.briefSummary || '';
+        } else {
+          this.$message.error('获取视频摘要失败!');
+        }
+      })
+      .catch((err) => {
+        this.videoSummary = ''
+        this.$message.error('获取视频摘要失败!');
+      })
+    },
+    getCourseSummary() {
+      apiAiVideo.getCourse({
+        courseId: this.courseId,
+      })
+      .then((rs) => {
+        this.aiAbstract = rs.data.summaryContent || '';
+      })
+    },
+    createPlayUrl(fid, u) {
+      let nowDate = new Date();
+      let ctime = parseInt(nowDate.getTime() / 1000);
+      let beforeUrl = parseInt(nowDate.getTime() / 1000) + "/" + fid;
+      let urlSign = encodeURIComponent(encrypt(beforeUrl));
+      cookies.set("PLAYSIGN_TIME", ctime); //写客户端的cookie保存
+      //以下判断是为了区分本地环境和服务器环境
+      if (process.env.NODE_ENV == "development") {
+        this.blobUrl = process.env.VUE_APP_FILE_BASE_URL + u;
+      } else {
+        this.blobUrl =
+          process.env.VUE_APP_BASE_API +
+          "/xboe/m/course/cware/resource?sign=" +
+          urlSign;
+      }
+    },
+    handleSelectVideo(item, index) {
+      console.log('选择了该视频', item);
+      this.SET_selectableLang(item?.boeaiSubtitleRspList);
+      this.videoName =  item.chapterName ? item.chapterName + "-视频" + index : this.courseInfo.name;
+      this.currentVideo = item;
+      let curriculumData = {};
+      if (item.content.startsWith("{")) {
+          curriculumData = JSON.parse(item.content);
+      } else {
+        curriculumData.url = item.content;
+      }
+      this.getVideoSummary(item.id);
+      this.blobId = item.id;
+      this.createPlayUrl(item.contentRefId, curriculumData.url);
+    },
+    getCourseInfo() {
+      apiStudy.studyIndexPost({
+        cid: this.courseId,
+        addView: false,
+        audiences: '',
+      })
+      .then((rs) => {
+        if (rs.status == 200) {
+          this.courseInfo = rs.result.course || {};
+          this.SET_courseInfo(this.courseInfo);
+          const contents = rs.result.contents?.filter(item => item.contentType == 10) || [];
+          this.sections = rs.result.sections || [];
+          if (this.sections.length > 0) {
+             let treeList = [];
+             let hasOne = false;
+            this.sections.forEach(section => {
+              let treeNode = {
+                ...section,
+                children: [],
+              };
+              contents.forEach(item => {
+                if (section.id == item.csectionId) {
+                  item.chapterName = section.name || '';
+                  treeNode.children.push(item);
+                  if (!hasOne) {
+                    this.handleSelectVideo(item, 1);
+                    hasOne = true;
+                  }
+                }
+              })
+              treeList.push(treeNode);
+            })
+            this.chapterList = treeList;
+          } else { 
+            this.handleSelectVideo(contents[0], 1);
+          }
+          console.log('33333',this.courseInfo, this.courseInfo.name);
+          this.aiAbstract = this.courseInfo.summaryContent
+          if (contents.length == 0) {
+            $this.$message.error("课程内容已删除或课程已不再使用");
+            return;
+          }
+          if (!rs.result.course.enabled) {
+            $this.$message.error(
+              "十分抱歉，此课程已停用，如需使用，请联系管理员。"
+            );
+            return;
+          }
+        }
+        
+      })
+    }
+  }
 };
 </script>
 
@@ -156,6 +330,7 @@ export default {
       display: flex;
       padding: 0 28px;
       height: 76px;
+      min-height: 76px;
       border-bottom: 1px solid rgba(229, 231, 235, 1);
       display: flex;
       justify-content: space-between;