From be9d33fcd37f72551593d69143124144f79ae7cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E4=BA=86=E4=B8=AA=E7=99=BD?= <543593352@qq.com>
Date: Wed, 4 Dec 2024 17:30:01 +0800
Subject: [PATCH] =?UTF-8?q?pptist=EF=BC=9A=20canvasTool=20=E9=87=8C?=
 =?UTF-8?q?=E9=9D=A2=20=E6=96=B0=E5=A2=9E=E6=8F=92=E5=85=A5=E8=AF=95?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 .../src/views/Editor/CanvasTool/index.vue     |  16 ++-
 .../newClassTaskAssign/myQuestion/index.vue   |  34 +++++-
 .../questToPPTist/index.vue                   | 115 ++++++++++++++++++
 .../searchQuestion/index.vue                  |  31 ++++-
 5 files changed, 181 insertions(+), 16 deletions(-)
 create mode 100644 src/renderer/src/views/classTask/newClassTaskAssign/questToPPTist/index.vue

diff --git a/package.json b/package.json
index 5034c80..0f251bf 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "file-saver": "^2.0.5",
     "hfmath": "^0.0.2",
     "html-to-image": "^1.11.11",
+    "html2canvas": "^1.4.1",
     "im_electron_sdk": "^8.0.5904",
     "js-cookie": "^3.0.5",
     "jsencrypt": "^3.3.2",
diff --git a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue
index 749e1ab..a0d73aa 100644
--- a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue
+++ b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue
@@ -81,7 +81,7 @@
         </template>
         <IconVideoTwo class="handler-item" v-tooltip="'插入音视频'" />
       </Popover>
-      <IconFormula class="handler-item" v-tooltip="'插入试题'" @click="classWorkTaskVisible = true" />
+      <IconPreviewOpen class="handler-item" v-tooltip="'插入试题'" @click="classWorkTaskVisible = true" />
     </div>
 
     <div class="right-handler">
@@ -116,9 +116,10 @@
       v-model:visible="classWorkTaskVisible" 
       :width="880"
     >
-      <LaTeXEditor 
+      <QuestToPPTist 
+        class="class-work-task-modal"
         @close="classWorkTaskVisible = false"
-        @update="data => { createLatexElement(data); classWorkTaskVisible = false }"
+        @update="data => { onhtml2canvas(data); classWorkTaskVisible = false }"
       />
     </Modal>
 
@@ -147,7 +148,7 @@ import Modal from '../../../components/Modal.vue'
 import Divider from '../../../components/Divider.vue'
 import Popover from '../../../components/Popover.vue'
 import PopoverMenuItem from '../../../components/PopoverMenuItem.vue'
-import SearchQuestion from '@/views/classTask/newClassTaskAssign/searchQuestion/index.vue'
+import QuestToPPTist from '@/views/classTask/newClassTaskAssign/questToPPTist/index.vue'
 
 const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
@@ -185,6 +186,10 @@ const insertImageElement = (files: FileList) => {
   getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
 }
 
+const onhtml2canvas = (imgbs64: string) => {
+  createImageElement(imgbs64)
+}
+
 const shapePoolVisible = ref(false)
 const linePoolVisible = ref(false)
 const chartPoolVisible = ref(false)
@@ -357,6 +362,9 @@ const toggleNotesPanel = () => {
     font-size: 13px;
   }
 }
+.class-work-task-modal{
+  height: 80vh;
+}
 
 @media screen and (width <= 1200px) {
   .right-handler .text {
diff --git a/src/renderer/src/views/classTask/newClassTaskAssign/myQuestion/index.vue b/src/renderer/src/views/classTask/newClassTaskAssign/myQuestion/index.vue
index e605b51..23970f4 100644
--- a/src/renderer/src/views/classTask/newClassTaskAssign/myQuestion/index.vue
+++ b/src/renderer/src/views/classTask/newClassTaskAssign/myQuestion/index.vue
@@ -40,7 +40,7 @@
         <el-button @click="handleQueryParamFromEntpCourseWork(1)"><el-icon><Search /></el-icon> 查找</el-button>
       </el-col>
       <el-col :span="5">
-        <el-button type="primary" @click="goToQuestUpload()">添加习题</el-button>
+        <el-button v-if="!props.isHtml2canvas" type="primary" @click="goToQuestUpload()">添加习题</el-button>
       </el-col>
     </el-row>
     <!-- 习题表格 -->
@@ -58,9 +58,9 @@
             </div>
           </template>
           <template #default="scope">
-            <div @click="showExamAnalyseDrawer(scope.row)">
-              <div style="overflow: hidden; text-overflow: ellipsis" v-html="scope.row.titleFormat"></div>
-              <div style="overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; margin-top: 6px;" v-html="scope.row.workdescFormat"></div>
+            <div @click="showExamAnalyseDrawer(scope.row)" :id=" `screenshot-target-${scope.row.id}` " style="padding: 5px;">
+              <div style="overflow: hidden; text-overflow: ellipsis; padding: 2px;" v-html="scope.row.titleFormat"></div>
+              <div style="overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; margin-top: 6px; padding: 2px;" v-html="scope.row.workdescFormat"></div>
               <el-col :span="24" style="display: flex">
                 <div style="font-size: 1em; color: silver; padding-top: 5px">{{ scope.row.entpname }} {{ scope.row.editusername }}</div>
                 <div style="margin-left: 30px; font-size: 1em; color: silver; padding-top: 5px">{{ scope.row.worktag }}</div>
@@ -70,7 +70,8 @@
         </el-table-column>
         <el-table-column width="100">
           <template #default="scope">
-            <div> 
+            <el-button v-if="props.isHtml2canvas" type="primary" @click="captureScreenshot(scope.row.id)">选取该题</el-button>
+            <div v-else> 
               <el-button type="primary" @click="handleClassWorkQuizAdd('entpcourseworklist', scope.row.id)">添加</el-button>
               <div style="padding: 2px;"></div>
               <el-button type="warning" @click="handleImportSingleDlg(scope.row)">纠错</el-button>
@@ -117,6 +118,7 @@
 import { Search } from '@element-plus/icons-vue'
 import { onMounted, ref,watch, reactive, getCurrentInstance,nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import html2canvas from 'html2canvas';
 
 import { listEntpcoursework, listEntpcourseworkLocal } from '@/api/education/entpCourseWork'
 import { listEvaluationclue } from '@/api/classTask'
@@ -136,7 +138,7 @@ const router = useRouter()
 
 
 // 定义要发送的emit事件
-const emit = defineEmits(['addQuiz'])
+let emit = defineEmits(['addQuiz', 'addQuizImgBs64'])
 const { proxy } = getCurrentInstance()
 const userStore = useUserStore().user
 const {
@@ -150,6 +152,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  isHtml2canvas: {// 是否截屏
+    type: Boolean,
+    default: () => false
+  },
 })
 
 const knowledgePointProps = ref({value: 'thirdId', label: 'title'});
@@ -440,6 +446,22 @@ const handleDelete = async(item, index) => {
   //   ElMessage('试题已经存在')
   // }
 };
+
+/**
+ * 把该题区域id 获取为截屏区域
+ * @param id 试题id
+ */
+ const  captureScreenshot = (id) => {
+  const targetElement = document.getElementById('screenshot-target-' + id);
+  html2canvas(targetElement).then(canvas => {
+    // 将canvas转换为图像URL
+    const screenshotUrl = canvas.toDataURL('image/png');
+    // 在这里可以将截图保存到本地或上传到服务器
+    // console.log(screenshotUrl);
+    emit('addQuizImgBs64', screenshotUrl);
+  });
+}
+
 // 防抖
 const debounceQueryData = debounce(() => {
   console.log("防抖 加载数据中...")
diff --git a/src/renderer/src/views/classTask/newClassTaskAssign/questToPPTist/index.vue b/src/renderer/src/views/classTask/newClassTaskAssign/questToPPTist/index.vue
new file mode 100644
index 0000000..26be2e9
--- /dev/null
+++ b/src/renderer/src/views/classTask/newClassTaskAssign/questToPPTist/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <div  class="page">
+    <div class="page-resource">
+      <div class="page-center">
+        <el-tabs v-model="activeAptTab" style="height: 100%;">
+          <el-tab-pane label="自主搜题" name="自主搜题" class="prepare-center-zzst">
+            <SearchQuestion :bookobj="courseObj" :isHtml2canvas="true"  @addQuizImgBs64="handleaddQuizImgBs64" />
+          </el-tab-pane>
+          <el-tab-pane label="校本题库" name="校本题库" class="prepare-center-xbtk">
+            <SchoolQuestion />
+          </el-tab-pane>
+          <el-tab-pane label="个人题库" name="个人题库" class="prepare-center-grst">
+            <MyQuestion :bookobj="courseObj" :isHtml2canvas="true" @addQuizImgBs64="handleaddQuizImgBs64"/>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, watch, reactive, getCurrentInstance, nextTick } from 'vue'
+
+import MyQuestion from '@/views/classTask/newClassTaskAssign/myQuestion/index.vue'
+import SchoolQuestion from '@/views/classTask/newClassTaskAssign/schoolQuestion/index.vue'
+import SearchQuestion from '@/views/classTask/newClassTaskAssign/searchQuestion/index.vue'
+
+import { sessionStore } from '@/utils/store'
+import { useRouter, useRoute } from 'vue-router'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore().user
+
+
+const emit = defineEmits(['update']);
+const courseObj = reactive({
+  // 课程相关参数: 教材id,单元id,章节id,课程名称
+  textbookId: '',
+  levelFirstId: '',
+  levelSecondId: '',
+  coursetitle:'',
+  node: null, // 选择的课程节点
+  //
+})
+
+const activeAptTab =  ref("自主搜题");
+
+onMounted(() => {
+  const curNode = sessionStore.get('subject.curNode')
+  courseObj.textbookId = curNode.rootid
+  courseObj.levelFirstId = curNode.parentNode.id
+  courseObj.levelSecondId = curNode.id
+  courseObj.coursetitle = curNode.itemtitle,
+  courseObj.node = curNode
+})
+
+
+const handleaddQuizImgBs64 = (quizbs64) => {
+  emit('update', quizbs64)
+}
+
+defineExpose({
+  
+})
+
+</script>
+<style scoped lang="scss">
+.page {
+  height: 100%;
+  
+  .page-resource {
+    user-select: none;
+    height: calc(100% - 55px);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    flex: 1;
+    :deep(.el-tabs__nav) {
+      .el-tabs__item{
+        font-weight: bold;
+        font-size: 18px;
+      }
+    }
+  }
+  .page-center{
+    flex: 1;
+    //min-width: calc(100% - 675px);
+    height: 100%;
+    padding: 0 5px;
+    margin: 0 5px;
+    overflow: hidden;
+    border-radius: 10px;
+    background-color: white;
+
+    .prepare-center-zzst{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+
+    }
+    .prepare-center-xbtk{
+      height: 100%;
+    }
+    .prepare-center-grst{
+      height: 100%;
+    }
+
+
+    .upload-homework{
+      padding: 20px;
+      box-sizing: border-box;
+    }
+  }
+}
+
+</style>
diff --git a/src/renderer/src/views/classTask/newClassTaskAssign/searchQuestion/index.vue b/src/renderer/src/views/classTask/newClassTaskAssign/searchQuestion/index.vue
index b24c080..d09d913 100644
--- a/src/renderer/src/views/classTask/newClassTaskAssign/searchQuestion/index.vue
+++ b/src/renderer/src/views/classTask/newClassTaskAssign/searchQuestion/index.vue
@@ -71,9 +71,9 @@
             </div>
           </template>
           <template #default="scope">
-            <div @click="showExamAnalyseDrawer(scope.row)">
-              <div style="overflow: hidden; text-overflow: ellipsis" v-html="scope.row.titleFormat"></div>
-              <div style="overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; margin-top: 6px;" v-html="scope.row.workdescFormat"></div>
+            <div @click="showExamAnalyseDrawer(scope.row)" :id=" `screenshot-target-${scope.row.id}` " style="padding: 5px;">
+              <div style="overflow: hidden; text-overflow: ellipsis; padding: 2px;" v-html="scope.row.titleFormat"></div>
+              <div style="overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; margin-top: 6px; padding: 2px;" v-html="scope.row.workdescFormat"></div>
               <el-col :span="24" style="display: flex">
                 <div style="font-size: 1em; color: silver; padding-top: 5px">{{ scope.row.entpname }} {{ scope.row.editusername }}</div>
                 <div style="margin-left: 30px; font-size: 1em; color: silver; padding-top: 5px">{{ scope.row.worktag }}</div>
@@ -83,7 +83,8 @@
         </el-table-column>
         <el-table-column align="left" width="100">
           <template #default="scope">
-            <el-button type="primary" @click="handleClassWorkQuizAdd('entpcourseworklist', scope.row.id)">添加</el-button>
+            <el-button v-if="props.isHtml2canvas" type="primary" @click="captureScreenshot(scope.row.id)">选取该题</el-button>
+            <el-button v-else type="primary" @click="handleClassWorkQuizAdd('entpcourseworklist', scope.row.id)">添加</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -104,7 +105,7 @@
 </template>
 <script setup>
 import { Search } from '@element-plus/icons-vue'
-
+import html2canvas from 'html2canvas';
 import { onMounted, ref,watch, reactive, getCurrentInstance,nextTick } from 'vue'
 
 import {listEntpcoursework, listEntpcourseworkNew, getEntpcoursework} from '@/api/education/entpCourseWork'
@@ -122,7 +123,7 @@ import useUserStore from '@/store/modules/user'
 import useClassTaskStore from '@/store/modules/classTask'
 
 // 定义要发送的emit事件
-const emit = defineEmits(['addQuiz'])
+let emit = defineEmits(['addQuiz', 'addQuizImgBs64'])
 const { proxy } = getCurrentInstance()
 const userStore = useUserStore().user
 const {
@@ -136,6 +137,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  isHtml2canvas: {// 是否截屏
+    type: Boolean,
+    default: () => false
+  },
 })
 
 const entpCourseWorkPointList = ref([
@@ -427,6 +432,20 @@ const getPaginationList = ( page, limit ) => {
   //   ElMessage('试题已经存在')
   // }
 };
+/**
+ * 把该题区域id 获取为截屏区域
+ * @param id 试题id
+ */
+const  captureScreenshot = (id) => {
+  const targetElement = document.getElementById('screenshot-target-' + id);
+  html2canvas(targetElement).then(canvas => {
+    // 将canvas转换为图像URL
+    const screenshotUrl = canvas.toDataURL('image/png');
+    // 在这里可以将截图保存到本地或上传到服务器
+    // console.log(screenshotUrl);
+    emit('addQuizImgBs64', screenshotUrl);
+  });
+}
 
 
 // 防抖