浏览代码

poc课堂

SanHQin 11 月之前
父节点
当前提交
c70709717a
共有 28 个文件被更改,包括 5787 次插入1 次删除
  1. 39 0
      src/api/pocAiClassroom.js
  2. 二进制
      src/assets/images/pocAiClassroom/aiAvatar.png
  3. 1 0
      src/assets/images/pocAiClassroom/avatar.svg
  4. 二进制
      src/assets/images/pocAiClassroom/bg1.png
  5. 二进制
      src/assets/images/pocAiClassroom/bg2.png
  6. 二进制
      src/assets/images/pocAiClassroom/character1.png
  7. 二进制
      src/assets/images/pocAiClassroom/character2.png
  8. 二进制
      src/assets/images/pocAiClassroom/character3.png
  9. 二进制
      src/assets/images/pocAiClassroom/character4.png
  10. 二进制
      src/assets/images/pocAiClassroom/character5.png
  11. 二进制
      src/assets/images/pocAiClassroom/character6.png
  12. 二进制
      src/assets/images/pocAiClassroom/classImage.png
  13. 二进制
      src/assets/images/pocAiClassroom/defaultAvatar.png
  14. 32 0
      src/assets/images/pocAiClassroom/fileIcon.svg
  15. 二进制
      src/assets/images/pocAiClassroom/hello.gif
  16. 二进制
      src/assets/images/pocAiClassroom/taskSuccess.png
  17. 二进制
      src/assets/images/pocAiClassroom/userAvatar.png
  18. 37 1
      src/router/router.config.js
  19. 1462 0
      src/views/pocAiClassroom/chatArea.vue
  20. 296 0
      src/views/pocAiClassroom/component/chapterCard.vue
  21. 471 0
      src/views/pocAiClassroom/component/settingsDialog.vue
  22. 97 0
      src/views/pocAiClassroom/component/txtView.vue
  23. 252 0
      src/views/pocAiClassroom/component/vpdf.vue
  24. 201 0
      src/views/pocAiClassroom/component/vword.vue
  25. 1928 0
      src/views/pocAiClassroom/doTask.vue
  26. 842 0
      src/views/pocAiClassroom/index.vue
  27. 38 0
      src/views/pocAiClassroom/pocClass.vue
  28. 91 0
      src/views/pocAiClassroom/startIndex.vue

+ 39 - 0
src/api/pocAiClassroom.js

@@ -0,0 +1,39 @@
+// axios
+import request2 from '@/utils/request2'
+import request from '@/utils/request'
+
+export function getChatListRequest(data){//获取聊天记录
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/get_agent_park_chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}
+
+export function insertChatListRequest(data){//保存聊天记录
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/insert_chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}
+
+export function aiChatRequest(data){//聊天请求
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}
+
+export function aiRoleChatRequest(data){//聊天请求
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/ai_agent_park_chat_new',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}

二进制
src/assets/images/pocAiClassroom/aiAvatar.png


+ 1 - 0
src/assets/images/pocAiClassroom/avatar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724726041765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4516" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512s230.4 512 512 512 512-230.4 512-512z m-512 448c-249.6 0-448-198.4-448-448s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448z" fill="#000000" p-id="4517"></path><path d="M627.2 505.6c44.8-38.4 76.8-89.6 76.8-153.6 0-108.8-83.2-192-192-192s-192 83.2-192 192c0 64 32 115.2 76.8 153.6-102.4 44.8-172.8 147.2-172.8 262.4 0 19.2 12.8 32 32 32s32-12.8 32-32c0-121.6 102.4-224 224-224s224 102.4 224 224c0 19.2 12.8 32 32 32s32-12.8 32-32c0-115.2-70.4-217.6-172.8-262.4zM512 480c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" fill="#000000" p-id="4518"></path></svg>

二进制
src/assets/images/pocAiClassroom/bg1.png


二进制
src/assets/images/pocAiClassroom/bg2.png


二进制
src/assets/images/pocAiClassroom/character1.png


二进制
src/assets/images/pocAiClassroom/character2.png


二进制
src/assets/images/pocAiClassroom/character3.png


二进制
src/assets/images/pocAiClassroom/character4.png


二进制
src/assets/images/pocAiClassroom/character5.png


二进制
src/assets/images/pocAiClassroom/character6.png


二进制
src/assets/images/pocAiClassroom/classImage.png


二进制
src/assets/images/pocAiClassroom/defaultAvatar.png


+ 32 - 0
src/assets/images/pocAiClassroom/fileIcon.svg

@@ -0,0 +1,32 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1986_1598)">
+<path d="M4.3999 12V2C4.3999 1.44772 4.84762 1 5.3999 1H10.3079C10.6182 1 10.9108 1.14397 11.1001 1.38972L13.7921 4.88409C13.9268 5.059 13.9999 5.27358 13.9999 5.49437V12C13.9999 12.5523 13.5522 13 12.9999 13H5.3999C4.84762 13 4.3999 12.5523 4.3999 12Z" fill="url(#paint0_linear_1986_1598)"/>
+<g filter="url(#filter0_bd_1986_1598)">
+<path d="M2 14V4C2 3.44772 2.44772 3 3 3H8.00455C8.25861 3 8.50315 3.0967 8.68849 3.27046L11.2839 5.70369C11.4856 5.89274 11.6 6.15682 11.6 6.43323V14C11.6 14.5523 11.1523 15 10.6 15H3C2.44772 15 2 14.5523 2 14Z" fill="white" fill-opacity="0.2" shape-rendering="crispEdges"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80005 7.5C3.80005 7.22386 4.06868 7 4.40005 7H8.00005C8.33142 7 8.60005 7.22386 8.60005 7.5C8.60005 7.77614 8.33142 8 8.00005 8H4.40005C4.06868 8 3.80005 7.77614 3.80005 7.5Z" fill="white" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80005 9.5C3.80005 9.22386 4.06868 9 4.40005 9H9.80005C10.1314 9 10.4 9.22386 10.4 9.5C10.4 9.77614 10.1314 10 9.80005 10H4.40005C4.06868 10 3.80005 9.77614 3.80005 9.5Z" fill="white" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80005 11.5C3.80005 11.2239 4.06868 11 4.40005 11H9.80005C10.1314 11 10.4 11.2239 10.4 11.5C10.4 11.7761 10.1314 12 9.80005 12H4.40005C4.06868 12 3.80005 11.7761 3.80005 11.5Z" fill="white" fill-opacity="0.4"/>
+</g>
+<defs>
+<filter id="filter0_bd_1986_1598" x="-2" y="-1" width="17.6001" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1986_1598"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.2" dy="0.2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0811095 0 0 0 0 0.410123 0 0 0 0 0.648375 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1986_1598" result="effect2_dropShadow_1986_1598"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1986_1598" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1986_1598" x1="9.1999" y1="1" x2="9.1999" y2="13" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6EEED7"/>
+<stop offset="1" stop-color="#5CD0F7"/>
+</linearGradient>
+<clipPath id="clip0_1986_1598">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

二进制
src/assets/images/pocAiClassroom/hello.gif


二进制
src/assets/images/pocAiClassroom/taskSuccess.png


二进制
src/assets/images/pocAiClassroom/userAvatar.png


+ 37 - 1
src/router/router.config.js

@@ -208,5 +208,41 @@ export const constantRouterMap = [
       title: 'CocoAI',
       keepAlive: false
     }
-  }
+  },
+	{
+		path:"/pocAiClassroom",
+		name:"pocAiClassroom",
+		component:()=>import('@/views/pocAiClassroom/index.vue'),
+		meta:{
+			title:"POC课堂",
+			keepAlive: false
+		}
+	},
+	{
+		path:"/pocAiChat",
+		name:"pocAiChat",
+		component:()=>import('@/views/pocAiClassroom/chatArea.vue'),
+		meta:{
+			title:"聊聊天",
+			keepAlive: false
+		}
+	},
+	{
+		path:"/pocDoTask",
+		name:"pocDoTask",
+		component:()=>import('@/views/pocAiClassroom/doTask.vue'),
+		meta:{
+			title:"做练习",
+			keepAlive: false
+		}
+	},
+	{
+		path:"/pocClass",
+		name:"pocClass",
+		component:()=>import('@/views/pocAiClassroom/pocClass.vue'),
+		meta:{
+			title:"上课",
+			keepAlive: false
+		}
+	},
 ]

+ 1462 - 0
src/views/pocAiClassroom/chatArea.vue

@@ -0,0 +1,1462 @@
+<template>
+  <div class="pocAi">
+    <div class="pa_background">
+      <img src="../../assets/images/pocAiClassroom/bg2.png" />
+    </div>
+    <div class="pa_documentArea" ref="documentAreaRef" v-show="showFileArea">
+      <div
+        ref="dialogRef"
+        class="pa_da_dialog"
+        @mouseenter="dialogMouse(0)"
+        @mouseleave="dialogMouse(1)"
+        :style="
+          fullFileDialog
+            ? 'width:100vw;height:100vh;border-radius:0;left:0;top:0'
+            : `left:${dialogPosition.x}px;top:${dialogPosition.y}px`
+        "
+      >
+        <div
+          class="pa_da_d_head"
+          ref="dialogHeadRef"
+          v-show="showDialogBtn || alwaysShowDialogBtn"
+					@touchstart="startMove"
+        >
+          <div class="pa_da_d_h_left">
+            <span
+              v-text="showFile.fileName ? showFile.fileName : '查看文件'"
+            ></span>
+          </div>
+          <div class="pa_da_d_h_right">
+            <!-- <span
+              @click.stop="alwaysShowDialogBtnFn"
+              :class="alwaysShowDialogBtn ? 'pa_da_d_h_r_active' : ''"
+            >
+              <svg
+                t="1725429783868"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="8906"
+                width="200"
+                height="200"
+              >
+                <path
+                  d="M935.15 375.34c0-25.38-9.88-49.23-27.83-67.17L727.96 128.8c-37.04-37.04-97.31-37.04-134.35 0L338.53 383.89l-72.74-30.44c-35.71-14.94-76.48-6.91-103.85 20.46l-38.15 38.15c-37.04 37.04-37.04 97.31 0 134.35L282 704.62 127.5 859.13c-13.67 13.67-13.67 35.83 0 49.5 6.83 6.83 15.79 10.25 24.75 10.25s17.92-3.42 24.75-10.25l154.5-154.51 158.21 158.21c17.94 17.94 41.8 27.83 67.18 27.83s49.23-9.88 67.17-27.83l38.15-38.15c27.37-27.37 35.4-68.14 20.46-103.85l-30.44-72.74L907.32 442.5c17.95-17.93 27.83-41.79 27.83-67.16z m-77.33 17.67l-262.2 262.2c-15.85 15.85-20.5 39.45-11.85 60.12l34.32 82.02c3.93 9.4 1.82 20.13-5.38 27.33l-38.15 38.15c-4.72 4.72-11 7.32-17.68 7.32s-12.96-2.6-17.68-7.32L173.29 496.91c-9.75-9.75-9.75-25.61 0-35.36l38.15-38.15c4.8-4.8 11.16-7.34 17.65-7.34 3.25 0 6.54 0.64 9.68 1.95l82.02 34.32c20.68 8.65 44.28 4 60.12-11.85l262.2-262.2c9.75-9.75 25.61-9.75 35.36 0l179.36 179.36c9.74 9.77 9.74 25.63-0.01 35.37z"
+                  p-id="8907"
+                ></path>
+              </svg>
+            </span> -->
+            <span v-if="!fullFileDialog" @click.stop="fullFileDialogFn()">
+              <svg
+                t="1725429213369"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="5406"
+                width="200"
+                height="200"
+              >
+                <path
+                  d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
+                  p-id="5407"
+                ></path>
+              </svg>
+            </span>
+            <span v-else @click.stop="fullFileDialogFn()">
+              <svg
+                t="1725429227791"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="5560"
+                width="200"
+                height="200"
+              >
+                <path
+                  d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
+                  p-id="5561"
+                ></path>
+              </svg>
+            </span>
+
+            <span @click.stop="showFileArea = !showFileArea">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M14.8669 5.77596C15.0444 5.59845 15.0444 5.31064 14.8669 5.13313C14.6894 4.95562 14.4016 4.95562 14.2241 5.13313L9.99996 9.35729L5.77595 5.13326C5.59844 4.95575 5.31064 4.95575 5.13313 5.13326C4.95562 5.31077 4.95562 5.59857 5.13313 5.77608L9.35714 10.0001L5.1333 14.224C4.95579 14.4015 4.95579 14.6893 5.1333 14.8668C5.31081 15.0443 5.59861 15.0443 5.77612 14.8668L9.99996 10.6429L14.2239 14.8669C14.4014 15.0444 14.6892 15.0444 14.8667 14.8669C15.0443 14.6894 15.0443 14.4016 14.8667 14.2241L10.6428 10.0001L14.8669 5.77596Z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div class="pa_da_d_content">
+          <vword
+            style="width: 100%; height: 100% ; overflow: hidden"
+            class="fullStyle"
+            v-if="
+              showFile.type == 2 && !['pdf', 'txt'].includes(showFile.suffix)
+            "
+            :pdfUrl="
+              'https://view.officeapps.live.com/op/view.aspx?src=' +
+                showFile.url
+            "
+          />
+          <vpdf
+            style="width: 100%;  height: 100%; overflow: hidden"
+            class="fullStyle"
+            :pdfUrl="showFile.url"
+            v-if="showFile.type == 2 && ['pdf'].includes(showFile.suffix)"
+          />
+
+          <txtView
+            style="width: 100%;height: 100%"
+            v-if="showFile.type == 2 && ['txt'].includes(showFile.suffix)"
+            :url="showFile.url"
+          />
+
+          <div class="pa_da_Image" v-if="showFile.type == 1">
+            <el-image
+              style="width: 100%;height: 100%;"
+              fit="cover"
+              :src="showFile.url"
+              :preview-src-list="[showFile.url]"
+            >
+            </el-image>
+          </div>
+
+          <div class="pa_da_Video" v-if="showFile.type == 3">
+            <video-player
+              style="width: 100%;max-height:100%;display: flex;justify-content: center;align-items: center;overflow: auto;"
+              :playsinline="true"
+              :options="showFile.videoOption"
+            ></video-player>
+          </div>
+        </div>
+        <div
+          class="pa_da_d_bottom"
+          v-show="showDialogBtn || alwaysShowDialogBtn"
+        >
+          <div></div>
+          <div>
+            <div class="pa_da_d_b_r_contentList">
+              <span @click.stop="showDialogFileList = !showDialogFileList">
+                <img
+                  src="../../assets/images/pocAiClassroom/fileIcon.svg"
+                />
+                内容列表
+              </span>
+
+              <div class="pa_da_d_b_r_cl_fileList" v-if="showDialogFileList" v-click-outside="()=>showDialogFileList = false">
+                <div
+                  v-for="(item, index) in fileList"
+                  :key="index"
+                  :class="
+                    showFile.url === item.fileUrl
+                      ? 'pa_da_d_b_r_cl_fl_active'
+                      : ''
+                  "
+                  @click.stop="showFileFn(item)"
+                >
+                  <span>{{ item.fileName }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pa_chatArea">
+      <div class="pa_ca_back" @click.stop="back()">返回</div>
+      <!-- <div class="pa_ca_header">
+        <span v-text="chatTitle"></span>
+      </div> -->
+      <div class="pa_ca_chat" v-loading="loading">
+        <div
+          class="pa_ca_c_list"
+          ref="chatListRef"
+        >
+          <div v-for="(item, index) in chatList" :key="index">
+            <div class="userChat" v-if="item.content">
+              <div class="uc_left">
+                <div class="chatName">科科</div>
+                <div class="chatMessage">
+                  <span v-text="item.content"></span>
+                  <div class="cm_btnArea">
+                    <span @click.stop="copy(item.content)">
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M2.76904 1.3171C2.76904 0.588877 3.35938 -0.00146484 4.08761 -0.00146484H10.6804C11.4087 -0.00146484 11.999 0.588876 11.999 1.3171V7.90992C11.999 8.63814 11.4087 9.22849 10.6804 9.22849H4.08761C3.35938 9.22849 2.76904 8.63814 2.76904 7.90992V1.3171ZM4.08761 0.987458C3.90555 0.987458 3.75797 1.13504 3.75797 1.3171V7.90992C3.75797 8.09198 3.90555 8.23956 4.08761 8.23956H10.6804C10.8625 8.23956 11.0101 8.09198 11.0101 7.90992V1.3171C11.0101 1.13504 10.8625 0.987458 10.6804 0.987458H4.08761Z"
+                          fill="#333333"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M1.31856 3.75748C1.13651 3.75748 0.988923 3.90506 0.988923 4.08712V10.6799C0.988923 10.862 1.13651 11.0096 1.31856 11.0096H7.91139C8.09344 11.0096 8.24103 10.862 8.24103 10.6799V9.85584C8.24103 9.58275 8.46241 9.36138 8.73549 9.36138C9.00857 9.36138 9.22995 9.58275 9.22995 9.85584V10.6799C9.22995 11.4082 8.63961 11.9985 7.91139 11.9985H1.31856C0.590342 11.9985 0 11.4082 0 10.6799V4.08712C0 3.3589 0.590341 2.76855 1.31856 2.76855H2.14267C2.41575 2.76855 2.63713 2.98993 2.63713 3.26302C2.63713 3.5361 2.41575 3.75748 2.14267 3.75748H1.31856Z"
+                          fill="#333333"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="uc_right">
+                <el-avatar
+                  class="chatAvatar"
+                  :src="require('../../assets/images/pocAiClassroom/defaultAvatar.png')"
+                ></el-avatar>
+              </div>
+            </div>
+            <div class="aiChat">
+              <div class="ac_left">
+                <el-avatar
+                  class="chatAvatar"
+                  :src="require('../../assets/images/pocAiClassroom/character1.png')"
+                ></el-avatar>
+              </div>
+              <div class="ac_right">
+                <div class="chatName"><span>圆鼓鼓的大胖鱼</span></div>
+                <div
+                  class="chatMessage"
+                  v-loading="item.loading"
+                  :style="item.loading ? 'border:none' : ''"
+                >
+                  <span v-html="item.aiContent"></span>
+                  <div class="cm_btnArea">
+                    <span @click.stop="copy(item.aiContent)">
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M2.76904 1.3171C2.76904 0.588877 3.35938 -0.00146484 4.08761 -0.00146484H10.6804C11.4087 -0.00146484 11.999 0.588876 11.999 1.3171V7.90992C11.999 8.63814 11.4087 9.22849 10.6804 9.22849H4.08761C3.35938 9.22849 2.76904 8.63814 2.76904 7.90992V1.3171ZM4.08761 0.987458C3.90555 0.987458 3.75797 1.13504 3.75797 1.3171V7.90992C3.75797 8.09198 3.90555 8.23956 4.08761 8.23956H10.6804C10.8625 8.23956 11.0101 8.09198 11.0101 7.90992V1.3171C11.0101 1.13504 10.8625 0.987458 10.6804 0.987458H4.08761Z"
+                          fill="#333333"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M1.31856 3.75748C1.13651 3.75748 0.988923 3.90506 0.988923 4.08712V10.6799C0.988923 10.862 1.13651 11.0096 1.31856 11.0096H7.91139C8.09344 11.0096 8.24103 10.862 8.24103 10.6799V9.85584C8.24103 9.58275 8.46241 9.36138 8.73549 9.36138C9.00857 9.36138 9.22995 9.58275 9.22995 9.85584V10.6799C9.22995 11.4082 8.63961 11.9985 7.91139 11.9985H1.31856C0.590342 11.9985 0 11.4082 0 10.6799V4.08712C0 3.3589 0.590341 2.76855 1.31856 2.76855H2.14267C2.41575 2.76855 2.63713 2.98993 2.63713 3.26302C2.63713 3.5361 2.41575 3.75748 2.14267 3.75748H1.31856Z"
+                          fill="#333333"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <!-- <template v-html="item.aiContent"></template> -->
+                </div>
+                <div class="ac_r_btnArea">
+                  <span @click.stop="checkFile()">查看文件</span>
+                  <!-- <span @click.stop="sendChat('A')">A:不知道</span>
+                  <span @click.stop="sendChat('B')">B:选A</span>
+                  <span @click.stop="sendChat('C')">C:选B</span> -->
+                </div>
+                <!-- <div class="ac_r_time">2024-08-26 14:31:45</div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pa_ca_c_bottom"
+         
+        >
+          <div class="pa_ca_c_b_inputArea">
+            <textarea
+              id="myTextarea"
+              ref="textAreaRef"
+              min-rows="1"
+              max-rows="5"
+              v-model="chatValue"
+              placeholder="你有任何想法,可以随时告诉我呀"
+              autosize="none"
+              :disabled="source != null"
+            ></textarea>
+            <div class="pa_ca_c_b_btnArea">
+              <span class="pa_ca_c_b_ba_btn" @click="sendChat">
+                <svg
+                  t="1724748020468"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="7309"
+                  width="200"
+                  height="200"
+                >
+                  <path
+                    d="M931.392 11.264L45.12 530.688c-28.736 16.896-43.52 39.424-45.12 61.248v8.128c2.048 26.112 23.04 49.984 61.632 60.416l171.968 46.592a34.304 34.304 0 0 0 41.28-25.536 35.584 35.584 0 0 0-23.808-43.136L79.68 592l873.408-511.872-95.232 703.488c-1.408 10.432-9.152 15.68-18.752 12.992l-365.632-100.288 296.32-305.856a36.416 36.416 0 0 0 0-50.24 33.728 33.728 0 0 0-48.704 0l-324.8 335.36a110.72 110.72 0 0 0-7.872 9.088 35.52 35.52 0 0 0-16.128 30.784 104 104 0 0 0-5.248 32.64v206.4c0 49.664 53.568 79.168 93.568 51.712l166.272-114.368c10.24-6.976 16-19.136 15.232-31.872a35.712 35.712 0 0 0-19.2-29.504 33.28 33.28 0 0 0-34.24 2.304L435.84 937.856v-178.432l385.472 105.6c49.6 13.632 97.472-19.072 104.576-71.808l97.152-717.568c8.448-60.48-40-94.72-91.648-64.384z"
+                    p-id="7310"
+                  ></path>
+                </svg>
+              </span>
+              <!-- <el-button
+                class="pa_ca_c_b_ba_btn"
+                type="primary"
+                @click="sendChat"
+                >发送</el-button
+              > -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vpdf from "./component/vpdf.vue";
+import vword from "./component/vword.vue";
+import txtView from "./component/txtView.vue";
+import { v4 as uuidv4 } from "uuid";
+import MarkdownIt from "markdown-it";
+import {getChatListRequest,insertChatListRequest,aiChatRequest,aiRoleChatRequest} from '@/api/pocAiClassroom'
+
+// 自定义指令,用于处理点击外部区域的事件
+const clickOutside = {
+  bind(el, binding) {
+    // 在元素上绑定一个点击事件监听器
+    el.clickOutsideEvent = function(event) {
+      // 检查点击事件是否发生在元素的内部
+      if (!(el === event.target || el.contains(event.target))) {
+        // 如果点击事件发生在元素的外部,则触发指令绑定的方法,将点击的event数据传过去
+        binding.value(event);
+      }
+    };
+    // 在文档上添加点击事件监听器
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unbind(el) {
+    // 在元素上解除点击事件监听器
+    document.removeEventListener("click", el.clickOutsideEvent);
+  }
+};
+export default {
+  components: {
+    vpdf,
+    vword,
+    txtView
+  },
+  data() {
+    return {
+      userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+      showFileIndex: 0,
+      showFileArea: true,
+      fullFileDialog: false,
+      showDialogBtn: false,
+      alwaysShowDialogBtn: true,
+      showDialogFileList: false,
+      dialogIsMove: false,
+      dialogPosition: {
+				dialogWidth:0,
+				dialogHeight:0,
+        x: 10,
+        y: 10,
+        oldX: 0,
+        oldY: 0
+      },
+      chatValue: "",
+      source: null,
+      loading: false,
+      chatTitle: "第一章 声音的原理",
+      showFileUrl:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
+      chatList: [
+        {
+          loading: false,
+          role: "user",
+          content: "哇卡哇卡",
+          uid: "d601788a-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>&quot;哇卡哇卡&quot; 是夏奇拉(Shakira)的一首非常知名的歌曲,全名是《Waka Waka (This Time for Africa)》。这首歌是2010年南非世界杯的官方主题曲,充满了非洲音乐元素和动感节奏,广受欢迎。如果你对这首歌或其意义感兴趣,可以分享更多你的想法!</p>\n",
+          oldContent:
+            "<p>&quot;哇卡哇卡&quot; 是夏奇拉(Shakira)的一首非常知名的歌曲,全名是《Waka Waka (This Time for Africa)》。这首歌是2010年南非世界杯的官方主题曲,充满了非洲音乐元素和动感节奏,广受欢迎。如果你对这首歌或其意义感兴趣,可以分享更多你的想法!</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 0,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:33:11"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "最近中国有什么好的游戏可以玩吗\n",
+          uid: "e23485ec-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>最近中国有几款备受关注的游戏,以下是其中一些推荐:</p>\n<ol>\n<li>\n<p><strong>《原神》</strong> - 这是一款由miHoYo开发的开放世界角色扮演游戏,以其精美的画面和开放的世界探索而受到广泛好评。</p>\n</li>\n<li>\n<p><strong>《崩坏:星穹铁道》</strong> - 也是miHoYo开发的作品,作为《崩坏》系列的新作,这款游戏结合了科幻元素和回合制战斗机制。</p>\n</li>\n<li>\n<p><strong>《阴阳师》</strong> - 由网易开发的卡牌策略游戏,以其独特的美术风格和丰富的剧情设定而受到玩家喜爱。</p>\n</li>\n<li>\n<p><strong>《和平精英》</strong> - 这是一款由腾讯光子工作室群开发的多人在线战术竞技类游戏,是中国版的《PUBG Mobile》。</p>\n</li>\n<li>\n<p><strong>《剑网3:缘起》</strong> - 西山居开发的一款大型多人在线角色扮演游戏(MMORPG),以其经典的武侠元素和深厚的剧情吸引了大量玩家。</p>\n</li>\n</ol>\n<p>这些游戏在画质、玩法和社交性方面各有特色,你可以根据自己的兴趣和偏好进行选择体验。</p>\n",
+          oldContent:
+            "<p>最近中国有几款备受关注的游戏,以下是其中一些推荐:</p>\n<ol>\n<li>\n<p><strong>《原神》</strong> - 这是一款由miHoYo开发的开放世界角色扮演游戏,以其精美的画面和开放的世界探索而受到广泛好评。</p>\n</li>\n<li>\n<p><strong>《崩坏:星穹铁道》</strong> - 也是miHoYo开发的作品,作为《崩坏》系列的新作,这款游戏结合了科幻元素和回合制战斗机制。</p>\n</li>\n<li>\n<p><strong>《阴阳师》</strong> - 由网易开发的卡牌策略游戏,以其独特的美术风格和丰富的剧情设定而受到玩家喜爱。</p>\n</li>\n<li>\n<p><strong>《和平精英》</strong> - 这是一款由腾讯光子工作室群开发的多人在线战术竞技类游戏,是中国版的《PUBG Mobile》。</p>\n</li>\n<li>\n<p><strong>《剑网3:缘起》</strong> - 西山居开发的一款大型多人在线角色扮演游戏(MMORPG),以其经典的武侠元素和深厚的剧情吸引了大量玩家。</p>\n</li>\n</ol>\n<p>这些游戏在画质、玩法和社交性方面各有特色,你可以根据自己的兴趣和偏好进行选择体验。</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 1,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:33:32"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "你这是多少年的数据了",
+          uid: "eaa6c091-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>我掌握的数据截止到2023年,是经过培训和处理的历史数据。有什么我可以帮你的吗?</p>\n",
+          oldContent:
+            "<p>我掌握的数据截止到2023年,是经过培训和处理的历史数据。有什么我可以帮你的吗?</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 2,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:33:46"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "巴黎奥运会怎么样了",
+          uid: "f9188e27-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>截至我最近的更新信息,巴黎奥运会将在2024年举行。具体情况包括:</p>\n<ol>\n<li>\n<p><strong>日期和地点</strong>:巴黎奥运会计划于2024年7月26日至8月11日举行。比赛将在法国巴黎及其周边地区的各大场馆进行。</p>\n</li>\n<li>\n<p><strong>项目</strong>:2024年巴黎奥运会预计将包括32个大项,覆盖从田径到游泳等传统项目,同时可能也会引入一些新的项目或调整现有项目的设置。</p>\n</li>\n<li>\n<p><strong>准备工作</strong>:巴黎方面正在积极进行场馆建设与改造、城市基础设施的提升以及各种筹备工作,以确保赛事顺利进行。</p>\n</li>\n<li>\n<p><strong>可持续性与创新</strong>:巴黎奥运会提出了“可持续性”与“创新”的理念,致力于通过多种方式(如使用临时设施、推广绿色交通等)减少对环境的影响。</p>\n</li>\n</ol>\n<p>具体的进展和变化可能会随着时间推移有所不同。要了解更多的信息和最新动态,可以关注巴黎奥组委的官方网站或相关的新闻报道。</p>\n",
+          oldContent:
+            "<p>截至我最近的更新信息,巴黎奥运会将在2024年举行。具体情况包括:</p>\n<ol>\n<li>\n<p><strong>日期和地点</strong>:巴黎奥运会计划于2024年7月26日至8月11日举行。比赛将在法国巴黎及其周边地区的各大场馆进行。</p>\n</li>\n<li>\n<p><strong>项目</strong>:2024年巴黎奥运会预计将包括32个大项,覆盖从田径到游泳等传统项目,同时可能也会引入一些新的项目或调整现有项目的设置。</p>\n</li>\n<li>\n<p><strong>准备工作</strong>:巴黎方面正在积极进行场馆建设与改造、城市基础设施的提升以及各种筹备工作,以确保赛事顺利进行。</p>\n</li>\n<li>\n<p><strong>可持续性与创新</strong>:巴黎奥运会提出了“可持续性”与“创新”的理念,致力于通过多种方式(如使用临时设施、推广绿色交通等)减少对环境的影响。</p>\n</li>\n</ol>\n<p>具体的进展和变化可能会随着时间推移有所不同。要了解更多的信息和最新动态,可以关注巴黎奥组委的官方网站或相关的新闻报道。</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 3,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:34:10"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "巴黎奥运会有哪些国家参加",
+          uid: "0aedaebd-5ecf-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>巴黎奥运会将于2024年举行,由于奥运会是由国际奥林匹克委员会(IOC)组织的,通常大多数国家都会派代表团参加,包括几乎所有联合国成员国和一些地区或地区代表队。截至目前,具体参赛的国家和地区名单尚未最终确定,但预计将会有200多个国家和地区参加。如果你想了解最新的参赛国家名单,建议关注国际奥林匹克委员会的官方网站或相关最新新闻。</p>\n",
+          oldContent:
+            "<p>巴黎奥运会将于2024年举行,由于奥运会是由国际奥林匹克委员会(IOC)组织的,通常大多数国家都会派代表团参加,包括几乎所有联合国成员国和一些地区或地区代表队。截至目前,具体参赛的国家和地区名单尚未最终确定,但预计将会有200多个国家和地区参加。如果你想了解最新的参赛国家名单,建议关注国际奥林匹克委员会的官方网站或相关最新新闻。</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 4,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:34:40"
+        }
+      ],
+      fileList: [
+        {
+          //docx
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%A0%A1%E7%BA%A7%E5%88%9B%E5%AE%A2%E9%A1%B9%E7%9B%AE%E7%BB%93%E9%A2%98%E7%94%B3%E8%AF%B7%E4%B9%A6-%E5%88%9B%E6%96%B0%E5%88%9B%E4%B8%9A%E5%AD%A6%E9%99%A21724638848483.docx",
+          fileId: "file-xUxtMlJu7PoDBvzZg1JCegtM",
+          fileName: "这是一个DOCX文件"
+        },
+        {
+          //xlsx
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724640873576.xlsx",
+          fileId: "file-61KteMZxNwzjJQFRdlwtdpmg",
+          fileName: "这是一个XLSX文件"
+        },
+        {
+          //ppt
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641111983.pptx",
+          fileId: "",
+          fileName: "这是一个PPT文件"
+        },
+        {
+          //pdf
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%88%9B%E4%BD%9C%E4%B8%AD%E5%BF%83%E5%8E%9F%E5%9E%8B%E5%9B%BE1724641155668.pdf",
+          fileId: "file-1ldbT8Ztg5QQPUucJs2FpLAJ",
+          fileName: "这是一个PDF文件"
+        },
+        {
+          //jpg
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
+          fileId: "",
+          fileName: "这是一个JPG文件"
+        },
+        {
+          //mp4
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/c3e87dc3-d5ab-4a1f-a519-63d903a270f8%2F2024-08-09+17-07-50.mp4",
+          fileId: "",
+          fileName: "这是一个MP4文件"
+        },
+        {
+          //txt
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/ktgc31724643097906.txt",
+          fileId: "file-YSVSAsDGvtiWJQ6mWf7ZdupA",
+          fileName: "这是一个TXT文件"
+        }
+      ],
+      canonical: {
+        Image: /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
+        File: /^https?:\/\/(.+\/)+.+(\.(docx|doc|xlsx|ppt|pdf|pptx|txt))$/i,
+        video: /^https?:\/\/(.+\/)+.+(\.(avi|wmv|mpg|mpeg|mov|rm|ram|mp4|swf|flv))$/i
+      }
+    };
+  },
+	directives: {
+    "click-outside": clickOutside // 注册自定义指令
+  },
+  computed: {
+		dialogWidth(){
+			if(!this.$refs.documentAreaRef)return 0
+			return this.$refs.documentAreaRef.offsetWidth
+		},
+    showFile() {
+      let result = {
+        type: 0,
+        suffix: "",
+        url: "",
+        videoOption: null,
+        fileName: ""
+      }; //0:无 1:图片 2:文件 3:视频
+      if (this.showFileUrl) {
+        result.url = this.showFileUrl;
+        result.fileName = this.fileList.find(
+          i => i.fileUrl == this.showFileUrl
+        ).fileName;
+        if (this.canonical.Image.test(this.showFileUrl)) {
+          result.type = 1;
+          result.suffix = this.showFileUrl.split(".").pop();
+        } else if (this.canonical.File.test(this.showFileUrl)) {
+          result.type = 2;
+          result.suffix = this.showFileUrl.split(".").pop();
+        } else if (this.canonical.video.test(this.showFileUrl)) {
+          result.type = 3;
+          result.videoOption = {
+            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            autoplay: false, //如果true,浏览器准备好时开始回放。
+            muted: false, // 默认情况下将会消除任何音频。
+            loop: false, // 导致视频一结束就重新开始。
+            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+            language: "zh-CN",
+            aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+            fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+            sources: this.showFileUrl,
+            // poster: "https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=600y500", // 你的封面地址
+            notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+            controlBar: {
+              timeDivider: true,
+              durationDisplay: true,
+              remainingTimeDisplay: false,
+              fullscreenToggle: true // 全屏按钮
+            }
+          };
+          result.suffix = this.showFileUrl.split(".").pop();
+        }
+      }
+      return result;
+    }
+  },
+  methods: {
+    chatListScrollBottom() {
+      this.$nextTick(() => {
+        this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight;
+      });
+    },
+    sendChat(_text = this.chatValue) {
+      if (this.source) return this.$message.info("还在对话中,请稍等");
+      if (typeof _text !== "string") _text = this.chatValue;
+      if (!_text.trim()) return;
+      this.chatValue = "";
+      var OpenCC = require("opencc-js");
+      let converter = OpenCC.Converter({
+        from: "cn",
+        to: "hk"
+      });
+      const _uuid = uuidv4();
+      this.chatList.push({
+        role: "user",
+        content: `${_text}`,
+        uid: _uuid,
+        AI: "AI",
+        aiContent: "",
+        oldContent: "",
+        isShowSynchronization: false,
+        filename: "",
+        index: this.chatList.length,
+        is_mind_map: false,
+        createtime: new Date().toLocaleString().replaceAll("/", "-"),
+        loading: true
+      });
+      this.chatListScrollBottom();
+
+      // 连续对话设置
+      let _historyMessage = [];
+
+      _historyMessage.push({ role: "user", content: _text });
+
+      let params = {
+        assistant_id: "f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b",
+        userId: this.userId,
+        message: _text,
+        session_name: `${_uuid}-pocAi-md`,
+        uid: _uuid,
+        file_ids: [],
+        model: "gpt-4o-2024-08-06"
+      };
+
+      aiRoleChatRequest(params)
+        .then(res => {
+          if (
+            converter(res.FunctionResponse.result) == converter("发送成功")
+          ) {
+          } else {
+            console.log(res.FunctionResponse.result);
+          }
+        })
+        .catch(e => {
+          console.log(e);
+        });
+      this.getAtAuContent(_uuid);
+    },
+    getAtAuContent(_uid) {
+      this.source = new EventSource(
+        `https://gpt4.cocorobo.cn/question/${_uid}`
+      );
+      let _allText = "";
+      let _mdText = "";
+      const md = new MarkdownIt();
+      this.source.onmessage = _e => {
+        let _eData = JSON.parse(_e.data);
+        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
+          let _result = [];
+          if ("result" in _eData) {
+            _result = _eData.result;
+            for (let i = 0; i < _result.length; i++) {
+              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
+            }
+          }
+          _mdText = _mdText.replace("_", "");
+          this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
+          this.chatList.find(i => i.uid == _uid).isalltext = true;
+          this.chatList.find(i => i.uid == _uid).isShowSynchronization = true;
+          this.chatList.find(i => i.uid == _uid).loading = false;
+          this.source.close();
+          this.source = null;
+          this.chatListScrollBottom();
+          this.insertChat(_uid);
+        } else {
+          // _index += 1;
+          let _text = _eData.content.replace("'", "").replace("'", "");
+          if (_allText == "") {
+            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
+          } else {
+            _allText += _text;
+          }
+          _mdText = _allText + "_";
+          _mdText = _mdText.replace(/\\n/g, "\n");
+          _mdText = _mdText.replace(/\\/g, "");
+
+          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
+          //转化返回的回复流数据
+          _mdText = md.render(_mdText);
+          // if (_index == 10) {
+          this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
+          this.chatList.find(i => i.uid == _uid).loading = false;
+          this.chatListScrollBottom();
+          // _index = 0;
+          // }
+          // 处理流数据
+        }
+      };
+    },
+    //保存消息
+    insertChat(_uid) {
+      if (_uid == "") return;
+      let _data = this.chatList.find(i => i.uid == _uid);
+      if (!_data) return;
+      let params = {
+        userId: this.userId,
+        userName: "qgt",
+        groupId: "qwertyuiop-poc",
+        answer: _data.aiContent,
+        problem: _data.content,
+        file_id: _data.fileid ? _data.fileid : "",
+        alltext: _data.aiContent,
+        type: "chat",
+        filename: _data.filename,
+        session_name: `pocAi-md` //这是对话记录位置
+      };
+			insertChatListRequest(params)
+        .then(res => {});
+    },
+    // 获取对应的聊天记录
+    getChatList() {
+      return new Promise((resolve, reject) => {
+        if (this.loading) return this.$message.info("请稍等...");
+        this.chatList = [];
+        this.loading = true;
+        let params = {
+          userid: this.userId,
+          groupid: "qwertyuiop-poc",
+          // session_name:``
+          session_name: `pocAi-md`
+        };
+        getChatListRequest(params)
+          .then(res => {
+            let _data = JSON.parse(res.FunctionResponse);
+            if (_data.length > 0) {
+              let _chatList = [];
+              for (let i = 0; i < _data.length; i++) {
+                _chatList.push({
+                  loading: false,
+                  role: "user",
+                  content: _data[i].problem,
+                  uid: _data[i].id,
+                  AI: "AI",
+                  aiContent: _data[i].answer,
+                  oldContent: _data[i].answer,
+                  isShowSynchronization: false,
+                  filename: _data[i].filename,
+                  index: i,
+                  is_mind_map: false,
+                  fileid: _data[i].fileid
+                });
+              }
+              this.chatList = _chatList;
+              this.loading = false;
+            } else {
+              //没有对话记录
+              this.loading = false;
+            }
+            this.chatListScrollBottom();
+            resolve();
+          })
+          .catch(err => {
+            console.log(err);
+            this.$message.error("获取对话记录失败");
+            this.loading = false;
+            resolve();
+          });
+      });
+    },
+    checkFile(url = "") {
+      if (url) {
+        this.showFileUrl = url;
+      } else {
+        const _index = Math.floor(Math.random() * this.fileList.length);
+        this.showFileUrl = this.fileList[_index].fileUrl;
+      }
+      this.showFileArea = true;
+    },
+    back() {
+      this.$router.push(
+        `/pocAiClassroom`
+      );
+    },
+    copy(_content) {
+      // 创建临时textarea元素
+      const tempInput = document.createElement("textarea");
+      tempInput.value = _content.replace(/<[^>]+>/g, ""); // 设置要复制的内容
+      // 隐藏元素
+      tempInput.style.position = "absolute";
+      tempInput.style.left = "-9999px";
+      // 将元素添加到DOM中
+      document.body.appendChild(tempInput);
+      // 选中元素内容
+      tempInput.select();
+      // 执行复制操作
+      document.execCommand("copy");
+      // 移除临时元素
+      document.body.removeChild(tempInput);
+      this.$toast.success("复制成功");
+    },
+    alwaysShowDialogBtnFn() {
+      this.alwaysShowDialogBtn = !this.alwaysShowDialogBtn;
+    },
+    fullFileDialogFn() {
+      this.fullFileDialog = !this.fullFileDialog;
+    },
+    dialogMouse(type = 1) {
+      // console.log(e.offsetY)
+      // const y = e.offsetY;
+      // console.log(this.$refs.dialogRef.offsetHeight)
+      // // const height = this.$refs.dialogRef
+      // if(y <= (100+50)){
+      // 	this.showDialogBtn = true;
+      // }else if(y>=(700-50)){
+      // 	this.showDialogBtn = true;
+      // }else{
+      // 	if(this.showDialogFileList)return;
+      // 	this.showDialogBtn = false;
+      // }
+      // this.showDialogBtn = true
+      // console.log(e)
+			if(this.alwaysShowDialogBtn)return;
+      if (type == 1) {
+        this.showDialogBtn = false;
+				this.showDialogFileList = false;
+      } else if (type == 0) {
+        this.showDialogBtn = true;
+      }
+    },
+    showFileFn(item) {
+      this.showFileUrl = item.fileUrl;
+      this.showDialogFileList = false;
+    },
+    //移动Dialog框
+    startMove(e) {
+      if (this.fullFileDialog) return;
+			console.log("开始移动")
+      this.dialogIsMove = true;
+      this.dialogPosition.oldX = e.touches[0].clientX - this.dialogPosition.x;
+      this.dialogPosition.oldY = e.touches[0].clientY - this.dialogPosition.y;
+      // document.addEventListener("mousemove", this.moveDialog);
+      // document.addEventListener("mouseup", this.stopMove);
+
+			document.addEventListener('touchmove', this.moveDialog)
+			document.addEventListener('touchend', this.stopMove)
+    },
+    moveDialog(e) {
+      if (this.dialogIsMove) {
+        // 获取窗口的宽度和高度
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+
+        // 获取对话框的宽度和高度
+				console.log(this.$refs.dialogRef.offsetWidth,this.$refs.dialogRef.offsetHeight,windowWidth,windowHeight)
+        const dialogWidth = this.$refs.dialogRef.offsetWidth;
+        const dialogHeight = this.$refs.dialogRef.offsetHeight;
+
+        // 计算新位置
+        let newX = e.touches[0].clientX - this.dialogPosition.oldX;
+        let newY = e.touches[0].clientY - this.dialogPosition.oldY;
+
+        // 边界检查:确保对话框不会穿过边缘
+        if (newX < 0) newX = 0;
+        if (newY < 0) newY = 0;
+        if (newX > windowWidth - dialogWidth) newX = windowWidth - dialogWidth;
+        if (newY > windowHeight - dialogHeight)
+          newY = windowHeight - dialogHeight;
+
+        // 更新对话框的位置
+        this.dialogPosition.x = newX;
+        this.dialogPosition.y = newY;
+        // this.dialogPosition.x = e.clientX - this.dialogPosition.oldX;
+        // this.dialogPosition.y = e.clientY - this.dialogPosition.oldY;
+      }
+    },
+    stopMove() {
+      this.dialogIsMove = false;
+			document.removeEventListener('touchmove', this.moveDialog)
+			document.removeEventListener('touchend', this.stopMove)
+      // document.removeEventListener("mousemove", this.moveDialog);
+      // document.removeEventListener("mouseup", this.stopMove);
+    }
+  },
+  mounted() {
+    this.getChatList();
+		this.$nextTick(()=>{
+		})
+  }
+};
+</script>
+
+<style scoped>
+.pocAi {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  box-sizing: border-box;
+  background-color: black;
+}
+
+.pa_background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0.7;
+  z-index: 1;
+}
+
+.pa_background > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pa_documentArea {
+  width: 0;
+  height: 0;
+  box-sizing: border-box;
+  z-index: 4;
+}
+
+.pa_da_dialog {
+  width: calc(100vw - 20px);
+  height: 300px;
+  background-color: #fff;
+  opacity: 1;
+  border-radius: 8px;
+  position: fixed;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid #ffffff8c;
+  box-shadow: 0px 8px 10px -5px #00000014;
+
+  box-shadow: 0px 16px 24px 2px #0000000a;
+
+  box-shadow: 0px 6px 30px 5px #0000000d;
+}
+
+.pa_da_d_head {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: absolute;
+	cursor: move;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.pa_da_d_head {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.pa_da_d_h_left {
+  font-size: 18px;
+}
+
+.pa_da_d_h_left > span {
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  margin-left: 10px;
+  color: #fff;
+}
+
+.pa_da_d_h_right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa_da_d_h_r_active {
+  background: #ffffff38;
+  border-radius: 8px;
+}
+
+.pa_da_d_h_right > span {
+  width: 25px;
+  height: 25px;
+  margin-right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa_da_d_h_right > span > svg {
+  width: 90%;
+  height: 90%;
+  fill: #fff;
+  cursor: pointer;
+}
+
+.pa_da_d_content {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  overflow: auto;
+  z-index: 2;
+  position: relative;
+}
+
+.pa_da_d_bottom {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  z-index: 3;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.9) 100%
+  );
+}
+
+.pa_da_d_b_r_contentList {
+  width: 150px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 20px;
+  position: relative;
+}
+
+.pa_da_d_b_r_contentList > span {
+  padding: 7px 15px;
+  background: #ffffff38;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.pa_da_d_b_r_contentList > span > img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.pa_da_d_b_r_cl_fileList {
+  width: 180px;
+  height: 200px;
+  position: absolute;
+  bottom: 45px;
+  right: 10px;
+  background: #00000099;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 4px;
+  box-shadow: 0px 5px 5px -3px #0000001a;
+
+  box-shadow: 0px 8px 10px 1px #0000000f;
+
+  box-shadow: 0px 3px 14px 2px #0000000d;
+  overflow: auto;
+}
+
+.pa_da_d_b_r_cl_fileList > div {
+  width: 100%;
+  height: 30px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  transition: 0.3s;
+}
+
+.pa_da_d_b_r_cl_fileList > div > span {
+  font-size: 14px;
+  cursor: pointer;
+  color: #ffffff8c;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.pa_da_d_b_r_cl_fileList > .pa_da_d_b_r_cl_fl_active {
+  background-color: #3681fc !important;
+  color: #ffffff8c !important;
+}
+
+.pa_da_d_b_r_cl_fileList > .pa_da_d_b_r_cl_fl_active > span {
+  color: #fff !important;
+}
+.pa_da_d_b_r_cl_fileList > div:hover {
+  background-color: #ffffff36;
+}
+
+.pa_da_head {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: flex-end;
+  background-color: #fff;
+}
+
+.pa_da_head > span {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.pa_da_Image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #e2e2e2;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.pa_da_Video {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #e2e2e2;
+  box-sizing: border-box;
+  padding: 20px 20px 40px 20px;
+}
+
+.pa_da_Video >>> .video-js {
+  width: 100%;
+  height: 100%;
+}
+
+.pa_da_Video >>> .vjs-big-play-button {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pa_chatArea {
+  width: 100vw;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+}
+
+.pa_ca_back {
+  font-size: 20px;
+  cursor: pointer;
+	z-index: 3;
+}
+
+.pa_ca_back {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+	color: #fff;
+}
+
+.pa_ca_header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.pa_ca_chat {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100%);
+}
+
+.pa_ca_c_list {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  /* padding: 50px 0; */
+  box-sizing: border-box;
+  /* background-color: red; */
+}
+
+.pa_ca_c_bottom {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.pa_ca_c_b_inputArea {
+  width: 95%;
+
+  height: 85%;
+  background-color: #fff;
+  border-radius: 100px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  align-items: center;
+}
+.pa_ca_c_b_btnArea {
+  width: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pa_ca_c_b_ba_btn {
+  width: 40px;
+  height: 40px;
+  margin-right: 5px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  /* background-color: red; */
+  background-image: linear-gradient(to left, #4977eb 0%, #005bea 100%);
+}
+
+.pa_ca_c_b_ba_btn > svg {
+  fill: #fff;
+  width: 23px;
+  height: 23px;
+}
+
+.pa_ca_c_b_inputArea > textarea {
+  resize: none;
+  min-height: 50px;
+  height: calc(100% - 40px);
+  background: none;
+  margin: 7px 0;
+  width: calc(100% - 60px);
+  font-size: 16px;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+  margin-left: 20px;
+}
+
+#myTextarea::-webkit-input-placeholder {
+  /* Chrome, Opera, Safari */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+}
+
+#myTextarea:-moz-placeholder {
+  /* Firefox 18- */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+  opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+#myTextarea::-moz-placeholder {
+  /* Firefox 19+ */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+  opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+#myTextarea:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+}
+
+.userChat {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.uc_left {
+  max-width: 90vw;
+  width: auto;
+  height: auto;
+  padding: 10px 0px 10px 0;
+}
+
+.uc_left > .chatName {
+  text-align: right;
+}
+
+.uc_left > .chatMessage {
+  border-radius: 10px 2px 10px 10px;
+  background-color: #e0eafb;
+	padding: 10px 20px;
+}
+
+.uc_left > .chatMessage > .cm_btnArea {
+  left: -35px;
+}
+
+/* .uc_left > span {
+  width: auto;
+  height: auto;
+  padding: 20px 20px;
+  background-color: #4a7ff4;
+  border-radius: 10px;
+  color: #fff;
+} */
+
+.uc_right {
+  padding: 10px 20px 10px 10px;
+}
+
+.aiChat {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  /* padding: 20px 0; */
+}
+
+.ac_left {
+  padding: 10px 10px 10px 20px;
+}
+
+.ac_right {
+  width: auto;
+  height: auto;
+  padding: 10px 0px 10px 0;
+}
+
+.chatMessage {
+  max-width: 50vw;
+  background-color: #ffffff;
+  border: solid 1px #000000e5;
+  color: black;
+  padding: 0px 20px;
+  border-radius: 2px 8px 8px 8px;
+  font-size: 16px;
+  position: relative;
+  box-shadow: 0px 4px 10px 0px #1d398314;
+  box-shadow: 1px 1px 20px 4px #1d39830d;
+	word-break: break-all
+}
+
+.cm_btnArea {
+  width: 30px;
+  height: 100%;
+  position: absolute;
+  right: -35px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.cm_btnArea > span {
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+
+.cm_btnArea > span > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.chatMessage >>> ol {
+  margin-left: 25px;
+}
+
+.chatMessage >>> ul {
+  margin-left: 25px;
+}
+
+.ac_r_time {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #8f8f8f;
+}
+
+.ac_r_btnArea {
+  margin-top: 5px;
+  width: auto;
+  display: flex;
+  align-items: center;
+  height: auto;
+}
+.ac_r_btnArea > span {
+  max-height: 60px;
+  padding: 5px 10px 5px 10px;
+  background: #ffffff8c;
+  border: 1px solid #ffffff8c;
+  border-radius: 6px;
+  cursor: pointer;
+  color: black;
+  font-size: 14px;
+  margin-right: 20px;
+}
+
+.chatAvatar {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background: #fff;
+  border-radius: 100%;
+}
+
+
+
+.chatName {
+  font-size: 18px;
+  /* color: rgb(80, 80, 80); */
+  color: #ffffff8c;
+  margin-bottom: 8px;
+}
+</style>

+ 296 - 0
src/views/pocAiClassroom/component/chapterCard.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="chapterCard" >
+    <div class="cc_title">{{ data.title }}</div>
+    <div class="cc_box">
+      <div
+        class="cc_b_item"
+        v-for="(item, index) in data.allClass"
+        :key="index"
+				@click.stop="showBtnAreaIndex = index"
+				v-click-outside="handleClickOutside"
+      >
+        <div class="cc_b_i_image">
+          <el-image
+            style="width: 100%;height: 100%;"
+            :src="require('../../../assets/images/pocAiClassroom/classImage.png')"
+          ></el-image>
+          <span v-text="item.title"></span>
+        </div>
+
+        <div class="cc_b_i_message" >
+          <div v-show="showBtnAreaIndex!==index">
+            <span v-if="item.isComplete">✅已完成</span>
+            <span v-else>🏷️待完成</span>
+          </div>
+          <div v-show="showBtnAreaIndex!==index">
+            <div>
+              {{ subjectList.find(i => i.value === item.subject).label }}
+            </div>
+          </div>
+        </div>
+        <div class="cc_b_i_btnArea" v-if="showBtnAreaIndex===index">
+          <span
+            class="cc_b_i_ba_goClass"
+            v-if="[0].includes(item.type)"
+            @click.stop="goClass(item)"
+            >去上课</span
+          >
+          <span
+            class="cc_b_i_ba_doWorks"
+            v-if="[0, 1].includes(item.type)"
+            @click.stop="goWorks(item)"
+            >做练习</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 自定义指令,用于处理点击外部区域的事件
+const clickOutside = {
+  bind(el, binding) {
+    // 在元素上绑定一个点击事件监听器
+    el.clickOutsideEvent = function(event) {
+      // 检查点击事件是否发生在元素的内部
+      if (!(el === event.target || el.contains(event.target))) {
+        // 如果点击事件发生在元素的外部,则触发指令绑定的方法,将点击的event数据传过去
+        binding.value(event);
+      }
+    };
+    // 在文档上添加点击事件监听器
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unbind(el) {
+    // 在元素上解除点击事件监听器
+    document.removeEventListener("click", el.clickOutsideEvent);
+  }
+};
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    subjectList: {
+      type: Array,
+      default: () => []
+    }
+  },
+	directives: {
+    "click-outside": clickOutside // 注册自定义指令
+  },
+  data() {
+    return {
+      userId: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+			showBtnAreaIndex:"",
+    };
+  },
+  methods: {
+    goClass(item) {
+			this.$router.push(
+          `/pocClass?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+        );
+    },
+    goWorks(item) {
+      this.$router.push(
+        `/pocDoTask?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+      );
+    },
+		handleClickOutside(){
+			this.showBtnAreaIndex = ""
+		}
+  }
+};
+</script>
+
+<style scoped>
+.chapterCard {
+  width: 100%;
+  height: auto;
+  margin-top: 30px;
+  position: relative;
+}
+
+.cc_title {
+  margin: 20px 0;
+  font-size: 22px;
+}
+
+.cc_box {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.cc_b_item {
+  width: 120px;
+  height: 90px;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40px;
+  background-color: #fff;
+  padding: 16px;
+  border-radius: 6px;
+  border: 2px solid #f0f2f5;
+  position: relative;
+  transition: 0.3s;
+}
+
+.cc_b_item:hover>.cc_b_i_image{
+	opacity: .5;
+}
+
+.cc_b_item:hover {
+  border-color: #3681fc;
+  box-shadow: 0px 8px 10px -5px #00000014;
+
+  box-shadow: 0px 16px 24px 2px #0000000a;
+
+  box-shadow: 0px 6px 30px 5px #0000000d;
+}
+
+.cc_b_item:hover > .cc_b_i_btnArea {
+  display: flex;
+}
+
+.cc_b_i_image {
+  width: 100%;
+  height: 140px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+	opacity: 1;
+	transition: .3s;
+}
+
+.cc_b_i_image > span {
+  position: absolute;
+  font-size: 14px;
+  color: black;
+  display: block;
+  max-width: 95%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.cc_b_i_message {
+  width: 100%;
+  height: 45px;
+  display: flex;
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cc_b_i_message > div > span {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.cc_b_i_message > div > div {
+  font-size: 12px;
+  padding: 2px;
+  background-color: #e0eafb;
+  border-radius: 3px;
+  color: #3681fc;
+  font-weight: bold;
+}
+
+.cc_b_i_btnArea {
+  width: 100%;
+  height: 45px;
+  position: absolute;
+  bottom: 0px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  display: none;
+}
+
+.cc_b_i_btnArea > span {
+  flex: 1;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 4px;
+  color: black;
+  /* background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%); */
+  background-color: #f0f2f5;
+  border: solid 2px #f0f2f5;
+  box-sizing: border-box;
+  font-size: 14px;
+  transition: 0.3s;
+}
+
+.cc_b_i_btnArea > span:active {
+  color: #3681fc;
+  border-color: #e0eafb;
+}
+
+.cc_b_i_btnArea > span:nth-of-type(2n) {
+  margin-left: 5px;
+}
+
+/* .cc_b_item:hover .cc_b_i_image>.cc_b_i_btnArea{
+	display: flex;
+} */
+
+/* .cc_b_i_image {
+  width: 100%;
+  height: 260px;
+  background-color: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+	position: relative;
+}
+
+.cc_b_i_btnArea{
+	width: 100%;
+	height: 50px;
+	position: absolute;
+	bottom: 5px;
+	display: none;
+	justify-content: space-around;
+	align-items: center;
+	padding: 0 10px;
+	box-sizing: border-box;
+	
+} */
+
+/* .cc_b_i_btnArea>span:nth-of-type(2n){
+	margin-left: 10px;
+}
+
+.cc_b_i_title {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cc_b_i_title > span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 20px;
+} */
+</style>

+ 471 - 0
src/views/pocAiClassroom/component/settingsDialog.vue

@@ -0,0 +1,471 @@
+<template>
+  <div>
+    <el-dialog
+      :center="true"
+      :visible.sync="show"
+      :close-on-click-modal="true"
+      width="95vw"
+      class="settingsDialog"
+    >
+      <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
+      <div class="sd_top">
+        <div class="sd_t_topTit">设置</div>
+        <div class="sd_t_right">
+          <span @click.stop="close()">×</span>
+        </div>
+      </div>
+      <div class="sd_box">
+        <div class="sd_b_head">
+          <span
+            :class="[showType == 0 ? 'sd_b_h_active' : '']"
+            @click.stop="changeShowType(0)"
+            >个人信息</span
+          >
+          <span
+            :class="[showType == 1 ? 'sd_b_h_active' : '']"
+            @click.stop="changeShowType(1)"
+            >学伴资料
+          </span>
+        </div>
+
+        <div class="sd_b_main">
+          <div class="sd_b_m_type" v-show="showType == 0">
+            <div class="sd_b_m_t_avatarArea">
+              <el-image
+                class="sd_b_m_t1_avatar"
+                :src="form.avatar"
+                fit="cover"
+              ></el-image>
+            </div>
+            <div class="sd_b_m_t_formArea">
+              <div class="sd_b_m_t_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">姓名</span>
+
+                <div class="sd_b_m_t_fa_i_inputArea">
+                  <el-input
+                    class="sd_b_m_t_fa_i_input"
+                    v-model="form.userName"
+                    placeholder="请输入姓名"
+                  ></el-input>
+                </div>
+              </div>
+
+              <div class="sd_b_m_t_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">年级</span>
+                <div class="sd_b_m_t_fa_i_inputArea">
+                  <el-select
+                    v-model="form.grade"
+                    placeholder="请选择年级"
+                    class="sd_b_m_t_fa_i_input"
+                  >
+                    <el-option
+                      v-for="(item, index) in gradeList"
+                      :key="index"
+                      :label="item"
+                      :value="index"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+            <div class="sd_b_m_t_bottomArea">
+              <span @click.stop="saveSefMessage()">保存修改</span>
+            </div>
+          </div>
+          <div class="sd_b_m_type" v-show="showType == 1">
+            <div class="sd_b_m_t_avatarArea">
+              <div class="sd_b_m_t_characterList">
+                <el-carousel
+                  :interval="4000"
+                  type="card"
+                  height="150px"
+                  :autoplay="false"
+                  :initial-index="form.characterIndex"
+                  indicator-position="none"
+                  @change="changeCharacter"
+                >
+                  <el-carousel-item
+                    v-for="(item, index) in characterList"
+                    :key="index"
+                  >
+                    <div class="characterCard">
+                      <el-image
+                        class="cc_image"
+                        :src="item.image"
+                        style="height: 100%;"
+                      ></el-image>
+                    </div>
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+            </div>
+            <div class="sd_b_m_t_formArea">
+              <div class="sd_b_m_t_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">昵称</span>
+
+                <div class="sd_b_m_t_fa_i_inputArea">
+                  <div>{{ form.characterName }}</div>
+                </div>
+              </div>
+
+              <div class="sd_b_m_t2_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">性格</span>
+                <div class="sd_b_m_t2_fa_i_inputArea">
+                  <textarea v-model="form.personality" disabled></textarea>
+                </div>
+              </div>
+            </div>
+            <div class="sd_b_m_t_bottomArea">
+              <span @click.stop="updateCharacter()">更新学伴设置</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    gradeList: {
+      type: Array,
+      default: () => []
+    },
+    characterList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      show: false,
+      showType: 0, //0:个人信息 1:学伴资料
+      form: {
+        avatar: require("../../../assets/images/pocAiClassroom/defaultAvatar.png"),
+        userName: "科科",
+        grade: 7,
+        characterIndex: 0,
+        characterName: "迷人的大反派",
+        personality:
+          "心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心"
+      }
+    };
+  },
+  methods: {
+    open(data, type = 0) {
+      this.form.userName = data.userName;
+      this.form.grade = data.grade;
+      this.form.characterIndex = data.choseCharacter;
+      this.form.personality = data.personality;
+      let character = this.characterList.find(
+        i => i.index == data.choseCharacter
+      );
+      this.form.characterName = character.name;
+      this.form.personality = character.personality;
+      this.showType = type;
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+      this.init();
+    },
+    init() {
+      this.$nextTick(() => {
+        this.form = {
+          avatar: require("../../../assets/images/pocAiClassroom/defaultAvatar.png"),
+          userName: "",
+          grade: 0,
+          characterIndex: 0,
+          characterName: "",
+          personality:""
+        };
+      });
+    },
+    changeShowType(newType) {
+      this.showType = newType;
+    },
+    saveSefMessage() {
+      this.$emit("changeUserInfo", {
+        avatar: this.form.avatar,
+        userName: this.form.userName,
+        grade: this.form.grade
+      });
+    },
+    updateCharacter() {
+      this.$emit("changeCharacterInfo",{
+        index: this.form.characterIndex,
+        name: this.form.characterName,
+        personality: this.form.personality
+      });
+    },
+    changeCharacter(_index) {
+      this.form.characterIndex = _index;
+      this.form.characterName = this.characterList[_index].name;
+      this.form.personality = this.characterList[_index].personality;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.settingsDialog >>> .el-dialog {
+  min-width: 95vw;
+  max-width: 700px;
+  height: 500px;
+  max-height: 80%;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 8px;
+  background-color: #fff;
+  /* top: 0px; */
+  /* margin: 0 auto; */
+  overflow: hidden;
+}
+.settingsDialog >>> .el-dialog__body {
+  height: 100%;
+  min-width: 95vw;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding-bottom: 50px;
+  padding-top: 10px;
+}
+.settingsDialog >>> .el-dialog__header {
+  display: none;
+}
+
+.sd_top {
+  /* background: #adadad; */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 54px;
+  border-radius: 8px 8px 0 0;
+  user-select: none;
+  font-size: 24px;
+  font-weight: bold;
+  color: black;
+  /* border-bottom: 1px #ccc solid; */
+}
+.sd_top >>> .el-input__icon {
+  line-height: 32px;
+}
+
+.sd_t_right {
+  cursor: pointer;
+}
+
+.sd_box {
+  width: 100%;
+  padding: 0 30px 20px 30px;
+  box-sizing: border-box;
+  height: calc(100% - 30px);
+}
+
+.sd_b_head {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sd_b_head > span {
+  font-size: 24px;
+  width: 220px;
+  margin: 0 10px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.sd_b_h_active::after {
+  position: relative;
+  content: "";
+  width: 100%;
+  height: 3px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #3681fc;
+}
+
+.sd_b_main {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+
+.sd_b_m_type {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd_b_m_t_avatarArea {
+  width: 100%;
+  max-height: 150px;
+  min-height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd_b_m_t_characterList {
+  width: 100%;
+  height: 100%;
+	margin: auto;
+	margin-top: 10px;
+}
+
+.sd_b_m_t_characterList >>> .is-active .cc_image {
+  opacity: 1;
+}
+
+.characterCard {
+  height: 100%;
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s;
+  background-color: #fff;
+}
+
+.cc_image {
+  opacity: 0.4;
+  transition: 0.3s;
+}
+
+.sd_b_m_t1_avatar {
+  width: 100px;
+  height: 100px;
+}
+
+.sd_b_m_t_formArea {
+  width: 100%;
+  height: calc(100% - 220px);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sd_b_m_t_fa_item {
+  width: 100%;
+  height: 60px;
+  border-radius: 6px;
+  background-color: #f0f2f5;
+  border: 1px solid #e7e7e7;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.sd_b_m_t_fa_i_inputLabel {
+  width: 90px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 20px;
+  font-size: 20px;
+  border-right: 2px solid #e7e7e7;
+}
+
+.sd_b_m_t_fa_i_inputArea {
+  width: calc(100% - 110px);
+  height: 45px;
+  margin: 0 10px;
+}
+
+.sd_b_m_t_fa_i_inputArea > div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: default;
+  font-size: 16px;
+}
+
+.sd_b_m_t_bottomArea {
+  width: 100%;
+  height: 70px;
+	margin-top: 20px;
+}
+
+.sd_b_m_t_bottomArea > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  width: 100%;
+  height: 90%;
+  background-color: #3681fc;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.sd_b_m_t_fa_i_input {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+
+.sd_b_m_t_fa_i_input >>> .el-input__inner {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+}
+
+.sd_b_m_t_fa_i_input >>> .el-input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  font-size: 16px;
+  background-color: transparent;
+}
+
+.sd_b_m_t2_fa_item {
+  width: 100%;
+  height: 50px;
+  max-height: 50px;
+  border-radius: 6px;
+  background-color: #f0f2f5;
+  border: 1px solid #e7e7e7;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  /* padding-top: 7.5px; */
+  box-sizing: border-box;
+}
+
+.sd_b_m_t2_fa_i_inputArea {
+  width: calc(100% - 110px);
+  height: 100%;
+  max-height: 50px;
+}
+
+.sd_b_m_t2_fa_i_inputArea > textarea {
+  height: 90%;
+  width: calc(100%);
+  margin: 0 0px 5px 10px;
+  font-size: 16px;
+  background: none;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+}
+</style>

+ 97 - 0
src/views/pocAiClassroom/component/txtView.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="txtView" v-loading="loading">
+		<div class="tv_content" v-text="content"></div>
+	</div>
+</template>
+
+<script>
+import "../../../utils/aws-sdk-2.235.1.min.js";
+
+const getFile = url => {
+  return new Promise((resolve, reject) => {
+    var credentials = {
+      accessKeyId: "AKIATLPEDU37QV5CHLMH",
+      secretAccessKey: "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"
+    }; //秘钥形式的登录上传
+    window.AWS.config.update(credentials);
+    window.AWS.config.region = "cn-northwest-1"; //设置区域
+    let url2 = url;
+    let _url2 = "";
+    if (
+      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+    ) {
+      _url2 = url2.split(
+        "https://view.officeapps.live.com/op/view.aspx?src="
+      )[1];
+    } else {
+      _url2 = url2;
+    }
+    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+    let name = decodeURIComponent(
+      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+    );
+    var params = {
+      Bucket: "ccrb",
+      Key: name
+    };
+    s3.getObject(params, function(err, data) {
+      if (err) {
+        console.log(err, err.stack);
+        resolve({ data: 1 });
+      } else {
+        const fileContent = data.Body.toString("utf-8");
+        resolve({ data: fileContent });
+      } // sxuccessful response
+    });
+    // axios({
+  });
+};
+export default {
+  props: {
+    url: {
+      type: String,
+      default: ""
+    },
+  },
+	data(){
+		return{
+			content:"",
+			loading:""
+		}
+	},
+	methods: {
+		getTxtContent() {
+			if(!this.url)return;
+			this.loading = true;
+			getFile(this.url).then(res=>{
+				this.loading = false;
+				this.content = res.data;
+			})
+		},
+	},
+	mounted(){
+		this.getTxtContent();
+	}
+};
+</script>
+
+<style scoped>
+.txtView{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	background-color: #ececec;
+	padding: 40px 20px;
+}
+
+.tv_content{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	background-color: #fff;
+	overflow: auto;
+	word-wrap: break-word;
+	border-radius: 3px;
+	white-space: pre;
+}
+</style>

+ 252 - 0
src/views/pocAiClassroom/component/vpdf.vue

@@ -0,0 +1,252 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <div class="loading" v-show="isloading">
+      <span>pdf可能会加载时间有点长,请耐心等待...</span>
+    </div>
+    <!-- <div id="contentArea" class="show" v-if="!loading">
+      <pdf :scale.sync="scale" :resize="true" ref="wrapper" class="p-pdf" :src="pdfData" v-for="i in numPages" :key="i"
+        :id="i" :page="i" style="width: 100%">
+      </pdf>
+    </div> -->
+    <iframe ref="viframe" style="width: 100%; height: 100%; border: none"
+      :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + pdfUrl"></iframe>
+    <!-- <div class="rightArea">
+      <div class="toolGroup">
+        <div class="page">第 {{ page }} / {{ numPages }} 页</div>
+        <el-button type="primary" @click.stop="prePage">上一页</el-button>
+        <el-button type="primary" @click.stop="nextPage">下一页</el-button>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// import pdfvuer from "pdfvuer"; // pdfvuer 版本为@1.6.1
+// import "pdfjs-dist/build/pdf.worker.entry";
+// const PDF = require("pdfjs-dist");
+// PDF.GlobalWorkerOptions.workerSrc = "../../common/pdf.worker.js";
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    pdfUrl: {
+      type: String,
+      default:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
+    },
+    ppage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      page: 1, // 当前页
+      numPages: 0, // 总页数
+      pdfData: undefined,
+      inputPage: 1, // 输入的页码
+      isloading: false,
+      scale: "page-width",
+    };
+  },
+  mounted() {
+    // this.isloading = this.$loading.service({
+    //   background: "rgba(255, 255, 255, 0.7)",
+    //   target: document.querySelector(".loading"),
+    //   text: "加载中...",
+    //   spinner: "",
+    // });
+    this.isloading = false;
+    this.$refs.viframe.onload = function () {
+      this.isloading = false
+    }
+    console.log(this.isloading);
+    // this.getPdf();
+  },
+  beforeDestroy() { },
+  watch: {
+    pdfUrl: function (s) {
+      // this.isloading = this.$loading.service({
+      //   background: "rgba(255, 255, 255, 0.7)",
+      //   target: document.querySelector(".loading"),
+      //   text: "加载中...",
+      //   spinner: "",
+      // });
+      this.isloading = false;
+      this.$refs.viframe.onload = function () {
+        this.isloading = false
+      }
+      // this.getPdf();
+    },
+  },
+  methods: {
+    // 获取 pdf 信息
+    getPdf() {
+      this.pdfData = pdfvuer.createLoadingTask({
+        url: this.pdfUrl,
+        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
+        cMapPacked: true,
+      });
+      this.pdfData
+        .then((pdf) => {
+          // this.isloading.close();
+          this.isloading = false
+          this.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 上一页
+    prePage() {
+      let page = this.page;
+      page = page > 1 ? page - 1 : 1;
+      this.page = page;
+    },
+    // 下一页
+    nextPage() {
+      let page = this.page;
+      page = page < this.numPages ? page + 1 : this.numPages;
+      this.page = page;
+    },
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span+span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>

+ 201 - 0
src/views/pocAiClassroom/component/vword.vue

@@ -0,0 +1,201 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <div class="loading" v-if="isloading">
+      <span>可能会加载时间有点长,请耐心等待...</span>
+    </div>
+    <iframe
+      ref="viframe"
+      style="width: 100%; height: 100%; border: none"
+      :src="pdfUrl"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    pdfUrl: {
+      type: String,
+      default:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
+    },
+    ppage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      page: 1, // 当前页
+      numPages: 0, // 总页数
+      pdfData: undefined,
+      inputPage: 1, // 输入的页码
+      isloading: false,
+      scale: "page-width",
+    };
+  },
+  mounted() {
+    let _this = this;
+    _this.isloading = true;
+    _this.$refs.viframe.onload = function () {
+      _this.isloading = false;
+    };
+    console.log(_this.isloading);
+    // this.getPdf();
+  },
+  beforeDestroy() {},
+  watch: {
+    pdfUrl: function (s) {
+      let _this = this;
+      _this.isloading = true;
+      _this.$refs.viframe.onload = function () {
+        _this.isloading = false;
+      };
+      console.log(_this.isloading);
+      // this.getPdf();
+    },
+  },
+  methods: {
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span + span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>

+ 1928 - 0
src/views/pocAiClassroom/doTask.vue

@@ -0,0 +1,1928 @@
+<template>
+  <div class="doTask">
+    <!-- <div class="dt_back" @click.stop="back()">返回</div> -->
+    <div class="dt_main" v-if="!isSubmit">
+      <div class="dt_m_head">
+        <div class="dt_m_h_left">
+          <div class="dt_m_h_chapter">{{ taskMessage.chapter }}</div>
+          <div class="dt_m_h_message">
+            {{ taskMessage.grade }}<span>|</span>{{ taskMessage.semester }}<span>|</span>{{ taskMessage.edition
+            }}<span>|</span>{{ taskMessage.subject }}
+          </div>
+        </div>
+        <div class="dt_m_h_right">
+          <div class="dt_m_b_r_time">
+            <div class="dt_m_b_r_t_head">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M3.75 11.25C3.75 7.79822 6.54822 5 10 5C11.7319 5 13.2984 5.70364 14.431 6.84218C15.5559 7.97295 16.25 9.52981 16.25 11.25C16.25 14.7018 13.4518 17.5 10 17.5C6.54822 17.5 3.75 14.7018 3.75 11.25ZM10 3.75C5.85786 3.75 2.5 7.10786 2.5 11.25C2.5 15.3921 5.85786 18.75 10 18.75C14.1421 18.75 17.5 15.3921 17.5 11.25C17.5 9.56177 16.9417 8.00315 16.0004 6.74983C16.0236 6.73236 16.0458 6.71307 16.0669 6.69194L17.3169 5.44194C17.561 5.19786 17.561 4.80214 17.3169 4.55806C17.0729 4.31398 16.6771 4.31398 16.4331 4.55806L15.1831 5.80806C15.1795 5.81166 15.1759 5.81529 15.1724 5.81896C13.8273 4.53761 12.0051 3.75 10 3.75Z"
+                  fill="#17C469"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M7 1.875C7 1.52982 7.33579 1.25 7.75 1.25H12.25C12.6642 1.25 13 1.52982 13 1.875C13 2.22018 12.6642 2.5 12.25 2.5H7.75C7.33579 2.5 7 2.22018 7 1.875Z"
+                  fill="#17C469"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10 7.5C10.3452 7.5 10.625 7.77982 10.625 8.125V11.25C10.625 11.5952 10.3452 11.875 10 11.875C9.65482 11.875 9.375 11.5952 9.375 11.25V8.125C9.375 7.77982 9.65482 7.5 10 7.5Z"
+                  fill="#17C469"
+                />
+              </svg>
+              <span>计时器</span>
+            </div>
+
+            <div class="dt_m_b_r_t_showTime">
+              <span>{{ showTime }}</span>
+            </div>
+
+            <div class="dt_m_b_r_t_schedule">
+              <div class="dt_m_b_r_t_s_box">
+                <div class="dt_m_b_r_t_s_b_inner" :style="`width:${schedule}%`"></div>
+                <div class="dt_m_b_r_t_s_b_round" :style="`left:${schedule}%`">
+                  <span>{{ showTaskIndex + 1 }}<span>/</span>{{ taskList.length }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="dt_m_b_r_t_btn" @click.stop="keepTime()">
+              <span v-if="timer !== null">暂停计时</span>
+              <span v-else>继续计时</span>
+            </div>
+          </div>
+        </div>
+        <span class="dt_m_h_back" @click.stop="back">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M10.1973 15L10.1717 14.9836L2.5 10.0567L10.2042 5V5.03346L10.2016 8.82213C11.3364 8.8539 12.4635 8.91767 13.0862 9.04175C13.1629 9.05701 13.2492 9.073 13.3424 9.09026C13.8173 9.17824 14.4717 9.29947 14.9413 9.52789C15.5469 9.82252 16.1378 10.2494 16.4445 10.5914C17.4895 11.7566 17.4999 13.7513 17.4999 13.7513C17.4999 13.7513 17.336 12.921 16.7963 12.4144C16.3823 12.0259 16.1246 11.8067 15.517 11.6852C14.6833 11.5184 12.283 11.5278 10.1997 11.5739L10.1973 15Z"
+              fill="black"
+            />
+          </svg>
+
+          返回
+        </span>
+      </div>
+      <div class="dt_m_box">
+        <div class="dt_m_b_left">
+          <div class="dt_m_b_l_head">
+            <div class="dt_m_l_h_title" v-text="taskMessage.title"></div>
+            <div class="dt_m_l_h_changeChapter" @click.stop="changeChapter()">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10.0417 2.20921C10.2722 1.93026 10.6458 1.93026 10.8763 2.20921L13.8271 5.78064C13.9959 5.98492 14.0464 6.29215 13.9551 6.55906C13.8637 6.82597 13.6485 7 13.4098 7H2.59016C2.26423 7 2 6.6802 2 6.28571C2 5.89123 2.26423 5.57143 2.59016 5.57143H11.985L10.0417 3.21936C9.81122 2.94042 9.81122 2.48816 10.0417 2.20921Z"
+                  fill="#3681FC"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M2.04494 9.44094C2.13629 9.17403 2.35148 9 2.59018 9H13.4098C13.7358 9 14 9.3198 14 9.71429C14 10.1088 13.7358 10.4286 13.4098 10.4286H4.01496L5.9583 12.7806C6.18878 13.0596 6.18878 13.5118 5.9583 13.7908C5.72783 14.0697 5.35416 14.0697 5.12369 13.7908L2.17287 10.2194C2.00409 10.0151 1.95359 9.70785 2.04494 9.44094Z"
+                  fill="#3681FC"
+                />
+              </svg>
+
+              <span>切换章节</span>
+            </div>
+          </div>
+          <!-- <div class="dt_m_b_l_title">{{ classTitle }}</div> -->
+          <div class="dt_m_b_l_task">
+            <div class="dt_m_b_l_t_title">
+              {{ showTaskIndex + 1 }}.
+              <span>{{ typeof taskList[showTaskIndex].answer == 'object' ? '[多选题]' : '[单选题]' }}</span
+              >{{ taskList[showTaskIndex].teststitle }}
+            </div>
+            <div class="dt_m_b_l_t_choseList">
+              <div
+                :class="[
+                  'dt_m_b_l_t_cl_item',
+                  typeof taskList[showTaskIndex].answer == 'object'
+                    ? taskList[showTaskIndex].answer2.includes(index)
+                      ? 'dt_m_b_l_t_cl_itemActive'
+                      : ''
+                    : taskList[showTaskIndex].answer2 === index
+                    ? 'dt_m_b_l_t_cl_itemActive'
+                    : ''
+                ]"
+                v-for="(item, index) in taskList[showTaskIndex].checkList"
+                @click.stop="choseAnswer(index)"
+                :key="showTaskIndex + '-' + index"
+              >
+                <div>
+                  <span></span>
+                </div>
+                <span v-if="item.imgType == 1"
+                  ><span>{{ choseList[index] }}.</span><img :src="item.src" @click.stop="$hevueImgPreview(item.src)"
+                /></span>
+                <span v-else
+                  ><span>{{ choseList[index] }}.{{ item }}</span></span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="dt_m_b_l_bottom">
+            <div class="dt_m_b_l_b_seekAssist" v-show="!showSeekAssist" @click.stop="seekAssist()">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M16.0911 7.91C16.0911 4.394 13.1601 1.563 9.60806 1.727C6.44706 1.873 3.87806 4.432 3.72106 7.593C3.59906 10.037 4.89706 12.189 6.86206 13.3V15.434C6.86206 15.911 7.24906 16.299 7.72706 16.299H12.0801C12.5571 16.299 12.9451 15.912 12.9451 15.434V13.3C14.8221 12.237 16.0911 10.222 16.0911 7.91Z"
+                  fill="#AECCFE"
+                />
+                <path
+                  d="M10.2181 1.729C10.4281 1.807 11.9881 2.424 13.2791 3.889C15.2841 6.165 15.2821 9.617 13.2351 11.856C12.9801 12.135 12.6881 12.412 12.3561 12.682C12.1591 12.842 12.0411 13.08 12.0411 13.333V15.047C12.0411 15.241 11.9011 15.407 11.7091 15.432C11.6531 15.439 11.5921 15.443 11.5251 15.443H7.95805C7.43905 15.443 7.17406 15.443 7.05206 15.189C7.12906 15.763 6.45606 16.227 8.51006 16.227H11.7931C11.7581 16.252 11.7191 16.276 11.6741 16.298H12.0781C12.2001 16.298 12.3151 16.273 12.4201 16.227H12.4961L12.4891 16.194C12.6261 16.12 12.7406 16.0102 12.8203 15.8764C12.9001 15.7426 12.9421 15.5898 12.9421 15.434V13.3C14.8211 12.238 16.0901 10.222 16.0901 7.91C16.0911 4.597 13.4891 1.894 10.2181 1.729Z"
+                  fill="#3681FC"
+                />
+                <path
+                  d="M7.76294 7.91C7.76294 8.19089 7.81827 8.46904 7.92576 8.72856C8.03326 8.98807 8.19081 9.22387 8.38944 9.4225C8.58806 9.62112 8.82386 9.77868 9.08338 9.88617C9.3429 9.99367 9.62104 10.049 9.90194 10.049C10.1828 10.049 10.461 9.99367 10.7205 9.88617C10.98 9.77868 11.2158 9.62112 11.4144 9.4225C11.6131 9.22387 11.7706 8.98807 11.8781 8.72856C11.9856 8.46904 12.0409 8.19089 12.0409 7.91C12.0409 7.6291 11.9856 7.35095 11.8781 7.09144C11.7706 6.83192 11.6131 6.59612 11.4144 6.3975C11.2158 6.19887 10.98 6.04131 10.7205 5.93382C10.461 5.82632 10.1828 5.771 9.90194 5.771C9.62104 5.771 9.3429 5.82632 9.08338 5.93382C8.82386 6.04131 8.58806 6.19887 8.38944 6.3975C8.19081 6.59612 8.03326 6.83192 7.92576 7.09144C7.81827 7.35095 7.76294 7.6291 7.76294 7.91Z"
+                  fill="#FFAF77"
+                />
+                <path
+                  d="M9.78495 9.95702C10.0519 9.97802 10.3139 9.98802 10.5669 9.99102C11.5139 9.77102 12.2199 8.92302 12.2199 7.90902C12.2199 6.72702 11.2619 5.77002 10.0809 5.77002C9.93995 5.77002 9.80295 5.78402 9.66895 5.81002L9.94795 5.97402C9.94795 5.97402 11.1929 6.75002 11.1929 7.84102C11.1929 8.93302 10.4069 9.72802 9.78495 9.95702Z"
+                  fill="#E67F36"
+                />
+                <path
+                  d="M12.442 7.91009C12.442 6.51009 11.303 5.37109 9.90301 5.37109C8.50301 5.37109 7.36401 6.51009 7.36401 7.91009C7.36401 9.17409 8.29301 10.2251 9.50301 10.4181V13.9381C9.50301 14.1591 9.68201 14.3381 9.90301 14.3381C10.124 14.3381 10.303 14.1591 10.303 13.9381V10.4181C11.513 10.2251 12.442 9.17409 12.442 7.91009ZM9.90201 9.64909C8.94301 9.64909 8.16301 8.86909 8.16301 7.91009C8.16301 6.95109 8.94301 6.17109 9.90201 6.17109C10.861 6.17109 11.641 6.95109 11.641 7.91009C11.641 8.86909 10.861 9.64909 9.90201 9.64909Z"
+                  fill="#211D38"
+                />
+                <path
+                  d="M12.0781 16.6981H7.72611C7.02911 16.6981 6.46111 16.1311 6.46111 15.4341V13.5291C4.39811 12.2651 3.20011 10.0051 3.32111 7.57311C3.48811 4.22611 6.24111 1.48211 9.59011 1.32711C11.4111 1.24311 13.1381 1.88811 14.4521 3.14311C15.7671 4.39911 16.4921 6.09211 16.4921 7.90911C16.4921 10.2011 15.2921 12.3331 13.3431 13.5281V15.4331C13.3431 16.1311 12.7761 16.6981 12.0781 16.6981ZM9.90511 2.12011C9.81311 2.12011 9.72011 2.12211 9.62711 2.12611C6.68611 2.26211 4.26711 4.67211 4.12111 7.61211C4.01111 9.81811 5.13711 11.8641 7.05911 12.9511C7.12065 12.986 7.17184 13.0366 7.20749 13.0978C7.24314 13.1589 7.26199 13.2283 7.26211 13.2991V15.4331C7.26211 15.6891 7.47011 15.8971 7.72711 15.8971H12.0801C12.3361 15.8971 12.5451 15.6891 12.5451 15.4331V13.3001C12.5451 13.1561 12.6231 13.0231 12.7481 12.9521C14.5651 11.9251 15.6931 9.99311 15.6931 7.91011C15.6931 6.31311 15.0571 4.82611 13.9011 3.72211C12.8121 2.68311 11.4021 2.12011 9.90511 2.12011Z"
+                  fill="#211D38"
+                />
+                <path
+                  d="M4.6361 9.55986C4.5271 9.55986 4.4261 9.48786 4.3951 9.37786C4.2271 8.78086 4.1581 8.15986 4.1891 7.53186C4.2071 7.17586 4.2581 6.82186 4.3421 6.47786C4.3751 6.34386 4.4121 6.20986 4.4541 6.07986C4.46416 6.04857 4.4803 6.01957 4.50159 5.99454C4.52288 5.9695 4.5489 5.94891 4.57817 5.93395C4.60743 5.91899 4.63936 5.90996 4.67213 5.90737C4.70489 5.90478 4.73784 5.90868 4.7691 5.91886C4.9001 5.96086 4.9731 6.10186 4.9301 6.23386C4.8921 6.35186 4.8581 6.47386 4.8281 6.59586C4.7521 6.90986 4.7051 7.23286 4.6891 7.55686C4.6601 8.13086 4.7241 8.69786 4.8771 9.24286C4.9141 9.37586 4.8371 9.51386 4.7041 9.55086C4.6811 9.55686 4.6591 9.55986 4.6361 9.55986ZM5.1211 5.41986C5.0801 5.41986 5.0381 5.40986 5.0001 5.38786C4.97137 5.37193 4.94607 5.35049 4.92565 5.32478C4.90522 5.29906 4.89007 5.26956 4.88106 5.23798C4.87205 5.2064 4.86935 5.17335 4.87314 5.14072C4.87692 5.1081 4.8871 5.07654 4.9031 5.04786C5.2636 4.40034 5.74536 3.82827 6.3221 3.36286C6.4291 3.27586 6.5871 3.29286 6.6741 3.39986C6.7611 3.50686 6.7441 3.66486 6.6371 3.75186C6.1071 4.18086 5.6711 4.69886 5.3401 5.29186C5.2941 5.37286 5.2091 5.41986 5.1211 5.41986ZM7.5241 3.19586C7.4321 3.19586 7.3431 3.14486 7.2991 3.05586C7.2381 2.93186 7.2891 2.78186 7.4131 2.72086C7.6881 2.58586 7.9781 2.47186 8.2731 2.38186C8.4051 2.34186 8.5451 2.41686 8.5851 2.54886C8.6251 2.68086 8.5501 2.82086 8.4181 2.86086C8.1491 2.94186 7.8851 3.04586 7.6341 3.16986C7.5991 3.18786 7.5611 3.19586 7.5241 3.19586Z"
+                  fill="white"
+                />
+                <path
+                  d="M12.7521 18.612H7.0521C6.8311 18.612 6.6521 18.433 6.6521 18.212C6.6521 17.991 6.8311 17.812 7.0521 17.812H12.7521C12.9731 17.812 13.1521 17.991 13.1521 18.212C13.1521 18.433 12.9731 18.612 12.7521 18.612Z"
+                  fill="#211D38"
+                />
+                <path
+                  d="M8.51611 7.9342C8.50411 7.9342 8.49211 7.9332 8.47911 7.9312C8.44659 7.92645 8.41532 7.91533 8.3871 7.89848C8.35888 7.88163 8.33427 7.85937 8.31466 7.83299C8.29506 7.80661 8.28086 7.77662 8.27287 7.74473C8.26488 7.71285 8.26326 7.67971 8.26811 7.6472C8.32011 7.2922 8.44511 7.0272 8.68411 6.7602C8.70588 6.73519 8.7324 6.71475 8.76214 6.70009C8.79188 6.68543 8.82423 6.67683 8.85733 6.67479C8.89042 6.67275 8.92359 6.67732 8.9549 6.68822C8.98621 6.69912 9.01505 6.71614 9.03972 6.73829C9.06439 6.76045 9.08441 6.78728 9.09861 6.81724C9.11281 6.84721 9.12091 6.87969 9.12243 6.91281C9.12396 6.94594 9.11888 6.97903 9.10749 7.01017C9.09611 7.04131 9.07864 7.06987 9.05611 7.0942C8.88511 7.2852 8.80011 7.4662 8.76211 7.7192C8.75417 7.77878 8.72484 7.83345 8.67958 7.87301C8.63432 7.91256 8.57622 7.93431 8.51611 7.9342Z"
+                  fill="white"
+                />
+                <path
+                  d="M4.24707 14.5559C4.22293 14.5019 4.18838 14.4532 4.14541 14.4125C4.10243 14.3719 4.05187 14.3401 3.99661 14.3191C3.94135 14.298 3.88248 14.288 3.82336 14.2897C3.76425 14.2914 3.70604 14.3047 3.65207 14.3289L3.35107 14.4639L3.21607 14.1629C3.19193 14.1089 3.15738 14.0602 3.11441 14.0195C3.07143 13.9789 3.02087 13.9471 2.96561 13.9261C2.91035 13.905 2.85148 13.895 2.79236 13.8967C2.73325 13.8983 2.67504 13.9117 2.62107 13.9359C2.39407 14.0379 2.29307 14.3039 2.39407 14.5309L2.52907 14.8319L2.22807 14.9669C2.00107 15.0689 1.90007 15.3349 2.00107 15.5619C2.03662 15.6411 2.09434 15.7084 2.16726 15.7556C2.24019 15.8028 2.3252 15.8279 2.41207 15.8279C2.47307 15.8279 2.53607 15.8149 2.59607 15.7889L2.89707 15.6539L3.03207 15.9549C3.06762 16.0341 3.12534 16.1014 3.19826 16.1486C3.27119 16.1958 3.3562 16.2209 3.44307 16.2209C3.50407 16.2209 3.56707 16.2079 3.62707 16.1819C3.85407 16.0799 3.95507 15.8139 3.85407 15.5869L3.71907 15.2859L4.02007 15.1509C4.12895 15.1019 4.21398 15.0118 4.25653 14.9003C4.29908 14.7887 4.29568 14.6649 4.24707 14.5559Z"
+                  fill="#FFAF77"
+                />
+                <path
+                  d="M15.677 15.1852C15.677 15.3578 15.7456 15.5234 15.8677 15.6455C15.9898 15.7676 16.1553 15.8362 16.328 15.8362C16.5007 15.8362 16.6662 15.7676 16.7883 15.6455C16.9104 15.5234 16.979 15.3578 16.979 15.1852C16.979 15.0125 16.9104 14.8469 16.7883 14.7249C16.6662 14.6028 16.5007 14.5342 16.328 14.5342C16.1553 14.5342 15.9898 14.6028 15.8677 14.7249C15.7456 14.8469 15.677 15.0125 15.677 15.1852Z"
+                  fill="#E2E5F1"
+                />
+              </svg>
+
+              <span>求助</span>
+            </div>
+            <div class="dt_m_b_l_b_btnArea" v-show="!showSeekAssist">
+              <span class="dt_m_b_l_b_ba_btnPrev" @click.stop="changeTask('prev')">上一题</span>
+              <!-- v-if="showTaskIndex > 0" -->
+              <span class="dt_m_b_l_b_ba_btnNext" @click.stop="changeTask('next')">下一题</span>
+
+              <span
+                class="dt_m_b_l_b_ba_save"
+                @click.stop="saveTask()"
+                v-if="!isDoAllTask && this.showTaskIndex != taskList.length - 1"
+              >
+                保存
+              </span>
+              <span
+                class="dt_m_b_l_b_ba_save"
+                @click.stop="submitTask()"
+                v-if="isDoAllTask || this.showTaskIndex == taskList.length - 1"
+              >
+                提交
+              </span>
+              <!-- v-if="taskList.length > showTaskIndex + 1" -->
+              <!-- <span
+                v-if="showTaskIndex == taskList.length - 1"
+                @click.stop="submitTask()"
+                >确认提交</span
+              > -->
+            </div>
+          </div>
+        </div>
+        <!-- <div class="dt_m_b_right">
+          
+
+          <div class="dt_m_b_r_taskList">
+            <div class="dt_m_b_r_tl_head">
+              <div>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8 5.5H12V6.5H8V5.5Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8 9.5H12V10.5H8V9.5Z"
+                    fill="#E67F36"
+                  />
+                </svg>
+
+                <span>答题卡</span>
+              </div>
+
+              <div>
+                共{{ taskList.length }}道题
+                <span>|</span>
+                合计100分
+              </div>
+            </div>
+            <div class="dt_m_b_r_tl_boxList">
+              <span
+                v-for="(item, index) in taskList"
+                :key="index"
+                :class="[
+                  isDoTask(index) ? 'isDoTask' : '',
+                  showTaskIndex == index ? 'inDoTask' : ''
+                ]"
+                @click.stop="showTaskIndex = index"
+                >{{ index + 1 }}</span
+              >
+            </div>
+            <div class="dt_m_b_r_tl_bottom">
+              <div><span class="isDoTask"></span>已答</div>
+
+              <div><span class="inDoTask"></span>当前</div>
+
+              <div><span></span>未答</div>
+            </div>
+          </div>
+
+          <div class="dt_m_b_r_bottom">
+            <div
+              @click.stop="saveTask()"
+              v-if="!isDoAllTask && this.showTaskIndex != taskList.length - 1"
+            >
+              保存
+            </div>
+            <div
+              @click.stop="submitTask()"
+              v-if="isDoAllTask || this.showTaskIndex == taskList.length - 1"
+            >
+              确认提交
+            </div>
+          </div>
+        </div> -->
+      </div>
+
+      <div class="dt_m_bottom">
+        <div class="dt_m_b_head">
+          <div class="dt_m_b_h_title">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
+                fill="#E67F36"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
+                fill="#E67F36"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
+                fill="#E67F36"
+              />
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 5.5H12V6.5H8V5.5Z" fill="#E67F36" />
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 9.5H12V10.5H8V9.5Z" fill="#E67F36" />
+            </svg>
+
+            <span>答题卡</span>
+          </div>
+
+          <div class="dt_m_b_r_tl_bottom">
+            <div><span class="isDoTask"></span>已答</div>
+            <div><span></span>未答</div>
+            <div><span class="inDoTask"></span>当前</div>
+          </div>
+        </div>
+
+        <div class="dt_m_b_taskList">
+          <div class="dt_m_b_r_tl_boxList">
+            <span
+              v-for="(item, index) in taskList"
+              :key="index"
+              :class="[isDoTask(index) ? 'isDoTask' : '', showTaskIndex == index ? 'inDoTask' : '']"
+              @click.stop="showTaskIndex = index"
+              >{{ index + 1 }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
+    <div class="dt_character" v-if="showSeekAssist">
+      <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
+
+      <div class="dt_c_message" v-if="showSeekAssist">
+        <span class="dt_c_m_characterName">{{
+          characterList.find(i => userInfo.choseCharacter === i.index)
+            ? characterList.find(i => userInfo.choseCharacter === i.index).name
+            : 'AI'
+        }}</span>
+
+        <span class="dt_c_m_closeIcon" @click.stop="showSeekAssist = false">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M7 0C3.14049 0 0 3.14001 0 7C0 10.86 3.14001 14 7 14C10.8595 14 14 10.86 14 7C14 3.14001 10.86 0 7 0ZM9.8555 9.156C10.0505 9.352 10.05 9.668 9.85451 9.863C9.75702 9.96 9.62951 10.009 9.50152 10.009C9.37301 10.009 9.24502 9.96001 9.14751 9.86201L6.9975 7.7055L4.84051 9.83951C4.74302 9.93552 4.61599 9.98401 4.48899 9.98401C4.36001 9.98401 4.2315 9.9345 4.1335 9.83551C3.9395 9.639 3.941 9.32299 4.13751 9.1285L6.292 6.9975L4.14549 4.844C3.95049 4.64849 3.951 4.332 4.14649 4.137C4.342 3.94149 4.65798 3.94251 4.85349 4.13799L7.00298 6.29399L9.15998 4.16001C9.35597 3.96552 9.67297 3.9675 9.86698 4.16401C10.0615 4.36052 10.0595 4.67701 9.86298 4.87101L7.70851 7.00199L9.8555 9.156Z"
+              fill="#E0EAFB"
+            />
+          </svg>
+        </span>
+
+        <div class="dt_c_m_message">
+          这题选:<span>{{ typeof taskList[showTaskIndex].answer == 'object'? taskList[showTaskIndex].answer.map(i=>choseList[i]).join('、'):choseList[taskList[showTaskIndex].answer] }}</span>
+        </div>
+        <div class="dt_c_m_btnArea">
+          <span class="dt_c_m_btn1" @click.stop="doNotKnow()">还是不太明白</span>
+          <span class="dt_c_m_btn2" @click.stop="showSeekAssist = false">明白,去做题👉</span>
+        </div>
+      </div>
+    </div>
+    <div class="dt_isSubmit" v-if="isSubmit">
+      <div class="dt_m_b_l_head">
+      <div class="dt_m_b_l_h_left">八年级>上学期>人教版</div>
+			<div class="dt_m_b_l_h_right">
+				<span @click.stop="back">返回</span>
+			</div>
+      </div>
+      <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
+      <div class="dt_is_statistics">
+        <img src="../../assets/images/pocAiClassroom/taskSuccess.png" alt="" />
+        <el-rate class="dt_is_s_star" v-model="star" allow-half disabled></el-rate>
+        <div class="dt_is_s_message">
+          <span>总计题目:{{ showMessage.total }}</span>
+          <span>总答对数量:{{ showMessage.right }}</span>
+          <span>正确率:{{ showMessage.accuracy }}%</span>
+        </div>
+
+        <div class="dt_is_s_taskList">
+          <span
+            v-for="(item, index) in taskList"
+            @click.stop="goDoTask(index)"
+            :class="[
+              typeof item.answer === 'object'
+                ? item.answer2.length != 0
+                  ? isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length
+                    ? 'isDoYes'
+                    : 'isDoNo'
+                  : 'isNoDo'
+                : item.answer2 !== ''
+                ? item.answer === item.answer2
+                  ? 'isDoYes'
+                  : 'isDoNo'
+                : 'isNoDo'
+            ]"
+            :key="index"
+            >{{ index + 1 }}</span
+          >
+        </div>
+      </div>
+
+      <div class="dt_is_taskList">
+        <div class="dt_is_tl_head">
+          <span>题目回顾</span>
+          <div>
+            <span @click.stop="onlyShowMistake = !onlyShowMistake">只显示错题</span>
+            <el-switch v-model="onlyShowMistake" style="transform: scale(1,1);"></el-switch>
+          </div>
+        </div>
+
+        <div class="dt_is_tl_taskBox">
+          <div
+            class="dt_is_tl_tb_item"
+            v-for="(item, index) in taskList"
+            :ref="'taskItem' + index + 'Ref'"
+            :key="index"
+            v-if="
+              !onlyShowMistake ||
+                (typeof item.answer === 'object'
+                  ? !(isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length)
+                  : item.answer !== item.answer2)
+            "
+          >
+            <span class="dt_is_tl_tb_i_title"
+              >{{ typeof item.answer == 'object' ? '【多选题】' : '【单选题】' }}{{ index + 1 }}.{{
+                item.teststitle
+              }}</span
+            >
+
+            <div class="dt_is_tl_tb_i_choseList">
+              <span v-for="(item2, index2) in item.checkList" :key="index + '-' + index2">
+                <span v-if="item2.imgType == 1"
+                  >{{ choseList[index2] }}<span>.</span><img :src="item2.src" @click.stop="$hevueImgPreview(item2.src)"
+                /></span>
+                <span v-else><span>{{ choseList[index2] }}.{{ item2 }}</span></span>
+              </span>
+            </div>
+
+            <div class="dt_is_tl_tb_i_answer">
+              <div>
+                你的答案:<span v-if="typeof item.answer === 'object'">
+                  <span
+                    v-for="(item3, index3) in item.answer2"
+                    :key="index + '+' + index3"
+                    :style="item.answer.includes(item3) ? 'color:#75BD42' : 'color:#FF5B5B'"
+                    >{{ choseList[item3] }}{{ index3 == item.answer2.length - 1 ? '' : '、' }}</span
+                  > </span
+                ><span v-else :style="item.answer === item.answer2 ? 'color:#75BD42' : 'color:#FF5B5B'">{{
+                  choseList[item.answer2]
+                }}</span>
+              </div>
+
+              <div>
+                正确答案:<span style="color:#75BD42">{{
+                  typeof item.answer === 'object'
+                    ? item.answer.map(i => choseList[i]).join('、')
+                    : choseList[item.answer]
+                }}</span>
+              </div>
+            </div>
+
+            <div class="dt_is_tl_tb_i_analyze">
+              <div>答案解析:<span v-text="item.analyze"></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Dialog } from 'vant'
+export default {
+  data() {
+    return {
+      showTaskIndex: 0,
+      time: 0,
+      time2: 0,
+      startTime: 0,
+      timer: null,
+			userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+      showSeekAssist: false,
+      choseList: [
+        'A',
+        'B',
+        'C',
+        'D',
+        'E',
+        'F',
+        'G',
+        'H',
+        'I',
+        'J',
+        'K',
+        'L',
+        'M',
+        'N',
+        'O',
+        'P',
+        'Q',
+        'R',
+        'S',
+        'T',
+        'U',
+        'V',
+        'W',
+        'X',
+        'Y',
+        'Z'
+      ],
+      taskList: [
+        {
+          teststitle: '请从以下选项中选出一个由三个不同字母组成的组合。',
+          checkList: ['abc', 'aaa', 'bca', 'ccc'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '本题考核学生对字母的识别能力以及对字母组合的理解。学生需要识别每个选项中的字母,并判断是否由三个不同的字母组成。选项1(abc)和选项3(bca)都由三个不同的字母组成,但根据题目要求,选项1是正确答案。',
+          answer2: '',
+          uuid: '2b29f3aa-3389-4415-85aa-613f72e23de6',
+          isSubmit: false
+        },
+        {
+          teststitle: '哪种动物会飞?',
+          checkList: ['狗', '猫', '鸟', '鱼'],
+          timuList: [],
+          answer: 2,
+          type: '1',
+          analyze: '这道题目考察学生对动物基本特征的了解。鸟是会飞的动物,而狗、猫和鱼都不会飞。',
+          answer2: '',
+          uuid: '55d7fdcb-bedb-4c2f-b6ea-b3b98e7415be',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪些动物会飞?',
+          checkList: ['狗', '猫', '鸟', '蝙蝠', '企鹅', '蜜蜂'],
+          timuList: [],
+          answer: [2, 3, 5],
+          type: '2',
+          analyze:
+            '本题考查学生对动物飞行能力的认知。鸟、蝙蝠和蜜蜂都是会飞的动物,而狗、猫和企鹅不会飞。通过这道题,学生需要对多种动物的特征进行分类和识别。',
+          answer2: [],
+          uuid: '764246b9-0ce5-4d75-9035-3de982b3420f',
+          isSubmit: false
+        },
+        {
+          teststitle: '测试',
+          testItem: 4,
+          checkList: [
+            {
+              src: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/1-2740353x15_hanspub1687855155487.jpg',
+              imgType: 1
+            },
+            '测试1',
+            '测试2',
+            '测试3'
+          ],
+          timuList: [
+            {
+              src: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/DSC20210112100951431687855143262.jpg'
+            }
+          ],
+          answer: [2, 0],
+          type: '2',
+          answer2: [],
+          uuid: '157fb875-acec-4dc9-8e60-73b82bb4ed9a',
+          analyze:
+            '题目要求选择正确的答案。根据题目和选项的内容,正确答案是3和1。\n分析考核的知识点包括理解题意和选项内容的能力。',
+          isSubmit: false
+        },
+        {
+          teststitle: '哪种动物生活在水中?',
+          checkList: ['狗', '猫', '鸟', '鱼'],
+          timuList: [],
+          answer: 3,
+          type: '1',
+          analyze: '这道题目考核的是学生对常见动物生活环境的认知能力。鱼是生活在水中的动物,而狗、猫和鸟则不是。',
+          answer2: '',
+          uuid: '723dd167-f480-47e9-b958-353138113742',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪些动物既能生活在水中也能生活在陆地上?',
+          checkList: ['青蛙', '鲨鱼', '海豚', '企鹅'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '本题考核学生对动物生活环境的更深入认知。青蛙是两栖动物,既能生活在水中也能生活在陆地上,而鲨鱼和海豚主要生活在水中,企鹅虽然能在陆地上活动,但主要生活在水中。',
+          answer2: '',
+          uuid: 'ca09b084-2fea-4e68-9f8a-325e77c652d3',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪种动物既能飞又能游泳?',
+          checkList: ['企鹅', '老鹰', '鸵鸟', '海豚'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '题目考察了学生对动物特征的综合认知。企鹅是唯一一种既能飞(在水中飞行)又能游泳的动物,而老鹰只能飞行,鸵鸟既不能飞也不能游泳,海豚只能游泳。',
+          answer2: '',
+          uuid: 'cdc13cd7-a1c6-4809-b958-d2b37b2aac6b',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪种动物能够在水中游泳?',
+          checkList: ['企鹅', '老鹰', '鸵鸟', '猫'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '这道题目考核的是学生对动物特性的了解。企鹅是一种能够在水中游泳的动物,而其他选项中的动物(老鹰、鸵鸟、猫)都不能在水中游泳。',
+          answer2: '',
+          uuid: 'ebed926d-5010-4d2e-9740-b6fe00438420',
+          isSubmit: false
+        },
+
+        {
+          teststitle: '观察以下模式,并选择正确的选项来完成这个模式:cscs, sscs, cscs, sscs, ______',
+          checkList: ['cscs', 'sscs', 'cssc', 'sssc'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '这道题目考察学生对模式识别的能力。题目给出了一个重复的模式:cscs, sscs, cscs, sscs。根据这个模式,下一步应该是cscs。因此,正确答案是选项1。',
+          end: '',
+          answer2: '',
+          uuid: '61ae2659-43c3-4741-b5c2-a543a57a9705',
+          isSubmit: false
+        },
+        {
+          teststitle: '世界上最长的河流是哪一条?',
+          checkList: ['尼罗河', '亚马逊河', '长江', '密西西比河'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '这道题目考核的是学生对世界地理常识的了解。世界上最长的河流是尼罗河,全长约6650公里。通过这道题目,学生可以学习到关于世界河流的基本知识。',
+          answer2: '',
+          uuid: 'b328ebf9-389a-4828-b6c6-9a04426d3216',
+          isSubmit: false
+        },
+        {
+          teststitle: '世界上最高的山峰及其高度',
+          checkList: ['珠穆朗玛峰,高度8848米', '珠穆朗玛峰,高度8000米', '太白山,高度8848米', '刚果盆地,高度8848米'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '本题考察学生对世界上最高山峰珠穆朗玛峰及其高度的了解。珠穆朗玛峰是世界上最高的山峰,其高度为8848米。通过这道题,学生不仅需要知道最高的山峰,还需要记住其具体高度。',
+          answer2: '',
+          uuid: 'e1cf1783-2e9f-40f6-a58f-6c3a7a951173',
+          isSubmit: false
+        }
+      ],
+      taskMessage: {
+        chapter: '第一章',
+        grade: '八年级',
+        semester: '上学期',
+        edition: '人教版',
+        subject: '物理',
+        title: '第四课 测量平均速度'
+      },
+
+      isSubmit: false,
+      star: 4,
+      onlyShowMistake: false,
+      userInfo: {
+        userName: '科科',
+        grade: 7,
+        userAvatar: '',
+        choseCharacter: 0
+      },
+      characterList: [
+        {
+          index: 0,
+          image: require('../../assets/images/pocAiClassroom/character1.png'),
+          name: '圆鼓鼓的大胖鱼',
+          personality: '心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心'
+        },
+        {
+          index: 1,
+          image: require('../../assets/images/pocAiClassroom/character2.png'),
+          name: '迷人的大反派2',
+          personality: '心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心2'
+        },
+        {
+          index: 2,
+          image: require('../../assets/images/pocAiClassroom/character3.png'),
+          name: '迷人的大反派3',
+          personality: '心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心3'
+        },
+        {
+          index: 3,
+          image: require('../../assets/images/pocAiClassroom/character4.png'),
+          name: '迷人的大反派4',
+          personality: '心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心4'
+        },
+        {
+          index: 4,
+          image:require('../../assets/images/pocAiClassroom/character5.png'),
+          name: '迷人的大反派5',
+          personality: '心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心5'
+        },
+        {
+          index: 5,
+          image: require('../../assets/images/pocAiClassroom/character6.png'),
+          name: '迷人的大反派6',
+          personality: '心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心6'
+        }
+      ]
+    }
+  },
+  computed: {
+    isDoTask() {
+      return _index => {
+        let _result = false
+        const _type = typeof this.taskList[_index].answer == 'object' ? 1 : 0
+        if (_type == 0) {
+          if (this.taskList[_index].answer2 !== '') _result = true
+        } else if (_type == 1) {
+          if (this.taskList[_index].answer2.length > 0) _result = true
+        }
+
+        return _result
+      }
+    },
+    isTrueTask() {
+      return _index => {
+        let _result = {
+          yes: [],
+          no: []
+        }
+        const _type = typeof this.taskList[_index].answer == 'object' ? 1 : 0
+        const _answer = this.taskList[_index].answer
+        const _answer2 = this.taskList[_index].answer2
+        if (_type == 0) {
+          if (_answer === _answer2) {
+            _result.yes = [_answer2]
+            _result.no = []
+          } else {
+            _result.yes = []
+            _result.no = [_answer2]
+          }
+        } else if (_type == 1) {
+          if (_answer.length === _answer2.length && _answer.every(i => _answer2.includes(i))) {
+            _result.yes = _answer2
+            _result.no = []
+          } else {
+            _result.yes = _answer.filter(i => _answer2.includes(i))
+            _result.no = _answer2.filter(i => !_answer.includes(i))
+          }
+        }
+        // let yes2 = _result.yes;
+        // yes2.sort((a,b)=>a-b)
+        // let no2 = _result.no;
+        // no2.sort((a,b)=>a-b)
+        // _result.yes = yes2;
+        // _result.no = no2;
+        return _result
+      }
+    },
+    isDoAllTask() {
+      let _result = true
+      this.taskList.forEach((item, index) => {
+        if (!this.isDoTask(index)) {
+          _result = false
+        }
+      })
+
+      return _result
+    },
+    showTime() {
+      // 更新currentTime,将秒数转换为时分秒格式
+      let hours = Math.floor((this.time + this.time2) / 3600)
+      let minutes = Math.floor(((this.time + this.time2) % 3600) / 60)
+      let seconds = Math.floor((this.time + this.time2) % 60)
+      // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
+      // 	.toString()
+      // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
+        .toString()
+        .padStart(2, '0')}`
+    },
+    showMessage() {
+      let _result = {
+        total: 0,
+        right: 0,
+        wrong: 0,
+        accuracy: 0
+      }
+      if (!this.isSubmit) return _result
+      _result.total = this.taskList.length
+
+      this.taskList.forEach((item, index) => {
+        if (
+          typeof item.answer === 'object'
+            ? !(this.isTrueTask(index).no.length == 0 && this.isTrueTask(index).yes.length == item.answer.length)
+            : item.answer !== item.answer2
+        ) {
+          _result.wrong++
+        } else {
+          _result.right++
+        }
+      })
+      _result.accuracy = Math.round((_result.right / _result.total) * 100)
+      return _result
+    },
+    schedule() {
+      let _schedule = 0
+      if (this.showTaskIndex == 0) {
+        _schedule = 0
+      } else if (this.showTaskIndex === this.taskList.length) {
+        _schedule = 100
+      } else {
+        _schedule = Math.round(((this.showTaskIndex + 1) / this.taskList.length) * 100)
+      }
+      return _schedule
+    }
+  },
+  methods: {
+    changeTask(type) {
+      if (type == 'prev') {
+        if (this.showTaskIndex > 0) {
+          this.showTaskIndex--
+        } else {
+          this.$toast('已经是第一题啦')
+          // this.$message.warning('已经是第一题啦')
+        }
+      } else if (type == 'next') {
+        if (this.showTaskIndex < this.taskList.length - 1) {
+          this.showTaskIndex++
+        } else {
+          this.$toast('已经是最后一题啦')
+        }
+      }
+    },
+    // 切换章节
+    changeChapter() {
+      console.log('切换章节')
+    },
+    //求助
+    seekAssist() {
+      this.showSeekAssist = true
+    },
+    keepTime() {
+      if (this.timer !== null) {
+        clearInterval(this.timer)
+        this.timer = null
+        this.time += this.time2
+        this.time2 = 0
+      } else {
+        this.startTime = new Date().getTime()
+        this.timer = setInterval(() => {
+          if (this.isSubmit) {
+            clearInterval(this.timer)
+            this.timer = null
+            this.time += this.time2
+            this.time2 = 0
+            return
+          }
+          this.time2 = Math.floor((new Date().getTime() - this.startTime) / 1000)
+        }, 1000)
+      }
+    },
+    endTask() {
+      this.$confirm('确定结束练习吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.back()
+        })
+        .catch(() => {
+          console.log('不结束练习')
+        })
+    },
+    saveTask() {
+      console.log('保存做题')
+    },
+    submitTask(type = 0) {
+      if (!this.isDoAllTask && type == 0) {
+        Dialog.confirm({
+          title: '确认提交',
+          message: `还有未做的题目,是否确定提交`
+        })
+          .then(() => {
+            this.submitTask(1)
+          })
+          .catch(() => {
+            console.log('继续做题')
+          })
+      } else {
+        this.isSubmit = true
+        clearInterval(this.timer)
+        this.timer = null
+        this.sortTaskList()
+      }
+    },
+    back() {
+      this.$router.push(`/pocAiClassroom`)
+    },
+    choseAnswer(_index) {
+      const _type = typeof this.taskList[this.showTaskIndex].answer == 'object' ? 1 : 0
+      if (_type == 0) {
+        if (this.taskList[this.showTaskIndex].answer2 === _index) {
+          this.taskList[this.showTaskIndex].answer2 = ''
+        } else {
+          this.taskList[this.showTaskIndex].answer2 = _index
+        }
+      } else if (_type == 1) {
+        if (this.taskList[this.showTaskIndex].answer2.includes(_index)) {
+          this.taskList[this.showTaskIndex].answer2 = this.taskList[this.showTaskIndex].answer2.filter(
+            item => item != _index
+          )
+        } else {
+          this.taskList[this.showTaskIndex].answer2.push(_index)
+        }
+      }
+    },
+    sortTaskList() {
+      this.taskList.forEach(i => {
+        if (typeof i.answer === 'object') {
+          i.answer.sort((a, b) => a - b)
+          i.answer2.sort((a, b) => a - b)
+        }
+      })
+    },
+    goDoTask(_index) {
+      if (this.$refs['taskItem' + _index + 'Ref'][0]) {
+        this.$refs['taskItem' + _index + 'Ref'][0].scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'start'
+        })
+      }
+    },
+    doNotKnow() {
+      this.$message.info('多想想')
+    }
+  },
+  mounted() {
+    this.keepTime()
+    this.sortTaskList()
+  }
+}
+</script>
+
+<style scoped>
+.doTask {
+  width: 100vw;
+  height: 100vh;
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  background-color: #f0f2f5;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+}
+
+.dt_back {
+  font-size: 24px;
+  cursor: pointer;
+  position: absolute;
+  right: 30px;
+  top: 30px;
+}
+
+.dt_main {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+}
+
+.dt_m_head {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+  justify-content: space-between;
+  position: relative;
+  /* justify-content: center; */
+}
+
+.dt_m_h_left {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  padding-bottom: 10px;
+}
+
+.dt_m_h_right {
+  width: 50%;
+  height: 100%;
+}
+
+.dt_m_h_message {
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  color: #00000099;
+}
+
+.dt_m_h_message > span {
+  margin: 0 5px;
+}
+
+.dt_m_h_back {
+  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background-color: #f8f9fa;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  top: 10px;
+  left: 10px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.dt_m_h_back > svg {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+}
+
+.dt_m_h_chapter {
+  font-size: 18px;
+  margin: 10px 0;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.dt_m_h_btn {
+  padding: 10px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.dt_m_box {
+  width: 100%;
+  height: calc(100% - 300px);
+  border-radius: 10px;
+  display: flex;
+}
+
+.dt_m_b_left {
+  width: calc(100%);
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  /* border-radius: 10px; */
+  border: 1px solid #e7e7e7;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dt_m_b_l_head {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0px;
+	font-size: 18px;
+
+}
+
+.dt_m_l_h_title {
+  font-size: 18px;
+  font-weight: bold;
+  max-width: calc(100% - 50px);
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dt_m_l_h_changeChapter {
+  font-size: 14px;
+  color: #3681fc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dt_m_l_h_changeChapter > svg {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+}
+
+.dt_m_b_l_title {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.dt_m_b_right {
+  width: 300px;
+  margin-left: 30px;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.dt_m_b_r_time {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 0px 0px 0 0;
+  box-sizing: border-box;
+}
+
+.dt_m_b_r_t_head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_m_b_r_t_head > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dt_m_b_r_t_head > span {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.dt_m_b_r_t_showTime {
+  width: 100%;
+  padding: 2% 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #f2f6fc;
+  margin-top: 5px;
+}
+
+.dt_m_b_r_t_showTime > span {
+  font-size: 2em;
+  font-weight: bold;
+  color: #0061ff;
+}
+
+.dt_m_b_r_t_schedule {
+  width: 100%;
+  padding: 8px 0 4px 0;
+  /* height: 50px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.dt_m_b_r_t_btn {
+  width: 100%;
+  padding: 5px 0;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #f0f2f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.dt_m_b_r_t_s_box {
+  width: 100%;
+  height: 8px;
+  border-radius: 5px;
+  background-color: #f0f2f5;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_r_t_s_b_inner {
+  height: 100%;
+  border-radius: 5px;
+  background-color: #3681fc;
+}
+
+.dt_m_b_r_t_s_b_round {
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  background-color: #3681fc;
+  position: absolute;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_m_b_r_t_s_b_round > span {
+  position: absolute;
+  top: -15px;
+  font-weight: bold;
+  color: #3681fc;
+}
+
+.dt_m_b_r_template {
+  width: 100%;
+  height: auto;
+  margin-bottom: 30px;
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_r_template > div {
+  font-size: 26px;
+  display: flex;
+  align-items: center;
+  margin-right: 25px;
+}
+
+.dt_m_b_r_template > div > span {
+  width: 35px;
+  height: 35px;
+  display: flex;
+  margin-right: 10px;
+  border-radius: 8px;
+  border: solid 2px #325395;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.dt_m_b_r_template > div:nth-of-type(1) > span {
+  background-color: #dae3f5;
+}
+
+.dt_m_b_r_taskList {
+  width: 100%;
+  height: calc(100% - 400px);
+  overflow: auto;
+  margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #fff;
+}
+
+.dt_m_b_r_tl_head {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(1) {
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(1) > svg {
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(2) {
+  font-size: 18px;
+  margin-top: 15px;
+  color: #00000066;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(2) > span {
+  margin: 0 5px;
+}
+
+.dt_m_b_r_tl_boxList {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px 5px;
+}
+
+.dt_m_b_r_tl_boxList > span {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: solid 2px #e7e7e7;
+  float: left;
+  margin: 0 6px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  /* font-weight: bold; */
+}
+
+.dt_m_b_r_tl_bottom {
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.dt_m_b_r_tl_bottom > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.dt_m_b_r_tl_bottom > div > span {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+  background-color: #fff;
+  border-radius: 3px;
+  border: solid 1px #e7e7e7;
+}
+
+/* .dt_m_b_r_taskList > span {
+  width: 47px;
+  height: 47px;
+  margin-right: 12px;
+  border-radius: 8px;
+  border: solid 2px #325395;
+  box-sizing: border-box;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: bold;
+  transition: 0.3s;
+} */
+
+.isDoTask {
+  background-color: #e0eafb !important;
+  border-color: #aeccfe !important;
+  color: #3681fc !important;
+}
+
+.inDoTask {
+  background-color: #3681fc !important;
+  border-color: #0061ff !important;
+  color: #fff !important;
+}
+
+.dt_m_b_r_bottom {
+  width: 100%;
+  height: 60px;
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dt_m_b_r_bottom > div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #3681fc;
+  font-size: 24px;
+  font-weight: bold;
+  border-radius: 10px;
+  box-sizing: border-box;
+  border: solid 2px #3681fc;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.dt_m_b_l_task {
+  width: 100%;
+  height: calc(100% - 80px);
+  overflow: auto;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.dt_m_b_l_t_cl_item {
+  font-size: 18px;
+  display: flex;
+  width: 100%;
+  height: auto;
+  align-items: flex-start;
+  margin: 20px 0;
+  background-color: #f2f6fc;
+  padding: 5px 10px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: 2px solid #e7e7e7;
+  transition: 0.2s;
+}
+
+.dt_m_b_l_t_cl_item > div {
+  min-width: 20px;
+  min-height: 20px;
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border-radius: 100%;
+  margin-right: 10px;
+  border: solid 2px #3681fc;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: 5px;
+}
+
+.dt_m_b_l_t_cl_item > div > span {
+  width: 13px;
+  height: 13px;
+  border-radius: 100%;
+  display: none;
+  margin: auto;
+  background-color: #3681fc;
+}
+
+.dt_m_b_l_t_cl_itemActive > div > span {
+  display: flex;
+}
+
+.dt_m_b_l_t_cl_itemActive {
+  border-color: #3681fc;
+}
+
+.dt_m_b_l_t_cl_itemActive > span {
+  color: #3681fc;
+}
+
+.dt_m_b_l_t_cl_item > span {
+  display: flex;
+  /* align-items: flex-start; */
+  /* justify-content: center; */
+  cursor: pointer;
+  word-break: break-all;
+  float: left;
+  text-align: left;
+}
+
+.dt_m_b_l_t_cl_item > span > img {
+  max-width: 80%;
+  cursor: pointer;
+}
+
+.dt_m_b_l_t_cl_item > span > span {
+  margin: 3px;
+}
+
+.dt_m_b_l_t_title {
+  font-size: 20px;
+  height: auto;
+  width: 100%;
+}
+
+.dt_m_b_l_t_title > span {
+  font-weight: bold;
+}
+.dt_m_b_l_t_choseList {
+  width: 100%;
+  height: auto;
+  margin: 20px 0;
+}
+
+.dt_m_b_l_bottom {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  border-top: 1px solid #f0f2f5;
+  justify-content: space-between;
+  padding: 0 10px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.dt_m_b_l_b_seekAssist {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.dt_m_b_l_b_seekAssist > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dt_m_b_l_b_seekAssist > span {
+  font-size: 18px;
+  text-decoration: underline;
+}
+
+.dt_m_b_l_b_btnArea {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_m_b_l_b_btnArea > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 15px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+  background-color: #fff;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.dt_m_b_l_b_ba_btnPrev {
+  background-color: #e0eafb !important;
+  color: #3681fc;
+}
+
+.dt_m_b_l_b_ba_btnNext {
+  background-color: #3681fc !important;
+  color: white;
+}
+
+.dt_m_b_l_b_ba_save {
+  color: #3681fc;
+  border: solid 1px #3681fc;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.dt_isSubmit {
+  width: 100vw;
+  margin: auto;
+  height: 100vh;
+  background-color: #fff;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.dt_is_statistics {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dt_is_statistics > img {
+  width: 180px;
+  height: 180px;
+  margin-bottom: -30px;
+}
+
+.dt_is_s_star {
+	margin-top: 10px;
+  transform: scale(1.4, 1.4);
+}
+
+.dt_is_s_message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+}
+.dt_is_s_message > span {
+  margin: 0 10px;
+	white-space: nowrap;
+  font-size: 16px;
+}
+
+.dt_is_s_taskList {
+  max-width: 90%;
+  width: auto;
+  height: auto;
+  margin-top: 30px;
+}
+
+.dt_is_s_taskList > span {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  border-radius: 4px;
+  border: solid 2px #325395;
+  box-sizing: border-box;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.isDoYes {
+  background-color: #c8e5b3 !important;
+  border-color: #c8e5b3 !important;
+}
+
+.isDoNo {
+  background-color: #f5b7bf !important;
+  border-color: #f5b7bf !important;
+}
+
+.isNoDo {
+  background-color: #f5b7bf !important;
+  border-color: #f5b7bf !important;
+}
+
+.dt_is_taskList {
+  width: 100%;
+  height: auto;
+}
+
+.dt_is_tl_head {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dt_is_tl_head > span {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.dt_is_tl_head > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_is_tl_head > div > span {
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.dt_is_tl_taskBox {
+  width: 100%;
+  height: auto;
+  margin: 10px 0;
+  box-sizing: border-box;
+  border: solid 1px #f2f2f2;
+  padding: 5px 10px 210px 10px;
+}
+
+.dt_is_tl_tb_item {
+  width: 100%;
+  height: auto;
+  padding: 10px 0 20px 0;
+  /* border-bottom: solid 1px black; */
+}
+
+.dt_is_tl_tb_i_title {
+  font-size: 18px;
+}
+.dt_is_tl_tb_i_choseList {
+  width: 100%;
+  height: auto;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 10px;
+}
+
+.dt_is_tl_tb_i_choseList > span {
+  margin-bottom: 20px;
+  font-size: 16px;
+  display: flex;
+  text-align: start;
+  cursor: default;
+  word-break: break-all;
+  float: left;
+}
+
+.dt_is_tl_tb_i_choseList > span > span {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  cursor: pointer;
+  word-break: break-all;
+  float: left;
+}
+
+.dt_is_tl_tb_i_choseList > span > span > img {
+  max-width: 90%;
+}
+
+.dt_is_tl_tb_i_answer {
+  font-size: 16px;
+  box-sizing: border-box;
+  padding-left: 10px;
+}
+
+.dt_is_tl_tb_i_answer > div {
+  margin-bottom: 10px;
+}
+
+.dt_dialogBackground {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(180deg, rgba(32, 51, 80, 0) 0%, rgba(73, 116, 182, 0.6) 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.dt_character {
+  position: fixed;
+  bottom: 0;
+  left: 1%;
+  z-index: 1;
+}
+
+.dt_character > img {
+  width: 300px;
+  z-index: 2;
+	left: -50px;
+	top: -130%;
+	position: absolute;
+}
+
+.dt_c_message {
+  width: calc(100vw - 20px);
+  height: 200px;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
+  border-radius: 6px;
+  padding: 10px 10px 10px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 5;
+}
+
+.dt_c_m_characterName {
+  padding: 5px 10px;
+  background-color: #3681fc;
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  position: absolute;
+  left: -10px;
+  top: -20px;
+}
+
+.dt_c_m_closeIcon {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+.dt_c_m_closeIcon > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.dt_is_tl_tb_i_analyze {
+  font-size: 16px;
+  box-sizing: border-box;
+  margin-top: 20px;
+  padding-left: 10px;
+}
+
+.dt_c_m_message {
+  max-width: 100%;
+  font-size: 18px;
+  padding: 10px 30px;
+}
+
+.dt_c_m_message > span {
+  font-weight: bold;
+}
+
+.dt_c_m_btnArea {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dt_c_m_btnArea > span {
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 20px;
+  cursor: pointer;
+  background-color: #fdfeff;
+  box-sizing: border-box;
+}
+
+.dt_c_m_btn1 {
+  color: #00000099;
+}
+
+.dt_c_m_btn2 {
+  background-color: #3681fc !important;
+  color: #fff;
+  padding: 5px 10px !important;
+}
+
+.dt_m_bottom {
+  width: 100%;
+  height: 150px;
+  background-color: #fff;
+}
+
+.dt_m_b_h_title {
+  margin-right: 20px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_h_title > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dt_m_b_head {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.dt_m_b_taskList {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+</style>

+ 842 - 0
src/views/pocAiClassroom/index.vue

@@ -0,0 +1,842 @@
+<template>
+  <div class="pocAiClass">
+    <div class="pac_head">
+      <div class="pac_h_left">
+        <!-- <span>八年级</span>><span>上学期</span>><span>{{
+          editionList[edition]
+        }}</span> -->
+        <span>筛选</span>
+      </div>
+      <div class="pac_h_right">
+        <div class="p_h_r_box">
+          <div>
+            <span @click.stop="settings()">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M1.07817 8.26844C0.973943 8.10465 0.973943 7.89535 1.07817 7.73156L4.57817 2.23156C4.66995 2.08734 4.82905 2 5 2L11 2C11.1709 2 11.3301 2.08734 11.4218 2.23156L14.9218 7.73156C15.0261 7.89535 15.0261 8.10465 14.9218 8.26844L11.4218 13.7684C11.3301 13.9127 11.1709 14 11 14L5 14C4.82905 14 4.66995 13.9127 4.57817 13.7684L1.07817 8.26844ZM5.27447 13L10.7255 13L13.9073 8L10.7255 3L5.27447 3L2.09265 8L5.27447 13Z"
+                  fill="black"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5ZM5.5 8C5.5 6.61929 6.61929 5.5 8 5.5C9.38071 5.5 10.5 6.61929 10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C6.61929 10.5 5.5 9.38071 5.5 8Z"
+                  fill="black"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <!-- <span @click.stop="changeGrade()">切换年级</span>
+        <el-image
+          class="pac_h_r_avatar"
+          :src="require('../../../assets/icon/pocAiClassroom/avatar.svg')"
+        ></el-image> -->
+      </div>
+    </div>
+
+    <div class="pac_screen">
+      <el-select
+        v-model="subject"
+        class="pac_s_select"
+				style="width: 48%;"
+        size="medium"
+        placeholder="请选择学科"
+      >
+        <el-option label="全部学科" value=""></el-option>
+        <el-option
+          v-for="(item, index) in subjectList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-select
+        v-model="edition"
+        class="pac_s_select"
+				style="width: 48%;"
+        size="medium"
+        placeholder="请选择版本"
+      >
+        <el-option label="全部版本" value=""></el-option>
+        <el-option
+          v-for="(item, index) in editionList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-input placeholder="搜索" v-model="searchValue" class="pac_s_select" style="width: 80%;">
+        <i
+          slot="suffix"
+          @click.stop="search()"
+          style="cursor: pointer;"
+          class="el-input__icon el-icon-search"
+        ></i>
+      </el-input>
+
+			<span class="pac_s_reset" @click.stop="reset()">重置</span>
+    </div>
+    <!-- <div class="pac_subjectList">
+      <span
+        :class="[subject == index ? 'pac_sl_active' : '']"
+        v-for="(item, index) in subjectList"
+        :key="index"
+        @click.stop="changeSubject(index)"
+        >{{ item }}</span
+      >
+    </div> -->
+
+    <!-- <div class="pac_editionList">
+      <span
+        :class="[edition == index ? 'pac_el_active' : '']"
+        v-for="(item, index) in editionList"
+        :key="index"
+        @click.stop="changeEdition(index)"
+        >{{ item }}</span
+      >
+    </div> -->
+
+    <div class="pac_box">
+      <chapterCard
+        v-for="(item, index) in classList"
+        :key="index"
+        :data="item"
+        :subjectList="subjectList"
+      />
+    </div>
+
+    <div class="pac_footDialog" v-if="showDialog">
+      <div class="pac_fd_closeArea"></div>
+      <div class="pac_fd_bottom">
+        <div class="pac_fd_b_left">
+          <img
+            :src="
+              characterList.find(i => userInfo.choseCharacter === i.index).image
+            "
+          />
+        </div>
+        <div class="pac_fd_b_right">
+          <span class="pac_fd_b_r_characterName">{{
+            characterList.find(i=>userInfo.choseCharacter===i.index)?characterList.find(i=>userInfo.choseCharacter===i.index).name:'AI'
+          }}</span>
+          <span class="pac_fd_b_r_closeIcon" @click.stop="showDialog = false">  
+            <svg
+              width="14"
+              height="14" 
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7 0C3.14049 0 0 3.14001 0 7C0 10.86 3.14001 14 7 14C10.8595 14 14 10.86 14 7C14 3.14001 10.86 0 7 0ZM9.8555 9.156C10.0505 9.352 10.05 9.668 9.85451 9.863C9.75702 9.96 9.62951 10.009 9.50152 10.009C9.37301 10.009 9.24502 9.96001 9.14751 9.86201L6.9975 7.7055L4.84051 9.83951C4.74302 9.93552 4.61599 9.98401 4.48899 9.98401C4.36001 9.98401 4.2315 9.9345 4.1335 9.83551C3.9395 9.639 3.941 9.32299 4.13751 9.1285L6.292 6.9975L4.14549 4.844C3.95049 4.64849 3.951 4.332 4.14649 4.137C4.342 3.94149 4.65798 3.94251 4.85349 4.13799L7.00298 6.29399L9.15998 4.16001C9.35597 3.96552 9.67297 3.9675 9.86698 4.16401C10.0615 4.36052 10.0595 4.67701 9.86298 4.87101L7.70851 7.00199L9.8555 9.156Z"
+                fill="#E0EAFB"
+              />
+            </svg>
+          </span>
+          <div class="pac_fd_b_r_message">
+            Hi,{{
+              userInfo.userName
+            }}同学,欢迎回来!你是否开始下一节课的学习,学习<span>【运动的快慢】</span>?
+          </div>
+          <div class="pac_fd_b_r_btnArea">
+            <span class="pac_fd_b_r_ba_btn1" @click.stop="dialogBtn(3)"
+              >我想聊聊天</span
+            >
+            <span class="pac_fd_b_r_ba_btn2" @click.stop="dialogBtn(2)"
+              >复习上一课</span
+            >
+            <span class="pac_fd_b_r_ba_btn3" @click.stop="dialogBtn(1)"
+              >学习新内容</span
+            >
+          </div>
+        </div>
+      </div>
+      <!-- <div class="pac_fd_left">
+        <el-image
+          class="pac_fd_l_hello"
+          :src="require('../../../assets/icon/pocAiClassroom/hello.gif')"
+        ></el-image>
+      </div>
+      <div class="pac_fd_right">
+        <div class="pac_fd_r_messageArea">
+          <div class="pac_fd_r_ma_message">
+            Hi,科科同学,欢迎回来!你是否开始下一课的学习,学习【运动的快慢】?
+          </div>
+          <div class="pac_fd_r_ma_btnArea">
+            <span @click.stop="dialogBtn(1)">好,开始学习新内容</span>
+            <span @click.stop="dialogBtn(2)">我想复习上一节课</span>
+            <span @click.stop="dialogBtn(3)">我想聊聊天</span>
+          </div>
+          <span class="pac_fd_r_ma_closeIcon" @click.stop="dialogBtn(0)"
+            >×</span
+          >
+        </div>
+      </div> -->
+    </div>
+		<settingsDialog ref="settingsDialogRef" :gradeList="gradeList" :characterList="characterList" @changeUserInfo="changeUserInfo" @changeCharacterInfo="changeCharacterInfo"/>
+  </div>
+</template>
+
+<script>
+import chapterCard from "./component/chapterCard.vue";
+import settingsDialog from "./component/settingsDialog.vue";
+export default {
+  components: {
+    chapterCard,
+		settingsDialog
+  },
+  data() {
+    return {
+      userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+      subject: "",
+      edition: "",
+      searchValue: "",
+      grade: 7,
+      showDialog: true,
+      userInfo: {
+        userName: "科科",
+				grade:7,
+				userAvatar:require("../../assets/images/pocAiClassroom/defaultAvatar.png"),
+        choseCharacter: 0,
+      },
+      characterList: [
+        {
+          index: 0,
+          image: require("../../assets/images/pocAiClassroom/character1.png"),
+					name:"圆鼓鼓的大胖鱼",
+					personality:"心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心",  
+        },
+        {
+          index: 1,
+          image: require("../../assets/images/pocAiClassroom/character2.png"),
+					name:"迷人的大反派2",
+					personality:"心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心2",  
+        },
+        {
+          index: 2,
+          image: require("../../assets/images/pocAiClassroom/character3.png"),
+					name:"迷人的大反派3",
+					personality:"心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心3",  
+        },
+        {
+          index: 3,
+          image: require("../../assets/images/pocAiClassroom/character4.png"),
+					name:"迷人的大反派4",
+					personality:"心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心4",  
+        },
+        {
+          index: 4,
+          image: require("../../assets/images/pocAiClassroom/character5.png"),
+					name:"迷人的大反派5",
+					personality:"心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心5",  
+        },
+        {
+          index: 5,
+          image: require("../../assets/images/pocAiClassroom/character6.png"),
+					name:"迷人的大反派6",
+					personality:"心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心6",  
+        }
+      ],
+      gradeList: [
+        "一年级",
+        "二年级",
+        "三年级",
+        "四年级",
+        "五年级",
+        "六年级",
+        "七年级",
+        "八年级",
+        "九年级"
+      ],
+      subjectList: [
+        { value: 0, label: "语文" },
+        { value: 1, label: "数学" },
+        { value: 2, label: "英语" },
+        { value: 3, label: "物理" },
+        { value: 4, label: "化学" },
+        { value: 5, label: "生物" },
+        { value: 6, label: "历史" },
+        { value: 7, label: "地理" },
+        { value: 8, label: "政治" }
+      ],
+      editionList: [
+        { value: 0, label: "人教版" },
+        { value: 1, label: "教科版" },
+        { value: 2, label: "北师大版" },
+        { value: 3, label: "苏教版" },
+        { value: 4, label: "沪教版" },
+        { value: 5, label: "浙教版" },
+        { value: 6, label: "冀教版" },
+        { value: 7, label: "鲁教版" },
+        { value: 8, label: "人教A版" },
+        { value: 9, label: "人教B版" }
+      ],
+      classList: [
+        {
+          title: "第一章",
+          allClass: [
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              isComplete: true,
+              subject: 0,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png"
+            },
+            {
+              title: "运动的快慢",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
+            },
+            {
+              title: "测量平均速度",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png"
+            },
+            {
+              title: "单元测试",
+              type: 1,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+            }
+          ]
+        },
+        {
+          title: "第二章",
+          allClass: [
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
+            },
+            {
+              title: "运动的快慢",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png"
+            },
+            {
+              title: "测量平均速度",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png"
+            },
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
+            },
+            {
+              title: "运动的快慢",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
+            },
+            {
+              title: "测量平均速度",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%87101724834875748.png"
+            },
+            {
+              title: "单元测试",
+              type: 1,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+            }
+          ]
+        },
+        {
+          title: "第三章",
+          allClass: [
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              isComplete: true,
+              subject: 0,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png"
+            },
+            {
+              title: "运动的快慢",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
+            },
+            {
+              title: "测量平均速度",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png"
+            },
+            {
+              title: "单元测试",
+              type: 1,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+            }
+          ]
+        }
+      ]
+    };
+  },
+  methods: {
+    changeGrade() {
+      this.$refs.settingsDialogRef.open(this.userInfo);
+    },
+    // changeSubject(newIndex) {
+    //   if (this.subject == newIndex) return;
+    //   this.subject = newIndex;
+    // },
+    // changeEdition(newIndex) {
+    //   if (this.edition == newIndex) return;
+    //   this.edition = newIndex;
+    // },
+    dialogBtn(type = 0) {
+      if (type == 0) {
+        this.showDialog = false;
+      } else if (type == 1) {
+        this.$router.push(
+          `/pocClass`
+        );
+        // console.log("开始学习新的内容");
+      } else if (type == 2) {
+        this.$router.push(
+          `/pocClass`
+        );
+        // console.log("复习上一节课");
+      } else if (type == 3) {
+        this.$router.push(
+          `/pocAiChat`
+        );
+      }
+    },
+		reset(){
+			this.subject="";
+      this.edition="";
+      this.searchValue="";
+		},
+    settings() {
+      this.$refs.settingsDialogRef.open(this.userInfo);
+    },
+    search() {
+      console.log("搜索", this.searchValue);
+    },
+		changeUserInfo(data){
+			this.userInfo.userName = data.userName;
+			this.userInfo.grade = data.grade;
+			this.$refs.settingsDialogRef.close();
+		},
+		changeCharacterInfo(data){
+			this.userInfo.choseCharacter = data.index;
+			this.$refs.settingsDialogRef.close();
+		}
+  },
+  mounted() {
+		// window.addEventListener("orientationchange",()=>{alert("切换了方向")})
+	}
+};
+</script>
+
+<style scoped>
+.pocAiClass {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  background-color: #f0f2f5;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+.pac_head {
+  width: 100%;
+  height: auto;
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.pac_h_left {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pac_h_left > span {
+  font-size: 22px;
+}
+
+.pac_h_right {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p_h_r_box {
+	width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.p_h_r_box > div {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.p_h_r_box > div > div {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.p_h_r_box > div > span {
+  width: 40px;
+  height: 40px;
+}
+
+.p_h_r_box > div > span > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.pac_screen {
+  width: 100%;
+  height: auto;
+  margin-top: 10px;
+  display: flex;
+	flex-wrap: wrap;
+  align-items: center;
+	justify-content: space-between;
+}
+
+.pac_s_reset{
+	padding: 7px 12px;
+	background-color: #E2EEFF;
+	color: #3681FC;
+	font-size: 18px;
+	border-radius: 8px;
+	cursor: pointer;
+	margin-bottom: 10px;
+}
+
+.pac_s_select {
+  height: 40px;
+	margin-bottom: 10px;
+}
+
+.pac_s_select >>> .el-input {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+
+.pac_s_select >>> .el-input > .el-input__inner {
+  width: 100%;
+  height: 100%;
+}
+
+.pac_s_select >>> .el-input__inner {
+  font-size: 16px;
+}
+
+.pac_box {
+  width: 100%;
+  height: auto;
+  /* margin-top: 20px; */
+	overflow: auto;
+}
+
+.pac_fd_left {
+  width: 200px;
+  height: 200px;
+}
+
+.pac_fd_l_hello {
+  width: 100%;
+  height: 100%;
+}
+
+.pac_fd_right {
+  flex: 1;
+  height: 200px;
+  display: flex;
+  align-items: center;
+}
+
+.pac_fd_r_messageArea {
+  width: 100%;
+  height: 90%;
+  background-color: #dae3f5;
+  box-sizing: border-box;
+  padding: 30px 30px 20px 30px;
+  border: solid 3px #fff;
+  border-radius: 0 20px 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+.pac_fd_r_ma_message {
+  width: 100%;
+  flex: 1;
+  font-size: 26px;
+}
+
+.pac_fd_r_ma_btnArea {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.pac_fd_r_ma_btnArea > span {
+  margin-left: 30px;
+  background-color: #fff;
+  padding: 14px 20px;
+  border-radius: 10px;
+  cursor: pointer;
+  border: solid 2px #4874cb;
+}
+
+.pac_fd_r_ma_btnArea > span:nth-of-type(1) {
+  background-color: #4874cb;
+  color: #fff;
+}
+
+.pac_fd_r_ma_closeIcon {
+  font-size: 30px;
+  font-weight: bold;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  color: #fff;
+}
+
+.pac_footDialog {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* background-color: red; */
+}
+
+.pac_fd_closeArea {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(32, 51, 80, 0) 0%,
+    rgba(73, 116, 182, 0.6) 100%
+  );
+}
+
+.pac_fd_bottom {
+  width: 100%;
+  height: 150px;
+  position: absolute;
+  bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pac_fd_b_left {
+  width: 130px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 1;
+	left: 0;
+	bottom: 100%;
+}
+
+.pac_fd_b_left > img {
+  position: absolute;
+  bottom: 0px;
+	left: 0px;
+  width: 300px;
+  transform: translate(-60px,80px);
+}
+
+.pac_fd_b_right {
+  width: 96%;
+
+  height: 100%;
+  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
+  border-radius: 6px;
+  padding: 32px 24px 24px 24px;
+  box-sizing: border-box;
+  z-index: 2;
+  position: relative;
+}
+
+.pac_fd_b_r_characterName {
+  padding: 10px 15px;
+  background-color: #3681fc;
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+  position: absolute;
+  left: 0px;
+  top: -20px;
+}
+
+.pac_fd_b_r_closeIcon{
+	width: 25px;
+	height: 25px;
+	position: absolute;
+	right: 10px;
+	top: 10px;
+}
+
+.pac_fd_b_r_closeIcon>svg{
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+}
+
+.pac_fd_b_r_message {
+  max-width: 100%;
+  font-size: 16px;
+  padding: 0px 30px;
+}
+
+.pac_fd_b_r_message > span {
+  font-weight: bold;
+}
+
+.pac_fd_b_r_btnArea {
+  position: absolute;
+  bottom: 10px;
+  right: 30px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.pac_fd_b_r_btnArea > span {
+  padding: 5px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-left: 5px;
+	white-space: nowrap;
+  cursor: pointer;
+  background-color: #fdfeff;
+  box-sizing: border-box;
+}
+
+.pac_fd_b_r_ba_btn1 {
+  color: #00000099;
+}
+
+.pac_fd_b_r_ba_btn2 {
+  border: 2px solid #3681fc;
+  background-color: #ffffffe5 !important;
+}
+
+.pac_fd_b_r_ba_btn3 {
+  background-color: #3681fc !important;
+  color: white;
+}
+</style>

+ 38 - 0
src/views/pocAiClassroom/pocClass.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="chatArea">
+		<iframe ref="iframeRef" class="ca_iframe" allow="camera *; microphone *;display-capture;midi;encrypted-media;" src="https://beta.cloud.cocorobo.cn/aigpt/#/js"></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+			userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+    };
+  },
+  methods: {
+
+  },
+  mounted() {
+    
+  }
+};
+</script>
+
+<style scoped>
+.chatArea{
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.ca_iframe{
+	width: 100%;
+	height: 100%;
+}
+</style>

+ 91 - 0
src/views/pocAiClassroom/startIndex.vue

@@ -0,0 +1,91 @@
+<template>
+	<div class="startIndex">
+		<div class="si_start">
+			<div class="si_s_heardImage"></div>
+			<div class="si_s_messageArea">
+				<span>Hi~同学!😆</span>
+				<span>我是智能学伴,是陪你学习和聊天的小伙伴!😎</span>
+				<span>有什么问题,你都可以随时召唤我🫡</span>
+				<span>请你先帮我取一个名字吧😜</span>
+			</div>
+			<div class="si_s_inputArea">
+				<div class="si_s_inputLeft"></div>
+				<span></span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+.startIndex{
+	width: 100vw;
+	height: 100vh;
+	overflow: auto;
+	background-image: radial-gradient( #BBCDFF 0%, #BBCDFF 1%, #e6dee9 100%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.si_start{
+	width: auto;
+	height: auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.si_s_messageArea{
+	display: flex;
+	flex-direction: column;
+	padding: 30px;
+	background-color: #fff;
+	border-radius: 10px;
+	border: solid 2px black;
+}
+
+.si_s_messageArea>span{
+	color:#6F93F0;
+	font-size: 20px;
+}
+
+.si_s_inputArea{
+	margin-top: 20px;
+	width: 250px;
+	height: 50px;
+	background-color: #fff;
+	border: solid 2px black;
+	border-radius: 0 10px 10px 10px;
+}
+.si_s_inputLeft{
+	width: 200px;
+	height: 50px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.si_s_inputArea>span{
+	width: 50px;
+	height: 50px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: gray;
+}
+</style>