|
|
@@ -0,0 +1,922 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ :center="true"
|
|
|
+ :visible.sync="show"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal="false"
|
|
|
+ width="auto"
|
|
|
+ height="auto"
|
|
|
+ class="editBaseMessageDialog"
|
|
|
+ >
|
|
|
+ <div class="box">
|
|
|
+ <div class="b_head">
|
|
|
+ <span>编辑基本信息</span>
|
|
|
+ <img src="../../../../assets/icon/classroomObservation/close.svg" @click="close()">
|
|
|
+ </div>
|
|
|
+ <div class="b_main">
|
|
|
+ <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" style="position: relative;">
|
|
|
+ <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%;"
|
|
|
+ class="m_m_fi_inputDisabledIcon"
|
|
|
+ prefix-icon="none"
|
|
|
+ @change="changeData()"
|
|
|
+ placeholder="请选择授课时间"
|
|
|
+ >
|
|
|
+
|
|
|
+ </el-date-picker>
|
|
|
+ <i class="el-icon-date" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;"></i>
|
|
|
+ </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="addImage2()"
|
|
|
+ style="max-width:32%;"
|
|
|
+ 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:100%;"
|
|
|
+ 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> -->
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="180"
|
|
|
+ trigger="hover"
|
|
|
+ style="width: 140px"
|
|
|
+ v-if="(((imageList.videoList&&imageList.videoList.length<=0) || !imageList.videoList) && !progressData.uploadVideo)"
|
|
|
+ >
|
|
|
+ <div class="m_m_box">
|
|
|
+ <el-button-group style="width: 100%;display: flex;justify-content: center;">
|
|
|
+ <el-button size="small" @click="localUploadVideo()">本地上传</el-button>
|
|
|
+ <el-button size="small" @click="resourceUploadVideo()">资源库上传</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ slot="reference"
|
|
|
+ class="m-m-fi-imageItem"
|
|
|
+ @click.stop="addVideo()"
|
|
|
+ style="max-width:100%;"
|
|
|
+ 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>
|
|
|
+ </el-popover>
|
|
|
+
|
|
|
+ <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_videBtn">
|
|
|
+ <img v-if="!progressData.stop" :src="require('../../../../assets/icon/classroomObservation/stopIcon.png')" @click.stop="stopUploadVideo()">
|
|
|
+ <img v-if="progressData.stop" :src="require('../../../../assets/icon/classroomObservation/startIcon.png')" @click.stop="startUploadVideo()">
|
|
|
+ <img :src="require('../../../../assets/icon/classroomObservation/delFile.svg')" @click.stop="delUploadVideo()">
|
|
|
+ </div>
|
|
|
+ <div class="m_m_fi_progress">
|
|
|
+ <div>{{ progressData.value }}%</div>
|
|
|
+ <span v-if="!progressData.stop">上传中...</span>
|
|
|
+ <span v-else>已暂停</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>
|
|
|
+ <div class="b_bottom">
|
|
|
+ <el-button size="small" @click="close()">取消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="submit">确定修改</el-button>
|
|
|
+ </div>
|
|
|
+ <previewVideoDialog ref="previewVideoDialogRef" v-if="show"/>
|
|
|
+ <uploadFile v-if="progressData.uploadVideo && show" ref="uploadFileRef" @progressUpdate="videoProgressUpdate" @delUpload="videoDelUpload" @success="updateVideoSuccess" @startUpload="videoStartUpload"/>
|
|
|
+ <resourceLibraryDialog v-if="show" ref="resourceLibraryDialogRef" @addFile="resourceLibraryDialogAddFile"/>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import previewVideoDialog from '../components/previewVideoDialog.vue';
|
|
|
+import wordcloudEChart from '../components/wordcloudEChart.vue'
|
|
|
+import uploadFile from '../components/uploadFile.vue';
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import resourceLibraryDialog from '../components/resourceLibraryDialog.vue';
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ previewVideoDialog,
|
|
|
+ wordcloudEChart,
|
|
|
+ uploadFile,
|
|
|
+ resourceLibraryDialog
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ show: false,
|
|
|
+ uploadVideoLoading:false,
|
|
|
+ uploadImageLoading:false,
|
|
|
+ uploadNephogramLoading:false,
|
|
|
+ data: {
|
|
|
+ courseName: "",
|
|
|
+ teacherName: "",
|
|
|
+ time:"",
|
|
|
+ grade: "",
|
|
|
+ subject: "",
|
|
|
+ textbook:"",
|
|
|
+ studentNum: 0,
|
|
|
+ NephogramList:[],
|
|
|
+ },
|
|
|
+ gradeList: [
|
|
|
+ { value: "小学一年级", label: "小学一年级" },
|
|
|
+ { value: "小学二年级", label: "小学二年级" },
|
|
|
+ { value: "小学三年级", label: "小学三年级" },
|
|
|
+ { value: "小学四年级", label: "小学四年级" },
|
|
|
+ { value: "小学五年级", label: "小学五年级" },
|
|
|
+ { value: "小学六年级", label: "小学六年级" },
|
|
|
+ { 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: "其他" },
|
|
|
+ ],
|
|
|
+ imageList:{
|
|
|
+ fileList1:[],
|
|
|
+ fileList2:[],
|
|
|
+ fileList3:[],
|
|
|
+ },
|
|
|
+ progressData:{
|
|
|
+ stop:false,
|
|
|
+ uploadVideo:false,
|
|
|
+ value:0,
|
|
|
+ status:"",
|
|
|
+ key:"",
|
|
|
+ uploadid:"",
|
|
|
+ },
|
|
|
+ uploadFileObj:null,
|
|
|
+ loading:false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ open(data) {
|
|
|
+ this.loading = false;
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.show = false;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ submit(){
|
|
|
+ this.$message.info("确认修改")
|
|
|
+ this.close();
|
|
|
+ },
|
|
|
+ changeData(){
|
|
|
+ this.$message.info("更新数据")
|
|
|
+ },
|
|
|
+ //本地上传
|
|
|
+ localUploadVideo(){
|
|
|
+ this.$message.info("本地上传")
|
|
|
+ },
|
|
|
+ //资源库上传
|
|
|
+ resourceUploadVideo(){
|
|
|
+ this.$message.info("资源库上传")
|
|
|
+ },
|
|
|
+ //添加视频
|
|
|
+ addVideo(){
|
|
|
+ this.$message.info("添加视频")
|
|
|
+ },
|
|
|
+ //删除词云图
|
|
|
+ delNephogram(){
|
|
|
+ this.$message.info("删除词云图")
|
|
|
+ },
|
|
|
+ //生成词云图
|
|
|
+ addNephogram(){
|
|
|
+ this.$message.info("生成词云图")
|
|
|
+ },
|
|
|
+ //资源库添加文件
|
|
|
+ resourceLibraryDialogAddFile(file){
|
|
|
+ let _file = file[0];
|
|
|
+ if(!_file.file.endsWith(".mp4")){
|
|
|
+ this.$message.error("请选择mp4视频文件")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(_file)
|
|
|
+ this.$message.info("上传文件")
|
|
|
+ // this.$emit('saveVideo',{
|
|
|
+ // name: _file.name,
|
|
|
+ // status: "success",
|
|
|
+ // uid: _file.id,
|
|
|
+ // url: _file.file,
|
|
|
+ // })
|
|
|
+ // this.$message.success("上传成功")
|
|
|
+
|
|
|
+ // this.$confirm("是否提取视频音频并上传？","提示").then(()=>{
|
|
|
+ // this.getVideoVoice({url:_file.file});
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ videoProgressUpdate(data){
|
|
|
+ if(data.status=="processing"){
|
|
|
+ this.progressData.value = data.percent;
|
|
|
+ this.progressData.status = data.status;
|
|
|
+ }else if(data.status=="fail"){
|
|
|
+ this.progressData.value = data.percent;
|
|
|
+ this.progressData.status = data.status;
|
|
|
+ this.$message.error('上传发生错误，请点击继续上传')
|
|
|
+ this.$refs.uploadFileRef.stopUpload();
|
|
|
+ }else if(data.status=="success"){
|
|
|
+ this.progressData.value = data.percent;
|
|
|
+ this.progressData.status = data.status;
|
|
|
+ this.$refs.uploadFileRef.stopUpload();
|
|
|
+ }else if(data.status=="error"){
|
|
|
+ this.progressData.stop = true;
|
|
|
+ this.progressData.status = data.status;
|
|
|
+ this.$refs.uploadFileRef.stopUpload();
|
|
|
+ this.$message.error('上传发生错误，请重新上传')
|
|
|
+ }
|
|
|
+ console.log(this.progressData)
|
|
|
+ },
|
|
|
+ videoDelUpload(res){
|
|
|
+ this.progressData.uploadVideo = false;
|
|
|
+ this.progressData.uploadid = "";
|
|
|
+ this.progressData.key = "";
|
|
|
+ this.progressData.status = "";
|
|
|
+ this.progressData.stop = false;
|
|
|
+ this.progressData.value = 0;
|
|
|
+ this.$message.success("已删除视频");
|
|
|
+ },
|
|
|
+ videoStartUpload({key,uploadid}){
|
|
|
+ this.progressData.uploadid = uploadid;
|
|
|
+ this.progressData.key = key;
|
|
|
+ this.progressData.status = "start"
|
|
|
+ },
|
|
|
+ updateVideoSuccess(res){
|
|
|
+ if(!res.data)return;
|
|
|
+ this.progressData.uploadVideo = false;
|
|
|
+ this.progressData.stop = false;
|
|
|
+ this.progressData.uploadid = "";
|
|
|
+ this.progressData.status = "";
|
|
|
+ this.progressData.value = 0;
|
|
|
+ let {data} = res;
|
|
|
+ this.$refs.uploadFileRef.file = null;
|
|
|
+ console.log(data)
|
|
|
+ // this.$emit('saveVideo',{
|
|
|
+ // name: data.Key,
|
|
|
+ // status: "success",
|
|
|
+ // uid: "qgt",
|
|
|
+ // url: data.Location,
|
|
|
+ // })
|
|
|
+ // this.$message.success("上传成功");
|
|
|
+ // // this.uploadFileObj = null;
|
|
|
+ // this.$confirm("是否提取视频音频并上传？","提示").then(()=>{
|
|
|
+ // this.getVideoVoice({file:this.uploadFileObj});
|
|
|
+ // this.uploadFileObj = null;
|
|
|
+ // }).catch(err=>{
|
|
|
+ // this.uploadFileObj = null;
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ //上传课堂图片
|
|
|
+ addImage2(){
|
|
|
+ this.$message.info("上传课堂图片")
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "file";
|
|
|
+ // input.accept = "image/*";
|
|
|
+ // input.multiple = true;
|
|
|
+ // input.click();
|
|
|
+
|
|
|
+
|
|
|
+ // input.onchange = () => {
|
|
|
+ // this.uploadImageLoading = true;
|
|
|
+ // let promise =[];
|
|
|
+ // for(let i=0;i<input.files.length;i++){
|
|
|
+ // promise.push(this.uploadFile(input.files[i]));
|
|
|
+ // }
|
|
|
+ // Promise.all(promise).then(res=>{
|
|
|
+ // this.$emit("saveImage2",res);
|
|
|
+ // this.uploadImageLoading = false;
|
|
|
+ // })
|
|
|
+ // };
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.editBaseMessageDialog >>> .el-dialog {
|
|
|
+ width: 1200px !important;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.editBaseMessageDialog >>> .el-dialog__body {
|
|
|
+ width: 1200px !important;
|
|
|
+ height: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.editBaseMessageDialog >>> .el-dialog__header {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.box{
|
|
|
+ width:1200px;
|
|
|
+ height:500px;
|
|
|
+ background:#FAFAFA;
|
|
|
+ border-radius:15px;
|
|
|
+ box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.b_head{
|
|
|
+ width:100%;
|
|
|
+ height:50px;
|
|
|
+ border-radius:15px 15px 0 0;
|
|
|
+ background:#fff;
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ justify-content:space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.b_head>span{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.b_head>img{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.b_main{
|
|
|
+ width:100%;
|
|
|
+ height:calc(100% - 50px - 70px);
|
|
|
+ background:#FAFAFA;
|
|
|
+ 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_inputDisabledIcon>>> .el-input__prefix{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.m_m_fi_inputDisabledIcon>>>.el-input__inner{
|
|
|
+ padding-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: dashed 1px #DCDCDC;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: dashed 1px #DCDCDC;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.m_m_fi_videBtn{
|
|
|
+ position: absolute;
|
|
|
+ right: 4px;
|
|
|
+ top: 4px;
|
|
|
+ width:auto;
|
|
|
+ height: 20px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ /* display: none; */
|
|
|
+ z-index: 99999;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.m_m_fi_videBtn>img{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left:10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.b_bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+</style>
|
SanHQin
