GCLS_Page_TC/src/views/Textanalysis/index.vue

<template>
  <div v-loading="loading" class="textanalysis_index">
    <!-- <div class="wheader"> -->
    <HeaderPage v-if="!userID" />
    <!-- </div> -->
    <div class="main">
      <div>
        <div v-loading="LeftLoading" class="left">
          <a v-if="!userID" class="go-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
            返回
          </a>
          <div class="search">
            <div class="select-result" @click="showSearchColorList">
              <span class="selectBg" :style="{ background: colorValue }"></span>
              <i class="tri"></i>
            </div>
            <input
              v-model="searchVal"
              class="searchVal"
              :style="{ color: colorValue }"
              @keyup.enter="onSearch"
              @blur="searchVal = searchVal.trim()"
              @keydown="searchValChange"
            />
            <i class="search-icon" style="cursor: pointer" @click="onSearch"></i>
            <ul v-if="isSCL" class="searchColorList">
              <li
                v-for="(item, index) in searchColorList"
                :key="'search' + index"
                @click="selectSearchColor(item, index)"
              >
                <span class="searchColor" :style="{ background: item }"></span>
              </li>
              <li class="close" @click="closeSearchColor">关闭</li>
            </ul>
          </div>
          <div class="result-left-numberclose">
            <span>
              <span v-if="searchWordShow" style="font-size: 14px; line-height: 22px; color: #333">
                {{ SearchwordNumber }}次匹配
              </span>
            </span>
            <div>
              <span v-if="searchVal.trim() && !userID" class="resule-right-btn" @click="jumpSeekPage">
                在教材语料库中查看
              </span>
              <span class="resule-right-btn" @click="clearSelected('all')">清除标记</span>
            </div>
          </div>
          <div class="top_nav">
            <div :class="[leftNavIndex == 0 ? 'sele' : '']" @click="cutNav(0)">音节</div>
            <div :class="[leftNavIndex == 1 ? 'sele' : '']" @click="cutNav(1)">汉字</div>
            <div :class="[leftNavIndex == 2 ? 'sele' : '']" @click="cutNav(2)">词汇</div>
          </div>
          <div class="left_list">
            <div class="left_list_nav">
              <div class="left">
                <span :class="[headerText == 'wordCount' ? 'sele' : '']" @click="cutHeaderText('wordCount')">词头</span>
                <span :class="[headerText == 'textCount' ? 'sele' : '']" @click="cutHeaderText('textCount')">文本</span>
              </div>
              <div class="right">
                <span style="margin-right: 16px">
                  <el-switch
                    v-model="xifen"
                    active-color="#735CFF"
                    :width="26"
                    style="margin-right: 10px"
                    active-text="细分"
                    @change="changexifen"
                  />
                </span>
                <span @click="downloadLeft">
                  <img src="../../assets/teacherdev/dowload-text.png" alt="" />
                  下载</span
                >
              </div>
            </div>
            <div class="left_list_main">
              <div
                v-for="(item, index) in leftList"
                :key="'one' + index"
                :class="[seleLevelMapList.indexOf(item.id) != -1 ? 'sele' : '']"
                @click="levelMapListEvent(item)"
              >
                <div class="leftType">
                  <span
                    class="color"
                    :style="{
                      background: item.id && levelMap[item.id] ? levelMap[item.id].color : '',
                    }"
                  ></span>
                  <span class="type">{{ item.name }}</span>
                </div>
                <div class="rightCount">
                  <span class="count">{{ item.count }}</span>
                  <span class="precent">{{ item.ratio }}%</span>
                </div>
              </div>
              <div class="heji" @click="allListEvent">
                <div class="leftType">
                  <span class="color"></span>
                  <span class="type">合计</span>
                </div>
                <div class="rightCount">
                  <span class="count">{{ allValue }}</span>
                  <span class="precent">100.00%</span>
                </div>
              </div>
            </div>
          </div>
          <div id="echarts" class="tubiao">
            <div id="main_echarts" class="main_echarts"></div>
            <div class="cut_download">
              <span
                :class="[chartIndex == 0 ? 'sele' : '']"
                @click="createEcharts('main_echarts', '柱状图', leftList, 0)"
              >
                <img src="../../assets/teacherdev/duotone-chart1.png" alt="" />
              </span>
              <span
                :class="[chartIndex == 1 ? 'sele' : '']"
                @click="createEcharts('main_echarts', '雷达图', leftList, 1)"
              >
                <img src="../../assets/teacherdev/duotone-chart2.png" alt="" />
              </span>
              <span
                :class="[chartIndex == 2 ? 'sele' : '']"
                @click="createEcharts('main_echarts', '折线图', leftList, 2)"
              >
                <img src="../../assets/teacherdev/duotone-chart3.png" alt="" />
              </span>
              <span
                :class="[chartIndex == 3 ? 'sele' : '']"
                @click="createEcharts('main_echarts', '饼状图', leftList, 3)"
              >
                <img src="../../assets/teacherdev/duotone-chart4.png" alt="" />
              </span>
              <span class="download" @click="downLoadEcharts">
                <img src="../../assets/teacherdev/dowload-text.png" alt="" />
                下载
              </span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="word_back">
            <div class="word">
              <span class="title">主题词：</span>
              <span v-for="(item, i) in subjectWords" :key="i + 'word'">{{ item }}</span>
            </div>
            <div v-if="$route.query.type != '文本分析'" class="back">返回课文</div>
          </div>
          <div class="btn_set">
            <div class="btn">
              <div class="btn_dv" style="margin-right: 12px" @click="ciyunEvent">
                <img src="../../assets/teacherdev/icon-ciyun.png" alt="" />
                词云
              </div>
              <div class="btn_dv" style="margin-right: 12px" @click="gowordTable">
                <img src="../../assets/teacherdev/icon-cibiao.png" alt="" />
                词表
              </div>
              <div class="btn_dv" style="margin-right: 12px" @click="downArticle">
                <img src="../../assets/teacherdev/icon-down.png" alt="" />
                下载
              </div>
              <div class="btn_dv" style="margin-right: 12px" @click="checkArticle">
                <img src="../../assets/teacherdev/pencil-ruler-line.png" alt="" />
                校对
              </div>
              <div class="daxiao">
                <span @click="handleFontsize('-')">
                  <template v-if="wordFontsize > 12">
                    <img src="../../assets/teacherdev/minus-icon.png" />
                  </template>
                  <template v-else>
                    <img src="../../assets/teacherdev/minus-icon-white-disabled.png" />
                  </template>
                </span>
                <img src="../../assets/teacherdev/dxAA.png" class="dxAA" />
                <span @click="handleFontsize('+')">
                  <template v-if="wordFontsize < 24">
                    <img src="../../assets/teacherdev/add-icon.png" />
                  </template>
                  <template v-else>
                    <img src="../../assets/teacherdev/add-icon-white-disabled.png" />
                  </template>
                </span>
              </div>
            </div>
            <div class="set">
              <el-switch
                v-model="pinyinShow"
                active-color="#735CFF"
                style="margin-right: 12px"
                :width="26"
                inactive-text="拼音"
              />
              <el-switch
                v-if="pinyinShow"
                v-model="pinyinBottom"
                active-color="#735CFF"
                :width="26"
                inactive-text="拼音在下"
                style="margin-right: 12px"
                @change="changePinyinPosition"
              />
              <el-switch
                v-model="fenci"
                active-color="#735CFF"
                :width="26"
                style="margin-right: 12px"
                inactive-text="分词"
              />
              <!-- <el-switch
                v-if="fenci"
                v-model="cixing"
                active-color="#735CFF"
                :width="26"
                style="margin-right: 12px"
                inactive-text="词性"
              /> -->
            </div>
          </div>
          <div class="right_main">
            <div style="display: flex">
              <div class="right_main_top">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="采用TTR公式衡量文本丰富度，音节丰富度指不同音节数量与总数量的比值。"
                  placement="bottom"
                >
                  <div>
                    <span
                      >音节丰富度
                      <span style="margin-left: 5px">
                        {{ (difficulty.pinyinDifficulty * 1).toFixed(2) }}
                      </span>
                    </span>
                    <span class="line">|</span>
                    <span>{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span>
                  </div></el-tooltip
                >
                <div class="twoline"></div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="采用TTR公式衡量文本丰富度，汉字丰富度指不同汉字数量与总数量的比值。"
                  placement="bottom"
                >
                  <div>
                    <span
                      >汉字丰富度
                      <span style="margin-left: 5px">
                        {{ (difficulty.wordDifficulty * 1).toFixed(2) }}
                      </span>
                    </span>
                    <span class="line">|</span>
                    <span>{{ base.wordCount }} / {{ base.wordTextCount }}</span>
                  </div>
                </el-tooltip>
                <div class="twoline"></div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="采用TTR公式衡量文本丰富度，词汇丰富度指不同词汇数量与总数量的比值。"
                  placement="bottom"
                >
                  <div>
                    <span
                      >词汇丰富度
                      <span style="margin-left: 5px">
                        {{ (difficulty.vocabularyDifficulty * 1).toFixed(2) }}
                      </span>
                    </span>
                    <span class="line">|</span>
                    <span>{{ base.vocabularyCount }} / {{ base.vocabularyTextCount }}</span>
                  </div>
                </el-tooltip>
              </div>
              <span class="edit-btn" @click="editArticle()"><i class="el-icon-edit"></i>修改文本</span>
            </div>
            <div ref="articel" class="articel">
              <div v-for="(items, index) in ArticelData" :key="index + 'paragraph'" class="paragraph">
                <!-- <span
                  class="sentence"
                  v-for="(items, indexs) in item"
                  :key="indexs + 'sentence'"
                > -->
                <span
                  v-for="(itemss, indexss) in items"
                  :key="indexss + 'words'"
                  class="words"
                  :style="{
                    margin: fenci ? `0 ${wordsMargin}px` : '',
                  }"
                >
                  <template v-if="fenci">
                    <template v-if="itemss.pinyin_lt">
                      <span class="word">
                        <span class="text">
                          <span
                            v-if="pinyinShow && !pinyinBottom"
                            :class="['pinyin']"
                            :style="{
                              fontSize: pinyinFontsize + 'px',
                              lineHeight: pinyinLineHeight + 'px',
                            }"
                          >
                            {{ itemss.pinyin_lt }}
                          </span>
                          <br v-if="pinyinShow" />
                          <span :class="['word-box']">
                            <template v-for="(word, indexsss) in itemss.text">
                              <span
                                v-if="word.isShow"
                                :key="indexsss + 'word'"
                                class="hanzi"
                                :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                                :style="{
                                  fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                                  fontSize: wordFontsize + 'px',
                                  lineHeight: wordLineHeight + 'px',
                                  background: word.color ? word.color : '',
                                  whiteSpace: 'pre',
                                  color: word.color
                                    ? '#000'
                                    : !xifen
                                    ? leftNavIndex == 0
                                      ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                        ? levelMap[word.levels.P_G].color
                                        : '#000'
                                      : leftNavIndex == 1
                                      ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                        ? levelMap[word.levels.W_G].color
                                        : '#000'
                                      : leftNavIndex == 2
                                      ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                        ? levelMap[word.levels.C_G].color
                                        : '#000'
                                      : '#000'
                                    : leftNavIndex == 0
                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                      ? levelMap[word.levels.P_L].color
                                      : '#000'
                                    : leftNavIndex == 1
                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                      ? levelMap[word.levels.W_L].color
                                      : '#000'
                                    : leftNavIndex == 2
                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                      ? levelMap[word.levels.C_L].color
                                      : '#000'
                                    : '#000',
                                }"
                                >{{ word.word }}</span
                              >
                            </template>
                          </span>
                          <br v-if="pinyinShow" />
                          <span
                            v-if="pinyinShow && pinyinBottom"
                            :class="['pinyin']"
                            :style="{
                              fontSize: pinyinFontsize + 'px',
                              lineHeight: pinyinLineHeight + 'px',
                            }"
                          >
                            {{ itemss.pinyin_lt }}
                          </span>
                        </span>
                        <span class="texts">
                          <template v-if="pinyinShow && !pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              <!-- {{ itemss.pinyinStr }} -->
                            </span>
                          </template>
                          <br v-if="pinyinShow" />
                          <span>
                            <template v-for="(word, indexsss) in itemss.texts">
                              <span
                                :key="indexsss + 'word'"
                                class="hanzi"
                                :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                                :style="{
                                  fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                                  fontSize: wordFontsize + 'px',
                                  lineHeight: wordLineHeight + 'px',
                                  background: word.color ? word.color : '',
                                  whiteSpace: 'pre',
                                  color: word.color
                                    ? '#000'
                                    : !xifen
                                    ? leftNavIndex == 0
                                      ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                        ? levelMap[word.levels.P_G].color
                                        : '#000'
                                      : leftNavIndex == 1
                                      ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                        ? levelMap[word.levels.W_G].color
                                        : '#000'
                                      : leftNavIndex == 2
                                      ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                        ? levelMap[word.levels.C_G].color
                                        : '#000'
                                      : '#000'
                                    : leftNavIndex == 0
                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                      ? levelMap[word.levels.P_L].color
                                      : '#000'
                                    : leftNavIndex == 1
                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                      ? levelMap[word.levels.W_L].color
                                      : '#000'
                                    : leftNavIndex == 2
                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                      ? levelMap[word.levels.C_L].color
                                      : '#000'
                                    : '#000',
                                }"
                                >{{ word.word }}</span
                              >
                            </template>
                          </span>
                          <br v-if="pinyinShow" />
                          <template v-if="pinyinShow && pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              <!-- {{ itemss.pinyinStr }} -->
                            </span>
                          </template>
                        </span>
                      </span>
                    </template>
                    <template v-else>
                      <span :class="['word']">
                        <!-- <template v-if="word.isShow"> -->
                        <span class="text">
                          <template v-if="pinyinShow && !pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              {{ itemss.pinyinStr }}
                            </span>
                          </template>
                          <br v-if="pinyinShow" />
                          <span>
                            <template v-for="(word, indexsss) in itemss.text">
                              <span
                                v-if="word.isShow"
                                :key="indexsss + 'word'"
                                class="hanzi"
                                :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                                :style="{
                                  fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                                  fontSize: wordFontsize + 'px',
                                  lineHeight: wordLineHeight + 'px',
                                  background: word.color ? word.color : '',
                                  whiteSpace: 'pre',
                                  color: word.color
                                    ? '#000'
                                    : !xifen
                                    ? leftNavIndex == 0
                                      ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                        ? levelMap[word.levels.P_G].color
                                        : '#000'
                                      : leftNavIndex == 1
                                      ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                        ? levelMap[word.levels.W_G].color
                                        : '#000'
                                      : leftNavIndex == 2
                                      ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                        ? levelMap[word.levels.C_G].color
                                        : '#000'
                                      : '#000'
                                    : leftNavIndex == 0
                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                      ? levelMap[word.levels.P_L].color
                                      : '#000'
                                    : leftNavIndex == 1
                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                      ? levelMap[word.levels.W_L].color
                                      : '#000'
                                    : leftNavIndex == 2
                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                      ? levelMap[word.levels.C_L].color
                                      : '#000'
                                    : '#000',
                                }"
                                >{{ word.word }}</span
                              >
                            </template>
                            <span
                              v-if="cixing"
                              class="hanzi"
                              :style="{
                                fontSize: wordFontsize - 4 + 'px',
                                lineHeight: wordLineHeight + 'px',
                              }"
                              >{{ '_' + itemss.pos }}</span
                            >
                          </span>
                          <br v-if="pinyinShow" />
                          <template v-if="pinyinShow && pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              {{ itemss.pinyinStr }}
                            </span>
                          </template>
                        </span>
                        <span class="texts">
                          <template v-if="pinyinShow && !pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              <!-- {{ itemss.pinyinStr }} -->
                            </span>
                          </template>
                          <br v-if="pinyinShow" />
                          <span>
                            <template v-for="(word, indexsss) in itemss.texts">
                              <span
                                :key="indexsss + 'word'"
                                class="hanzi"
                                :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                                :style="{
                                  fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                                  fontSize: wordFontsize + 'px',
                                  lineHeight: wordLineHeight + 'px',
                                  background: word.color ? word.color : '',
                                  whiteSpace: 'pre',
                                  color: word.color
                                    ? '#000'
                                    : !xifen
                                    ? leftNavIndex == 0
                                      ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                        ? levelMap[word.levels.P_G].color
                                        : '#000'
                                      : leftNavIndex == 1
                                      ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                        ? levelMap[word.levels.W_G].color
                                        : '#000'
                                      : leftNavIndex == 2
                                      ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                        ? levelMap[word.levels.C_G].color
                                        : '#000'
                                      : '#000'
                                    : leftNavIndex == 0
                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                      ? levelMap[word.levels.P_L].color
                                      : '#000'
                                    : leftNavIndex == 1
                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                      ? levelMap[word.levels.W_L].color
                                      : '#000'
                                    : leftNavIndex == 2
                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                      ? levelMap[word.levels.C_L].color
                                      : '#000'
                                    : '#000',
                                }"
                                >{{ word.word }}</span
                              >
                            </template>
                          </span>
                          <br v-if="pinyinShow" />
                          <template v-if="pinyinShow && pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              <!-- {{ itemss.pinyinStr }} -->
                            </span>
                          </template>
                        </span>
                        <!-- </template> -->
                      </span>
                    </template>
                  </template>
                  <template v-else>
                    <template v-if="itemss.pinyin_lt">
                      <span
                        class="word"
                        :style="{ padding: `0 ${wordsMargin < 3 ? '1' : wordsMargin > 5 ? '2' : wordsMargin - 2}px` }"
                      >
                        <span class="text">
                          <span
                            v-if="pinyinShow && !pinyinBottom"
                            :class="['pinyin']"
                            :style="{
                              fontSize: pinyinFontsize + 'px',
                              lineHeight: pinyinLineHeight + 'px',
                            }"
                          >
                            {{ itemss.pinyin_lt }}
                          </span>
                          <br v-if="pinyinShow" />
                          <span class="word-box">
                            <template v-for="(word, indexsss) in itemss.text">
                              <span
                                v-if="word.isShow"
                                :key="indexsss + 'word'"
                                class="hanzi"
                                :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                                :style="{
                                  fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                                  fontSize: wordFontsize + 'px',
                                  lineHeight: wordLineHeight + 'px',
                                  background: word.color ? word.color : '',
                                  whiteSpace: 'pre',
                                  color: word.color
                                    ? '#000'
                                    : !xifen
                                    ? leftNavIndex == 0
                                      ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                        ? levelMap[word.levels.P_G].color
                                        : '#000'
                                      : leftNavIndex == 1
                                      ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                        ? levelMap[word.levels.W_G].color
                                        : '#000'
                                      : leftNavIndex == 2
                                      ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                        ? levelMap[word.levels.C_G].color
                                        : '#000'
                                      : '#000'
                                    : leftNavIndex == 0
                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                      ? levelMap[word.levels.P_L].color
                                      : '#000'
                                    : leftNavIndex == 1
                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                      ? levelMap[word.levels.W_L].color
                                      : '#000'
                                    : leftNavIndex == 2
                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                      ? levelMap[word.levels.C_L].color
                                      : '#000'
                                    : '#000',
                                }"
                                >{{ word.word }}</span
                              >
                            </template>
                          </span>
                          <br v-if="pinyinShow" />
                          <span
                            v-if="pinyinShow && pinyinBottom"
                            :class="['pinyin']"
                            :style="{
                              fontSize: pinyinFontsize + 'px',
                              lineHeight: pinyinLineHeight + 'px',
                            }"
                          >
                            {{ itemss.pinyin_lt }}
                          </span>
                        </span>
                        <span class="texts">
                          <template v-if="pinyinShow && !pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              <!-- {{ itemss.pinyinStr }} -->
                            </span>
                          </template>
                          <br v-if="pinyinShow" />
                          <span>
                            <template v-for="(word, indexsss) in itemss.texts">
                              <span
                                :key="indexsss + 'word'"
                                class="hanzi"
                                :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                                :style="{
                                  fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                                  fontSize: wordFontsize + 'px',
                                  lineHeight: wordLineHeight + 'px',
                                  background: word.color ? word.color : '',
                                  whiteSpace: 'pre',
                                  color: word.color
                                    ? '#000'
                                    : !xifen
                                    ? leftNavIndex == 0
                                      ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                        ? levelMap[word.levels.P_G].color
                                        : '#000'
                                      : leftNavIndex == 1
                                      ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                        ? levelMap[word.levels.W_G].color
                                        : '#000'
                                      : leftNavIndex == 2
                                      ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                        ? levelMap[word.levels.C_G].color
                                        : '#000'
                                      : '#000'
                                    : leftNavIndex == 0
                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                      ? levelMap[word.levels.P_L].color
                                      : '#000'
                                    : leftNavIndex == 1
                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                      ? levelMap[word.levels.W_L].color
                                      : '#000'
                                    : leftNavIndex == 2
                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                      ? levelMap[word.levels.C_L].color
                                      : '#000'
                                    : '#000',
                                }"
                                >{{ word.word }}</span
                              >
                            </template>
                          </span>
                          <br v-if="pinyinShow" />
                          <template v-if="pinyinShow && pinyinBottom">
                            <span
                              :class="['pinyin']"
                              :style="{
                                fontSize: pinyinFontsize + 'px',
                                lineHeight: pinyinLineHeight + 'px',
                              }"
                            >
                              <!-- {{ itemss.pinyinStr }} -->
                            </span>
                          </template>
                        </span>
                      </span>
                    </template>
                    <template v-else>
                      <span
                        v-for="(word, indexsss) in itemss.text"
                        :key="indexsss + 'word'"
                        class="word"
                        :style="{
                          padding: word.isShow
                            ? `0 ${wordsMargin < 3 ? '1' : wordsMargin > 5 ? '2' : wordsMargin - 2}px`
                            : '',
                          display: 'initial',
                        }"
                      >
                        <template v-if="word.isShow">
                          <span
                            v-if="pinyinShow && !pinyinBottom"
                            :class="['pinyin']"
                            :style="{
                              fontSize: pinyinFontsize + 'px',
                              lineHeight: pinyinLineHeight + 'px',
                            }"
                          >
                            {{ word.pinyin }}
                          </span>
                          <br v-if="pinyinShow" />
                          <span
                            class="hanzi"
                            :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                            :style="{
                              fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                              fontSize: wordFontsize + 'px',
                              lineHeight: wordLineHeight + 'px',
                              background: word.color ? word.color : '',
                              whiteSpace: 'pre',
                              color: word.color
                                ? '#000'
                                : !xifen
                                ? leftNavIndex == 0
                                  ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                    ? levelMap[word.levels.P_G].color
                                    : '#000'
                                  : leftNavIndex == 1
                                  ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                    ? levelMap[word.levels.W_G].color
                                    : '#000'
                                  : leftNavIndex == 2
                                  ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                    ? levelMap[word.levels.C_G].color
                                    : '#000'
                                  : '#000'
                                : leftNavIndex == 0
                                ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                  ? levelMap[word.levels.P_L].color
                                  : '#000'
                                : leftNavIndex == 1
                                ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                  ? levelMap[word.levels.W_L].color
                                  : '#000'
                                : leftNavIndex == 2
                                ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                  ? levelMap[word.levels.C_L].color
                                  : '#000'
                                : '#000',
                            }"
                            >{{ word.word }}</span
                          >
                          <br v-if="pinyinShow" />
                          <span
                            v-if="pinyinShow && pinyinBottom"
                            :class="['pinyin']"
                            :style="{
                              fontSize: pinyinFontsize + 'px',
                              lineHeight: pinyinLineHeight + 'px',
                            }"
                          >
                            {{ word.pinyin }}
                          </span>
                        </template>
                      </span>
                      <span
                        v-for="(word, indexsss) in itemss.texts"
                        :key="indexsss + 'words'"
                        class="word"
                        :style="{ display: 'initial' }"
                      >
                        <span
                          v-if="pinyinShow && !pinyinBottom"
                          :class="['pinyin']"
                          :style="{
                            fontSize: pinyinFontsize + 'px',
                            lineHeight: pinyinLineHeight + 'px',
                          }"
                        >
                          {{ word.pinyin }}
                        </span>
                        <br v-if="pinyinShow" />
                        <span
                          class="hanzi"
                          :class="[/^[a-zA-Z0-9]/.test(word.word) ? '' : 'hanzi-fz']"
                          :style="{
                            fontFamily: /^[a-zA-Z0-9]/.test(word.word) ? '' : '楷体',
                            fontSize: wordFontsize + 'px',
                            lineHeight: wordLineHeight + 'px',
                            background: word.color ? word.color : '',
                            whiteSpace: 'pre',
                            color: word.color
                              ? '#000'
                              : !xifen
                              ? leftNavIndex == 0
                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                  ? levelMap[word.levels.P_G].color
                                  : '#000'
                                : leftNavIndex == 1
                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                  ? levelMap[word.levels.W_G].color
                                  : '#000'
                                : leftNavIndex == 2
                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                  ? levelMap[word.levels.C_G].color
                                  : '#000'
                                : '#000'
                              : leftNavIndex == 0
                              ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                ? levelMap[word.levels.P_L].color
                                : '#000'
                              : leftNavIndex == 1
                              ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                ? levelMap[word.levels.W_L].color
                                : '#000'
                              : leftNavIndex == 2
                              ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                ? levelMap[word.levels.C_L].color
                                : '#000'
                              : '#000',
                          }"
                          >{{ word.word }}</span
                        >
                        <br v-if="pinyinShow" />
                        <span
                          v-if="pinyinShow && pinyinBottom"
                          :class="['pinyin']"
                          :style="{
                            fontSize: pinyinFontsize + 'px',
                            lineHeight: pinyinLineHeight + 'px',
                          }"
                        >
                          {{ word.pinyin }}
                        </span>
                      </span>
                    </template>
                  </template>
                </span>
                <!-- </span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="echarts_none_0" style="display: none; width: 592px; height: 568px"></div>
    <div id="echarts_none_1" style="display: none; width: 592px; height: 568px"></div>
    <div id="echarts_none_2" style="display: none; width: 592px; height: 568px"></div>
    <div id="echarts_none_3" style="display: none; width: 592px; height: 568px"></div>
    <el-dialog
      :show-close="false"
      :visible.sync="editArticleFlag"
      width="800px"
      :before-close="handleClose"
      :modal="false"
      class="edit-dialog"
    >
      <el-input
        v-model="noPosContent"
        type="textarea"
        placeholder="请输入文本"
        :autosize="{ minRows: 9 }"
        :maxlength="3000"
      />
      <span slot="footer" class="dialog-footer">
        <span class="left">{{ noPosContent.length }}/{{ 3000 }}</span>
        <div>
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="saveWord(id)">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HeaderPage from '@/components/Header.vue';
import * as echarts from 'echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import { reparse, publicMethods, GetTextAnalyseRecordInfo } from '@/api/api';
import { levelMap } from '../../common/data';
import { json2excel } from '@/utils/setMethods';

import FileSaver from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';
import { markRaw } from 'vue';

export default {
  components: {
    HeaderPage,
  },
  data() {
    return {
      ratioShow: false,
      chsFhList: ['，', '。', '”', '：', '》', '《', '？', '！', '；', '、', '~'],
      loading: false,
      LeftLoading: false,
      wordFontsize: 20, // 汉字字号初始值
      pinyinFontsize: 12, // 拼音字号初始值
      wordLineHeight: 28,
      pinyinLineHeight: 12,
      wordsMargin: 3,
      fenci: false,
      pinyinShow: false,
      pinyinBottom: false, // 拼音在下
      leftNavIndex: 2,
      leftList: null,
      colorValue: '#FF3737',
      colorIndex: 0,
      searchVal: '',
      isSCL: false,
      searchColorList: [
        '#FF3737',
        '#875EDE',
        '#FF8000',
        '#FF55F3',
        '#CEB800',
        // "#CB1975",
        // "#00D8B4",
        // "#00CEFF",
        // "#3274FF",
        // "#00B60A",
        // 等级颜色
        '#B6D58A',
        '#66AE5B',
        '#35776B',
        '#73CDDE',
        '#4CA6EE',
        '#3873CB',
        '#9031AA',
        '#CBCBCB',
        '#888888',
      ],
      SearchwordNumber: 0,
      searchWord: [],
      searchWordShow: false,
      type: '',
      headerText: 'wordCount',
      xifen: false,
      myChart: null,
      myChart_none: null,
      currentTBdata: {},
      currentcolorValue: [],
      subjectWords: null,
      partitionKey: null,
      base: {},
      levelMap,
      allValue: 0,
      allRatio: 0,
      chartIndex: 0,
      ArticelData: null,
      seleLevelMapList: [],
      difficulty: {},
      textContent: [],
      routerData: null,
      id: null,
      userID: this.$route.query.userID,
      cixing: false, // 词性开关
      editArticleFlag: false, // 修改文本
      noPosContent: '',
      cixing_ttr_list: [],
    };
  },
  created() {
    this.routerData = this.$route.query;
    if (!this.routerData) return;
    this.id = this.routerData.id;
    this.getstatistics();
    GetTextAnalyseRecordInfo({ id: this.routerData.id }).then(({ record }) => {
      this.noPosContent = record.txt;
    });
  },
  mounted() {
    // 为了复制到富文本不丢失样式
    this.$refs.articel.addEventListener('copy', (e) => {
      // 获取用户的选区
      let content = window.getSelection().getRangeAt(0).cloneContents();
      let paragraphs = content.querySelectorAll('.paragraph'); // 获取选中的段落
      let span = document.createElement('span');
      if (paragraphs.length <= 0) {
        // 单行情况下
        span.classList = 'paragraph';
        span.style = 'display: flex; flex-wrap: wrap; margin-bottom: 22px;font-weight: 500;';
      } else {
        // 多行情况下
        paragraphs.forEach((item) => {
          item.style = 'display: flex; flex-wrap: wrap; margin-bottom: 22px;font-weight: 500;';
        });
        span.classList = 'articel';
        span.style = 'font-weight: 500;';
      }
      // 将 content 设到 span 中
      span.appendChild(content);
      // words
      if (paragraphs.length <= 0) {
        let words = span.querySelectorAll('.words');
        words.forEach((item) => {
          item.style.cssText += 'display: flex;';
        });
      } else {
        paragraphs.forEach((item) => {
          let words = item.querySelectorAll('.words');
          words.forEach((items, i) => {
            items.style.cssText += `display: flex;${i === 0 ? 'min-width: 22px;' : ''}`;
          });
        });
      }
      // word
      let word = span.querySelectorAll('.word');
      word.forEach((item) => {
        item.style.cssText +=
          item.style.display === 'initial' ? 'text-align: center;' : 'display: flex; text-align: center;';
      });
      // pinyin
      let pinyin = span.querySelectorAll('.pinyin');
      pinyin.forEach((item) => {
        item.style.cssText +=
          'min-height: 12px; font-family: "League"; line-height: 12px; color: rgba(0, 0, 0, 50%); text-align: center;';
      });
      // hanzi
      let hanzi = span.querySelectorAll('.hanzi');
      hanzi.forEach((item) => {
        item.style.cssText += 'line-height: 28px; color: #000; text-align: center;';
      });
      // hanzi_fz
      let hanzi_fz = span.querySelectorAll('.hanzi-fz');
      hanzi_fz.forEach((item) => {
        item.style.cssText += 'font-family: "FZJCGFKTK";';
      });

      // 将 span 转为字符串，包含样式
      let spanHtml = span.outerHTML;
      spanHtml = spanHtml.replace(/<div/g, '<span').replace(/<\/div/g, '</span');
      // 修改复制到剪贴板的数据
      e.clipboardData.setData('text/html', spanHtml);

      // 阻止默认的复制操作
      e.preventDefault();
    });
  },
  methods: {
    // 词表
    gowordTable() {
      let data = JSON.parse(JSON.stringify(this.routerData));
      data.leftNavIndex = this.leftNavIndex;
      this.$router.push({
        path: '/textanalysis/WordTable',
        query: data,
      });
    },
    // 取消搜索高亮
    closeSearchhighlight() {
      this.ArticelData.forEach((item) => {
        // item.forEach((items) => {
        item.forEach((itemss) => {
          itemss.text.forEach((itemsss) => {
            itemsss.color = null;
          });
        });
        // });
      });
    },
    // 取消等级高亮
    closelevelMaphighlight() {
      this.seleLevelMapList = [];
    },
    // 下载文章
    downArticle() {
      let html = '';
      // let newhtml = '';
      if (this.$('.articel').length > 0) {
        html = this.$('.articel').html();
        // this.$("br").remove();
        // newhtml = this.$(".articel").html();
        // this.$(".articel").html(html);
      }
      let richness =
        `<div style="text-align:center;font-size: 五号;font-weight: 600;line-height: 22px;color: #a5a5a5;">` +
        `音节丰富度 ${Number(this.difficulty.pinyinDifficulty).toFixed(2)} | ${this.base.pinyinCount}/${
          this.base.pinyinTextCount
        }    ` +
        `汉字丰富度 ${Number(this.difficulty.wordDifficulty).toFixed(2)} | ${this.base.wordCount}/${
          this.base.wordTextCount
        }    ` +
        `词汇丰富度 ${Number(this.difficulty.vocabularyDifficulty).toFixed(2)} | ${this.base.vocabularyCount}/${
          this.base.vocabularyTextCount
        }</div><br/>`;
      let dv = document.createElement('div');
      dv.id = 'html_dv';
      dv.innerHTML = richness + html;
      dv.style.display = 'none';
      document.body.appendChild(dv);
      let cxzcxz = this.$('#html_dv').html();
      let style = `<style>
  .sentence {
    margin-bottom: 8px;
  }
  .pinyin {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 12px;
    font-family: "League";
  }
  .hanzi {
    text-align: center;
    line-height: 28px;
  }
  .hanzi-fz{
    font-family: "楷体";
  }
  </style>`;
      let content = `<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      ${style}
  </head>
  <body>
  <div>
      ${cxzcxz}
  </div>
  </body>
  </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, '文章.docx');
      document.body.removeChild(dv);
    },
    // 全部高亮
    allListEvent() {
      if (this.seleLevelMapList.length === this.leftList.length) {
        this.seleLevelMapList = [];
      } else {
        this.seleLevelMapList = [];
        this.leftList.forEach((item) => {
          this.seleLevelMapList.push(item.id);
        });
      }
    },
    // 选择高亮等级
    levelMapListEvent(item) {
      // this.clearSelected("all");
      let index = this.seleLevelMapList.indexOf(item.id);
      if (index === -1) {
        this.seleLevelMapList.push(item.id);
      } else {
        this.seleLevelMapList.splice(index, 1);
      }
    },
    downloadLeft() {
      let data = JSON.parse(JSON.stringify(this.leftList));
      data.forEach((item) => {
        item.ratio += '%';
      });
      let obj = {
        name: '合计',
        ratio: this.allRatio,
        value: `${this.allValue}%`,
      };
      data.push(obj);
      let excelDatas = [
        {
          tHeader: ['等级', '数量', '占比'],
          filterVal: ['name', 'value', 'ratio'], // 表一的数据字段
          tableDatas: data, // 表一的整体json数据
          sheetName: 'sheet1', // 表一的sheet名字
        },
      ];
      // 引入的函数
      json2excel(excelDatas, '等级分布', true, 'xlsx');
    },
    downLoadEcharts() {
      let chartsCanvas = document.getElementById(`echarts_none_${this.chartIndex}`).querySelectorAll('canvas')[0];
      let picInfo = chartsCanvas.toDataURL({
        type: 'png',
        pixelRatio: 1, // 放大两倍下载。解决生成图片在移动端模糊问题
        backgroundColor: '#fff',
        excludeComponents: ['toolbox'], // 导出时忽略toolbox组件
      }); // 获取到的是一串base64信息
      const elink = document.createElement('a');
      // 设置默认文件名，this.chartTitle为绘图时生成的标题
      elink.download = '等级分布.png';
      elink.style.display = 'none';
      elink.href = picInfo;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    },
    ciyunEvent() {
      window.location.href = `${window.location.origin}/GCLS-TC/ciyun/ciyunindex.html?partitionKey=${this.id}&searchType=${this.leftNavIndex}&userID=${this.userID}`;
      // window.open(
      //   `./ciyun/ciyunindex.html?partitionKey=${this.id}&searchType=${this.leftNavIndex}&userID=${this.userID}`,
      //   '_blank',
      // );
    },
    // 处理字体大小
    handleFontsize(symbol) {
      if (symbol === '+') {
        if (this.wordFontsize < 24) {
          this.pinyinFontsize += 2;
          this.wordFontsize += 2;
          this.pinyinLineHeight += 2;
          this.wordLineHeight += 2;
          this.wordsMargin += 1;
        }
      } else if (symbol === '-') {
        if (this.wordFontsize > 12) {
          this.pinyinFontsize -= 2;
          this.wordFontsize -= 2;
          this.pinyinLineHeight -= 2;
          this.wordLineHeight -= 2;
          if (this.wordsMargin > 2) {
            this.wordsMargin -= 1;
          }
        }
      }
    },
    cutNav(index) {
      this.leftNavIndex = index;
      this.seleLevelMapList = [];
      this.xifen = false;
      this.getstatistics('left');
    },
    showSearchColorList() {
      this.isSCL = !this.isSCL;
    },
    closeSearchColor() {
      this.isSCL = false;
    },
    selectSearchColor(item, index) {
      this.isSCL = false;
      this.colorValue = item;
      this.colorIndex = index;
    },
    searchValChange(e) {
      if (this.searchVal.length === 1 && e.keyCode === 8) {
        if (this.colorIndex === this.searchWord.length + 1 || this.searchWord.length === 0) {
          return;
        }
        this.colorIndex = this.searchWord.length + 1;
        this.colorValue = this.searchColorList[this.colorIndex];
      }
    },
    onSearch() {
      if (!this.searchVal) {
        return;
      }
      this.searchWordShow = true;
      this.closelevelMaphighlight();
      let index = this.searchWord.indexOf(this.searchVal.toLowerCase());
      if (index === -1) {
        this.searchWord.push(this.searchVal.toLowerCase());
        this.currentcolorValue.push(this.colorValue);
      } else {
        // this.currentcolorValue[index] = this.colorValue;
        this.$set(this.currentcolorValue, index, this.colorValue);
      }
      this.type = '';
      this.calculateSearchwordNumber();
      // this.searchVal = "";
    },
    // 词表跳转高亮
    async wordTablehighlight(data, color) {
      this.searchWordShow = true;

      this.colorValue = color;
      this.searchColorList.forEach((item, i) => {
        if (color === item) {
          this.colorIndex = i;
        }
      });
      this.searchVal = data[data.length - 1];
      let arr = [];
      await data.forEach((item) => {
        this.calculateIndex(this.textContent, item).then((res) => {
          arr.push(res);
        });
      });
      this.SearchwordNumber = arr[arr.length - 1].length; // 高亮最后一次
      // 匹配高亮
      this.ArticelData.forEach((item) => {
        item.forEach((items) => {
          // items.forEach((itemss) => {
          items.text.forEach((itemsss) => {
            arr.forEach((searchItem) => {
              searchItem.forEach((searchItems) => {
                searchItems.forEach((searchItemss) => {
                  if (itemsss.index === searchItemss) {
                    itemsss.color = color;
                  }
                });
              });
            });
          });
          // });
        });
      });
      this.$forceUpdate();
    },
    // 计算匹配个数
    async calculateSearchwordNumber() {
      let arr = [];
      await this.searchWord.forEach((item) => {
        this.calculateIndex(this.textContent, item).then((res) => {
          arr.push(res);
        });
      });
      this.SearchwordNumber = 0;
      // 高亮全部
      // arr.forEach((item) => {
      //   this.SearchwordNumber += item.length;
      // });
      this.SearchwordNumber = arr[arr.length - 1].length; // 高亮最后一次
      // 匹配高亮
      this.ArticelData.forEach((item) => {
        item.forEach((items) => {
          // items.forEach((itemss) => {
          items.text.forEach((itemsss) => {
            arr.forEach((searchItem, i) => {
              searchItem.forEach((searchItems) => {
                searchItems.forEach((searchItemss) => {
                  if (itemsss.index === searchItemss) {
                    itemsss.color = this.currentcolorValue[i];
                  }
                });
              });
            });
          });
          // });
        });
      });
    },
    replacepos(text, start, stop, replacetext) {
      return text.substring(0, stop - 1) + replacetext + text.substring(stop + 1);
    },
    // 找出对应字符的索引
    calculateIndex(txt, key) {
      return new Promise((reslove) => {
        // 去除标点]
        const regex = /[\u4e00-\u9fa5]/g;
        const flag = regex.test(key);
        let keylength = flag ? key.length : key.split(' ').length;
        let arr = [];
        for (let i = 0; i < txt.length; i++) {
          if (txt[i] === (flag ? key[0] : key)) {
            arr.push(i);
          }
        }
        let indexArr = [];
        arr.forEach((item) => {
          let arr = [];
          for (let i = 0; i < keylength; i++) {
            if (txt[item + i] === (flag ? key[i] : key)) {
              arr.push(item + i);
            } else {
              arr = [];
            }
          }
          if (arr.length > 0) {
            indexArr.push(arr);
          }
        });
        reslove(indexArr);
      });
    },
    clearSelected(all) {
      let _this = this;
      _this.type = '';
      _this.searchVal = '';
      _this.searchWord = [];
      _this.currentcolorValue = [];
      _this.SearchwordNumber = 0;
      if (all) {
        this.seleLevelMapList = [];
        _this.searchWordShow = false;
        sessionStorage.setItem('tablehighlight', false);
      }
      this.colorIndex = 0;
      this.colorValue = this.searchColorList[this.colorIndex];
      this.closeSearchhighlight();
    },
    cutHeaderText(type) {
      this.headerText = type;
      this.seleLevelMapList = [];
      this.getstatistics('left');
    },
    changexifen() {
      this.seleLevelMapList = [];
      this.getstatistics('left');
    },
    // 添加dom
    addnode() {
      return new Promise((reslove) => {
        let fatherNode = document.getElementById('echarts');
        let node = document.getElementById('main_echarts');
        if (node) {
          node.remove();
        }
        let newnode = document.createElement('div');
        newnode.id = 'main_echarts';
        newnode.style.width = '342px';
        newnode.style.height = '310px';
        newnode.style.margin = '0 auto';

        let qianNode = document.getElementById('distributionOperation');
        fatherNode.insertBefore(newnode, qianNode); // 添加的元素需要时通过createElement创建 不能使用字符串
        reslove();
      });
    },
    // 图表
    async createEcharts(id, type, data, index) {
      this.chartIndex = index;
      this.myChart = null;
      this.myChart_none = null;
      let indicatorMax = 0;
      let indicatorMaxRatio = 0;
      // 先添加DOM再进行创建图表
      await this.addnode().then(() => {
        let newdata = JSON.parse(JSON.stringify(data));
        // newdata.splice(data.length - 1, 1);
        let name = [];
        let valueStype = [];
        let value = [];
        let leidaList = [];
        // 去除括号
        newdata.forEach((item) => {
          if (this.xifen) {
            item.name = item.name.replace('（', '');
            item.name = item.name.replace('）', '');
          }
          if (item.value > indicatorMax) {
            indicatorMax = item.value;
          }
          if (item.ratio > indicatorMaxRatio) {
            indicatorMaxRatio = item.ratio;
          }
        });
        indicatorMax += 10;
        if (indicatorMaxRatio < 50) {
          indicatorMaxRatio = 50;
        }
        // 比例开关
        if (index === '3') {
          newdata.forEach((item) => {
            item.value = item.ratio;
            // item.name = item.name;
            name.push(item.name);
            valueStype.push({
              value: item.ratio,
              percent: `${item.ratio}%`,
            });
            value.push(item.ratio);
            leidaList.push({
              name: item.name,
              max: indicatorMaxRatio,
            });
          });
        } else {
          newdata.forEach((item) => {
            // item.value = item.value;
            // item.name = item.name;
            name.push(item.name);
            valueStype.push({
              value: item.value,
              percent: `${item.ratio}%`,
            });
            value.push(item.value);
            leidaList.push({
              name: item.name,
              max: indicatorMax,
            });
          });
        }

        let chartDom = document.getElementById(id);
        this.myChart = markRaw(echarts.init(chartDom));
        let chartDom_none = document.getElementById(`echarts_none_${index}`);
        this.myChart_none = markRaw(echarts.init(chartDom_none));
        let option = null;
        let color1 = ['#35776B', '#3873CB', '#9031AA', '#EA1F1F', '#CBCBCB', '#888888'];
        let color2 = [
          '#B6D58A',
          '#66AE5B',
          '#35776B',
          '#73CDDE',
          '#4CA6EE',
          '#3873CB',
          '#9031AA',
          '#EA1F1F',
          '#CBCBCB',
          '#888888',
        ];
        if (type === '饼状图') {
          newdata.forEach((item) => {
            item.name = `${item.name + item.ratio}%`;
          });
          option = {
            color: this.xifen ? color2 : color1,
            tooltip: {
              trigger: 'item',
            },
            xAxis: {
              show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
              axisTick: {
                show: false, // 不显示坐标轴刻度线
              },
              axisLine: {
                show: false, // 不显示坐标轴线
              },
              axisLabel: {
                show: false, // 不显示坐标轴上的文字
              },
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                // radius: ["40%", "70%"],
                radius: ['10%', '75%'],
                data: newdata,
                label: {
                  fontSize: 12,
                  position: 'inner',
                  color: '#fff',
                },
                itemStyle: {
                  borderColor: '#f5f5f5',
                  borderWidth: 2,
                },
              },
            ],
            grid: {
              top: 'middle',
            },
          };
        } else if (type === '柱状图') {
          let that = this;
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
              formatter(params) {
                if (that.ratioShow) {
                  return `${params[0].name}    ${params[0].value}%`;
                }
                return `${params[0].name}    ${params[0].value}`;
              },
            },
            xAxis: {
              type: 'category',
              data: name,
              axisLabel: {
                alignWithLabel: true,
                // interval: 0, // 设置数据间隔
                // rotate: -90, // 标题倾斜
                formatter(value) {
                  let str = value.split('');
                  return str.join('\n');
                },
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: that.ratioShow ? '{value}%' : '{value}',
              },
            },
            grid: {
              top: 20,
              left: 20,
              right: 20,
              bottom: 20,
              containLabel: true,
            },
            series: [
              {
                name: '',
                data: valueStype,
                type: 'bar',
                itemStyle: {
                  color(params) {
                    let color = that.xifen ? color2 : color1;
                    return color[params.dataIndex];
                  },
                },
              },
            ],
          };
        } else if (type === '折线图') {
          let that = this;
          option = {
            tooltip: {
              trigger: 'axis',
              formatter(params) {
                if (that.ratioShow) {
                  return `${params[0].name}    ${params[0].value}%`;
                }
                return `${params[0].name}    ${params[0].value}`;
              },
            },
            xAxis: {
              type: 'category',
              data: name,
              axisLabel: {
                // interval: 0, // 设置数据间隔
                // rotate: -90, // 标题倾斜
                formatter(value) {
                  let str = value.split('');
                  return str.join('\n');
                },
                // margin: 5, //刻度标签与轴线之间的距离
                // textStyle: {
                //  fontSize: 9, //横轴字体大小
                //  color: "#000000",//颜色
                // },
              },
            },
            color: '#5470c6',
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: this.ratioShow ? '{value}%' : '{value}',
              },
            },
            grid: {
              top: 20,
              left: 20,
              right: 20,
              bottom: 20,
              containLabel: true,
            },

            series: [
              {
                data: value,
                type: 'line',
              },
            ],
          };
        } else if (type === '雷达图') {
          let that = this;
          const buildSeries = (data) => {
            const helper = data.map((item, index) => {
              const arr = new Array(data.length);
              arr.splice(index, 1, item);
              return arr;
            });
            return [data, ...helper].map((item, index) => {
              return {
                type: 'radar',
                symbol: index === 0 ? 'circle' : 'none',
                symbolSize: 6,
                lineStyle: {
                  color: index === 0 ? '#5470C6' : 'transparent',
                },
                areaStyle: {
                  color: index === 0 ? '#5470C6' : 'transparent',
                  opacity: 0.5,
                },
                tooltip: {
                  show: index !== 0,
                  formatter() {
                    that.leiDaDataIndex = index - 1;
                    if (that.ratioShow) {
                      return `${leidaList[index - 1].name}：${value[index - 1]}%`;
                    }
                    return `${leidaList[index - 1].name}：${value[index - 1]}`;
                  },
                },
                z: index === 0 ? 1 : 2,
                data: [item],
              };
            });
          };
          option = {
            tooltip: {},
            radar: {
              indicator: leidaList,
              radius: '70%',
              axisName: {
                color: '#4c4c4c',
              },
            },
            series: buildSeries(value),
          };
        }
        option && this.myChart.setOption(option);
        if (type === '饼状图') {
          this.myChart_none.setOption({
            color: this.xifen ? color2 : color1,
            xAxis: {
              show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
              axisTick: {
                show: false, // 不显示坐标轴刻度线
              },
              axisLine: {
                show: false, // 不显示坐标轴线
              },
              axisLabel: {
                show: false, // 不显示坐标轴上的文字
              },
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['10%', '75%'],
                data: newdata,
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 2,
                },
                label: {
                  fontSize: 12,
                  position: 'inner',
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    fontSize: 12,
                  },
                },
              },
            ],
          });
        } else {
          option && this.myChart_none && this.myChart_none.setOption(option);
        }

        let that = this;
        // 默认展示第一个
        for (let key in that.leftList[0]) {
          that.currentTBdata[key] = that.leftList[index][key];
        }
        this.myChart.on('click', (params) => {
          let index = null;
          if (type === '雷达图') {
            index = that.leiDaDataIndex;
          } else {
            index = params.dataIndex;
          }
          for (let key in that.leftList[index]) {
            that.currentTBdata[key] = that.leftList[index][key];
          }
          that.$forceUpdate();
          //   that.$router.push({
          //     path: "/errorstatistics",
          //     query: {
          //       errorTypeId: that.leftdata[index].errorTypeId,
          //       rangeId: that.scoreRangeId,
          //     },
          //   });
        });
      });
    },
    // 获取图标统计信息
    getstatistics(type) {
      if (type) {
        this.LeftLoading = true;
      } else {
        this.loading = true;
      }
      let base = null;
      publicMethods('/TeachingServer/TextAnalyser/StatLevelDist', {
        analyse_record_id: this.id,
        type: this.leftNavIndex,
        level_type: this.xifen ? 1 : 0,
        count_type: this.headerText === 'wordCount' ? 0 : 1,
      })
        //   if (this.leftNavIndex === 0) {
        //     base = this.headerText === 'wordCount' ? this.base.pinyinCount : this.base.pinyinTextCount;
        //   } else if (this.leftNavIndex === 1) {
        //     base = this.headerText === 'wordCount' ? this.base.wordCount : this.base.wordTextCount;
        //   } else {
        //     base = this.headerText === 'wordCount' ? this.base.vocabularyCount : this.base.vocabularyTextCount;
        //   }
        //   postapi({
        //     url: '/GCLSTCServer/tools/TS/statistics',
        //     data: {
        //       searchType: this.leftNavIndex,
        //       partitionKey: this.partitionKey,
        //       statisticsType: this.xifen ? 0 : 1,
        //       base: base || null,
        //       textType: this.headerText === 'wordCount' ? 0 : 1,
        //     },
        //   })
        .then((res) => {
          this.allRatio = 0;
          this.allValue = 0;
          res.data_list.forEach((item) => {
            this.allRatio += Number(item.ratio);
            this.allValue += item.count;
            item.value = item.count;
          });
          res.data_list.forEach((item) => {
            if (item.count !== 0) {
              item.ratio = ((item.count / this.allValue) * 100).toFixed(2);
            }
          });

          this.allRatio = this.allRatio.toFixed(2);
          this.leftList = res.data_list;

          this.createEcharts('main_echarts', '柱状图', this.leftList, 0);

          // this.loading = false;
          if (type) {
            this.LeftLoading = false;
          } else {
            this.getArticleData();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 获取分析结果
    getArticleData() {
      this.loading = true;
      publicMethods('/TeachingServer/TextAnalyser/GetParsedTextInfo', {
        analyse_record_id: this.id,
      })
        .then((res) => {
          if (res.status === 1) {
            let newdata = [];
            res.parsed_text.paragraph_list.forEach((item) => {
              if (item.length !== 0) {
                newdata.push(item);
              }
            });
            this.ArticelData = newdata;
            let str = [];
            // 合并标点
            this.ArticelData.forEach((item) => {
              item.forEach((items) => {
                items.forEach((itemss, index) => {
                  let wordStr = '';
                  let pinyinStr = '';
                  itemss.text.forEach((itemsss) => {
                    wordStr += itemsss.word;
                    pinyinStr += itemsss.pinyin;
                    if (this.chsFhList.indexOf(itemsss.word) === -1) {
                      itemsss.isShow = true;
                    } else {
                      let obj = JSON.parse(JSON.stringify(itemsss));
                      // obj.isShow = true;
                      obj.isShow = false;
                      obj.isChsFh = true;
                      if (index > 0) {
                        if (items[index - 1].text[items[index - 1].text.length - 1].isShow) {
                          items[index - 1].text.push(obj);
                          if (!items[index - 1].hasOwnProperty('texts')) {
                            this.$set(items[index - 1], 'texts', []);
                          }
                          items[index - 1].texts.push(obj);
                          itemsss.isShow = false;
                        } else {
                          items[index - 2].text.push(obj);
                          if (!items[index - 2].hasOwnProperty('texts')) {
                            this.$set(items[index - 2], 'texts', []);
                          }
                          items[index - 2].texts.push(obj);
                          itemsss.isShow = false;
                        }
                      } else {
                        itemsss.isShow = true;
                      }
                    }
                    str.push(itemsss.word);
                  });
                  if (itemss.pinyin_lt) {
                    itemss.wordStr = wordStr;
                  }
                  itemss.pinyinStr = pinyinStr;
                });
              });
            });
            let index = 0;
            // 添加索引
            this.ArticelData.forEach((item) => {
              item.forEach((items) => {
                items.forEach((itemss) => {
                  itemss.text.forEach((itemsss) => {
                    if (itemsss.isShow) {
                      itemsss.index = index;
                      index += 1;
                    }
                  });
                  if (itemss.hasOwnProperty('texts')) {
                    itemss.texts.forEach((itemsss) => {
                      if (itemsss.isChsFh) {
                        itemsss.index = index;
                        index += 1;
                      }
                    });
                  }
                });
              });
            });
            let arr = [];
            this.ArticelData.forEach((item, i) => {
              arr.push([]);
              item.forEach((items) => {
                items.forEach((itemss) => {
                  arr[i].push(itemss);
                });
              });
            });
            this.ArticelData = arr;
            this.textContent = str;
            let flag = sessionStorage.getItem('tablehighlight');
            if (this.$route.query.remarks && flag === 'true') {
              this.cutNav(Number(this.$route.query.leftNavIndex));
              this.wordTablehighlight(JSON.parse(this.$route.query.remarks), this.$route.query.color);
            }
            this.partitionKey = Number(res.record.partition_key);
            this.subjectWords = JSON.parse(res.record.subject_words || '[]');
            this.base.wordTextCount = Number(res.record.word_text_count);
            this.base.wordCount = Number(res.record.word_count);
            this.base.vocabularyTextCount = Number(res.record.vocabulary_text_count);
            this.base.vocabularyCount = Number(res.record.vocabulary_count);
            this.base.pinyinCount = Number(res.record.pinyin_count);
            this.base.pinyinTextCount = Number(res.record.pinyin_text_count);
            this.difficulty.pinyinDifficulty = res.record.pinyin_ttr;
            this.difficulty.vocabularyDifficulty = res.record.vocabulary_ttr;
            this.difficulty.wordDifficulty = res.record.word_ttr;
            this.pinyinBottom = res.record.pinyin_mark_position !== 0;
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 跳转到教材语料库
    jumpSeekPage() {
      if (!this.searchVal.trim()) {
        return;
      }
      this.$router.push({
        path: '/corpus/seekPage',
        query: {
          keyword: this.searchVal.trim(),
        },
      });
    },
    // 校对
    checkArticle() {
      this.$router.push({
        path: '/textanalysis/checkArticle',
        query: {
          id: this.id,
          userID: this.userID,
        },
      });
    },
    // 切换保存拼音位置
    changePinyinPosition(value) {
      publicMethods('/TeachingServer/TextAnalyser/SetPinyinMarkPosition', {
        analyse_record_id: this.id,
        pinyin_mark_position: value ? 1 : 0,
      });
    },
    // 返回上一页
    goBack() {
      this.$router.push({
        path: '/TextAnalysis',
      });
    },
    // 修改文本
    editArticle() {
      this.editArticleFlag = true;
    },
    handleClose() {
      this.editArticleFlag = false;
    },
    saveWord(analyse_record_id) {
      this.loading = true;
      publicMethods('/TeachingServer/TextAnalyser/Analyse', {
        analyse_record_id: this.id,
        text: this.noPosContent,
        userID: this.userID,
      })
        .then((res) => {
          if (res.status === 1) {
            this.$message.success('修改成功');
            this.editArticleFlag = false;
            reparse({ analyse_record_id })
              .then(({ record }) => {
                this.getArticleData();
              })
              .finally(() => {
                this.loading = false;
              });
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.textanalysis_index {
  min-height: 100%;
  background: #f6f6f6;

  .wheader {
    background: #fff;
  }

  .main {
    padding-top: 29px;
    padding-bottom: 66px;

    > div {
      display: flex;
      width: 1200px;
      padding: 24px;
      margin: 0 auto;

      // height: 1187px;
      background: #fff;

      > .left {
        width: 352px;

        .go-back {
          display: flex;
          align-items: center;
          width: 60px;
          padding: 9px 8px;
          margin-bottom: 16px;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: #333;
          cursor: pointer;
          background: #fff;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 2%);

          .el-icon-arrow-left {
            margin-right: 8px;
            font-size: 16px;
          }
        }

        .top_nav {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 352px;
          height: 32px;
          margin-top: 16px;
          background: #eee;
          border-radius: 4px;

          > div {
            width: 116px;
            height: 28px;
            font-size: 12px;
            font-weight: 500;
            line-height: 28px;
            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%);
          }
        }

        .search {
          position: relative;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 100%;
          height: 40px;
          padding: 7px 0;
          border: 1px solid #ddd;

          .select-result {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 24px;
            padding: 4px 11px;
            cursor: pointer;

            .selectBg {
              width: 16px;
              height: 16px;
              background: #de4444;
              border-radius: 2px;
            }

            .tri {
              width: 10px;
              height: 10px;
              margin-left: 4px;
              background: url('../../assets/teacherdev/down-icon.png') no-repeat left top;
              background-size: 100% 100%;
            }
          }

          .searchVal {
            box-sizing: border-box;
            flex: 1;
            padding: 0 30px 0 12px;
            font-weight: bold;
            border: 0;
            border-left: 1px solid #ddd;
            outline: 0;
          }

          .search-icon {
            position: absolute;
            right: 12px;
            display: block;
            width: 14px;
            height: 14px;
            background: url('../../assets/teacherdev/search-icon.png') no-repeat left top;
            background-size: 100% 100%;
          }

          .searchColorList {
            position: absolute;
            top: 38px;
            left: 0;
            width: 58px;
            padding: 0;
            margin: 0;
            list-style: none;
            background: #fff;
            border: 1px #d9d9d9 solid;

            > li {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              padding: 8px 0;
              cursor: pointer;

              > span {
                width: 14px;
                height: 14px;
                border-radius: 2px;
              }

              &.close {
                font-size: 12px;
                border-top: 1px #d9d9d9 solid;
              }
            }
          }
        }

        .result-left-numberclose {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 16px;
          margin-top: 16px;
          font-size: 14px;
          font-weight: 400;
          color: #333;
          border-bottom: 1px solid rgba(0, 0, 0, 8%);

          .resule-right-btn {
            display: inline-block;
            height: 32px;

            // width: 88px;
            padding: 0 16px;
            margin-left: 8px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 2%);
          }
        }

        .left_list {
          margin-top: 16px;

          .left_list_nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 52px;

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

              span {
                display: inline-block;
                width: 40px;
                height: 24px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px;
                text-align: center;
                cursor: pointer;
                border-radius: 2px;
              }

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

            .right {
              display: flex;

              > span {
                display: flex;
                align-items: center;
              }

              span {
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;

                /* identical to box height, or 157% */
                color: #000;
                cursor: pointer;
              }

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

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

              .el-switch__core {
                height: 16px;
              }

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

          .left_list_main {
            .heji {
              font-size: 14px;
              font-weight: 600;
              line-height: 22px;
              color: #333;
            }

            .sele {
              background: #eaeaea;
            }

            > div {
              display: flex;
              align-items: center;
              justify-content: space-between;

              // width: 100%;
              height: 48px;
              padding: 0 12px;
              font-size: 14px;
              line-height: 22px;
              color: #333;
              cursor: pointer;
              border-bottom: 1px solid #eee;

              &.active {
                background: #eee;
              }

              &.fontWeight {
                font-weight: bold;
              }

              > .leftType {
                > .color {
                  display: inline-block;
                  width: 9px;
                  height: 9px;
                  margin-right: 10px;
                  border-radius: 50%;
                }
              }

              > .rightCount {
                display: flex;

                > span.count {
                  width: 70px;
                  font-size: 14px;
                  color: #333;
                  text-align: right;
                }

                > span.precent {
                  width: 88px;
                  font-size: 14px;
                  color: #333;
                  text-align: right;
                }
              }
            }
          }
        }

        .tubiao {
          position: relative;
          width: 352px;
          height: 374px;
          padding-top: 20px;
          margin: 0 auto;
          margin-top: 24px;
          background: #f5f5f5;
          border-radius: 4px;

          .tubiao_top {
            height: 22px;
            margin-bottom: 24px;
            font-size: 14px;
            font-weight: 500;
            color: #000;
            text-align: center;
          }

          .main_echarts {
            margin: 0 auto;
          }

          .cut_download {
            position: absolute;
            bottom: 24px;
            left: 56px;
            display: flex;

            .sele {
              background: rgba(0, 0, 0, 8%);
              border-radius: 4px;
            }

            span {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 32px;
              height: 32px;
              margin-right: 16px;
              cursor: pointer;
            }

            .download {
              width: 56px;
            }

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

      > .right {
        flex: 1;
        margin-left: 24px;

        .word_back {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .word {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: #000;

            .title {
              font-weight: 500;
            }

            span {
              margin-right: 16px;
            }
          }

          .back {
            width: 88px;
            height: 32px;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 2%);
          }
        }

        .btn_set {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 21px;

          .btn {
            display: flex;

            .btn_dv {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 82px;
              height: 30px;
              font-size: 14px;
              font-weight: 400;
              color: rgba(0, 0, 0, 85%);
              cursor: pointer;
              border: 1px solid #d9d9d9;
              border-radius: 4px;
              box-shadow: 0 2px 0 rgba(0, 0, 0, 2%);

              img {
                width: 14px;
                height: 14px;
                margin-right: 8px;
              }
            }
          }

          .daxiao {
            display: flex;
            align-items: center;

            span {
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 24px;
              height: 24px;
              cursor: pointer;
              border: 1px solid gainsboro;
              border-radius: 4px;

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

            > img {
              width: 24px;
              height: 24px;
              margin: 0 8px;
            }
          }
        }

        .right_main {
          height: calc(100% - 137px);
          padding: 12px 15px;
          margin-top: 16px;
          border: 1px solid rgba(0, 0, 0, 8%);

          // background: #f9f9f9;
          border-radius: 4px;

          .right_main_top {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            color: #a5a5a5;

            > div {
              display: flex;
              align-items: center;
            }

            .twoline {
              margin: 0 20px;

              span {
                margin: 0 2px;
              }
            }

            // > div {
            //   margin-left: 24px;
            // }
            .line {
              flex-shrink: 0;
              width: 1px;
              margin: 0 12px;
              font-size: 12px;
              line-height: 1;
              color: #525252;
            }
          }

          .edit-btn {
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            color: #000;
            cursor: pointer;

            .el-icon-edit {
              margin-right: 8px;
            }
          }

          .articel {
            width: 640px;
            margin: 0 auto;
            margin-top: 40px;
            font-weight: 500;

            .paragraph {
              display: flex;
              flex-wrap: wrap;
              margin-bottom: 22px;

              // .sentence {
              //   display: flex;
              //   flex-wrap: wrap;
              //   margin-bottom: 8px;
              .words {
                display: flex;

                .word {
                  display: flex;
                  text-align: center;
                }

                .pinyin {
                  min-height: 12px;
                  font-family: 'League';
                  line-height: 12px;
                  color: rgba(0, 0, 0, 50%);
                  text-align: center;
                }

                .hanzi {
                  line-height: 28px;
                  color: #000;
                  text-align: center;
                }

                .hanzi-fz {
                  font-family: 'FZJCGFKTK';
                }
              }
            }

            // }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.textanalysis_index {
  .el-switch {
    .el-switch__label {
      color: #888;
    }
  }

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

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

  .el-switch__core {
    height: 16px;
  }

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

.edit-dialog {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 16px;
  }

  .el-dialog__footer {
    padding-top: 0;
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;

    .el-button {
      width: 124px;
      padding: 8px;
      color: #000;
      background: #f8f8f8;
      border: 1px solid rgba(0, 0, 0, 15%);
      border-radius: 4px;
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 4%);

      &.el-button--primary {
        background: #ffc600;
      }
    }
  }
}
</style>