pbl-teacher-table/src/components/pages/classroomObservation/dialog/batchCreationClassDialog.vue

<template>
  <div class="batchCreationClassDialog">
    <el-dialog
      :visible.sync="show"
      width="100%"
      height="100%"
      fullscreen
      :modal="false"
      :close-on-click-modal="true"
      :show-close="false"
    >
      <div class="box">
        <div class="b_back">
          <div class="b_b_left" @click="close()">
            <img src="../../../../assets/icon/classroomObservation/right.svg" />
            <span>返回</span>
          </div>
          <div class="b_b_right">
            <el-button type="primary" size="small" @click="uploadFile"
              >上传文件</el-button
            >
          </div>
        </div>
        <div class="b_head">
          <span>已上传的课堂实录</span>
        </div>
        <div class="b_nav">
          <div class="b_n_left">
            <span
              :class="{ b_n_l_active: selectStatus == item.value }"
              v-for="item in statusList"
              :key="item.value"
              @click="changeStatus(item.value)"
              >{{ item.label }}</span
            >
          </div>
          <div class="b_n_right">
            <span>总计3个</span>
          </div>
        </div>
        <div class="b_bottom">
          <div class="b_b_operation">
            <div class="b_b_o_left">
              <span>当前进度 10/12</span>
            </div>
            <div class="b_b_o_right">
              <div><el-checkbox v-model="selectAll">全选</el-checkbox></div>
              <span>
                <img
                  src="../../../../assets/icon/classroomObservation/del2.svg"
                />
              </span>
            </div>
          </div>
          <div class="b_b_list">
            <batchClassCard v-for="item in 10" :key="item" />
          </div>
        </div>
      </div>
      <uploadFileToCreateClassDialog
        ref="uploadFileToCreateClassDialogRef"
        @success="uploadFileSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
import batchClassCard from "../newComponents/batchClassCard.vue";
import uploadFileToCreateClassDialog from "./uploadFileToCreateClassDialog.vue";
import { v4 as uuidv4 } from "uuid";
export default {
  components: {
    batchClassCard,
    uploadFileToCreateClassDialog
  },
  data() {
    return {
      statusList: [
        { label: "全部", value: "0" },
        { label: "已完成", value: "1" },
        { label: "处理中", value: "2" },
        { label: "等待处理", value: "3" }
      ],
      userId: this.$route.query["userid"],
      selectStatus: "0",
      show: false,
      selectAll: false,
      dataList: [
        {
          id: "1",
          name: "文件名称文件名称文件名称",
          create_at: "2025-05-07 16.05.03",
          remarks: "备注1",
          jsonData: {
            baseMessage: {
              courseName: "",
              teacherName: "",
              time: "",
              grade: "",
              subject: "",
              textbook: "",
              studentNum: 0,
              imageList: {
                fileList1: [],
                fileList2: [],
                fileList3: [],
                NephogramList: [],
                videoList: []
              }
            },
            tagList: [
              { value: 0, name: "通用课堂分析", loading: false },
              { value: 1, name: "学科课堂分析", loading: false },
              { value: 2, name: "扩展分析", loading: false }
            ],
            steps: [
              {
                type: "uploadFile",
                text: "上传文件",
                status: "0",
                progress: "0"
              },
              {
                type: "transcription",
                text: "文本转录",
                status: "0",
                progress: "0"
              },
              {
                type: "automaticCoding",
                text: "自动编码",
                status: "0",
                progress: "0"
              },
              {
                type: "generateReport",
                text: "生成报告",
                status: "0",

                progress: "0"
              }
            ],
            analysisList:[],
            fileData:{
              name: "文件名称",
              url: "",
              type: "text/plain",
              size: "10kb"
            },
            automaticCoding:false,
          }
        }
      ]
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    init() {},
    changeStatus(newValue) {
      this.selectStatus = newValue;
    },
    uploadFile() {
      this.$refs.uploadFileToCreateClassDialogRef.open();
    },
    async uploadFileSuccess(data) {
      this.$refs.uploadFileToCreateClassDialogRef.close();
      console.log("上传文件成功", data);
      let { fileList, automaticCoding, analysisTemplate } = data;
      this.loading = true;

      let fileDataList =  fileList.map(i => i.successData);

      let _tempData = await this.getTemplateData(analysisTemplate[1]);

      let _analysisList = JSON.parse(_tempData.tips);
      let tagList = _analysisList.find(i => i.isOtherData);


      if (!tagList) {
        tagList = [
          { value: 0, name: "通用课堂分析", loading: false },
          { value: 1, name: "学科课堂分析", loading: false },
          { value: 2, name: "扩展分析", loading: false }
        ];
      }

      let batch = uuidv4();

      _analysisList = _analysisList.fileList(i=>(!i.isOtherData && i.jsonData.name!="词频词汇分析"));

      fileDataList.forEach(i=>{



        let data = {
          id: "1",
          name: i.name,
          create_at: "2025-05-07 16.05.03",
          remarks: "备注",
          batch:batch,
          jsonData: {
            file_ids:"",
            baseMessage: {
              courseName: i.name,
              teacherName: "",
              time: "",
              grade: "",
              subject: "",
              textbook: "",
              studentNum: 0,
              imageList: {
                fileList:[],
                fileList1: [],
                fileList2: [],
                fileList3: [],
                NephogramList: [],
                videoList: []
              }
            },
            tagList: tagList,
            steps: [],
            analysisList:_analysisList,
            fileData:i,
            automaticCoding:automaticCoding,
          }
        }

        if(i.type == "text/plain"){
          data.jsonData.steps= [
            {
              type: "uploadFile",
              text: "上传文件",
              status: "1",
            },
            {
              type: "transcription",
              text: "文本转录",
              status: "0",
              progress: "0"
            },
            {
              type: "getFileIds",
              text: "获取文件fileid",
              status: "0",
            },
            {
              type: "generateReport",
              text: "生成报告",
              status: "0",
              progress: "0"
            }
          ]
        }else if(i.type == "audio/wav"){
          data.jsonData.baseMessage.imageList.fileList = [{
            name: i.name,
            status: "success",
					  url: i.url,
            uid:"1"
          }]
          data.jsonData.steps= [
          {
              type: "uploadFile",
              text: "上传文件",
              status: "1",
            },
            {
              type: "transcription",
              text: "文本转录",
              status: "0",
              progress: "0"
            },
            {
              type: "automaticCoding",
              text: "自动编码",
              status: "0",
              progress: "0"
            },
            {
              type: "getFileIds",
              text: "获取文件fileid",
              status: "0",
            },
            {
              type: "generateReport",
              text: "生成报告",
              status: "0",
              progress: "0"
            }
          ]
        }else if(i.type == "video/mp4"){
          data.jsonData.baseMessage.imageList.videoList = [{
            name: i.name,
            status: "success",
					  url: i.url,
            uid:"1"
          }]
          data.jsonData.steps= [{
              type: "uploadFile",
              text: "上传文件",
              status: "1",
            },
            {
              type:"getVideoVoice",
              text:"视频提取音频",
              status:"0",
              progress: "0"
            },
            {
              type: "transcription",
              text: "文本转录",
              status: "0",
              progress: "0"
            },
            {
              type: "automaticCoding",
              text: "自动编码",
              status: "0",
              progress: "0"
            },
            {
              type: "getFileIds",
              text: "获取文件fileid",
              status: "0",
            },
            {
              type: "generateReport",
              text: "生成报告",
              status: "0",
              progress: "0"
            }]
        }
      })

    },
    getTemplateData(tid) {
      return new Promise(resolve => {
        let params = {
          uid: this.userId,
          cid: tid,
          st: 0
        };
        this.ajax
          .get(this.$store.state.api + "selectClassroomTemplateDetail", params)
          .then(res => {
            let _data = res.data[0][0];
            resolve(_data);
          });
      });
    }
  },
  mounted() {}
};
</script>

<style scoped>
.batchCreationClassDialog {
  width: 100vw;
  height: 100vh;
}

.batchCreationClassDialog >>> .el-dialog__header,
.batchCreationClassDialog >>> .el-dialog__footer {
  display: none; /* 隐藏头部和底部 */
}

.batchCreationClassDialog >>> .el-dialog__body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  display: flex;
  justify-content: center;
}

.box {
  width: 70%;
  min-width: 500px;
  height: fit-content;
  box-sizing: border-box;
  border-left: solid 1px #e1e1e1;
  border-right: solid 1px #e1e1e1;
  padding: 0 40px;
}

.b_back {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.b_b_left {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.b_b_left > img {
  width: 30px;
  height: 30px;
  transform: rotate(180deg);
}

.b_b_left > span {
  font-size: 20px;
  font-weight: bold;
  margin-left: 5px;
}

.b_head {
  width: 100%;
  height: 50px;
  margin: 20px 0 10px 0;
  box-sizing: border-box;
}

.b_head > span {
  font-size: 26px;
  font-weight: bold;
  color: #000;
}

.b_nav {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: solid 1px rgba(150, 155, 163, 1);
}

.b_n_left {
  width: calc(100% - 60px);
  height: 100%;
  display: flex;
  align-items: center;
}

.b_n_left > span {
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
  font-size: 16px;
}

.b_n_left > span:hover {
  color: rgba(5, 96, 253, 1);
}

.b_n_left > .b_n_l_active {
  color: rgba(5, 96, 253, 1);
}

.b_n_left > .b_n_l_active::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 4px;
  border-radius: 4px;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(5, 96, 253, 1);
}

.b_n_right {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(150, 155, 163, 1);
  font-size: 16px;
}

.b_bottom {
  width: 100%;
  height: auto;
  /* height: calc(100% - 200px); */
}

.b_b_operation {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.b_b_o_left {
  width: calc(100% - 100px);
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.b_b_o_right {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.b_b_o_right > div {
  margin-right: 10px;
  font-size: 16px;
}

.b_b_o_right > div >>> .el-checkbox {
  display: flex;
  align-items: center;
}

.b_b_o_right > span {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.b_b_o_right > span > img {
  width: 100%;
  height: 100%;
}

.b_b_list {
  width: 100%;
  height: auto;
  padding-bottom: 40px;
}
</style>