修改反馈的bug。

src/views/Textanalysis/WordTable.vue

@@ -23,6 +23,12 @@
           </el-radio-group> -->
         </div>
         <div class="right">
+          <el-cascader
+            v-model="leve"
+            :options="leveList"
+            @change="page1getdata"
+            style="width: 140px; margin-right: 24px"
+          ></el-cascader>
           <div class="seek">
             <img src="../../assets/teacherdev/search-icon.png" alt="" />
             <input v-model="keyword" type="text" />
@@ -125,17 +131,37 @@
                 >{{ item.levelName }}</span
               >
             </td>
-            <td class="sort-td">
+            <td
+              class="sort-td"
+              style="cursor: pointer"
+              @click="
+                backHighlight(item, levelMap[item.levelName].color, 'all')
+              "
+            >
               {{ item.freq }}
             </td>
             <td class="sort-td">{{ item.textRatio }}%</td>
             <td>
-              <div style="display: flex">
+              <div style="display: flex; flex-wrap: wrap">
                 <span
+                  @click="
+                    backHighlight(items, levelMap[item.levelName].color, 'one')
+                  "
                   v-for="(items, i) in item.remarks"
                   :key=""
                   class="beizhu"
-                  style="margin-right: 10px"
+                  :style="{
+                    marginRight: '10px',
+                    cursor: 'pointer',
+                    borderColor:
+                      items.levelName && levelMap[items.levelName]
+                        ? levelMap[items.levelName].color
+                        : '',
+                    background:
+                      items.levelName && levelMap[items.levelName]
+                        ? levelMap[items.levelName].color + '08'
+                        : '',
+                  }"
                 >
                   <span
                     style="font-size: 18px; font-weight: 400"
@@ -289,6 +315,54 @@ export default {
       typeIndex: 0,
       headText: 1,
       keyword: "",
+      leve: null,
+      leveList: [
+        {
+          value: null,
+          label: "全部",
+        },
+        {
+          value: 1,
+          label: "初等",
+          children: [
+            { value: "100,101,102", label: "全部" },
+            { value: "100", label: "1级" },
+            { value: "101", label: "2级" },
+            { value: "102", label: "3级" },
+          ],
+        },
+        {
+          value: 2,
+          label: "中等",
+          children: [
+            { value: "103,104,105", label: "全部" },
+            { value: "103", label: "4级" },
+            { value: "104", label: "5级" },
+            { value: "105", label: "6级" },
+          ],
+        },
+        {
+          value: 3,
+          label: "高级",
+          children: [{ value: "106", label: "7-9级" }],
+        },
+        {
+          value: 107,
+          label: "超纲",
+          children: [{ value: "107", label: "超纲" }],
+        },
+        {
+          value: 108,
+          label: "专有",
+          children: [{ value: "108", label: "专有" }],
+        },
+        {
+          value: 109,
+          label: "其它",
+          children: [{ value: "109", label: "其它" }],
+        },
+      ],
+
       tableHeader: [
         {
           name: "序号",
@@ -356,6 +430,7 @@ export default {
       loading: false,
       sortType: 0,
       sortField: "level_id",
+      routerData: null,
     };
   },
   //计算属性 类似于data概念
@@ -364,6 +439,24 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 返回并高亮对应数据
+    backHighlight(item, color, type) {
+      let data = JSON.parse(JSON.stringify(this.routerData));
+      let arr = [];
+      if (type == "all") {
+        item.remarks.forEach((items) => {
+          arr.push(items.word);
+        });
+      } else {
+        arr.push(item.word);
+      }
+      data.remarks = JSON.stringify(arr);
+      data.color = color;
+      this.$router.push({
+        path: "/textanalysis/Result",
+        query: data,
+      });
+    },
     handleCurrentChange(val) {
       this.page = val;
       this.getlist();
@@ -380,6 +473,7 @@ export default {
           word: this.keyword,
           sortField: this.sortField,
           sortType: this.sortType,
+          levels: this.leve ? this.leve[1] : null,
         },
       })
         .then((res) => {
@@ -401,7 +495,7 @@ export default {
       this.page = 1;
       this.getlist();
     },
-    SortEvent(type, name,sortName) {
+    SortEvent(type, name, sortName) {
       this.tableHeader.forEach((item) => {
         if (item.name == name) {
           if (!item.sort || item.sort == "up") {
@@ -449,6 +543,8 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    this.routerData = JSON.parse(JSON.stringify(this.$route.query));
+
     this.partitionKey = this.$route.query.partitionKey * 1;
     this.levelMap = staticData.LevelMap;
 
@@ -476,7 +572,7 @@ export default {
 /* @import url(); 引入css类 */
 .WordTable {
   background: #f6f6f6;
-  height: 100%;
+  min-height: 100%;
   .wheader {
     background: #ffffff;
   }
@@ -518,6 +614,7 @@ export default {
       }
       .right {
         display: flex;
+        align-items: center;
         .seek {
           display: flex;
           width: 264px;
@@ -594,6 +691,7 @@ export default {
               }
             }
           }
+          font-family: "楷体";
         }
         td {
           height: 40px;
@@ -602,6 +700,7 @@ export default {
           border-bottom: 1px solid #eeeeee;
           font-weight: 600;
           font-size: 14px;
+          font-family: "楷体";
         }
         .sort-td {
           padding: 0 9px;
@@ -614,9 +713,12 @@ export default {
       margin-top: 24px;
     }
     .beizhu {
+      margin-top: 8px;
+      margin-bottom: 8px;
       height: 28px;
       display: inline-block;
-      background: #f9f9f9;
+      border: 1px solid;
+      // background: #f9f9f9;
       border-radius: 4px;
       display: flex;
       align-items: center;

src/views/Textanalysis/index.vue

@@ -5,18 +5,7 @@
     </div>
     <div class="main">
       <div>
-        <div class="left">
-          <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" v-loading="LeftLoading">
           <div class="search">
             <div class="select-result" @click="showSearchColorList">
               <span class="selectBg" :style="{ background: colorValue }"></span>
@@ -52,10 +41,21 @@
             >
               {{ SearchwordNumber }}次匹配
             </span>
-            <span class="resule-right-btn" @click="clearSelected"
+            <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">
@@ -197,15 +197,7 @@
               <div
                 class="btn_dv"
                 style="margin-right: 16px"
-                @click="
-                  $router.push({
-                    path: '/textanalysis/WordTable',
-                    query: {
-                      partitionKey: partitionKey,
-                      searchType: leftNavIndex,
-                    },
-                  })
-                "
+                @click="gowordTable"
               >
                 <img src="../../assets/teacherdev/icon-cibiao.png" alt="" />
                 词表
@@ -262,29 +254,30 @@
           </div>
           <div class="right_main">
             <div class="right_main_top">
-              <span
-                >音节难度
-                <template v-if="leftNavIndex == 0">
+              <div>
+                <span
+                  >音节难度
                   {{ difficulty.pinyinDifficulty }}
-                </template>
-                <template v-else-if="leftNavIndex == 1">
+                </span>
+                <span class="line"></span>
+                <span>{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span>
+              </div>
+              <div>
+                <span
+                  >汉字难度
                   {{ difficulty.wordDifficulty }}
-                </template>
-                <template v-else>
-                  {{ difficulty.vocabularyDifficulty }}
-                </template>
-              </span>
-              <span class="line"></span>
-              <span v-if="leftNavIndex == 0"
-                >{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span
-              >
-              <span v-else-if="leftNavIndex == 1"
-                >{{ base.wordCount }} / {{ base.wordTextCount }}</span
-              >
-              <span v-else
-                >{{ base.vocabularyCount }} /
-                {{ base.vocabularyTextCount }}</span
-              >
+                </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
@@ -301,78 +294,66 @@
                     class="words"
                     v-for="(itemss, indexss) in items"
                     :key="indexss + 'words'"
+                    :style="{
+                      margin: fenci ? `0 ${wordsMargin}px` : '',
+                    }"
                   >
                     <template v-if="fenci">
-                      <span :class="['word']" style="margin: 0 2px">
+                      <span
+                        v-for="(word, indexsss) in itemss.text"
+                        :key="indexsss + 'word'"
+                        :class="['word']"
+                      >
                         <span
                           v-if="pinyinShow"
-                          :class="[
-                            'pinyin',
-                            itemss.text.length > 1 ? 'fc_pinyin' : '',
-                          ]"
+                          :class="['pinyin']"
                           :style="{
                             fontSize: pinyinFontsize + 'px',
                             lineHeight: pinyinLineHeight + 'px',
                           }"
+                          >{{ word.pinyin }}</span
                         >
-                          <span
-                            v-for="(word, indexsss) in itemss.text"
-                            :key="indexsss + 'word'"
-                          >
-                            {{ word.pinyin }}
-                          </span>
-                        </span>
+                        <br v-if="pinyinShow" />
                         <span
                           class="hanzi"
                           :style="{
                             fontSize: wordFontsize + 'px',
                             lineHeight: wordLineHeight + 'px',
-                          }"
-                        >
-                          <span
-                            v-for="(word, indexsss) in itemss.text"
-                            :key="indexsss + 'word'"
-                            :style="{
-                              color: word.color
-                                ? word.color
-                                : !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) !=
+                            color: word.color
+                              ? word.color
+                              : !xifen
+                              ? leftNavIndex == 0
+                                ? seleLevelMapList.indexOf(word.levels.P_G) !=
                                   -1
-                                  ? levelMap[word.levels.P_L].color
+                                  ? levelMap[word.levels.P_G].color
                                   : ''
                                 : leftNavIndex == 1
-                                ? seleLevelMapList.indexOf(word.levels.W_L) !=
+                                ? seleLevelMapList.indexOf(word.levels.W_G) !=
                                   -1
-                                  ? levelMap[word.levels.W_L].color
+                                  ? levelMap[word.levels.W_G].color
                                   : ''
                                 : leftNavIndex == 2
-                                ? seleLevelMapList.indexOf(word.levels.C_L) !=
+                                ? seleLevelMapList.indexOf(word.levels.C_G) !=
                                   -1
-                                  ? levelMap[word.levels.C_L].color
+                                  ? levelMap[word.levels.C_G].color
                                   : ''
-                                : '',
-                            }"
-                          >
-                            {{ word.word }}
-                          </span>
-                        </span>
+                                : ''
+                              : 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
+                        >
                       </span>
                     </template>
                     <template v-else>
@@ -388,9 +369,9 @@
                             fontSize: pinyinFontsize + 'px',
                             lineHeight: pinyinLineHeight + 'px',
                           }"
+                          >{{ word.pinyin }}</span
                         >
-                          {{ word.pinyin }}
-                        </span>
+                        <br v-if="pinyinShow" />
                         <span
                           class="hanzi"
                           :style="{
@@ -430,9 +411,8 @@
                                 : ''
                               : '',
                           }"
+                          >{{ word.word }}</span
                         >
-                          {{ word.word }}
-                        </span>
                       </span>
                     </template>
                   </span>
@@ -465,11 +445,12 @@ export default {
   data() {
     return {
       loading: false,
+      LeftLoading: false,
       wordFontsize: 20, // 汉字字号初始值
       pinyinFontsize: 12, // 拼音字号初始值
       wordLineHeight: 28,
       pinyinLineHeight: 12,
-
+      wordsMargin: 3,
       fenci: false,
       pinyinShow: false,
       leftNavIndex: 0,
@@ -508,9 +489,19 @@ export default {
       seleLevelMapList: [],
       difficulty: {},
       textContent: "",
+      routerData: null,
     };
   },
   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) => {
@@ -637,6 +628,7 @@ export default {
           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) {
@@ -644,6 +636,9 @@ export default {
           this.wordFontsize = this.wordFontsize - 2;
           this.pinyinLineHeight = this.pinyinLineHeight - 2;
           this.wordLineHeight = this.wordLineHeight - 2;
+          if (this.wordsMargin > 2) {
+            this.wordsMargin = this.wordsMargin - 1;
+          }
         }
       }
     },
@@ -651,7 +646,7 @@ export default {
       this.leftNavIndex = index;
       this.seleLevelMapList = [];
       this.xifen = false;
-      this.getstatistics();
+      this.getstatistics("left");
     },
     showSearchColorList() {
       this.isSCL = !this.isSCL;
@@ -679,6 +674,34 @@ export default {
       this.type = "";
       this.calculateSearchwordNumber();
     },
+    // 词表跳转高亮
+    async wordTablehighlight(data, color) {
+      let arr = [];
+      await data.forEach((item) => {
+        this.calculateIndex(this.textContent, item).then((res) => {
+          arr.push(res);
+        });
+      });
+      // 匹配高亮
+      this.ArticelData.forEach((item) => {
+        item.forEach((items) => {
+          items.forEach((itemss) => {
+            itemss.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 = [];
@@ -688,9 +711,7 @@ export default {
         });
       });
       this.SearchwordNumber = 0;
-      arr.forEach((item) => {
-        this.SearchwordNumber += item.length;
-      });
+      this.SearchwordNumber = arr[arr.length - 1].length;
       // 匹配高亮
       this.ArticelData.forEach((item) => {
         item.forEach((items) => {
@@ -737,23 +758,26 @@ export default {
         reslove(indexArr);
       });
     },
-    clearSelected() {
+    clearSelected(all) {
       let _this = this;
       _this.type = "";
       _this.searchVal = "";
       _this.searchWord = [];
       _this.currentcolorValue = [];
       _this.SearchwordNumber = 0;
+      if (all) {
+        this.seleLevelMapList = [];
+      }
       this.closeSearchhighlight();
     },
     cutHeaderText(type) {
       this.headerText = type;
       this.seleLevelMapList = [];
-      this.getstatistics();
+      this.getstatistics("left");
     },
     changexifen() {
       this.seleLevelMapList = [];
-      this.getstatistics();
+      this.getstatistics("left");
     },
     // 添加dom
     addnode() {
@@ -843,24 +867,9 @@ export default {
                 },
               },
             ],
-            xAxis: {
-              show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-              axisTick: {
-                show: false, //不显示坐标轴刻度线
-              },
-              axisLine: {
-                show: false, //不显示坐标轴线
-              },
-              axisLabel: {
-                show: false, //不显示坐标轴上的文字
-              },
-            },
           };
         } else if (type == "柱状图") {
           let that = this;
-          var gridWidth = 681; //可以根据canvas的宽度和grid的right,left,width进行计算
-          var fontsize = 14; //字体大小
-          var wordNum = parseInt(gridWidth / name.length / fontsize);
           option = {
             tooltip: {
               trigger: "axis",
@@ -868,15 +877,6 @@ export default {
                 type: "shadow",
               },
             },
-            dataZoom: [
-              {
-                type: "slider", //slider表示有滑动块的，inside表示内置的
-                show: true,
-                xAxisIndex: 0,
-                start: 50,
-                end: 100,
-              },
-            ],
             xAxis: {
               type: "category",
               data: name,
@@ -919,9 +919,6 @@ export default {
             ],
           };
         } else if (type == "折线图") {
-          var gridWidth = 681; //可以根据canvas的宽度和grid的right,left,width进行计算
-          var fontsize = 14; //字体大小
-          var wordNum = parseInt(gridWidth / name.length / fontsize);
           option = {
             tooltip: {
               trigger: "axis",
@@ -952,15 +949,6 @@ export default {
             yAxis: {
               type: "value",
             },
-            dataZoom: [
-              {
-                type: "slider", //slider表示有滑动块的，inside表示内置的
-                show: true,
-                xAxisIndex: 0,
-                start: 50,
-                end: 100,
-              },
-            ],
             grid: {
               left: 1,
               right: 1,
@@ -1019,6 +1007,10 @@ export default {
         }
         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 == "雷达图") {
@@ -1026,7 +1018,6 @@ export default {
           } else {
             index = parms.dataIndex;
           }
-          console.log(that.leftList[index]);
           for (let key in that.leftList[index]) {
             that.currentTBdata[key] = that.leftList[index][key];
           }
@@ -1042,8 +1033,12 @@ export default {
       });
     },
     // 获取图标统计信息
-    getstatistics() {
-      this.loading = true;
+    getstatistics(type) {
+      if (type) {
+        this.LeftLoading = true;
+      } else {
+        this.loading = true;
+      }
       let base = null;
       if (this.leftNavIndex == 0) {
         base =
@@ -1079,10 +1074,15 @@ export default {
           });
           this.allRatio = this.allRatio.toFixed(2);
           this.leftList = res.data.result;
+
           this.createEcharts("main_echarts", "柱状图", this.leftList, 0);
 
           // this.loading = false;
-          this.getArticleData();
+          if (type) {
+            this.LeftLoading = true;
+          } else {
+            this.getArticleData();
+          }
         })
         .catch((res) => {
           this.loading = false;
@@ -1113,6 +1113,12 @@ export default {
             });
           });
           this.textContent = str;
+          if (this.$route.query.remarks) {
+            this.wordTablehighlight(
+              JSON.parse(this.$route.query.remarks),
+              this.$route.query.color
+            );
+          }
           this.loading = false;
         })
         .catch((res) => {
@@ -1121,6 +1127,7 @@ export default {
     },
   },
   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;
@@ -1160,6 +1167,7 @@ export default {
       > .left {
         width: 352px;
         .top_nav {
+          margin-top: 16px;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -1185,7 +1193,6 @@ export default {
           }
         }
         .search {
-          margin-top: 16px;
           position: relative;
           height: 40px;
           width: 100%;
@@ -1195,7 +1202,7 @@ export default {
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          margin-bottom: 16px;
+
           .select-result {
             height: 24px;
             padding: 4px 11px;
@@ -1268,11 +1275,14 @@ export default {
           }
         }
         .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;
@@ -1548,7 +1558,7 @@ export default {
           padding: 12px 15px;
           .right_main_top {
             display: flex;
-            justify-content: flex-end;
+            justify-content: space-around;
             align-items: center;
             font-weight: 600;
             font-size: 14px;
@@ -1568,17 +1578,19 @@ export default {
             margin-top: 17px;
             font-weight: 500;
             .paragraph {
-              // display: flex;
+              display: flex;
+              flex-wrap: wrap;
               .sentence {
-                // display: flex;
+                display: flex;
+                flex-wrap: wrap;
                 margin-bottom: 8px;
                 .words {
-                  // display: flex;
+                  display: flex;
                   .word {
                     text-align: center;
-                    writing-mode: vertical-lr;
+                    // writing-mode: vertical-lr;
                     > span {
-                      writing-mode: horizontal-tb;
+                      // writing-mode: horizontal-tb;
                     }
                   }
                   .fc_pinyin {