课堂观察与POC课堂

src/assets/icon/classroomObservation/derive.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="1725416807860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4430" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M516.394 102.699c10.469 0 19.289 3.592 26.453 10.744L728.91 299.506c7.164 7.164 10.744 15.98 10.744 26.452 0 10.668-3.537 19.532-10.6 26.6-7.072 7.076-15.938 10.608-26.598 10.608-10.475 0-19.299-3.584-26.459-10.748l-122.381-122.68v431.126c0 10.266-3.635 19.041-10.902 26.316-7.277 7.271-16.049 10.908-26.316 10.908-10.281 0-19.049-3.637-26.32-10.908-7.276-7.275-10.92-16.051-10.92-26.316V229.738l-122.364 122.68c-7.56 7.168-16.376 10.748-26.464 10.748-10.28 0-19.04-3.64-26.316-10.908-7.276-7.272-10.916-16.052-10.916-26.32 0-10.084 3.576-18.908 10.744-26.456l186.061-186.063c7.16-7.168 15.992-10.744 26.457-10.744l0.034 0.024z m367.71 520.935c10.264 0 19.045 3.639 26.309 10.912 7.268 7.275 10.912 16.051 10.912 26.328v148.818c0 31.018-10.748 57.277-32.264 78.793-21.896 21.889-48.064 32.84-78.492 32.84H214.303c-30.417 0-56.772-10.855-79.06-32.568-21.716-22.287-32.568-48.643-32.568-79.064V660.874c0-10.285 3.634-19.053 10.908-26.328 7.276-7.273 16.049-10.912 26.321-10.912 10.266 0 19.04 3.639 26.316 10.912 7.273 7.275 10.908 16.051 10.908 26.328v148.818c0 10.27 3.634 19.049 10.914 26.324 7.274 7.273 16.042 10.896 26.318 10.896h596.256c10.076 0 18.656-3.623 25.729-10.896 7.072-7.275 10.611-16.055 10.611-26.324V660.874c0-10.285 3.637-19.053 10.908-26.328 7.277-7.273 16.045-10.912 26.313-10.912h-0.073z" p-id="4431"></path></svg>

src/assets/icon/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/components/pages/classroomObservation/components/addNewAnalysisDialog.vue

@@ -1,43 +1,56 @@
 <template>
-	<div>
-		<el-dialog :center="true" :visible.sync="dialogVisible" width="1200px" class="addTemplateDialog">
-			<!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
-			<div class="a-d-top">
-				<div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
-				<div>
-					<el-input
-						placeholder="请输入内容"
-						prefix-icon="el-icon-search"
-						v-model="input2"
-						clearable
-					>
-					</el-input>
-				</div>
-				<div class="a-d-t-right">
-					<span @click.stop="close()">×</span>
-				</div>
-			</div>
-			<div style="display: flex; height: 100%">
-				<div class="a-d-t-left">
-					<!-- <div class="itemTit">我的模块</div> -->
-					<div
-						:style="
-							tagIndex == index
-								? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
-								: ''
-						"
-						class="a-d-t-l-item"
-						v-for="(item, index) in dialogTagList"
-						:key="item.id"
-						@click.stop="tagIndex = index"
-					>
-						{{ item.name }}
-					</div>
-				</div>
-				<div class="a-d-box">
-					
-					<div
-						style="
+  <div>
+    <el-dialog
+      :center="true"
+      :visible.sync="dialogVisible"
+      width="1200px"
+      class="addTemplateDialog"
+    >
+      <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
+      <div class="a-d-top">
+        <div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
+        <div style="display: flex;">
+          <el-input
+            placeholder="请输入内容"
+            prefix-icon="el-icon-search"
+            v-model="input2"
+            clearable
+          >
+          </el-input>
+
+          <el-button
+					v-if="canAddNew"
+            style="margin-left: 30px;"
+            size="mini"
+            @click.stop="addNew()"
+            round
+            >新建分析模块</el-button
+          >
+        </div>
+        <div class="a-d-t-right">
+          <span @click.stop="close()">×</span>
+        </div>
+      </div>
+      <div style="display: flex; height: 100%">
+        <div class="a-d-t-left">
+          <!-- <div class="itemTit">我的模块</div> -->
+          <div
+            :style="
+              tagIndex == index
+                ? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
+                : ''
+            "
+            class="a-d-t-l-item"
+            v-for="(item, index) in dialogTagList"
+            :key="item.id"
+            @click.stop="tagIndex = index"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="a-d-box">
+          <div
+            style="
 							font-family: PingFang SC;
 							font-size: 16px;
 							font-weight: 600;
@@ -46,168 +59,196 @@
 							margin: 20px 0;
 							margin-bottom: 10px;
 						"
-					>
-						推荐
-					</div>
-					<div class="a-d-b-subject">
-						<span v-for="(item,index) in tagSubjectList" :class="['a_d_b_s_btn',tagSubject==item?'a_d_b_s_ActiveBtn':'']"  :key="index+'-'+tagIndex" @click.stop="tagSubject==item?tagSubject='':tagSubject=item">{{ item }}</span>
-					</div>
-					<div style="display: flex; flex-wrap: wrap">
-						<div
-							class="a-d-b-item"
-							v-for="(item, index) in searchDataList"
-							:key="index"
-						>
-							<div class="a-d-b-i-top">
-								<img
-									style="height: 22px; width: 22px"
-									:src="
-										require('../../../../assets/icon/classroomObservation/digImg.svg')
-									"
-								/>
-								<div class="a-d-b-i-t-title">{{ item.title }}</div>
-							</div>
-							<div class="a-d-b-i-bottom">{{ item.brief }}</div>
-							<div class="a-d-b-i-bottomPer" style="display: block">
-								{{item.sum}}人已使用
-							</div>
-							<div class="a-d-b-i-bottomBtn" style="display: none">
-								<div
-									style="
+          >
+            推荐
+          </div>
+          <div class="a-d-b-subject">
+            <span
+              v-for="(item, index) in tagSubjectList"
+              :class="[
+                'a_d_b_s_btn',
+                tagSubject == item ? 'a_d_b_s_ActiveBtn' : ''
+              ]"
+              :key="index + '-' + tagIndex"
+              @click.stop="
+                tagSubject == item ? (tagSubject = '') : (tagSubject = item)
+              "
+              >{{ item }}</span
+            >
+          </div>
+          <div style="display: flex; flex-wrap: wrap">
+            <div
+              class="a-d-b-item"
+              v-for="(item, index) in searchDataList"
+              :key="index"
+            >
+              <div class="a-d-b-i-top">
+                <img
+                  style="height: 22px; width: 22px"
+                  :src="
+                    require('../../../../assets/icon/classroomObservation/digImg.svg')
+                  "
+                />
+                <div class="a-d-b-i-t-title">{{ item.name }}</div>
+              </div>
+              <div class="a-d-b-i-bottom">{{ item.detail }}</div>
+              <div class="a-d-b-i-bottomPer" style="display: block">
+                {{ item.count }}人已使用
+              </div>
+              <div class="a-d-b-i-bottomBtn" style="display: none">
+                <div
+                  style="
 										display: flex;
 										width: 100%;
 										justify-content: space-around;
 									"
-								>
-									<!-- <div class="a-d-b-i-t-btn">详情</div> -->
-									<div
-										class="a-d-b-i-t-btn1"
-										@click="addAnalysisItem(item.title)"
-									>
-										添加
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- </div> -->
-		</el-dialog>
-	</div>
+                >
+                  <!-- <div class="a-d-b-i-t-btn">详情</div> -->
+                  <div
+                    class="a-d-b-i-t-btn1"
+                    @click="addAnalysisItem(item.name,item.id)"
+                  >
+                    添加
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- </div> -->
+    </el-dialog>
+    <newAnalysisModule v-if="canAddNew" ref="newAnalysisModuleRef" @success="successNew"/>
+  </div>
 </template>
 
 <script>
-	export default {
-		props:{
-			dialogTagDataList:{
-				type:Array,
-				default:()=>{
-					return []
-				}
-			}
-		},
-		data(){
-			return{
-				dialogVisible:false,
-				input2:"",
-				tagIndex: 0,
-			tagSubject:'',
-				dialogTagList: [
-				{ id: 0, name: "通用课堂分析", },
-				{ id: 1, name: "学科课堂分析" },
-				{ id: 2, name: "扩展分析" },
-				//{ id: 3, name: "增值性分析" },
-			],
-			}
-		},
-		computed:{
-			searchDataList() {
-			let _result = this.dialogTagDataList.filter((i) => i.type == this.tagIndex);
-			if (this.input2) {
-				_result = _result.filter((i) => i.title.indexOf(this.input2) > -1);
-			}
-			if(this.tagSubject){
-				_result = _result.filter((i) => i.subject == this.tagSubject);
-			}
+import newAnalysisModule from "./newAnalysisModule.vue";
+export default {
+  components: {
+    newAnalysisModule
+  },
+  props: {
+    dialogTagDataList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    canAddNew: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      input2: "",
+      tagIndex: 0,
+      tagSubject: "",
+      dialogTagList: [
+        { id: 0, name: "通用课堂分析" },
+        { id: 1, name: "学科课堂分析" },
+        { id: 2, name: "扩展分析" }
+        //{ id: 3, name: "增值性分析" },
+      ]
+    };
+  },
+  computed: {
+    searchDataList() {
+      let _result = this.dialogTagDataList.filter(i => i.type == this.tagIndex);
+      if (this.input2) {
+        _result = _result.filter(i => i.name.indexOf(this.input2) > -1);
+      }
+      if (this.tagSubject) {
+        _result = _result.filter(i => i.subject == this.tagSubject);
+      }
 
-			return _result
-		},
-		tagSubjectList(){
-			let _result = [];
-			this.dialogTagDataList.filter((i) => i.type == this.tagIndex).forEach(i=>{
-				if(i.subject && !_result.includes(i.subject)){
-					_result.push(i.subject)
-				}
-			})
-			return _result;
+      return _result;
+    },
+    tagSubjectList() {
+      let _result = [];
+      this.dialogTagDataList
+        .filter(i => i.type == this.tagIndex)
+        .forEach(i => {
+          if (i.subject && !_result.includes(i.subject)) {
+            _result.push(i.subject);
+          }
+        });
+      return _result;
+    }
+  },
+  methods: {
+    open(type) {
+      this.tagIndex = type;
+      this.input2 = "";
+      this.tagSubject = "";
+      this.dialogVisible = true;
+    },
+    close() {
+      this.dialogVisible = false;
+      this.tagIndex = 0;
+      this.input2 = "";
+      this.tagSubject = "";
+    },
+    addAnalysisItem(title,id) {
+      this.$emit("success", title,id);
+    },
+    addNew() {
+      this.$refs.newAnalysisModuleRef.open();
+    },
+		successNew(){
+			this.$emit("update");
 		}
-		},
-		methods:{
-			open(type){
-				this.tagIndex = type;
-				this.input2 = "";
-				this.tagSubject = "";
-				this.dialogVisible = true;
-			},
-			close(){
-				this.dialogVisible = false;
-				this.tagIndex = 0;
-				this.input2 = "";
-				this.tagSubject = "";
-			},
-			addAnalysisItem(title){
-				this.$emit("success",title)
-			}
-		}
-	}
+  }
+};
 </script>
 
 <style scoped>
 .a-d-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;
-	border-bottom: 1px #ccc solid;
+  /* 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;
+  border-bottom: 1px #ccc solid;
 }
 .a-d-top >>> .el-input__inner {
-	width: 320px;
-	height: 32px;
+  width: 320px;
+  height: 32px;
 }
 .a-d-top >>> .el-input__icon {
-	line-height: 32px;
+  line-height: 32px;
 }
 .a-d-topTit {
-	width: 171px;
-	height: 32px;
-	display: flex;
-	align-items: center;
-	font-family: PingFang SC;
-	box-sizing: border-box;
-	padding: 5px;
-	line-height: 22px;
-	justify-content: center;
-	/* text-align: left; */
+  width: 171px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  font-family: PingFang SC;
+  box-sizing: border-box;
+  padding: 5px;
+  line-height: 22px;
+  justify-content: center;
+  /* text-align: left; */
 }
 .a-d-t-left {
-	width: 200px;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	justify-content: flex-start;
-	box-sizing: border-box;
-	padding-left: 5px;
+  width: 200px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-left: 5px;
 }
 
 .a-d-t-l-item {
-	/* width: auto;
+  /* width: auto;
 	height: 90%;
 	display: flex;
 	justify-content: center;
@@ -217,103 +258,103 @@
 	background-color: #d4d9da;
 	margin-right: 3px;
 	cursor: pointer; */
-	cursor: pointer;
-	width: 136px;
-	height: 32px;
-	display: flex;
-	align-items: center;
-	border-radius: 5px;
-	font-family: PingFang SC;
-	box-sizing: border-box;
-	padding: 5px;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 22px;
-	text-align: left;
-	margin-top: 20px;
-	/* margin-bottom: 20px; */
+  cursor: pointer;
+  width: 136px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  font-family: PingFang SC;
+  box-sizing: border-box;
+  padding: 5px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: left;
+  margin-top: 20px;
+  /* margin-bottom: 20px; */
 }
 
 .a-d-t-l-item:hover {
-	background-color: white;
+  background-color: white;
 }
 
 .a-d-t-right {
-	width: 40px;
-	height: 40px;
-	margin-right: 10px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	color: black !important;
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black !important;
 }
 
 .a-d-t-right > span {
-	width: 25px;
-	height: 25px;
-	border-radius: 25px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	/* align-items: center; */
-	font-size: 22px;
-	color: #fff;
-	/* background-color: #adadad; */
-	cursor: pointer;
-	/* background-color: #e6e6e6; */
-	color: #adadad;
+  width: 25px;
+  height: 25px;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* align-items: center; */
+  font-size: 22px;
+  color: #fff;
+  /* background-color: #adadad; */
+  cursor: pointer;
+  /* background-color: #e6e6e6; */
+  color: #adadad;
 }
 
 .a-d-box {
-	width: 100%;
-	height: 100%;
-	background-color: #f0f2f5;
-	overflow: scroll;
-	overflow-x: hidden;
-	box-sizing: border-box;
-	padding: 15px;
-	padding-bottom: 50px;
+  width: 100%;
+  height: 100%;
+  background-color: #f0f2f5;
+  overflow: scroll;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 15px;
+  padding-bottom: 50px;
 }
 
 .a-d-b-item {
-	width: 22%;
-	height: 200px;
-	display: flex;
-	flex-direction: column;
-	background-color: #fff;
-	border-radius: 10px;
-	padding: 15px;
-	float: left;
-	box-sizing: border-box;
-	margin-bottom: 10px;
-	margin-right: 20px;
-	transform: .3s;
-	box-shadow: 0 16px 24px 2px #f0f2f5;
-	/* position: relative; */
+  width: 22%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px;
+  float: left;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  transform: 0.3s;
+  box-shadow: 0 16px 24px 2px #f0f2f5;
+  /* position: relative; */
 }
 
-.a-d-b-item:hover{
-	box-shadow: 0 16px 24px 2px #0000001c;
+.a-d-b-item:hover {
+  box-shadow: 0 16px 24px 2px #0000001c;
 }
 
 .a-d-b-item:hover .a-d-b-i-bottomBtn {
-	display: block !important;
+  display: block !important;
 }
 .a-d-b-item:hover .a-d-b-i-bottomPer {
-	display: none !important;
+  display: none !important;
 }
 .a-d-b-i-top {
-	width: 100%;
-	/* height: 50%; */
-	height: 20px;
-	margin-bottom: 15px;
-	display: flex;
-	align-items: center;
-	/* justify-content: space-between; */
+  width: 100%;
+  /* height: 50%; */
+  height: 20px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  /* justify-content: space-between; */
 }
 .a-d-b-i-top > img {
-	width: 35px;
-	height: 35px;
+  width: 35px;
+  height: 35px;
 }
 /* .a-d-b-i-top>div{ */
 /* width: auto;
@@ -325,118 +366,118 @@
 /* } */
 
 .a-d-b-i-t-title {
-	width: 100%;
-	height: 35px;
-	display: block;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0 10px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	word-break: break-all;
-	white-space: nowrap;
-	line-height: 35px;
-	/* display: -webkit-box;
+  width: 100%;
+  height: 35px;
+  display: block;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: nowrap;
+  line-height: 35px;
+  /* display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 1;
 	overflow: hidden; */
 }
 
 .a-d-b-i-bottom {
-	width: 100%;
-	flex: 1;
-	overflow: hidden;
-	/* max-height: 186px; */
-	font-size: 14px;
-	-webkit-line-clamp: 5;
-	line-height: 20px;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  /* max-height: 186px; */
+  font-size: 14px;
+  -webkit-line-clamp: 5;
+  line-height: 20px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .a-d-b-i-t-btn {
-	font-size: 14px;
-	box-sizing: border-box;
-	padding: 8px 25px;
-	border: 1px solid rgba(54, 129, 252, 1);
-	border-radius: 5px;
-	color: rgba(54, 129, 252, 1);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 8px 25px;
+  border: 1px solid rgba(54, 129, 252, 1);
+  border-radius: 5px;
+  color: rgba(54, 129, 252, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 .a-d-b-i-t-btn1 {
-	font-size: 14px;
-	width: 98%;
-	box-sizing: border-box;
-	padding: 8px 25px;
-	border: 1px solid rgba(54, 129, 252, 1);
-	border-radius: 5px;
-	background-color: rgba(54, 129, 252, 1);
-	display: flex;
-	color: #fff;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
+  font-size: 14px;
+  width: 98%;
+  box-sizing: border-box;
+  padding: 8px 25px;
+  border: 1px solid rgba(54, 129, 252, 1);
+  border-radius: 5px;
+  background-color: rgba(54, 129, 252, 1);
+  display: flex;
+  color: #fff;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 .addTemplateDialog >>> .el-dialog {
-	min-width: 1200px;
+  min-width: 1200px;
 
-	height: 700px;
-	box-shadow: 0px 0 8px 0px #555555;
-	border-radius: 8px;
-	background-color: #fff;
-	/* top: 0px; */
-	/* margin: 0 auto; */
-	overflow: hidden;
+  height: 700px;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 8px;
+  background-color: #fff;
+  /* top: 0px; */
+  /* margin: 0 auto; */
+  overflow: hidden;
 }
 .addTemplateDialog >>> .el-dialog__body {
-	height: 100%;
-	min-width: 1200px;
-	flex-shrink: 0;
-	box-sizing: border-box;
-	padding-bottom: 50px;
-	padding-top: 10px;
+  height: 100%;
+  min-width: 1200px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding-bottom: 50px;
+  padding-top: 10px;
 }
 .addTemplateDialog >>> .el-dialog__header {
-	display: none;
+  display: none;
 }
 .itemTit {
-	width: 136px;
-	height: 32px;
-	padding: 5px 8px 5px 8px;
-	gap: 8px;
-	opacity: 0px;
-	margin: 20px 0;
-	margin-bottom: 10px;
-	border-bottom: 1px #ccc solid;
+  width: 136px;
+  height: 32px;
+  padding: 5px 8px 5px 8px;
+  gap: 8px;
+  opacity: 0px;
+  margin: 20px 0;
+  margin-bottom: 10px;
+  border-bottom: 1px #ccc solid;
 }
 
-.a-d-b-subject{
-	margin: 20px 0 20px 0;
+.a-d-b-subject {
+  margin: 20px 0 20px 0;
 }
 
-.a_d_b_s_btn{
-	padding: 5px 10px;
-	border-radius: 4px;
-	border: solid 1px #3681FC;
-	color: #3681FC;
-	background-color: white;
-	margin-right: 10px;
-	cursor: pointer;
-	transition: .3s;
+.a_d_b_s_btn {
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: solid 1px #3681fc;
+  color: #3681fc;
+  background-color: white;
+  margin-right: 10px;
+  cursor: pointer;
+  transition: 0.3s;
 }
 
-.a_d_b_s_ActiveBtn{
-	background-color: #3681FC;
-	color: white;
+.a_d_b_s_ActiveBtn {
+  background-color: #3681fc;
+  color: white;
 }
 
 .a-d-b-i-t-btn:hover {
-	background-color: rgba(54, 129, 252, 1);
-	color: #fff;
+  background-color: rgba(54, 129, 252, 1);
+  color: #fff;
 }
-</style>
+</style>

src/components/pages/classroomObservation/components/analysis.vue

@@ -1,297 +1,313 @@
 <template>
-	<div class="analysis">
-		<div class="a-header">
-			<div class="a-h-left" @click.stop="changeShowItem(!showItem)">
-				<span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
-				<span class="a-h-l-title">{{ title }}</span>
-			</div>
-			<div class="a-h-right">
-				<div class="a-h-r-btn" @click.stop="addTemplate">
-					<img src="@/assets/icon/classroomObservation/newcon.svg" alt="" />
-					添加模块
-				</div>
-			</div>
-		</div>
-		<div class="a-main" v-show="showItem">
-			<template v-for="(item, index) in analysisItemList">
-				<analysisItem
-				ref="analysisItemRef"
-				v-if="(converter(item.jsonData.name)!=converter('词频词汇分析')) && ![converter('S-T分析：课堂时间分配'),converter('S-T分析：师生互动分析'),converter('S-T分析：教学模式分析')].includes(converter(item.jsonData.name)) "
-				:dialogTagDataList="dialogTagDataList"
-				:bmData="bmData"
-				:key="item.id"
-				:data="item"
-				:tid="tid"
-				:fileId="fileId"
-				:index="index"
-				:showBrief="showBrief"
-				@delItem="delItem"
-				@editItem="editItem"
-				@saveItem="saveItem"
-			/>
-			<analysisSpecialItem
-				v-if="[converter('S-T分析：课堂时间分配'),converter('S-T分析：师生互动分析'),converter('S-T分析：教学模式分析')].includes(converter(item.jsonData.name))"
-				:dialogTagDataList="dialogTagDataList"
-				ref="analysisItemRef"
-				:bmData="bmData"
-				:key="item.id"
-				:data="item"
-				:tid="tid"
-				:fileId="fileId"
-				:index="index"
-				:showBrief="showBrief"
-				@delItem="delItem"
-				@editItem="editItem"
-				@saveItem="saveItem"
-			/>
-			</template>
-			<div class="a_m_empty" v-if="analysisItemList.length == 0">
-				暂无模块...
-			</div>
-		</div>
-	</div>
+  <div class="analysis">
+    <div class="a-header">
+      <div class="a-h-left" @click.stop="changeShowItem(!showItem)">
+        <span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
+        <span class="a-h-l-title">{{ title }}</span>
+      </div>
+      <div class="a-h-right">
+        <div class="a-h-r-btn" @click.stop="addTemplate">
+          <img src="@/assets/icon/classroomObservation/newcon.svg" alt="" />
+          添加模块
+        </div>
+      </div>
+    </div>
+    <div class="a-main" v-show="showItem">
+      <template v-for="(item, index) in analysisItemList">
+        <analysisItem
+          ref="analysisItemRef"
+          v-if="
+            converter(item.jsonData.name) != converter('词频词汇分析') &&
+              ![
+                converter('S-T分析：课堂时间分配'),
+                converter('S-T分析：师生互动分析'),
+                converter('S-T分析：教学模式分析')
+              ].includes(converter(item.jsonData.name))
+          "
+          :dialogTagDataList="dialogTagDataList"
+          :bmData="bmData"
+          :key="item.id + item.Type"
+          :data="item"
+          :tid="tid"
+          :fileId="fileId"
+          :index="index"
+          :showBrief="showBrief"
+          @delItem="delItem"
+          @editItem="editItem"
+          @saveItem="saveItem"
+        />
+        <analysisSpecialItem
+          v-if="
+            [
+              converter('S-T分析：课堂时间分配'),
+              converter('S-T分析：师生互动分析'),
+              converter('S-T分析：教学模式分析')
+            ].includes(converter(item.jsonData.name))
+          "
+          :dialogTagDataList="dialogTagDataList"
+          ref="analysisItemRef"
+          :bmData="bmData"
+          :key="item.id + item.Type"
+          :data="item"
+          :tid="tid"
+          :fileId="fileId"
+          :index="index"
+          :showBrief="showBrief"
+          @delItem="delItem"
+          @editItem="editItem"
+          @saveItem="saveItem"
+        />
+      </template>
+      <div class="a_m_empty" v-if="analysisItemList.length == 0">
+        暂无模块...
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import analysisItem from "./analysisItem";
-import analysisSpecialItem from './analysisSpecialItem'
+import analysisSpecialItem from "./analysisSpecialItem";
 var OpenCC = require("opencc-js");
 let converter2 = OpenCC.Converter({
-		from:'hk',
-		to:'cn'
-})
+  from: "hk",
+  to: "cn"
+});
 export default {
-	emits: ["delItem", "editItem","saveItem"],
-	props: {
-		bmData:{
-			type:Object,
-			default:()=>{
-				return {}
-			}
-		},
-		title: {
-			type: String,
-			default: "分析",
-		},
-		showBrief:{
-			type:Boolean,
-			default:true
-		},
-		dialogTagDataList:{
-			type:Array,
-			default:()=>{
-				return [];
-			}
-		},
-		analysisItemList: {
-			type: Array,
-			default: () => {
-				return [];
-			},
-		},
-		type: {
-			type: Number,
-			default: 0,
-		},
-		tid: {
-			type: String,
-			require: true,
-		},
-		fileId: {
-			type: String,
-			require: true,
-		},
-	},
-	components: {
-		analysisItem,
-		analysisSpecialItem
-	},
-	computed: {
-		converter() {
-			return function (word) {
-				return converter2(word);
-			};
-		},
-	},
-	data() {
-		return {
-			showDialog: false,
-			showItem: true,
-		};
-	},
-	methods: {
-		addTemplate() {
-			if(!this.tid)return this.$message.error("请新建课堂，或选择历史课堂")
-			this.$emit("updateMessage", this.type);
-		},
-		changeShowItem(newValue) {
-			this.showItem = newValue;
-		},
-		delItem(id) {
-			this.$emit("delItem", id);
-		},
-		editItem(id, _data) {
-			this.$emit("editItem", id, _data);
-		},
-		saveItem(id,_data){
-			this.$emit("saveItem",id,_data)
-		},
-		getReport(id) {
-			if (!id) {
-				this.$refs.analysisItemRef.forEach((i) => {
-					i.editBtn(false);
-				});
-			} else {
-				this.$nextTick(()=>{
-					this.$refs.analysisItemRef[this.analysisItemList.findIndex((i) => i.id == id)].editBtn(false);
-				})
-				
-			}
-		},
-	},
+  emits: ["delItem", "editItem", "saveItem"],
+  props: {
+    bmData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    title: {
+      type: String,
+      default: "分析"
+    },
+    showBrief: {
+      type: Boolean,
+      default: true
+    },
+    dialogTagDataList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    analysisItemList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    type: {
+      type: Number,
+      default: 0
+    },
+    tid: {
+      type: String,
+      require: true
+    },
+    fileId: {
+      type: String,
+      require: true
+    }
+  },
+  components: {
+    analysisItem,
+    analysisSpecialItem
+  },
+  computed: {
+    converter() {
+      return function(word) {
+        return converter2(word);
+      };
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+      showItem: true
+    };
+  },
+  methods: {
+    addTemplate() {
+      if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
+      this.$emit("updateMessage", this.type);
+    },
+    changeShowItem(newValue) {
+      this.showItem = newValue;
+    },
+    delItem(id) {
+      this.$emit("delItem", id);
+    },
+    editItem(id, _data) {
+      this.$emit("editItem", id, _data);
+    },
+    saveItem(id, _data) {
+      this.$emit("saveItem", id, _data);
+    },
+    getReport(id) {
+      if (!id) {
+        this.$nextTick(() => {
+          this.$refs.analysisItemRef.forEach(i => {
+            i.editBtn(false);
+          });
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.analysisItemRef[
+            this.analysisItemList.findIndex(i => i.id == id)
+          ].editBtn(false);
+        });
+      }
+    }
+  }
 };
 </script>
 
 <style scoped>
 .itemTit {
-	width: 136px;
-	height: 32px;
-	padding: 5px 8px 5px 8px;
-	gap: 8px;
-	opacity: 0px;
-	margin: 20px 0;
-	margin-bottom: 10px;
-	border-bottom: 1px #ccc solid;
+  width: 136px;
+  height: 32px;
+  padding: 5px 8px 5px 8px;
+  gap: 8px;
+  opacity: 0px;
+  margin: 20px 0;
+  margin-bottom: 10px;
+  border-bottom: 1px #ccc solid;
 }
 .analysis {
-	width: 100%;
-	height: auto;
+  width: 100%;
+  height: auto;
 }
 
 .a-header {
-	width: 100%;
-	height: 50px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-sizing: border-box;
-	padding-right: 10px;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-right: 10px;
 }
 
 .a-h-left {
-	display: flex;
-	align-items: center;
-	cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 }
 
 .a-h-l-icon {
-	width: 16px;
-	height: 16px;
-	background: url("../../../../assets/icon/classroomObservation/right.svg")
-		no-repeat;
-	background-size: 100% 100%;
-	margin-right: 5px;
-	transition: 0.3s;
+  width: 16px;
+  height: 16px;
+  background: url("../../../../assets/icon/classroomObservation/right.svg")
+    no-repeat;
+  background-size: 100% 100%;
+  margin-right: 5px;
+  transition: 0.3s;
 }
 
 .a-h-l-showIcon {
-	transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 .a-h-l-title {
-	font-size: 18px;
+  font-size: 18px;
 }
 
 .a-h-r-btn {
-	font-size: 16px;
-	height: 35px;
-	width: auto;
-	box-sizing: border-box;
-	/* padding: 0 20px; */
-	/* border: solid 1px #C5C5C5; */
-	/* border-radius: 18px; */
-	cursor: pointer;
-	/* background-color: white; */
-	display: flex;
-	color: rgba(54, 129, 252, 1);
-	justify-content: center;
-	align-items: center;
+  font-size: 16px;
+  height: 35px;
+  width: auto;
+  box-sizing: border-box;
+  /* padding: 0 20px; */
+  /* border: solid 1px #C5C5C5; */
+  /* border-radius: 18px; */
+  cursor: pointer;
+  /* background-color: white; */
+  display: flex;
+  color: rgba(54, 129, 252, 1);
+  justify-content: center;
+  align-items: center;
 }
 
 .a-h-r-btn > img {
-	width: 16px;
-	height: 16px;
-	margin-right: 5px;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
 }
 
 .a-main {
-	width: calc(100%);
-	height: auto;
+  width: calc(100%);
+  height: auto;
 }
 
 .a-dialog {
-	position: fixed;
-	width: 1200px;
-	height: 500px;
-	min-height: 600px;
-	box-shadow: 0px 0 8px 0px #555555;
-	border-radius: 8px;
-	z-index: 999;
-	background-color: #fff;
-	left: 0;
-	right: 0;
-	top: 100px;
-	margin: 0 auto;
-	/* margin: 0 auto; */
-	/* top: 50%; */
-	/* margin: -18% 0 0 -300px; */
-	overflow: hidden;
+  position: fixed;
+  width: 1200px;
+  height: 500px;
+  min-height: 600px;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 8px;
+  z-index: 999;
+  background-color: #fff;
+  left: 0;
+  right: 0;
+  top: 100px;
+  margin: 0 auto;
+  /* margin: 0 auto; */
+  /* top: 50%; */
+  /* margin: -18% 0 0 -300px; */
+  overflow: hidden;
 }
 
 .a-d-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;
-	border-bottom: 1px #ccc solid;
+  /* 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;
+  border-bottom: 1px #ccc solid;
 }
 .a-d-top >>> .el-input__inner {
-	width: 320px;
-	height: 32px;
+  width: 320px;
+  height: 32px;
 }
 .a-d-top >>> .el-input__icon {
-	line-height: 32px;
+  line-height: 32px;
 }
 .a-d-topTit {
-	width: 171px;
-	height: 32px;
-	display: flex;
-	align-items: center;
-	font-family: PingFang SC;
-	box-sizing: border-box;
-	padding: 5px;
-	line-height: 22px;
-	justify-content: center;
-	/* text-align: left; */
+  width: 171px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  font-family: PingFang SC;
+  box-sizing: border-box;
+  padding: 5px;
+  line-height: 22px;
+  justify-content: center;
+  /* text-align: left; */
 }
 .a-d-t-left {
-	width: 200px;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	justify-content: flex-start;
-	box-sizing: border-box;
-	padding-left: 5px;
+  width: 200px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-left: 5px;
 }
 
 .a-d-t-l-item {
-	/* width: auto;
+  /* width: auto;
 	height: 90%;
 	display: flex;
 	justify-content: center;
@@ -301,95 +317,95 @@ export default {
 	background-color: #d4d9da;
 	margin-right: 3px;
 	cursor: pointer; */
-	cursor: pointer;
-	width: 136px;
-	height: 32px;
-	display: flex;
-	align-items: center;
-	border-radius: 5px;
-	font-family: PingFang SC;
-	box-sizing: border-box;
-	padding: 5px;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 22px;
-	text-align: left;
-	margin-bottom: 20px;
+  cursor: pointer;
+  width: 136px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  font-family: PingFang SC;
+  box-sizing: border-box;
+  padding: 5px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: left;
+  margin-bottom: 20px;
 }
 
 .a-d-t-l-item:hover {
-	background-color: white;
+  background-color: white;
 }
 
 .a-d-t-right {
-	width: 40px;
-	height: 40px;
-	margin-right: 10px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	color: black !important;
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black !important;
 }
 
 .a-d-t-right > span {
-	width: 25px;
-	height: 25px;
-	border-radius: 25px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	/* align-items: center; */
-	font-size: 22px;
-	color: #fff;
-	/* background-color: #adadad; */
-	cursor: pointer;
-	/* background-color: #e6e6e6; */
-	color: #adadad;
+  width: 25px;
+  height: 25px;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* align-items: center; */
+  font-size: 22px;
+  color: #fff;
+  /* background-color: #adadad; */
+  cursor: pointer;
+  /* background-color: #e6e6e6; */
+  color: #adadad;
 }
 
 .a-d-box {
-	width: 100%;
-	height: 100%;
-	/* height: calc(100% - 40px); */
-	background-color: #f0f2f5;
-	overflow: auto;
+  width: 100%;
+  height: 100%;
+  /* height: calc(100% - 40px); */
+  background-color: #f0f2f5;
+  overflow: auto;
 
-	box-sizing: border-box;
-	padding: 15px;
-	padding-bottom: 50px;
+  box-sizing: border-box;
+  padding: 15px;
+  padding-bottom: 50px;
 }
 
 .a-d-b-item {
-	width: 22%;
-	height: 200px;
-	display: flex;
-	flex-direction: column;
-	background-color: #fff;
-	border-radius: 10px;
-	padding: 15px;
-	float: left;
-	box-sizing: border-box;
-	margin-bottom: 10px;
-	/* position: relative; */
+  width: 22%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px;
+  float: left;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  /* position: relative; */
 }
 .a-d-b-item:hover .a-d-b-i-bottomBtn {
-	display: block !important;
+  display: block !important;
 }
 .a-d-b-item:hover .a-d-b-i-bottomPer {
-	display: none !important;
+  display: none !important;
 }
 .a-d-b-i-top {
-	width: 100%;
-	/* height: 50%; */
-	height: 20px;
-	margin-bottom: 15px;
-	display: flex;
-	align-items: center;
-	/* justify-content: space-between; */
+  width: 100%;
+  /* height: 50%; */
+  height: 20px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  /* justify-content: space-between; */
 }
 .a-d-b-i-top > img {
-	width: 35px;
-	height: 35px;
+  width: 35px;
+  height: 35px;
 }
 /* .a-d-b-i-top>div{ */
 /* width: auto;
@@ -401,75 +417,75 @@ export default {
 /* } */
 
 .a-d-b-i-t-title {
-	width: 100%;
-	height: 35px;
-	display: block;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0 10px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	word-break: break-all;
-	white-space: nowrap;
-	line-height: 35px;
-	/* display: -webkit-box;
+  width: 100%;
+  height: 35px;
+  display: block;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: nowrap;
+  line-height: 35px;
+  /* display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 1;
 	overflow: hidden; */
 }
 
 .a-d-b-i-bottom {
-	width: 100%;
-	flex: 1;
-	overflow: hidden;
-	/* max-height: 186px; */
-	font-size: 14px;
-	-webkit-line-clamp: 5;
-	line-height: 20px;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  /* max-height: 186px; */
+  font-size: 14px;
+  -webkit-line-clamp: 5;
+  line-height: 20px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .a-d-b-i-t-btn {
-	font-size: 14px;
-	/* height: 30px; */
-	/* position: relative; */
-	/* top: 5px; */
-	box-sizing: border-box;
-	padding: 8px 25px;
-	/* background-color: #f3f3f3; */
-	border: 1px solid rgba(54, 129, 252, 1);
-	border-radius: 5px;
-	color: rgba(54, 129, 252, 1);
+  font-size: 14px;
+  /* height: 30px; */
+  /* position: relative; */
+  /* top: 5px; */
+  box-sizing: border-box;
+  padding: 8px 25px;
+  /* background-color: #f3f3f3; */
+  border: 1px solid rgba(54, 129, 252, 1);
+  border-radius: 5px;
+  color: rgba(54, 129, 252, 1);
 
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	/* position: absolute; */
-	/* right: 10px; */
-	/* top: 10px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  /* position: absolute; */
+  /* right: 10px; */
+  /* top: 10px; */
 }
 .a-d-b-i-t-btn1 {
-	font-size: 14px;
-	box-sizing: border-box;
-	padding: 8px 25px;
-	border: 1px solid rgba(54, 129, 252, 1);
-	border-radius: 5px;
-	background-color: rgba(54, 129, 252, 1);
-	display: flex;
-	color: #fff;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 8px 25px;
+  border: 1px solid rgba(54, 129, 252, 1);
+  border-radius: 5px;
+  background-color: rgba(54, 129, 252, 1);
+  display: flex;
+  color: #fff;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 .a_m_empty {
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	font-size: 14px;
-	color: #555555;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  font-size: 14px;
+  color: #555555;
 }
 </style>

src/components/pages/classroomObservation/components/analysisItem.vue

@@ -230,19 +230,25 @@ export default {
 				this.loading = true;
 				this.openItem = false;
 				this.loadNum = 1;
+				let type = 0;//0 用agentId  1:用提示词 3:啥都没有
 				let assistant = this.dialogTagDataList.find(
-					(i) => i.title == this.data.jsonData.name
+					(i) => i.name == this.data.jsonData.name
 				);
 
 				let _msg = `使用文件检索的方式完整的去分析文件内容，并请完全按照要求输出。`
 
-				if (!assistant.value) {
+				if (assistant.agentid) {
+					type = 0
+				}else if(assistant.tips){
+					type = 1
+				}else{
 					this.loading = false;
 					this.loadNum = 2;
+					type = 3;
 					return this.$message.error("未找到对应的AI助手");
 				}
 
-				if(assistant.value=='6b4a9650-48be-11ef-936b-12e77c4cb76b'){
+				if(assistant.agentid=='6b4a9650-48be-11ef-936b-12e77c4cb76b'){
 					_msg  = `使用文件检索的方式完整的去分析文件内容，并基于以下的课堂基本内容，使用cpote课程设计模型改编一堂同主题的课程。
 课堂名称：${this.bmData.courseName}  搜课年级：${this.bmData.grade}  授课科目：${this.bmData.subject}`
 					
@@ -251,8 +257,8 @@ export default {
 				// console.log('👇')
 				// return console.log(_msg)
 				let parm = {
-					assistant_id: assistant?assistant.value:null,
-					message:_msg,
+					assistant_id: type==0?assistant.agentid:"f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b",
+					message:type==0?_msg:assistant.tips,
 					session_name: uuidv4(),
 					userId: this.userId,
 					file_ids: this.fileId?[this.fileId]:'',

src/components/pages/classroomObservation/components/analysisTemplateDialog.vue

@@ -719,12 +719,14 @@ export default {
 			this.$refs.addNewAnalysisDialogRef.open(type);
 		},
 		//添加某条
-		addNewAnalysisItem(title) {
-			let _data = this.dataList.find((i) => i.title == title);
+		addNewAnalysisItem(name) {
+			let _data = this.dataList.find((i) => i.name == name);
+			console.log(_data)
 			this.analysisDetail.tips.push({
 				id: "",
 				jsonData: {
-					name: _data.title,
+					name: _data.name,
+					anotherName:_data.name,
 					result: _data.brief,
 					fileList: [],
 					dataFileList: [],
@@ -733,7 +735,7 @@ export default {
 					fileList2: [],
 					content: "",
 				},
-				Type: _data.type,
+				Type: parseInt(_data.type),
 				tIndex: this.analysisDetail.tips.filter((i) => i.Type == _data.type)
 					.length,
 				tId: "",
@@ -777,7 +779,7 @@ export default {
 				tid:_data.id
 			}]
 			this.ajax.post(this.$store.state.api+"updateClassroomDefault",params).then(res=>{
-				console.log("👇设置默认模板")
+				// console.log("👇设置默认模板")
 				if(res.data ==1){
 					this.$message.success('设置默认模板成功');
 				}else{

src/components/pages/classroomObservation/components/baseMessage.vue

@@ -558,8 +558,6 @@ export default {
 					uid: "qgt",
 					url: data.Location,
 			})
-			console.log("👇")
-			console.log(data)
 			this.$message.success("上传成功")
 		},
 		videoProgressUpdate(data){

src/components/pages/classroomObservation/components/messageArea.vue

@@ -48,7 +48,7 @@
 				:bmData="bmData.jsonData"
 				title="通用课堂分析"
 				:dialogTagDataList="dialogTagDataList"
-				:analysisItemList="dataList.filter((i) => i.Type === 0)"
+				:analysisItemList="dataList.filter((i) => i.Type === 0 && i.tIndex!=2)"
 				:type="0"
 				:tid="tid"
 				:fileId="fileId"
@@ -131,13 +131,12 @@
 			/> -->
 			<!-- <div style="height: 10000px;"></div> -->
 		</div>
-		<el-dialog
+		<!-- <el-dialog
 			:center="true"
 			:visible.sync="dialogVisible"
 			width="1200px"
 			class="addTemplateDialog"
 		>
-			<!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
 			<div class="a-d-top">
 				<div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
 				<div>
@@ -155,7 +154,6 @@
 			</div>
 			<div style="display: flex; height: 100%">
 				<div class="a-d-t-left">
-					<!-- <div class="itemTit">我的模块</div> -->
 					<div
 						:style="
 							tagIndex == index
@@ -195,7 +193,6 @@
 							@click.stop="tagSubject = item"
 							>{{ item }}</span
 						>
-						<!-- <el-button :type="tagSubject==item?'primary':'default'" v-for="(item,index) in tagSubjectList" :key="index+'-'+tagIndex" @click.stop="tagSubject=item">{{ item }}</el-button> -->
 					</div>
 					<div style="display: flex; flex-wrap: wrap">
 						<div
@@ -210,11 +207,11 @@
 										require('../../../../assets/icon/classroomObservation/digImg.svg')
 									"
 								/>
-								<div class="a-d-b-i-t-title">{{ item.title }}</div>
+								<div class="a-d-b-i-t-title">{{ item.name }}</div>
 							</div>
-							<div class="a-d-b-i-bottom">{{ item.brief }}</div>
+							<div class="a-d-b-i-bottom">{{ item.detail }}</div>
 							<div class="a-d-b-i-bottomPer" style="display: block">
-								{{ item.sum }}人已使用
+								{{ item.count }}人已使用
 							</div>
 							<div class="a-d-b-i-bottomBtn" style="display: none">
 								<div
@@ -224,10 +221,9 @@
 										justify-content: space-around;
 									"
 								>
-									<!-- <div class="a-d-b-i-t-btn">详情</div> -->
 									<div
 										class="a-d-b-i-t-btn1"
-										@click="addAnalysisItem(item.title)"
+										@click="addAnalysisItem(item.name)"
 									>
 										添加
 									</div>
@@ -237,8 +233,9 @@
 					</div>
 				</div>
 			</div>
-			<!-- </div> -->
-		</el-dialog>
+		</el-dialog> -->
+		<!-- 添加模块 -->
+		 <addNewAnalysisDialog @update="getDialogTagDataList" :canAddNew="true"	:dialogTagDataList="dialogTagDataList" ref="addNewAnalysisDialogRef" @success="addAnalysisItem"/>
 		<!-- 绑定 表单 -->
 		<bindingFormDialog
 			ref="bindingFormDialogRef"
@@ -251,6 +248,7 @@
 		<analysisTemplateDialog
 			ref="analysisTemplateDialogRef"
 			@useTemplate="useTemplate"
+			
 			:dataList="dialogTagDataList"
 		/>
 	</div>
@@ -264,6 +262,7 @@ import baseMessage from "./baseMessage.vue"; //基本信息
 import analysis from "./analysis.vue";
 import bindingFormDialog from "./bindingFormDialog.vue";
 import saveTemplateDialog from "./saveTemplateDialog.vue";
+import addNewAnalysisDialog from "./addNewAnalysisDialog.vue";
 // 分析模板
 import analysisTemplateDialog from "./analysisTemplateDialog.vue";
 
@@ -283,6 +282,7 @@ export default {
 		bindingFormDialog,
 		saveTemplateDialog,
 		analysisTemplateDialog,
+		addNewAnalysisDialog,
 	},
 	props: {
 		tid: {
@@ -297,9 +297,9 @@ export default {
 	data() {
 		return {
 			showBrief: true, //是否显示模块简介
-			dialogVisible: false,
-			tagIndex: 0,
-			tagSubject: "",
+			// dialogVisible: false,
+			// tagIndex: 0,
+			// tagSubject: "",
 			loading: false,
 			baseMessageLoading: false,
 			currencyLoading: false,
@@ -307,8 +307,7 @@ export default {
 			extendLoading: false,
 			valueAddedLoading: false,
 			userId: this.$route.query["userid"],
-			input2: "",
-			userId: this.$route.query["userid"],
+			// input2: "",
 			dialogTagList: [
 				{ id: 0, name: "通用课堂分析" },
 				{ id: 1, name: "学科课堂分析" },
@@ -316,217 +315,217 @@ export default {
 				//{ id: 3, name: "增值性分析" },
 			],
 			dialogTagDataList: [
-				{
-					title: "OMO智慧课堂分析",
-					brief: "多维度分析课堂整体情况",
-					value: "4cc367c1-0076-11ef-aaca-12e77c4cb76b",
-					type: 0,
-					sum: 157,
-				},
-				{
-					title: "教学阶段九事件分析",
-					brief: "使用加涅九事件分析教学环节",
-					value: "5e0466b3-0075-11ef-aaca-12e77c4cb76b",
-					type: 0,
-					sum: 540,
-				},
-				{
-					title: "布鲁姆问题分类",
-					brief: "不同认知层次问题分布情况",
-					value: "eac63117-00a7-11ef-aaca-12e77c4cb76b",
-					type: 0,
-					sum: 405,
-				},
-				{
-					title: "麦卡锡问题分类",
-					brief: "不同类型问题分布情况",
-					value: "18545cf7-0125-11ef-aaca-12e77c4cb76b",
-					type: 0,
-					sum: 360,
-				},
-				{
-					title: "学生回答情况",
-					brief: "学生回答情况分析",
-					value: "2c6ede88-0125-11ef-aaca-12e77c4cb76b",
-					type: 0,
-					sum: 206,
-				},
-				{
-					title: "S-T分析：课堂时间分配",
-					brief: "多维度分析课堂整体情况",
-					value: "st1",
-					type: 0,
-					sum: 451,
-				},
-				{
-					title: "S-T分析：师生互动分析",
-					brief: "多维度分析课堂整体情况",
-					value: "st2",
-					type: 0,
-					sum: 342,
-				},
-				{
-					title: "S-T分析：教学模式分析",
-					brief: "多维度分析课堂整体情况",
-					value: "st3",
-					type: 0,
-					sum: 143,
-				},
-				{
-					title: "课堂活动类型",
-					brief: "识别特定的课堂活动类型",
-					value: "41d2d2d4-0125-11ef-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 430,
-				},
-				{
-					title: "学科核心素养发展",
-					brief: "分析与学科核心素养的匹配情况",
-					value: "a6c0b92b-06de-11ef-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 234,
-				},
-				{
-					title: "科学教育目标分析",
-					brief: "分析四类科学教育目标的情况",
-					value: "d6cd48ab-0125-11ef-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 513,
-				},
-				{
-					title: "PORTAAL课堂观察",
-					brief: "使用PORTAAL框架分析科学课堂",
-					value: "8ab07d41-e143-11ee-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 173,
-				},
-				{
-					title: "UTOP课堂观察",
-					brief: "使用UTOP框架分析科学课堂",
-					value: "8e3a389b-014f-11ef-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 329,
-				},
-				{
-					title: "L-PST模型",
-					brief: "使用L-PST框架分析科学课堂",
-					value: "e649112e-0150-11ef-aaca-12e77c4cb76b", //e649112e-0150-11ef-aaca-12e77c4cb76b  7daa4c3f-016f-11ef-aaca-12e77c4cb76b
-					subject: "科学",
-					type: 1,
-					sum: 421,
-				},
 				// {
-				// 	title: "RST模型",
+				// 	title: "OMO智慧课堂分析",
+				// 	brief: "多维度分析课堂整体情况",
+				// 	value: "4cc367c1-0076-11ef-aaca-12e77c4cb76b",
+				// 	type: 0,
+				// 	sum: 157,
+				// },
+				// {
+				// 	title: "教学阶段九事件分析",
+				// 	brief: "使用加涅九事件分析教学环节",
+				// 	value: "5e0466b3-0075-11ef-aaca-12e77c4cb76b",
+				// 	type: 0,
+				// 	sum: 540,
+				// },
+				// {
+				// 	title: "布鲁姆问题分类",
+				// 	brief: "不同认知层次问题分布情况",
+				// 	value: "eac63117-00a7-11ef-aaca-12e77c4cb76b",
+				// 	type: 0,
+				// 	sum: 405,
+				// },
+				// {
+				// 	title: "麦卡锡问题分类",
+				// 	brief: "不同类型问题分布情况",
+				// 	value: "18545cf7-0125-11ef-aaca-12e77c4cb76b",
+				// 	type: 0,
+				// 	sum: 360,
+				// },
+				// {
+				// 	title: "学生回答情况",
+				// 	brief: "学生回答情况分析",
+				// 	value: "2c6ede88-0125-11ef-aaca-12e77c4cb76b",
+				// 	type: 0,
+				// 	sum: 206,
+				// },
+				// {
+				// 	title: "S-T分析：课堂时间分配",
+				// 	brief: "多维度分析课堂整体情况",
+				// 	value: "st1",
+				// 	type: 0,
+				// 	sum: 451,
+				// },
+				// {
+				// 	title: "S-T分析：师生互动分析",
 				// 	brief: "多维度分析课堂整体情况",
-				// 	value: "e649112e-0150-11ef-aaca-12e77c4cb76b",
+				// 	value: "st2",
+				// 	type: 0,
+				// 	sum: 342,
+				// },
+				// {
+				// 	title: "S-T分析：教学模式分析",
+				// 	brief: "多维度分析课堂整体情况",
+				// 	value: "st3",
+				// 	type: 0,
+				// 	sum: 143,
+				// },
+				// {
+				// 	title: "课堂活动类型",
+				// 	brief: "识别特定的课堂活动类型",
+				// 	value: "41d2d2d4-0125-11ef-aaca-12e77c4cb76b",
+				// 	subject: "科学",
 				// 	type: 1,
+				// 	sum: 430,
+				// },
+				// {
+				// 	title: "学科核心素养发展",
+				// 	brief: "分析与学科核心素养的匹配情况",
+				// 	value: "a6c0b92b-06de-11ef-aaca-12e77c4cb76b",
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 234,
+				// },
+				// {
+				// 	title: "科学教育目标分析",
+				// 	brief: "分析四类科学教育目标的情况",
+				// 	value: "d6cd48ab-0125-11ef-aaca-12e77c4cb76b",
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 513,
+				// },
+				// {
+				// 	title: "PORTAAL课堂观察",
+				// 	brief: "使用PORTAAL框架分析科学课堂",
+				// 	value: "8ab07d41-e143-11ee-aaca-12e77c4cb76b",
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 173,
+				// },
+				// {
+				// 	title: "UTOP课堂观察",
+				// 	brief: "使用UTOP框架分析科学课堂",
+				// 	value: "8e3a389b-014f-11ef-aaca-12e77c4cb76b",
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 329,
+				// },
+				// {
+				// 	title: "L-PST模型",
+				// 	brief: "使用L-PST框架分析科学课堂",
+				// 	value: "e649112e-0150-11ef-aaca-12e77c4cb76b", //e649112e-0150-11ef-aaca-12e77c4cb76b  7daa4c3f-016f-11ef-aaca-12e77c4cb76b
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 421,
+				// },
+				// // {
+				// // 	title: "RST模型",
+				// // 	brief: "多维度分析课堂整体情况",
+				// // 	value: "e649112e-0150-11ef-aaca-12e77c4cb76b",
+				// // 	type: 1,
+				// // },
+				// {
+				// 	title: "RTOP课堂观察",
+				// 	brief: "使用RTOP框架分析科学课堂",
+				// 	value: "68265b18-0151-11ef-aaca-12e77c4cb76b", //a7107221-f7f5-11ee-aaca-12e77c4cb76b   bc254ab9-0142-11ef-aaca-12e77c4cb76b    c912ece9-0148-11ef-aaca-12e77c4cb76b  68265b18-0151-11ef-aaca-12e77c4cb76b  2ace7ff6-0154-11ef-aaca-12e77c4cb76b
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 527,
+				// },
+				// {
+				// 	title: "课程质量评价",
+				// 	brief: "多维度分析课堂整体情况",
+				// 	value: "25e53379-0152-11ef-aaca-12e77c4cb76b",
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 391,
+				// },
+				// {
+				// 	title: "SCOP课堂观察",
+				// 	brief: "使用SCOP框架分析科学课堂",
+				// 	value: "d0c76d35-0152-11ef-aaca-12e77c4cb76b",
+				// 	subject: "科学",
+				// 	type: 1,
+				// 	sum: 407,
+				// },
+				// {
+				// 	title: "KWL教学策略",
+				// 	brief: "分析课前、课中、课后的教学成果",
+				// 	value: "a5d8664b-1748-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 135,
+				// },
+				// {
+				// 	title: "LICC课堂观察",
+				// 	brief: "崔允漷教授团队的观察框架",
+				// 	value: "9e8e6356-1769-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 614,
+				// },
+				// {
+				// 	title: "读思达教学法",
+				// 	brief: "分析课堂阅读、思考、表达的情况",
+				// 	value: "d139ed78-176c-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 346,
+				// },
+				// {
+				// 	title: "教学内容分析",
+				// 	brief: "从教学内容角度观课评教",
+				// 	value: "9e8e6356-1769-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 527,
+				// },
+				// {
+				// 	title: "提问策略分析",
+				// 	brief: "基于提问观察表分析课堂提问",
+				// 	value: "eb815b01-1769-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 389,
+				// },
+				// {
+				// 	title: "教师反馈分析",
+				// 	brief: "分析语文课堂师生言语互动行为",
+				// 	value: "55ae5176-176a-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 319,
+				// },
+				// {
+				// 	title: "师生互动分析",
+				// 	brief: "分析语文课堂四种不同的互动状态",
+				// 	value: "8e4b6b48-176a-11ef-aaca-12e77c4cb76b",
+				// 	subject: "语文",
+				// 	type: 1,
+				// 	sum: 191,
+				// },
+				// {
+				// 	title: "5E课程改编",
+				// 	brief: "基于5E教学模型设计一堂课",
+				// 	value: "f757826e-0125-11ef-aaca-12e77c4cb76b",
+				// 	type: 2,
+				// 	sum: 510,
+				// },
+				// {
+				// 	title: "5EX课程改编",
+				// 	brief: "基于5EX教学模型设计一堂课",
+				// 	value: "0b6b08b7-0126-11ef-aaca-12e77c4cb76b",
+				// 	type: 2,
+				// 	sum: 611,
+				// },
+				// {
+				// 	title: "C-POTE课程改编",
+				// 	brief: "C-POTE课程改编",
+				// 	value: "6b4a9650-48be-11ef-936b-12e77c4cb76b",
+				// 	type: 2,
+				// 	sum: 165,
 				// },
-				{
-					title: "RTOP课堂观察",
-					brief: "使用RTOP框架分析科学课堂",
-					value: "68265b18-0151-11ef-aaca-12e77c4cb76b", //a7107221-f7f5-11ee-aaca-12e77c4cb76b   bc254ab9-0142-11ef-aaca-12e77c4cb76b    c912ece9-0148-11ef-aaca-12e77c4cb76b  68265b18-0151-11ef-aaca-12e77c4cb76b  2ace7ff6-0154-11ef-aaca-12e77c4cb76b
-					subject: "科学",
-					type: 1,
-					sum: 527,
-				},
-				{
-					title: "课程质量评价",
-					brief: "多维度分析课堂整体情况",
-					value: "25e53379-0152-11ef-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 391,
-				},
-				{
-					title: "SCOP课堂观察",
-					brief: "使用SCOP框架分析科学课堂",
-					value: "d0c76d35-0152-11ef-aaca-12e77c4cb76b",
-					subject: "科学",
-					type: 1,
-					sum: 407,
-				},
-				{
-					title: "KWL教学策略",
-					brief: "分析课前、课中、课后的教学成果",
-					value: "a5d8664b-1748-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 135,
-				},
-				{
-					title: "LICC课堂观察",
-					brief: "崔允漷教授团队的观察框架",
-					value: "9e8e6356-1769-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 614,
-				},
-				{
-					title: "读思达教学法",
-					brief: "分析课堂阅读、思考、表达的情况",
-					value: "d139ed78-176c-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 346,
-				},
-				{
-					title: "教学内容分析",
-					brief: "从教学内容角度观课评教",
-					value: "9e8e6356-1769-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 527,
-				},
-				{
-					title: "提问策略分析",
-					brief: "基于提问观察表分析课堂提问",
-					value: "eb815b01-1769-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 389,
-				},
-				{
-					title: "教师反馈分析",
-					brief: "分析语文课堂师生言语互动行为",
-					value: "55ae5176-176a-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 319,
-				},
-				{
-					title: "师生互动分析",
-					brief: "分析语文课堂四种不同的互动状态",
-					value: "8e4b6b48-176a-11ef-aaca-12e77c4cb76b",
-					subject: "语文",
-					type: 1,
-					sum: 191,
-				},
-				{
-					title: "5E课程改编",
-					brief: "基于5E教学模型设计一堂课",
-					value: "f757826e-0125-11ef-aaca-12e77c4cb76b",
-					type: 2,
-					sum: 510,
-				},
-				{
-					title: "5EX课程改编",
-					brief: "基于5EX教学模型设计一堂课",
-					value: "0b6b08b7-0126-11ef-aaca-12e77c4cb76b",
-					type: 2,
-					sum: 611,
-				},
-				{
-					title: "C-POTE课程改编",
-					brief: "C-POTE课程改编",
-					value: "6b4a9650-48be-11ef-936b-12e77c4cb76b",
-					type: 2,
-					sum: 165,
-				},
 			],
 			bmData: {},
 			dataList: [],
@@ -534,35 +533,34 @@ export default {
 		};
 	},
 	computed: {
-		searchDataList() {
-			let _result = this.dialogTagDataList.filter(
-				(i) => i.type == this.tagIndex
-			);
-			if (this.input2) {
-				_result = _result.filter((i) => i.title.indexOf(this.input2) > -1);
-			}
-			if (this.tagSubject) {
-				_result = _result.filter((i) => i.subject == this.tagSubject);
-			}
-
-			return _result;
-		},
-		tagSubjectList() {
-			let _result = [];
-			this.dialogTagDataList
-				.filter((i) => i.type == this.tagIndex)
-				.forEach((i) => {
-					if (i.subject && !_result.includes(i.subject)) {
-						_result.push(i.subject);
-					}
-				});
-			return _result;
-		},
+		// searchDataList() {
+		// 	let _result = this.dialogTagDataList.filter(
+		// 		(i) => i.type == this.tagIndex
+		// 	);
+		// 	if (this.input2) {
+		// 		_result = _result.filter((i) => i.name.indexOf(this.input2) > -1);
+		// 	}
+		// 	if (this.tagSubject) {
+		// 		_result = _result.filter((i) => i.subject == this.tagSubject);
+		// 	}
+		// 	return _result;
+		// },
+		// tagSubjectList() {
+		// 	let _result = [];
+		// 	this.dialogTagDataList
+		// 		.filter((i) => i.type == this.tagIndex)
+		// 		.forEach((i) => {
+		// 			if (i.subject && !_result.includes(i.subject)) {
+		// 				_result.push(i.subject);
+		// 			}
+		// 		});
+		// 	return _result;
+		// },
 	},
 	watch: {
-		tagIndex() {
-			this.tagSubject = "";
-		},
+		// tagIndex() {
+		// 	this.tagSubject = "";
+		// },
 	},
 	methods: {
 		// 绑定表单
@@ -610,8 +608,9 @@ export default {
 			}
 		},
 		updateMessage(val) {
-			this.dialogVisible = true;
-			this.tagIndex = val;
+			this.$refs.addNewAnalysisDialogRef.open(val);
+			// this.dialogVisible = true;
+			// this.tagIndex = val;
 		},
 		handleClose(done) {
 			this.$confirm("确认关闭？")
@@ -655,26 +654,27 @@ export default {
 			this.$refs.saveTemplateDialogRef.open();
 			// this.$message.info("另存为模板");
 		},
-		addAnalysisItem(title) {
+		addAnalysisItem(name,id) {
 			return new Promise((resolve, reject) => {
 				var OpenCC = require("opencc-js");
 				let converter = OpenCC.Converter({
 						from:'hk',
 						to:'cn'
 				})
-				this.dialogVisible = false;
-				let assistant = this.dialogTagDataList.find((i) => i.title == title);
+				this.$refs.addNewAnalysisDialogRef.close();
+				// this.dialogVisible = false;
+				let assistant = this.dialogTagDataList.find((i) => i.name == name);
 
-				let parm = {
-					assistant_id: assistant ? assistant.value : null,
-					message:
-						"请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
-					session_name: new Date().getTime(),
-					userId: this.userId,
-					file_ids: this.fileId,
-				};
+				// let parm = {
+				// 	assistant_id: assistant ? assistant.agentid : null,
+				// 	message:
+				// 		"请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
+				// 	session_name: new Date().getTime(),
+				// 	userId: this.userId,
+				// 	file_ids: this.fileId,
+				// };
 
-				if (!parm.assistant_id) {
+				if (!assistant.agentid && !assistant.tips) {
 					resolve();
 					return this.$message.error("未找到对应的AI助手");
 				}
@@ -693,8 +693,9 @@ export default {
 					index: newIndex,
 					userid: this.userId,
 					json_data: JSON.stringify({
-						name: assistant.title,
-						result: "",
+						name: assistant.name,
+						anotherName:assistant.name,
+						result: assistant.detail,
 						fileList: [],
 						dataFileList: [],
 						content: "",
@@ -772,8 +773,7 @@ export default {
 					// 图片
 					let _imageList = _data.find((i) => i.tIndex == 1);
 					_imageList.jsonData = JSON.parse(_imageList.jsonData);
-					console.log("👇👇")
-					console.log(_imageList)
+
 					if (!_imageList.jsonData.videoList) {
 						_imageList.jsonData.videoList = [];
 					}
@@ -1208,6 +1208,17 @@ export default {
 			if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
 			this.$refs.bindingFormDialogRef.open(_data.jsonData);
 		},
+		getDialogTagDataList(){
+			let params = {
+				uid:this.userId
+			}
+			this.ajax.get(this.$store.state.api+"select_smodel",params).then(res=>{
+				let _result = res.data[0];
+				this.dialogTagDataList = _result;
+			}).catch(e=>{
+				this.$message.error("获取模块分析列表失败")
+			})
+		},
 		init(){
 			console.log("初始化")
 			this.bmData = {};
@@ -1221,6 +1232,9 @@ export default {
 			this.valueAddedLoading= false;
 		},
 	},
+	mounted() {
+		this.getDialogTagDataList();
+	},
 };
 </script>
 

src/components/pages/classroomObservation/components/newAnalysisModule.vue

@@ -0,0 +1,319 @@
+<template>
+  <div>
+    <el-dialog
+      :center="true"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      width="500px"
+      class="bindingFormDialog"
+    >
+      <div class="a-d-top">
+        <div class="a-d-topTit">
+          <div>新建分析模板</div>
+        </div>
+        <div class="a-d-t-right">
+          <span @click.stop="close()">×</span>
+        </div>
+      </div>
+      <div class="bfd_box" v-loading="loading">
+        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
+          <el-form-item label="模板名称" prop="name">
+            <el-input
+              v-model="form.name"
+              placeholder="请输入模板名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="模板简介" prop="detail">
+            <el-input
+              type="textarea"
+              v-model="form.detail"
+              :rows="1"
+              :maxlength="30"
+              resize="none"
+              placeholder="请输入内容，不超过30字"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label="提示词" prop="tips">
+            <el-input
+              type="textarea"
+              v-model="form.tips"
+
+              :rows="6"
+              resize="none"
+              placeholder="请输入提示词"
+            ></el-input>
+          </el-form-item>
+
+					<el-form-item label="所属分类" prop="type">
+						<el-select v-model="form.type" placeholder="请选择所属分类">
+  					  <el-option
+  					    v-for="item in typeLis"
+  					    :key="item.value"
+  					    :label="item.label"
+  					    :value="item.value">
+  					  </el-option>
+  					</el-select>
+  				  <!-- <el-input v-model="form.subject" placeholder="请输入所属学科" style="width: 300px;"></el-input> -->
+  				</el-form-item>
+
+					<el-form-item label="所属学科" prop="subject">
+						<el-select v-model="form.subject" placeholder="请选择所属学科">
+  					  <el-option
+  					    v-for="item in subjectList"
+  					    :key="item.value"
+  					    :label="item.label"
+  					    :value="item.label">
+  					  </el-option>
+  					</el-select>
+  				  <!-- <el-input v-model="form.subject" placeholder="请输入所属学科" style="width: 300px;"></el-input> -->
+  				</el-form-item>
+
+					<el-form-item label="是否公开" prop="open">
+						<el-select v-model="form.open" placeholder="请选择是否公开">
+  					  <el-option
+  					    v-for="item in openList"
+  					    :key="item.value"
+  					    :label="item.label"
+  					    :value="item.value">
+  					  </el-option>
+  					</el-select>
+  				  <!-- <el-input v-model="form.subject" placeholder="请输入所属学科" style="width: 300px;"></el-input> -->
+  				</el-form-item>
+        </el-form>
+      </div>
+      <div class="bfd_bottom" v-loading="loading">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="submitBtn('ruleForm')"
+          >确定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ["success"],
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+
+  },
+  data() {
+    return {
+      loading: false,
+      dialogVisible: false,
+      userId: this.$route.query["userid"],
+      oid: this.$route.query["oid"],
+      org: this.$route.query["org"],
+      subjectList: [
+        { value: "1", label: "语文" },
+        { value: "2", label: "数学" },
+        { value: "3", label: "英语" },
+        { value: "4", label: "科学" },
+        { value: "5", label: "物理" },
+        { value: "6", label: "化学" },
+        { value: "7", label: "生物" },
+        { value: "8", label: "历史" },
+        { value: "9", label: "地理" },
+        { value: "10", label: "政治" },
+				{ value: "11", label: "其它" }
+      ],
+			typeLis:[
+				{value:0,label:"通用课堂分析"},
+				{value:1,label:"学科课堂分析"},
+				{value:2,label:"扩展分析"},
+			],
+			openList:[
+				{value:0,label:"私有"},
+				{value:1,label:"公开本组织"},
+				{value:2,label:"公开所有人"},
+			],
+      form: {
+        name: "",
+        detail: "",
+        tips: "",
+        type: "",
+        subject: "",
+        open: 0
+      },
+      rules: {
+        name: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
+        tips: [
+          { required: true, message: "请输入模块提示词", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "请选择模块所属分类", trigger: "change" }
+        ],
+        subject: [
+          { required: true, message: "请选择模块所属学科", trigger: "change" }
+        ]
+      }
+    };
+  },
+  methods: {
+    open() {
+			this.form = {
+				name: "",
+        detail: "",
+        tips: "",
+        type: "",
+        subject: "",
+        open: 0
+			}
+      this.loading = false;
+      this.dialogVisible = true;
+    },
+    close() {
+      this.dialogVisible = false;
+			this.form = {
+				name: "",
+        detail: "",
+        tips: "",
+        type: "",
+        subject: "",
+        open: 0
+			}
+    },
+    submitBtn(ref) {
+      this.$refs[ref].validate((valid) => {
+          if (valid) {
+						let params = [{
+							nuid:this.userId,
+							nname:this.form.name,
+							ndetail:this.form.detail,
+							nsubject:this.form.subject,
+							ntype:this.form.type,
+							nopen:this.form.open,
+							nagentid:"",
+							ntips:this.form.tips,
+						}]
+						this.loading = true;
+						this.ajax.post(this.$store.state.api+"insert_smodel",params).then(res=>{
+							if(typeof res.data == 'object'){
+								this.$message.warning("该新建的模块名称已存在，请重新输入");
+							}else if(res.data == 1){
+								this.$message.success("新建成功");
+								this.$emit("success")
+								this.close();
+							}else{
+								this.$message.error("新建失败")
+							}
+							this.loading = false;
+						}).catch(e=>{
+							console.log(e)
+							this.loading =false;
+							this.$message.error('新建失败')
+						})
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.bindingFormDialog >>> .el-dialog {
+  min-width: 500px;
+
+  height: 650px;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 8px;
+  background-color: #fff;
+  /* top: 0px; */
+  /* margin: 0 auto; */
+  overflow: hidden;
+}
+.bindingFormDialog >>> .el-dialog__body {
+  height: 100%;
+  min-width: 500px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding-bottom: 50px;
+  padding-top: 10px;
+}
+.bindingFormDialog >>> .el-dialog__header {
+  display: none !important;
+}
+
+.a-d-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;
+  border-bottom: 1px #ccc solid;
+}
+.a-d-top >>> .el-input__inner {
+  width: 320px;
+  height: 32px;
+}
+.a-d-top >>> .el-input__icon {
+  line-height: 32px;
+}
+
+.a-d-topTit {
+  /* width: 171px; */
+  /* margin-left: 20px; */
+  height: 32px;
+  display: flex;
+  align-items: center;
+  font-family: PingFang SC;
+  box-sizing: border-box;
+  padding: 5px;
+  line-height: 22px;
+  justify-content: center;
+  /* text-align: left; */
+}
+
+.a-d-t-right {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black !important;
+}
+
+.a-d-t-right > span {
+  width: 25px;
+  height: 25px;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* align-items: center; */
+  font-size: 22px;
+  color: #fff;
+  /* background-color: #adadad; */
+  cursor: pointer;
+  /* background-color: #e6e6e6; */
+  color: #adadad;
+}
+
+.bfd_box {
+  width: 100%;
+  height: calc(100% - 80px);
+  overflow: hidden;
+	box-sizing: border-box;
+	padding: 30px 20px 30px 0;
+}
+
+.bfd_bottom {
+  width: 100%;
+  height: calc(40px);
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/pages/classroomObservation/index.vue

@@ -65,6 +65,7 @@
 					<div style="color: white">一键分析</div>
 				</div>
 
+
 				<div
 					:class="['co-h2-r-btn', fileId && tid ? '' : 'ca-h2-r-noActive']"
 					style="background: #ffffff"
@@ -97,6 +98,21 @@
 					</el-tooltip>
 				</div>
 
+				<div :class="['co-h2-r-btn2']" @click.stop="derive">
+					<!-- <span class="co-h2-r-b-icon3"></span> -->
+					<el-tooltip
+						class="item"
+						effect="light"
+						content="导出"
+						placement="top"
+					>
+						<img
+							src="../../../assets/icon/classroomObservation/derive.svg"
+							alt=""
+						/>
+					</el-tooltip>
+				</div>
+
 				<div :class="['co-h2-r-btn2']" @click.stop="examine">
 					<!-- <span class="co-h2-r-b-icon3"></span> -->
 					<el-tooltip
@@ -430,6 +446,9 @@ export default {
 				"*"
 			);
 		},
+		derive(){
+			this.$message.info('导出')
+		},
 		// 分享
 		shareBtn() {
 			// if(!this.fileId)return;
@@ -815,6 +834,11 @@ export default {
 	/* box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05); */
 }
 
+.co-h2-r-btn2>img{
+	width: 20px;
+	height: 20px;
+}
+
 .co-h2-r-btn > span:nth-child(1) {
 	width: 20px;
 	height: 20px;

src/components/pages/pocAi/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 "../../../../common/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: 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>

src/components/pages/pocAi/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>

src/components/pages/pocAi/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>

src/components/pages/pocAi/index.vue

@@ -0,0 +1,748 @@
+<template>
+  <div class="pocAi">
+    <div class="pa_documentArea">
+      <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
+        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%;"
+          :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%;display: flex;justify-content: center;align-items: center;"
+          :playsinline="true"
+          :options="showFile.videoOption"
+        ></video-player>
+      </div>
+    </div>
+    <div class="pa_chatArea">
+      <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="chatMessage" v-text="item.content"></div>
+              </div>
+              <div class="uc_right">
+                <el-avatar
+                  class="chatAvatar"
+                  :src="require('../../../assets/icon/pocAi/userAvatar.png')"
+                ></el-avatar>
+              </div>
+            </div>
+            <div class="aiChat">
+              <div class="ac_left">
+                <el-avatar
+                  class="chatAvatar"
+                  :src="require('../../../assets/icon/pocAi/aiAvatar.png')"
+                ></el-avatar>
+              </div>
+              <div class="ac_right">
+                <div
+                  class="chatMessage"
+                  v-loading="item.loading"
+                  v-html="item.aiContent"
+                ></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">
+              <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";
+export default {
+  components: {
+    vpdf,
+    vword,
+    txtView
+  },
+  data() {
+    return {
+      userId: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      showFileIndex: 0,
+      chatValue: "",
+      source: null,
+			loading:false,
+      chatTitle: "第一章 声音的原理",
+      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"
+        },
+        {
+          //xlsx
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724640873576.xlsx",
+          fileId: "file-61KteMZxNwzjJQFRdlwtdpmg"
+        },
+        {
+          //ppt
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641111983.pptx",
+          fileId: ""
+        },
+        {
+          //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"
+        },
+        {
+          //jpg
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
+          fileId: ""
+        },
+        {
+          //mp4
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/c3e87dc3-d5ab-4a1f-a519-63d903a270f8%2F2024-08-09+17-07-50.mp4",
+          fileId: ""
+        },
+        {
+          //txt
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/ktgc31724643097906.txt",
+          fileId: "file-YSVSAsDGvtiWJQ6mWf7ZdupA"
+        }
+      ],
+      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
+      }
+    };
+  },
+  computed: {
+    showFile() {
+      let result = { type: 0, suffix: "", url: "", videoOption: null }; //0:无 1:图片 2:文件 3:视频
+      if (this.fileList[this.showFileIndex]) {
+        result.url = this.fileList[this.showFileIndex].fileUrl;
+        if (
+          this.canonical.Image.test(this.fileList[this.showFileIndex].fileUrl)
+        ) {
+          result.type = 1;
+          result.suffix = this.fileList[this.showFileIndex].fileUrl
+            .split(".")
+            .pop();
+        } else if (
+          this.canonical.File.test(this.fileList[this.showFileIndex].fileUrl)
+        ) {
+          result.type = 2;
+          result.suffix = this.fileList[this.showFileIndex].fileUrl
+            .split(".")
+            .pop();
+        } else if (
+          this.canonical.video.test(this.fileList[this.showFileIndex].fileUrl)
+        ) {
+          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.fileList[this.showFileIndex].fileUrl,
+            // 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.fileList[this.showFileIndex].fileUrl
+            .split(".")
+            .pop();
+        }
+      }
+      return result;
+    }
+  },
+  methods: {
+    chatListScrollBottom() {
+      this.$nextTick(() => {
+        this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight;
+      });
+    },
+    sendChat() {
+      if (this.source) return this.$message.info("还在对话中，请稍等");
+      const _text = this.chatValue;
+      this.chatValue = "";
+      if (!_text.trim()) return;
+      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: this.fileList[this.showFileIndex]?[this.fileList[this.showFileIndex].fileId]:[],
+        model: "gpt-4o-2024-08-06"
+      };
+
+			this.ajax
+        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
+        .then(res => {
+          if (
+            converter(res.data.FunctionResponse.result) == converter("发送成功")
+          ) {
+          } else {
+            console.log(res.data.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` //这是对话记录位置
+      };
+      this.ajax
+        .post("https://gpt4.cocorobo.cn/insert_chat", 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`
+        };
+        this.ajax
+          .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
+          .then(res => {
+            let _data = JSON.parse(res.data.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();
+          });
+      });
+    },
+  },
+  mounted() {
+    this.getChatList();
+  }
+};
+</script>
+
+<style scoped>
+.pocAi {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  background-color: #fff;
+}
+
+.pa_documentArea {
+  width: 35%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.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;
+}
+
+.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 {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.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% - 50px);
+	
+}
+
+.pa_ca_c_list {
+  width: 100%;
+  height: calc(100% - 100px);
+  overflow: auto;
+	padding-bottom: 50px;
+	box-sizing: border-box;
+  /* background-color: red; */
+}
+
+.pa_ca_c_bottom {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.pa_ca_c_b_inputArea {
+  width: 95%;
+  height: 85%;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  align-items: center;
+}
+.pa_ca_c_b_btnArea {
+  width: 150px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pa_ca_c_b_ba_btn {
+  width: 80px;
+  height: 50px;
+  margin-right: 20px;
+  font-size: 18px;
+}
+
+.pa_ca_c_b_inputArea > textarea {
+  resize: none;
+  min-height: 50px;
+  height: calc(100% - 10px);
+  background: none;
+  margin: 7px 0;
+  width: calc(100% - 150px);
+  font-size: 18px;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+  margin-left: 10px;
+}
+
+#myTextarea::-webkit-input-placeholder {
+  /* Chrome, Opera, Safari */
+  font-size: 16px; /* 修改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;
+  /* padding: 20px 0; */
+}
+
+.uc_left {
+ 	max-width: calc(65vw - 300px);
+	width: auto;
+  height: auto;
+  padding: 20px 0px 10px 0;
+}
+
+.uc_left>.chatMessage{
+	background-color: #4a7ff4;
+	color: #fff;
+}
+
+/* .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: 20px 0px 10px 0;
+}
+
+.chatMessage {
+  max-width: calc(65vw - 300px);
+  background-color: #f7f9fe;
+  color: black;
+  padding: 20px 20px;
+  border-radius: 10px;
+}
+
+.chatMessage >>> ol {
+  margin-left: 25px;
+}
+
+.chatMessage >>> ul {
+  margin-left: 25px;
+}
+
+.ac_r_time {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #bdbdbd;
+}
+
+.chatAvatar {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background: none;
+}
+
+.ac_left > .chatAvatar {
+  transform: scale(1.2, 1.2);
+}
+</style>

src/components/pages/pocAiClassroom/component/chapterCard.vue

@@ -8,6 +8,41 @@
         :key="index"
       >
         <div class="cc_b_i_image">
+          <el-image
+            style="width: 100%;height: 100%;"
+            :src="
+              require('../../../../assets/icon/pocAiClassroom/classImage.png')
+            "
+          ></el-image>
+          <span v-text="item.title"></span>
+        </div>
+
+        <div class="cc_b_i_message">
+          <div>
+            <span v-if="item.isComplete">✅已完成</span>
+            <span v-else>🏷️待完成</span>
+          </div>
+          <div>
+            <div>
+              {{ subjectList.find(i => i.value === item.subject).label }}
+            </div>
+          </div>
+        </div>
+        <div class="cc_b_i_btnArea">
+          <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 class="cc_b_i_image">
 					<el-image style="width: 100%;height: 100%;" :src="item.image" fit="cover"></el-image>
 					<div class="cc_b_i_btnArea">
 						<span class="cc_b_i_ba_goClass" v-if="[0].includes(item.type)" @click.stop="goClass(item)">去上课</span>
@@ -23,7 +58,7 @@
           >
             <span v-text="item.title"></span>
           </el-tooltip>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -35,21 +70,31 @@ export default {
     data: {
       type: Object,
       default: () => {}
+    },
+    subjectList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
-    return {};
+    return {
+      userId: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid
+    };
   },
-	methods: {
-		goClass(item){
-			console.log("去上课",item);
-			
-		},
-		goWorks(item){
-			console.log("去做练习",item);
-			
-		}
-	},
+  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}`
+      );
+    }
+  }
 };
 </script>
 
@@ -58,12 +103,12 @@ export default {
   width: 100%;
   height: auto;
   margin-top: 30px;
-	
+  position: relative;
 }
 
 .cc_title {
   margin: 20px 0;
-  font-size: 32px;
+  font-size: 30px;
 }
 
 .cc_box {
@@ -71,24 +116,134 @@ export default {
   height: auto;
   display: flex;
   flex-wrap: wrap;
+  position: relative;
 }
 
 .cc_b_item {
-  width: 230px;
-  height: 300px;
+  width: 250px;
+  height: 190px;
   margin-right: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-	margin-bottom: 40px;
+  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>.cc_b_i_btnArea{
-	display: flex;
+.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: 20px;
+  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: 18px;
+  display: flex;
+  align-items: center;
+}
+
+.cc_b_i_message > div > div {
+  font-size: 16px;
+  padding: 5px;
+  background-color: #e0eafb;
+  border-radius: 3px;
+  color: #3681fc;
+  font-weight: bold;
+}
+
+.cc_b_i_btnArea {
+  width: 100%;
+  height: 45px;
+  position: absolute;
+  bottom: 16px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  display: none;
+}
+
+.cc_b_i_btnArea > span {
+  flex: 1;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 8px;
+  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: 18px;
+  transition: 0.3s;
+}
+
+.cc_b_i_btnArea > span:hover {
+  color: #3681fc;
+  border-color: #e0eafb;
+}
+
+.cc_b_i_btnArea > span:nth-of-type(2n) {
+  margin-left: 10px;
+}
+
+/* .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;
@@ -107,22 +262,10 @@ export default {
 	align-items: center;
 	padding: 0 10px;
 	box-sizing: border-box;
-}
-
-.cc_b_i_btnArea>span{
-	flex: 1;
-	height: 40px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	border-radius: 8px;
-	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-blend-mode: screen;
-}
+	
+} */
 
-.cc_b_i_btnArea>span:nth-of-type(2n){
+/* .cc_b_i_btnArea>span:nth-of-type(2n){
 	margin-left: 10px;
 }
 
@@ -140,5 +283,5 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 20px;
-}
+} */
 </style>

src/components/pages/pocAiClassroom/component/settingsDialog.vue

@@ -0,0 +1,468 @@
+<template>
+  <div>
+    <el-dialog
+      :center="true"
+      :visible.sync="show"
+      :close-on-click-modal="true"
+      width="600px"
+      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="170px"
+                  :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/icon/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/icon/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: 600px;
+  max-width: 80%;
+  height: 600px;
+  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: 500px;
+  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: 60px;
+  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%;
+  height: 170px;
+  min-height: 170px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd_b_m_t_characterList {
+  width: 100%;
+  height: 100%;
+}
+
+.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: 20px;
+}
+
+.sd_b_m_t_bottomArea {
+  width: 100%;
+  height: 70px;
+}
+
+.sd_b_m_t_bottomArea > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 22px;
+  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: 20px;
+}
+
+.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: 20px;
+  background-color: transparent;
+}
+
+.sd_b_m_t2_fa_item {
+  width: 100%;
+  height: 90px;
+  max-height: 150px;
+  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: 150px;
+}
+
+.sd_b_m_t2_fa_i_inputArea > textarea {
+  height: 75px;
+  width: calc(100%);
+  margin: 0 0px 5px 10px;
+  font-size: 20px;
+  background: none;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+}
+</style>

src/components/pages/pocAiClassroom/component/txtView.vue

@@ -81,7 +81,7 @@ export default {
 	height: 100%;
 	box-sizing: border-box;
 	background-color: #ececec;
-	padding: 20px;
+	padding: 40px 20px;
 }
 
 .tv_content{

src/components/pages/pocAiClassroom/doTask.vue

@@ -0,0 +1,1917 @@
+<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_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>
+        <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"
+                  >{{ choseList[index] }}<span>.</span
+                  ><img :src="item.src" @click.stop="$hevueImgPreview(item.src)"
+                /></span>
+                <span v-else
+                  >{{ choseList[index] }}<span>.</span>{{ item }}</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
+              >
+              <!-- 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_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 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>
+    <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
+    <div class="dt_character">
+      <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>{{ 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">
+        <span>{{ grade }}</span
+        >><span>{{ semester }}</span
+        >><span>{{ edition }}</span>
+      </div> -->
+      <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
+      <div class="dt_is_statistics">
+        <img
+          :src="require('../../../assets/icon/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.2,1.2);"
+            ></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
+                  >{{ choseList[index2] }}<span>.</span>{{ item2 }}</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>
+export default {
+  data() {
+    return {
+      showTaskIndex: 0,
+      time: 0,
+      time2: 0,
+      startTime: 0,
+      timer: null,
+      userId: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      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/icon/pocAiClassroom/character1.png"),
+          name: "圆鼓鼓的大胖鱼",
+          personality:
+            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心"
+        },
+        {
+          index: 1,
+          image: require("../../../assets/icon/pocAiClassroom/character2.png"),
+          name: "迷人的大反派2",
+          personality:
+            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2"
+        },
+        {
+          index: 2,
+          image: require("../../../assets/icon/pocAiClassroom/character3.png"),
+          name: "迷人的大反派3",
+          personality:
+            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3"
+        },
+        {
+          index: 3,
+          image: require("../../../assets/icon/pocAiClassroom/character4.png"),
+          name: "迷人的大反派4",
+          personality:
+            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4"
+        },
+        {
+          index: 4,
+          image: require("../../../assets/icon/pocAiClassroom/character5.png"),
+          name: "迷人的大反派5",
+          personality:
+            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5"
+        },
+        {
+          index: 5,
+          image: require("../../../assets/icon/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.$message.warning("已经是第一题啦");
+        }
+      } else if (type == "next") {
+        if (this.showTaskIndex < this.taskList.length - 1) {
+          this.showTaskIndex++;
+        } else {
+          this.$message.warning("已经是最后一题啦");
+        }
+      }
+    },
+    // 切换章节
+    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) {
+        this.$confirm("还有未做的题目，是否要继续做题", "提示", {
+          confirmButtonText: "确认提交",
+          cancelButtonText: "继续做题",
+          type: "warning "
+        })
+          .then(() => {
+            this.submitTask(1);
+          })
+          .catch(() => {
+            console.log("继续做题");
+          });
+      } else {
+        this.isSubmit = true;
+        clearInterval(this.timer);
+        this.timer = null;
+        this.sortTaskList();
+      }
+    },
+    back() {
+      this.$router.push(
+        `/pocAiClassroom?userid=${this.userId}&oid=${this.oid}&org=${this.org}`
+      );
+    },
+    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: 70%;
+  height: 95%;
+  min-height: 800px;
+  min-width: 1100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  position: relative;
+  top: 2.5%;
+}
+
+.dt_m_head {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  /* justify-content: center; */
+}
+
+.dt_m_h_message {
+  font-size: 20px;
+  color: #00000099;
+}
+
+.dt_m_h_message > span {
+  margin: 0 10px;
+}
+
+.dt_m_h_back {
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  background-color: #f8f9fa;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  top: calc(50% - 40px);
+  left: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.dt_m_h_back > svg {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+}
+
+.dt_m_h_chapter {
+  font-size: 34px;
+  margin: 20px 0;
+}
+
+.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% - 60px);
+  border-radius: 10px;
+  display: flex;
+}
+
+.dt_m_b_left {
+  width: calc(100% - 300px - 30px);
+  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: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 16px 32px;
+  background-color: #f8f9fa;
+}
+
+.dt_m_l_h_title {
+  font-size: 30px;
+  font-weight: bold;
+  max-width: calc(100% - 150px);
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dt_m_l_h_changeChapter {
+  font-size: 24px;
+  color: #3681fc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dt_m_l_h_changeChapter > svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+
+.dt_m_b_l_title {
+  font-size: 26px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.dt_m_b_right {
+  width: 300px;
+  margin-left: 30px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dt_m_b_r_time {
+  width: 100%;
+  height: 300px;
+  background-color: #fff;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 10px 10px 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: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+
+.dt_m_b_r_t_head > span {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.dt_m_b_r_t_showTime {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #f2f6fc;
+  margin-top: 10px;
+}
+
+.dt_m_b_r_t_showTime > span {
+  font-size: 2.6em;
+  font-weight: bold;
+  color: #0061ff;
+}
+
+.dt_m_b_r_t_schedule {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.dt_m_b_r_t_btn {
+  width: 100%;
+  height: 60px;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #f0f2f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  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: -20px;
+  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: calc(100% - 60px - 80px - 20px);
+  margin: 10px 0;
+  box-sizing: border-box;
+}
+
+.dt_m_b_r_tl_boxList > span {
+  width: 35px;
+  height: 35px;
+  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: 100%;
+  height: 60px;
+  box-sizing: border-box;
+  border-top: solid 1px #f0f2f5;
+  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: 18px;
+}
+
+.dt_m_b_r_tl_bottom > div > span {
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: solid 2px #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% - 170px);
+  overflow: auto;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 30px 40px;
+}
+
+.dt_m_b_l_t_cl_item {
+  font-size: 24px;
+  display: flex;
+  width: 100%;
+  height: auto;
+  align-items: flex-start;
+  margin: 20px 0;
+  background-color: #f2f6fc;
+  padding: 15px 25px;
+  border-radius: 8px;
+  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: 3px;
+}
+
+.dt_m_b_l_t_cl_item > div > span {
+  width: 12px;
+  height: 12px;
+  border-radius: 100%;
+  display: none;
+  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;
+}
+
+.dt_m_b_l_t_cl_item > span > img {
+  max-width: 300px;
+  cursor: pointer;
+}
+
+.dt_m_b_l_t_cl_item > span > span {
+  margin-left: 3px;
+}
+
+.dt_m_b_l_t_title {
+  font-size: 24px;
+  height: auto;
+  width: 100%;
+}
+
+.dt_m_b_l_t_title > span {
+  font-weight: bold;
+  margin-left: -10px;
+}
+.dt_m_b_l_t_choseList {
+  width: 100%;
+  height: auto;
+  margin: 20px 0;
+}
+
+.dt_m_b_l_bottom {
+  width: 100%;
+  height: 90px;
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  border-top: 1px solid #f0f2f5;
+  justify-content: space-between;
+  padding: 16px 32px;
+  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: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+
+.dt_m_b_l_b_seekAssist > span {
+  font-size: 24px;
+  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: 15px 70px;
+  border-radius: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  margin-left: 20px;
+  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_isSubmit {
+  width: 70%;
+  margin: auto;
+  min-width: 1000px;
+  height: 100%;
+  background-color: #fff;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 30px 50px;
+}
+
+.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 {
+  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 40px;
+  font-size: 24px;
+}
+
+.dt_is_s_taskList {
+  max-width: 70%;
+  width: auto;
+  height: auto;
+  margin-top: 30px;
+}
+
+.dt_is_s_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: 22px;
+  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: 24px;
+  font-weight: bold;
+}
+
+.dt_is_tl_head > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_is_tl_head > div > span {
+  font-size: 20px;
+  margin-right: 10px;
+}
+
+.dt_is_tl_taskBox {
+  width: 100%;
+  height: auto;
+  margin: 20px 0;
+  box-sizing: border-box;
+  border: solid 1px #f2f2f2;
+  padding: 10px;
+}
+
+.dt_is_tl_tb_item {
+  width: 100%;
+  height: auto;
+  padding: 20px 0 30px 0;
+  /* border-bottom: solid 1px black; */
+}
+
+.dt_is_tl_tb_i_title {
+  font-size: 24px;
+}
+.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: 20px;
+  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: 60%;
+}
+
+.dt_is_tl_tb_i_answer {
+  font-size: 20px;
+  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: 500px;
+  z-index: 2;
+  bottom: -43px;
+  position: absolute;
+}
+
+.dt_c_message {
+  width: 70vw;
+  min-width: 1000px;
+  height: 200px;
+  position: absolute;
+  left: 300px;
+  bottom: 20px;
+  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
+  border-radius: 6px;
+  padding: 32px 24px 24px 24px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 5;
+}
+
+.dt_c_m_characterName {
+  padding: 10px 15px;
+  background-color: #3681fc;
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  position: absolute;
+  left: -20px;
+  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: 20px;
+  box-sizing: border-box;
+  margin-top: 20px;
+  padding-left: 10px;
+}
+
+.dt_c_m_message {
+  max-width: 100%;
+  font-size: 24px;
+  padding: 10px 30px;
+}
+
+.dt_c_m_message > span {
+  font-weight: bold;
+}
+
+.dt_c_m_btnArea {
+  position: absolute;
+  bottom: 30px;
+  right: 30px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dt_c_m_btnArea > span {
+  padding: 12px 30px;
+  border-radius: 8px;
+  font-size: 18px;
+  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: 12px 40px !important;
+}
+</style>

src/components/pages/pocAiClassroom/index.vue

@@ -2,20 +2,121 @@
   <div class="pocAiClass">
     <div class="pac_head">
       <div class="pac_h_left">
-        <span>八年级</span>><span>上学期</span>><span>{{
+        <!-- <span>八年级</span>><span>上学期</span>><span>{{
           editionList[edition]
-        }}</span>
+        }}</span> -->
+        <span>筛选</span>
       </div>
       <div class="pac_h_right">
-        <span @click.stop="changeGrade()">切换年级</span>
+        <div class="p_h_r_box">
+          <div>
+            <div>
+              <el-image
+                class="p_h_r_b_avatar"
+                :src="
+                  require('../../../assets/icon/pocAiClassroom/defaultAvatar.png')
+                "
+              ></el-image>
+
+              <span>{{ userInfo.userName }}</span>
+            </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>
+            <div class="pac_h_r_b_grade">
+              <div>{{ gradeList[userInfo.grade] }}</div>
+              <span @click.stop="changeGrade()"
+                ><svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.3333 9.52856L10.1953 12.6666L9.25229 11.7239L10.1143 10.8622L2.39062 10.8619V9.52856H13.3333ZM5.52862 3.52856L6.47129 4.47123L5.60929 5.33323H13.3333V6.66656H2.39062L5.52862 3.52856Z"
+                    fill="black"
+                    fill-opacity="0.6"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+        <!-- <span @click.stop="changeGrade()">切换年级</span>
         <el-image
           class="pac_h_r_avatar"
-          :src="require('../../../assets/icon/pocAiClass/avatar.svg')"
-        ></el-image>
+          :src="require('../../../assets/icon/pocAiClassroom/avatar.svg')"
+        ></el-image> -->
       </div>
     </div>
 
-    <div class="pac_subjectList">
+    <div class="pac_screen">
+      <el-select
+        v-model="subject"
+        class="pac_s_select"
+        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"
+        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">
+        <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"
@@ -23,9 +124,9 @@
         @click.stop="changeSubject(index)"
         >{{ item }}</span
       >
-    </div>
+    </div> -->
 
-    <div class="pac_editionList">
+    <!-- <div class="pac_editionList">
       <span
         :class="[edition == index ? 'pac_el_active' : '']"
         v-for="(item, index) in editionList"
@@ -33,21 +134,67 @@
         @click.stop="changeEdition(index)"
         >{{ item }}</span
       >
-    </div>
+    </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_left">
+      <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/pocAiClass/hello.gif')"
+          :src="require('../../../assets/icon/pocAiClassroom/hello.gif')"
         ></el-image>
       </div>
       <div class="pac_fd_right">
@@ -64,47 +211,107 @@
             >×</span
           >
         </div>
-      </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
+    chapterCard,
+		settingsDialog
   },
   data() {
     return {
-			userId: this.$route.query.userid,
+      userId: this.$route.query.userid,
       org: this.$route.query.org,
       oid: this.$route.query.oid,
-      subject: 0,
-      edition: 0,
+      subject: "",
+      edition: "",
+      searchValue: "",
+      grade: 7,
       showDialog: true,
+      userInfo: {
+        userName: "科科",
+				grade:7,
+				userAvatar:"",
+        choseCharacter: 0,
+      },
+      characterList: [
+        {
+          index: 0,
+          image: require("../../../assets/icon/pocAiClassroom/character1.png"),
+					name:"圆鼓鼓的大胖鱼",
+					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心",  
+        },
+        {
+          index: 1,
+          image: require("../../../assets/icon/pocAiClassroom/character2.png"),
+					name:"迷人的大反派2",
+					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2",  
+        },
+        {
+          index: 2,
+          image: require("../../../assets/icon/pocAiClassroom/character3.png"),
+					name:"迷人的大反派3",
+					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3",  
+        },
+        {
+          index: 3,
+          image: require("../../../assets/icon/pocAiClassroom/character4.png"),
+					name:"迷人的大反派4",
+					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4",  
+        },
+        {
+          index: 4,
+          image: require("../../../assets/icon/pocAiClassroom/character5.png"),
+					name:"迷人的大反派5",
+					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5",  
+        },
+        {
+          index: 5,
+          image: require("../../../assets/icon/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: [
-        "人教版",
-        "教科版",
-        "北师大版",
-        "苏教版",
-        "沪教版",
-        "浙教版",
-        "冀教版",
-        "鲁教版",
-        "人教A版",
-        "人教B版"
+        { 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: [
         {
@@ -113,32 +320,42 @@ export default {
             {
               title: "长度和时间的测量",
               type: 0,
+              isComplete: true,
+              subject: 0,
               image:
-                "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
             }
           ]
         },
@@ -148,62 +365,74 @@ export default {
             {
               title: "长度和时间的测量",
               type: 0,
+              subject: 0,
+              isComplete: true,
               image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
-            },
-            {
-              title: "单元测试",
-              type: 1,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                "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://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
             }
           ]
         },
@@ -213,102 +442,42 @@ export default {
             {
               title: "长度和时间的测量",
               type: 0,
+              isComplete: true,
+              subject: 0,
               image:
-                "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                "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/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "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://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                "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://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                "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://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-            }
-          ]
-        },
-        {
-          title: "第四章",
-          allClass: [
-            {
-              title: "长度和时间的测量",
-              type: 0,
-              image:
-                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-            },
-            {
-              title: "运动的描述",
-              type: 0,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
-            },
-            {
-              title: "运动的快慢",
-              type: 0,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
-            },
-            {
-              title: "测量平均速度",
-              type: 0,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
-            },
-            {
-              title: "单元测试",
-              type: 1,
-              image:
-                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-            }
-          ]
-        },
-        {
-          title: "第五章",
-          allClass: [
-            {
-              title: "长度和时间的测量",
-              type: 0,
-              image:
-                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-            },
-            {
-              title: "运动的描述",
-              type: 0,
-              image:
-                "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-            },
-            {
-              title: "运动的快慢",
-              type: 0,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
-            },
-            {
-              title: "测量平均速度",
-              type: 0,
-              image:
-                "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
-            },
-            {
-              title: "单元测试",
-              type: 1,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724727615916.jpg"
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
             }
           ]
         }
@@ -317,30 +486,57 @@ export default {
   },
   methods: {
     changeGrade() {
-      console.log("切换年级");
-    },
-    changeSubject(newIndex) {
-      if (this.subject == newIndex) return;
-      this.subject = newIndex;
-    },
-    changeEdition(newIndex) {
-      if (this.edition == newIndex) return;
-      this.edition = newIndex;
+      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(`/pocAiChat?userid=${this.userId}&org=${this.org}&oid=${this.oid}`)
+        this.$router.push(
+          `/pocClass?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+        );
         // console.log("开始学习新的内容");
       } else if (type == 2) {
-				this.$router.push(`/pocAiChat?userid=${this.userId}&org=${this.org}&oid=${this.oid}`)
+        this.$router.push(
+          `/pocClass?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+        );
         // console.log("复习上一节课");
       } else if (type == 3) {
-        this.$router.push(`/pocAiChat?userid=${this.userId}&org=${this.org}&oid=${this.oid}&type=3`)
+        this.$router.push(
+          `/pocAiChat?userid=${this.userId}&org=${this.org}&oid=${this.oid}&type=3`
+        );
       }
-    }
-  }
+    },
+		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() {}
 };
 </script>
 
@@ -349,14 +545,15 @@ export default {
   width: 100vw;
   height: 100vh;
   overflow: auto;
-  background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%);
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  background-color: #f0f2f5;
   box-sizing: border-box;
   padding: 0 100px;
 }
 
 .pac_head {
   width: 100%;
-  height: 70px;
+  height: auto;
   margin-top: 30px;
   display: flex;
   align-items: center;
@@ -370,10 +567,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
 }
 .pac_h_left > span {
-  margin: 0 5px;
+  font-size: 28px;
 }
 
 .pac_h_right {
@@ -384,7 +580,81 @@ export default {
   justify-content: center;
 }
 
-.pac_h_right > span {
+.p_h_r_box {
+  width: auto;
+  height: auto;
+  background-color: #fff;
+  border: 1px solid #e0eafb;
+  border-radius: 8px;
+}
+
+.p_h_r_box > div {
+  width: 200px;
+  height: 50px;
+  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 > div > span {
+  font-size: 20px;
+  margin-left: 10px;
+  display: block;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.p_h_r_box > div > span {
+  width: 20px;
+  height: 20px;
+}
+
+.p_h_r_box > div > span > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.p_h_r_b_avatar {
+  min-width: 40px;
+  min-height: 40px;
+  width: 40px;
+  height: 40px;
+}
+
+.pac_h_r_b_grade {
+  width: 100%;
+  height: 60%;
+  border-radius: 4px;
+  padding: 2px 8px 2px 8px;
+  display: flex;
+  justify-content: space-between !important;
+  background-color: #f0f2f5;
+}
+
+.pac_h_r_b_grade > span {
+  text-align: right;
+  width: 20px;
+  height: 20px;
+}
+
+.pac_h_r_b_grade > span > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+/* .pac_h_right > span {
   padding: 8px 12px;
   background-color: #d9d9d9;
   border: solid 1px #fff;
@@ -392,14 +662,14 @@ export default {
   border-radius: 8px;
   margin-right: 20px;
   cursor: pointer;
-}
+} */
 
 .pac_h_r_avatar {
   width: 50px;
   height: 50px;
 }
 
-.pac_subjectList {
+/* .pac_subjectList {
   max-width: 100%;
   height: 50px;
   overflow: auto;
@@ -466,6 +736,44 @@ export default {
   background-color: #4874cb !important;
   color: #fff;
   border: solid 1px #2e54a1 !important;
+} */
+
+.pac_screen {
+  width: 100%;
+  height: 60px;
+  margin-top: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.pac_s_reset{
+	padding: 10px 15px;
+	background-color: #E2EEFF;
+	color: #3681FC;
+	font-size: 20px;
+	border-radius: 8px;
+	cursor: pointer;
+}
+
+.pac_s_select {
+  width: 230px;
+  height: 40px;
+  margin-right: 30px;
+}
+
+.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 {
@@ -474,17 +782,6 @@ export default {
   margin-top: 20px;
 }
 
-.pac_footDialog {
-  width: calc(100% - 200px);
-  min-width: 900px;
-  height: 200px;
-  position: fixed;
-  bottom: 50px;
-  display: flex;
-  align-items: center;
-  /* background-color: red; */
-}
-
 .pac_fd_left {
   width: 200px;
   height: 200px;
@@ -552,4 +849,138 @@ export default {
   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: 70%;
+  min-width: 1000px;
+  height: 220px;
+  position: absolute;
+  bottom: 40px;
+  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: relative;
+  z-index: 1;
+}
+
+.pac_fd_b_left > img {
+  position: absolute;
+  bottom: -40px;
+  width: 700px;
+  transform: translate(70px, 57px);
+}
+
+.pac_fd_b_right {
+  flex: 1;
+  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: 20px;
+  position: absolute;
+  left: -20px;
+  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: 24px;
+  padding: 30px 30px;
+}
+
+.pac_fd_b_r_message > span {
+  font-weight: bold;
+}
+
+.pac_fd_b_r_btnArea {
+  position: absolute;
+  bottom: 30px;
+  right: 30px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.pac_fd_b_r_btnArea > span {
+  padding: 12px 30px;
+  border-radius: 6px;
+  font-size: 18px;
+  cursor: pointer;
+  margin-left: 20px;
+  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>

src/components/pages/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.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+    };
+  },
+  methods: {
+
+  },
+  mounted() {
+    
+  }
+};
+</script>
+
+<style scoped>
+.chatArea{
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.ca_iframe{
+	width: 100%;
+	height: 100%;
+}
+</style>

src/router/index.js

@@ -134,6 +134,8 @@ import testPersonExamine from '@/components/pages/testPerson/examine'
 import csTest from '@/components/pages/csTest'
 import pocAiClassroom from '@/components/pages/pocAiClassroom'
 import pocAiChat from '@/components/pages/pocAiClassroom/chatArea'
+import pocDoTask from '@/components/pages/pocAiClassroom/doTask'
+import pocClass from '@/components/pages/pocAiClassroom/pocClass'
 // 全局修改默认配置，点击空白处不能关闭弹窗
 ElementUI.Dialog.props.closeOnClickModal.default = false
 Vue.use(Router).use(ElementUI)
@@ -1152,5 +1154,21 @@ export default new Router({
 						requireAuth:''//不需要鉴权
 					}
 				},
+				{
+					path:"/pocDoTask",
+					name:"pocDoTask",
+					component:pocDoTask,
+					meta:{
+						requireAuth:''//不需要鉴权
+					}
+				},
+				{
+					path:"/pocClass",
+					name:"pocClass",
+					component:pocClass,
+					meta:{
+						requireAuth:''//不需要鉴权
+					}
+				},
     ]
 })