pc_manager_smoke/src/components/broadcastContent/index.vue

<template>
  <div>
    <!-- 应急广播标题 -->
    <el-row>
      <div class="tag">应急广播</div>
    </el-row>

    <!-- 顶部卡片区域 -->
    <el-row :gutter="20">
      <!-- 设备在线数量区域 -->
      <el-col :span="6">
        <el-card class="box_card">
          <div slot="header">
            <span>设备在线数量/台</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="dialogFormVisible_broadcast = true"
            >编辑</el-button>

          </div>
          <el-row>
            <el-col
              :span="10"
              :offset="2"
            >
              <img src="../../assets/shebei.svg">
            </el-col>
            <el-col
              :span="8"
              :offset="4"
            >
              <div class="card_info">{{numOfDevice}}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 播发时间区域 -->
      <el-col :span="6">
        <el-card class="box_card">
          <div slot="header">
            <span>播发时间段</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="dialogFormVisible_broadcast2 = true"
            >编辑</el-button>
          </div>
          <el-row>
            <el-col
              :span="10"
              :offset="1"
            >
              <img src="../../assets/naozhong.svg">
            </el-col>
            <el-col
              :span="12"
              :offset="1"
              class="font_size"
              v-if="broadcastTime.length!=0"
            >
              <el-row>{{broadcastTime[0].substring(0,5)}}-{{broadcastTime[1].substring(0,5)}} </el-row>
              <el-row>{{broadcastTime2[0].substring(0,5)}}-{{broadcastTime2[1].substring(0,5)}}</el-row>
              <el-row>{{broadcastTime3[0].substring(0,5)}}-{{broadcastTime3[1].substring(0,5)}}</el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 累计时长区域 -->
      <el-col :span="6">
        <el-card class="box_card">
          <div slot="header">
            <span>累计时长/h</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="dialogFormVisible_broadcast3 = true"
            >编辑</el-button>
          </div>
          <el-row>
            <el-col
              :span="10"
              :offset="2"
            >
              <img src="../../assets/shizhong.svg">
            </el-col>
            <el-col
              :span="8"
              :offset="4"
            >
              <div class="card_info">{{broadcastDuration}}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 累计播发区域 -->
      <el-col :span="6">
        <el-card class="box_card">
          <div slot="header">
            <span>累计播发/条</span>
            <!-- <el-button
              style="float: right; padding: 3px 0"
              type="text"
            >编辑</el-button> -->
          </div>
          <el-row>
            <el-col
              :span="10"
              :offset="2"
            >
              <img src="../../assets/shalou.svg">
            </el-col>
            <el-col
              :span="8"
              :offset="4"
            >
              <div class="card_info">{{totalCount}}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <div style="margin: 10px 0;"></div>

    <!-- 播发统计标题区域 -->
    <el-row>
      <el-col
        :span="4"
        class="tag"
      >播发统计</el-col>
      <el-col
        :span="3"
        :offset="14"
        class="tag_min"
      >累计播发{{totalCount}}条</el-col>
      <el-col
        :span="3"
        class="tag_min"
      >播放时长{{broadcastDuration}}小时</el-col>
    </el-row>

    <div style="margin: 10px 0;"></div>

    <!--添加按钮 和搜索框 -->
    <el-row>
      <el-col :span="4">
        <el-button
          type="primary"
          size="mini"
          @click="dialogFormVisible = true;form = {}"
        >添加广播</el-button>
      </el-col>
      <el-col :span="5">
        <el-input
          suffix-icon="el-icon-search"
          size="small"
          clearable
          placeholder="请输入播发标题关键词"
          v-model="searchValue"
          @blur="handleSearch"
          @clear="hangleDelete"
        >
        </el-input>
      </el-col>
    </el-row>

    <div style="margin: 10px 0;"></div>

    <!-- 表格区域 -->
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%;font-size: 14px;"
        highlight-current-row
        height="300"
      >

        <el-table-column
          prop="address"
          label="播发地点"
          align="center"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="broadcastType"
          label="广播类型"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="messageType"
          label="消息类型"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="playTime"
          label="播出时间"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="播发标题"
          align="center"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          label="播发内容"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <div
              class="content_style"
              v-html="row.content"
            ></div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="{ row }">
            <el-button
              type="warning"
              size="mini"
              @click="amendBroadcast(row)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deleteBroadcast(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <div style="margin: 28px 0;"></div>

    <!-- 分页器 -->
    <el-row>
      <div class="pagination_smoke">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          :current-page.sync="curPage"
          @current-change="changeCurPage"
        >
        </el-pagination>
      </div>

    </el-row>

    <!-- 修改设备在线数量弹窗 -->
    <el-dialog
      title="修改设备在线数量"
      :visible.sync="dialogFormVisible_broadcast"
      center
      style="width:80%"
    >
      <el-form>
        <el-form-item
          label="设备在线数量:"
          label-width="100px"
        >
          <el-input v-model="numOfDevice"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="amendNumOfDevice"
        >确 定</el-button>
        <el-button @click="dialogFormVisible_broadcast = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改播发时间弹窗 -->
    <el-dialog
      title="修改播发时间"
      :visible.sync="dialogFormVisible_broadcast2"
      center
      style="width:80%"
    >
      <el-form>

        <el-form-item
          label="播发时间段-1:"
          label-width="100px"
        >
          <el-time-picker
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            v-model="broadcastTime"
          >
          </el-time-picker>
        </el-form-item>

        <el-form-item
          label="播发时间段-2:"
          label-width="100px"
        >
          <el-time-picker
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            v-model="broadcastTime2"
          >
          </el-time-picker>
        </el-form-item>

        <el-form-item
          label="播发时间段-3:"
          label-width="100px"
        >
          <el-time-picker
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            v-model="broadcastTime3"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="amendNumOfDevice"
        >确 定</el-button>
        <el-button @click="dialogFormVisible_broadcast2 = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改累计时长弹窗 -->
    <el-dialog
      title="修改累计时长"
      :visible.sync="dialogFormVisible_broadcast3"
      center
      style="width:80%"
    >
      <el-form>
        <el-form-item
          label="累计时长:"
          label-width="100px"
        >
          <el-input v-model="broadcastDuration"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="amendNumOfDevice"
        >确 定</el-button>
        <el-button @click="dialogFormVisible_broadcast3 = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加广播弹窗 -->
    <el-dialog
      title="添加广播"
      :visible.sync="dialogFormVisible"
      center
      top="5vh"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
      >
        <el-form-item
          label="播出时间"
          prop="playTime"
        >
          <el-date-picker
            v-model="form.playTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="播发地点"
          prop="address"
        >
          <el-input v-model="form.address"></el-input>
        </el-form-item>

        <el-form-item
          label="广播类型"
          prop="broadcastType"
        >
          <el-input v-model="form.broadcastType"></el-input>
        </el-form-item>

        <el-form-item
          label="消息类型"
          prop="messageType"
        >
          <el-input v-model="form.messageType"></el-input>
        </el-form-item>

        <el-form-item
          label="播发标题"
          prop="title"
        >
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item
          label="播发音频"
          prop="extraFileShowUrl"
        >
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="uploadSuccessVoice2"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传
            </el-button>
            <div class="avatar">
              <div v-if="form.extraFile">{{form.extraFile}}</div>
              <audio
                controls="controls"
                v-if="form.extraFileShowUrl"
                :src="form.extraFileShowUrl+form.extraFile"
              ></audio>
            </div>
            <div
              slot="tip"
              class="el-upload__tip"
            >只能上传mp3文件,且不超过30M</div>
          </el-upload>
        </el-form-item>

        <el-form-item
          label="播发内容"
          prop="content"
        >
          <!-- 上传组件辅助-->
          <el-upload
            class="avatar-uploader-editor-voice"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="uploadSuccessVoice"
          > </el-upload>

          <quill-editor
            v-model="form.content"
            ref="myQuillEditor"
            style="height: 100px;margin-top: -22px;"
            :options="editorOption"
          >
            <div
              id="toolbar"
              slot="toolbar"
            >
              <button
                class="ql-bold"
                title="加粗"
              >Bold</button>
              <button
                class="ql-italic"
                title="斜体"
              >Italic</button>
              <button
                class="ql-underline"
                title="下划线"
              >underline</button>
              <button
                class="ql-strike"
                title="删除线"
              >strike</button>

              <button
                class="ql-clean"
                title="清除字体样式"
              ></button>
            </div>
          </quill-editor>

        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="addBroadcast('form')"
        >确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改广播弹窗 -->
    <el-dialog
      title="修改广播"
      :visible.sync="dialogFormVisible2"
      center
      top="3vh"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form2"
        label-width="80px"
      >
        <el-form-item
          label="播出时间"
          prop="playTime"
        >
          <el-date-picker
            v-model="form.playTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="播发地点"
          prop="address"
        >
          <el-input v-model="form.address"></el-input>
        </el-form-item>

        <el-form-item
          label="广播类型"
          prop="broadcastType"
        >
          <el-input v-model="form.broadcastType"></el-input>
        </el-form-item>

        <el-form-item
          label="消息类型"
          prop="messageType"
        >
          <el-input v-model="form.messageType"></el-input>
        </el-form-item>

        <el-form-item
          label="播发标题"
          prop="title"
        >
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item
          label="播发音频"
          prop="extraFileShowUrl"
        >
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="uploadSuccessVoice2"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传
            </el-button>
            <div class="avatar">
              <div v-if="form.extraFile">{{form.extraFile}}</div>
              <audio
                controls="controls"
                v-if="form.extraFileShowUrl"
                :src="form.extraFileShowUrl+form.extraFile"
              ></audio>
            </div>
            <div
              slot="tip"
              class="el-upload__tip"
            >只能上传mp3文件,且不超过30M</div>
          </el-upload>
        </el-form-item>

        <el-form-item
          label="播发内容"
          prop="content"
        >
          <!-- 上传组件辅助-->
          <el-upload
            class="avatar-uploader-editor-voice"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="uploadSuccessVoice"
          > </el-upload>

          <quill-editor
            v-model="form.content"
            ref="myQuillEditor"
            style="height: 100px;margin-top: -22px;"
            :options="editorOption"
          >
            <div
              id="toolbar"
              slot="toolbar"
            >
              <button
                class="ql-bold"
                title="加粗"
              >Bold</button>
              <button
                class="ql-italic"
                title="斜体"
              >Italic</button>
              <button
                class="ql-underline"
                title="下划线"
              >underline</button>
              <button
                class="ql-strike"
                title="删除线"
              >strike</button>

              <button
                class="ql-clean"
                title="清除字体样式"
              ></button>

              <!-- <button
                class="ql-audio"
                title="上传音频"
              ><i class="el-icon-microphone"></i></button> -->
            </div>
          </quill-editor>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="hangdleAmendBroadcast('form2')"
        >确 定</el-button>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 引入富文本编辑框和样式
import { quillEditor, Quill } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

// 自定义字体大小
let Size = Quill.import("attributors/style/size");
Size.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px", "30px"];
Quill.register(Size, true);

// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

//音频标签插入 （样式保持宽度100%）
import Audio from "./audio.js";
Quill.register(Audio, true);

export default {
  name: "broadcastContent",
  components: { quillEditor },
  data() {
    return {
      id: "", // 设备id
      numOfDevice: "", // 设备在线数量
      rateOfInline: "", // 设备在线率
      numOfBroadcasts: "", // 广播数目
      broadcastDuration: "", // 累计播放时长
      broadcastTime: [], // 播发时间段
      broadcastTime2: [], // 播发时间段2
      broadcastTime3: [], // 播发时间段3
      tableData: [], // 广播列表
      dialogFormVisible: false, //添加弹窗控制
      dialogFormVisible2: false, //修改弹窗控制
      dialogFormVisible_broadcast: false, //修改设备在线数量弹窗控制
      dialogFormVisible_broadcast2: false, //修改播发时间弹窗控制
      dialogFormVisible_broadcast3: false, //修改累计时长弹窗控制
      searchValue: "", //搜索框绑定数据
      form: {
        content: "", //内容
        address: "", //地点
        broadcastType: "", //广播类型
        messageType: "", //消息类型
        playTime: "", //播发时间
        title: "", //广播概括
        extraFileShowUrl: "", //广播音频
        extraFile: "", //广播音频名称
      },
      // 验证规则
      rules: {
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        address: [{ required: true, message: "请输入地点", trigger: "blur" }],
        broadcastType: [
          { required: true, message: "请输入广播类型", trigger: "blur" },
        ],
        messageType: [
          { required: true, message: "请输入消息类型", trigger: "blur" },
        ],
        title: [{ required: true, message: "请输入消息类型", trigger: "blur" }],
        playTime: [
          { required: true, message: "请选择播发时间", trigger: "change" },
        ],
        extraFileShowUrl: [
          { required: true, message: "请选择播发音频", trigger: "change" },
        ],
      },
      curPage: 1, // 当前页
      pageSize: 4, // 每页记录数
      totalCount: null, // 总条数
      // 富文本自定义
      editorOption: {
        placeholder: "请输入内容",
        theme: "snow",
        modules: {
          toolbar: {
            container: "#toolbar",
            handlers: {
              audio: function (value) {
                if (value) {
                  // 触发input框选择音频文件
                  document
                    .querySelector(".avatar-uploader-editor-voice input")
                    .click();
                } else {
                  this.quill.format("audio", false);
                }
              },
            },
          },
        },
      },
    };
  },
  mounted() {
    this.getData();
    this.getBroadcastInfo();
  },
  methods: {
    // 获取广播播发记录列表
    async getData() {
      let params = {
        curPage: this.curPage,
        pageSize: this.pageSize,
        title: this.searchValue,
      };
      let res = await this.$axios({
        url: "/diseaseRight/broadcast/record/page",
        method: "get",
        params,
      });
      // console.log(res);
      if (res.data.success) {
        this.tableData = res.data.data.recordPage.list;
        this.totalCount = res.data.data.recordPage.totalCount;
      } else {
        this.$message.error("获取广播列表失败");
      }
    },
    // 获取应急广播调度统计信息
    async getBroadcastInfo() {
      let res = await this.$axios.get(
        "/diseaseRight/broadcast/statistics/info"
      );
      // console.log(res);
      if (res.data.success) {
        this.numOfDevice = res.data.data.numOfDevice;
        this.numOfBroadcasts = res.data.data.numOfBroadcasts;
        this.broadcastDuration = res.data.data.broadcastDuration;
        this.id = res.data.data.id;
        this.rateOfInline = res.data.data.rateOfInline;
        this.broadcastTime = [];
        this.broadcastTime2 = [];
        this.broadcastTime3 = [];
        res.data.data.broadcastTime.split(",").forEach((element, index) => {
          if (index == 0 || index == 1) {
            this.broadcastTime.push(element);
          } else if (index == 2 || index == 3) {
            this.broadcastTime2.push(element);
          } else if (index == 4 || index == 5) {
            this.broadcastTime3.push(element);
          }
        });
      } else {
        this.$message.error("获取应急广播调度统计信息失败");
      }
    },
    // 添加广播
    addBroadcast(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let res = await this.$axios({
            method: "post",
            url: "/diseaseRight/broadcast/record/add",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: this.form,
          });
          // console.log(res);
          if (res.data.success) {
            this.getData();
            this.$message.success("添加成功!");
          } else {
            this.$message.error("添加失败!");
          }
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    // 修改广播
    amendBroadcast(row) {
      // console.log(row);
      this.dialogFormVisible2 = true;
      this.form = { ...row };
    },
    // 修改广播请求
    hangdleAmendBroadcast(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible2 = false;
          let res = await this.$axios({
            method: "POST",
            url: "/diseaseRight/broadcast/record/update",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: this.form,
          });
          //   console.log(res);
          if (res.data.success) {
            this.$message.success("修改成功!");
          } else {
            this.$message.error("修改失败!");
          }
          this.getData();
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    // 删除广播
    deleteBroadcast(id) {
      this.$confirm("确定删除吗?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$axios({
            method: "delete",
            url: "/diseaseRight/broadcast/record/delete",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: [id],
          });
          // console.log(res);
          if (res.data.success) {
            this.$message.success("删除成功");
            let totalPage = Math.ceil((this.totalCount - 1) / this.pageSize);
            let currentPage =
              this.curPage > totalPage ? totalPage : this.curPage;
            this.curPage = currentPage < 1 ? 1 : currentPage;
            this.getData();
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    // 换页逻辑
    changeCurPage(val) {
      this.curPage = val;
      this.getData();
    },
    // 修改应急广播信息
    async amendNumOfDevice() {
      this.dialogFormVisible_broadcast = false;
      this.dialogFormVisible_broadcast2 = false;
      this.dialogFormVisible_broadcast3 = false;
      let data = {
        id: this.id,
        numOfDevice: this.numOfDevice,
        rateOfInline: this.rateOfInline,
        numOfBroadcasts: this.numOfBroadcasts,
        broadcastDuration: this.broadcastDuration,
        broadcastTime:
          this.broadcastTime +
          "," +
          this.broadcastTime2 +
          "," +
          this.broadcastTime3,
      };
      let res = await this.$axios({
        url: "/diseaseRight/broadcast/statistics/update",
        method: "put",
        data,
        headers: {
          "Admin-Token": sessionStorage.getItem("token"),
        },
      });
      // console.log(res);
      if (res.data.success) {
        this.$message.success("修改成功!");
      } else {
        this.$message.error("修改失败!");
      }
      this.getBroadcastInfo();
    },
    // 搜索框搜索请求
    handleSearch() {
      this.curPage = 1;
      this.getData();
    },
    // 搜索框清空请求
    hangleDelete() {
      this.curPage = 1;
      this.getData();
    },
    //上传音频 处理很重要
    async uploadSuccessVoice(file) {
      // 上传前限制文件大小
      const isMp3 = file.raw.type === "audio/mpeg";

      const isLt30M = file.size / 1024 / 1024 < 30;

      if (!isMp3 || !isLt30M) {
        this.$message.error("上传音频只能是 Mp3 格式，且不能超过 30MB!");
      } else {
        let quill = this.$refs.myQuillEditor.quill;
        let formData = new FormData();
        formData.append("file", file.raw);
        let res = await this.$axios({
          url: "/diseaseRight/file/imageUpload",
          method: "post",
          data: formData,
          headers: {
            "Admin-Token": sessionStorage.getItem("token"),
          },
        });
        // console.log(res);
        if (res.data.success) {
          this.$message.success("音频插入成功");
          // 获取光标所在位置
          let length = quill.getSelection().index;
          let BlockEmbed = Quill.import("blots/block/embed");
          class AudioBlot extends BlockEmbed {
            static create(value) {
              let node = super.create();
              node.setAttribute("src", res.data.data.showUrl); //设置audio的src属性
              node.setAttribute("controls", true); //设置audio的controls，否则他将不会显示
              node.setAttribute("controlsList", "nodownload"); //设置audio的下载功能为不能下载
              node.setAttribute("id", "voice"); //设置一个id
              return node;
            }
          }
          AudioBlot.blotName = "audio";
          AudioBlot.tagName = "audio"; //自定义的标签为audio
          Quill.register(AudioBlot);

          // insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
          quill.insertEmbed(length, "audio", res.data.data.showUrl);
          quill.setSelection(length + 1); //光标位置向后移动一位
        } else {
          this.$message.error("音频插入失败");
        }
      }
    },
    async uploadSuccessVoice2(file) {
      const loading = this.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 上传前限制文件大小
      const isMp3 = file.raw.type === "audio/mpeg";

      const isLt30M = file.size / 1024 / 1024 < 30;

      if (!isMp3 || !isLt30M) {
        loading.close();
        this.$message.error("上传音频只能是 Mp3 格式，且不能超过 30MB!");
      } else {
        let formData = new FormData();
        formData.append("file", file.raw);
        let res = await this.$axios({
          url: "/diseaseRight/file/imageUpload",
          method: "post",
          data: formData,
          headers: {
            "Admin-Token": sessionStorage.getItem("token"),
          },
        });
        // console.log(res);
        if (res.data.success) {
          // 响应式添加image的值
          this.$set(this.form, "extraFileShowUrl", res.data.data.showUrl);
          this.$set(this.form, "extraFile", res.data.data.imageName);
          this.$message.success("音频上传成功");
        } else {
          this.$message.error("音频上传失败");
        }
        loading.close();
      }
    },
  },
};
</script>

<style  scoped>
@import url("font.css");
.tag {
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 40px;
}
.tag_min {
  font-size: 16px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 40px;
}
.box_card {
  margin-top: 5px;
  height: 160px;
}
.el-card__header {
  padding: 10px 20px;
}
.font_size {
  margin-top: 2px;
  font-size: 15px;
  font-weight: bold;
  color: #707070;
}
.card_info {
  margin-top: 18px;
  font-size: 20px;
  font-weight: bold;
  color: #707070;
}
.content_style {
  width: 340px;
  height: 24px;
}
.pagination_smoke {
  text-align: center;
}
.avatar-uploader-editor-voice {
  display: inline-block;
}
.avatar {
  margin-top: 5px;
  width: 200px;
  height: 12px;
  display: block;
}
</style>