GCLS_Page_TC/src/views/Textanalysis/index.vue

<template>
  <div class="textanalysis_index" v-loading="loading">
    <div class="wheader">
      <Header />
    </div>
    <div class="main">
      <div>
        <div class="left" v-loading="LeftLoading">
          <div class="search">
            <div class="select-result" @click="showSearchColorList">
              <span class="selectBg" :style="{ background: colorValue }"></span>
              <i class="tri"></i>
            </div>
            <input
              class="searchVal"
              v-model="searchVal"
              @keyup.enter="onSearch"
              :style="{ color: colorValue }"
              @blur="searchVal = searchVal.trim()"
              @keydown="searchValChange"
            />
            <i
              class="search-icon"
              style="cursor: pointer"
              @click="onSearch"
            ></i>
            <ul class="searchColorList" v-if="isSCL">
              <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
                style="font-size: 14px; line-height: 22px; color: #333333"
                v-if="searchWordShow"
              >
                {{ 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"
                  >
                  </el-switch>
                </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"
                @click="levelMapListEvent(item)"
                :class="[
                  seleLevelMapList.indexOf(item.name) != -1 ? 'sele' : '',
                ]"
              >
                <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.value }}</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 class="tubiao" id="echarts">
            <div style="height: 22px">
              <template v-if="chartIndex != 3">
                <el-switch
                  v-model="ratioShow"
                  :inactive-text="ratioShow ? '比例' : '数量'"
                  :width="26"
                  style="margin-left: 24px"
                  @change="changeratioShow"
                >
                </el-switch>
              </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 @click="downLoadEcharts" class="download">
                <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 class="back" v-if="$route.query.type != '文本分析'">
              返回课文
            </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>
              <el-switch
                v-model="pinyinShow"
                active-color="#735CFF"
                :width="26"
                inactive-text="显示拼音"
              >
              </el-switch>
            </div>
          </div>
          <div class="right_main">
            <div class="right_main_top">
              <div>
                <span
                  >音节难度
                  {{ difficulty.pinyinDifficulty }}
                </span>
                <span class="line"></span>
                <span>{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span>
              </div>
              <div>
                <span
                  >汉字难度
                  {{ difficulty.wordDifficulty }}
                </span>
                <span class="line"></span>
                <span>{{ base.wordCount }} / {{ base.wordTextCount }}</span>
              </div>
              <div>
                <span>词汇难度{{ difficulty.vocabularyDifficulty }}</span>
                <span class="line"></span>
                <span
                  >{{ base.vocabularyCount }} /
                  {{ base.vocabularyTextCount }}</span
                >
              </div>
            </div>
            <div class="articel">
              <div
                class="paragraph"
                v-for="(items, index) in ArticelData"
                :key="index + 'paragraph'"
              >
                <!-- <span
                  class="sentence"
                  v-for="(items, indexs) in item"
                  :key="indexs + 'sentence'"
                > -->
                <span
                  class="words"
                  v-for="(itemss, indexss) in items"
                  :key="indexss + '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
                      class="word"
                      v-for="(word, indexsss) in itemss.text"
                      :key="indexsss + '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>
</template>
  
  <script>
import Header 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 } from "@/api/api";
import staticData from "../../common/data";
import { json2excel } from "@/utils/setMethods";

import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";
export default {
  components: {
    Header,
  },
  data() {
    return {
      ratioShow: false,
      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
      loading: false,
      LeftLoading: false,
      wordFontsize: 20, // 汉字字号初始值
      pinyinFontsize: 12, // 拼音字号初始值
      wordLineHeight: 28,
      pinyinLineHeight: 12,
      wordsMargin: 3,
      fenci: false,
      pinyinShow: false,
      leftNavIndex: 0,
      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,
      currentTBdata: {},
      currentcolorValue: [],
      subjectWords: null,
      partitionKey: null,
      base: {},
      levelMap: null,
      allValue: 0,
      allRatio: 0,
      chartIndex: 0,
      ArticelData: null,
      seleLevelMapList: [],
      difficulty: {},
      textContent: "",
      routerData: null,
    };
  },
  watch: {},
  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 = newhtml;
      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>`;
      console.log(cxzcxz);
      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();
      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 = item.ratio + "%";
      });
      let obj = {
        name: "合计",
        ratio: this.allRatio,
        value: this.allValue + "%",
      };
      data.push(obj);
      var excelDatas = [
        {
          tHeader: ["等级", "数量", "占比"],
          filterVal: ["name", "value", "ratio"], // 表一的数据字段
          tableDatas: data, // 表一的整体json数据
          sheetName: "sheet1", // 表一的sheet名字
        },
      ];
      //引入的函数
      json2excel(excelDatas, "等级分布", true, "xlsx");
    },
    downLoadEcharts() {
      let chartsCanvas = document
        .getElementById("main_echarts")
        .querySelectorAll("canvas")[0];
      chartsCanvas.style.background = "#fff";
      let picInfo = chartsCanvas.toDataURL({
        type: "png",
        pixelRatio: 1.5, // 放大两倍下载。解决生成图片在移动端模糊问题
        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 = this.pinyinFontsize + 2;
          this.wordFontsize = this.wordFontsize + 2;
          this.pinyinLineHeight = this.pinyinLineHeight + 2;
          this.wordLineHeight = this.wordLineHeight + 2;
          this.wordsMargin = this.wordsMargin + 1;
        }
      } else if (symbol == "-") {
        if (this.wordFontsize > 12) {
          this.pinyinFontsize = this.pinyinFontsize - 2;
          this.wordFontsize = this.wordFontsize - 2;
          this.pinyinLineHeight = this.pinyinLineHeight - 2;
          this.wordLineHeight = this.wordLineHeight - 2;
          if (this.wordsMargin > 2) {
            this.wordsMargin = 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.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, i) => {
              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) {
      mystr =
        text.substring(0, stop - 1) + replacetext + text.substring(stop + 1);
      return mystr;
    },
    // 找出对应字符的索引
    calculateIndex(txt, key) {
      return new Promise((reslove, reject) => {
        // 去除标点
        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 = [];
        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, reject) => {
        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() {
      this.createEcharts(
        "main_echarts",
        "柱状图",
        this.leftList,
        this.chartIndex
      );
    },
    // 图表
    createEcharts(id, type, data, index) {
      this.chartIndex = index;
      // 先添加DOM再进行创建图表
      this.addnode().then(() => {
        let newdata = JSON.parse(JSON.stringify(data));
        newdata.splice(data.length - 1, 1);
        let color = [];
        let name = [];
        let valueStype = [];
        let value = [];
        let leidaList = [];
        // 去除括号
        if (this.xifen) {
          newdata.forEach((item) => {
            item.name = item.name.replace("（", "");
            item.name = item.name.replace("）", "");
          });
        }
        // 比例开关
        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,
            });
          });
        } 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,
            });
          });
        }

        var chartDom = document.getElementById(id);
        this.myChart = echarts.init(chartDom);
        var 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,
            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: function (params) {
                if (that.ratioShow) {
                  return `${params[0].name}    ${params[0].value}%`;
                } else {
                  return `${params[0].name}    ${params[0].value}`;
                }
              },
            },
            xAxis: {
              type: "category",
              data: name,
              axisLabel: {
                alignWithLabel: true,
                // interval: 0, // 设置数据间隔
                // rotate: -90, // 标题倾斜
                formatter: function (value, index) {
                  var strs = value.split("");
                  var str = "";
                  for (var i = 0, s; (s = strs[i++]); ) {
                    str += s;
                    str += "\n";
                  }
                  return str;
                },
              },
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: this.ratioShow ? "{value}%" : "{value}",
              },
            },
            grid: {
              left: 20,
              right: 20,
              bottom: 0,
              containLabel: true,
            },
            series: [
              {
                name: "",
                data: valueStype,
                type: "bar",
                itemStyle: {
                  color: function (parms) {
                    let color = that.xifen ? color2 : color1;
                    return color[parms.dataIndex];
                  },
                },
              },
            ],
          };
        } else if (type == "折线图") {
          option = {
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                if (that.ratioShow) {
                  return `${params[0].name}    ${params[0].value}%`;
                } else {
                  return `${params[0].name}    ${params[0].value}`;
                }
              },
            },
            xAxis: {
              type: "category",
              data: name,
              axisLabel: {
                // interval: 0, // 设置数据间隔
                // rotate: -90, // 标题倾斜
                formatter: function (value, index) {
                  var strs = value.split("");
                  var str = "";
                  for (var i = 0, s; (s = strs[i++]); ) {
                    str += s;
                    str += "\n";
                  }
                  return str;
                },
                // 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 = function (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 ? false : true,
                  formatter: function () {
                    that.leiDaDataIndex = index - 1;
                    if (that.ratioShow) {
                      return (
                        leidaList[index - 1].name +
                        "：" +
                        value[index - 1] +
                        "%"
                      );
                    } else {
                      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);
        let that = this;
        // 默认展示第一个
        for (let key in that.leftList[0]) {
          that.currentTBdata[key] = that.leftList[index][key];
        }
        this.myChart.on("click", function (parms) {
          let index = null;
          if (type == "雷达图") {
            index = that.leiDaDataIndex;
          } else {
            index = parms.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;
      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 ? base : null,
          textType: this.headerText == "wordCount" ? 0 : 1,
        },
      })
        .then((res) => {
          this.allRatio = 0;
          this.allValue = 0;
          res.data.result.forEach((item) => {
            this.allRatio += item.ratio * 1;
            this.allValue += item.value;
          });
          res.data.result.forEach((item) => {
            if (item.value != 0) {
              item.ratio = ((item.value / this.allValue) * 100).toFixed(2);
            }
          });

          this.allRatio = this.allRatio.toFixed(2);
          this.leftList = res.data.result;

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

          // this.loading = false;
          if (type) {
            this.LeftLoading = false;
          } else {
            this.getArticleData();
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 获取分析结果
    getArticleData() {
      this.loading = true;
      postapi({
        url: "/GCLSTCServer/tools/TS/analysis/parsed/text",
        data: {
          partitionKey: this.partitionKey,
        },
      })
        .then((res) => {
          let newdata = [];
          res.data.result.forEach((item, i) => {
            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) {
                    let obj = JSON.parse(JSON.stringify(itemsss));
                    obj.isShow = true;
                    if (index > 0) {
                      items[index - 1].text.push(obj);
                      itemsss.isShow = false;
                    } else {
                      itemsss.isShow = true;
                    }
                  } 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++;
                  }
                });
              });
            });
          });
          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.wordTablehighlight(
              JSON.parse(this.$route.query.remarks),
              this.$route.query.color
            );
          }
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  created() {
    this.routerData = JSON.parse(JSON.stringify(this.$route.query));
    this.partitionKey = this.$route.query.partitionKey * 1;
    this.subjectWords = JSON.parse(this.$route.query.subjectWords);
    this.base.wordTextCount = this.$route.query.wordTextCount * 1;
    this.base.wordCount = this.$route.query.wordCount * 1;
    this.base.vocabularyTextCount = this.$route.query.vocabularyTextCount * 1;
    this.base.vocabularyCount = this.$route.query.vocabularyCount * 1;
    this.base.pinyinCount = this.$route.query.pinyinCount * 1;
    this.base.pinyinTextCount = this.$route.query.pinyinTextCount * 1;
    this.difficulty.pinyinDifficulty = this.$route.query.pinyinDifficulty;
    this.difficulty.vocabularyDifficulty =
      this.$route.query.vocabularyDifficulty;
    this.difficulty.wordDifficulty = this.$route.query.wordDifficulty;
    this.levelMap = staticData.LevelMap;
    this.getstatistics();
  },
  mounted() {},
};
</script>
  
  <style lang="scss" scoped>
.textanalysis_index {
  background: #f6f6f6;
  min-height: 100%;
  .wheader {
    background: #ffffff;
  }
  .main {
    padding-top: 29px;
    padding-bottom: 66px;
    > div {
      width: 1200px;
      // height: 1187px;
      background: #ffffff;
      margin: 0 auto;
      padding: 24px;
      display: flex;
      > .left {
        width: 352px;
        .top_nav {
          margin-top: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 352px;
          height: 32px;
          background: #eeeeee;
          border-radius: 4px;
          > div {
            width: 116px;
            height: 28px;
            border-radius: 2px;
            text-align: center;
            line-height: 28px;
            color: #888888;
            font-weight: 500;
            font-size: 12px;
            cursor: pointer;
          }
          .sele {
            color: #000000;
            background: #ffffff;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
          }
        }
        .search {
          position: relative;
          height: 40px;
          width: 100%;
          border: 1px solid #dddddd;
          box-sizing: border-box;
          padding: 7px 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;

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

            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 {
            font-weight: bold;
            flex: 1;
            border: 0;
            border-left: 1px solid #dddddd;
            box-sizing: border-box;
            padding: 0 30px 0 12px;
            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 {
            width: 58px;
            position: absolute;
            top: 38px;
            left: 0;
            border: 1px #d9d9d9 solid;
            background: #fff;
            list-style: none;
            padding: 0;
            margin: 0;
            > li {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              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 {
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          padding-bottom: 16px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
          .resule-right-btn {
            display: inline-block;
            width: 88px;
            height: 32px;
            text-align: center;
            background: #ffffff;
            border: 1px solid #d9d9d9;
            box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
            border-radius: 4px;
            line-height: 32px;
            cursor: pointer;
          }
        }
        .left_list {
          margin-top: 16px;
          .left_list_nav {
            height: 52px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              width: 84px;
              height: 28px;
              background: #eeeeee;
              border-radius: 4px;
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                display: inline-block;
                width: 40px;
                height: 24px;
                border-radius: 2px;
                font-weight: 400;
                font-size: 12px;
                line-height: 24px;
                text-align: center;
                cursor: pointer;
              }
              .sele {
                color: #000000;
                background: #ffffff;
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
              }
            }
            .right {
              display: flex;
              > span {
                display: inline-block;
                display: flex;
                align-items: center;
              }
              span {
                font-weight: 400;
                font-size: 14px;
                line-height: 22px;
                /* identical to box height, or 157% */
                color: #000000;
                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-weight: 600;
              font-size: 14px;
              line-height: 22px;
              color: #333333;
            }
            .sele {
              background: #eaeaea;
            }
            > div {
              // width: 100%;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #eeeeee;
              font-size: 14px;
              line-height: 22px;
              padding: 0 12px;
              color: #333333;
              cursor: pointer;
              &.active {
                background: #eeeeee;
              }
              &.fontWeight {
                font-weight: bold;
              }
              > .leftType {
                > .color {
                  display: inline-block;
                  width: 9px;
                  height: 9px;
                  border-radius: 50%;
                  margin-right: 10px;
                }
              }
              > .rightCount {
                display: flex;
                > span.count {
                  font-size: 14px;
                  width: 70px;
                  text-align: right;
                  color: #333333;
                }
                > span.precent {
                  font-size: 14px;
                  width: 88px;
                  text-align: right;
                  color: #333333;
                }
              }
            }
          }
        }
        .tubiao {
          width: 352px;
          margin: 0 auto;
          height: 374px;
          background: #f5f5f5;
          border-radius: 4px;
          margin-top: 24px;
          position: relative;
          padding-top: 24px;
          .tubiao_top {
            height: 22px;
            margin-bottom: 24px;
            text-align: center;
            font-weight: 500;
            font-size: 14px;
            color: #000000;
          }
          .main_echarts {
            margin: 0 auto;
          }
          .cut_download {
            position: absolute;
            bottom: 24px;
            left: 56px;
            display: flex;
            .sele {
              background: rgba(0, 0, 0, 0.08);
              border-radius: 4px;
            }
            span {
              cursor: pointer;
              display: inline-block;
              width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 16px;
            }
            .download {
              width: 56px;
            }
            img {
              width: 24px;
              height: 24px;
            }
          }
        }
      }
      > .right {
        flex: 1;
        margin-left: 24px;
        .word_back {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .word {
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #000000;
            .title {
              font-weight: 500;
            }
            span {
              margin-right: 16px;
            }
          }
          .back {
            width: 88px;
            height: 32px;
            border: 1px solid #d9d9d9;
            box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            font-weight: 400;
            font-size: 14px;
            cursor: pointer;
          }
        }
        .btn_set {
          margin-top: 21px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .btn {
            display: flex;
            .btn_dv {
              width: 82px;
              height: 40px;
              border: 1px solid #d9d9d9;
              box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
              border-radius: 4px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-weight: 400;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.85);
              cursor: pointer;
              img {
                width: 14px;
                height: 14px;
                margin-right: 8px;
              }
            }
          }
          .daxiao {
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              width: 24px;
              height: 24px;
              border: 1px solid gainsboro;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              border-radius: 4px;
              img {
                width: 22px;
                height: 22px;
              }
            }
            > img {
              width: 24px;
              height: 24px;
              margin: 0 8px;
            }
          }
        }
        .right_main {
          margin-top: 16px;
          height: calc(100% - 137px);
          background: #26272a;
          border-radius: 4px;
          padding: 12px 15px;
          .right_main_top {
            display: flex;
            justify-content: end;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
            line-height: 22px;
            color: #a6a6a6;
            > div {
              margin-left: 24px;
            }
            .line {
              display: inline-block;
              height: 12px;
              width: 1px;
              background: #525252;
              margin: 0 12px;
            }
          }
          .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;
                  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>
  <style lang="scss">
.textanalysis_index {
  .el-switch__label.is-active {
    color: #000000;
  }
  .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>