GCLS_Page_TC/src/views/corpus/seekPage.vue

<template>
  <div class="corpus_seekpage result" v-loading="loading">
    <Header v-if="!userID" />
    <template v-if="showPage">
      <div class="title">
        <p>教材语料库</p>
        <!-- <p>Corpus Dictionary</p> -->
      </div>
      <div class="seek" @keydown="downSeek">
        <input type="text" v-model="keyword" />
        <button @click="getdata(true)">搜索</button>
        <el-popover v-model="visibleOption" placement="bottom" width="335" trigger="click">
          <div class="set_corpus_dv">
            <span>教材</span>
            <!-- <el-select v-model="corpus.scope" style="width: 205px" placeholder="请选择">
              <el-option v-for="(itemD, indexD) in scopeList" :key="indexD" :label="itemD.label" :value="itemD.value" />
            </el-select> -->
            <el-cascader
              v-model="corpus.scope"
              placeholder=""
              :options="levelList"
              :props="{ multiple: true }"
              filterable
              collapse-tags
            ></el-cascader>
          </div>
          <div class="set_corpus_dv">
            <span>例句长度</span>
            <el-input
              v-model="corpus.sentenceStart"
              style="width: 55px; margin-right: 8px"
              onkeyup="value=value.replace(/^0+(\d)|[^\d]+/g,'')"
              class="numbre-input"
            />
            ——
            <el-input
              v-model="corpus.sentenceEnd"
              style="width: 55px; margin: 0 8px"
              onkeyup="value=value.replace(/^0+(\d)|[^\d]+/g,'')"
              class="numbre-input"
            />
            词
          </div>
          <div class="set_corpus_submit">
            <div @click="visibleOption = false">取消</div>
            <div @click="sureCorpus">确认</div>
          </div>
          <div slot="reference" class="set_corpus" style="margin-left: 24px; cursor: pointer">筛选</div>
        </el-popover>
      </div>
    </template>

    <div class="txt">包含{{ book_count }}本教材、{{ word_count }}个字词，{{ sentence_count }}个例句</div>
    <div class="cx-list" v-if="showResult">
      <div class="cx-list-box">
        <span style="color: #de4444">{{ oldKey }}</span>
        <span>{{ allList.word_level_name }}</span>
        <label v-for="(items, indexs) in allList.word_cx_list" :key="indexs"
          ><span>{{ items.code }}</span
          ><span>{{ items.name }}</span></label
        >
      </div>
      <template v-if="editLiju">
        <el-row v-if="editLijuFlag">
          <el-button
            type="info"
            class="edit-cancle"
            @click="
              editLijuFlag = false;
              page = 1;
              padingEvetn();
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            class="edit-sure"
            @click="
              editLijuFlag = false;
              page = 1;
              padingEvetn();
            "
            >完成</el-button
          ></el-row
        >
        <el-button
          v-else
          class="edit-liju"
          @click="
            editLijuFlag = true;
            selectDelLijuIds = [];
            page = 1;
            padingEvetn();
          "
          >例句编辑模式</el-button
        >
      </template>
    </div>
    <div
      class="txt_imgtable"
      v-if="showResult"
      :style="{ height: editLijuFlag ? '0' : '', overflow: editLijuFlag ? 'hidden' : '' }"
    >
      <div class="left">
        <div class="top">
          <div>
            <div class="pattern">
              <div :class="[patternIndex == 0 ? 'sele' : '']" @click="cutPattern(0)">引语模式</div>
              <div :class="[patternIndex == 1 ? 'sele' : '']" @click="cutPattern(1)">KWIC模式</div>
            </div>

            <template v-if="patternIndex == 1">
              <div class="KWIC_sort">
                <span
                  :class="['sort', KWIC_sortIndex == 0 ? 'sele' : '']"
                  @click="KWICsortEvent(0, 'sentence_list_sort_left')"
                >
                  <img src="../../assets/teacherdev/analys-right.png" alt="" />
                </span>
                <span
                  :class="['sort', KWIC_sortIndex == 1 ? 'sele' : '']"
                  @click="KWICsortEvent(1, 'sentence_list_sort_mid')"
                >
                  <img src="../../assets/teacherdev/analys-center.png" alt="" />
                </span>
                <span
                  :class="['sort', KWIC_sortIndex == 2 ? 'sele' : '']"
                  @click="KWICsortEvent(2, 'sentence_list_sort_right')"
                >
                  <img src="../../assets/teacherdev/analys-left.png" alt="" />
                </span>
              </div>
            </template>
            <div class="refresh" @click="handleRefresh">
              <img src="../../assets/teacherdev/refresh.png" alt="" />
            </div>
            <template v-if="patternIndex == 0">
              <div class="lang_sort" :class="[sortType === 'length' ? 'active' : '']" @click="sortEvent('length')">
                按长度
                <img
                  v-if="sort == 'down' && sortType === 'length'"
                  src="../../assets/teacherdev/ylk-sort-up.png"
                  alt=""
                />
                <img
                  v-else-if="sort == 'up' && sortType === 'length'"
                  src="../../assets/teacherdev/ylk-sort-down.png"
                  alt=""
                />
                <img v-else src="../../assets/teacherdev/ylk-sort-no.png" alt="" />
              </div>
            </template>
            <template v-else>
              <div style="display: flex">
                <div
                  class="lang_sort"
                  :class="[sortType === 'zflength' ? 'active' : '']"
                  @click="sortEvent('zflength')"
                >
                  按长度
                  <img
                    v-if="sort == 'down' && sortType === 'zflength'"
                    src="../../assets/teacherdev/ylk-sort-up.png"
                    alt=""
                  />
                  <img
                    v-else-if="sort == 'up' && sortType === 'zflength'"
                    src="../../assets/teacherdev/ylk-sort-down.png"
                    alt=""
                  />
                  <img v-else src="../../assets/teacherdev/ylk-sort-no.png" alt="" />
                </div>
                <div
                  class="lang_sort"
                  :class="[sortType === 'pclength' ? 'active' : '']"
                  @click="sortEvent('pclength')"
                >
                  按频次
                  <img
                    v-if="sort == 'down' && sortType === 'pclength'"
                    src="../../assets/teacherdev/ylk-sort-up.png"
                    alt=""
                  />
                  <img
                    v-else-if="sort == 'up' && sortType === 'pclength'"
                    src="../../assets/teacherdev/ylk-sort-down.png"
                    alt=""
                  />
                  <img v-else src="../../assets/teacherdev/ylk-sort-no.png" alt="" />
                </div>
              </div>
            </template>
          </div>

          <div class="size">
            <template v-if="patternIndex == 0">
              <!-- <el-switch
                  v-model="pinyinShow"
                  active-text="拼音"
                  active-color="#424242"
                  style="margin-left: 24px"
                >
                </el-switch> -->
              <el-switch
                v-model="shiyiShow"
                active-text="释义"
                active-color="#424242"
                style="margin-left: 20px"
                @change="changeShiyi"
              >
              </el-switch>
            </template>
            <el-switch v-model="fenciShow" active-text="分词" active-color="#424242" style="margin-left: 8px">
            </el-switch>
            <span :class="[sizeIndex == 0 ? 'sele' : '']" @click="cutSize(0)">大</span>
            <span :class="[sizeIndex == 1 ? 'sele' : '']" @click="cutSize(1)">中</span>
            <span :class="[sizeIndex == 2 ? 'sele' : '']" @click="cutSize(2)">小</span>
          </div>
        </div>
        <div class="main">
          <div class="list">
            <template v-if="patternIndex == 0">
              <div v-for="(item, i) in ShowList" :key="i + 'sentence'" class="one">
                <div class="top">
                  <!--
                      :class="['number-' + sizeIndex + '-' + pinyinShow]"
                     -->
                  <div class="number">{{ item.number }}.</div>
                  <!--
                      :class="['speaker-' + sizeIndex + '-' + pinyinShow]"
                     -->
                  <!-- <img src="../../assets/teacherdev/speaker-one.png" alt="" /> -->
                  <div class="words">
                    <template v-if="item.sentence_fc_list_style && item.sentence_fc_list_style.length > 1">
                      <span
                        :style="{
                          fontSize: conSize + 'px',
                          padding: fenciShow ? '0 2px' : '',
                        }"
                        v-for="(items, indexs) in item.sentence_fc_list_style"
                        :key="indexs"
                        v-html="items"
                      ></span>
                    </template>
                    <template v-else>
                      <span
                        :style="{
                          fontSize: conSize + 'px',
                          padding: fenciShow ? '0 2px' : '',
                        }"
                        v-html="item.res"
                      ></span>
                    </template>
                    <template v-if="shiyiShow && item.word_definition_list.length > 0">
                      <span class="shiyi">
                        （
                        <span v-html="item.word_definition_list.join('; ')"> </span>
                        ）
                      </span>
                    </template>
                  </div>
                  <!--
                      :class="['shiyi-' + sizeIndex]"
                     -->
                </div>
                <el-tooltip effect="dark" placement="bottom">
                  <div slot="content">
                    {{
                      item.source_courseware_name_path_short
                        ? item.source_courseware_name_path_short
                        : item.source_courseware_name_path
                    }}
                  </div>
                  <div class="bottom">
                    {{
                      item.source_courseware_name_path_short
                        ? item.source_courseware_name_path_short
                        : item.source_courseware_name_path
                    }}
                  </div>
                </el-tooltip>
                <!-- <div class="bottom">
                  {{
                    item.source_courseware_name_path_short
                      ? item.source_courseware_name_path_short
                      : item.source_courseware_name_path
                  }}
                </div> -->
              </div>
            </template>
            <template v-else>
              <div v-for="(item, index) in ShowList" :key="'kwic' + index" class="kwic_one">
                <div class="number">{{ item.number }}</div>
                <div
                  class="word"
                  :style="{
                    fontSize: conSize + 'px',
                  }"
                >
                  <div v-for="(txt, indexs) in item.resArr" :key="indexs">
                    <div
                      :style="{ padding: fenciShow ? '0 2px' : '', display: 'inline-block' }"
                      v-for="(txts, indext) in txt"
                      :key="indext"
                    >
                      <!-- <span v-html="txts"></span> -->
                      <template v-if="sortType === 'pclength' && (KWIC_sortIndex === 0 || KWIC_sortIndex === 2)">
                        <template v-if="indexs === 0 && KWIC_sortIndex === 0">
                          <el-tooltip effect="dark" placement="bottom" style="display: inline">
                            <div slot="content">
                              {{
                                item.adjoin_fc_frequency_list_left && item.adjoin_fc_frequency_list_left[indext]
                                  ? item.adjoin_fc_frequency_list_left[indext]
                                  : 1
                              }}
                            </div>
                            <div class="">
                              <span v-html="txts"></span>
                            </div>
                          </el-tooltip>
                        </template>
                        <template v-else-if="indexs === 2 && KWIC_sortIndex === 2">
                          <el-tooltip effect="dark" placement="bottom" style="display: inline">
                            <div slot="content">
                              {{
                                item.adjoin_fc_frequency_list_right && item.adjoin_fc_frequency_list_right[indext]
                                  ? item.adjoin_fc_frequency_list_right[indext]
                                  : 1
                              }}
                            </div>
                            <div class="">
                              <span v-html="txts"></span>
                            </div>
                          </el-tooltip>
                        </template>
                        <template v-else>
                          <span v-html="txts"></span>
                        </template>
                      </template>
                      <template v-else>
                        <span v-html="txts"></span>
                      </template>
                    </div>
                  </div>
                </div>
                <el-tooltip effect="dark" placement="bottom">
                  <div slot="content">
                    {{
                      item.source_courseware_name_path_short
                        ? item.source_courseware_name_path_short
                        : item.source_courseware_name_path
                    }}
                  </div>
                  <div class="laiyuan">
                    {{
                      item.source_courseware_name_path_short
                        ? item.source_courseware_name_path_short
                        : item.source_courseware_name_path
                    }}
                  </div>
                </el-tooltip>
              </div>
            </template>
          </div>
          <div class="page">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="selectCurrent ? selectCurrent : CurrentList.length"
              :pager-count="5"
            >
            </el-pagination>
            <span class="text">
              共 {{ selectCurrent ? selectCurrent : CurrentList.length }} 条
              {{
                patternIndex === 0 && selectLaiyuanBookIdList.length === 0 && !shiyiShow
                  ? ' 命中 ' + scoreAHitNumber + ' 次'
                  : ''
              }}
            </span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div>
            <div
              v-if="allList.stat_list_word_definition && allList.stat_list_word_definition.length > 0"
              :class="[rightTopIndex == 0 ? 'sele' : '']"
              @click="cutsyly(0)"
            >
              释义
            </div>
            <div :class="[rightTopIndex == 1 ? 'sele' : '']" @click="cutsyly(1)">来源</div>
          </div>
        </div>
        <div class="bottom">
          <div id="shanxing_main" style="width: 720px; height: 600px"></div>
          <div class="list" v-if="rightList.length > 0">
            <div class="one all" style="border-bottom: 1px solid #eee">
              <div style="width: 60%">{{ rightTopIndex == 1 ? '来源' : '释义' }}</div>
              <div style="width: 20%">
                <span>出现次数</span>
              </div>
              <div style="width: 20%">
                <span>占比</span>
              </div>
            </div>
            <div
              v-for="(item, i) in rightList"
              :key="i + 'right'"
              class="one"
              :style="{
                borderBottom: i == rightList.length - 1 ? 'none' : '1px solid #eeeeee',
                backgroundColor:
                  selectLaiyuanBookIdList.indexOf(item.book_id) > -1 ||
                  selectShiyiBookIdList.indexOf(item.definition) > -1
                    ? '#F2F3F5'
                    : '',
              }"
              @mouseover="gaolangbzt(i, 'shanxing_main')"
              @mouseout="closegaolangbzt(i, 'shanxing_main')"
              @click="handleBookLiju(item, rightTopIndex)"
            >
              <div style="width: 60%">
                <span></span>
                <span v-html="item.book_name"></span>
              </div>
              <div style="width: 20%">
                <span>{{ item.count }}</span>
              </div>
              <div style="width: 20%">
                <span>{{ item.percent }}%</span>
              </div>
            </div>
            <div class="one all">
              <div style="width: 60%">
                <span></span>
                <span>合计</span>
              </div>
              <div style="width: 20%">
                <span>{{ allNumber }}</span>
              </div>
              <div style="width: 20%">
                <span>{{ rightTopIndex == 1 ? allPercent.toFixed(2) : '100.00' }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="edit-liju-box" v-if="editLijuFlag === true && showResult">
      <div class="top">
        <div>
          <span class="select-number">已选 {{ selectDelLijuIds.length }}</span>
          <el-button type="danger" plain @click="handleDelLiju"><i class="el-icon-delete"></i>删除选中</el-button>
        </div>
        <el-button type="primary" plain @click="handleEditLiju()"><i class="el-icon-plus"></i>增加例句</el-button>
      </div>
      <div class="main">
        <div class="list">
          <div v-for="(item, i) in ShowList" :key="i + 'sentence'" class="one">
            <div class="top">
              <!--
                      :class="['number-' + sizeIndex + '-' + pinyinShow]"
                     -->
              <el-checkbox v-model="selectDelLijuIds" :label="item.sentence_id"><br /></el-checkbox>
              <div class="number">{{ item.number }}.</div>
              <!--
                      :class="['speaker-' + sizeIndex + '-' + pinyinShow]"
                     -->
              <!-- <img src="../../assets/teacherdev/speaker-one.png" alt="" /> -->
              <div class="words">
                <template v-if="item.sentence_fc_list_style && item.sentence_fc_list_style.length > 1">
                  <span
                    :style="{
                      fontSize: conSize + 'px',
                    }"
                    v-for="(items, indexs) in item.sentence_fc_list_style"
                    :key="indexs"
                    v-html="items"
                  ></span>
                </template>
                <template v-else>
                  <span
                    :style="{
                      fontSize: conSize + 'px',
                      padding: fenciShow ? '0 2px' : '',
                    }"
                    v-html="item.res"
                  ></span>
                </template>
                <template v-if="shiyiShow && item.word_definition_list.length > 0">
                  <span class="shiyi">
                    （
                    <span v-html="item.word_definition_list.join('; ')"> </span>
                    ）
                  </span>
                </template>
              </div>
              <!--
                      :class="['shiyi-' + sizeIndex]"
                     -->
            </div>
            <el-tooltip effect="dark" placement="bottom">
              <div slot="content">
                {{
                  item.source_courseware_name_path_short
                    ? item.source_courseware_name_path_short
                    : item.source_courseware_name_path
                }}
              </div>
              <div class="bottom">
                {{
                  item.source_courseware_name_path_short
                    ? item.source_courseware_name_path_short
                    : item.source_courseware_name_path
                }}
              </div>
            </el-tooltip>
            <i class="el-icon-edit-outline" @click="handleEditLiju(item)"></i>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="allList.sentence_list.length"
            :pager-count="5"
          >
          </el-pagination>
          <span class="text"> 共 {{ allList.sentence_list.length }} 条 </span>
        </div>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="showEditLijuFlag"
      width="365px"
      :before-close="handleClose"
      :modal="false"
      v-if="actvieEditLijuItem"
      class="seekpage-dialog"
    >
      <label>{{ actvieEditLijuItem.sentence_id ? '修改例句' : '增加例句' }}</label>
      <el-input v-model="actvieEditLijuItem.sentence"></el-input>
      <b class="tips">关键字不能删除，分词用空格区分。</b>
      <label>关键字</label>
      <p>{{ keyword }}</p>
      <label>词性</label>
      <el-input v-model="actvieEditLijuItem.cixing"></el-input>
      <b class="tips">多个词性用逗号分割</b>
      <label>释义</label>
      <el-input type="textarea" v-model="actvieEditLijuItem.definition_list"></el-input>
      <b class="tips">多条释义另起一行</b>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from '@/components/Header';
import { getConfigInfor } from '@/utils/index';
import { getStaticContent, BookgetContent, LearnWebSI } from '@/api/api';
import { setToken, getToken } from '@/utils/auth';
import * as echarts from 'echarts';

export default {
  name: 'corpus_seekpage',
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      keyword: this.$route.query.keyword ? this.$route.query.keyword : null,
      oldKey: '',
      AccessToken: this.$route.query.AccessToken,
      AppID: this.$route.query.AppID,
      showPage: false,
      userID: this.$route.query.UserID ? this.$route.query.UserID : '',
      book_count: 0,
      word_count: 0,
      sentence_count: 0,
      visibleOption: false,
      corpus: {
        difficlty: null,
        scope: [],
        sentenceStart: null,
        sentenceEnd: null,
      },
      scopeList: [
        {
          value: '',
          label: '全部',
        },
      ],
      page: 1,
      pageSize: 30,
      shiyiShow: false,
      fenciShow: false,
      pinyinShow: true,
      JFIndex: 0,
      hzData: [],
      ShowHzData: [],
      loading: true,
      lang: null,
      unfold: true,
      patternIndex: 0,
      rightTopIndex: 0,
      sizeIndex: 1,
      sort: '',
      sortType: '',
      rightList: [],
      KWIC_sortIndex: 0,
      allNumber: 0,
      allPercent: 0,
      conSize: 20,
      pinyinSize: 12,
      allList: [],
      CurrentList: [],
      ShowList: [],
      chsFhList: ['，', '。', '”', '：', '》', '《', '？', '！', '；'],
      scoreAHitNumber: 0,
      checkAll: false,
      isIndeterminate: true,
      allLevels: [],
      levelList: [],
      selectLaiyuanBookIdList: [], // 选中右侧来源书籍列表id
      selectShiyiBookIdList: [], // 选中右侧释义书籍列表id
      selectCurrent: 0,
      showResult: false,
      shiyiList: [], //含有释义例句列表
      bookListObj: {}, //书籍id和名称对应关系
      bookSourceObj: {}, //书籍来源id对应关系
      editLiju: false, // 是否有编辑例句权限
      editLijuFlag: false, // 编辑例句模式
      selectDelLijuIds: [], // 选中删除例句id数组
      actvieEditLijuItem: null,
      showEditLijuFlag: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    downSeek(e) {
      if (e.keyCode == 13) {
        this.getdata(true);
      }
    },
    getTotalCount() {
      const Mname = 'book-data_stat-GetBookWordExampleSentenceTotalCount';
      BookgetContent(Mname, {}).then((res) => {
        if (res.status === 1) {
          this.book_count = res.book_count;
          this.word_count = res.word_count;
          this.sentence_count = res.example_sentence_count;
        }
      });
    },
    // 存储句长信息
    sureCorpus() {
      this.visibleOption = false;
      this.getdata(true);
      // if (this.seekOptions) this.seekresult();
    },
    // 获取上架教材列表
    getLevelList() {
      this.allLevels = [];
      this.levelList = [];
      this.bookListObj = {};
      BookgetContent('book-book_manager-GetBookList', {
        publish_status: 1,
      }).then((res) => {
        this.loading = false;
        this.levelList = [];
        if (res.status === 1) {
          res.book_list.forEach((item) => {
            item.value = item.id;
            item.label = item.name;
            this.allLevels.push(item.id);
            this.$set(this.bookListObj, item.id, item.name);
          });
          // this.levelList = this.levelList.concat(res.book_list);

          let tempdata = {};
          res.book_list.forEach((str) => {
            if (tempdata[str.series_code] != null) {
              tempdata[str.series_code].push(str);
            } else {
              let every = [];
              every.push(str);
              tempdata[str.series_code] = every;
            }
          });
          for (const key in tempdata) {
            let obj = {
              value: tempdata[key][0].series_code,
              label: tempdata[key][0].series_code ? tempdata[key][0].series_code : '未分类',
              children: tempdata[key],
            };
            this.levelList.push(obj);
          }
        }
      });
    },
    getrightListdata() {
      this.inityuan();
    },
    inityuan() {
      var chartDom = document.getElementById('shanxing_main');
      var myChart = echarts.init(chartDom);
      var option;
      this.allNumber = 0;
      this.allPercent = 0;
      let newdata = JSON.parse(JSON.stringify(this.rightList));

      newdata.forEach((item) => {
        this.allNumber += item.count;
        this.allPercent += item.percent;
        let percent = item.percent;
        item.value = item.count;
        if (percent % 1 == 0) {
          item.name = item.book_name + ' ' + percent + '%';
        } else {
          item.name = item.book_name + ' ' + percent.toFixed(2) + '%';
        }
      });
      if (this.rightTopIndex === 1) {
        let data = [];
        let tempdata = {};
        if (this.corpus.scope.length === 0) {
          this.levelList.forEach((item) => {
            let obj = {
              name: item.label,
              children: [],
            };
            item.children.forEach((items) => {
              let childObj = {
                name: '',
                value: 0,
              };
              if (this.bookSourceObj[items.id]) {
                childObj.name = items.name + ' ' + this.bookSourceObj[items.id].percent + '%';
                childObj.value = this.bookSourceObj[items.id].count;
              }
              obj.children.push(childObj);
            });
            data.push(obj);
          });
        } else {
          this.corpus.scope.forEach((str) => {
            if (!tempdata[str[0]]) {
              let obj = {
                name: str[0],
                children: [],
              };
              tempdata[str[0]] = obj;
            }
            let childObj = {
              name: '',
              value: 0,
            };
            if (this.bookSourceObj[str[1]]) {
              childObj.name = this.bookSourceObj[str[1]].book_name + ' ' + this.bookSourceObj[str[1]].percent + '%';
              childObj.value = this.bookSourceObj[str[1]].count;
            }
            tempdata[str[0]].children.push(childObj);
          });
          for (const key in tempdata) {
            data.push(tempdata[key]);
          }
        }
        option = {
          title: {
            text: '',
            subtext: '',
            textStyle: {
              fontSize: 14,
              align: 'center',
            },
            subtextStyle: {
              align: 'center',
            },
            sublink: '',
          },
          series: {
            type: 'sunburst',
            data: data,
            radius: [0, '95%'],
            sort: undefined,
            emphasis: {
              focus: 'ancestor',
            },
            levels: [
              {},
              {
                r0: '3%',
                r: '35%',
                itemStyle: {
                  borderWidth: 2,
                },
                label: {
                  align: 'left',
                },
              },
              {
                r0: '35%',
                r: '40%',
                label: {
                  position: 'outside',
                },
              },
            ],
          },
        };
      } else {
        option = {
          series: [
            {
              name: 'Access From',
              type: 'pie',
              // radius: ["50%", "50%"],
              data: newdata.length > 0 ? newdata : [],
              itemStyle: {
                //   borderColor: "#fff",
                //   borderWidth: 2,
              },
              top: 50,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
          xAxis: {
            show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
            },
            axisLabel: {
              show: false, //不显示坐标轴上的文字
            },
          },
        };
      }

      option && myChart.setOption(option);
      let number = 0;
      let _this = this;
      myChart.on('click', function (param) {
        //添加点击事件
        myChart.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
        if (param.dataIndex !== number) {
          // 当鼠标点击的时候 消除上一个扇区的高亮
          myChart.dispatchAction({ type: 'downplay', dataIndex: number });
        }
        number = param.dataIndex; //接住当前扇区的dataIndex
        if (_this.rightTopIndex === 0) {
          _this.handleShiyiLiju(param.data.definition);
        } else {
          _this.handleBookLiju(param.data);
        }
      });
    },
    // 鼠标进入
    gaolangbzt(index, id) {
      if (this.rightTopIndex === 1) return;
      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
      compareChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    // 鼠标移出
    closegaolangbzt(index, id) {
      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
      compareChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    // 计算选中教材例句
    handleBookLiju(item, index) {
      if (index === 0) {
        this.handleShiyiLiju(item.definition);
        return false;
      }
      let id = item.book_id;
      if (!id) return false;
      if (this.selectLaiyuanBookIdList.indexOf(id) > -1) {
        this.selectLaiyuanBookIdList.splice(this.selectLaiyuanBookIdList.indexOf(id), 1);
      } else {
        this.selectLaiyuanBookIdList.push(id);
      }
      this.page = 1;
      this.padingEvetn();
      window.scrollTo(0, 0);
    },
    // 计算选中教材例句
    handleShiyiLiju(shiyi) {
      if (!shiyi) return false;
      if (this.selectShiyiBookIdList.indexOf(shiyi) > -1) {
        this.selectShiyiBookIdList.splice(this.selectShiyiBookIdList.indexOf(shiyi), 1);
      } else {
        this.selectShiyiBookIdList.push(shiyi);
      }
      this.shiyiShow = this.selectShiyiBookIdList.length > 0;
      this.page = 1;
      this.padingEvetns();
      window.scrollTo(0, 0);
    },
    changehzdata() {
      this.hzData = [];
      this.jfEvent(0);
      let arr = this.keyword.trim().split('');
      arr.forEach((item) => {
        if (!/^[\u4e00-\u9fa5]/.test(item)) {
          return;
        }
        let result = pinyinUtil.getPinyin(item);
        let obj = {
          con: item,
          pinyin: result,
          hzDetail: {
            hz_json: null,
          },
        };
        this.hzData.push(obj);
        this.ShowHzData = JSON.parse(JSON.stringify(this.hzData));
      });
    },
    handleRefresh() {
      this.pinyinShow = true;
      this.shiyiShow = true;
      this.fenciShow = true;
      this.sizeIndex = 1;
      this.sort = '';
      this.sortType = '';
      this.KWIC_sortIndex = 0;
      this.cutSize(1);
      this.getdata();
      this.page = 1;
    },
    getdata(flag) {
      if (!this.keyword || !this.keyword.trim()) {
        this.$message.warning('请输入要搜索的内容');
        return;
      }
      this.loading = true;
      this.oldKey = this.keyword.trim();
      this.showResult = true;
      this.scoreAHitNumber = 0;
      let selectBookId = [];
      this.corpus.scope.forEach((item) => {
        selectBookId.push(item[1]);
      });
      this.bookSourceObj = {};
      let Mname = 'book-courseware_manager-GetCoursewareWordExampleSentenceList_Sort';
      let data = {
        // courseware_id: "003-20211012-17-BDUZ1JVCAN",
        courseware_id: '',
        // word: this.$route.query.keyword, // 单词
        word: this.keyword.trim(),
        search_scope: 3, // 检索范围 0 【本章】，1【本教材】，2【本套教材】，3【系统所有教材】
        // 本章：同一本教材下，归属同一个第一级章节下的所有课件为同一章。
        is_contain_word_variants: false, // 是否包含单词变体例句
        is_contain_stat_data: true, //是否包统计数据
        is_filter_repetitive_sentence: 'true', // 过滤重复例句
        sort_mode: this.sort ? (this.sort == 'down' ? 'DESCENT' : 'ASCENT') : 'NO', // 排序模式 NO 【不排序】，ASCENT【顺序】，DESCENT【倒序】
        compare_mode: this.patternIndex === 0 ? 'LENGTH' : 'KWIC', // 排序比较模式，LENGTH【例句长度】,KWIC【KWIC 模式】
        kwic_arrange_type: this.KWIC_sortIndex === 0 ? 'LEFT' : this.KWIC_sortIndex === 1 ? 'MID' : 'RIGHT', // KWIC 排列类型， LEFT【左】,MID【中】,RIGHT【右】
        kwic_compare_by: this.sortType === 'pclength' ? 1 : 0, // KWIC 排序比较依据，0【字符】,1【相邻的搭配词出现的次数】
        book_publish_status: 1, // 教材发布状态 -1【全部】, 0【下架】1【上架】
        book_id_list: selectBookId, // 指定教材查询，空表示在检索范围内检索所有教材。
        sentence_fc_length_min: this.corpus.sentenceStart ? Number(this.corpus.sentenceStart) : -1, // 例句分词长度范围（最小值），-1 表示不检测最小值
        sentence_fc_length_max: this.corpus.sentenceEnd ? Number(this.corpus.sentenceEnd) : -1, // 例句分词长度范围（最大值），-1 表示不检测最大值
        is_analyse_word_cx: 'true',
        is_analyse_word_level: 'true',
      };
      BookgetContent(Mname, data, this.AppID, this.AccessToken)
        .then((res) => {
          this.shiyiList = [];
          this.allList = {
            sentence_list: [],
            sentence_list_sort_left: [],
            sentence_list_sort_mid: [],
            sentence_list_sort_right: [],
            stat_list_sentence_source_book: res.stat_list_sentence_source_book,
            stat_list_sentence_source_book_series_code: res.stat_list_sentence_source_book_series_code,
            stat_list_word_definition: res.stat_list_word_definition,
            word_level_name: res.word_level_name,
            word_cx_list: res.word_cx_list,
          };

          res.stat_list_sentence_source_book.forEach((itesb) => {
            itesb.name = itesb.book_name;
            itesb.value = itesb.count;
            this.$set(this.bookSourceObj, itesb.book_id, itesb);
          });
          if (res.sentence_list.length > 0) {
            res.stat_list_word_definition.forEach((item) => {
              // item.book_name_s = item.definition;
              item.book_name = JSON.parse(JSON.stringify(item.definition)).replace(/<i>/g, '').replace(/<\/i>/g, '');
            });
            res.stat_list_sentence_source_book_series_code.forEach((item) => {
              item.book_name = item.series_code;
            });
            // 清理脏数据
            this.removeRubbishData(res);
            if (res.stat_list_word_definition.length === 0) {
              this.rightTopIndex = 1;
            }
            if (this.rightTopIndex === 0) {
              this.rightList = res.stat_list_word_definition;
            } else {
              this.rightList = res.stat_list_sentence_source_book;
            }
            this.getrightListdata();
            this.allList.sentence_list = this.handleExample(res.sentence_list);
            if (this.patternIndex === 1) {
              if (this.KWIC_sortIndex === 0) {
                this.allList.sentence_list_sort_left = this.handleExample(res.sentence_list, 'left');
              } else if (this.KWIC_sortIndex === 1) {
                this.allList.sentence_list_sort_mid = this.handleExample(res.sentence_list, 'mid');
              } else {
                this.allList.sentence_list_sort_right = this.handleExample(res.sentence_list, 'right');
              }
            }
            this.CurrentList = JSON.parse(JSON.stringify(res.sentence_list));
            let shiyiIndex = 1;
            JSON.parse(JSON.stringify(res.sentence_list)).forEach((items) => {
              if (items.word_definition_list && items.word_definition_list.length > 0) {
                items.number = shiyiIndex;
                this.shiyiList.push(items);
                shiyiIndex++;
              }
            });
            this.padingEvetn();
          } else {
            this.CurrentList = [];
            this.ShowList = [];
            this.rightList = [];
            this.shiyiList = [];
            this.getrightListdata();
          }
          if (this.keyword.trim() && flag) {
            this.changehzdata();
          } else {
            this.loading = false;
          }
          if (res.word_pinyin_list) {
            res.word_pinyin_list.forEach((itemP, indexP) => {
              if (this.hzData[indexP]) {
                this.hzData[indexP].pinyin = itemP;
              }
            });
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleExample(list, type) {
      if (list.length > 0) {
        list = list.map((item, index) => {
          item.number = index + 1;
          let str = item.source_courseware_name_path;
          item.show_source_courseware_name_path = str.slice(0, 8) + '...';
          if (type == 'left') {
            let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
            arr.forEach((items, indexs) => {
              if (indexs == item.sentence_fc_list_word_index) {
                arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
              }
            });
            let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
            item.resArr = data;
            item.adjoin_fc_frequency_list_left = item.adjoin_fc_frequency_list.splice(
              0,
              item.sentence_fc_list_word_index,
            );
          } else if (type == 'right') {
            let sentence = JSON.parse(JSON.stringify(item.sentence));
            let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
            arr.forEach((items, indexs) => {
              if (indexs == item.sentence_fc_list_word_index) {
                arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
              }
            });
            let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
            item.resArr = data;
            item.adjoin_fc_frequency_list_right = item.adjoin_fc_frequency_list.splice(
              item.sentence_fc_list_word_index + 1,
            );
          } else if (type == 'mid') {
            let sentence = JSON.parse(JSON.stringify(item.sentence));
            let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
            arr.forEach((items, indexs) => {
              if (indexs == item.sentence_fc_list_word_index) {
                arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
              }
            });
            let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
            item.resArr = data;
          } else {
            this.scoreAHitNumber += item.position_list.length;
            let sentence_fc_list_style = [];
            let newsentence = JSON.parse(JSON.stringify(item.sentence));
            let res = '';
            for (let i = 0; i < item.position_list.length; i++) {
              let part1 = '';
              let part2 = '';
              let part3 = '';
              if (item.position_list.length > 1) {
                if (i == 0) {
                  part1 = newsentence.substring(0, item.position_list[i].begin);
                  part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                  part3 = newsentence.substring(item.position_list[i].end, item.position_list[i + 1].begin);
                } else if (i == item.position_list.length - 1) {
                  part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                  part3 = newsentence.substring(item.position_list[i].end);
                } else {
                  part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                  part3 = newsentence.substring(item.position_list[i].end, item.position_list[i + 1].begin);
                }
              } else {
                part1 = newsentence.substring(0, item.position_list[i].begin);
                part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                part3 = newsentence.substring(item.position_list[i].end);
              }
              res += part1 + '<span style="color:#DE4444;">' + part2 + '</span>' + part3;
            }
            item.res = res;
            item.sentence_fc_list.forEach((items, indexs) => {
              if (item.sentence_fc_list_word_index_list.indexOf(indexs) > -1) {
                sentence_fc_list_style.push('<span style="color:#DE4444;">' + items + '</span>');
              } else {
                sentence_fc_list_style.push(items);
              }
            });
            item.sentence_fc_list_style = sentence_fc_list_style;
          }
          return item;
        });
        return list;
      } else {
        return [];
      }
    },
    changefiveword(arr, index, type) {
      let num = 6;
      let colorIndex = 0;
      let colorList = ['#4D7EFF', '#A4430F', '#9342C5', '#FF8718', '#1DAA91'];
      for (let i = 1; i < num; i++) {
        if (type == 'left') {
          if (index - i >= 0) {
            if (this.chsFhList.indexOf(arr[index - i]) == -1) {
              arr[index - i] = `<span style=color:${colorList[colorIndex]};>${arr[index - i]}</span>`;
              colorIndex++;
            } else {
              num++;
            }
          }
        } else if (type == 'right') {
          if (index + i <= arr.length - 1) {
            if (this.chsFhList.indexOf(arr[index + i]) == -1) {
              arr[index + i] = `<span style=color:${colorList[colorIndex]};>${arr[index + i]}</span>`;
              colorIndex++;
            } else {
              num++;
            }
          }
        }
      }
      let newarr = [];
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      arr.forEach((item, i) => {
        if (i < index) {
          arr1.push(item);
        } else if (i == index) {
          arr2.push(item);
        } else {
          arr3.push(item);
        }
      });
      newarr.push(arr1);
      newarr.push(arr2);
      newarr.push(arr3);
      return newarr;
    },
    // 处理分页
    padingEvetn() {
      let arr =
        this.shiyiShow && this.patternIndex === 0
          ? JSON.parse(JSON.stringify(this.shiyiList))
          : JSON.parse(JSON.stringify(this.CurrentList));
      let arrs = [];
      if (this.editLijuFlag) {
        arrs = JSON.parse(JSON.stringify(this.allList.sentence_list));
      } else if (this.selectLaiyuanBookIdList.length === 0) {
        arrs = arr;
      } else {
        arr.forEach((item) => {
          let path = item.source_courseware_id_path.split('/');
          if (path.length > 0 && this.selectLaiyuanBookIdList.indexOf(path[0]) > -1) {
            arrs.push(item);
          }
        });
      }
      this.selectCurrent = arrs.length;
      arrs.forEach((item, index) => {
        item.number = index + 1;
      });
      let newarr = arrs.splice((this.page - 1) * this.pageSize, this.pageSize);
      this.ShowList = JSON.parse(JSON.stringify(newarr));
    },
    padingEvetns() {
      let arr = JSON.parse(JSON.stringify(this.shiyiList));
      let arrs = [];
      if (this.selectShiyiBookIdList.length === 0) {
        arrs = JSON.parse(JSON.stringify(this.CurrentList));
      } else {
        arr.forEach((item) => {
          if (item.word_definition_list.length > 0) {
            this.selectShiyiBookIdList.forEach((items) => {
              if (item.word_definition_list.indexOf(items) > -1) {
                arrs.push(item);
              }
            });
          }
        });
      }
      this.selectCurrent = arrs.length;
      arrs.forEach((item, index) => {
        item.number = index + 1;
      });
      let newarr = arrs.splice((this.page - 1) * this.pageSize, this.pageSize);
      this.ShowList = JSON.parse(JSON.stringify(newarr));
    },
    // 删除脏数据
    removeRubbishData(data) {
      if (data.sentence_list.length > 0) {
        for (let i = data.sentence_list.length; i--; ) {
          if (
            data.sentence_list[i].sentence_fc_list.length <= 1 ||
            data.sentence_list[i].sentence_fc_list_word_index === -1
          ) {
            data.sentence_list.splice(i, 1);
          }
        }
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.padingEvetn();
    },
    // KWIC排序
    KWICsortEvent(index, type) {
      if (this.KWIC_sortIndex == index) return;
      this.KWIC_sortIndex = index;
      //   this.CurrentList = this.allList[type];
      //   this.padingEvetn();
      this.getdata();
    },
    // 切换释义
    changeShiyi() {
      this.page = 1;
      this.padingEvetn();
    },
    // 排序
    sortEvent(type) {
      if (type !== this.sortType) {
        this.sortType = type;
        this.sort = '';
      }

      if (this.sort == 'down' || !this.sort) {
        this.sort = 'up';
      } else {
        this.sort = 'down';
      }
      this.getdata();
      this.page = 1;
    },
    // 修改大小
    cutSize(index) {
      this.sizeIndex = index;
      if (index == 0) {
        //大
        if (this.patternIndex == 0) {
          this.conSize = 24;
          this.pinyinSize = 12;
        } else {
          this.conSize = 20;
        }
      } else if (index == 1) {
        //中
        if (this.patternIndex == 0) {
          this.conSize = 20;
          this.pinyinSize = 12;
        } else {
          this.conSize = 17;
        }
      } else {
        //小
        if (this.patternIndex == 0) {
          this.conSize = 16;
          this.pinyinSize = 10;
        } else {
          this.conSize = 15;
        }
      }
    },
    // 切换模式
    cutPattern(index) {
      if (this.patternIndex == index) {
        return;
      }
      this.patternIndex = index;
      this.getdata();
      //   if (this.patternIndex == 0) {
      //     this.CurrentList = JSON.parse(JSON.stringify(this.allList.sentence_list));
      //   } else {
      //     this.CurrentList = JSON.parse(JSON.stringify(this.allList.sentence_list_sort_left));
      //   }
      //   this.padingEvetn();
      this.page = 1;
    },
    // 切换释义来源
    cutsyly(index) {
      if (this.rightTopIndex == index) {
        return;
      }
      this.rightTopIndex = index;
      if (this.rightTopIndex == 0) {
        this.rightList = this.allList.stat_list_word_definition;
      } else {
        this.rightList = this.allList.stat_list_sentence_source_book;
      }
      //   if (this.rightList.length > 0) {
      this.inityuan();
      //   }
    },
    //编辑例句
    handleEditLiju(item) {
      this.actvieEditLijuItem = {
        sentence_id: item ? item.sentence_id : '',
        new_word: this.keyword ? this.keyword.trim() : '',
        cixing: '',
        definition_list: item ? item.word_definition_list.join('\n') : '',
        sentence: item ? item.sentence_fc_list.join('  ') : '',
      };
      this.showEditLijuFlag = true;
    },
    handleClose() {
      this.showEditLijuFlag = false;
      this.actvieEditLijuItem = null;
    },
    // 保存
    save() {
      this.loading = true;
      let word_list = [];
      this.actvieEditLijuItem.sentence.split('  ').forEach((item) => {
        let obj = {
          word: item,
        };
        word_list.push(obj);
      });
      // 编辑
      let Mname = 'book-courseware_manager-UpdateWordExampleSentence';
      BookgetContent(Mname, {
        sentence_id: this.actvieEditLijuItem.sentence_id,
        new_word: {
          new_word: this.actvieEditLijuItem.new_word,
          cixing: this.actvieEditLijuItem.cixing,
          definition_list: this.actvieEditLijuItem.definition_list.split('\n'),
        },

        word_list: word_list,
      })
        .then((res) => {
          this.loading = false;
          this.showEditLijuFlag = false;
          this.actvieEditLijuItem = null;
          this.$message.success('保存成功');
          this.page = 1;
          this.getdata(true);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 删除例句
    handleDelLiju() {
      if (this.selectDelLijuIds.length === 0) return;
      this.loading = true;
      let Mname = 'book-courseware_manager-DeleteWordExampleSentence';
      BookgetContent(Mname, {
        sentence_id: this.selectDelLijuIds[0],
      })
        .then((res) => {
          this.loading = false;
          this.selectDelLijuIds = [];
          this.$message.success('删除成功');
          this.page = 1;
          this.getdata(true);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const _this = this;
    if (this.AccessToken) {
      const Mname = 'login_control-ParseAccessToken';
      await getStaticContent(Mname, {
        access_token: _this.AccessToken,
      }).then((res) => {
        res.access_token = _this.AccessToken;
        setToken(res);
        sessionStorage.setItem('GCLS_Token_Tc', JSON.stringify(res));
        this.showPage = true;
      });
      await getConfigInfor();
    }
    localStorage.removeItem('seekPageData');
    this.showPage = true;
    this.getLevelList();
    this.getTotalCount();
    if (this.keyword && this.keyword.trim()) {
      this.getdata(true);
    }
    let userInfor = getToken()
      ? JSON.parse(getToken())
      : sessionStorage.getItem('GCLS_Token_Tc')
      ? JSON.parse(sessionStorage.getItem('GCLS_Token_Tc'))
      : null;
    // userInfor.popedom_code_list = [2000004, 2000001, 2000007, 9000001];
    this.editLiju = userInfor && userInfor.popedom_code_list && userInfor.popedom_code_list.indexOf(9000001) > -1;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.corpus_seekpage {
  .title {
    margin-top: 24px;
    > :nth-child(1) {
      font-weight: 700;
      font-size: 32px;
      line-height: 38px;
      color: #000000;
    }
    > :nth-child(2) {
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
    }
    > p {
      margin: 0;
      text-align: center;
    }
  }
  .seek {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    height: 51px;
    position: relative;
    input {
      width: 468px;
      height: 51px;
      border: 1px solid #669aff;
      outline: none;
      box-sizing: border-box;
      padding: 0 10px;
    }
    button {
      width: 96px;
      height: 100%;
      background: #669aff;
      border-width: 1px 1px 1px 0px;
      border-style: solid;
      border-color: #669aff;
      text-align: center;
      font-weight: 400;
      font-size: 16px;
      line-height: 51px;
      color: #ffffff;
      cursor: pointer;
      box-sizing: border-box;
    }
    .set_corpus {
      position: absolute;
      top: 16px;
    }
  }
  .txt {
    margin-top: 24px;
    text-align: center;

    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    opacity: 0.65;
  }
  .txt_imgtable {
    width: 1200px;
    margin: 0 auto;

    .left {
      position: relative;
      width: 100%;
      padding-bottom: 68px;
      margin-right: 8px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 8%);
      border-radius: 0 0 8px 8px;

      > .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        font-size: 12px;
        font-weight: 400;
        color: #000;
        border-bottom: 1px solid rgba(0, 0, 0, 8%);

        > div {
          display: flex;
          align-items: center;
          column-gap: 16px;
        }

        .KWIC_sort {
          display: flex;

          span {
            display: inline-block;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            cursor: pointer;
            background: #fff;
            border-radius: 4px;
          }

          .sele {
            background: #f0f0f0;
          }

          .sort {
            img {
              width: 14px;
              height: 12px;
            }
          }

          .down {
            img {
              width: 16px;
              height: 16px;
            }
          }
        }

        .pattern {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 144px;
          height: 28px;
          margin-left: 16px;
          background: #eee;
          border-radius: 4px;

          > div {
            width: 68px;
            height: 24px;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            color: #888;
            text-align: center;
            cursor: pointer;
            border-radius: 2px;
          }

          .sele {
            color: #000;
            background: #fff;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 8%);
          }
        }

        .refresh {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          cursor: pointer;
          background: #eee;
          border-radius: 4px;

          img {
            width: 16px;
            height: 16px;
          }
        }

        .size {
          margin-right: 12px;

          span {
            padding: 4px;
            font-size: 14px;
            cursor: pointer;
          }

          .sele {
            background: #e6e6e6;
            border-radius: 4px;
          }
        }
      }
      .lang_sort {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        cursor: pointer;
        margin-right: 16px;
        border-radius: 20px;
        border: 1px solid #e5e6eb;
        padding: 4px 12px;
        font-size: 14px;
        &.active {
          border-color: #4992ff;
          background: #4992ff;
          color: #fff;
        }
        img {
          width: 16px;
          height: 16px;
          margin-left: 2px;
        }
      }
    }

    .right {
      width: 100%;
      padding-bottom: 39px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 8%);
      border-radius: 8px;
      margin-top: 16px;
      .top {
        display: flex;
        align-items: center;
        height: 44px;
        // border-bottom: 1px solid rgba(0, 0, 0, 8%);

        > div {
          display: flex;
          align-items: center;
          justify-content: center;
          //   width: 84px;
          padding: 0 2px;
          height: 28px;
          margin-left: 16px;
          background: #eee;
          border-radius: 4px;

          > div {
            width: 40px;
            height: 24px;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            color: #888;
            text-align: center;
            cursor: pointer;
            border-radius: 2px;
          }

          .sele {
            color: #000;
            background: #fff;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 8%);
          }
        }
      }
      .bottom {
        display: flex;
      }
      .list {
        width: 508px;
        margin: 0 auto;
        max-height: 1450px;
        overflow: auto;
        .one {
          display: flex;
          justify-content: space-between;
          padding: 12px;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: #333;
          cursor: pointer;
          border-bottom: 1px solid #eee;

          > :nth-child(1) {
            text-align: left;
          }

          > div {
            width: 186px;
            text-align: center;
          }
        }

        .all {
          font-size: 14px;
          font-weight: 600;
          line-height: 22px;
          color: #333;
          border-bottom: none;
        }
      }
    }
  }
  .cx-list {
    width: 1200px;
    margin: 24px auto 0 auto;
    display: flex;
    justify-content: space-between;
    .cx-list-box {
      display: flex;
      padding: 8px 16px;
      align-items: center;
      gap: 16px;
      border-radius: 8px 8px 0px 0px;
      border: 1px solid #ebebeb;
      background: #f7f7f7;
      border-bottom: none;
      width: max-content;
      color: #000;
      font-size: 16px;
      line-height: 24px;
      label {
        display: flex;
        padding: 4px 16px;
        flex-wrap: wrap;
        border-radius: 4px;
        gap: 8px;
        background: #fff;
        color: #007eff;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        > :nth-child(2) {
          color: #000;
          font-weight: 400;
        }
      }
    }
    .el-button {
      font-weight: 400;
      height: 38px;
    }
    .edit-liju {
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #669aff;
      background: #fff;
      color: #2164e4;
      font-size: 14px;
      line-height: 22px;
    }
  }

  .main {
    // height: 95%;
    .list {
      margin-top: 16px;

      .one {
        padding: 0 16px;
        margin-bottom: 8px;
        display: flex;
        align-items: end;

        .top {
          display: flex;
          //   align-items: center;

          // flex-flow: wrap;
          width: 100%;

          .number {
            flex-shrink: 0;
            width: 22px;
            margin-right: 8px;
            font-size: 14px;
            font-weight: 400;
            line-height: 21px;
            color: rgba(0, 0, 0, 30%);
            text-align: right;

            &-1-false {
              margin-top: 3px;
            }

            &-0-true {
              margin-top: 21px;
            }

            &-0-false {
              margin-top: 5px;
            }

            &-2-true {
              margin-top: 17px;
            }

            &-2-false {
              margin-top: 1px;
            }
          }

          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            cursor: pointer;

            &.speaker-1-false {
              margin-top: 6px;
            }

            &.speaker-0-true {
              margin-top: 24px;
            }

            &.speaker-0-false {
              margin-top: 8px;
            }

            &.speaker-2-true {
              margin-top: 20px;
            }

            &.speaker-2-false {
              margin-top: 4px;
            }
          }

          .words {
            // display: flex;
            // align-items: flex-end;
            // flex-flow: wrap;
            font-family: 'FZJCGFKTK';
            word-break: break-all;

            > div {
              .pinyin {
                margin-bottom: 2px;
                font-family: 'League';
                font-size: 12px;
                font-weight: 500;
                color: rgba(0, 0, 0, 50%);
                text-align: center;
              }

              .con {
                font-family: 'FZJCGFKTK';
                font-size: 20px;
                font-weight: 400;
                color: #000;
                text-align: center;
              }
            }
          }

          .shiyi {
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            color: #48a3e6;
            font-family: 'robot', 'FZJCGFKTK';
            &-0 {
              line-height: 32px;
            }

            &-1 {
              line-height: 28px;
            }
          }
        }

        .bottom {
          font-size: 12px;
          font-weight: 400;
          line-height: 150%;
          color: rgba(0, 0, 0, 30%);
          text-align: right;
          width: 117px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex-shrink: 0;
        }
      }

      .kwic_one {
        display: flex;
        align-items: center;
        padding: 0 16px;
        justify-content: space-between;

        > :nth-child(1) {
          justify-content: flex-end;
          width: 16px;
          margin-right: 16px;
        }

        .laiyuan {
          width: 117px;
          overflow: hidden;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: rgba(0, 0, 0, 65%);
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .word {
          display: flex;
          justify-content: center;
          // width: 361px;
          height: 22px;
          margin-left: 16px;
          overflow: hidden;
          font-family: 'FZJCGFKTK';
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: #000;
          white-space: nowrap;
          opacity: 1;

          > :nth-child(1) {
            // direction: rtl;
            // unicode-bidi: plaintext;
            // text-align: right;
            display: flex;
            justify-content: flex-end;
            width: 472px;
            overflow: hidden;
            white-space: nowrap;
          }

          > :nth-child(3) {
            width: 472px;
            overflow: hidden;
            text-align: left;
            white-space: nowrap;
            direction: ltr;
            unicode-bidi: plaintext;
          }
        }
      }
    }

    .page {
      position: absolute;
      bottom: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 64px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      padding: 16px;

      .text {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: rgba(0, 0, 0, 60%);
        text-align: center;
      }
    }
  }
  .edit-liju-box {
    width: 1200px;
    margin: 0 auto;
    border-radius: 0px 8px 8px 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-sizing: border-box;
    > .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding: 8px 16px;
      .select-number {
        color: #669aff;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        margin-right: 16px;
      }
      .el-button {
        padding: 4px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        border-radius: 20px;
      }
    }

    .page {
      position: inherit;
    }
    .el-icon-edit-outline {
      cursor: pointer;
      margin-left: 4px;
    }
  }
}
</style>
<style lang="scss">
.result {
  .el-switch__core {
    width: 26px !important;
    height: 16px;
  }

  .el-switch__core::after {
    top: 3px;
    width: 8px;
    height: 8px;
  }

  .el-switch.is-checked .el-switch__core::after {
    margin-left: -10px;
  }

  .el-switch__label.is-active {
    color: #000;
  }

  .page {
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #0052d9;
    }

    .el-pager li {
      background: #fff;
      border: 1px solid #dcdcdc;
      border-radius: 3px;
    }
  }
}

.el-loading-mask {
  z-index: 200000 !important;
}
.checkAllCheckbox {
  width: 100%;
  padding: 0 20px;
  height: 34px;
  line-height: 34px;
  &:hover {
    background-color: #f5f7fa;
  }
  .el-checkbox__input {
    display: none;
  }
  .el-checkbox__label {
    padding: 0;
  }
}
.selectBook {
  .el-tag {
    max-width: 90px;
  }
}
.el-button--primary,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #669aff;
  border-color: #669aff;
}
.el-button--primary.is-plain {
  color: #669aff;
  border-color: #669aff;
  &:hover {
    background-color: #669aff;
  }
}
.el-checkbox__inner {
  border-color: #669aff;
}
.seekpage-dialog {
  .el-dialog__header {
    padding: 0;
  }
  label {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 8px;
    display: block;
  }
  .el-input {
    margin-bottom: 8px;
  }
  .tips {
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 8px;
    display: block;
  }
  p {
    color: #ff5757;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 8px;
  }
}
</style>