pbl-teacher-table/src/components/pages/classroomObservation/components/baseMessage.vue

<template>
	<div class="message">
		<div class="m-header" @click.stop="changeShowMain(!showMain)">
			<span :class="['m-h-icon', showMain ? 'm-h-icon-active' : '']"></span>
			<span class="m-h-title">{{ title }}</span>
		</div>
		<div class="m-main" v-show="showMain">
			<div class="m-m-form">
				<div class="m-m-formItem" style="width: clamp(50%, 50%, 50%)">
					<div class="m-m-fi-label">课堂名称</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.courseName"
							placeholder="请输入课堂名称"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(21%,21%,21%)">
					<div class="m-m-fi-label">授课老师</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.teacherName"
							placeholder="请输入授课老师"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(22%,22%,22%)"">
					<div class="m-m-fi-label">授课时间</div>
					<div class="m-m-fi-input">
						<el-date-picker
							v-model="data.time"
							type="datetime"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 100%"
							@change="changeData()"
							placeholder="请选择授课时间"
						>
						</el-date-picker>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(24%,24%,24%)"">
					<div class="m-m-fi-label">授课年级</div>
					<div class="m-m-fi-input">
						<el-select
							style="width: 100%"
							v-model="data.grade"
							@change="changeData()"
							placeholder="请选择年级"
						>
							<el-option
								v-for="(item, index) in gradeList"
								:key="index"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(24.5%,24.5%,24.5%)">
					<div class="m-m-fi-label">授课科目</div>
					<div class="m-m-fi-input">
						<el-select
							style="width: 100%"
							v-model="data.subject"
							@change="changeData()"
							placeholder="请选择年级"
						>
							<el-option
								v-for="(item, index) in subjectList"
								:key="index"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(21%,21%,21%)"">
					<div class="m-m-fi-label">教材版本</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.textbook"
							placeholder="请输入教材版本"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(22%,22%,22%)"">
					<div class="m-m-fi-label">学生人数</div>
					<div class="m-m-fi-input">
						<el-input
							v-model.number="data.studentNum"
							placeholder="请输入学生人数"
							@change="changeData()"
						></el-input>
					</div>
				</div>
			</div>
			<div class="fileList">
				<div class="fl_img">
					<div class="imgTit">
						<span>课堂图片</span>
						<span>（建议图片比例16:9，最多上传3张）</span>
					</div>
					<div class="m-m-formImage" v-loading="uploadImageLoading">
								<div
									class="m-m-fi-imageItem"
									v-for="(value, key, index) in imageList"
									:key="index"
									v-if="(key == 'fileList1' || key == 'fileList2' || key == 'fileList3') && value.length >0"
									@click.stop="previewImg(value[0].url)"
									style="max-width:32%;"
								>
									<el-image
										class="itemUrl"
										:src="value[0].url"
										fit="cover"
										style="width: 100%;"
									></el-image>
									<span @click.stop="delImage(key)"></span>
									<!-- <img class="itemUrl" :src="value[0].url" alt="" /> -->
								</div>
								<!-- 图片区域 -->

							<div
								class="m-m-fi-imageItem"
								@click.stop="addImage()"
								style="max-width:60%;"
								v-if="
									imageList.fileList1 &&
									imageList.fileList1.length +
										imageList.fileList2.length +
										imageList.fileList3.length <
										3
								"
							>
								<img
									src="../../../../assets/icon/classroomObservation/Union.svg"
									alt=""
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									点击上传图片
								</div>
							</div>
							<!-- 图片区域 -->
						<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
					</div>
				</div>
				<div class="fl_video">
					<div class="imgTit">
						<span>课堂视频</span>
						<span></span>
						<!-- <span>（建议视频比例16:9，最多上传1个）</span> -->
					</div>
					<div class="m-m-formImage" v-loading="uploadVideoLoading">
								<div
									class="m-m-fi-imageItem"
									style="max-width:60%;"
									v-if="!imageList.videoList.length==0"
									v-for="(item, index) in imageList.videoList?imageList.videoList:[]"
									:key="index"
									@click.stop="previewVideo(item.url)"
								>
								<!-- <div>{{ item }}</div> -->
									<el-image
										class="itemUrl"
										:src="require('../../../../assets/icon/classroomObservation/isVideo.png')"
										fit="cover"
									></el-image>
									<span @click.stop="delVideo('videoList')"></span>
								</div>
							<!-- <el-progress v-if="progressData.uploadVideo && !imageList.videoList.length" class="m_m_fi_progress" :percentage="progressData.value"></el-progress> -->
							<div
								class="m-m-fi-imageItem"
								@click.stop="addVideo()"
								style="max-width:60%;"
								v-if="(((imageList.videoList&&imageList.videoList.length<=0) || !imageList.videoList) && !progressData.uploadVideo)"
							>
								<img
									src="../../../../assets/icon/classroomObservation/Union.svg"
									alt=""
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									点击上传视频
								</div>
							</div>

							<div
								class="m-m-fi-imageItem"
								style="max-width:60%;border-radius: 8px;overflow: hidden;"
								v-if="progressData.uploadVideo && !imageList.videoList.length""
							>
							<el-image
								class="itemUrl"
								:src="require('../../../../assets/icon/classroomObservation/videoFile.svg')"
								fit="cover"
							></el-image>
							<div class="m_m_fi_progress">
									<div>{{ progressData.value }}%</div>
									<span>上传中...</span>
									<div class="m_m_fi_p_bar">
										<div :style="{width:progressData.value+'%'}"></div>
									</div>
							</div>
						</div>
						<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
					</div>
				</div>
				<!-- <div class="nephogramArea"> -->
				<div class="fl_nephogram">
					<div class="imgTit">
						<span>词云图</span>
						<span></span>
					</div>
					<div class="m-m-formImage">
								<div
									class="m-m-fi-nephogramItem"
									style="width:100%;"
									 v-loading="uploadNephogramLoading"
									v-if="(imageList.NephogramList&&imageList.NephogramList.length>0)"
								>
									<wordcloudEChart :data="imageList.NephogramList[0]"/>
									<span @click.stop="delNephogram('NephogramList')"></span>
								</div>
							<div
								class="m-m-fi-nephogramItem"
								 v-loading="uploadNephogramLoading"
								@click.stop="addNephogram()"
								style="width:60%;max-height: 100px;"
								v-if="((imageList.NephogramList&&imageList.NephogramList.length<=0) || !imageList.NephogramList)"
							>
								<img
									:src="require('../../../../assets/icon/classroomObservation/bmRefresh.png')"
									alt=""
									style="width:20px"
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									生成词云图
								</div>
							</div>
					</div>
				<!-- </div> -->
			</div>
				
			</div>
			
		</div>
		<previewVideoDialog ref="previewVideoDialogRef"/>
	</div>
</template>

<script>
import previewVideoDialog from './previewVideoDialog.vue';
import wordcloudEChart from './wordcloudEChart.vue'
import { v4 as uuidv4 } from "uuid";
export default {
	emits: ["saveData", "saveImage", "saveVideo","delImage","saveNephogram"],
	components:{
		previewVideoDialog,
		wordcloudEChart
	},
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
		tid:{
			type:String,
			default:"",
		},
		imageList: {
			type: Object,
			default: () => {
				return {
					fileList:[],
					fileList1:[],
					fileList2:[],
					fileList3:[],
					videoList:[],
				};
			},
		},
		dataList:{
			type:Array,
			default:()=>[]
		}
	},
	data() {
		return {
			title: "基本信息",
			chartObj:null,
			showMain: true,
			uploadImageLoading: false,
			uploadVideoLoading:false,
			uploadNephogramLoading:false,
			from: {
				courseName: "",
				teacherName: "",
				grade: "",
				subject: "",
				class: "",
				studentNum: 0,
			},
			gradeList: [
				{ value: "小学一年级", label: "小学一年级" },
				{ value: "小学二年级", label: "小学二年级" },
				{ value: "小学三年级", label: "小学三年级" },
				{ value: "小学四年级", label: "小学四年级" },
				{ value: "小学五年级", label: "小学五年级" },
				{ value: "小学六年级", label: "小学六年级" },
			],
			subjectList: [
				{ value: "语文", label: "语文" },
				{ value: "数学", label: "数学" },
				{ value: "英语", label: "英语" },
				{ value: "科学", label: "科学" },
				{ value: "信息技术", label: "信息技术" },
				{ value: "心理", label: "心理" },
				{ value: "物理", label: "物理" },
				{ value: "化学", label: "化学" },
				{ value: "生物", label: "生物" },
				{ value: "历史", label: "历史" },
				{ value: "地理", label: "地理" },
				{ value: "通用技术", label: "通用技术" },
				{ value: "政治", label: "政治" },
				{ value: "STEM", label: "STEM" },
				{ value: "美术", label: "美术" },
				{ value: "音乐", label: "音乐" },
				{ value: "其他", label: "其他" },
			],
			progressData:{
				uploadVideo:false,
				value:0,
			}
		};
	},
	watch:{
		imageList(){
			this.$forceUpdate();
		}
	},
	methods: {
		// 添加图片
		addImage() {
			if(!this.tid)return this.$message.error("请选择课堂")
			// 上传录音
			let input = document.createElement("input");
			input.type = "file";
			input.accept = "image/*";
			input.click();
			input.onchange = () => {
				this.uploadImageLoading = true;
				let file = input.files[0];
				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" } }); //选择桶
				var _this = this;

				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) {
							if (err) {
								_this.$message.error("上传失败");
							} else {
								_this.$emit("saveImage", {
									name: data.key,
									status: "success",
									uid: "1",
									url: data.Location,
								});
								// _this.from.audioUrl = data.Location;
								// _this.from.audioName = file.name;
								// _this.from.audioSize = file.size;
								// _this.from.audioTime = file.lastModified;

								// console.log(data.Location)
							}
							_this.uploadImageLoading = false;
						});
				}
			};
			// this.mainBtnStatus = 1;
			// this.barNum = 4;
		},
		// 添加视频
		addVideo(){
			if(!this.tid)return this.$message.error("请选择课堂")
			let input = document.createElement("input");
			input.type = "file";
			input.accept = "video/*";
			input.click();
			input.onchange = () => {
				this.progressData.uploadVideo = true;
				// this.uploadVideoLoading = true;
				let file = input.files[0];
				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" } }); //选择桶
				var _this = this;

				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) + '%');
							_this.progressData.value = parseInt((evt.loaded * 100) / evt.total)
						})
						.send(function (err, data) {
							if (err) {
								_this.$message.error("上传失败");
							} else {
								_this.$emit('saveVideo',{
										name: data.key,
										status: "success",
										uid: "1",
										url: data.Location,
								})
							}
							_this.progressData.uploadVideo = false;
							_this.progressData.value = 0;
							// _this.uploadVideoLoading = false;
						});
				}
			};
		},
		//添加云图
		addNephogram(){
			if(!this.tid)return this.$message.error("请选择课堂")
			if(this.uploadNephogramLoading)return this.$message.info("请稍等");
			this.uploadNephogramLoading = true;
			let _workText = ``;
			this.dataList.forEach((i) => {
						let _jsonObj = i.jsonData;
							_workText += `名称：${_jsonObj.name}\n分析内容：${_jsonObj.content?_jsonObj.content:''}\n\n`;
				});
			const _msg = `NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

## 参靠内容
${_workText}

## 要求
根据#参考内容 生成词云图数据,2-4个字的短语,选取与课程比较相关的词汇，禁止有重复的词汇,去掉【这里】【哪里】【谁知】之类无指示含义的词汇；格式参考## format example
输入完整的JSON数据,禁止有重复的词汇;
## format example
[
	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":2,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":3,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":2,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
	{"value":4,"name":"词汇","textStyle":{"color":"随机颜色"}}
]
`;
				const _uuid = uuidv4();
				let params = {
					model: "gpt-3.5-turbo",
					temperature: 0,
					max_tokens: 4096,
					top_p: 1,
					frequency_penalty: 0,
					presence_penalty: 0,
					messages: [{ role: "user", content: _msg }],
					uid: _uuid,
					mind_map_question: "",
					stream: false,
				};
				this.ajax
					.post("https://gpt4.cocorobo.cn/chat", params)
					.then((res) => {
						let _data = res.data.FunctionResponse.choices[0];
						let _jsonData = _data.message.content;
						_jsonData = _jsonData.replaceAll("```json", "").replaceAll("```", "");
						let _result = JSON.parse(_jsonData);
						console.log(_jsonData)
						this.$emit('saveNephogram',{
    tooltip: {
      show: false,
    },
    series: [
      {
        type: 'wordCloud',
        sizeRange: [14, 38],
        rotationRange: [0, 0],
				keepAspect:false,
				shape: 'circle',
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        width: '90%',
        height: '90%',
        // maskImage: maskImage,
				// sizeRange: [12, 60],
				rotationRange: [-90, 90],
        rotationStep: 45,
        // gridSize: 12,
        // autoSize: {
        //   enable: true,
        //   minSize: 12,
        // },
        // textStyle: {
        //   color: function () {
        //     var colors = [
        //       '#F6A878',
        //       '#FDCA71',
        //       '#D9E4E4',
        //       '#CAE1E6',
        //       '#8B9ECD',
        //       '#6CB9FB',
        //       '#5596F7',
        //       '#4778FE',
        //     ];
        //     return colors[parseInt(Math.random() * 8)];
        //   },
        // },
        data: _result,
        // [{name: "行政处罚"num: 1324}]
      },
    ],
  })
					})
					.catch((e) => {
						console.log(e);
						this.$message.error("生成词云图失败");
					})
					.finally((_) => {
						this.uploadNephogramLoading = false;
					});
			// this.$emit('saveNephogram',{
			// 		name: "测试",
			// 		status: "success",
			// 		uid: "1",
			// 		url: "测试",
			// })
		},

		// 删除图片
		delImage(key) {
			this.$confirm("确定删除该图片吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.$emit("delImage", key);
			});
		},
		// 删除视频
		delVideo(key){
			this.$confirm("确定删除该视频吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.$emit("delImage", key);
			}).catch(e=>{
				console.log("取消删除")
			});
		},
		//删除词云图
		delNephogram(key){
			this.$confirm("确定删除该词云图吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.$emit("delImage", key);
			}).catch(e=>{
				console.log("取消删除")
			});
		},
		changeShowMain(newValue) {
			this.showMain = newValue;
		},
		previewImg(url) {
			this.$hevueImgPreview(url);
		},
		previewVideo(url){
			this.$refs.previewVideoDialogRef.open(url)
			// this.$message.info(`预览:${url}`)
		},
		changeData() {
			if(!this.tid)return this.$message.error("请选择课堂")
			this.$emit("saveData");
		},
	},
	mounted() {
		// this.showNephogram();
	},
};
</script>

<style scoped>
.message {
	width: 100%;
	height: auto;
}
.imgTit {
	height: 40px;
	line-height: 40px;
}
.imgTit :first-child {
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	text-align: right;
}
.imgTit :last-child {
	font-family: PingFang SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: rgba(0, 0, 0, 0.4);
}
.baseInfoLeft {
	display: flex;
	width: 70%;
	flex-direction: column;
	/* justify-content: space-between; */
	margin-right: 10px;
}
.baseInfoLeft >>> .baseInfoLeftBot {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
}
.m-m-formItemBot {
	width: 30%;
	/* height: auto; */
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: left; */
	/* margin-bottom: 20px; */
}
.baseInfoRight {
	display: flex;
	flex: 1;
	flex-direction: column;
	/* justify-content: space-between; */
}

.m-header {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.m-h-icon {
	width: 16px;
	height: 16px;
	background: url("../../../../assets/icon/classroomObservation/right.svg")
		no-repeat;
	background-size: 100% 100%;
	margin-right: 5px;
	transition: 0.3s;
}

.m-h-icon-active {
	transform: rotate(90deg);
}

.m-h-title {
	font-size: 18px;
}

.m-main {
	width: calc(100% - 10px);
	height: auto;
	border-radius: 5px;
	background-color: #ffffff;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.m-m-form {
	display: flex;
	flex-wrap: wrap;
	width: 100%;

}

.m-m-formItem {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: left;
	margin-top: 10px;
	margin-right: 1.5%;
	/* margin-bottom: 10px; */
}

.m-m-fi-input {
	max-width: 100%;
}

.m-m-fi-label {
	font-size: 16px;
	display: flex;
	padding-bottom: 5px;
	/* justify-content: center; */
	/* align-items: center; */
	box-sizing: border-box;
	/* padding: 0 10px; */
	text-wrap: nowrap;
	min-width: fit-content;
}

.m-m-formImage {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.m-m-fi-imageList {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}

.m-m-fi-imageItem {
	width: auto;
	height: auto;
	background-color: rgba(238, 238, 238, 1);
	width: 140px;
	height: 100px;
	min-width: 110px !important;
	margin-right: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	margin-bottom: 10px;
}
.m-m-fi-imageItem > .itemUrl {
	width: 100%;
	height: 100%;
}

.m-m-fi-imageItem > span {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	background-image: url("../../../../assets/icon/classroomObservation/delFile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
	z-index: 9999;
	/* display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 2px 10px;
	color: #666666;
	font-size: 18px;
	background-color: #FFBBBB;
	cursor: pointer;
	border-radius: 100%;
	display: none; */
}

.m-m-fi-imageItem:hover > span {
	display: flex;
}

/* .m-m-fi-i-icon {
	width: 20px;
	height: 20px;
	background: url("../../../../assets/icon/classroomObservation/file.png")
		no-repeat;
	background-size: 100% 100%;
	margin-right: 5px;
} */

.m-m-fi-btn {
	width: auto;
	height: 35px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	font-size: 14px;
	border: solid 1px #c5c5c5;
	background-color: white;
	cursor: pointer;
	padding: 0 10px;
}

.fileList{
	width: 100%;
	position: relative;
	display: flex;
}

.fl_img{
	width: 50%;
	height: auto;
}

.fl_video{
	width: 21.8%;
	margin-left: 1.6%;
	height: auto;

}

.nephogramArea{
	width: 20%;
	height: auto;
}

.fl_nephogram{
	width: 20%;
	/* margin-left: 1.5%; */
	height: auto;
	margin-left: 1%;
	/* margin-top: -2%; */
}


.m_m_fi_progress{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* 加载 */
	cursor:wait !important;
	background-color: #00000099;
}

.m_m_fi_progress>div:nth-child(1){
	font-size: 20px;
	color: white;
}

.m_m_fi_progress>span:nth-child(2){
	font-size: 16px;
	color: #FFFFFF8C;
}

.m_m_fi_p_bar{
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0;
	background-color: #D8E3F7;
}

.m_m_fi_p_bar>div{
	background-color: #3975CE;
	max-width: 100%;
	height: 100%;
}

.m-m-fi-nephogramItem{
	width: 140px;
	height: 100px;
	background-color: rgba(238, 238, 238, 1);
	min-width: 140px;
	min-height: 100px;
	margin-right: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	margin-bottom: 10px;
}
.m-m-fi-nephogramItem> .itemUrl {
	width: 100%;
	height: 100%;
}

.m-m-fi-nephogramItem > span {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	background-image: url("../../../../assets/icon/classroomObservation/delFile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
	z-index: 99999;
	/* display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 2px 10px;
	color: #666666;
	font-size: 18px;
	background-color: #FFBBBB;
	cursor: pointer;
	border-radius: 100%;
	display: none; */
}

.m-m-fi-nephogramItem:hover > span {
	display: flex;
}
</style>