词云效果及文章下载问题

public/ciyun/ciyunindex.html

@@ -378,14 +378,15 @@
                 dataType: "json",
                 type: "post",
                 success: function (res) {
-                    console.log(res);
                     let str = ''
                     res.data.result.forEach(item => {
-                        str += item + " "
+                        str += item.word + " "
                     })
+                    ciyunData = res.data.result
                     text = str
                     $("#text").val(text);
                     $("#go").trigger("click");
+
                 }
             })
         }

public/ciyun/js/cloud.min.js

@@ -1,3 +1,5 @@
+var ciyunData = ""
+
 function flatten(t, e) {
 	if ("string" == typeof t) return t;
 	var n = [];
@@ -186,7 +188,8 @@ function downloadSVG() {
 							text: h.call(this, t, e),
 							font: p.call(this, t, e),
 							rotate: g.call(this, t, e),
-							size: ~~y.call(this, t, e),
+							// size: ~~y.call(this, t, e),
+							size: changeSize(t.key, ciyunData),
 							padding: s.call(this, t, e)
 						}
 					}).sort(function (t, e) {
@@ -450,3 +453,15 @@ d3.select("#random-palette").on("click", function () {
 		parseText(d3.select("#text").property("value"))
 }();
 
+function changeSize(key, arr) {
+	let size = null;
+	if (arr.length > 0) {
+		arr.forEach(item => {
+			if (item.text == key) {
+				size = item.fontSize
+			}
+		})
+		return size
+	}
+
+}

src/common/data.js

@@ -5,13 +5,13 @@ const LevelMap = {
     "超纲": { name: '超纲', color: '#EA1F1F', },
     "专有": { name: '专有', color: '#CBCBCB', },
     "其它": { name: '其它', color: '#888888', },
-    "初等1级": { name: '初等1级', color: '#B6D58A', },
-    "初等2级": { name: '初等2级', color: '#66AE5B', },
-    "初等3级": { name: '初等3级', color: '#35776B', },
-    "中等4级": { name: '中等4级', color: '#73CDDE', },
-    "中等5级": { name: '中等5级', color: '#4CA6EE', },
-    "中等6级": { name: '中等6级', color: '#3873CB', },
-    "高等7-9级": { name: '高等7-9级', color: '#9031AA', },
+    "初等（1级）": { name: '初等（1级）', color: '#B6D58A', },
+    "初等（2级）": { name: '初等（2级）', color: '#66AE5B', },
+    "初等（3级）": { name: '初等（3级）', color: '#35776B', },
+    "中等（4级）": { name: '中等（4级）', color: '#73CDDE', },
+    "中等（5级）": { name: '中等（5级）', color: '#4CA6EE', },
+    "中等（6级）": { name: '中等（6级）', color: '#3873CB', },
+    "高等（7-9级）": { name: '高等（7-9级）', color: '#9031AA', },
 }
 export default {
     LevelMap: LevelMap,

src/views/Textanalysis/index.vue

@@ -304,23 +304,25 @@
                         :key="indexsss + 'word'"
                         :class="['word']"
                       >
-                        <span
+                        <div
                           v-if="pinyinShow"
                           :class="['pinyin']"
                           :style="{
                             fontSize: pinyinFontsize + 'px',
                             lineHeight: pinyinLineHeight + 'px',
                           }"
-                          >{{ word.pinyin }}</span
                         >
-                        <br v-if="pinyinShow" />
-                        <span
+                          {{ word.pinyin }}
+                        </div>
+                        <!-- <br v-if="pinyinShow" /> -->
+                        <div
                           class="hanzi"
                           :style="{
                             fontSize: wordFontsize + 'px',
                             lineHeight: wordLineHeight + 'px',
+                            background: word.color ? word.color : '',
                             color: word.color
-                              ? word.color
+                              ? '#FFFFFF'
                               : !xifen
                               ? leftNavIndex == 0
                                 ? seleLevelMapList.indexOf(word.levels.P_G) !=
@@ -352,8 +354,9 @@
                                 : ''
                               : '',
                           }"
-                          >{{ word.word }}</span
                         >
+                          {{ word.word }}
+                        </div>
                       </span>
                     </template>
                     <template v-else>
@@ -362,24 +365,25 @@
                         v-for="(word, indexsss) in itemss.text"
                         :key="indexsss + 'word'"
                       >
-                        <span
+                        <div
                           v-if="pinyinShow"
                           :class="['pinyin']"
                           :style="{
                             fontSize: pinyinFontsize + 'px',
                             lineHeight: pinyinLineHeight + 'px',
                           }"
-                          >{{ word.pinyin }}</span
                         >
-                        <br v-if="pinyinShow" />
-                        <span
+                          {{ word.pinyin }}
+                        </div>
+                        <!-- <br v-if="pinyinShow" /> -->
+                        <div
                           class="hanzi"
                           :style="{
                             fontSize: wordFontsize + 'px',
                             lineHeight: wordLineHeight + 'px',
-
+                            background: word.color ? word.color : '',
                             color: word.color
-                              ? word.color
+                              ? '#FFFFFF'
                               : !xifen
                               ? leftNavIndex == 0
                                 ? seleLevelMapList.indexOf(word.levels.P_G) !=
@@ -411,8 +415,9 @@
                                 : ''
                               : '',
                           }"
-                          >{{ word.word }}</span
                         >
+                          {{ word.word }}
+                        </div>
                       </span>
                     </template>
                   </span>
@@ -425,8 +430,8 @@
     </div>
   </div>
 </template>
-
-<script>
+  
+  <script>
 import Header from "@/components/Header.vue";
 import * as echarts from "echarts";
 import "echarts/lib/chart/bar";
@@ -521,46 +526,53 @@ export default {
     // 下载文章
     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 style = `    <style>
-       .sentence {
-  margin-bottom: 8px;
-}
-.word {
-  writing-mode: vertical-lr;
-}
-.word > span {
-  writing-mode: horizontal-tb;
-}
-.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 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;
+  }
+  .word{
+    float:left;
+  }
+  .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">
-    ${html}
-</div>
-</body>
-</html>`;
+  <html lang="en">
+  <head>
+      <meta charset="UTF-8">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      ${style}
+  </head>
+  <body>
+  <div style="background:#26272a">
+      ${cxzcxz}
+  </div>
+  </body>
+  </html>`;
       let converted = htmlDocx.asBlob(content);
       FileSaver.saveAs(converted, "文章.docx");
     },
@@ -1079,7 +1091,7 @@ export default {
 
           // this.loading = false;
           if (type) {
-            this.LeftLoading = true;
+            this.LeftLoading = false;
           } else {
             this.getArticleData();
           }
@@ -1146,8 +1158,8 @@ export default {
   mounted() {},
 };
 </script>
-
-<style lang="scss" scoped>
+  
+  <style lang="scss" scoped>
 .textanalysis_index {
   background: #f6f6f6;
   min-height: 100%;
@@ -1588,27 +1600,20 @@ export default {
                   display: flex;
                   .word {
                     text-align: center;
-                    // writing-mode: vertical-lr;
-                    > span {
-                      // writing-mode: horizontal-tb;
-                    }
-                  }
-                  .fc_pinyin {
-                    float: left;
                   }
                   .pinyin {
+                    display: inline-block;
+                    min-height: 12px;
                     color: rgba(255, 255, 255, 0.5);
                     text-align: center;
                     line-height: 12px;
                     font-family: "GB-PINYINOK-B";
-                    // display: flex;
                   }
                   .hanzi {
                     color: rgb(255, 255, 255);
                     text-align: center;
                     line-height: 28px;
                     font-family: "FZJCGFKTK";
-                    // display: flex;
                   }
                 }
               }
@@ -1620,7 +1625,7 @@ export default {
   }
 }
 </style>
-<style lang="scss">
+  <style lang="scss">
 .textanalysis_index {
   .el-switch__label.is-active {
     color: #000000;

src/views/teacher-dev/index.vue

@@ -14,13 +14,13 @@
         >
           <!-- <el-menu-item index="TEACHINGTOOL"> 教研工具</el-menu-item> -->
           <el-menu-item index="TEXTBOOK">
-            <!-- 教辅资料 -->{{ $t('Key554') }}
+            <!-- 教辅资料 -->{{ $t("Key554") }}
           </el-menu-item>
           <el-menu-item index="TEACHING">
-            <!-- 教研资料 -->{{ $t('Key214') }}
+            <!-- 教研资料 -->{{ $t("Key214") }}
           </el-menu-item>
           <el-menu-item index="TOOLBOOK">
-            <!-- 工具书 -->{{ $t('Key555') }}
+            <!-- 工具书 -->{{ $t("Key555") }}
           </el-menu-item>
         </el-menu>
         <div class="seek" @keyup="keyDownSeekData">
@@ -44,9 +44,9 @@
     </div>
     <!-- 主要信息列表 -->
     <div class="main" v-loading="loading">
-      <!-- <div id="TEACHINGTOOL">
+      <div id="TEACHINGTOOL">
         <TeachingTool />
-      </div> -->
+      </div>
       <div id="TEXTBOOK" v-if="textBookList">
         <Textbook v-if="textBookList.data" :classList="textBookList.data" />
       </div>
@@ -61,18 +61,18 @@
 </template>
 
 <script>
-import Header from '@/components/Header'
+import Header from "@/components/Header";
 
-import Textbook from '@/components/teacher-dev/Textbook'
-import Teaching from '@/components/teacher-dev/Teaching'
-import ToolBook from '@/components/teacher-dev/ToolBook'
-import TeachingTool from '@/components/teacher-dev/TeachingTool'
+import Textbook from "@/components/teacher-dev/Textbook";
+import Teaching from "@/components/teacher-dev/Teaching";
+import ToolBook from "@/components/teacher-dev/ToolBook";
+import TeachingTool from "@/components/teacher-dev/TeachingTool";
 
-import { materiallist } from '@/api/api'
-import { updateWordPack } from '@/utils/i18n'
+import { materiallist } from "@/api/api";
+import { updateWordPack } from "@/utils/i18n";
 
 export default {
-  name: 'teacher_edu',
+  name: "teacher_edu",
   components: {
     Header,
 
@@ -84,109 +84,109 @@ export default {
 
   data() {
     return {
-      activeIndex: 'TEXTBOOK',
-      navName: 'CLASSICAL COURSE',
-      SeekName: '',
+      activeIndex: "TEXTBOOK",
+      navName: "CLASSICAL COURSE",
+      SeekName: "",
       loading: false,
       dataList: null,
       textBookList: null, //book数据
       teachingList: null, // tea数据
       toolBookList: null, //工具书
       isData: false,
-    }
+    };
   },
   computed: {},
   methods: {
     // 切换导航
     handleSelect(key, keyPath) {
-      console.log(key, keyPath)
-      this.navName = key
-      this.changeNav(key)
+      console.log(key, keyPath);
+      this.navName = key;
+      this.changeNav(key);
     },
     // 锚点定位
     changeNav(index) {
-      let id = index
-      let dom = document.getElementById(id)
+      let id = index;
+      let dom = document.getElementById(id);
       if (dom) {
-        document.getElementById(id).scrollIntoView()
+        document.getElementById(id).scrollIntoView();
       }
     },
     // 前往搜索结果
     gotoSeekResult() {
-      if (this.SeekName != '') {
-        this.SeekName = this.SeekName.trim()
+      if (this.SeekName != "") {
+        this.SeekName = this.SeekName.trim();
         this.$router.push({
-          path: '/Viewmore',
+          path: "/Viewmore",
           query: { keyWord: this.SeekName },
-        })
+        });
       } else {
-        this.$message.warning('请输入内容')
+        this.$message.warning("请输入内容");
       }
     },
     keyDownSeekData(e) {
       if (e.keyCode == 13) {
-        this.gotoSeekResult()
+        this.gotoSeekResult();
       }
     },
     // 获取数据
     getData() {
-      this.loading = true
+      this.loading = true;
       materiallist({
         pageNum: 1,
         pageSize: 10,
-        tagList: ['TEXTBOOK'],
+        tagList: ["TEXTBOOK"],
         keyWord: this.keyWord,
       })
         .then((res) => {
-          this.textBookList = res.data
+          this.textBookList = res.data;
         })
         .catch((res) => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
       materiallist({
         pageNum: 1,
         pageSize: 10,
-        tagList: ['TEACHING'],
+        tagList: ["TEACHING"],
         keyWord: this.keyWord,
       })
         .then((res) => {
-          this.teachingList = res.data
-          this.loading = false
+          this.teachingList = res.data;
+          this.loading = false;
         })
         .catch((res) => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
       materiallist({
         pageNum: 1,
         pageSize: 10,
-        tagList: ['TOOLBOOK'],
+        tagList: ["TOOLBOOK"],
         keyWord: this.keyWord,
       })
         .then((res) => {
-          this.toolBookList = res.data
-          this.loading = false
+          this.toolBookList = res.data;
+          this.loading = false;
         })
         .catch((res) => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
     },
   },
   async created() {
     await updateWordPack({
       word_key_list: [
-        'Key5',
-        'Key8',
-        'Key9',
-        'Key39',
-        'Key47',
-        'Key131',
-        'Key214',
-        'Key214',
-        'Key554',
-        'Key555',
+        "Key5",
+        "Key8",
+        "Key9",
+        "Key39",
+        "Key47",
+        "Key131",
+        "Key214",
+        "Key214",
+        "Key554",
+        "Key555",
       ],
-    })
-    this.isData = true
+    });
+    this.isData = true;
     // 需要根据身份信息来判断是进入首页还是录入
     // if (token) {
     //   if (JSON.parse(token).popedom_code_list.indexOf(2000006) != -1) {
@@ -209,9 +209,9 @@ export default {
     //   });
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .teacher_edu {