zydx-plus 1.32.208 → 1.32.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.208",
+  "version": "1.32.209",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/editor/src/editor.vue

@@ -182,6 +182,12 @@ export default {
                 }
             },
             deep: true
+        },
+        menusText: {
+            handler: function (e, oldVal) {
+                this.organizeButton()
+            },
+            deep: true
         }
     },
     mounted() {

package/src/components/tagging/src/tagging.css

@@ -69,6 +69,7 @@
     width: 80%;
     height: 80%;
     margin: 0 auto;
+    text-align: justify;
 }
 .right-menu{
     position: fixed;
@@ -187,4 +188,34 @@
     top: -9999px;
     opacity: 1;
     z-index: -1;
-}
+}
+.but-wrap{
+    text-align: center;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+}
+.but-brown{
+    background-color: #c64c10;
+    padding: 0 20px;
+    font-size: 12px;
+    color: #fff;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 5px;
+    border: 0;
+    cursor: pointer;
+    margin-left: 10px;
+}
+.but-act{
+    background-color: #bbbbbb;
+    color: #fff;
+}
+#htmlText :deep(.p),#htmlText :deep(.h1),#htmlText :deep(.h2),#htmlText :deep(.h3),#htmlText :deep(.h4){
+    text-align: justify;
+}
+.tagging-text :deep(.p),.tagging-text :deep(.h1),.tagging-text :deep(.h2),.tagging-text :deep(.h3)，.tagging-text :deep(.h4){
+    text-align: justify;
+}

package/src/components/tagging/src/tagging.vue

@@ -17,6 +17,10 @@
                 </div>
                 <div class="tagging-html">
                     <div class="tagging-text" ref="tagging" @click.right="rightMenu($event)"></div>
+                    <div class="but-wrap">
+                        <button class="but-brown" :disabled="page === 0" :class="{'but-act': page === 0}" @click="last">上一页</button>
+                        <button class="but-brown" :disabled="page === htmlArr.length - 1" :class="{'but-act': page === htmlArr.length - 1}" @click="next">下一页</button>
+                    </div>
                     <div class="right-menu" :style="rightStyle" v-if="rightMenuShow">
                         <span @click="annotations">批注</span>
                     </div>
@@ -26,7 +30,7 @@
         <div class="tagging-right">
             <div class="tagging-title">批注指导</div>
             <div class="annotation">
-                <div class="annotation-list" @click="guidance(item.id,index)" :id="item.id" v-for="(item, index) in annotationsData">
+                <div class="annotation-list" @click="guidance(item.id,index)" :id="item.id" v-for="(item, index) in annotationsArr">
                     <div class="list-title">
                         <div class="list-left">
                             <span>刘秀芮老师</span>
@@ -57,7 +61,7 @@
 </template>
 
 <script>
-import { html2json, json2html } from 'html2json'
+import {html2json, json2html} from 'html2json'
 import zydxTextarea from "../../textarea/src/textarea"
 import Range from "./range";
 
@@ -72,8 +76,12 @@ export default {
                 left: '0px'
             },
             annotationsData: [],
+            annotationsArr: [],
             ranges: null,
-            linkData: []
+            linkData: [],
+            htmlArr: [],
+            page: 0,
+            dataID: []
         }
     },
     props: {
@@ -89,29 +97,127 @@ export default {
         value: {
             handler(val) {
                 this.$nextTick(() => {
-                    let h = json2html(JSON.parse(val.html))
-                    document.getElementById('htmlText').innerHTML = h
-                    this.$refs.tagging.innerHTML = h
+                    document.getElementById('htmlText').innerHTML = json2html(JSON.parse(val.html))
+                    document.getElementById('htmlText').style.width = this.$refs.tagging.offsetWidth + 'px'
                     this.annotationsData = val.annotations
-                    this.linkFor()
+                    setTimeout(() => {
+                        this.readOnlyPage() // 分页
+                    },100)
                 })
             },
             immediate: true
         }
     },
     methods: {
+        last() {
+            if (this.page <= 0) return
+            this.page--
+            this.$refs.tagging.innerHTML = this.htmlArr[this.page]
+            this.annDataArrange() // 批注数据整理
+            this.linkFor() // 计算线的位置
+        },
+        next() {
+            if (this.page >= this.htmlArr.length - 1) return
+            this.page++
+            this.$refs.tagging.innerHTML = this.htmlArr[this.page]
+            this.annDataArrange() // 批注数据整理
+            this.linkFor() // 计算线的位置
+        },
+        readOnlyPage() { // 分页
+            this.htmlArr = []
+            const data = document.getElementById('htmlText').childNodes
+            const taggID = this.$refs.tagging
+            let max = taggID.offsetHeight
+            let pHeight = 0
+            let html = ''
+            for (let i = 0; i < data.length; i++) {
+                let text = data[i].offsetHeight
+                if ((pHeight + text) > max) {
+                    const {start, end, size} = this.rows(data[i], max - pHeight)
+                    html += `<p class="text"><span style="font-size: ${size}px">${start.data}</span></p>`
+                    this.htmlArr.push(html)
+                    pHeight = 0
+                    html = ''
+                    html += `<p class="text"><span style="font-size: ${size}px">${end.data}</span></p>`
+                    pHeight = end.size
+                }else {
+                    pHeight += text
+                    html += data[i].outerHTML
+                }
+                if (i === data.length - 1) {
+                    this.htmlArr.push(html)
+                    pHeight = 0
+                    html = ''
+                    break
+                }
+            }
+            taggID.innerHTML = this.htmlArr[this.page]
+            this.annDataArrange() // 批注数据整理
+            this.linkFor() // 计算线的位置
+        },
+        // 批注数据整理
+        annDataArrange() {
+            this.annotationsArr = []
+            this.annotationsData.forEach(item => {
+                this.annDataID().forEach(item2 => {
+                    if (item.id === item2) {
+                        this.annotationsArr.push(item)
+                        setTimeout(() => {
+                            document.getElementById(item2).style.border = '1px solid #ccc'
+                        },0)
+                    }
+                })
+            })
+        },
+        // 当前页批注数据ID
+        annDataID() {
+            this.dataID = []
+            this.$refs.tagging.childNodes.forEach(item => {
+                this.childNode(item)
+            })
+            return this.dataID
+        },
+        childNode(data) {
+            data.childNodes.forEach(item => {
+                if(item.nodeName === 'I') {
+                    this.childNode(item)
+                }else {
+                    if(data.classList[1]) { // 判断是否有批注
+                        this.dataID.push(data.classList[1].slice(0, data.classList[1].length - 1))
+                    }
+                }
+            })
+        },
+        rows(data,num) {
+            let size = parseInt(window.getComputedStyle(data, null).fontSize)
+            let line = parseInt(window.getComputedStyle(data, null).lineHeight)
+            let width = data.offsetWidth
+            let height = data.offsetHeight
+            let rows = Math.round(num / line)  // 行数
+            let text = data.innerText
+            let textLen = this.measureText(text,size,width * rows)
+            let start = text.slice(0, textLen)
+            let end = text.slice(textLen)
+            return {
+                start: {data: start, size: num},
+                end: {data: end, size: height - num},
+                size: size,
+            }
+        },
         getContent() {
+            let html = ''
+            this.htmlArr.forEach(item => html += item)
             return {
-                html: html2json(this.$refs.tagging.innerHTML),
+                html: html2json(html),
                 annotations: this.annotationsData
             }
         },
         // 保存批注
         preservation(id,index) {
             const text = this.$refs[`${id}ref`][0].getContent()
-            this.annotationsData[index].readable = false
-            this.annotationsData[index].more = true
-            this.annotationsData[index].text = text
+            this.annotationsArr[index].readable = false
+            this.annotationsArr[index].more = true
+            this.annotationsArr[index].text = text
             this.linkFor()
         },
         // 取消批注
@@ -128,15 +234,20 @@ export default {
         del(id,index) {
             // 删除数组
             const className2 = document.getElementsByClassName(`${id}s`)
-            this.annotationsData.splice(index,1) // 删除批注
+            this.annotationsArr.splice(index,1) // 删除批注
+            this.annotationsData.forEach((item,index2) => {
+                if (item.id === id) this.annotationsData.splice(index2,1) // 删除批注
+            })
             this.classBackDel(className2) // 删除批注对应的样式
             this.linkFor()
+            this.htmlArr[this.page] = this.$refs.tagging.innerHTML
         },
-        linkFor() {
+        linkFor() { // 计算线的位置
             this.linkData = []
+            if(this.annotationsArr.length <= 0) return
             this.$nextTick(() => {
-                for(let i=0; i<this.annotationsData.length; i++) {
-                    this.link(this.annotationsData[i].id)
+                for(let i=0; i<this.annotationsArr.length; i++) {
+                    this.link(this.annotationsArr[i].id)
                 }
             })
         },
@@ -275,26 +386,29 @@ export default {
         },
         // 修改
         modify(index) {
-            this.annotationsData[index].readable = true
+            this.annotationsArr[index].readable = true
             this.linkFor()
         },
         // 更多
         moreTap(index) {
-            this.annotationsData[index].more = false
+            this.annotationsArr[index].more = false
             this.linkFor()
         },
         annotations() {
             this.rightMenuShow = false
             let timestamp = 'wrap' + Math.random().toString(36).substr(2)
             this.replaceSelectedStrByEle('custom-underline',timestamp)
+            this.htmlArr[this.page] = this.$refs.tagging.innerHTML
             // 时间戳
-            this.annotationsData.push({
+            let ann = {
                 id: timestamp,
                 time: this.timestampToTime(new Date().getTime()),
                 more: true,
                 readable: true,
                 text: ''
-            })
+            }
+            this.annotationsData.push(ann)
+            this.annotationsArr.push(ann)
             setTimeout(() => {
                 this.link(timestamp)
             },0)
@@ -328,4 +442,4 @@ export default {
 }
 </script>
 
-<style scoped src="./tagging.css"></style>
+<style scoped src="./tagging.css"></style>

package/src/index.js

@@ -77,7 +77,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.208',
+    version: '1.32.209',
     install,
     Calendar,
     Message,