词云

public/ciyun/ciyunPrint.html

@@ -18,12 +18,7 @@
     <style type="text/css">
         body,
         html {
-            min-width: 850px;
-            overflow: hidden;
-        }
-        
-        .content-inner {
-            width: 850px;
+            min-width: 870px;
         }
         
         #stop:hover {
@@ -153,11 +148,210 @@
     <div class="wraps">
 
         <div class="contents">
-            <div class="content-inner" style="padding: 0;">
+            <div class="content-inner" style="padding: 0;width: 870px;">
                 <div class="cloudDiv">
                     <!-- <div class="cloud-copyright">Copyright © Jason Davies</div> -->
                     <div class="cloud-con-div" id="cloudDiv"></div>
                 </div>
+                <form id="form" style="height: 0;overflow: hidden;">
+                    <div class="cloud-box">
+                        <!-- <div class="cloud-rule clear">
+                            <div class="rule-item fl">
+                                <p class="fl">规则：</p>
+                                <input type="text" hidden="" id="rule" value="1">
+                                <div class="rule-radio rule fl">
+                                    <div name="radio" class="radio-con fl ruleType radio-active" value='1'><i
+                                            class="radio-icon fl"></i>主题性
+                                    </div>
+                                    <div name="radio" class="radio-con fl ruleType" value='2'><i
+                                            class="radio-icon fl"></i>频次</div>
+                                </div>
+                            </div>
+                            <div class="rule-item fl">
+                                <p class="fl">数据类型：</p>
+                                <input type="text" hidden="" id="dataType" value="Word">
+                                <select name="selectDataType" class="selectOp fl" id="dataTypeSel">
+                                    <option value="Word">Word</option>
+                                    <option value="Lemma">Lemma</option>
+                                </select>
+                            </div>
+                            <div class="rule-item fl">
+                                <div class="checkbox-con fl biglittle" style="margin-right: 0px;"><i
+                                        class="checkbox-icon fl"></i></div>
+                                <div class="checkbox-con fl stopWordList"><span id="biglittle"
+                                        style="color: #0079FF;">区分大小写</span></div>
+                            </div>
+                       
+
+                        </div> -->
+
+                        <div class="cloud-rule clear" style="border:0;">
+                            <div class="rule-item fl">
+                                <p class="fl">样式：</p>
+                                <input type="text" hidden="" id="spiral" value="archimedean">
+                                <div class="rule-radio styleType fl">
+                                    <div name="radio" class="radio-con radio-active fl" value='archimedean'><i class="radio-icon fl"></i>螺线
+                                    </div>
+                                    <div name="radio" class="radio-con fl" value='rectangular'><i class="radio-icon fl"></i>矩形</div>
+                                </div>
+                            </div>
+                            <div class="rule-item fl">
+                                <p class="fl">字体：</p>
+                                <!-- 方正书宋 FZSS
+                                    兰亭黑  FZLTH
+                                    方正楷体  FZKT-GBK
+                                    方正拼音  FZPY
+                                 -->
+                                <input type="radio" hidden="" id="font" value="">
+                                <select name="selectFont" class="selectOp fl" id="fontSel">
+                                    <option value="Impact">Impact</option>
+                                    <option value="Georgia">Georgia</option>
+                                    <option value="Arial">Arial</option>
+                                    <option value="Constantia">Constantia</option>
+                                    <option value="Century">Century</option>
+                                    <option value="Berlin Sans FB">Berlin Sans FB</option>
+                                    <option value="Cooper Black">Cooper Black</option>
+                                    <option value="Elephant">Elephant</option>
+                                    <option value="FZSS">方正书宋</option>
+                                    <option value="FZLTH">方正兰亭黑</option>
+                                    <option value="FZKT-GBK">方正楷体</option>
+                                    <option value="FZPY">方正拼音</option>
+                                </select>
+                            </div>
+                            <div class="rule-item fl">
+                                <p class="fl">文字方向：</p>
+                                <input type="text" hidden="" id="fontdir" value="1">
+                                <div class="rule-radio fontDriect fl">
+                                    <div name="orientations" class="radio-con radio-active fl" value='1'><i class="radio-icon fl"></i>水平
+                                    </div>
+                                    <div name="orientations" class="radio-con fl" value='2'><i class="radio-icon fl"></i>垂直</div>
+                                    <div name="orientations" class="radio-con fl" value='3'><i class="radio-icon fl"></i>垂直和水平</div>
+                                </div>
+                            </div>
+                            <!-- <div class="rule-item fl">
+                                <p class="fl">单位：</p>
+                                <input type="text" hidden="" id="danwei" value="zi">
+                                <div class="rule-radio danwei fl">
+                                    <div name="danwei" class="radio-con radio-active fl" value='zi'><i class="radio-icon fl"></i>字
+                                    </div>
+                                    <div name="danwei" class="radio-con fl" value='ci'><i class="radio-icon fl"></i>词
+                                    </div>
+                                </div>
+                            </div> -->
+                            <div id="angles" style="float: left" hidden="">
+                                <p>
+                                    <input type="number" id="angle-count" value="5" min="1"><label for="angle-count">
+                                        <font style="vertical-align: inherit;"></font>
+                                    </label>
+                                    <font style="vertical-align: inherit;"><label for="angle-from">
+                                            <font style="vertical-align: inherit;">来自的</font>
+                                        </label><label for="angle-count">
+                                            <font style="vertical-align: inherit;">方向</font>
+                                        </label></font><label for="angle-from">
+                                        <font style="vertical-align: inherit;"></font>
+                                    </label><input type="number" id="angle-from" value="0" min="-90" max="90">
+                                    <font style="vertical-align: inherit;">
+                                        <font style="vertical-align: inherit;">°
+                                        </font>
+                                    </font><label for="angle-to">
+                                        <font style="vertical-align: inherit;">
+                                            <font style="vertical-align: inherit;">到</font>
+                                        </font>
+                                    </label><input type="number" id="angle-to" value="0" min="-90" max="90">
+                                    <font style="vertical-align: inherit;">
+                                        <font style="vertical-align: inherit;"> °
+                                        </font>
+                                    </font>
+                                </p>
+                            </div>
+                            <div class="rule-item fl">
+                                <p class="fl">缩放：</p>
+                                <input type="text" hidden="" id="scale" value="sqrt">
+                                <div class="rule-radio scaleSel  fl">
+                                    <div name="radio" class="radio-con fl" value="log"><i class="radio-icon fl"></i>log n
+                                    </div>
+                                    <div name="radio" class="radio-con radio-active fl" value="sqrt"><i class="radio-icon fl"></i>✓n</div>
+                                    <div name="radio" class="radio-con fl" value="linear"><i class="radio-icon fl"></i>n
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="rule-item fl">
+                                <p class="fl">下载：</p>
+                                <div class="download-type fl">
+                                    <span class="dType" id="download-svg">SVG</span>
+                                    <span class="line2">|</span>
+                                    <span class="dType" id="download-png">PNG</span>
+                                </div>
+                            </div>
+                            <div class="rule-item fl">
+                                <!-- <div class="checkbox-con checkbox-active fl hide"><i class="checkbox-icon fl"></i>区分大小写 -->
+                                <!-- </div> -->
+                                <div class="checkbox-con fl stop" style="margin-right: 0px;"><i class="checkbox-icon fl"></i></div>
+                                <div class="checkbox-con fl stopWordList"><span id="stop" style="color: #0079FF;">停用词表</span></div>
+                            </div>
+                        </div>
+                        <textarea rows="" cols="" id="text" name="text" hidden=""></textarea>
+                    </div>
+                    <div class="cloud-footer">
+                        <button class="produce" type="submit" id="go">生成</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="shadow" id="shadow" style="display: none;">
+            <div class="stop_word_table" id="wordTable">
+                <div class="title">
+                    <span>停用词表</span>
+                    <img id="closeWord" src="./img/close.png" alt="">
+                </div>
+                <div class="top">
+                    <input type="" name="" value="" id="wordContent" />
+                    <button id="seekWordBtn">检索</button>
+                </div>
+                <p style="text-align: right; margin-top: 16px; font-size: 16px; color: #000000">
+                    共
+                    <span id="allwordnumber"></span> 词
+                </p>
+
+                <div class="main" id="stop_word_table">
+                    <!-- <div class="one">
+                        <div>{{ item }}</div>
+                        <div class="right">
+                            <span style="margin-right: 24px" @click="edit(item)">编辑</span>
+                            <span @click="deleteOne(item, i)">删除</span>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="bottom">
+                    <button class="close" id="emptyWord">清空</button>
+                    <button class="add" id="addWord">添加</button>
+                </div>
+            </div>
+            <div class="stop_word_table" id="addwordDom" style="display: none;">
+                <div class="title">
+                    <span>添加</span>
+                    <img id="closeWordadd" src="./img/close.png" alt="">
+                </div>
+                <div class="top">
+                    <input style="width: 100%;" type="" name="" value="" id="addwordContent" />
+                </div>
+                <div class="bottom">
+                    <button class="close" id="canceladd">取消</button>
+                    <button class="add" id="addSubmit">确定</button>
+                </div>
+            </div>
+            <div class="stop_word_table" id="editwordDom" style="display: none;">
+                <div class="title">
+                    <span>添加</span>
+                    <img id="closeWordedit" src="./img/close.png" alt="">
+                </div>
+                <div class="top">
+                    <input style="width: 100%;" type="" name="" value="" id="editwordContent" />
+                </div>
+                <div class="bottom">
+                    <button class="close" id="canceledit">取消</button>
+                    <button class="add" id="editSubmit">确定</button>
+                </div>
             </div>
         </div>
     </div>

src/views/bookShelf/components/NotesModel.vue

@@ -1,5 +1,6 @@
 <!--  -->
 <template>
+  <div id="notes-model">
   <div class="NNPE-ArticleView" v-if="articleInfo">
     <template v-if="resArr[0]&&resArr[0].wordsList">
         <h2>
@@ -47,16 +48,14 @@
         </div>
       </div>
     </template>
-    
+  </div>
   </div>
 </template>
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue"
 import Highlighter from 'web-highlighter';
-const highlighter = new Highlighter({
-    exceptSelectors: ['pre', 'code']
-});
+let highlighter = null
 export default {
   name: "ArticleView",
   props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
@@ -152,16 +151,12 @@ export default {
         }
         this.sentenceList.forEach((item,index) => {
             resArr[item.pno].wordsList.push(item)
-          });
-          this.resArr = resArr;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.articleInfo) {
-      this.handleData();
+        });
+        this.resArr = resArr;
+        highlighter = new Highlighter({
+    $root: document.getElementById("notes-model"),
+    exceptSelectors: ['pre', 'code']
+});
       highlighter
         .on('selection:hover', ({id}) => {
             // 通过添加 class，实现类似 hover 效果
@@ -178,6 +173,14 @@ export default {
             // store.save(sources);
         });
       highlighter.run()
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.articleInfo) {
+      this.handleData();
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前

src/views/bookShelf/components/PrintModel.vue

@@ -140,7 +140,7 @@
                         </ul>
                     </template>
                     <template v-if="printForm.range.indexOf('ciyun')>-1">
-                        <iframe class="ciyun-box" width="100%" height="600px" border="none" :src="'./ciyun/ciyunPrint.html?partitionKey=1&searchType=2&articleId='+articleId"></iframe>
+                        <iframe class="ciyun-box" width="100%" height="650px" border="none" :src="'./ciyun/ciyunPrint.html?partitionKey=1&searchType=2&articleId='+articleId"></iframe>
                     </template>
                 </div>
                 <footer class="print-footer">
@@ -906,7 +906,7 @@ export default {
 }
 .ciyun-box{
     width: 870px;
-    height: 600px;
+    height: 650px;
     border: none;
     overflow: hidden;
 }