zydx-plus 1.28.132 → 1.28.134

package/package.json

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

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,12 +1,10 @@
 <template>
    <div class="drag-pop" :style="position">
-       <div class="drag-head"
-            :style="{'background-color':titleColor}"
-            @mousedown="mousedown"
-            @mousemove="mousemove"
-            @mouseup="mouseup"
-            @mouseleave="mousemove">
-           <span>按住可拖动弹窗</span>
+       <div class="drag-head" :style="{'background-color':titleColor}">
+           <span @mousedown="mousedown"
+                 @mousemove="mousemove"
+                 @mouseup="mouseup"
+                 @mouseleave="mousemove">按住可拖动弹窗</span>
            <i @click.stop="close"></i>
        </div>
        <div class="drag-cont" @mousemove="footMove" @mouseleave="footMove">
@@ -185,8 +183,17 @@ export default {
 }
 .drag-head span{
     text-align: center;
-    width: 100%;
+    width: calc(100% - 30px);
     display: inline-block;
+    margin-right: 40px;
+}
+@keyframes linkDown {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 .drag-pop {
     position: fixed;
@@ -194,6 +201,8 @@ export default {
     background-color: #fff;
     border-radius: 3px;
     z-index: 999;
+    animation: linkDown .3s linear forwards;
+    opacity: 0;
 }
 .drag-head{
     height: 30px;

package/src/components/read/src/read.vue

@@ -2,7 +2,11 @@
   <div class="read">
       <vue-office-docx v-if="fileType === 'docx'" :src="url" style="height: 100%;" @rendered="renderedHandler" />
       <vue-office-excel v-if="fileType === 'xlsx'" :src="url" style="height: 100%;" @rendered="renderedHandler" />
-      <div class="view-pdf" v-if="fileType === 'pdf'" id="canvas-wrap"></div>
+      <div class="view-pdf" v-if="fileType === 'pdf'">
+          <div class="pageContainer" v-for="(item,index) in idArr">
+              <canvas :id="item"></canvas>
+          </div>
+      </div>
       <div class="mp4" v-if="fileType === 'mp4'">
           <video :src="url" controls></video>
       </div>
@@ -11,7 +15,7 @@
       </div>
       <div v-if="loading" class="loading-back">
           <div class="loading-cont">
-              <div class="loading">Loading</div>
+              <div class="loadings">Loading</div>
           </div>
       </div>
   </div>
@@ -40,6 +44,7 @@ export default {
             pdfPages: 0,
             loading: true,
             repeat: false,
+            idArr: []
         }
     },
     props: {
@@ -61,14 +66,14 @@ export default {
     },
     methods: {
         repeatInit() {
-            if(this.repeat) return // 防止重复加载
+            if (this.repeat) return // 防止重复加载
             this.repeat = true
             this.loading = true
             this.fileType = this.url.split('.').pop()
-            if(this.fileType === 'pdf') this.init()
+            if (this.fileType === 'pdf') this.init()
             setTimeout(() => {
                 this.repeat = false
-            },1000)
+            }, 1000)
         },
         renderedHandler() {
             this.loading = false
@@ -78,59 +83,44 @@ export default {
             const loadingTask = PdfJs.getDocument(this.url)
             loadingTask.promise.then((pdf) => {
                 that.pdfPages = pdf.numPages // 获取pdf文件的总页数
-                for (let i = 0; i < that.pdfPages; i++) {
-                    let inx = i+1
-                    pdf.getPage(inx).then(function (page) {
-                        let viewport = page.getViewport({scale: 1.3})
-                        return page.getOperatorList().then(function(opList) {
-                            let svgGfx = new PdfJs.SVGGraphics(page.commonObjs, page.objs)
-                            return svgGfx.getSVG(opList, viewport).then(function(svg) {
-                                that.svgArr.push({
-                                    index: inx,
-                                    width: viewport.width,
-                                    height: viewport.height,
-                                    data: svg
-                                })
-                            })
-                        })
-                    })
-                }
+                let page = pdf.numPages
+                // if(that.pdfPages > 5) page = 5
+                that.getPDF(pdf,page)
             })
-            setTimeout(() => {
-                that.sortArr()
-            },100)
         },
-        // 数组根据索引排序
-        sortArr() {
-            for(let j = 0; j < this.svgArr.length;j++){
-                let temp = this.svgArr[j],
-                    val  = temp['index'],
-                    i = j-1;
-                while(i >=0 && this.svgArr[i]['index']>val){
-                    this.svgArr[i+1] = this.svgArr[i];
-                    i = i-1;
-                }
-                this.svgArr[i+1] = temp;
+        getPDF(pdf,page) {
+            let that = this
+            for (let i = 0; i < page; i++) {
+                const id = 'canvas' + Math.random().toString(36).substr(2)
+                that.idArr.push(id)
+                pdf.getPage(that.idArr.length).then(function (page) {
+                    let canvas = document.getElementById(id)
+                    let ctx = canvas.getContext('2d');
+                    let viewport = page.getViewport({scale: 1.35})
+                    canvas.width = viewport.width * 2
+                    canvas.height = viewport.height * 2
+                    canvas.style.width = viewport.width + 'px'
+                    canvas.style.height = viewport.height + 'px'
+                    let renderContext = {
+                        canvasContext: ctx,
+                        viewport: viewport,
+                        transform: [2, 0, 0, 2, 0, 0]
+                    }
+                    page.render(renderContext)
+                })
             }
-            this.svgArr.forEach(x => {
-                let container = document.createElement('div')
-                container.id = 'canvas_' + x.index
-                container.className = 'pageContainer'
-                container.style.width = x.width + 'px'
-                container.style.height = x.height + 'px'
-                container.style.display = 'inline-block'
-                container.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'
-                container.style.marginBottom = '5px'
-                document.getElementById('canvas-wrap').appendChild(container)
-                container.appendChild(x.data)
-            })
-            this.renderedHandler()
-        },
+            that.renderedHandler()
+        }
     }
 }
 </script>
 
 <style scoped>
+.pageContainer{
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    margin-bottom: 10px;
+    display: inline-block;
+}
 .mp4,.mp3{
     width: 100%;
 }
@@ -171,7 +161,7 @@ export default {
     display: inline-block;
     margin: 0 auto;
 }
-.loading {
+.loadings {
     display: inline-block;
     font-size: 28px;
     font-family: Arial, Helvetica, sans-serif;
@@ -182,7 +172,7 @@ export default {
     position: relative;
 }
 
-.loading::after {
+.loadings::after {
     content: "Loading";
     position: absolute;
     left: 0;

package/src/components/tipBox/src/main.vue

@@ -136,7 +136,7 @@ export default {
             this.inputArr[index].value = file
         },
         isNumberKey(evt,index) {
-            const charCode = (evt.which) ? evt.which : event.keyCode;
+            const charCode = (evt.which) ? evt.which : evt.keyCode;
             if(this.inputArr[index].value === undefined) return true
             let val = this.inputArr[index].value.toString()
             if (charCode === 46) {

package/src/components/tipBox/src/zydxStyle.css

@@ -1,3 +1,11 @@
+@keyframes linkDown {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .tip-popupWindowSearch{
   position: fixed;
   top: 0;
@@ -17,6 +25,8 @@
   border: 5px rgba(0, 0, 0, .1) solid;
   margin: 0 auto;
   box-sizing: border-box;
+  animation: linkDown .3s linear forwards;
+  opacity: 0;
 }
 .tip-boxContent{
   max-height: 600px;

package/src/components/word/src/word.css

@@ -0,0 +1,131 @@
+.paper{
+    background: #fff;
+    padding: 40px;
+    border: 1px solid #ccc;
+    width: 793px;
+    margin: 0 auto;
+}
+.parer-name{
+    text-align: right;
+}
+.parer-name-list{
+    height: 25px;
+    line-height: 25px;
+    font-size: 12px;
+}
+.choice:after {
+    content: "";
+    clear: left;
+    display: block;
+}
+.text{
+    letter-spacing: 25px;
+    margin-right: -25px;
+}
+.parer-name-list span{
+    line-height: 25px;
+    display: inline-block;
+}
+.parer-name-list em{
+    display: inline-block;
+    min-width: 100px;
+    border-bottom: 1px solid #000;
+    height: 25px;
+    line-height: 25px;
+    text-align: left;
+    margin-left: 10px;
+    font-style: normal;
+}
+.parer-title{
+    padding: 30px 0;
+    text-align: center;
+}
+.parer-title span{
+    font-size: 14px;
+}
+.parer-title p{
+    font-size: 20px;
+    margin-top: 5px;
+}
+.parer-cont{
+    padding: 10px 0;
+}
+.parer-cont>p{
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: bold;
+}
+.parer-cont>p>span{
+    font-weight: normal;
+}
+.parer-table{
+    width: 100%;
+    margin: 5px 0;
+}
+.parer-table>table{
+    width: 100%;
+    border-left: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+}
+.parer-table>table th,.parer-table>table td{
+    line-height: 30px;
+    font-weight: normal;
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+    font-size: 14px;
+}
+.choice-title{
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 23px;
+}
+.subject{
+    font-size: 14px;
+    line-height: 25px;
+    display: flex;
+    align-items: center;
+}
+.subject span{
+    flex: 1;
+}
+.choice-box{
+    text-indent: 2em;
+    line-height: 25px;
+    font-size: 14px;
+    margin: 2px 0;
+    position: relative;
+}
+.choice-box input{
+    position: absolute;
+    top: 7px;
+    left: 2em;
+    z-index: 1;
+}
+.choice-box span{
+    padding-left: 20px;
+}
+.paper-textarea{
+    width: calc(100% - 2em);
+    height: 85px;
+    margin-left: 2em;
+    resize: none;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+.array-ch .choice-box{
+    float: left;
+    width: 50%;
+}
+.but{
+    margin-left: 5px;
+    font-size: 12px;
+    background-color: transparent;
+    border: 1px solid #000;
+    border-radius: 3px;
+    padding: 2px 5px;
+    cursor: pointer;
+    min-width: 60px;
+    height: 21px;
+}

package/src/components/word/src/word.vue

@@ -1,175 +1,79 @@
 <template>
-    <div class="page">
-        <div class="page-content" v-for="(item,index) in pages" :key="index" v-html="item"></div>
-    </div>
+   <div class="paper">
+       <div class="parer-cont">
+           <div class="paper-choice" :class="{'array-ch': !styleText(item.testKey)}" v-for="(item,index) in data">
+               <div class="subject">
+                   <span>{{ index + 1 }}.{{ item.title }}</span>
+                   <div class="subject-but">
+                       <button class="but" @click="modify(item)">修改</button>
+                       <button class="but" @click="del(item)">删除</button>
+                   </div>
+               </div>
+               <div class="choice">
+                   <div class="choice-box" v-for="(ts,ind) in JSON.parse(item.testKey)">
+                       <label>
+                           <input :disabled="disabled" :type="ques(item.quesType)?'radio':'checkbox'" :name="index" />
+                           <span>{{ ts.index }}. {{ ts.content[0] }}</span>
+                       </label>
+                   </div>
+               </div>
+           </div>
+       </div>
+   </div>
 </template>
 
 <script>
-import katex from "katex";
-import "katex/dist/katex.css";
+
 export default {
-    name: "zydx-word",
+    name: "zydx-paper",
     data() {
         return {
-            perPage: 40,
-            pages: [],
-            imgList: [], // 图片列表
-            strNum: 76, // 每行字符数
-            pagesText: '', // 每页内容
-            start: 0
+            value: this.data
         }
     },
     props: {
-        content: {
-            type: String,
-            default: ''
+        data: {
+            type: Array,
+            default: []
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        butShow: {
+            type: Boolean,
+            default: true
         }
     },
-    mounted() {
-        this.splitHtml(this.content, this.perPage)
+    watch: {
+        data: {
+            handler: function (val, oldVal) {
+                this.value = val
+            },
+            deep: true
+        }
     },
     methods: {
-        ToString(data) {
-            return katex.renderToString(data, {
-                throwOnError: false,
-            });
-        },
-        getImgHeight(imgs) {
-            // 获取img标签里的图片地址
-            imgs = imgs.join('')
-            imgs = imgs.match(/<img.*?>/g)
-            if (imgs === null) return
-            for (let i = 0; i < imgs.length; i++) {
-                // 获取图片地址
-                imgs[i] = imgs[i].match(/src=".*?"/g)[0].replace(/src="|"/g, '')
-                const img = new Image()
-                img.src = imgs[i]
-                img.onload = () => {
-                    let height = img.height
-                    let width = img.width
-                    // 计算图片比例
-                    const scale = height / width
-                    // 计算图片高度整数
-                    height = Math.floor(693 * scale)
-                    this.imgList.push({
-                        src: imgs[i],
-                        height: height,
-                        width: width,
-                        index: i
-                    })
-                }
-            }
+        modify(v) {
+            this.$emit('modify',v)
         },
-        resetData() {
-            this.start = 0
-            this.pages.push(this.pagesText)
-            this.pagesText = ''
+        del(v) {
+            this.$emit('del',v)
         },
-        splitHtml(html, perPage) {
-            const arr = html.split('</p>')
-            this.getImgHeight(arr)
-            setTimeout(() => {
-                // 重新排序
-                this.imgList.sort((a, b) => {
-                    return a.index - b.index
-                })
-                let imgIndex = 0
-                // 筛选出标签里的内容
-                for (let i = 0; i < arr.length; i++) {
-                    // 判断是否是最后一个
-                    if (arr.length - 1 === i) {
-                        this.pagesText += `${arr[i]}`
-                        this.resetData()
-                        break
-                    }
-                    if (this.start >= perPage) this.resetData()
-                    // 判断是否是img标签
-                    if (arr[i].indexOf('<img') > -1) {
-                        const h = this.imgList[imgIndex].height
-                        const w = this.imgList[imgIndex].width
-                        const src = this.imgList[imgIndex].src
-                        const hNum = Math.ceil(h / 27)
-                        if ((perPage - this.start) < hNum) this.resetData()
-                        this.start += hNum
-                        this.pagesText += `<p style="text-align: center;"><img style="width: ${(w < 693) ? w : 693}px;height: ${(h > 1020) ? 1020 : h}px;vertical-align: middle;padding: 14px 0" src="${src}" alt="" /></p>`
-                        imgIndex += 1
-                    } else {
-                        // 判断是否data-w-e-type="video"
-                        if (arr[i].indexOf('data-w-e-type="formula"') > -1) {
-                            // 获取公式内容
-                            const dataValue = arr[i].match(/data-value=".*?"/g)[0].replace(/data-value="|"/g, '')
-                            // 删除span标签
-                            arr[i] = arr[i].replace(/<span.*?>/g, '$')
-                            arr[i] = arr[i].replace(/<\/span>/g, '$')
-                            const sp = arr[i].split('$$')
-                            arr[i] = `${sp[0]}${this.ToString(dataValue)}${sp[1]}`
-                        }
-                        // 判断标签是否是h1-h6
-                        if (arr[i].indexOf('<h') > -1) {
-                            arr[i] = arr[i].replace(/<h[1-6]>/g, '<p style="font-size: 18px;font-weight: bold;">')
-                            arr[i] = arr[i].replace(/<\/h[1-6]>/g, '</p>')
-                        }
-                        const text = arr[i].replace(/<[^>]+>/g, '')
-                        const lenNum = Math.ceil(this.thatLenText(text,0).len / this.strNum)
-                        if ((perPage - this.start) < lenNum) {
-                            const { st, end, surplus } = this.thatLenText(text,(perPage - this.start),lenNum)
-                            this.pagesText += `<p>${st}</p>`
-                            this.resetData()
-                            this.start = surplus
-                            this.pagesText = `<p>${end}</p>`
-                        }else {
-                            this.start += (lenNum <= 0) ? 1 : lenNum
-                            this.pagesText += `${arr[i]}`
-                        }
-                    }
-                }
-            }, 200)
+        ques(v){
+            return v.indexOf('101') > -1
         },
-        // 计算每行字符数
-        thatLenText(data,num,lenNum) {
-            let len = 0
-            let st = ''
-            let end = ''
-            for(let i= 0; i < data.length; i++) {
-                if(data[i].replace(/[^\u4e00-\u9fa5]/g, '')) {
-                    len += 2
-                }else if(data[i].match(/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u2014|\u2026|\u2013]/g)) {
-                    len += 2
-                }else if(data[i].match(/[a-zA-Z]/g)) {
-                    len += 1
-                }else {
-                    len += 1
-                }
-                if(len <= num*this.strNum) {
-                    st += data[i]
-                }else {
-                    end += data[i]
+        styleText(v) {
+            const data = JSON.parse(v)
+            for(let i=0; i< data.length; i++) {
+                if(data[i].content[0].length > 20) {
+                    return true
                 }
             }
-            return {st, end, len, row: num-1, surplus: lenNum - num}
-        }
+            return false
+        },
     }
 }
 </script>
 
-<style scoped>
-.page {
-    text-align: center;
-    width: 100%;
-}
-
-.page-content {
-    width: 793px;
-    height: 1122px;
-    background-color: #fff;
-    padding: 50px;
-    display: inline-block;
-    white-space: pre-wrap;
-    text-align: left;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
-    margin-bottom: 30px;
-    font-size: 18px;
-    position: relative;
-    box-sizing: border-box;
-}
-</style>
+<style scoped src="./word.css"></style>

package/src/index.js

@@ -14,7 +14,6 @@ import treeList from './components/treeList/index';
 import flip from './components/flip/index';
 import editor from './components/editor/index';
 import tab from './components/tab/index';
-import word from './components/word/index';
 import mind from './components/mind/index';
 import bizHeader from './components/biz_header/index';
 import editor2 from './components/editor2/index';
@@ -27,6 +26,7 @@ import input from './components/input/index';
 import time from './components/time/index';
 import preface from './components/preface/index';
 import choice from './components/choice/index';
+import word from './components/word/index';
 
 const components = [
     Calendar,
@@ -43,7 +43,6 @@ const components = [
     flip,
     editor,
     tab,
-    word,
     mind,
     bizHeader,
     editor2,
@@ -55,7 +54,8 @@ const components = [
     input,
     time,
     preface,
-    choice
+    choice,
+    word
 ];
 
 function install(app) {
@@ -67,7 +67,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.28.132',
+    version: '1.28.134',
     install,
     Calendar,
     Message,
@@ -85,7 +85,6 @@ export default {
     flip,
     editor,
     tab,
-    word,
     mind,
     bizHeader,
     editor2,
@@ -97,6 +96,7 @@ export default {
     input,
     time,
     preface,
-    choice
+    choice,
+    word
 };