统计合计及图标样式修改，搜索功能搜索多个，文章接口及页面效果实现

src/views/Textanalysis/index.vue

@@ -107,6 +107,16 @@
                   <span class="precent">{{ item.ratio }}%</span>
                 </div>
               </div>
+              <div class="heji">
+                <div class="leftType">
+                  <span class="color"></span>
+                  <span class="type">合计</span>
+                </div>
+                <div class="rightCount">
+                  <span class="count">{{ allValue }}</span>
+                  <span class="precent">{{ allRatio }}%</span>
+                </div>
+              </div>
             </div>
           </div>
           <div class="tubiao" id="echarts">
@@ -125,26 +135,30 @@
             <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">
+              <span @click="downLoadEcharts" class="download">
                 <img src="../../assets/teacherdev/dowload-text.png" alt="" />
                 下载
               </span>
@@ -232,6 +246,62 @@
               </el-switch>
             </div>
           </div>
+          <div class="right_main">
+            <div class="right_main_top">
+              <span>音节难度 1.28</span>
+              <span class="line"></span>
+              <span>100 / 200</span>
+            </div>
+            <div class="articel">
+              <div
+                class="paragraph"
+                v-for="(item, index) in ArticelData"
+                :key="index + 'paragraph'"
+              >
+                <div
+                  class="sentence"
+                  v-for="(items, indexs) in item"
+                  :key="indexs + 'sentence'"
+                >
+                  <div
+                    class="words"
+                    v-for="(itemss, indexss) in items"
+                    :key="indexss + 'words'"
+                  >
+                    <div
+                      class="word"
+                      v-for="(word, indexsss) in itemss"
+                      :key="indexsss + 'word'"
+                      :style="{
+                        color:
+                          searchWord.indexOf(word.word) != -1
+                            ? currentcolorValue[searchWord.indexOf(word.word)]
+                            : '',
+                      }"
+                    >
+                      <div
+                        v-if="pinyinShow"
+                        class="pinyin"
+                        :style="{
+                          fontSize: pinyinFontsize + 'px',
+                        }"
+                      >
+                        {{ word.pinyin }}
+                      </div>
+                      <div
+                        class="hanzi"
+                        :style="{
+                          fontSize: wordFontsize + 'px',
+                        }"
+                      >
+                        {{ word.word }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -255,10 +325,11 @@ export default {
   data() {
     return {
       loading: false,
-      wordFontsize: 20, // 文章内容字体
+      wordFontsize: 20, // 汉字字号初始值
+      pinyinFontsize: 12, // 拼音字号初始值
       fenci: false,
       pinyinShow: false,
-      leftNavIndex: 1,
+      leftNavIndex: 0,
       leftList: null,
       colorValue: "#FF3737",
       searchVal: "",
@@ -287,6 +358,10 @@ export default {
       partitionKey: null,
       base: {},
       levelMap: null,
+      allValue: 0,
+      allRatio: 0,
+      chartIndex: 0,
+      ArticelData: null,
     };
   },
   methods: {
@@ -340,15 +415,13 @@ export default {
     handleFontsize(symbol) {
       if (symbol == "+") {
         if (this.wordFontsize < 24) {
-          this.titleFontsize = this.titleFontsize + 2;
+          this.pinyinFontsize = this.pinyinFontsize + 2;
           this.wordFontsize = this.wordFontsize + 2;
-          this.authorFontsize = this.authorFontsize + 2;
         }
       } else if (symbol == "-") {
         if (this.wordFontsize > 12) {
-          this.titleFontsize = this.titleFontsize - 2;
+          this.pinyinFontsize = this.pinyinFontsize - 2;
           this.wordFontsize = this.wordFontsize - 2;
-          this.authorFontsize = this.authorFontsize - 2;
         }
       }
     },
@@ -379,6 +452,23 @@ export default {
         this.$set(this.currentcolorValue, index, this.colorValue);
       }
       this.type = "";
+      this.calculateSearchwordNumber();
+    },
+    // 计算匹配个数
+    calculateSearchwordNumber() {
+      this.ArticelData.forEach((item) => {
+        item.forEach((items) => {
+          items.forEach((itemss) => {
+            itemss.forEach((itemsss) => {
+              this.searchWord.forEach((search) => {
+                if (itemsss.word == search) {
+                  this.SearchwordNumber++;
+                }
+              });
+            });
+          });
+        });
+      });
     },
     clearSelected() {
       let _this = this;
@@ -692,9 +782,35 @@ export default {
         },
       })
         .then((res) => {
+          this.allRatio = 0;
+          this.allValue = 0;
+          res.data.result.forEach((item) => {
+            this.allRatio += item.ratio * 1;
+            this.allValue += item.value;
+          });
+          this.allRatio = this.allRatio.toFixed(2);
           this.leftList = res.data.result;
           this.createEcharts("main_echarts", "柱状图", this.leftList, 0);
 
+          // this.loading = false;
+          this.getArticleData();
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
+    // 获取分析结果
+    getArticleData() {
+      this.loading = true;
+
+      postapi({
+        url: "GCLSTRCServer/tools/TS/analysis/parsed/text",
+        data: {
+          partitionKey: this.partitionKey,
+        },
+      })
+        .then((res) => {
+          this.ArticelData = res.data.result;
           this.loading = false;
         })
         .catch((res) => {
@@ -727,7 +843,7 @@ export default {
     padding-bottom: 66px;
     > div {
       width: 1200px;
-      height: 1187px;
+      // height: 1187px;
       background: #ffffff;
       margin: 0 auto;
       padding: 24px;
@@ -927,6 +1043,12 @@ export default {
             }
           }
           .left_list_main {
+            .heji {
+              font-weight: 600;
+              font-size: 14px;
+              line-height: 22px;
+              color: #333333;
+            }
             > div {
               // width: 100%;
               height: 48px;
@@ -997,12 +1119,23 @@ export default {
             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;
@@ -1095,6 +1228,57 @@ export default {
             }
           }
         }
+        .right_main {
+          margin-top: 16px;
+          height: calc(100% - 137px);
+          background: #26272a;
+          border-radius: 4px;
+          padding: 12px 15px;
+          .right_main_top {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 22px;
+            color: #a6a6a6;
+            .line {
+              display: inline-block;
+              height: 12px;
+              width: 1px;
+              background: #525252;
+              margin: 0 12px;
+            }
+          }
+          .articel {
+            width: 640px;
+            margin: 0 auto;
+            margin-top: 17px;
+            font-weight: 500;
+            .paragraph {
+              display: flex;
+              .sentence {
+                display: flex;
+                margin-bottom: 8px;
+                .words {
+                  display: flex;
+                  .pinyin {
+                    color: rgba(255, 255, 255, 0.5);
+                    text-align: center;
+                    line-height: 12px;
+                    font-family: "GB-PINYINOK-B";
+                  }
+                  .word {
+                    color: rgb(255, 255, 255);
+                    text-align: center;
+                    line-height: 28px;
+                    font-family: "FZJCGFKTK";
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
   }