弹窗进度条

src/renderer/src/views/teachingDesign/container/progress-dialog.vue

@@ -0,0 +1,33 @@
+
+<template>
+  <el-dialog v-model="open" v-bind="dAttrs">
+    <el-progress type="dashboard" v-bind="$attrs.pg" />
+  </el-dialog>
+</template>
+<script setup>
+// 功能说明 弹窗进度条组件
+import { computed, useAttrs } from 'vue'
+const attrs = useAttrs()
+const props = defineProps({
+  visible: { // 是否显示弹窗
+    type: Boolean,
+    default: false
+  },
+})
+// 数据更新
+const emit = defineEmits(['update:visible'])
+// 弹窗显示-双向绑定
+const open = computed({
+  get: () => props.visible,
+  set: val => emit('update:visible', val)
+})
+//  弹窗属性
+const dAttrs = computed(() => {
+  const attrsNew = { ...attrs }
+  delete attrsNew.pg
+  return attrsNew
+})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/renderer/src/views/teachingDesign/container/right.vue

@@ -50,6 +50,7 @@
   <EditDialog v-model="isEdit" :item="curItem" />
   <AdjustDialog v-model="isAdjust" :item="curItem" />
   <PptDialog @add-success="addAiPPT" :dataList="resultList" v-model="pptDialog"/>
+  <progress-dialog v-model:visible="pgDialog.visible" v-bind="pgDialog" />
 </template>
 
 <script setup>
@@ -58,6 +59,7 @@ import { sessionStore } from '@/utils/store'
 import emitter from '@/utils/mitt'
 import EditDialog from './edit-dialog.vue'
 import AdjustDialog from './adjust-dialog.vue'
+import progressDialog from './progress-dialog.vue'
 import { completion, tempResult } from '@/api/mode/index.js'
 // import { dataSetJson } from '@/utils/comm.js'
 import * as commUtils from '@/utils/comm.js'
@@ -77,7 +79,22 @@ const resultList = ref([])
 const courseObj = reactive({
   node: null, // 选择的课程节点
 })
-
+const pgDialog = reactive({ // 弹窗-进度条
+  visible: false,
+  title: 'PPT解析中...',
+  width: 300,
+  showClose: false,
+  draggable: true,
+  beforeClose: done => {}, // 阻止-弹窗事件
+  pg: { // 进度条-参数
+    percentage: 0, // 百分比
+    color: [
+      { color: '#1989fa', percentage: 50 }, // 蓝色
+      { color: '#e6a23c', percentage: 80 }, // 橙色
+      { color: '#5cb87a', percentage: 100 }, // 绿色
+    ]
+  }
+})
 emitter.on('changeMode', (item) => {
   console.log(item, 'item')
   resultList.value = item.child
@@ -115,6 +132,8 @@ const params = reactive(
 const addAiPPT = async(res) => {
   let node = courseObj.node
   if (!node) return msgUtils.msgWarning('请选择章节?')
+  pgDialog.visible = true
+  pgDialog.pg.percentage = 0
   //TODO res中有PPT地址
   const params = { evalid: node.id, edituserid: userStore.id, pageSize: 1 }
   const resEnpt = await HTTP_SERVER_API('getCourseList', params)
@@ -129,10 +148,16 @@ const addAiPPT = async(res) => {
       const resPptJson = await PPTXFileToJson(buffer)
       const { def, slides, ...content } = resPptJson
       // 转换图片|音频|视频 为线上地址
+      let completed = 0
+      const total = slides.length
       for( let o of slides ) {
+        completed++
         await toRousrceUrl(o)
+        // 设置进度条
+        pgDialog.pg.percentage = Math.floor(completed / total * 100)
       }
-      // return
+      pgDialog.pg.percentage = 0
+      pgDialog.visible = false
       // 生成ppt课件-父级
       const p_params = {parentContent: JSON.stringify(content)}
       const parentid = await HTTP_SERVER_API('addEntpcoursefile', p_params)