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 @click="test">总计{{ dataList.length }}个</span>
          </div>
        </div>
        <div class="b_bottom">
          <div class="b_b_operation">
            <div class="b_b_o_left">
              <span
                >当前进度 {{ progress }}/{{
                  dataList.filter(
                    i =>
                      selectStatus == "99" ||
                      statusList
                        .find(i => i.value == selectStatus)
                        .allow.includes(i.status)
                  ).length
                }}</span
              >
            </div>
            <div class="b_b_o_right">
              <div>
                <el-checkbox v-model="selectAll" :indeterminate="indeterminate"
                  >全选</el-checkbox
                >
              </div>
              <span>
                <span @click="exportDoc" style="color:#409EFF"
                  >批量导出doc</span
                >
              </span>
              <span>
                <span @click="regenerateTheReport" style="color:#409EFF"
                  >批量重新生成报告</span
                >
              </span>
              <span>
                <span @click="delSelectBtn" style="color: red;">删除</span>
                <!-- <img
                  @click="delSelectBtn"
                  src="../../../../assets/icon/classroomObservation/del2.svg"
                /> -->
              </span>
            </div>
          </div>
          <div class="b_b_list">
            <batchClassCard
              v-for="item in dataList"
              :data="item"
              :isSelect="selectList.includes(item.id)"
              :key="item.id"
              v-show="
                selectStatus === '99' ||
                  statusList
                    .find(i => i.value === selectStatus)
                    .allow.includes(item.status)
              "
              @changeChecked="changeCardChecked"
              @editBaseMessage="editBaseMessage"
              @changeData="changeData"
              @taskBtn="taskBtn"
              @goToEdit="goToEdit"
            />
          </div>
        </div>
      </div>
      <uploadFileToCreateClassDialog
        ref="uploadFileToCreateClassDialogRef"
        @success="uploadFileSuccess"
      />
      <editBaseMessageDialog
        ref="editBaseMessageDialogRef"
        @success="editBaseMessageSuccess"
      />
    </el-dialog>
    <!-- 录音转文字 -->
    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
      ref="iframeRef"
      v-show="false"
    ></iframe>
  </div>
</template>

<script>
import batchClassCard from "../newComponents/batchClassCard.vue";
import uploadFileToCreateClassDialog from "./uploadFileToCreateClassDialog.vue";
import editBaseMessageDialog from "./editBaseMessageDialog.vue";
import { v4 as uuidv4 } from "uuid";
import { toolMixin } from "../tools/mixin";
import JSZip from "jszip";
export default {
  mixins: [toolMixin],
  components: {
    batchClassCard,
    uploadFileToCreateClassDialog,
    editBaseMessageDialog
  },
  data() {
    return {
      statusList: [
        { label: "全部", value: "99", allow: [] },
        { label: "已完成", value: "2", allow: ["2"] },
        { label: "处理中", value: "1", allow: ["1"] },
        { label: "等待处理", value: "0", allow: ["0"] },
        { label: "待开始", value: "3", allow: ["3"] }
      ],
      userId: this.$route.query["userid"],
      selectStatus: "99",
      show: false,
      selectList: [],
      dataList: [],
      nowDoTaskId: [],
      dialogTagDataList: []
    };
  },
  computed: {
    selectAll: {
      get() {
        let _result = false;

        let _data = this.dataList.filter(
          i =>
            this.selectStatus === "99" ||
            this.statusList
              .find(i2 => i2.value === this.selectStatus)
              .allow.includes(i.status)
        );

        if (_data.length > 0 && _data.length === this.selectList.length) {
          _result = true;
        }
        return _result;
      },
      set(value) {
        if (value) {
          this.selectList = this.dataList
            .filter(
              i =>
                this.selectStatus === "99" ||
                this.statusList
                  .find(i2 => i2.value === this.selectStatus)
                  .allow.includes(i.status)
            )
            .map(i => i.id);
          this.$forceUpdate();
        } else {
          this.selectList = [];
        }
      }
    },
    indeterminate() {
      let _result = false;

      let _data = this.dataList.filter(
        i =>
          this.selectStatus === "99" ||
          this.statusList
            .find(i2 => i2.value === this.selectStatus)
            .allow.includes(i.status)
      );

      if (_data.length > this.selectList.length && this.selectList.length > 0) {
        _result = true;
      }

      return _result;
    },
    progress() {
      return this.dataList.filter(
        i =>
          i.status == "2" &&
          (this.selectStatus == "99" ||
            this.statusList
              .find(i2 => i2.value == this.selectStatus)
              .allow.includes(i.status))
      ).length;
    }
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    init() {},
    changeStatus(newValue) {
      this.selectStatus = newValue;
      this.selectList = [];
    },
    uploadFile() {
      this.$refs.uploadFileToCreateClassDialogRef.open();
    },
    //批量上传文件成功
    async uploadFileSuccess(data) {
      this.$refs.uploadFileToCreateClassDialogRef.close();
      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 }
        ];
      } else {
        tagList = tagList.dialogTagList;
      }

      let batch = uuidv4();

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

      _analysisList.forEach(i => {
        if (i.jsonData.spectrogramData) {
          delete i.jsonData.spectrogramData;
        }
      });
      let promiseList = [];

      fileDataList.forEach(i => {
        let data = {
          id: uuidv4(),
          create_at: "2025-05-07 16.05.03",
          remarks: "",
          batch: batch,
          status: "0",
          createId: "",
          jsonData: {
            file_ids: "",
            baseMessage: {
              courseName: i.name,
              teacherName: "老师",
              time: this.getFileLastUpdateTime(i.fileObj),
              grade: "小学五年级",
              subject: "科学",
              textbook: "教科版",
              studentNum: 45,
              imageList: {
                fileList: [],
                fileList1: [],
                fileList2: [],
                fileList3: [],
                name: "课堂记录",
                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"
            }
          ];
          if (data.jsonData.automaticCoding) {
            data.jsonData.steps.push({
              type: "automaticCoding",
              text: "自动编码"
            });
          }

          data.jsonData.steps.push(
            ...[
              {
                type: "getFileIds",
                text: "获取文件fileid",
                status: "0"
              },
              {
                type: "getWordCloudMap",
                text: "获取词云图",
                status: "0"
              },
              {
                type: "generateReport",
                text: "生成报告",
                status: "0",
                progress: "0",
                num: _analysisList.length,
                successNum: 0
              },
              {
                type: "createClass",
                text: "创建课堂",
                status: "0",
                progress: "0"
              }
            ]
          );
        } else if (
          ["audio/wav", "audio/x-m4a", "audio/mpeg"].includes(i.type)
        ) {
          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"
            }
          ];

          if (data.jsonData.automaticCoding) {
            data.jsonData.steps.push({
              type: "automaticCoding",
              text: "自动编码",
              status: "0",
              progress: "0"
            });
          }

          data.jsonData.steps.push(
            ...[
              {
                type: "getFileIds",
                text: "获取文件fileid",
                status: "0"
              },
              {
                type: "getWordCloudMap",
                text: "获取词云图",
                status: "0"
              },
              {
                type: "generateReport",
                text: "生成报告",
                status: "0",
                progress: "0",
                num: _analysisList.length,
                successNum: 0
              },
              {
                type: "createClass",
                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"
            }
          ];
          if (data.jsonData.automaticCoding) {
            data.jsonData.steps.push({
              type: "automaticCoding",
              text: "自动编码",
              status: "0",
              progress: "0"
            });
          }
          data.jsonData.steps.push(
            ...[
              {
                type: "getFileIds",
                text: "获取文件fileid",
                status: "0"
              },
              {
                type: "getWordCloudMap",
                text: "获取词云图",
                status: "0"
              },
              {
                type: "generateReport",
                text: "生成报告",
                status: "0",
                progress: "0",
                num: _analysisList.length,
                successNum: 0
              },
              {
                type: "createClass",
                text: "创建课堂",
                status: "0",
                progress: "0"
              }
            ]
          );
        }

        promiseList.push(
          new Promise((resolve, reject) => {
            // 本地保存fileObj
            const fileObj = data.jsonData.fileData.fileObj;
            delete data.jsonData.fileData.fileObj;
            const params = [
              {
                remarks: data.remarks,
                status: "3",
                json: JSON.stringify(data.jsonData),
                batch: data.batch,
                createId: data.createId,
                userId: this.userId
              }
            ];
            console.log(params);
            this.ajax
              .post(this.$store.state.api + "insert_classroomTask", params)
              .then(res => {
                const _data = res.data[0][0];
                if (_data.id) {
                  data.jsonData.fileData.fileObj = fileObj;
                  data.id = _data.id;
                  this.dataList.unshift(data);
                }
                resolve();
              })
              .catch(err => {
                console.error(err);
                reject(err);
              });
          })
        );
      });
      console.log(promiseList);
      Promise.all(promiseList)
        .then(res => {
          this.$message.success("创建成功");
          if (!this.dataList.find(i => i.status == 1)) {
            this.startTask(this.dataList.find(i => i.status === "0").id);
          }
        })
        .catch(err => {
          console.log("创建出错", err);
        });
    },
    //获取模板的数据
    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);
          });
      });
    },
    changeCardChecked({ type = 0, id }) {
      if (type === 0 && !this.selectList.includes(id)) {
        this.selectList.push(id);
      } else if (type === 1 && this.selectList.push(id)) {
        this.selectList = this.selectList.filter(i => i != id);
      }
    },
    //修改课堂的baseMessage按钮
    editBaseMessage(id) {
      let _data = this.dataList.find(i => i.id === id);
      if (_data) {
        this.$refs.editBaseMessageDialogRef.open({
          editId: _data.id,
          message: _data.jsonData.baseMessage
        });
      } else {
        this.$message.error("未查询到该数据");
      }
    },
    //修改课堂的baseMessage
    editBaseMessageSuccess({ editId, message }) {
      if (editId) {
        let _editorBarData = null;
        let _transcriptionData = null;
        if (
          this.dataList.find(i => i.id === editId).jsonData.baseMessage
            .editorBarData
        ) {
          _editorBarData = this.dataList.find(i => i.id === editId).jsonData
            .baseMessage.editorBarData;
        }

        if (
          this.dataList.find(i => i.id === editId).jsonData.baseMessage
            .transcriptionData
        ) {
          _transcriptionData = this.dataList.find(i => i.id === editId).jsonData
            .baseMessage.transcriptionData;
        }
        this.dataList.find(i => i.id === editId).jsonData.baseMessage = message;
        if (_editorBarData) {
          this.dataList.find(
            i => i.id === editId
          ).jsonData.baseMessage.editorBarData = _editorBarData;
        }
        if (_transcriptionData) {
          this.dataList.find(
            i => i.id === editId
          ).jsonData.baseMessage.transcriptionData = _transcriptionData;
        }
        this.$forceUpdate();
        this.$refs.editBaseMessageDialogRef.close();
        this.updateTask(editId);
      }
    },
    // 删除选择的数据
    delSelectBtn() {
      let _delList = this.dataList.filter(
        i =>
          this.selectList.includes(i.id) &&
          (this.selectStatus === "99" ||
            this.statusList
              .find(i2 => i2.value === this.selectStatus)
              .allow.includes(i.status))
      );

      if (_delList.length <= 0) return this.$message.info("请先选择列表");
      this.$confirm("您确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 确定删除
          let params = [
            {
              idList: _delList.map(i => i.id).join(","),
              userId: this.userId
            }
          ];

          this.ajax
            .post(this.$store.state.api + "delete_classroomTask", params)
            .then(res => {
              if (res.data > 0) {
                this.$message.success("删除成功");
                this.dataList = this.dataList.filter(
                  i => !_delList.find(del => del.id === i.id)
                );
                this.selectList = [];
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          // 取消删除
        });
    },
    //获取任务列表
    getTaskList() {
      let params = {
        userId: this.userId
      };
      this.ajax
        .get(this.$store.state.api + "select_classroomTask", params)
        .then(res => {
          let _data = res.data[0];
          if (_data.length > 0) {
            _data.forEach(i => (i.jsonData = JSON.parse(i.jsonData)));
            this.dataList = _data;
          }
        });
    },
    //获取所有的模块分析
    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 => {
          console.log(e);
          this.$message.error("获取模块分析列表失败");
        });
    },
    updateTask(id) {
      return new Promise((resolve, reject) => {
        let _data = this.dataList.find(i => i.id === id);
        if (_data) {
          const dataCopy = JSON.parse(JSON.stringify(_data));
          if (dataCopy.jsonData.fileData.fileObj) {
            delete dataCopy.jsonData.fileData.fileObj;
          }
          if (
            dataCopy.jsonData.baseMessage.editorBarData &&
            dataCopy.jsonData.baseMessage.editorBarData.content
          ) {
            delete dataCopy.jsonData.baseMessage.editorBarData.content;
          }
          if (
            dataCopy.jsonData.baseMessage.editorBarData &&
            dataCopy.jsonData.baseMessage.editorBarData.tableList
          ) {
            delete dataCopy.jsonData.baseMessage.editorBarData.tableList;
          }

          if (dataCopy.jsonData.errorMessage) {
            delete dataCopy.jsonData.errorMessage;
          }

          console.log("dataCopy", dataCopy);
          let params = [
            {
              id: dataCopy.id,
              userId: this.userId,
              remarks: dataCopy.remarks,
              status: ["0", "1"].includes(dataCopy.status)
                ? "3"
                : dataCopy.status,
              json: JSON.stringify(dataCopy.jsonData),
              createId: dataCopy.createId,
              batch: dataCopy.batch
            }
          ];

          this.ajax
            .post(this.$store.state.api + "update_classroomTask", params)
            .then(res => {
              if (res.data == 1) {
                console.log("修改任务成功");
                resolve();
              } else {
                reject();
                this.$message.error("修改任务失败");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("修改任务失败");
              reject();
            });
        }
      });
    },
    changeData({ field, data }) {
      let _index = this.dataList.findIndex(i => i.id === data.id);
      if (_index != -1) {
        if (this.dataList[_index][field] != data[field]) {
          this.dataList[_index][field] = data[field];
          this.updateTask(this.dataList[_index].id);
        }
      }
    },
    taskBtn(obj) {
      let { type, id } = obj;
      if (type === "startTask" && id) {
        // this.startTask(id);
        if (
          this.dataList.some(i => i.status === "1") &&
          this.dataList.find(i => i.id === id).status === "0"
        ) {
          this.$confirm(
            "您确定要开始该任务嘛？其他已开始的任务会暂停。",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              this.startTask(id);
            })
            .catch(() => {
              console.log("不暂停");
            });
        } else {
          this.startTask(id);
        }
      } else if (type === "stopTask" && id) {
        this.$confirm("您确定要停止该任务吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.stopTask(id);
          })
          .catch(() => {
            console.log("不暂停");
          });
      } else if (type === "pauseTask" && id) {
        this.$confirm("您确定要暂停该任务吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.pauseTask(id);
          })
          .catch(() => {
            console.log("不暂停");
          });
      } else if (type === "regenerateTheReport" && id) {
        this.$confirm("您确定要重新生成任报告吗？。", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.dataList.find(i => i.id === id).status = "0";
            this.dataList
              .find(i => i.id === id)
              .jsonData.steps.find(i => i.type == "generateReport").status =
              "0";
              this.dataList.find(i => i.id === id).jsonData.steps.find(i => i.type == "generateReport").successNum = 0;
              this.dataList
              .find(i => i.id === id)
              .jsonData.steps.find(i => i.type == "createClass").status =
              "0";
            if (!this.dataList.some(i => i.status == "1")) {
              this.startTask(id);
            }
          })
          .catch(() => {
            console.log("不暂停");
          });
      }
    },
    async startTask(id) {
      let _isStartTaskIndex = this.dataList.findIndex(i => i.status === "1");
      let _needStartTaskIndex = this.dataList.findIndex(i => i.id === id);
      if (_isStartTaskIndex === -1) {
        //没有任务在进行，直接开始处理
        this.dataList[_needStartTaskIndex].status = "1"; //处理中
      } else if (
        this.dataList[_needStartTaskIndex].status === "3" &&
        _isStartTaskIndex !== -1
      ) {
        //有任务在进行，且这个任务是从待开始状态到开始状态，等待处理
        this.dataList[_needStartTaskIndex].status = "0";
      } else if (
        _isStartTaskIndex !== -1 &&
        this.dataList[_needStartTaskIndex].status === "0"
      ) {
        //有任务在进行，且这个任务是从等待状态到开始状态，停止现任务，开始新任务
        this.nowDoTaskId = this.nowDoTaskId.filter(
          i => i !== this.dataList[_isStartTaskIndex].id
        );
        this.dataList[_isStartTaskIndex].status = "0"; //
        this.dataList[_needStartTaskIndex].status = "1"; //处理中
      }

      if (
        !this.nowDoTaskId.includes(this.dataList.find(i => i.status === "1").id)
      ) {
        let _startData = JSON.parse(
          JSON.stringify(this.dataList.find(i => i.status === "1"))
        );

        if (
          this.dataList.find(i => i.id === _startData.id).jsonData.fileData
            .fileObj
        ) {
          _startData.jsonData.fileData.fileObj = this.dataList.find(
            i => i.id === _startData.id
          ).jsonData.fileData.fileObj;
        }
        this.nowDoTaskId.push(_startData.id);
        let _stepList = _startData.jsonData.steps;
        for (let i = 0; i < _stepList.length; i++) {
          //按顺序处理任务
          let _step = _stepList[i];
          console.log(_step);
          if (!this.nowDoTaskId.includes(_startData.id)){
            if (
                this.dataList.find(i => i.id === _startData.id).status == "1"
              ) {
                this.dataList.find(i => i.id === _startData.id).status = "0";
                if (this.dataList.find(i => i.status == "0")) {
                  let id = this.dataList.find(i => i.status == "0").id;
                  this.startTask(id);
                }
              }
            break;
          };
          if (_step.status == "1") {
            if (_step.type == "createClass") {
              if (
                this.dataList.find(i => i.id === _startData.id).status == "1"
              ) {
                this.dataList.find(i => i.id === _startData.id).status = "2";
                this.updateTask(_startData.id);
                if (this.dataList.find(i => i.status == "0")) {
                  let id = this.dataList.find(i => i.status == "0").id;
                  this.startTask(id);
                }
              }
              break;
            } else {
              continue;
            }
          }
          if (_step.type === "uploadFile") continue;
          if (_step.type === "getVideoVoice") {
            //视频提取音频
            _stepList[i].status = "2";
            _stepList[i].startTime =
              new Date().toLocaleDateString().replaceAll("/", "-") +
              " " +
              new Date().toLocaleTimeString();

            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.$forceUpdate()
            let _fileData = _startData.jsonData.fileData;
            let audioFile = await this.getVideoToVoiceAndUploadMixin(_fileData);
            if (audioFile.data == 3) {
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.errorMessage = {
                content: "视频提取音频失败",
                err: audioFile.err
              };

              this.dataList.find(i => i.id === _startData.id).status = "3";
              if (this.dataList.find(i => i.status == "0")) {
                let id = this.dataList.find(i => i.status == "0").id;
                this.startTask(id);
              }
              break;
            }
            if (!this.nowDoTaskId.includes(_startData.id)) break;
            _startData.jsonData.fileData.videoUrl = _fileData.url;
            _startData.jsonData.fileData.fileObj = audioFile.fileObj;
            _startData.jsonData.fileData.url = audioFile.audioUrl.Location;
            _startData.jsonData.baseMessage.imageList.fileList = [
              {
                name: _fileData.name,
                status: "success",
                url: audioFile.Location,
                uid: "1"
              }
            ];
            _stepList[i].status = "1";
            this.dataList.find(i => i.id === _startData.id).jsonData =
              _startData.jsonData;
            this.updateTask(_startData.id);
            _startData.jsonData = JSON.parse(
              JSON.stringify(
                this.dataList.find(i => i.id === _startData.id).jsonData
              )
            );
            _startData.jsonData.fileData.fileObj = audioFile.fileObj; //防止文件因为json失效
            console.log("data👉", JSON.parse(JSON.stringify(_startData)));
            console.log(`${_startData.id}:已完成视频转音频`);
          } else if (_step.type === "transcription") {
            //文本转录
            const fileData = _startData.jsonData.fileData;
            if (fileData.type === "text/plain") {
              //txt文件
              _stepList[i].status = "2";
              _stepList[i].startTime =
                new Date().toLocaleDateString().replaceAll("/", "-") +
                " " +
                new Date().toLocaleTimeString();

              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.$forceUpdate()
              let { editorBarData } = await this.getTextContentMixin(fileData);
              if (!this.nowDoTaskId.includes(_startData.id)) break;
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.baseMessage.editorBarData = editorBarData;
              _stepList[i].status = "1";
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.updateTask(_startData.id);
              _startData.jsonData = JSON.parse(
                JSON.stringify(
                  this.dataList.find(i => i.id === _startData.id).jsonData
                )
              );
              console.log(`${_startData.id}:已获取转录文稿(txt)`);
              console.log("data👉", JSON.parse(JSON.stringify(_startData)));
            } else if (
              ["video/mp4", "audio/wav", "audio/x-m4a", "audio/mpeg"].includes(
                fileData.type
              )
            ) {
              //mp4与wav文件
              _stepList[i].status = "2";
              _stepList[i].startTime =
                new Date().toLocaleDateString().replaceAll("/", "-") +
                " " +
                new Date().toLocaleTimeString();

              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.$forceUpdate()
              let _file = _startData.jsonData.fileData.fileObj;
              if (!_file && JSON.stringify(_file) != "{}") {
                let fileBody = await this.getFileBody(
                  _startData.jsonData.fileData.url
                );
                let _type = _startData.jsonData.fileData.type.split("/")[1];
                if (_type == "x-m4a") {
                  _type = "m4a";
                } else if (_type == "mpeg") {
                  _type = "mp3";
                }
                _file = new File([fileBody.data], `audio.${_type}`, {
                  type: _startData.jsonData.fileData.type
                });
              }

              // 只对m4a文件进行转wav，mp3文件不再转码
              if (_file.type === "audio/x-m4a") {
                let _data = await this.audioToWavMixin(_file);
                if (_data !== 1) {
                  _file = _data.data;
                } else {
                  console.log("报错👉", _data);
                  if (this.dataList.find(i => i.status == "0")) {
                    let id = this.dataList.find(i => i.status == "0").id;
                    this.startTask(id);
                  }
                  break;
                }
              }
              console.log("转录文件", _file);

              let {
                transcriptionContent,
                editorBarData,
                data
              } = await this.wavAudioToTextAndObjMixin(_file);
              if (data === 1) {
                //转录失败，直接退出
                if (this.dataList.find(i => i.status == "0")) {
                  let id = this.dataList.find(i => i.status == "0").id;
                  this.startTask(id);
                }
                break;
              }
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.baseMessage.transcriptionData = transcriptionContent;
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.baseMessage.editorBarData = editorBarData;

              _stepList[i].status = "1";
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.updateTask(_startData.id);
              _startData.jsonData = JSON.parse(
                JSON.stringify(
                  this.dataList.find(i => i.id === _startData.id).jsonData
                )
              );
              console.log(`${_startData.id}:已获取转录文稿(mp4/wav)`);
            }
          } else if (_step.type === "automaticCoding") {
            if (_startData.jsonData.automaticCoding) {
              const fileData = _startData.jsonData.fileData;
              _stepList[i].status = "2";
              _stepList[i].startTime =
                new Date().toLocaleDateString().replaceAll("/", "-") +
                " " +
                new Date().toLocaleTimeString();

              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.$forceUpdate()
              //选择了字段编码
              let _content =
                _startData.jsonData.baseMessage.editorBarData.content;
              let _tableList =
                _startData.jsonData.baseMessage.editorBarData.table;
              if (!_content) {
                _content = await this.getFile(
                  _startData.jsonData.baseMessage.editorBarData.url
                );
                _content = _content.data;
                this.dataList.find(
                  i => i.id === _startData.id
                ).jsonData.baseMessage.editorBarData.content = _content;
              }
              if (!_tableList) {
                let _result = [];
                let _data = _content;
                let _div = document.createElement("div");
                _div.innerHTML = _data;
                let _tableRows = _div.querySelectorAll(`table tbody tr`);
                _tableRows.forEach((i, index) => {
                  if (index == 0) return;
                  let obj = {
                    index: i.cells[0].textContent,
                    startTime: i.cells[1].textContent,
                    endTime: i.cells[2].textContent,
                    value: i.cells[3].textContent,
                    time: i.cells[4].textContent,
                    role: i.cells[5] ? i.cells[5].textContent : "",
                    code: i.cells[6] ? i.cells[6].textContent : ""
                  };
                  _result.push(obj);
                });

                _tableList = _result;
              }
              let editorBarData = "";

              if (fileData.type == "text/plain") {
                let _result = await this.automaticCodingForTextMixin({
                  tableList: _tableList
                });
                editorBarData = _result.editorBarData;
              } else {
                let _result = await this.automaticCodingMixin({
                  tableList: _tableList
                });
                editorBarData = _result.editorBarData;
              }

              if (!this.nowDoTaskId.includes(_startData.id)) break;

              _stepList[i].status = "1";

              this.dataList.find(i => i.id === _startData.id).jsonData =
                _startData.jsonData;
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.baseMessage.editorBarData = editorBarData;

              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.updateTask(_startData.id);
              _startData.jsonData = JSON.parse(
                JSON.stringify(
                  this.dataList.find(i => i.id === _startData.id).jsonData
                )
              );
              console.log("data👉", JSON.parse(JSON.stringify(_startData)));
              console.log(`${_startData.id}:已获完成自动编码`);
              // }
            } else {
              _stepList[i].status = "1";
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.updateTask(_startData.id);
              _startData.jsonData = JSON.parse(
                JSON.stringify(
                  this.dataList.find(i => i.id === _startData.id).jsonData
                )
              );
            }
          } else if (_step.type === "getFileIds") {
            //文件获取fileId
            _stepList[i].status = "2";
            _stepList[i].startTime =
              new Date().toLocaleDateString().replaceAll("/", "-") +
              " " +
              new Date().toLocaleTimeString();

            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.$forceUpdate()
            let _fileData = _startData.jsonData.baseMessage.editorBarData;
            let { fileId } = await this.getFileIdMixin(_fileData.url);
            if (!this.nowDoTaskId.includes(_startData.id)) break;
            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.file_ids = fileId;
            _stepList[i].status = "1";
            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.updateTask(_startData.id);
            _startData.jsonData = JSON.parse(
              JSON.stringify(
                this.dataList.find(i => i.id === _startData.id).jsonData
              )
            );
            console.log("data👉", JSON.parse(JSON.stringify(_startData)));
            console.log(`${_startData.id}:已获取fileId`);
          } else if (_step.type == "getWordCloudMap") {
            //文件获取fileId
            _stepList[i].status = "2";
            _stepList[i].startTime =
              new Date().toLocaleDateString().replaceAll("/", "-") +
              " " +
              new Date().toLocaleTimeString();

            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.$forceUpdate()
            let _fileData = _startData.jsonData.baseMessage.editorBarData;

            let _content = await this.getFile(_fileData.url);

            let _result = await this.getWordCloudMapMixin(_content.data);

            this.dataList
              .find(i => i.id === _startData.id)
              .jsonData.baseMessage.imageList.NephogramList.push(_result);

            _stepList[i].status = "1";
            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.updateTask(_startData.id);
            _startData.jsonData = JSON.parse(
              JSON.stringify(
                this.dataList.find(i => i.id === _startData.id).jsonData
              )
            );
          } else if (_step.type === "generateReport") {
            //生成报告
            _stepList[i].status = "2";
            _stepList[i].successNum = 0;
            _stepList[i].startTime =
              new Date().toLocaleDateString().replaceAll("/", "-") +
              " " +
              new Date().toLocaleTimeString();

            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            let _i = i;
            this.$forceUpdate()
            let _analysisList = _startData.jsonData.analysisList;

            let promises = [];
            let _content =
              _startData.jsonData.baseMessage.editorBarData.content;
            if (!_content) {
              _content = await this.getFile(
                _startData.jsonData.baseMessage.editorBarData.url
              );
              _content = _content.data;
              _startData.jsonData.baseMessage.editorBarData.content = _content;
            }
            console.log(_analysisList.length)
            promises = _analysisList.map((i, index) => {
              return new Promise(async resolve => {
                _startData.jsonData.analysisList[index].status = "default"; //默认状态
                let _num = 0;
                let _maxNum = 5;
                const getAnalysis = async () => {
                  if (
                    ["tryAgainMax", "noAgentData"].includes(
                      _startData.jsonData.analysisList[index].status
                    )
                  ) {
                    return resolve();
                  }
                  if (_num >= _maxNum) {
                    _startData.jsonData.analysisList[index].status =
                      "tryAgainMax"; //超过尝试次数
                    return resolve();
                  }
                  _num += 1;
                  let _assistantData =
                    this.dialogTagDataList.find(
                      i2 => i2.id == i.jsonData.mId
                    ) ||
                    this.dialogTagDataList.find(
                      i2 => i2.name == i.jsonData.name
                    );

                  if (!_assistantData) {
                    _startData.jsonData.analysisList[index].status =
                      "noAgentData"; //无对应的智能体
                    return resolve();
                  }
                  let data = await this.getAnalysisMixin({
                    fileId: _startData.jsonData.file_ids,
                    content: _content,
                    analysisData: i.jsonData,
                    assistantData: _assistantData,
                    baseMessage: _startData.jsonData.baseMessage
                  });
                  console.log("👉xxx",data,index)

                  if (!this.nowDoTaskId.includes(_startData.id)) return resolve();
                  if (data.data == 1) {
                    if (_num < _maxNum) {
                      //重试
                      getAnalysis();
                    }
                  } else {
                    _startData.jsonData.analysisList[index].status = "success";
                    _startData.jsonData.analysisList[index].jsonData =
                      data.data;
                    _stepList[_i].successNum += 1;
                    this.dataList.find(i2 => i2.id === _startData.id).jsonData.steps[_i].successNum = _stepList[_i].successNum;
                    this.$forceUpdate();
                    resolve();

                    // this.updateTask(_startData.id);
                    // _startData.jsonData = JSON.parse(
                    //   JSON.stringify(
                    //     this.dataList.find(i => i.id === _startData.id).jsonData
                    //   )
                    // );
                  }
                };
                getAnalysis();
              });
            });

            await Promise.all(promises).then(() => {
              console.log(`${_startData.id}:已完成分析获取`);
              if (!this.nowDoTaskId.includes(_startData.id)) return;
              console.log("data👉", JSON.parse(JSON.stringify(_startData)));
              console.log(_startData.jsonData.analysisList);
              _stepList[i].status = "1";
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.steps = _stepList;
              this.dataList.find(i => i.id === _startData.id).jsonData =
                _startData.jsonData;

              this.updateTask(_startData.id);
              _startData.jsonData = JSON.parse(
                JSON.stringify(
                  this.dataList.find(i => i.id === _startData.id).jsonData
                )
              );
              if (
                this.dataList
                  .find(i => i.id === _startData.id)
                  .jsonData.steps.find(i => i.type === "createClass").status ===
                "1"
              ) {
                this.dataList.find(i => i.id === _startData.id).status = "2";
                if (this.dataList.find(i => i.status == "0")) {
                  let id = this.dataList.find(i => i.status == "0").id;
                  this.startTask(id);
                }
              }
            });

            if (!this.nowDoTaskId.includes(_startData.id)) break;
          } else if (_step.type === "createClass") {
            //创建课堂
            _stepList[i].status = "2";
            _stepList[i].startTime =
              new Date().toLocaleDateString().replaceAll("/", "-") +
              " " +
              new Date().toLocaleTimeString();

            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.$forceUpdate()

            // 判断是否已经创建了课堂 已经创建了就删除原有课堂
            if(_startData.jsonData.createId){
              let delCourse = await this.deleteClassMixin(_startData.jsonData.createId)
              if(delCourse==1){
                console.log("删除课堂成功")
              }else{
                console.log("删除课堂失败")
              }
            }


            //创建课堂   赋值好fileid   替换创建后课堂的基础数据  继续下一个任务
            let newOption = await this.createClassMixin(_startData.jsonData);

            if ([1, 2, 3].includes(newOption.data)) {
              this.dataList.find(
                i => i.id === _startData.id
              ).jsonData.errorMessage = {
                content: "创建课堂失败",
                err: data.err
              };

              this.dataList.find(i => i.id === _startData.id).status = "3";
              break;
            }
            if (!this.nowDoTaskId.includes(_startData.id)) break;

            this.$emit("addNewCourseOption", newOption.data);
            this.dataList.find(i => i.id === _startData.id).jsonData.createId =
              newOption.tid;
            _stepList[i].status = "1";
            this.dataList.find(
              i => i.id === _startData.id
            ).jsonData.steps = _stepList;
            this.dataList.find(i => i.id === _startData.id).status = "2";
            this.updateTask(_startData.id);
            _startData.jsonData = JSON.parse(
              JSON.stringify(
                this.dataList.find(i => i.id === _startData.id).jsonData
              )
            );
            console.log(`${_startData.id}:已创建课堂`);
            // 查看是否有需要开启的任务
            if (this.dataList.find(i => i.status == "0")) {
              let id = this.dataList.find(i => i.status == "0").id;
              this.startTask(id);
            }
            break;
          }

          console.log(this.dataList.find(i => i.id === _startData.id));
          if (this.dataList.find(i => i.id === _startData.id).status == "1") {
            this.dataList.find(i => i.id === _startData.id).status = "0";
            if (this.dataList.find(i => i.status == "0")) {
              let id = this.dataList.find(i => i.status == "0").id;
              this.startTask(id);
            }
          }
        }
      }
    },
    // 暂停任务
    pauseTask(id) {
      let _waitTask = this.dataList.find(i => i.status === "0");
      if (_waitTask) {
        //暂停这个任务，
        this.dataList.find(i => i.id === id).status = "0";
        this.nowDoTaskId = this.nowDoTaskId.filter(i => i !== id);
        // 开始另一个任务
        this.startTask(_waitTask.id);
      } else {
        //没有任务了,所以改为待开始（停止）
        this.dataList.find(i => i.id === id).status = "3";
      }
    },
    //停止任务
    stopTask(id) {
      let stopTask = this.dataList.find(i => i.id === id);
      if (stopTask.status === "0") {
        this.dataList.find(i => i.id === id).status = "3";
      }
      if (stopTask.status === "1") {
        this.dataList.find(i => i.id === id).status = "3";
        this.nowDoTaskId = this.nowDoTaskId.filter(i => i !== id);
      }

      if (
        stopTask.jsonData.steps.find(i => i.type == "createClass").status == 1
      ) {
        this.dataList.find(i => i.id === id).status = "2";
        this.nowDoTaskId = this.nowDoTaskId.filter(i => i !== id);
      }

      console.log(stopTask);

      let _waitTask = this.dataList.find(i => i.status === "0");
      console.log(_waitTask);
      if (_waitTask) {
        // 开始另一个任务
        this.startTask(_waitTask.id);
      }
      // let _waitTask = this.dataList.find(i => i.status === "0" && i.id===id);
      // if (_waitTask) {
      //   //停止这个任务，
      //   this.dataList.find(i => i.id === id).status = "3";
      //   this.nowDoTaskId = this.nowDoTaskId.filter(i=>i!==id);
      //   // 开始另一个任务
      //   this.startTask(_waitTask.id);
      // } else {
      //   //只停止这个任务
      //   this.dataList.find(i => i.id === id).status = "3";
      // }
    },
    goToEdit(id) {
      let _data = this.dataList.find(i => i.id === id);
      if (_data) {
        let createId = _data.jsonData.createId;
        this.$emit("changeClass", createId);
        this.close();
      }
    },
    test() {
      this.testMixin();
    },
    async exportDoc() {
      let _exportList = this.dataList.filter(
        i =>
          this.selectList.includes(i.id) &&
          (this.selectStatus === "99" ||
            this.statusList
              .find(i2 => i2.value === this.selectStatus)
              .allow.includes(i.status)) &&
          i.status == "2"
      );

      if (_exportList.length <= 0)
        return this.$message.info("请先选择已经完成的任务列表");

      let promise = [];

      let _notify = this.$notify.info({
        title: "提示",
        message: "正在批量导出word中，请稍等...",
        duration: 0,
        showClose: false
      });

      let _copyExportData = JSON.parse(JSON.stringify(_exportList));

      let fileList = [];

      for (let i = 0; i < _copyExportData.length; i++) {
        // _copyExportData[i].jsonData.baseMessage.courseName =
        // _copyExportData[i].jsonData.baseMessage.courseName + "_" + i;
        fileList.push(await this.getDocFnPromise(_copyExportData[i]));
      }

      if (fileList.length == 1) {
        saveAs(fileList[0], `${fileList[0].name}`);
        this.$message.success("导出报告成功");
      } else if (fileList.length > 1) {
        const zip = new JSZip();

        fileList.forEach((i, index) => {
          let fileName = i.name;

          if (
            fileList
              .map(i => i.name)
              .filter((fi, findex) => findex !== index)
              .includes(fileName)
          )
            fileName =
              fileName.replace(/\.[^/.]+$/, "") +
              `(${index}).` +
              fileName.replace(/^.*\./, "");
          // let fileName = i.name;
          // let fileNames = fileList.map(file => file.name);
          // let count = 1;
          // while (fileNames.includes(fileName)) {
          //   let nameWithoutExtension = fileName.replace(/\.[^/.]+$/, "");
          //   let extension = fileName.replace(nameWithoutExtension, "");
          //   fileName = `${nameWithoutExtension}(${count})${extension}`;
          //   count++;
          // }
          zip.file(fileName, i, { binary: true });
        });
        zip.generateAsync({ type: "blob" }).then(content => {
          // 生成二进制流
          saveAs(content, `课堂观察报告.zip`); // 利用file-saver保存文件  自定义文件名
        });

        this.$message.success("导出报告成功");
      }
      _notify.close();

      // _exportList.forEach((i, index) => {
      //   i.jsonData.baseMessage.courseName =
      //     i.jsonData.baseMessage.courseName + "_" + index;
      //   promise.push(this.getDocFnPromise(i));
      // });

      // Promise.all(promise)
      //   .then(res => {
      //     _notify.close();
      //     console.log(res);
      //     if (res.length == 1) {
      //       saveAs(res[0], `${res[0].name}`);
      //       this.$message.success("导出报告成功");
      //     } else if (res.length > 1) {
      //       const zip = new JSZip();
      //       res.forEach(i => {
      //         zip.file(`${i.name}`, i, { binary: true });
      //       });
      //       zip.generateAsync({ type: "blob" }).then(content => {
      //         // 生成二进制流
      //         saveAs(content, `课堂观察报告.zip`); // 利用file-saver保存文件  自定义文件名
      //       });
      //       this.$message.success("导出报告成功");
      //     }
      //   })
      //   .catch(err => {
      //     console.log("err", err);
      //   });
    },
    async regenerateTheReport() {
      let _generateList = this.dataList.filter(
        i =>
          this.selectList.includes(i.id) &&
          (this.selectStatus === "99" ||
            this.statusList
              .find(i2 => i2.value === this.selectStatus)
              .allow.includes(i.status)) &&
          i.status == "2"
      );

      if (_generateList.length <= 0)
        return this.$message.info("请先选择已经完成的任务列表");

      this.$confirm("确认要重新生成课堂观察报告吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _generateList.forEach(i => {
          this.dataList.find(i2 => i2.id == i.id).status = "0";
          this.dataList
            .find(i2 => i2.id === i.id)
            .jsonData.steps.find(i2 => i2.type == "generateReport").status =
            "0";
        });
        this.dataList.find(i => i.id === id).jsonData.steps.find(i => i.type == "generateReport").successNum = 0;

        if (!this.dataList.some(i => i.status == "1")) {
          this.startTask(_generateList[0].id);
        }
      });
    }
  },
  mounted() {
    this.getTaskList();
    this.getDialogTagDataList();
  }
};
</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: 100%;
  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: 25px;
  height: 25px;
  transform: rotate(180deg);
}

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

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

.b_head > span {
  font-size: 18px;
  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 {
  flex: 1;
  /* width: calc(100% - 60px); */
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: hidden;
}

.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;
  white-space: nowrap;
}

.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: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(150, 155, 163, 1);
  font-size: 16px;
  white-space: nowrap;
}

.b_bottom {
  width: 100%;
  height: auto;
  min-height: calc(100% - 210px);
  /* 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: fit-content;
  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: fit-content;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 0 10px;
  white-space: nowrap;
}

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

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