课堂观察

src/components/pages/classroomObservation/components/addNewCourseDialog.vue

@@ -9,9 +9,9 @@
 			  <el-form-item label="课堂编号">
   			  <el-input v-model="form.no" placeholder="请输入课堂编号"></el-input>
   			</el-form-item>
-				<el-form-item label="课堂名称">
+				<!-- <el-form-item label="课堂名称">
   			  <el-input v-model="form.name" placeholder="请输入课堂名称"></el-input>
-  			</el-form-item>
+  			</el-form-item> -->
 			</el-form>
 		</div>
 			<span slot="footer" class="dialog-footer">
@@ -45,8 +45,8 @@ export default {
 			this.dialogVisible = true;
 		},
 		submit(){
-			if(this.form.no.trim().length==0 || this.form.name.trim().length==0){
-				this.$message.error("请输入课堂编号和课堂名称")
+			if(this.form.no.trim().length==0 ){//|| this.form.name.trim().length==0
+				this.$message.error("请输入课堂编号")
 				return;
 			}
 			this.$emit("success",this.form)

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

@@ -163,7 +163,7 @@ export default {
 						"请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
 					session_name: new Date().getTime(),
 					userId: "1cf9dc4b-d95f-11ea-af4c-52540005ab01",
-					file_ids: this.fileId,
+					file_ids: this.fileId?[this.fileId]:'',
 				};
 
 				if (!parm.assistant_id) {
@@ -199,7 +199,6 @@ export default {
 					.catch((err) => {
 						this.$message.error("AI无法识别优化");
 						this.loading = false;
-						this.loadNum = 2;
 					});
 			});
 		},

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

@@ -47,11 +47,11 @@
 					</div>
 
 					<div class="m-m-formItemBot">
-						<div class="m-m-fi-label">授课班级</div>
+						<div class="m-m-fi-label">教材版本</div>
 						<div class="m-m-fi-input">
 							<el-input
-								v-model="data.class"
-								placeholder="请输入班级"
+								v-model="data.textbook"
+								placeholder="请输入教材版本"
 								@change="changeData()"
 							></el-input>
 						</div>

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

@@ -211,7 +211,7 @@ import baseMessage from "./baseMessage.vue"; //基本信息
 import analysis from "./analysis.vue";
 
 export default {
-	emits:["changeChatAreaAudioUrl"],
+	emits:["changeChatAreaAudioUrl","changeTranscription","changeOptionData"],
 	components: {
 		baseMessage,
 		// currencyAnalysis,
@@ -317,54 +317,55 @@ export default {
 					value: "8ab07d41-e143-11ee-aaca-12e77c4cb76b",
 					type: 1,
 				},
-				{
-					title: "5E课程改编",
-					brief: "5E课程改编",
-					value: "f757826e-0125-11ef-aaca-12e77c4cb76b",
-					type: 2,
-				},
-				{
-					title: "5EX课程改编",
-					brief: "5EX课程改编",
-					value: "0b6b08b7-0126-11ef-aaca-12e77c4cb76b",
-					type: 2,
-				},
 				{
 					title: "UTOP课堂观察",
 					brief: "UTOP课堂观察",
 					value: "8e3a389b-014f-11ef-aaca-12e77c4cb76b",
-					type: 3,
+					type: 1,
 				},
 				{
-					title: "RST模型",
-					brief: "多维度分析课堂整体情况",
+					title:"L-PST模型",
+					brief: "L-PST模型",
 					value: "e649112e-0150-11ef-aaca-12e77c4cb76b",
-					type: 3,
+					type: 1,
 				},
+				// {
+				// 	title: "RST模型",
+				// 	brief: "多维度分析课堂整体情况",
+				// 	value: "e649112e-0150-11ef-aaca-12e77c4cb76b",
+				// 	type: 1,
+				// },
 				{
 					title: "RTOP模型",
 					brief: "多维度分析课堂整体情况",
 					value: "68265b18-0151-11ef-aaca-12e77c4cb76b",
-					type: 3,
+					type: 1,
 				},
 				{
 					title: "课程质量评价",
 					brief: "多维度分析课堂整体情况", 
 				 	value:"25e53379-0152-11ef-aaca-12e77c4cb76b",
-					type: 3,
+					type: 1,
 				},
 				{
 					title: "SCOP课堂观察",
 					brief: "多维度分析课堂整体情况",
 					value: "d0c76d35-0152-11ef-aaca-12e77c4cb76b",
-					type: 3,
+					type: 1,
 				},
 				{
-					title: "RTOP课堂观察",
-					brief: "多维度分析课堂整体情况",
-					value: "a7107221-f7f5-11ee-aaca-12e77c4cb76b",
-					type: 3,
+					title: "5E课程改编",
+					brief: "5E课程改编",
+					value: "f757826e-0125-11ef-aaca-12e77c4cb76b",
+					type: 2,
+				},
+				{
+					title: "5EX课程改编",
+					brief: "5EX课程改编",
+					value: "0b6b08b7-0126-11ef-aaca-12e77c4cb76b",
+					type: 2,
 				},
+
 			],
 			bmData: {},
 			dataList: [],
@@ -550,6 +551,7 @@ export default {
 
 					this.dataList.push(...currency);
 					this.bmData = _bmData;
+					this.$emit("changeTranscription",{transcriptionData:this.bmData.jsonData.transcriptionData?this.bmData.jsonData.transcriptionData:"",editorBarData:this.bmData.jsonData.editorBarData?this.bmData.jsonData.editorBarData:{type:"0",content:"",url:""}})
 					this.imageList = _imageList;
 					if(this.imageList.jsonData.fileList.length>0){
 						this.$emit("changeChatAreaAudioUrl",this.imageList.jsonData.fileList[0]);
@@ -558,6 +560,9 @@ export default {
 					}
 					this.baseMessageLoading = false;
 					this.currencyLoading = false;
+				}).catch(e=>{
+					this.$message.error("获取通用分析失败");
+					console.log(e)
 				});
 		},
 		getScienceData() {
@@ -585,6 +590,9 @@ export default {
 					}
 					this.dataList.push(...science);
 					this.scienceLoading = false;
+				}).catch(e=>{
+					this.$message.error("获取科学分析失败");
+					console.log(e)
 				});
 		},
 		getExtendData() {
@@ -612,6 +620,9 @@ export default {
 					}
 					this.dataList.push(...extent);
 					this.extendLoading = false;
+				}).catch(e=>{
+					this.$message.error("获取扩展分析失败");
+					console.log(e)
 				});
 		},
 		getValueAddedData() {
@@ -639,6 +650,9 @@ export default {
 					}
 					this.dataList.push(...valueAdded);
 					this.valueAddedLoading = false;
+				}).catch(e=>{
+					this.$message.error("获取增值性分析失败");
+					console.log(e)
 				});
 		},
 		getData() {
@@ -659,6 +673,9 @@ export default {
 						}
 					).then(res=>{
 						resolve();
+					}).catch(e=>{
+						this.$message.error('保存失败');
+						resolve();
 					})
 			})
 			// return;
@@ -707,7 +724,9 @@ export default {
 		},
 		saveBaseData(){
 			this.bmData.json_data = JSON.stringify(this.bmData.jsonData);
-			this.saveData(this.bmData)
+			this.saveData(this.bmData).then(res=>{
+				this.$emit("changeOptionData",this.tid,{label:this.bmData.jsonData.courseName})
+			})
 		},
 		saveBaseImage(newImage){
 			if(this.imageList.jsonData.fileList1.length==0){
@@ -806,9 +825,17 @@ export default {
 					})
 			});
 		},
+		// 修改基本信息的原文速览和转录文稿
+		updateMessageTranscription({transcriptionData,editorBarData}){
+			this.bmData.jsonData['transcriptionData'] = transcriptionData;
+			this.bmData.jsonData['editorBarData'] = editorBarData;
+			this.saveData(this.bmData).then(res=>{
+				this.$message.success("保存成功");
+			})
+		},
 	},
 	mounted() {
-		this.getData();
+		
 	},
 };
 </script>

src/components/pages/classroomObservation/components/tape.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="tape">
+	<div class="tape" v-loading="loading">
 		<!-- <div class="t-header">
 			<div class="t-h-title">课堂录音</div>
 			<div class="t-h-time">2024-04-13 17:30:00</div>
@@ -87,12 +87,12 @@
 						<div class="t_ca_b_ai_c_main">
 							<div class="t_ca_b_ai_c_m_left" v-loading="item.loading" v-html="item.aiContent"></div>
 							<div class="t_ca_b_ai_c_m_right">
-								<img
+								<!-- <img
 									:src="
 										require('../../../../assets/icon/classroomObservation/addWork.png')
 									"
 									@click="addWork()"
-								/>
+								/> -->
 								<img
 									:src="
 										require('../../../../assets/icon/classroomObservation/copy.png')
@@ -139,6 +139,10 @@ export default {
 			default:()=>{
 				return [];
 			}
+		},
+		loading:{
+			type:Boolean,
+			default:true,
 		}
 	},
 	data() {

src/components/pages/classroomObservation/components/transcription.vue

@@ -5,7 +5,7 @@
 			<div class="t-h-time">{{ data.time }}</div>
 		</div> -->
 		<div class="t-content">
-			{{ data.content }}
+			{{ data.content?data.content:"暂无..." }}
 			<!-- <div class="contentCon" v-for="(i, index) in chatList" :key="index">
 				<div class="conTim">{{ i.timer }}</div>
 				<div class="conTxt">
@@ -13,6 +13,7 @@
 				</div>
 			</div> -->
 		</div>
+		<slot></slot>
 	</div>
 </template>
 
@@ -67,7 +68,9 @@ export default {
 .transcription {
 	width: 100%;
 	height: 100%;
-	max-height: calc(100% - 280px);
+	/* height: calc(100vh - 300px); */
+	max-height: calc(100vh - 300px);
+	position: relative;
 	/* display: flex; */
 	/* flex-direction: column; */
 	/* overflow: auto; */

src/components/pages/classroomObservation/components/wangEnduit.vue

@@ -0,0 +1,326 @@
+<template lang="html">
+  <div class="editor cont">
+    <div ref="toolbar" class="toolbar">
+    </div>
+    <div ref="editor" class="text">
+    </div>
+		<slot></slot>
+    <div v-if="proVisible" class="mask">
+      <div class="progressBox">
+        <div class="lbox">
+          <img src="../../../../assets/loading.gif" />上传中，请稍后
+        </div>
+      </div>
+    </div>
+  </div>
+</template>  
+  
+<script>
+import E from "wangeditor";
+import "../../../../common/aws-sdk-2.235.1.min";
+import { Loading } from 'element-ui';
+// import 'wangeditor/release/wangEditor.min.css'
+export default {
+  name: "editoritem",
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null,
+      proVisible:false,
+      progress:0
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change",
+  },
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    isClear: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: "请输入正文"
+    }
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+    value: function (value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value);
+      }
+    },
+    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    seteditor() {
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
+      // 关闭菜单栏fixed
+      this.editor.config.menuFixed = false;
+      // 普通的自定义菜单
+      this.editor.config.menus = [
+        "head", //标题
+        "bold", //加粗
+        "fontSize", //字体大小
+        // "fontName", //字体
+        // "italic", //斜体
+        // "underline", //下划线
+        // "strikeThrough", //删除线
+        "indent", //缩进
+        // "lineHeight", //行高
+        // "foreColor",
+        // "backColor",
+        // "link",
+        // "list",
+        // "todo",
+        "justify",
+        // "quote",
+        // "emoticon",
+        "image",
+        // "video",
+        "table",
+        // "code",
+        // "splitLine",
+        "undo",
+        "redo",
+      ];
+      // 带格式粘贴
+      this.editor.config.pasteFilterStyle = false;
+      //忽略粘贴内容中的图片
+      this.editor.config.pasteIgnoreImg = false;
+      this.editor.config.showLinkImg = false;
+      this.editor.config.placeholder = this.placeholder;
+      var that = this;
+      this.editor.config.customUploadImg = function (files, insert) {
+        // const loading = Loading.service({
+        //   lock: true,
+        //   background: 'rgba(0, 0, 0, 0.7)'
+        // });
+        // 图片自定义上传方法
+        var kk = 0
+        for (var i = 0; i < files.length; i++) {
+          var file = files[i];
+          var credentials = {
+            accessKeyId: "AKIATLPEDU37QV5CHLMH",
+            secretAccessKey: "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",
+          }; //秘钥形式的登录上传
+          window.AWS.config.update(credentials);
+          window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+          var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+          that.proVisible = true
+          if (file) {
+            var params = {
+              Key:
+                file.name.split(".")[0] +
+                new Date().getTime() +
+                "." +
+                file.name.split(".")[file.name.split(".").length - 1],
+              ContentType: file.type,
+              Body: file,
+              "Access-Control-Allow-Credentials": "*",
+              ACL: "public-read",
+            }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+            var options = {
+              partSize: 2048 * 1024 * 1024,
+              queueSize: 2,
+              leavePartsOnError: true,
+            };
+            bucket
+              .upload(params, options)
+              .on("httpUploadProgress", function (evt) {
+                //这里可以写进度条
+                // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+              })
+              .send(function (err, data) {
+                kk++
+                if(kk == files.length - 1 || kk > files.length - 1){
+                  that.proVisible = false
+                }
+                // loading.close();
+                if (err) {
+                  that.$message.error("上传失败");
+                } else {
+                  //上传成功处理
+                  insert(data.Location);
+                }
+              });
+          }
+        }
+      };
+      //配置 自定义处理粘贴的文本内容
+      this.editor.config.pasteTextHandle = function (content) {
+        if (content == '' && !content) return ''
+        var str = content
+        str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
+        str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
+        str = str.replace(/<\/?[^>]*>/g, '')
+        str = str.replace(/[ | ]*\n/g, '\n')
+        str = str.replace(/&nbsp;/ig, '')
+        // console.log('****', content)
+        // console.log('****', str)
+        return str
+      };
+      this.editor.config.onchange = (html) => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    },
+  },
+};
+</script>  
+  
+<style lang="css" scoped>
+.editor {
+   width: 100%;
+   margin: 10px auto;
+   position: relative;
+   z-index: 0;
+ }
+
+ .toolbar {
+   border: 1px solid #ccc;
+ }
+
+ .text {
+   border: 1px solid #ccc;
+   height: 230px;
+   overflow: auto;
+ }
+
+
+ /* table 样式 */
+ .cont>>>table {
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+
+.cont>>>table td,
+.cont>>>table th {
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  /* padding: 20px 5px; */
+  padding: 5px 10px;
+  max-width: 0px;
+  height: 30px;
+  vertical-align: baseline;
+}
+
+.cont>>>table th {
+  border-bottom: 2px solid #ccc;
+  text-align: center;
+}
+
+ /* blockquote 样式 */
+ .cont>>>blockquote {
+   display: block;
+   border-left: 8px solid #d0e5f2;
+   padding: 5px 10px;
+   margin: 10px 0;
+   line-height: 1.4;
+   font-size: 100%;
+   background-color: #f1f1f1;
+ }
+
+ /* code 样式 */
+ .cont>>>code {
+   display: inline-block;
+   *display: inline;
+   *zoom: 1;
+   background-color: #f1f1f1;
+   border-radius: 3px;
+   padding: 3px 5px;
+   margin: 0 3px;
+ }
+
+ .cont>>>pre code {
+   display: block;
+ }
+
+ /* ul ol 样式 */
+ .cont>>>ul,
+ ol {
+   margin: 0 !important;
+ }
+
+ /* .cont>>>.w-e-droplist{
+  width: 80px !important;
+ } */
+
+ .mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mask2 {
+  position: fixed !important;
+  z-index: 999999;
+}
+
+.progressBox {
+  width: 300px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+</style>  

src/components/pages/classroomObservation/index.vue

@@ -30,16 +30,25 @@
 							:label="item.label"
 							:value="item.value"
 						>
+						<div class="selectBox">
+							<span style="float: left">{{ item.label }}</span>
+							<span
+								class="delSelect"
+								@click.stop="delCourse(item.value)"
+								style="float: right"
+							></span>
+						</div>
+							
 						</el-option>
 					</el-select>
 				</span>
-				<div
+				<!-- <div
 					class="co_h2_l_del"
 					@click.stop="delCourse()"
 					v-if="optionData.length > 0"
 				>
 					<span></span>
-				</div>
+				</div> -->
 			</div>
 			<div class="co-h2-right">
 				<div
@@ -75,6 +84,7 @@
 					:tid="tid"
 					@updateFileId="updateFileId"
 					@changeAudioUrl="changeAudioUrl"
+					@updateTranscription="updateTranscription"
 					:fileId="fileId"
 					:fileIdId="fileIdId"
 				/>
@@ -86,6 +96,8 @@
 					ref="messageAreaRef"
 					@changeAudioUrl="changeAudioUrl"
 					@changeChatAreaAudioUrl="changeChatAreaAudioUrl"
+					@changeTranscription="changeTranscription"
+					@changeOptionData="changeOptionData"
 				/>
 			</div>
 		</div>
@@ -130,12 +142,14 @@ export default {
 		changeTid(newValue) {
 			this.$nextTick(() => {
 				this.$refs.messageAreaRef.getData();
+				this.$refs.chatAreaRef.getData();
 				this.getFileIdId();
 			});
 		},
 		addNewCourse(form) {
 			let params = {
 				tid: form.no,
+				type: "10",
 			};
 			this.ajax
 				.post(
@@ -143,17 +157,34 @@ export default {
 					params
 				)
 				.then((res) => {
+					console.log(res);
 					let _data = res.data.FunctionResponse;
 					if (_data.message == "创建成功") {
-						this.optionData.push({
-							label: `${form.no}课程`,
-							value: form.no,
-						});
 						this.tid = form.no;
-						this.$nextTick(() => {
-							this.$refs.messageAreaRef.getData();
-							this.getFileIdId();
-						});
+						// 设置该课程的tid
+						this.ajax
+							.post("https://gpt4.cocorobo.cn/insert_classroom_observation", {
+								tid: this.tid,
+								type: 10,
+								index: 0,
+								json_data: JSON.stringify({ file_ids: "" }),
+							})
+							.then((res2) => {
+								let _data2 = res2.data.FunctionResponse;
+								if (_data2.message == "创建成功") {
+									this.$nextTick(() => {
+										this.getCourseList().then((_) => {
+											this.getFileIdId();
+											this.$refs.messageAreaRef.getData();
+											this.$refs.chatAreaRef.getData();
+										});
+									});
+								} else {
+									this.$message.error("创建fileIds失败");
+								}
+							});
+					} else if (_data.message == "tid重复") {
+						this.$message.error("该课程已存在");
 					} else {
 						this.$message.error("创建失败");
 					}
@@ -215,7 +246,7 @@ export default {
 		shareBtn() {
 			this.dialogVisibleShare = !this.dialogVisibleShare;
 		},
-		delCourse() {
+		delCourse(_value = this.tid) {
 			this.$confirm("此操作将永久删除该课程, 是否继续?", "提示", {
 				confirmButtonText: "确定",
 				cancelButtonText: "取消",
@@ -223,7 +254,7 @@ export default {
 			})
 				.then(() => {
 					this.optionData.splice(
-						this.optionData.findIndex((item) => item.value == this.tid),
+						this.optionData.findIndex((item) => item.value == _value),
 						1
 					);
 					this.tid = this.optionData[0] ? this.optionData[0].value : "";
@@ -247,6 +278,7 @@ export default {
 			this.ajax
 				.post("https://gpt4.cocorobo.cn/get_classroom_observation_new", pram)
 				.then((res) => {
+					console.log(res);
 					let _data = res.data.FunctionResponse.result.length
 						? JSON.parse(res.data.FunctionResponse.result)
 						: [];
@@ -277,7 +309,9 @@ export default {
 						let _optionData = _result.map((item) => {
 							item.jsonData = item.jsonData ? JSON.parse(item.jsonData) : {};
 							return {
-								label: item.jsonData.courseName,
+								label: item.jsonData.courseName
+									? item.jsonData.courseName
+									: `${item.tId}课程`,
 								value: item.tId,
 							};
 						});
@@ -285,19 +319,40 @@ export default {
 							(i) => i.label != "" && i.tId != ""
 						);
 						this.optionData = _optionData;
-						if(this.optionData.length>0){
-							this.tid = this.optionData[0].value;
+						if (this.optionData.length > 0) {
+							if (!this.tid) this.tid = this.optionData[0].value;
 						}
 						resolve();
-						
 					});
 			});
 		},
+		updateTranscription({ transcriptionData, editorBarData }) {
+			this.$refs.messageAreaRef.updateMessageTranscription({
+				transcriptionData,
+				editorBarData,
+			});
+		},
+		changeTranscription({ transcriptionData, editorBarData }) {
+			this.$refs.chatAreaRef.changeEditorBar({
+				transcriptionData,
+				editorBarData,
+			});
+		},
+		changeOptionData(_tid,_newObj){
+			let _index = this.optionData.findIndex(i=>i.value==_tid);
+			if(_index!=-1){
+				this.optionData[_index] = {...this.optionData[_index],..._newObj}
+				this.$forceUpdate();
+			};
+			console.log(this.optionData)
+		},
 	},
 	mounted() {
 		this.getCourseList().then((_) => {
+			if(!this.tid)return;
 			this.getFileIdId();
 			this.$refs.messageAreaRef.getData();
+			this.$refs.chatAreaRef.getData();
 		});
 	},
 };
@@ -501,9 +556,9 @@ export default {
 .co_h2_l_t_select >>> .el-input__inner {
 	border: none;
 }
-.co_h2_l_t_select >>> .el-input__suffix {
+/* .co_h2_l_t_select >>> .el-input__suffix {
 	display: none;
-}
+} */
 
 .co_h2_l_del {
 	width: 35px;
@@ -529,4 +584,24 @@ export default {
 .co_h2_l_del:hover {
 	background-color: #eaeef1;
 }
+
+.selectBox{
+	width: 100%;
+	height: 100%;
+}
+.selectBox:hover .delSelect{
+	display: flex;
+}
+
+.delSelect {
+	width: 16px;
+	height: 16px;
+	display: none;
+	align-items: center;
+	justify-content: center;
+	background: url("../../../assets/icon/classroomObservation/del.png") no-repeat;
+	background-size: 100% 100%;
+	box-sizing: border-box;
+	transform: translateY(7px);
+}
 </style>