zkPCproject/src/views/Receive/index.vue

<template>
  <div class="box-center" style="cursor: pointer">
    <div class="biaotibox">
      <div>客户接待详情</div>
      <div><i @click="gojianyi()" class="el-icon-close"></i></div>
    </div>
    <div class="topbox">
      <div class="topzuo">
        <div class="title" style="display: flex">
          <div style="flex: 1">
            <span class="span1"
              >{{
                userinformationlist.visitRecord == 1
                  ? "首"
                  : userinformationlist.visitRecord || ""
              }}次到访</span
            >
            <span class="span2">
              {{ yibiaoji || "" }}&nbsp;&nbsp;{{
                userinformationlist.validInvalidName || ""
              }}
            </span>
          </div>
          <div style="width: 120px; display: flex; color: #2671e2">
            <div v-if="rec_index_addJ" @click="Addtodigest()">加精</div>
            <div
              v-if="rec_index_receflag"
              style="margin-left: 20px"
              @click="alllogo()"
            >
              {{ userinformationlist.validInvalidName }}
            </div>
          </div>
        </div>
        <div class="title" style="margin-top: 6px">
          <span class="span3">{{ userinformationlist.name || "" }}</span>
          <span class="span2">{{ userinformationlist.createTime || "" }}</span>
        </div>
        <div style="display: flex; width: 100%">
          <div class="aplayer" id="aplayer"></div>
          <div style="margin-left: -5px; margin-top: 21px" @click="download()">
            <img
              style="width: 12px; height: 12px"
              src="/img/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">
              {{ aplayerId / 1 + 1 + "/" + aplayerLength }}
            </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 class="topyou">
        <div style="font-size: 16px">
          客户：<span style="color: #2671e2">{{
            userinformationlist.name || ""
          }}</span>
        </div>
        <div style="display: flex; font-size: 15px; margin-top: 8px">
          <div style="width: 50%">
            <div>负责顾问：{{ userinformationlist.agentName || "" }}</div>
            <div style="margin-top: 8px">
              客户等级：
              <span v-if="userinformationlist.level"></span>
              <span v-if="userinformationlist.level == 1">A</span>
              <span v-if="userinformationlist.level == 2">B</span>
              <span v-if="userinformationlist.level == 3">C</span>
              <span v-if="userinformationlist.level == 4">D</span>
            </div>
          </div>
          <div style="width: 50%">
            <div>到访次数：{{ userinformationlist.visitRecord || "" }}次</div>
            <div style="margin-top: 8px">客户阶段：</div>
          </div>
        </div>
        <div style="font-size: 15px; margin-top: 8px">
          最近到访时间：{{ userinformationlist.createTime || "" }}
        </div>
      </div>
    </div>

    <div class="topbox1">
      <div class="topzuo">
        <div class="topzuo-zuo">
          <div class="zuo-titbox">
            <div class="searchbox">
              <div style="flex: 1">
                <div
                  style="width: 96%; display: flex; margin: 0 auto"
                  @click="searchtab()"
                >
                  <div class="input">请输入关键词</div>
                  <div class="input2">搜索</div>
                </div>
              </div>
              <div
                v-if="rec_index_textyh"
                style="
                  width: 100px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div class="searchbutt" @click="texttap()">文本优化</div>
              </div>
            </div>
            <div class="headboxbott">
              <div class="headovfu">
                <div style="width: 100%; display: flex" class="inner-container">
                  <div
                    @click="tapspagek(index)"
                    :class="{ roleindexclass: roleindex == index }"
                    class="biaoji1"
                    v-for="(item, index) in tablist"
                    :key="index"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div v-if="rec_index_flag" class="headpade">
                <div class="biaoji" @click="biaoji()">标记</div>
              </div>
            </div>
            <div style="width: 100%">
              <!-- v-bind:style="{ height: condivhe + 'px' }" -->
              <div class="center2" id="center2">
                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 0"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <div v-if="item.speaker == 1">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>A</div>
                    </div>
                    <div v-if="item.speaker == 2">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>B</div>
                    </div>
                    <div v-if="item.speaker == 3">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>C</div>
                    </div>
                    <div v-if="item.speaker == 4">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>D</div>
                    </div>
                    <div v-if="item.speaker == 5">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>E</div>
                    </div>
                    <div v-if="item.speaker == 6">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>F</div>
                    </div>
                    <div v-if="item.speaker == 7">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>G</div>
                    </div>
                    <div v-if="item.speaker == 8">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>H</div>
                    </div>
                    <div v-if="item.speaker == 9">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>I</div>
                    </div>
                    <div v-if="item.speaker == 10">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>J</div>
                    </div>
                    <div v-if="item.speaker == 11">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>K</div>
                    </div>
                    <div v-if="item.speaker == 12">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>L</div>
                    </div>
                    <div v-if="item.speaker == 13">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>M</div>
                    </div>
                    <div v-if="item.speaker == 14">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>N</div>
                    </div>
                    <div v-if="item.speaker == 15">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>O</div>
                    </div>
                    <div v-if="item.speaker == 16">
                      <img
                        style="margin: 0 auto"
                        v-if="item.isShow == 1"
                        src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                        alt=""
                      />
                      <div v-else>P</div>
                    </div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 1 && item.speaker == 1"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>A</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 2 && item.speaker == 2"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>B</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 3 && item.speaker == 3"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>C</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 4 && item.speaker == 4"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>D</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 5 && item.speaker == 5"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>E</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 6 && item.speaker == 6"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>F</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 7 && item.speaker == 7"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>G</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 8 && item.speaker == 8"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>H</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 9 && item.speaker == 9"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>I</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 10 && item.speaker == 10"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>J</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 11 && item.speaker == 11"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>K</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 12 && item.speaker == 12"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>L</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 13 && item.speaker == 13"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>M</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 14 && item.speaker == 14"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>N</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 15 && item.speaker == 15"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>O</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>

                <div
                  class="text"
                  :data-bg="item.bg"
                  :data-ed="item.ed"
                  v-if="roleindex == 16 && item.speaker == 16"
                  v-for="(item, index) in transcriptionlist"
                  :key="index"
                  :data-speaker="item.speaker"
                >
                  <div class="avatar">
                    <img
                      v-if="item.isShow == 1"
                      src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                      alt=""
                    />
                    <div v-else>P</div>
                  </div>
                  <div
                    class="content123"
                    @click="checkMsg(item, index)"
                    style="cursor: pointer"
                  >
                    <div
                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
                      v-html="item.onebest"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="topzuo-you" style="overflow-y: auto">
          <div
            style="
              width: 100%;
              height: 44px;
              border-bottom: 1rpx solid #e0e0e0;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #e0e0e0;
            "
          >
            <div
              style="flex: 1; font-size: 16px; color: #333333; text-indent: 5%"
            >
              客户意向
            </div>
            <div
              v-if="rec_index_makesure"
              style="flex: 1; font-size: 16px; color: #2671e2; text-indent: 70%"
              @click="Acqtap()"
            >
              校准
            </div>
          </div>
          <div class="pingfenbox">
            <div
              :class="{ activecllasscet: kehuyixiangcenterindex == 0 }"
              @click="customerofintention(0)"
            >
              系统分析
            </div>
            <div
              :class="{ activecllasscet: kehuyixiangcenterindex == 1 }"
              @click="customerofintention(1)"
            >
              人工校准
            </div>
          </div>
          <div
            v-if="Getintentionlist && Getintentionlist.length == 0"
            style="width: 100%; text-align: center; line-height: 100px"
          >
            暂无数据
          </div>
          <div v-else>
            <div
              class="intentionBox"
              v-for="(item, index) in Getintentionlist"
              :key="index"
            >
              <div class="intentionName">{{ item.name }}</div>
              <div class="intentionChe" v-if="kehuyixiangcenterindex == 0">
                <div
                  v-for="(funche, i) in item.newchildren"
                  :key="i"
                  v-if="funche.showType == 0"
                >
                  {{ funche.name }}
                </div>
                <div
                  class="intentionview"
                  v-for="(funche, i) in item.newchildren"
                  :key="i"
                  v-if="funche.showType == 1"
                >
                  {{ funche.name }}
                </div>
              </div>
              <div class="intentionChe" v-if="kehuyixiangcenterindex == 1">
                <div
                  v-for="(funche, i) in item.newchildren"
                  :key="i"
                  v-if="funche.showType == 0"
                >
                  {{ funche.name }}
                </div>
                <div v-for="(funche, i) in item.newchildren" :key="i">
                  {{ funche.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="topyou">
        <div class="pingfenbox">
          <div
            :class="{ activecllasscet: zhixingcenterindex == 0 }"
            @click="recordclick(0)"
          >
            销讲总执行率{{ userinformationlist.fraction || 0 }}%
          </div>
          <div
            v-if="rec_index_todo"
            :class="{ activecllasscet: zhixingcenterindex == 1 }"
            @click="recordclick(1)"
          >
            禁忌执行
          </div>
        </div>
        <div v-if="zhixingcenterindex == 0">
          <div
            style="
              width: 100%;
              height: 44px;
              border-bottom: 1rpx solid #e0e0e0;
              display: flex;
              align-items: center;
            "
          >
            <div
              style="
                width: 60%;
                font-size: 16px;
                color: #333333;
                text-indent: 20px;
              "
            >
              指标
            </div>
            <div style="width: 40%; flex: 1; font-size: 16px; color: #333333">
              <div style="width: 60px; text-align: center">执行</div>
            </div>
          </div>
        </div>

        <!-- v-bind:style="{ height: zxldivhe + 'px' }" -->
        <div id="zxldiv" v-if="zhixingcenterindex == 0">
          <div class="zxlBox" v-for="(item, index) in ratelist" :key="index">
            <div class="zxlLev1" @click="changeshow(index)">
              <div style="width: 60%" class="zxlLev1box">
                {{ item.name }}
                {{
                  ((item.ratepercent / item.rate).toFixed(2) * 100).toFixed()
                }}%
              </div>
              <div style="width: 40%">
                <div style="width: 60px; text-align: center">
                  <i
                    v-if="item.show == true"
                    style="font-size: 18px"
                    class="el-icon-arrow-up"
                  ></i>
                  <i
                    v-if="item.show == false"
                    style="font-size: 18px"
                    class="el-icon-arrow-right"
                  ></i>
                </div>
              </div>
            </div>
            <div
              class="zxlLev2"
              v-if="item.show"
              v-for="(subitem, i) in item.children"
              :key="i"
            >
              <div style="width: 60%" class="zxlLev2tit">
                {{ subitem.name }}
              </div>
              <div style="width: 40%; display: flex; align-items: center">
                <div class="zxlzx" v-if="!subitem.selected">执行</div>
                <div v-else class="zxlzx2">未执行</div>
              </div>
            </div>
          </div>
        </div>

        <div
          id="zxldiv"
          v-if="zhixingcenterindex == 1"
          style="padding: 0px 10px 10px 10px"
        >
          <div
            style="margin-top: 10px"
            v-for="(item, index) in prohibitedlist"
            :key="index"
          >
            {{ index + 1 }}、{{ item }}
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="加入常错词"
      :visible.sync="dialogFormVisible"
      width="500px"
      center
      :close-on-click-modal="false"
      @close="$refs.form.resetFields()"
    >
      <el-form :model="form" ref="form" label-width="80px" :rules="rules">
        <el-form-item label="常错词" prop="wrongWord">
          <el-input v-model="form.wrongWord" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="正确词" prop="correctWord">
          <el-input v-model="form.correctWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMsg">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="标记顾问"
      :visible.sync="dialogFormVisible11"
      center
      width="500px"
      :close-on-click-modal="false"
    >
      <div
        style="
          width: 95%;
          display: flex;
          flex-wrap: wrap;
          margin: 0 auto;
          padding-top: 30px;
          padding-bottom: 30px;
        "
      >
        <div
          class="viewclace"
          :class="roleindexbiaoji == index ? 'bosdttom' : ''"
          @click="biaojixuanze(index)"
          v-for="(item, index) in tablist.slice(1, tablist.length)"
          :key="index"
        >
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="unmarktap()">取 消</el-button>
        <el-button type="primary" @click="subMsg11">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="校准"
      :visible.sync="dialogFormVisible12"
      center
      width="500px"
      :close-on-click-modal="false"
    >
      <div style="height: 400px; width: 100%; overflow: auto">
        <div
          class="intentionBox"
          v-for="(item, index) in Acquirecustomerintentlist2"
          :key="index"
        >
          <div class="intentionName">{{ item.name }}</div>
          <div class="intentionChe2">
            <div
              v-for="(item1, i) in item.children"
              :key="i"
              @click="Edittag(item, item1, index, i)"
              :style="{
                border:
                  item1.selected == 0
                    ? '1px solid #0A6EE9'
                    : '1px solid #E0E0E0',
              }"
            >
              {{ item1.label }}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible12 = false">取 消</el-button>
        <el-button type="primary" @click="intentlist2click()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="接待标记"
      :visible.sync="dialogFormVisible13"
      center
      width="500px"
      :close-on-click-modal="false"
    >
      <div style="width: 80%; margin: 0 auto; font-size: 30px">
        <div>
          <el-radio v-model="effectiveindex" label="1">没电指派无录音</el-radio>
          <el-radio v-model="effectiveindex" label="2">离线指派无录音</el-radio>
        </div>
        <div>
          <el-radio v-model="effectiveindex" label="3">系统测试误操作</el-radio>
          <el-radio v-model="effectiveindex" label="4">非接访场景录音</el-radio>
        </div>
        <div>
          <el-radio v-model="effectiveindex" label="5">其他</el-radio>
        </div>
        <div v-if="effectiveindex == 5">
          <textarea
            v-model="effectiveitext"
            style="
              width: 100%;
              margin-top: 6px;
              border: 1px solid #e0e0e0;
              height: 100px;
              padding: 10px;
              font-size: 16px;
            "
            name=""
            placeholder="备注"
            cols="30"
            rows="10"
          ></textarea>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible13 = false">取 消</el-button>
        <el-button type="primary" @click="effectiveAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <div
      v-if="dialogFormtext"
      @click="dialogFormtext = false"
      id="zhezhao"
    ></div>
    <div v-if="dialogFormtext" class="auDivhhh">
      <div
        style="
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 20px;
          font-weight: 400;
        "
      >
        文本优化
      </div>
      <div
        class="center3"
        style="
          width: 95%;
          margin: 0 auto;
          border: 1px solid #e3e3e3;
          height: 430px;
          overflow-y: scroll;
        "
      >
        <div
          class="text"
          :data-bg="item.bg"
          :data-ed="item.ed"
          v-for="(item, index) in optimizetext"
          :key="index"
          :data-speaker="item.speaker"
        >
          <div class="buttonzu">
            <span style="cursor: pointer" @click="texteditor(item, index)"
              >纠正</span
            >
            &nbsp; &nbsp;
            <span style="cursor: pointer" @click="optimdel(index)">删除</span>
            <span
              style="cursor: pointer; margin-left: 10px"
              @click="editRole(item, index)"
              >修改角色</span
            >
          </div>
          <div class="avatar">
            <div v-if="item.speaker == 1">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>A</div>
            </div>
            <div v-if="item.speaker == 2">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>B</div>
            </div>
            <div v-if="item.speaker == 3">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>C</div>
            </div>
            <div v-if="item.speaker == 4">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>D</div>
            </div>
            <div v-if="item.speaker == 5">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>E</div>
            </div>
            <div v-if="item.speaker == 6">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>F</div>
            </div>
            <div v-if="item.speaker == 7">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>G</div>
            </div>
            <div v-if="item.speaker == 8">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>H</div>
            </div>
            <div v-if="item.speaker == 9">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>I</div>
            </div>
            <div v-if="item.speaker == 10">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>J</div>
            </div>
            <div v-if="item.speaker == 11">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>K</div>
            </div>
            <div v-if="item.speaker == 12">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>L</div>
            </div>
            <div v-if="item.speaker == 13">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>M</div>
            </div>
            <div v-if="item.speaker == 14">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>N</div>
            </div>
            <div v-if="item.speaker == 15">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>O</div>
            </div>
            <div v-if="item.speaker == 16">
              <img
                style="margin: 0 auto"
                v-if="item.isShow == 1"
                src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png"
                alt=""
              />
              <div v-else>P</div>
            </div>
          </div>
          <div class="content123" style="cursor: pointer">
            <div
              :class="{ adjskdjroleindexclass: item.isShow == 1 }"
              v-html="item.onebest"
            ></div>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          margin-top: 12px;
          height: 35px;
          align-items: center;
          justify-content: center;
        "
      >
        <el-button size="small" @click="savedraft(1)">保存并更新文本</el-button>
        <el-button size="small" type="primary" @click="savedraft(0)"
          >保存草稿</el-button
        >
        <el-button size="small" type="primary" @click="textrestore()"
          >恢复当前文本</el-button
        >
        <el-button size="small" @click="dialogFormtext = false">取消</el-button>
      </div>
    </div>

    <el-dialog
      title="纠正文本"
      :visible.sync="texteditorishow"
      center
      width="600px"
      :close-on-click-modal="false"
    >
      <div>
        <span>错误内容：</span>
        <span v-html="textareacuowu"></span>
      </div>
      <div style="margin-top: 10px">
        <div>纠正内容：</div>
        <div style="margin-top: 6px">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="texteditorishow = false">取消</el-button>
        <el-button type="primary" @click="summunct()">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="搜索"
      :visible.sync="searchisshow"
      center
      width="500px"
      :close-on-click-modal="false"
    >
      <div style="width: 100%; display: flex; height: 32px">
        <div style="width: 75%; height: 100%">
          <input
            @input="tabinput()"
            v-model="inputtest"
            class="inputclass"
            type="text"
            placeholder="请输入搜索内容"
          />
        </div>
        <div style="width: 25%; height: 100%">
          <div class="inputclass2" style="margin: 0 auto">搜索</div>
        </div>
      </div>
      <div style="height: 400px; width: 100%; overflow: auto; padding: 15px">
        <div
          class="searchbox54"
          v-for="(item, index) in Searchcontent"
          @click="tabseek(item)"
          :key="index"
          style="cursor: pointer"
        >
          <div>
            <div class="avatar">
              <div v-if="item.speaker == 1" style="color: #4f861e">A</div>
              <div v-if="item.speaker == 2" style="color: #4f861e">B</div>
              <div v-if="item.speaker == 3" style="color: #4f861e">C</div>
              <div v-if="item.speaker == 4" style="color: #60cbec">D</div>
              <div v-if="item.speaker == 5" style="color: #ec8b47">E</div>
              <div v-if="item.speaker == 6" style="color: #9f61c8">F</div>
              <div v-if="item.speaker == 7" style="color: #4980c8">G</div>
            </div>
          </div>
          <div>
            <div style="font-size: 14px">
              {{ formatTime(item.transferContent.bg) }}
            </div>
            <div
              style="padding-top: 4px; font-size: 14px"
              v-html="item.text"
            ></div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="searchisshow = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="角色纠正"
      :visible.sync="roleVisible"
      center
      width="600px"
      :close-on-click-modal="false"
    >
      <div style="margin-top: 10px; display: flex; align-items: center">
        <div style="line-height: 38px">角色纠正：</div>
        <el-select
          v-model="roleFlag"
          class="rolediv"
          placeholder="请选择"
          style="height: 38px; display: flex; align-items: center"
          filterable
        >
          <el-option
            v-for="(item, index) in roleList"
            :key="index"
            :label="item.name"
            :value="index"
          >
          </el-option>
        </el-select>

        <el-button type="primary" @click="addRole">新增角色</el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleVisible = false">取消</el-button>
        <el-button type="primary" @click="editSure()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";
import { mapGetters } from "vuex";
import { getStore, setStore } from "@/util/store";
export default {
  data() {
    return {
      roleVisible: false,
      roleFlag: "0",
      roleidx: "",
      roleList: [],
      dialogFormVisible: false,
      dialogFormVisible11: false,
      dialogFormVisible12: false,
      dialogFormVisible13: false,
      texteditorishow: false,
      searchisshow: false,
      effectiveindex: 1,
      effectiveitext: "",
      form: {
        correctWord: "", //正确词
        cupid: "",
        wrongWord: "", // 错词
        customerId: "",
      },
      rules: {
        correctWord: [
          { required: true, message: "请输入正确词", trigger: "blur" },
        ],
        wrongWord: [{ required: true, message: "请输入错词", trigger: "blur" }],
      },
      aplayer: null,
      aplayerSpeedNum: "1", //点击字体更换
      arr: [], //录音文件列表
      aplayerId: 0,
      aplayerLength: 0, //文件个数
      tablist: [
        { name: "全部" },
        { name: "A" },
        { name: "b" },
        { name: "c" },
        { name: "c" },
        { name: "c" },
        { name: "c" },
      ],
      roleindex: 0,
      zhixingcenterindex: 0,

      corpusId: 0, //录音文件id
      fileId: "", //客户id
      recordPath: "", //播放src
      transcriptionlist: [], //转写内容
      playNow: 0,
      userinformationlist: {}, //客户信息
      kehuyixiangcenterindex: 0,
      AudioIdx: 0, //录音文件顺序
      isd: "",
      dshfkjsdkksodofydwfkhwdfkjh: "",
      roleindexbiaoji: 0,
      aplayerSpeedNum: "1", //倍速字体更换
      Getintentionlist: [], //客户意向
      argtextindex: "", //常错词下标
      ratelist: [], //评分集合
      prohibitedlist: [], //违禁集合
      textItself: "", //原词内容
      Acquirecustomerintentlist2: [], //校准列表
      dialogFormtext: false,
      optimizetext: [], //文本优化list
      optimizeobj: {}, //文本优化obj
      textarea: "",
      textareacuowu: "",
      textareaindex: 0,
      Searchcontent: [],
      inputtest: "",
      info: {},
      yibiaoji: "",
      rec_index_flag: false,
      rec_index_addJ: false,
      rec_index_wrongword: false,
      rec_index_makesure: false,
      rec_index_todo: false,
      rec_index_receflag: false,
      rec_index_textyh: false,
    };
  },
  created() {
    this.rec_index_flag = this.permissions["rec_index_flag"]; //标记顾问
    this.rec_index_addJ = this.permissions["rec_index_addJ"]; //加精
    this.rec_index_wrongword = this.permissions["rec_index_wrongword"]; //常错词
    this.rec_index_makesure = this.permissions["rec_index_makesure"]; //校准
    this.rec_index_todo = this.permissions["rec_index_todo"]; //禁忌
    this.rec_index_receflag = this.permissions["rec_index_receflag"]; //接待标记
    this.rec_index_textyh = this.permissions["rec_index_textyh"]; //文本优化
  },
  mounted() {
    this.fileId = this.$route.query.flag;
    this.AudioIdx = this.$route.query.AudioIdx;
    this.info = getStore({ name: "userInfo" });
    this.init();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  destroyed() {
    this.aplayer.destroy();
  },
  methods: {
    editSure() {
      // console.log(this.roleFlag)
      // this.optimizetext
      // console.log(this.optimizetext[this.roleidx])
      // this.optimizetext[this.roleidx].speaker=this.roleFlag/1+1
      // this.optimizetext[this.roleidx].speaker=2
      // console.log(this.optimizetext[this.roleidx])
      // this.roleVisible=false
      let speaker = this.roleFlag / 1 + 1;
      // return
      let obj = {};
      obj = Object.assign({}, this.optimizetext[this.roleidx]);
      obj.onebest = obj.onebest.replace(/<.*?>/gi, "");
      let arr = [];
      arr.push(obj);
      // console.log(arr)
      axios({
        url: `autoSR/zk/file/updateRole`,
        method: "post",
        data: {
          speaker: speaker,
          corpusId: this.corpusId,
          transferContent: JSON.stringify(arr),
          customerId: this.fileId,
        },
      }).then((res) => {
        this.optimizetext[this.roleidx].speaker = this.roleFlag / 1 + 1;
        this.roleVisible = false;
      });
    },
    //修改角色
    editRole(item, idx) {
      // console.log(item,idx)
      // console.log(this.roleList)
      this.roleFlag = item.speaker - 1;
      // console.log(this.roleFlag)
      this.roleidx = idx;
      this.roleVisible = true;
    },
    gojianyi() {
      // console.log(this.$route);
      let tag = {
        group: [],
        label: "接待详情",
        params: {},
        query: this.$route.query,
        value: this.$route.fullPath,
      };
      // console.log(tag);
      this.$store.commit("DEL_TAG", tag);
      this.$router.go(-1); //返回上一层
    },
    //上一首
    aplayerChange(str) {
      this.aplayer.destroy();
      document.querySelector(".center2").scrollTop = 0;
      if (str == "add") {
        this.aplayerId++;
        if (this.aplayerId >= this.aplayerLength) {
          this.$message("没有下一首啦");
          this.aplayerId--;
          this.bofangchushihua();
          return;
        } else {
          this.arr[this.aplayerId].audioContent != ""
            ? (this.transcriptionlist = JSON.parse(
                this.arr[this.aplayerId].audioContent
              ))
            : (this.transcriptionlist = []);
          this.recordPath = this.arr[this.aplayerId].recordPath;
        }
      } else {
        this.aplayerId--;
        if (this.aplayerId < 0) {
          this.$message("没有上一首啦");
          this.aplayerId++;
          this.bofangchushihua();
          return;
        } else {
          this.arr[this.aplayerId].audioContent != ""
            ? (this.transcriptionlist = JSON.parse(
                this.arr[this.aplayerId].audioContent
              ))
            : (this.transcriptionlist = []);
          this.recordPath = this.arr[this.aplayerId].recordPath;
        }
      }
      this.bofangchushihua();
      this.aplayer.play();
    },
    //点击播放
    tabseek(item) {
      this.centerindex = 0;
      let num = parseInt(item.transferContent.bg / 1000);
      if (item.corpusId == this.arr[this.aplayerId].id) {
        this.aplayer.seek(num);
      } else {
        let idx = this.arr.findIndex((item1) => item1.id == item.corpusId);
        if (idx == -1) {
          this.$message("没有此条录音信息");
        } else {
          this.aplayerId = idx;
          this.aplayer.destroy();
          console.log(idx);
          this.transcriptionlist = JSON.parse(this.arr[idx].audioContent);
          this.recordPath = this.arr[idx].recordPath;
          this.bofangchushihua();
          this.$nextTick(() => {
            this.aplayer.audio.currentTime = num;
          });
        }
      }
      this.searchisshow = false;
      this.aplayer.play();
    },
    //点击搜索
    searchtab() {
      this.inputtest = "";
      this.Searchcontent = [];
      this.searchisshow = true;
    },
    tabinput() {
      if (this.inputtest == "") {
        return;
      } else {
        this.Searchcontent = [];
        this.$api.http
          .keyWordsMatching({
            keyword: this.inputtest,
            customerId: this.fileId,
          })
          .then((res) => {
            let list = res.data;
            // JSON.parse();
            list.map((item) => {
              item.transferContent = JSON.parse(item.transferContent);

              item.text = this.brightKeyword(item.transferContent.onebest);
            });
            this.Searchcontent = list;
          });
      }
    },
    //替换方法
    brightKeyword(val) {
      if (val.indexOf(this.inputtest) !== -1) {
        return val.replace(
          this.inputtest,
          "<text style='color: red'>" + this.inputtest + "</text>"
        );
      } else {
        return val;
      }
    },
    //文本恢复
    textrestore() {
      this.optimizeobj = {};
      this.optimizetext = [];
      this.$api.http
        .findText({ corpusId: this.arr[this.aplayerId].id })
        .then((res) => {
          console.log(res, "文本恢复");
          // return
          this.optimizeobj = res.data;
          this.optimizetext = JSON.parse(res.data.textContent);
        });
    },
    //保存并更新文本 保存草稿
    savedraft(i) {
      this.$api.http
        .saveText({
          saveType: i,
          corpusId: this.arr[this.aplayerId].id,
          id: this.optimizeobj.id,
          textContent: JSON.stringify(this.optimizetext),
        })
        .then((res) => {
          this.dialogFormtext = false;
          this.$message.success("优化完成");
          if (i == 1) {
            this.init();
          }
        });
    },
    //文本编辑确认
    summunct() {
      this.optimizetext[this.textareaindex].onebest = this.textarea;
      this.texteditorishow = false;
    },
    //文本编辑
    texteditor(item, index) {
      this.textarea = "";
      this.textareaindex = index;
      this.textareacuowu = item.onebest;
      this.texteditorishow = true;
    },
    //文本优化删除
    optimdel(i) {
      console.log(i);
      var that = this;
      this.$confirm("此操作将删除该条, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.optimizetext.splice(i, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          // });
        });
    },
    //获取文本
    texttap() {
      this.optimizeobj = {};
      this.optimizetext = [];
      this.$api.http
        .findText({ corpusId: this.arr[this.aplayerId].id })
        .then((res) => {
          console.log(res, "获取文本");
          this.optimizeobj = res.data;
          this.optimizetext = JSON.parse(res.data.textContent);
          this.dialogFormtext = true;
        });
    },
    // 接待标记
    alllogo() {
      if (this.userinformationlist.validInvalid != 0) {
        this.$confirm('是否标记为"有效录音"？', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api.http
              .updateValidInvalid({
                id: this.fileId,
                validInvalid: 0,
                invalidReason: "",
                houseId: localStorage.getItem("houseId"),
              })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.init();
              });
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消操作",
            // });
          });
      } else {
        this.dialogFormVisible13 = true;
      }
    },
    //无效标记
    effectiveAdd() {
      if (this.effectiveindex == 5) {
        if (this.effectiveitext.length == 0) {
          this.$message({
            type: "error",
            message: "备注不能为空!",
          });
          return;
        }
      }
      this.$api.http
        .updateValidInvalid({
          id: this.fileId,
          validInvalid: "",
          validInvalid: 1,
          invalidReason: Number(this.effectiveindex),
          invalidNote: this.effectiveitext,
          houseId: localStorage.getItem("houseId"),
        })
        .then((res) => {
          this.dialogFormVisible13 = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.init();
        });
    },

    //加精華
    Addtodigest() {
      var that = this;
      if (that.arr[that.aplayerId].status == 0) {
        that
          .$confirm("取消加精,是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            that.$api.http.delATD({ carId: that.fileId }).then((res) => {
              that.$message({
                type: "success",
                message: "操作成功!",
              });
              this.init();
            });
          })
          .catch(() => {
            // that.$message({
            //   type: "info",
            //   message: "已取消操作",
            // });
          });
      } else {
        that
          .$confirm("加精,是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            that.$api.http
              .addATD({ carId: that.fileId, status: 0 })
              .then((res) => {
                that.$message({
                  type: "success",
                  message: "加精成功!",
                });
                this.init();
              });
          })
          .catch(() => {
            // that.$message({
            //   type: "info",
            //   message: "已取消加精",
            // });
          });
      }
    },
    //确认校准
    intentlist2click() {
      let param = {
        keywordIds: "",
        id: this.fileId,
      };
      let str = [];
      this.Acquirecustomerintentlist2.map((item) => {
        item.children.map((item1) => {
          if (item1.selected == 0) {
            str.push(item1.keywordsId);
          }
        });
      });
      str = str.join(",");
      param.keywordIds = str;
      this.$api.http.updateManualCalibration(param).then((res) => {
        this.dialogFormVisible12 = false;
        this.findCARKeywords();
      });
    },
    // 选择校准
    Edittag(item, item1, index, i) {
      if (this.Acquirecustomerintentlist2[index].children[i].selected == 0) {
        this.Acquirecustomerintentlist2[index].children[i].selected = 1;
      } else {
        this.Acquirecustomerintentlist2[index].children[i].selected = 0;
      }
      this.$forceUpdate();
    },
    //获取校准列表
    Acqtap() {
      this.dialogFormVisible12 = true;
      this.$api.http
        .findSystemAnalysis({ customerId: this.fileId, type: 2 })
        .then((res) => {
          let newlist = res.data || [];
          if (newlist.length == 0) {
            this.$message.success("暂无数据");
          } else {
            newlist.forEach((item1) => {
              item1.children.map((item) => {
                if (item.isInterval == 0) {
                  item.label =
                    item.name + item.unit + "-" + item.endName + item.unit;
                } else {
                  item.label = item.name;
                }
                item.value = item.id;
              });
            });
            this.Acquirecustomerintentlist2 = newlist;
          }
        });
    },
    addRole() {
      console.log("添加角色");

      this.tablist.push({
        name: String.fromCharCode(this.tablist.length + 64),
      });
      this.roleList.push({
        name: String.fromCharCode(this.roleList.length + 65),
      });
    },
    //标记
    biaoji() {
      this.dialogFormVisible11 = true;
    },
    //取消标记
    unmarktap() {
      this.dialogFormVisible11 = false;
      this.roleindexbiaoji = this.dshfkjsdkksodofydwfkhwdfkjh;
    },
    // 标记选择
    biaojixuanze(index) {
      this.roleindexbiaoji = index;
    },
    //确认标记
    subMsg11() {
      var num = this.roleindexbiaoji + 1;
      this.$api.http
        .markConsultant({
          speaker: num,
          id: this.isd,
          customerId: this.fileId,
          houseId: localStorage.getItem("houseId"),
        })
        .then((res) => {
          this.dialogFormVisible11 = false;
          this.init();
          this.biaojiall();
          this.$message.success("保存成功");
        });
    },
    biaojiall() {
      this.$api.http
        .toMatchKeywords({
          carId: this.fileId,
        })
        .then((res) => {});
    },
    // 获取用户信息
    init() {
      this.$api.http
        .personalReceptionRecord({ customerId: this.fileId })
        .then((res) => {
          this.userinformationlist = res.data;
          this.userinformationlist.endTime =
            this.userinformationlist.endTime.substring(0, 19);
          if (this.userinformationlist.calibration == 0) {
            this.kehuyixiangcenterindex = 0;
          } else {
            this.kehuyixiangcenterindex = 1;
          }
          this.findCARKeywords();
          this.findBannedWordsByCusId();
          this.Getsthetransliteratecontent();
        });
    },

    //常错词确认
    subMsg() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let sas = this.textItself.replace(
            this.form.wrongWord,
            this.form.correctWord
          );
          this.transcriptionlist[this.argtextindex].onebest = sas;
          this.subWrongMsg();
        }
      });
    },
    //常错词提交
    subWrongMsg() {
      this.$api.http
        .addCorrectWord({
          correctWord: this.form.correctWord,
          cupid: this.form.cupid,
          wrongWord: this.form.wrongWord,
          customerId: this.fileId,
          houseId: localStorage.getItem("houseId"),
        })
        .then((res) => {
          this.$message.success("保存成功");
        });
    },
    //常错词点击
    checkMsg(row, index) {
      if (this.rec_index_wrongword == false) {
        return;
      }
      this.aplayer.pause();
      this.form.cupid = this.arr[this.aplayerId].id;
      this.textItself = row.onebest;
      let onebest = row.onebest;
      this.form.wrongWord = onebest.replace(/<.*?>/gi, "");
      this.dialogFormVisible = true;
      this.argtextindex = index;
    },
    // 销讲词禁忌tab
    recordclick(i) {
      this.zhixingcenterindex = i;
    },
    // 销讲词折叠
    changeshow(index) {
      this.ratelist[index].show = !this.ratelist[index].show;
    },
    //获取销讲词违禁词
    findBannedWordsByCusId() {
      this.$api.http
        .findBannedWordsByCusId({ cusId: this.fileId })
        .then((res) => {
          let list1 = res.data.SalesTalk || [];
          let list2 = res.data.ProhibitedWords || [];
          let level1 = []; // 一级
          list1.forEach((item) => {
            if (item.pid == 0) {
              level1.push({
                id: item.marketingId,
                rate: item.fraction,
                name: item.name,
                percent: 0,
                ratepercent: 0,
                show: false,
                children: [],
              });
            }
          });
          list1.forEach((item) => {
            level1.forEach((el) => {
              if (item.pid == el.id) {
                if (item.selected == 0) {
                  el.ratepercent += item.fraction;
                }
                el.children.push({
                  id: item.id,
                  rate: item.fraction,
                  selected: item.selected,
                  name: item.name,
                });
              }
            });
          });
          if (level1.length != 0) {
            level1[0].show = true;
          }
          this.ratelist = level1;
          this.prohibitedlist = list2;
        });
    },

    //系统分析切换人工校准
    customerofintention(i) {
      this.kehuyixiangcenterindex = i;
      this.findCARKeywords();
    },
    //获去系统分析，人工校准
    findCARKeywords() {
      this.Getintentionlist = [];
      if (this.kehuyixiangcenterindex == 0) {
        this.$api.http
          .findCARKeywords({ customerId: this.fileId })
          .then((res) => {
            let newlist = res.data || [];
            if (newlist.length == 0) {
              this.Getintentionlist = [];
              return;
            } else {
              newlist.forEach((item) => {
                item.newchildren = [];
                item.children.forEach((fut) => {
                  if (fut.selected == 0) {
                    item.newchildren.push(fut);
                  }
                });
              });
              newlist.forEach((item) => {
                item.children.forEach((chen) => {
                  if (chen.isInterval == 0) {
                    chen.name =
                      chen.name + chen.unit + "-" + chen.endName + chen.unit;
                  } else {
                    chen.name = chen.name;
                  }
                });
              });
              this.Getintentionlist = newlist;
            }
          });
      } else {
        this.$api.http
          .findSystemAnalysis({ customerId: this.fileId, type: 1 })
          .then((res) => {
            if (res.data == null) {
              this.Getintentionlist = [];
              return;
            }
            res.data.forEach((item) => {
              item.newchildren = [];
              item.children.forEach((fut) => {
                if (fut.selected == 0) {
                  item.newchildren.push(fut);
                }
              });
            });
            res.data.forEach((item) => {
              item.children.forEach((chen) => {
                if (chen.isInterval == 0) {
                  chen.name =
                    chen.name + chen.unit + "-" + chen.endName + chen.unit;
                } else {
                  chen.name = chen.name;
                }
              });
            });
            this.Getintentionlist = res.data;
          });
      }
    },
    //获取转写内容和播放列表
    Getsthetransliteratecontent() {
      this.$api.http.findByCusIdcusId({ cusId: this.fileId }).then((res) => {
        let audopbj = res.data;
        this.recordPath = audopbj[this.AudioIdx].recordPath;
        audopbj[this.AudioIdx].audioContent != ""
          ? (this.transcriptionlist = JSON.parse(
              audopbj[this.AudioIdx].audioContent
            ))
          : (this.transcriptionlist = []);
        //  this.transcriptionlist=JSON.parse(audopbj[this.AudioIdx].audioContent)
        this.tablist = [];
        if (this.userinformationlist.yon == 0) {
          this.isd = audopbj[this.AudioIdx].id;
          console.log(audopbj[this.AudioIdx].speakerNum, "speakerNum");
          for (var i = 0; i <= audopbj[this.AudioIdx].speakerNum; i++) {
            if (i == 0) {
              this.tablist.push({
                name: "全部",
              });
            } else if (i == 1) {
              this.tablist.push({
                name: "A",
              });
            } else if (i == 2) {
              this.tablist.push({
                name: "B",
              });
            } else if (i == 3) {
              this.tablist.push({
                name: "C",
              });
            } else if (i == 4) {
              this.tablist.push({
                name: "D",
              });
            } else if (i == 5) {
              this.tablist.push({
                name: "E",
              });
            } else if (i == 6) {
              this.tablist.push({
                name: "F",
              });
            } else if (i == 7) {
              this.tablist.push({
                name: "G",
              });
            } else if (i == 8) {
              this.tablist.push({
                name: "H",
              });
            } else if (i == 9) {
              this.tablist.push({
                name: "I",
              });
            } else if (i == 10) {
              this.tablist.push({
                name: "J",
              });
            } else if (i == 11) {
              this.tablist.push({
                name: "K",
              });
            } else if (i == 12) {
              this.tablist.push({
                name: "L",
              });
            } else if (i == 13) {
              this.tablist.push({
                name: "M",
              });
            } else if (i == 14) {
              this.tablist.push({
                name: "N",
              });
            } else if (i == 15) {
              this.tablist.push({
                name: "O",
              });
            } else {
              this.tablist.push({
                name: "P",
              });
            }
          }
          this.roleList = this.tablist.slice(1);
          if (audopbj[this.AudioIdx].speaker == null) {
            this.yibiaoji = "未标记";
            this.roleindexbiaoji = 0;
            this.dshfkjsdkksodofydwfkhwdfkjh = 0;
          } else {
            this.yibiaoji = "已标记";
            this.tablist[audopbj[this.AudioIdx].speaker].name =
              this.tablist[audopbj[this.AudioIdx].speaker].name + "顾问";
            this.roleindexbiaoji = audopbj[this.AudioIdx].speaker - 1;
            this.dshfkjsdkksodofydwfkhwdfkjh =
              audopbj[this.AudioIdx].speaker - 1;
          }
        }
        this.corpusId = audopbj[this.AudioIdx].id;
        this.aplayerId = this.AudioIdx;
        this.aplayerLength = audopbj.length;
        this.arr = res.data;
        this.bofangchushihua();
      });
    },
    tapspagek(i) {
      this.roleindex = i;
    },
    //播放实例
    bofangchushihua() {
      var that = this;
      this.$nextTick(() => {
        this.aplayer = new APlayer({
          container: document.getElementById("aplayer"),
          theme: "#2671E2",
          audio: [
            {
              url: this.recordPath,
              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);
        });
      });
    },
    //音频播放中
    drawActive(playTime) {
      var that = this;
      that.playNow = playTime;
      $(".center2 .text").each(function (index) {
        if (this.dataset.bg < playTime && playTime < this.dataset.ed) {
          $(this).addClass("activecoloc");
          that.$nextTick(() => {
            document.querySelector(".center2").scrollTop =
              $(".center2 .activecoloc")[0].offsetTop - 380;
          });
        } else {
          $(this).removeClass("activecoloc");
        }
      });
    },
    //倍速更改
    aplayerSpeed(num) {
      this.aplayer.audio.playbackRate = num;
      this.aplayerSpeedNum = num;
    },
    //格式化时间
    formatTime(num) {
      num = parseInt(num / 1000);
      //格式化时间格式
      num = num.toFixed(0);
      let second = num % 60;
      if (second < 10) second = "0" + second;
      let min = Math.floor(num / 60);
      if (min < 10) min = "0" + min;
      return min + ":" + second;
    },
    //下载
    download() {
      console.log(this.recordPath);
      //  this.$api.api.filedownload({videoSrc:this.recordPath}).then((res) => {
      //    console.log(res);
      //  })
      // window.location.href =this.recordPath
      this.exportMethodPost("/autoSR/zk/file/filedownload", "接待详情", {
        videoSrc: this.recordPath,
      });
    },
    exportMethodPost(url, name, data = {}) {
      axios({
        method: "get",
        url: url,
        params: data,
        responseType: "blob",
      })
        .then((res) => {
          let blob = new Blob([res], { type: "audio/*" });
          let date = new Date();
          let time = date.toLocaleDateString();
          // console.log(time, "时间");
          if ("download" in document.createElement("a")) {
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            // link.download = res.headers['content-disposition'] //下载后文件名
            link.download = (name || "导出文件") + time + ".mp3"; //下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          } else {
            // console.log("--------------------jingla")
            let fileName = (name || "导出文件") + time + ".mp3"; //下载的文件名
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((error) => {
          // Message.error({
          //     message: '网络连接错误'
          //  })
          console.log(error);
        });
    },
  },
};
</script>

<style scoped  lang="scss" >
#avue-view {
  overflow: hidden;
}
#zxldiv {
  overflow-y: scroll;
  //  height: 100%;
  height: calc(80vh - 248px);
}
.biaotibox {
  width: 100%;
  height: 30px;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}
.biaotibox > div:nth-of-type(1) {
  width: 50%;
}
.biaotibox > div:nth-of-type(2) {
  width: 50%;
  font-size: 30px;
  text-align: right;
}
.center2 {
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  //  height: 100%;
  height: calc(80vh - 265px);
  overflow-y: scroll;
}

.box-center {
  width: 100%;
  height: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
  background: #ffffff;
}
.inputclass {
  width: 100%;
  height: 32px;
  line-height: 32px;
  background: #ffffff;
  border-radius: 2px 0px 0px 2px;
  text-indent: 6px;
  border: 1px solid #e0e0e0;
}
.inputclass2 {
  width: 70px;
  height: 32px;
  line-height: 32px;
  background: #2671e2;
  border-radius: 4px 4px 4px 4px;
  color: #ffffff;
  text-align: center;
}

// 播放

.text {
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  display: flex;
  align-items: center;
  margin: 18px 0px;
  position: relative;
}
.text[data-speaker="2"],
.text[data-speaker="4"],
.text[data-speaker="6"] {
  flex-direction: row-reverse;
  text-align: left;
}
.content123 div {
  // color:#ffffff;
  color: #32363d;
  background: #f4f5f7;
  font-size: 14px;
  padding: 5px 14px;
  // background:#3ca953;
  border-radius: 8px;
  margin: 0 12px;
  line-height: 1.5;
  max-width: 365px;
}
.text[data-speaker="2"].activecoloc .content123 div,
.text[data-speaker="4"].activecoloc .content123 div,
.text[data-speaker="6"].activecoloc .content123 div {
  color: #ff7538;
}
.activecoloc .content123 div {
  color: #38fff1;
  // color:#FF7538;
}
.center2 .text .avatar {
  width: 34px;
  height: 34px;
  background-color: #ccc;
  border-radius: 50%;
  //  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center2 .text .avatar img {
  width: 28px;
  height: 28px;
  display: block;
}
.center2 .text .avatar div {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 38px;
  color: #ffffff;
  font-size: 24px;
}
.aplayerSpeedFont {
  color: #2671e2;
}

.center3 {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}
.center3 .text {
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  display: flex;
  align-items: center;
  margin: 26px 0px;
  position: relative;
}
.center3 .text .avatar {
  width: 38px;
  height: 38px;
  /*background-color: #f2f2f2;*/
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center3 .text .avatar img {
  width: 28px;
  height: 28px;
  display: block;
}
.center3 .text .avatar div {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 38px;
  color: #ffffff;
  font-size: 24px;
}

.buttonzu {
  position: absolute;
  left: 70px;
  top: -20px;
}
.text[data-speaker="2"] .buttonzu,
.text[data-speaker="4"] .buttonzu,
.text[data-speaker="6"] .buttonzu {
  position: absolute;
  right: 70px;
  top: -20px;
  text-align: right;
}

//指标执行率
.zxlBox {
  width: 100%;
  .zxlLev1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    font-size: 15px;
  }
  .zxlLev1box {
    text-indent: 20px;
  }
  .zxlLev2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;
    .zxlzx {
      width: 60px;
      height: 24px;
      line-height: 24px;
      background: #2671e2;
      text-align: center;
      color: #ffffff;
      border-radius: 4px;
    }
    .zxlzx2 {
      width: 60px;
      height: 24px;
      line-height: 24px;
      background: #f2f2f2;
      text-align: center;
      color: #999999;
      border-radius: 4px;
    }
  }
  .zxlLev2tit {
    line-height: 40px;
    text-indent: 20px;
  }
}

//客户意向
.intentionBox {
  width: 94%;
  margin: 0 auto;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}
.intentionChe {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .intentionview {
    padding: 4px 10px;
    border: 1px solid #e0e0e0;
    background: #e0e0e0;
    margin-left: 6px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 10px;
  }
}
.intentionName {
  font-size: 16px;
  margin-top: 10px;
}
.intentionChe div {
  padding: 4px 10px;
  background: #f4f8fd;
  margin-left: 6px;
  border-radius: 6px;
  color: #2671e2;
  font-size: 14px;
  margin-top: 10px;
}

.intentionChe2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.intentionChe2 div {
  padding: 4px 10px;
  border: 1px solid #e0e0e0;
  margin-left: 6px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 10px;
}

.topbox {
  width: 100%;
  height: 140px;
  display: flex;
  .topzuo {
    width: 75%;
    min-width: 700px;
    height: 140px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 10px;
    position: relative;

    .title {
      color: #32363d;
      .span1 {
        font-size: 16px;
        font-weight: 600;
        margin-left: 2px;
      }
      .span2 {
        font-size: 14px;
        margin-left: 10px;
      }
      .span3 {
        font-size: 16px;
        margin-left: 2px;
      }
    }
  }
  .topyou {
    width: 24%;
    min-width: 300px;
    height: 140px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    margin-left: 20px;
  }
}

.input {
  width: 94%;
  height: 32px;
  line-height: 32px;
  background: #ffffff;
  border-radius: 2px 0px 0px 2px;
  text-indent: 6px;
  border: 1px solid #e0e0e0;
}
.input2 {
  width: 70px;
  height: 32px;
  line-height: 32px;
  background: #2671e2;
  border-radius: 0px 2px 2px 0px;
  color: #ffffff;
  text-align: center;
}
.topbox1 {
  width: 100%;
  display: flex;
  margin-top: 12px;
  height: calc(80vh - 156px);
  .topzuo {
    width: 75%;
    min-width: 700px;
    height: 100%;
    display: flex;
    .topzuo-zuo {
      width: 60%;
      height: 100%;
      background: #ffffff;
      border: 1px solid #e0e0e0;
      .zuo-titbox {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #e0e0e0;
        .searchbox {
          width: 100%;
          height: 50px;
          display: flex;
          margin-top: 6px;
          justify-content: center;
          align-items: center;

          .searchbutt {
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #2671e2;
            border-radius: 2px;
            color: #ffffff;
            // margin-left: 20px;
            text-align: center;
          }
        }
      }
    }
    .topzuo-you {
      width: 39%;
      height: 100%;
      margin-left: 18px;
      background: #ffffff;
      border: 1px solid #e0e0e0;
    }
  }
  .topyou {
    width: 24%;
    min-width: 300px;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    margin-left: 20px;
  }
}

.roleindexclass {
  background: #2671e2;
  color: #ffffff;
}
.headboxbott {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.headovfu {
  flex: 1;
  height: 40px;
  overflow: hidden;
  margin-top: 10px;
}
.headpade {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.biaoji {
  min-width: 70px;
  height: 30px;
  background: #e6625b;
  border-radius: 24px;
  text-align: center;
  line-height: 30px;
  color: #ffffff;
}

.biaoji1 {
  width: 70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-left: 10px;
  flex-shrink: 0;
  border-radius: 4px;
}
.inner-container {
  overflow-x: scroll;
  height: 40px;
}
/*滚动条样式*/
.inner-container::-webkit-scrollbar {
  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);
}
.aplayer {
  box-shadow: none;
  /*width: 80%;*/
  width: 95.3%;
}
.aplayer-author {
  display: none;
}

.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: 78px;
  bottom: 12px;
}
/deep/.aplayer-pic {
  width: 60px !important;
  height: 60px !important;
}
/deep/.aplayer-music {
  display: none !important;
}
.aplayer-controller {
  margin-top: 15px;
}

.aplayerSpeedFont {
  color: #2671e2;
}
/deep/.aplayer-info {
  padding: 22px 7px 0px 10px;
}
.pingfenbox {
  width: 100%;
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
}
.pingfenbox div {
  flex: 1;
  text-align: center;
  font-size: 16px;
}
.activecllasscet {
  color: #2671e2;
  border-bottom: 2px solid #2671e2;
}
.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;
}
#zhezhao {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0.5;
  background-color: #666666;
}
.auDivhhh {
  width: 600px;
  height: 540px;
  border-radius: 4px;
  z-index: 1003;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
}
.searchbox54 .avatar img {
  /*width: 53px;*/
  /*height: 53px;*/
  width: 32px;
  height: 32px;
  display: block;
}
.searchbox54 .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;
}
.searchbox54 {
  width: 100%;
  min-height: 72px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  font-size: 16px;
  color: #666666;
  padding-bottom: 20px;
}
.searchbox54 > div:nth-of-type(1) {
  width: 17%;
  height: 100%;
  text-align: center;
  margin-top: 18px;
}
.searchbox54 > div:nth-of-type(2) {
  width: 83%;
  margin-top: 20px;
}
.adjskdjroleindexclass {
  background: #3ca953 !important;
  color: #ffffff !important;
}
</style>