zkPCproject/src/views/Customer/invalidAuditList.vue

<template>
  <div class="pages">
    <div class="app-titel" style="height: auto; padding: 26px 0">
      <div class="screeningbox">
        <div class="screeningboxlebl">提交时间：</div>
        <el-radio-group
          v-model="params.dateType"
          size="small"
          @change="tabtimetap"
        >
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="0">今日</el-radio-button>
          <el-radio-button label="1">昨日</el-radio-button>
          <el-radio-button label="2">近一周</el-radio-button>
        </el-radio-group>
        <div style="margin-left: 26px">
          <el-date-picker
            style="width: 250px; height: 32px; line-height: 32px"
            @change="confirmtime()"
            v-model="customtime"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <div class="screeningboxlebl" style="margin-left: 20px">项目：</div>
        <div style="height: 32px">
          <el-select
            v-model="params.projectId"
            collapse-tags
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="screeningboxlebl">关键词：</div>
        <el-input
          class="inputbox"
          v-model="params.keywords"
          placeholder="客户名称/手机号/顾问名称"
        ></el-input>

        <div class="screeningboxlebl"></div>
        <button class="button1" @click="getPageList()">筛选</button>
        <button
          style="background: #ffffff; color: #606775"
          class="button1"
          @click="Emptycondition()"
        >
          清空筛选条件
        </button>
      </div>
    </div>

    <div class="elmenus">
      <el-menu
        :default-active="auditStatusListIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(data, index) in auditStatusList"
          :key="index"
          :index="data.value"
          >{{ data.title }}
        </el-menu-item>
      </el-menu>
    </div>

    <div class="app-box">
      <el-table
        :data="tableData"
        stripe
        :load="loading"
        :header-cell-style="{
          background: '#F7F8FA',
          borderColor: '#E0E0E0',
          color: '#606775',
        }"
        style="width: 100%"
      >
        <el-table-column
          width="180"
          prop="createTime"
          label="提交开始时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="客户" align="center">
        </el-table-column>
        <el-table-column prop="phone" width="180" label="手机" align="center">
        </el-table-column>
        <el-table-column
          prop="agentName"
          width="180"
          label="顾问"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="assignedTime"
          label="接待时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          width="180"
          prop="invalidReason"
          label="无效原因"
          align="center"
        >
        </el-table-column>
        <el-table-column
          width="180"
          prop="auditStatus"
          label="审核状态"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.auditStatus | statusText }}
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          prop="rejectReason"
          label="驳回原因"
          align="center"
        >
        </el-table-column>
        <el-table-column
          width="180"
          prop="auditor"
          label="审核人"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="updateTime" label="审核时间" align="center">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120" align="center">
          <template slot-scope="scope">
            <div
              v-if="permissions['invalid_watch_audit']"
              style="color: #2671e2; cursor: pointer"
              @click="Toview(scope)"
            >
              查看
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <div class="blockbox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="无效审核"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :show-close="true"
      top="5vh"
      custom-class="hahaha"
    >
      <div class="appcenter" v-loading="digloading">
        <div class="info">
          <p v-if="scopeInfo.invalidReason">
            <span>无效原因：</span
            ><span style="color: red">{{ scopeInfo.invalidReason }}</span>
          </p>
          <p
            style="margin-top: 10px; display: inline-flex; align-items: center"
          >
            <span style="margin: 0 10px 0 0"
              >项目名称：{{ scopeInfo.projectName }}</span
            >
            <span style="margin: 0 10px 0 0"
              >客户：{{ scopeInfo.name }} {{ scopeInfo.phone }}</span
            >
            <span style="margin: 0 10px 0 0"
              >接待顾问：{{ scopeInfo.agentName }}</span
            >
            <span style="margin: 0 10px 0 0"
              >接待时间：{{ scopeInfo.assignedTime }}</span
            >
          </p>
        </div>
        <div class="bottom">
          <div style="display: flex;width: 100%;">
            <div id="aplayer" style="flex: 1"></div>
            <div style="margin: 25px 0 0 -5px" @click="download()">
              <img
                style="width: 12px; height: 12px"
                src="http://zkgj.quhouse.com/static/plugins/audio/images/xiaza1.png"
                alt=""
              />
            </div>
          </div>
          <div class="aplayerSpeed">
            <div
              style="display: flex; justify-content: space-around; width: 130px"
            >
              <div @click="aplayerChange('del')" style="cursor: pointer">
                上一首
              </div>
              <div style="cursor: pointer">1/1</div>
              <div @click="aplayerChange('add')" style="cursor: pointer">
                下一首
              </div>
            </div>
            <div
              @click="aplayerSpeed(0.5)"
              :class="aplayerSpeedNum == 0.5 ? 'aplayerSpeedFont' : ''"
              style="cursor: pointer"
            >
              0.5x
            </div>
            <div
              @click="aplayerSpeed(1)"
              :class="aplayerSpeedNum == 1 ? 'aplayerSpeedFont' : ''"
              style="cursor: pointer"
            >
              1.0x
            </div>
            <div
              @click="aplayerSpeed(1.5)"
              :class="aplayerSpeedNum == 1.5 ? 'aplayerSpeedFont' : ''"
              style="cursor: pointer"
            >
              1.5x
            </div>
            <div
              @click="aplayerSpeed(2)"
              :class="aplayerSpeedNum == 2 ? 'aplayerSpeedFont' : ''"
              style="cursor: pointer"
            >
              2.0x
            </div>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 70%">
            <div class="headboxbott">
              <div class="headovfu">
                <div style="width: 100%; display: flex" class="inner-container">
                  <div
                    v-for="(item, index) in tablist"
                    :key="index"
                    @click="tapspagek(item, index)"
                    :class="{ roleindexclass: item.select }"
                    class="biaoji1"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
            <div class="center" ref="lrc">
              <div
                class="text"
                v-for="(item, index) in transcriptionlist"
                :key="index"
                :class="{
                  textRight: item.speaker != 0 && item.speaker % 2 == 0,
                }"
                :data-bg="item.bg"
                :data-ed="item.ed"
                :data-speaker="item.speaker"
                v-if="isShowRole(item)"
              >
                <div class="avatar">
                  <img
                    v-if="item.isShow == 1"
                    src="http://zkgj.quhouse.com/static/plugins/audio/images/A.png"
                    alt=""
                  />
                  <div v-else>{{ item.speaker | toCapital }}</div>
                </div>
                <div class="content123">
                  <div class="speaker-texts">
                    <div
                      class="speaker-text"
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                    <div class="play">
                      <img
                        @click="play(item)"
                        src="https://autoiot.oss-cn-beijing.aliyuncs.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220913154836.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="log-list">
            <div style="width: 100%; padding: 0 0 20px 0">日志记录</div>
            <div class="log-lists">
              <el-steps direction="vertical">
                <el-step v-for="(data, index) in logList" :key="index">
                  <template slot="icon">
                    <div
                      style="
                        width: 10px;
                        height: 10px;
                        background: #2671e2;
                        border-radius: 50%;
                      "
                    ></div>
                  </template>
                  <template slot="title">
                    <span style="color: #2671e2">{{ data.operationDate }}</span>
                  </template>
                  <template slot="description">
                    <div
                      class="namesss"
                      style="
                        display: inline-flex;
                        align-items: center;
                        color: #333;
                      "
                    >
                      <span>{{ data.operationUser || "-" }}</span
                      >&nbsp;&nbsp;<span>{{ data.auditOperation }}</span
                      >&nbsp;&nbsp;<span
                        :style="{
                          color:
                            data.auditStatus == 1
                              ? 'green'
                              : data.auditStatus == 2
                              ? 'red'
                              : '#333',
                        }"
                        >{{ data.auditStatus | textauditStatus }}</span
                      >
                    </div>
                    <div v-if="data.auditReason" style="color: #999">
                      原因： {{ data.auditReason }}
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
          </div>
        </div>
      </div>

      <template slot="footer">
        <div class="btn">
          <div class="btns" @click="proPage">上一条</div>
          <!-- <%-- auditStatus 1:通过审核，2:审核驳回，3:已撤销--%> <%--
          //审核状态auditStatus; //审核状态
          0:待审核，1:通过审核，2:审核驳回，3:已撤销--%> -->
          <!-- 审核权限 -->
          <template v-if="scopeInfo.auditStatus == 0 && checkPermitBtn('invalid_watch_examine')">
            <div class="btns pass" @click="changeAuditStatus(1)">通过</div>
          </template>
          <template v-if="scopeInfo.auditStatus == 0 && checkPermitBtn('invalid_watch_examine')">
            <div class="btns rejued" @click="rejectReasonTips(2)">驳回</div>
          </template>
          <!-- 标记有效无效接待 -->
          <template
            v-if="
              scopeInfo.auditStatus == 0 && checkPermitBtns('bjyx')
            "
          >
            <div class="btns rejued" @click="changeAuditStatus(3)">撤销</div>
          </template>
          <div class="btns" @click="nextPage">下一条</div>
          <div class="btns btns-line" @click="dialogTableVisible = false">
            关闭
          </div>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      title="驳回原因"
      :visible.sync="dialogReason"
      :close-on-click-modal="false"
      width="400px"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        maxlength="50"
        v-model="rejectReason"
      >
      </el-input>
      <template slot="footer">
        <div class="btn">
          <div class="btns cen" @click="cancelDialogReason">取消</div>
          <div class="btns" @click="changeAuditStatus(2)">确认</div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";

import { exportMethodPost } from "@/util/util";

export default {
  data() {
    return {
      projectList: [], // 项目列表
      tableData: [], // table数据
      customtime: [], // 时间picker
      loading: false, // 加载动画
      total: 0, // 总条数
      params: {
        // 接口入参
        dateType: "", // 时间类型 0:今日，1:昨日，2:近一周
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        keywords: "", // 筛选条件关键词
        pageNum: 1, // 页码
        pageSize: 10, // 页数
        projectId: "", // 项目id
        auditStatus: -1, // 审核状态 -1全部  0:待审核，1:通过审核，2:审核驳回，3:已撤销
      },
      auditStatusListIndex: -1, // 默认选中全部
      auditStatusList: [
        {
          title: "全部",
          value: -1,
        },
        {
          title: "待审核",
          value: 0,
        },
        {
          title: "通过",
          value: 1,
        },
        {
          title: "驳回",
          value: 2,
        },
        {
          title: "撤销",
          value: 3,
        },
      ], // 筛选条件数组

      dialogTableVisible: false, // 对话框
      dialogReason: false, // 对话框

      // 播放器
      aplayerSpeedNum: "1", //点击字体更换
      tablist: [],
      transcriptionlist: [], // 转写内容
      Broadcastaddress: "", // 录音地址
      roleSelectArr: [0], // 当前选中的角色标记点

      logList: [], // 日志列表页面
      scopeInfo: {}, // 查看弹窗的数据
      littPermitBtn: [], // 标记顾问的权限
      rejectReason: "", // 驳回原因
      index: 0, // 当前查看的列表下标
      digloading: false, // 加载动画
    };
  },

  computed: {
    ...mapGetters(["permissions"]),

    // 是否有审核权限
    checkPermitBtn() {
      return (name) => {
        return this.permissions[name] ? true : false
      };
    },

    // 是否有审核权限(小程序)
    checkPermitBtns() {
      return (name) => {
        let index = this.littPermitBtn.findIndex((item) => item.permission == name);
        return index != -1;
      };
    },

    // 是否展示改角色
    isShowRole() {
      return (data) => {
        if (this.roleSelectArr.findIndex((item) => item == 0) != -1) {
          return true;
        } else {
          let index = this.roleSelectArr.findIndex(
            (item) => item == data.speaker
          );
          if (index != -1) {
            return true;
          } else {
            return false;
          }
        }
      };
    },
  },

  mounted() {
    this.getPageList();
    this.getFindHouseListByAccount();
  },

  methods: {
    handleSelect(e) {
      this.params.auditStatus = e;
      this.getPageList();
    },
    // 下一页
    nextPage() {
      if (this.index == this.tableData.length - 1) {
        this.$message.error("已经是最后一条了~");
        return;
      }
      let obj = {
        $index: this.index + 1,
        row: this.tableData[this.index + 1],
      };
      this.Toview(obj);
    },

    // 上一页
    proPage() {
      if (this.index == 0) {
        this.$message.error("已经到头了~");
        return;
      }
      let obj = {
        $index: this.index - 1,
        row: this.tableData[this.index - 1],
      };
      this.Toview(obj);
    },

    cancelDialogReason() {
      this.dialogReason = false;
      this.rejectReason = "";
    },
    // 驳回原因填写
    rejectReasonTips(status) {
      this.dialogReason = true;
    },

    // 改状态
    changeAuditStatus(status) {
      if (status == 2 && !this.rejectReason) {
        this.$message.error("请输入无效原因");
        return;
      }
        this.$api.http.updateReception({
            id: this.scopeInfo.id,
            auditStatus: status,
            rejectReason: this.rejectReason, // 驳回原因
          }).then((res) => {
          if (res.code == 10000) {
            this.$message.success(res.message)
            if (status == 2) this.dialogReason = false;
            this.resetAuditParams();
            this.getPageList();
          } else {
            this.$message.error(res.message)
          }
        });
    },
    // 重置参数
    resetAuditParams() {
      this.dialogTableVisible = false;
      this.rejectReason = "";
      this.scopeInfo = {};
    },
    // 获取项目列表
    getFindHouseListByAccount() {
      this.$api.http.InvalidFindHouseListByAccount().then((res) => {
        if (res.code == 10000) {
          this.projectList = res.data;
        }
      });
    },
    // 获取待审核列表
    getPageList() {
      this.loading = true;
      this.tableData = [];
      this.$api.http
        .InvalidReceptionGetList(this.params)
        .then((result) => {
          this.loading = false;
          if (result.code == 10000) {
            this.tableData = result.data.records;
            this.total = result.data.total;
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },

    Toview(scope) {
      console.log(scope.row, "asdjkadlksajskl");
      this.digloading = true;
      this.index = scope.$index;
      this.scopeInfo = scope.row;
      this.Getsthetransliteratecontent(scope.row.customerId);
      this.findReceptionLog(scope.row.customerId);
    },
    //清空筛选条件
    Emptycondition() {
      for (let i in this.params) {
        if (i == "pageNum") this.params[i] = 1;
        if (i == "pageSize") this.params[i] = 10;
        if (i != "menu" && i != "pageNum" && i != "pageSize")
          this.params[i] = "";
      }
      this.customtime = [];
      this.$forceUpdate();
    },

    // tab选项 清空时间条件
    tabtimetap() {
      this.params.startTime = "";
      this.params.endTime = "";
      this.customtime = [];
      this.getPageList();
    },

    // 时间选择器选中
    confirmtime() {
      if (this.customtime.length) {
        this.params.startTime = this.customtime[0];
        this.params.endTime = this.customtime[1];
      }
    },

    handleSizeChange(val) {
      console.log("每页条" + val);
      this.params.pageSize = val;
      this.getPageList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getPageList();
    },

    /*** 弹窗所用方法 ***/

    // 切换角色
    tapspagek(data, index) {
      if (index == 0) this.resetTabList();
      else this.resetAll();
      data.select = !data.select;

      this.roleSelectArr = [];
      if (index != 0) {
        this.tablist.forEach((item) => {
          if (item.select) {
            this.roleSelectArr.push(item.speaker);
          }
        });
      } else {
        this.roleSelectArr.push(0);
      }
      this.$forceUpdate();
    },

    // 选中全部时互斥全部选项与角色选项
    resetTabList() {
      this.tablist.forEach((item) => {
        item.select = false;
      });
    },

    // 选中角色时将全部反选
    resetAll() {
      this.tablist[0].select = false;
    },

    // 生成角色列表
    creatTabList(num) {
      for (var i = 0; i <= num; i++) {
        if (i === 0) {
          this.tablist.push({
            name: "全部",
            select: true,
            speaker: i,
          });
        } else {
          this.tablist.push({
            name: String.fromCharCode(i + 64),
            select: false,
            speaker: i,
          });
        }
      }
    },

    // 获取日志列表
    findReceptionLog(id) {
      this.$api.http
        .InvalidFindReceptionLog({
          customerId: id,
        })
        .then((res) => {
          console.log(res, "daskjdsalkjdklsajkld");
          if (res.code == 10000) {
            // permitBtn 小程序权限，为了方便顾问上号撤销自己的
            this.digloading = false;
            this.logList = res.data.list;
            this.littPermitBtn = res.data.permitBtn;
          }
        });
    },

    //获取播播放地址和转写内容
    Getsthetransliteratecontent(isnull) {
      this.$api.http
        .InvalidFindBycusId({
          cusId: isnull,
        })
        .then((res) => {
          console.log("adjkaljdklsalkd", res);
          if (res.code == 0) {
            this.dialogTableVisible = true; // 请求成功后打开弹窗
            this.tablist = [];
            res.data[0].audioContent != ""
              ? (this.transcriptionlist = JSON.parse(res.data[0].audioContent))
              : (this.transcriptionlist = []);
            this.Broadcastaddress = res.data[0].recordPath;
            this.creatTabList(Number(res.data[0].speakerNum) || 0);
            if (res.data[0].speaker) {
              this.tablist[res.data[0].speaker].name =
                this.tablist[res.data[0].speaker].name + "顾问";
              this.roleindexbiaoji = res.data[0].speaker - 1;
              this.dshfkjsdkksodofydwfkhwdfkjh = res.data[0].speaker - 1;
            }
            this.bofangchushihua();
          }
        })
        .catch((e) => {});
    },
    //播放实例
    bofangchushihua() {
      let that = this;
      this.$nextTick(() => {
        this.aplayer = new APlayer({
          container: document.getElementById("aplayer"),
          theme: "#2671E2",
          audio: [
            {
              url: that.Broadcastaddress,
              cover:
                "https://qufang.oss-cn-beijing.aliyuncs.com/recording/1626251359408.png",
            },
          ],
        });
        //结束的回调
        this.aplayer.on("ended", function () {
          console.log("player ended");
        });
        this.aplayer.on("timeupdate", function () {
          that.drawActive(that.aplayer.audio.currentTime * 1000);
        });

        this.digloading = false;
      });
    },
    //倍速更改
    aplayerSpeed(num) {
      //更改倍速
      this.aplayer.audio.playbackRate = num;
      this.aplayerSpeedNum = num;
    },
    //音频播放中
    drawActive(playTime) {
      var that = this;
      that.playNow = playTime;
      $(".center .text").each(function (index) {
        if (this.dataset.bg < playTime && playTime < this.dataset.ed) {
          $(this).addClass("activecoloc");
          that.$nextTick(() => {
            document.querySelector(".center").scrollTop =
              $(".center .activecoloc")[0].offsetTop - 260;
          });
        } else {
          $(this).removeClass("activecoloc");
        }
      });
    },
    // 录音暂停播放
    changePlayState() {
      this.wavesurfer.playPause();
    },
    //倍速
    Timesthespeed(rate) {
      this.wavesurfer.setPlaybackRate(rate);
    },
    //点击播放
    tabseek(item) {
      this.centerindex = 0;
      let num = parseInt(item.transferContent.bg / 1000);
      this.aplayer.seek(num);
      this.aplayer.play();
    },
    //检查是否播放
    Checktoseeifitsplaying() {
      if (this.audioPlay == true) {
        this.wavesurfer.playPause();
      }
    },
    //下载
    download() {
      exportMethodPost(`/zk/file/filedownload?videoSrc=${this.Broadcastaddress}`,'接待录音', {})
      // window.location.href =
      //   "${jypath}/zk/file/filedownload?videoSrc=" + this.Broadcastaddress;
    },

    // 播放
    play(item) {
      let num = parseInt(item.bg / 1000);
      this.aplayer.seek(num);
      this.aplayer.play();
    },
  },

  filters: {
    //审核状态auditStatus;     //审核状态  0:待审核，1:通过审核，2:审核驳回，3:已撤销
    statusText(i) {
      let str = "";
      switch (Number(i)) {
        case 0:
          str = "待审核";
          break;
        case 1:
          str = "通过审核";
          break;
        case 2:
          str = "审核驳回";
          break;
        case 3:
          str = "已撤销";
          break;
        default:
          str = "";
          break;
      }
      return str;
    },

    // ASCII码转换 大写字母A是65 演讲人是从1开始所以num+64
    toCapital(num) {
      let str = "";
      if (num) {
        str = String.fromCharCode(num + 64);
      }
      return str;
    },

    textauditStatus(text) {
      let str = "";
      switch (Number(text)) {
        case 0:
          str = "";
          break;
        case 1:
          str = "审核通过";
          break;
        case 2:
          str = "驳回";
          break;
        default:
          str = "";
          break;
      }
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  padding: 20px;
  width: 100%;
}

.app-titel {
  width: 100%;
  height: 180px;
  background: #ffffff;
  padding-top: 26px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

.screeningbox {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
}

.screeningboxlebl {
  min-width: 104px;
  text-align: right;
  font-size: 16px;
  color: #32363d;
}

.inputbox {
  width: 160px;
  height: 32px;
  background: #ffffff;
}

.el-input__inner {
  height: 32px;
}

.el-input__suffix {
  top: 6px;
}

.el-date-editor .el-range__icon {
  line-height: 25px;
}

.el-date-editor .el-range-separator {
  line-height: 25px;
}

.button1 {
  padding-left: 16px;
  padding-right: 16px;
  height: 32px;
  line-height: 32px;
  background: #2671e2;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.app-box {
  width: 100%;
  min-height: 300px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 20px 20px 40px;
  margin-top: 20px;
}

.el-table thead {
  background: #e0e0e0;
}

.block {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.blockbox {
  margin-left: auto;
}

.el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
  margin: 3px;
}

.screeningbox .el-select .el-select__tags {
  flex-wrap: unset !important;
  overflow: auto !important;
}

.screeningbox .el-select .el-select__tags::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color: red;
}

.screeningbox .el-select .el-select__tags::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.screeningbox .el-select .el-select__tags::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #fff;
  background-color: #2671e2;
  border-color: #2671e2;
  -webkit-box-shadow: -1px 0 0 0 #2671e2;
  box-shadow: -1px 0 0 0 #2671e2;
}

.appcenter {
  width: 100%;
  height: 600px;
  position: relative;
}

.btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn .btns {
  margin: 0 10px;
  width: 75px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #2671e2;
  color: #fff;
  border-radius: 8px;
  border: 1px solid #2671e2;
  cursor: pointer;
}

.btn .cen {
  background: #fff;
  color: #333;
  border-radius: 8px;
  border: 1px solid #333;
}

.btns-line {
  background: #fff;
  color: #333;
  border: 1px solid #333;
  border-radius: 8px;
}

.btn .pass {
  background: #00b83f;
  border: 1px solid #00b83f;
}

.btn .rejued {
  background: #f76c6c;
  border: 1px solid #f76c6c;
}

.bottom {
  padding: 0 5px 0 0;
  width: 100%;
  height: 82px;
  position: relative;
  border-radius: 8px;
  background: #fff;
}

.aplayer {
  box-shadow: none;
  /*width: 80%;*/
  width: 95.3%;
}

.aplayer-author {
  display: none;
}

.aplayer .aplayer-pic {
  width: 60px;
  height: 60px;
  margin-left: 10px;
}

.aplayerSpeed {
  display: flex;
  /*justify-content: space-around;*/
  justify-content: space-between;
  padding: 0 10px;
  font-size: 14px;
  color: #999;
  /*width: 616px;*/
  width: 86.5%;
  margin: 0 auto;
  position: absolute;
  left: 70px;
  top: 50px;
}


/deep/.aplayer-info {
  padding: 22px 7px 0px 10px;
}

/deep/.aplayer-pic {
  width: 60px !important;
  height: 60px !important;
}

/deep/.aplayer-music {
  display: none !important;
}


.aplayer-controller {
  margin-top: 15px;
}

.aplayerSpeedFont {
  color: #2671e2;
}

.righttit {
  width: 100%;
  height: 57px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
}

.righttittab {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.righttittab div {
  height: 57px;
  line-height: 57px;
  font-size: 16px;
  text-align: center;
}

.tophove {
  color: #2671e2 !important;
  border-bottom: 2px solid #2671e2;
  font-weight: bold;
}

.applefttop {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

#waveform {
  height: 128px;
}

.wavebottombox {
  width: 100%;
  height: 47px;
  display: flex;
  color: #ffffff;
  align-items: center;
  font-size: 16px;
  overflow: hidden;
}

.wavebottombox div {
  line-height: 47px;
  height: 100%;
  display: flex;
  align-items: center;
}

.audioPlay {
  width: 30px;
  height: 30px;
  margin-left: 5%;
}

.fromobj {
  width: 95%;
  height: 56px;
  margin: 0 auto;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

.fromobjleab {
  width: 25%;
  height: 100%;
  line-height: 56px;
  font-size: 16px;
  color: #666666;
}

.fromobjvalue {
  width: 75%;
  height: 100%;
  line-height: 56px;
  color: #32363d;
  font-size: 16px;
}

.Withanewline {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.Withanewline div {
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  color: #2671e2;
  margin-left: 25px;
  background: #f4f8fd;
  margin-top: 20px;
}

.ratebox {
  width: 100%;
  height: calc(100vh - 150px);
  padding-bottom: 50px;
  overflow-y: scroll;
}

.mydesc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px;
  height: 40px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.rateboxtit {
  width: 100%;
  height: 56px;
  display: flex;
}

.rateboxtit > div {
  flex: 1;
  height: 100%;
  line-height: 56px;
  color: #333333;
  font-size: 16px;
  text-align: center;
}

.rateboxcenttit {
  flex: 1;
  height: 44px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 16px;
}

.rateboxcenttit > div {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rateboxcent {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f8f8f8;
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 14px;
}

.rateboxcent > div {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratebutton {
  width: 68px;
  height: 26px;
  background: #2671e2;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 26px;
  margin: 0 auto;
}

.ratebutton1 {
  width: 68px;
  height: 26px;
  background: #f2f2f2;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  text-align: center;
  line-height: 26px;
  margin: 0 auto;
}

.arrow1 {
  width: 18px;
  height: 18px;
}

.fromobjdd {
  width: 95%;
  min-height: 56px;
  margin: 0 auto;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  font-size: 16px;
}

.fromobjleabdd {
  min-width: 80px;
  height: 56px;
  line-height: 56px;
  color: #666666;
}

.fromobjvaluedd {
  width: 75%;
  padding-bottom: 14px;
}

.fromobjvaluedd123 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.fromobjvaluedd1234 {
  margin-right: 12px;
  height: 28px;
  background: #f4f8fd;
  border-radius: 2px;
  line-height: 28px;
  padding-right: 10px;
  padding-left: 10px;
  color: #2671e2;
  margin-top: 16px;
  font-size: 14px;
}

.fromobjvaluedd1235 {
  margin-right: 12px;
  height: 28px;
  background: #999999;
  border-radius: 2px;
  line-height: 28px;
  padding-right: 10px;
  padding-left: 10px;
  color: #ffffff;
  margin-top: 16px;
  font-size: 14px;
}

.text {
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  display: flex;
  align-items: center;
  margin: 25px 0px;
}

.text[data-speaker="2"],
.text[data-speaker="4"],
.text[data-speaker="6"] {
  flex-direction: row-reverse;
  text-align: left;
}

.content123 {
  cursor: pointer;
}

.content123 div.speaker-text {
  font-size: 18px;
  padding: 5px 14px;
  color: #32363d;
  background: #f4f5f7;
  border-radius: 8px;
  margin: 0 20px;
  line-height: 1.5;
  max-width: 365px;
}

.log-list {
  width: 30%;
  padding: 20px 10px;
}

.log-lists {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

/*滚动条样式*/
.log-lists::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.log-lists::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.log-lists::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.center {
  height: 400px;
  overflow-y: scroll;
}

/*滚动条样式*/
.center::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.center::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.center::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.center .text .avatar {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center .text .avatar img {
  width: 32px;
  height: 32px;
  display: block;
}

.center .text .avatar div {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  font-size: 24px;
}

.textRight .content123 .speaker-texts {
  flex-direction: row-reverse;
}

.textRight .content123 div.speaker-text {
  color: #32363d;
  background: #f4f5f7;
  margin: 0 0 0 20px;
}

.textRight .avatar {
  margin-right: 15px;
}

.speaker-texts {
  display: flex;
  align-items: center;
}

.play {
  width: 24px;
  height: 24px;
}

.play img {
  width: 100%;
  height: 100%;
}

.text.activecoloc .content123 div.speaker-text {
  color: rgb(38, 113, 226);
}

.textRight.activecoloc .content123 div.speaker-text {
  color: #ff7538;
}

/*对话的标签标识*/
.content123 .showmark {
  font-size: 14px;
  max-width: 300px;
  min-height: 20px;
  line-height: 20px;
  margin: 10px 22px 0;
}

.content123 .showmark .mark-item {
  display: flex;
  margin-bottom: 2px;
}

.content123 .showmark .mark-item .markicon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.content123 .showmark .mark-item .marktext {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3e50e8;
  line-height: 18px;
  word-break: break-all;
}

.textRight .content123 .showmark {
  margin: 10px 22px 0 2px;
}

.inputbox {
  width: 180px;
  height: 32px;
  background: #ffffff;
  margin-left: 16px;
}

.searchbox .avatar img {
  /*width: 53px;*/
  /*height: 53px;*/
  width: 32px;
  height: 32px;
  display: block;
}

.searchbox .avatar {
  width: 40px;
  height: 40px;
  /*background-color: #f2f2f2;*/
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tapClick {
  border-bottom: 1px solid #ccc;
  height: 50px;
}

.headboxbott {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
}

.headovfu {
  flex: 1;
  height: 40px;
  overflow: hidden;
  margin-top: 10px;
}

.headpade {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #d6d6d6;
}

.biaoji {
  width: 70px;
  height: 30px;
  background: #e6625b;
  border-radius: 24px;
  text-align: center;
  line-height: 30px;
  color: #ffffff;
}

.biaoji1 {
  width: 70px;
  height: 30px;
  /* background: #ccc; */
  border-radius: 24px;
  text-align: center;
  line-height: 30px;
  color: #666;
  margin-left: 10px;
  flex-shrink: 0;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

.inner-container {
  overflow-x: scroll;
  height: 40px;
}

/*滚动条样式*/
.inner-container::-webkit-scrollbar {
  /*width: 4px;*/
  height: 4px;
}

.inner-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.inner-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.viewclace {
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 14px;
  margin-right: 34px;
  margin-top: 16px;
  font-size: 16px;
  border: 1px solid;
  padding-left: 18px;
  padding-right: 18px;
}

.bosdttom {
  color: #ffffff;
  background-color: #2671e2;
}

.pingfenbox {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
}

.pingfenbox div {
  flex: 1;
  text-align: center;
}

.activecllasscet {
  background: #2671e2;
  color: #ffffff;
}

.roleindexclass {
  color: #2671e2;
  font-weight: bold;
}

.adjskdjroleindexclass {
  background: #3ca953 !important;
  color: #ffffff !important;
}

/*话术*/
.huashu-title {
  background: #fff;
  font-size: 16px;
  line-height: 20px;
  padding: 10px 20px;
}

.huashu {
  width: 400px;
  padding: 0 20px 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #fff;
}

.huashu .huashu-item {
  margin-right: 20px;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
}

.huashu .huashu-item .text {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
}

.hahaha .el-dialog__body {
  padding: 0 20px !important;
}

.hahaha .el-dialog__footer {
  padding: 10px 20px !important;
}

.el-step__icon.is-text {
  border: none;
}

.elmenus .el-menu-demo {
  border-bottom: none;
}
</style>