GCLS_Page_TC/src/views/Textanalysis/index.vue

<template>
  <div v-loading="loading" class="textanalysis_index">
    <div class="wheader">
      <HeaderPage />
    </div>
    <div class="main">
      <div>
        <div v-loading="LeftLoading" class="left">
          <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>
            <span class="resule-right-btn" @click="clearSelected('all')">清除标记</span>
          </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.name) != -1 ? 'sele' : '']"
                @click="levelMapListEvent(item)"
              >
                <div class="leftType">
                  <span
                    class="color"
                    :style="{
                      background: item.name && levelMap[item.name] ? levelMap[item.name].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 style="height: 22px">
              <template v-if="chartIndex != 3">
                <el-switch
                  v-model="ratioShow"
                  inactive-text="数量"
                  active-text="比例"
                  :width="26"
                  style="margin-left: 24px"
                  @change="changeratioShow"
                />
              </template>
            </div>

            <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: 16px" @click="ciyunEvent">
                <img src="../../assets/teacherdev/icon-ciyun.png" alt="" />
                词云
              </div>
              <div class="btn_dv" style="margin-right: 16px" @click="gowordTable">
                <img src="../../assets/teacherdev/icon-cibiao.png" alt="" />
                词表
              </div>
              <div class="btn_dv" style="margin-right: 24px" @click="downArticle">
                <img src="../../assets/teacherdev/icon-down.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="fenci"
                active-color="#735CFF"
                :width="26"
                style="margin-right: 34px"
                inactive-text="分词"
              />
              <el-switch v-model="pinyinShow" active-color="#735CFF" :width="26" inactive-text="显示拼音" />
            </div>
          </div>
          <div class="right_main">
            <div class="right_main_top">
              <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>
              <div class="twoline">
                <span class="line"></span>
                <span class="line"></span>
              </div>
              <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>
              <div class="twoline">
                <span class="line"></span>
                <span class="line"></span>
              </div>
              <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>
            </div>
            <div 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">
                    <span v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'" :class="['word']">
                      <template v-if="word.isShow">
                        <span
                          v-if="pinyinShow"
                          :class="['pinyin']"
                          :style="{
                            fontSize: pinyinFontsize + 'px',
                            lineHeight: pinyinLineHeight + 'px',
                          }"
                        >
                          {{ word.pinyin }}
                        </span>
                        <br v-if="pinyinShow" />
                        <span
                          class="hanzi"
                          :style="{
                            fontSize: wordFontsize + 'px',
                            lineHeight: wordLineHeight + 'px',
                            background: word.color ? word.color : '',
                            color: word.color
                              ? '#FFFFFF'
                              : !xifen
                              ? leftNavIndex == 0
                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                  ? levelMap[word.levels.P_G].color
                                  : ''
                                : leftNavIndex == 1
                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                  ? levelMap[word.levels.W_G].color
                                  : ''
                                : leftNavIndex == 2
                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                  ? levelMap[word.levels.C_G].color
                                  : ''
                                : ''
                              : leftNavIndex == 0
                              ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                ? levelMap[word.levels.P_L].color
                                : ''
                              : leftNavIndex == 1
                              ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                ? levelMap[word.levels.W_L].color
                                : ''
                              : leftNavIndex == 2
                              ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                ? levelMap[word.levels.C_L].color
                                : ''
                              : '',
                          }"
                        >
                          {{ word.word }}
                        </span>
                      </template>
                    </span>
                  </template>
                  <template v-else>
                    <span v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'" class="word">
                      <template v-if="word.isShow">
                        <span
                          v-if="pinyinShow"
                          :class="['pinyin']"
                          :style="{
                            fontSize: pinyinFontsize + 'px',
                            lineHeight: pinyinLineHeight + 'px',
                          }"
                        >
                          {{ word.pinyin }}
                        </span>
                        <br v-if="pinyinShow" />
                        <span
                          class="hanzi"
                          :style="{
                            fontSize: wordFontsize + 'px',
                            lineHeight: wordLineHeight + 'px',
                            background: word.color ? word.color : '',
                            color: word.color
                              ? '#FFFFFF'
                              : !xifen
                              ? leftNavIndex == 0
                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
                                  ? levelMap[word.levels.P_G].color
                                  : ''
                                : leftNavIndex == 1
                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
                                  ? levelMap[word.levels.W_G].color
                                  : ''
                                : leftNavIndex == 2
                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
                                  ? levelMap[word.levels.C_G].color
                                  : ''
                                : ''
                              : leftNavIndex == 0
                              ? seleLevelMapList.indexOf(word.levels.P_L) != -1
                                ? levelMap[word.levels.P_L].color
                                : ''
                              : leftNavIndex == 1
                              ? seleLevelMapList.indexOf(word.levels.W_L) != -1
                                ? levelMap[word.levels.W_L].color
                                : ''
                              : leftNavIndex == 2
                              ? seleLevelMapList.indexOf(word.levels.C_L) != -1
                                ? levelMap[word.levels.C_L].color
                                : ''
                              : '',
                          }"
                        >
                          {{ word.word }}
                        </span>
                      </template>
                    </span>
                  </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>
  </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 { postapi, publicMethods } 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,
      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
    };
  },
  created() {
    this.routerData = this.$route.query;
    if (!this.routerData) return;
    this.partitionKey = Number(this.routerData.partition_key);
    this.subjectWords = JSON.parse(this.routerData.subject_words || '[]');
    this.base.wordTextCount = Number(this.routerData.word_text_count);
    this.base.wordCount = Number(this.routerData.word_count);
    this.base.vocabularyTextCount = Number(this.routerData.vocabulary_text_count);
    this.base.vocabularyCount = Number(this.routerData.vocabulary_count);
    this.base.pinyinCount = Number(this.routerData.pinyin_count);
    this.base.pinyinTextCount = Number(this.routerData.pinyin_text_count);
    this.difficulty.pinyinDifficulty = this.routerData.pinyin_difficulty;
    this.difficulty.vocabularyDifficulty = this.routerData.vocabulary_difficulty;
    this.difficulty.wordDifficulty = this.routerData.word_difficulty;
    this.id = this.routerData.id
    this.getstatistics();
  },
  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 dv = document.createElement('div');
      dv.id = 'html_dv';
      dv.innerHTML = 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: "GB-PINYINOK-B";
  }
  .hanzi {
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 28px;
    font-family: "FZJCGFKTK";
  }
  </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 style="background:#26272a">
      ${cxzcxz}
  </div>
  </body>
  </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, '文章.docx');
    },
    // 全部高亮
    allListEvent() {
      if (this.seleLevelMapList.length === this.leftList.length) {
        this.seleLevelMapList = [];
      } else {
        this.seleLevelMapList = [];
        this.leftList.forEach((item) => {
          this.seleLevelMapList.push(item.name);
        });
      }
    },
    // 选择高亮等级
    levelMapListEvent(item) {
      // this.clearSelected("all");
      let index = this.seleLevelMapList.indexOf(item.name);
      if (index === -1) {
        this.seleLevelMapList.push(item.name);
      } 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.open(
        `./ciyun/ciyunindex.html?partitionKey=${this.partitionKey}&searchType=${this.leftNavIndex}`,
        '_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) => {
        // 去除标点
        let keylength = key.length;
        let arr = [];
        for (let i = 0; i < txt.length; i++) {
          if (txt[i] === key[0]) {
            arr.push(i);
          }
        }
        let indexArr = [];
        arr.forEach((item) => {
          let arr = [];
          for (let i = 0; i < keylength; i++) {
            if (txt[item + i] === key[i]) {
              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 = '256px';
        newnode.style.margin = '0 auto';

        let qianNode = document.getElementById('distributionOperation');
        fatherNode.insertBefore(newnode, qianNode); // 添加的元素需要时通过createElement创建 不能使用字符串
        reslove();
      });
    },
    changeratioShow() {
      let str =
        this.chartIndex === 0 ? '柱状图' : this.chartIndex === 1 ? '雷达图' : this.chartIndex === 2 ? '折线图' : '';
      this.createEcharts('main_echarts', str, this.leftList, this.chartIndex);
    },
    // 图表
    async createEcharts(id, type, data, index) {
      this.chartIndex = index;
      this.myChart = null
      this.myChart_none = null
      let indicatorMax = 0, 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 += 50
          if(indicatorMaxRatio<50){
            indicatorMaxRatio = 50
          }
        // 比例开关
        if (this.ratioShow) {
          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,
            xAxis: {
              show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
              axisTick: {
                show: false, // 不显示坐标轴刻度线
              },
              axisLine: {
                show: false, // 不显示坐标轴线
              },
              axisLabel: {
                show: false, // 不显示坐标轴上的文字
              },
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                // radius: ["40%", "70%"],
                radius: ['20%', '50%'],
                data: newdata,
                label: {
                  fontSize: 8,
                },
                itemStyle: {
                  borderColor: '#f5f5f5',
                  borderWidth: 5,
                },
              },
            ],
          };
        } 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: {
              left: 20,
              right: 20,
              bottom: 0,
              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: {
              left: 20,
              right: 20,
              bottom: 0,
              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: '50%',
            },
            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: ['40%', '60%'],
                data: newdata,
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 2,
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ],
          });
        } 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) => {
                        itemss.text.forEach((itemsss) => {
                        if (this.chsFhList.indexOf(itemsss.word) === -1) {
                            itemsss.isShow = true;
                        } else {
                            let obj = JSON.parse(JSON.stringify(itemsss));
                            obj.isShow = true;
                            if (index > 0) {
                            if (items[index - 1].text[items[index - 1].text.length - 1].isShow) {
                                items[index - 1].text.push(obj);
                                itemsss.isShow = false;
                            } else {
                                items[index - 2].text.push(obj);
                                itemsss.isShow = false;
                            }
                            } else {
                            itemsss.isShow = true;
                            }
                        }
                        str += itemsss.word;
                        });
                    });
                    });
                });
                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;
                        }
                        });
                    });
                    });
                });
                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.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;

        .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;
          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;
            width: 88px;
            height: 32px;
            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: 24px;
          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: 40px;
              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;
          background: #26272a;
          border-radius: 4px;

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

            .twoline {
              margin: 0 20px;

              span {
                margin: 0 2px;
              }
            }

            // > div {
            //   margin-left: 24px;
            // }
            .line {
              display: inline-block;
              width: 1px;
              height: 12px;
              margin: 0 12px;
              background: #525252;
            }
          }

          .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 {
                  text-align: center;
                }

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

                .hanzi {
                  font-family: 'FZJCGFKTK';
                  line-height: 28px;
                  color: rgb(255, 255, 255);
                  text-align: center;
                }
              }
            }

            // }
          }
        }
      }
    }
  }
}
</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;
  }
}
</style>