文本分析 词表词云bug

public/ciyun/ciyunindex.html

@@ -13,6 +13,7 @@
     <script type="text/javascript" src="./layui/layui.js"></script>
     <link rel="stylesheet" href="./css/common.css">
     <link rel="stylesheet" href="./css/jiaocai.css">
+    <link rel="stylesheet" href="./css//font/font.css">
     <script src="../config.js"></script>
     <style type="text/css">
         #stop:hover {
@@ -861,6 +862,7 @@
         // 关闭
         $("#closeWord").click(function () {
             $("#shadow").hide()
+            getdata()
         })
         // 新增 addWord
         $("#addWord").click(function () {

public/ciyun/css/font/font.css

@@ -0,0 +1,99 @@
+@font-face {
+  font-family: 'FZJCGFKTK';
+  src: url('FZJCGFKTK.TTF');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-A';
+  src: url('GB PINYINOK-A.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-B';
+  src: url('GB PINYINOK-B.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-C';
+  src: url('GB PINYINOK-C.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-D';
+  src: url('GB PINYINOK-D.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-E';
+  src: url('GB PINYINOK-E.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-F';
+  src: url('GB PINYINOK-F.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-G';
+  src: url('GB PINYINOK-G.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-H';
+  src: url('GB PINYINOK-H.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-I';
+  src: url('GB PINYINOK-I.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK-J';
+  src: url('GB PINYINOK-J.TTF');
+}
+
+@font-face {
+  font-family: 'GB-PINYINOK';
+  src: url('GB PINYINOK.TTF');
+}
+
+@font-face {
+  font-family: 'iconFont';
+  src: url('iconfont.woff');
+}
+
+@font-face {
+  font-family: 'robot';
+  src: url('Roboto-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'sourceR';
+  src: url('SourceSansPro-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'FZKT-GBK';
+  src: url('FZKTK.TTF');
+}
+
+@font-face {
+  font-family: 'FZLTH';
+  src: url('FZLTHJW.TTF');
+}
+
+@font-face {
+  font-family: 'FZSS';
+  src: url('FZSSJW.TTF');
+}
+@font-face {
+  font-family: 'FZPY';
+  src: url('FZPY.TTF');
+}
+#app {
+  font-family: "sourceR";
+
+}

src/views/Textanalysis/WordTable.vue

@@ -7,15 +7,22 @@
       <div class="top">
         <div class="left">
           <div class="type_dv">
-            <span :class="[typeIndex == 0 ? 'sele' : '']" @click="cutType(0)"
-              >音节</span
-            >
-            <span :class="[typeIndex == 1 ? 'sele' : '']" @click="cutType(1)"
-              >汉字</span
-            >
-            <span :class="[typeIndex == 2 ? 'sele' : '']" @click="cutType(2)"
-              >词汇</span
-            >
+            <div class="sele">
+              <span :class="[typeIndex == 0 ? 'sele' : '']" @click="cutType(0)"
+                >音节</span
+              >
+              <span :class="[typeIndex == 1 ? 'sele' : '']" @click="cutType(1)"
+                >汉字</span
+              >
+              <span :class="[typeIndex == 2 ? 'sele' : '']" @click="cutType(2)"
+                >词汇</span
+              >
+            </div>
+            <div class="down" @click="download">
+              <img src="../../assets/teacherdev/dowload-text.png" alt="" /><span
+                >下载</span
+              >
+            </div>
           </div>
           <!-- <el-radio-group v-model="headText">
             <el-radio :label="1">词头</el-radio>
@@ -43,7 +50,10 @@
               v-for="(item, i) in tableHeader"
               :key="i"
               :style="{ width: item.width }"
-              :class="[i == tableHeader.length - 1 ? 'bz' : '']"
+              :class="[
+                i == tableHeader.length - 1 ? 'bz' : '',
+                item.name == '级别' ? 'jb' : '',
+              ]"
               v-if="
                 (item.name == '拼音' && typeIndex != 0) || item.name != '拼音'
               "
@@ -59,7 +69,7 @@
                   }}
                 </span>
                 <template v-if="item.sortShow">
-                  <div class="sort">
+                  <div :class="['sort']">
                     <div>
                       <img
                         v-if="item.sort != 'up'"
@@ -120,6 +130,7 @@
               <span
                 :style="{
                   fontFamily: '楷体',
+                  fontSize: '16px',
                   color:
                     item.gradeName && levelMap[item.gradeName]
                       ? levelMap[item.gradeName].color
@@ -128,10 +139,11 @@
                 >{{ item.gradeName }}</span
               >
             </td>
-            <td class="sort-td">
+            <td class="sort-td jb" style="text-align: right">
               <span
                 :style="{
                   fontFamily: '楷体',
+                  fontSize: '16px',
                   color:
                     item.levelName && levelMap[item.levelName]
                       ? levelMap[item.levelName].color
@@ -142,7 +154,7 @@
             </td>
             <td
               class="sort-td"
-              style="cursor: pointer"
+              style="cursor: pointer; fontsize: 16px"
               @click="
                 backHighlight(
                   item,
@@ -194,6 +206,9 @@
                   >
                     {{ items.levelName }}
                   </span>
+                  <!-- 
+                    style="font-size: 12px"
+                   -->
                   <span>
                     {{ items.freq }}
                   </span>
@@ -322,6 +337,7 @@
 import Header from "@/components/Header.vue";
 import { postapi } from "@/api/api";
 import staticData from "../../common/data";
+import { json2excel } from "@/utils/setMethods";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -414,7 +430,7 @@ export default {
           name: "级别",
           sortShow: true,
           sort: "down",
-          width: "120px",
+          width: "150px",
           sortName: "level_id",
         },
         {
@@ -459,6 +475,66 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 下载
+    download() {
+      let data = JSON.parse(JSON.stringify(this.dataList.list));
+      data.forEach((item) => {
+        item.textRatio = item.textRatio + "%";
+        let str = "";
+        // 处理备注
+        item.remarks.forEach((items) => {
+          let node = document.createElement("span");
+          node.innerHTML = items.word;
+          str +=
+            node.innerText +
+            " " +
+            items.levelName +
+            " " +
+            items.freq +
+            "      ";
+        });
+        item.remarksTxt = str;
+      });
+      let tHeader = [];
+      let filterVal = [];
+      this.tableHeader.forEach((item) => {
+        tHeader.push(item.name);
+      });
+      if (this.typeIndex == 0) {
+        tHeader.splice(2, 1);
+        filterVal = [
+          "number",
+          "word",
+          "gradeName",
+          "levelName",
+          "freq",
+          "textRatio",
+          "remarksTxt",
+        ];
+      } else {
+        tHeader[1] = "汉字";
+        filterVal = [
+          "number",
+          "word",
+          "pinYin",
+          "gradeName",
+          "levelName",
+          "freq",
+          "textRatio",
+          "remarksTxt",
+        ];
+      }
+      var excelDatas = [
+        {
+          tHeader: tHeader,
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: data, // 表一的整体json数据
+          sheetName: "sheet1", // 表一的sheet名字
+        },
+      ];
+      //引入的函数
+      json2excel(excelDatas, "词表", true, "xlsx");
+    },
     // 返回并高亮对应数据
     backHighlight(item, color, type, index) {
       let data = JSON.parse(JSON.stringify(this.routerData));
@@ -623,28 +699,45 @@ export default {
         align-items: center;
         .type_dv {
           margin-right: 40px;
-          //   width: 172px;
-          padding: 0 2px;
-          height: 40px;
-          background: #eeeeee;
-          border-radius: 4px;
           display: flex;
-          align-items: center;
-          span {
-            display: inline-block;
-            height: 36px;
-            width: 56px;
+          > .sele {
+            padding: 0 2px;
+            height: 40px;
+            background: #eeeeee;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            span {
+              display: inline-block;
+              height: 36px;
+              width: 56px;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 40px;
+              text-align: center;
+              color: #888888;
+              cursor: pointer;
+            }
+            .sele {
+              color: #000000;
+              background: #ffffff;
+              box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
+            }
+          }
+          > .down {
+            cursor: pointer;
             font-weight: 400;
             font-size: 14px;
-            line-height: 40px;
-            text-align: center;
-            color: #888888;
-            cursor: pointer;
-          }
-          .sele {
+            line-height: 22px;
             color: #000000;
-            background: #ffffff;
-            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
+            display: flex;
+            align-items: center;
+            margin-left: 24px;
+            img {
+              margin-right: 4px;
+              width: 24px;
+              height: 24px;
+            }
           }
         }
       }
@@ -702,21 +795,29 @@ export default {
         .pinyin {
           font-family: "GB-PINYINOK-B";
         }
-        .hanzi{
+        .hanzi {
           text-align: left !important;
         }
+        .jb {
+          > div {
+            justify-content: flex-end !important;
+            .sort {
+              margin-left: 10px;
+            }
+          }
+        }
         th {
           background: #ffffff;
           .bz {
             flex: 1;
           }
+
           > div {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 0 8px;
             height: 48px;
-
             .sort {
               cursor: pointer;
               > div {
@@ -768,7 +869,7 @@ export default {
       border-radius: 4px;
       display: flex;
       align-items: center;
-      font-size: 12px;
+      font-size: 16px;
       font-weight: 500;
       padding-left: 4px;
       padding-right: 7px;

src/views/Textanalysis/index.vue

@@ -36,11 +36,13 @@
             </ul>
           </div>
           <div class="result-left-numberclose">
-            <span
-              style="font-size: 14px; line-height: 22px; color: #333333"
-              v-if="searchWord"
-            >
-              {{ SearchwordNumber }}次匹配
+            <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
@@ -115,7 +117,7 @@
                   <span class="precent">{{ item.ratio }}%</span>
                 </div>
               </div>
-              <div class="heji">
+              <div class="heji" @click="allListEvent">
                 <div class="leftType">
                   <span class="color"></span>
                   <span class="type">合计</span>
@@ -128,16 +130,18 @@
             </div>
           </div>
           <div class="tubiao" id="echarts">
-            <template v-if="chartIndex != 3">
-              <el-switch
-                v-model="ratioShow"
-                inactive-text="比例"
-                :width="26"
-                style="margin-left: 24px"
-                @change="changeratioShow"
-              >
-              </el-switch>
-            </template>
+            <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">
@@ -303,58 +307,62 @@
                       v-for="(word, indexsss) in itemss.text"
                       :key="indexsss + 'word'"
                       :class="['word']"
-                      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
+                      <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_G) != -1
-                                ? levelMap[word.levels.W_G].color
+                              ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                ? levelMap[word.levels.W_L].color
                                 : ''
                               : leftNavIndex == 2
-                              ? seleLevelMapList.indexOf(word.levels.C_G) != -1
-                                ? levelMap[word.levels.C_G].color
+                              ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                ? levelMap[word.levels.C_L].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>
+                              : '',
+                          }"
+                        >
+                          {{ word.word }}
+                        </span>
+                      </template>
                     </span>
                   </template>
                   <template v-else>
@@ -362,58 +370,62 @@
                       class="word"
                       v-for="(word, indexsss) in itemss.text"
                       :key="indexsss + 'word'"
-                      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
+                      <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_G) != -1
-                                ? levelMap[word.levels.W_G].color
+                              ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                ? levelMap[word.levels.W_L].color
                                 : ''
                               : leftNavIndex == 2
-                              ? seleLevelMapList.indexOf(word.levels.C_G) != -1
-                                ? levelMap[word.levels.C_G].color
+                              ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                ? levelMap[word.levels.C_L].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>
+                              : '',
+                          }"
+                        >
+                          {{ word.word }}
+                        </span>
+                      </template>
                     </span>
                   </template>
                 </span>
@@ -486,6 +498,7 @@ export default {
       ],
       SearchwordNumber: 0,
       searchWord: [],
+      searchWordShow: false,
       type: "",
       headerText: "wordCount",
       xifen: false,
@@ -584,6 +597,17 @@ export default {
       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();
@@ -599,6 +623,12 @@ export default {
       data.forEach((item) => {
         item.ratio = item.ratio + "%";
       });
+      let obj = {
+        name: "合计",
+        ratio: this.allRatio,
+        value: this.allValue + "%",
+      };
+      data.push(obj);
       var excelDatas = [
         {
           tHeader: ["等级", "数量", "占比"],
@@ -695,6 +725,7 @@ export default {
       if (!this.searchVal) {
         return;
       }
+      this.searchWordShow = true;
       this.closelevelMaphighlight();
       let index = this.searchWord.indexOf(this.searchVal.toLowerCase());
       if (index == -1) {
@@ -854,7 +885,12 @@ export default {
       });
     },
     changeratioShow() {
-      this.createEcharts("main_echarts", "柱状图", this.leftList, 0);
+      this.createEcharts(
+        "main_echarts",
+        "柱状图",
+        this.leftList,
+        this.chartIndex
+      );
     },
     // 图表
     createEcharts(id, type, data, index) {
@@ -939,8 +975,12 @@ export default {
               {
                 name: "Access From",
                 type: "pie",
-                radius: ["40%", "70%"],
+                // radius: ["40%", "70%"],
+                radius: ["20%", "50%"],
                 data: newdata,
+                label: {
+                  fontSize: 8,
+                },
                 itemStyle: {
                   borderColor: "#f5f5f5",
                   borderWidth: 5,
@@ -984,11 +1024,14 @@ export default {
             },
             yAxis: {
               type: "value",
+              axisLabel: {
+                formatter: this.ratioShow ? "{value}%" : "{value}",
+              },
             },
             grid: {
-              left: 1,
-              right: 1,
-              bottom: 1,
+              left: 20,
+              right: 20,
+              bottom: 0,
               containLabel: true,
             },
             series: [
@@ -1042,11 +1085,14 @@ export default {
             color: "#5470c6",
             yAxis: {
               type: "value",
+              axisLabel: {
+                formatter: this.ratioShow ? "{value}%" : "{value}",
+              },
             },
             grid: {
-              left: 1,
-              right: 1,
-              bottom: 1,
+              left: 20,
+              right: 20,
+              bottom: 0,
               containLabel: true,
             },
 
@@ -1182,6 +1228,7 @@ export default {
               item.ratio = ((item.value / this.allValue) * 100).toFixed(2);
             }
           });
+
           this.allRatio = this.allRatio.toFixed(2);
           this.leftList = res.data.result;
 
@@ -1208,7 +1255,13 @@ export default {
         },
       })
         .then((res) => {
-          this.ArticelData = res.data.result;
+          let newdata = [];
+          res.data.result.forEach((item, i) => {
+            if (item.length != 0) {
+              newdata.push(item);
+            }
+          });
+          this.ArticelData = newdata;
           let str = "";
           // 合并标点
           this.ArticelData.forEach((item) => {
@@ -1218,8 +1271,12 @@ export default {
                   if (this.chsFhList.indexOf(itemsss.word) != -1) {
                     let obj = JSON.parse(JSON.stringify(itemsss));
                     obj.isShow = true;
-                    items[index - 1].text.push(obj);
-                    itemsss.isShow = false;
+                    if (index > 0) {
+                      items[index - 1].text.push(obj);
+                      itemsss.isShow = false;
+                    } else {
+                      itemsss.isShow = true;
+                    }
                   } else {
                     itemsss.isShow = true;
                   }
@@ -1243,7 +1300,6 @@ export default {
             });
           });
           let arr = [];
-          console.log(arr);
           this.ArticelData.forEach((item, i) => {
             arr.push([]);
             item.forEach((items) => {
@@ -1706,6 +1762,9 @@ export default {
             font-size: 14px;
             line-height: 22px;
             color: #a6a6a6;
+            > div {
+              margin-left: 24px;
+            }
             .line {
               display: inline-block;
               height: 12px;