askbot-dragon 1.6.78-beta → 1.6.78

package/src/components/pdfPosition.vue

@@ -1,29 +1,36 @@
 <template>
     <div class="pdf_view" id="pdf_view">
-        <div class="change_scale" v-if="isPC">
-            <section @click="changeScale('reduce')">
-                <i class="el-icon-minus"></i>
-            </section>
-            <el-divider direction="vertical"></el-divider>
-            <section @click="changeScale('zoom')">
-                <i class="el-icon-plus"></i>
-            </section>
-            <el-select size="small" v-model="handScale" @change="changeScale" placeholder="请选择">
-                <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-        </div>
-        <div class="pdf_container_view" id="pdf_container_view" @scroll="pdfScroll"  ref="pdfView"></div>
-        <div class="btn_footer" v-if="tagIds.length > 1 && !isPC">
-            <div class="prev" @click="prev">上一段</div>
-            <div class="next" @click="next">下一段</div>
-        </div>
-        <div id="pagination" v-if="tagIds.length > 1 && isPC">
-            <el-pagination :current-page="currentPage + 1" @current-change="currentChange" @prev-click="prev"
-                @next-click="next" layout="slot, prev, pager, next" :page-size="1" :total="tagIds.length">
-                <span class="total-class">答案由{{ tagIds.length }}段内容生成</span>
-            </el-pagination>
-        </div>
+      <div class="change_scale" v-if="isPC">
+        <section @click="changeScale('reduce')">
+          <i class="el-icon-minus"></i>
+        </section>
+        <el-divider direction="vertical"></el-divider>
+        <section @click="changeScale('zoom')">
+          <i class="el-icon-plus"></i>
+        </section>
+        <el-select size="small" v-model="handScale" @change="changeScale" :placeholder="$t('dragonCommon.selectScale')">
+          <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="pdf_container_view" id="pdf_container_view" @scroll="pdfScroll" ref="pdfView"></div>
+      <div class="btn_footer" v-if="tagIds.length > 1 && !isPC">
+        <div class="prev" @click="prev">{{ $t('dragonCommon.previous') }}</div>
+        <div class="next" @click="next">{{ $t('dragonCommon.next') }}</div>
+      </div>
+      <div id="pagination" v-if="tagIds.length > 1 && isPC">
+        <el-pagination
+          :current-page="currentPage + 1"
+          @current-change="currentChange"
+          @prev-click="prev"
+          @next-click="next"
+          layout="slot, prev, pager, next"
+          :page-size="1"
+          :total="tagIds.length"
+        >
+          <span class="total-class">{{ $t('dragonCommon.answersGeneratedByPre') }}{{tagIds.length}}{{ $t('dragonCommon.answersGeneratedByAfter') }}</span>
+        </el-pagination>
+      </div>
     </div>
 </template>
 <script>
@@ -45,11 +52,10 @@ if (pdfjsLib) {
     // 'pdfjs-dist/build/pdf.worker';
 }
 const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
-const CSS_UNITS = 96.0 / 72.0
 // import { zoomElement } from '../assets/js/hammer'
 export default {
     name: 'pdfView',
-    props: ['tagIds', 'isMessageRecord','fileName', "knowledgeItem",'textWatermarkStr'],
+    props: ['tagIds', 'isMessageRecord','textWatermarkStr'],
     data () {
         return {
             url: '',
@@ -96,40 +102,9 @@ export default {
             },
             isTouchMoved: false,
             transformSalce: null,
-            defaultTransform:0.8,
             isPC: false,
             handScale: 'auto',
-            scaleList: [
-                {
-                    label: '自动缩放',
-                    value: 'auto'
-                },
-                {
-                    label: '实际比例',
-                    value: 'reality'
-                },
-                {
-                    label: '100%',
-                    value: 1
-                },
-                {
-                    label: '120%',
-                    value: 1.2
-                },
-                {
-                    label: '150%',
-                    value: 1.5
-                },
-                {
-                    label: '170%',
-                    value: 1.7
-                }
-                ,
-                {
-                    label: '200%',
-                    value: 2
-                }
-            ],
+            scaleList: [],
             scrollTop: 0,
             scrollLeft: 0
         }
@@ -287,12 +262,12 @@ export default {
             const { pdfPage, pageNo, dom } = page;
             // dom 元素已存在，无须重新渲染，直接返回
             if ((dom && dom.children.length != 0) || page.loading) {
-              return;
+                return;
             }
             page.loading = true
             const viewport = pdfPage.getViewport({
-              scale: this.scale,
-              rotation: this.rotation,
+                scale: this.scale,
+                rotation: this.rotation,
             });
             // 创建新的canvas
             const canvas = document.createElement('canvas');
@@ -368,7 +343,7 @@ export default {
                                 }
                               }
                             }
-                            if (rectdom.children && rectdom.children.length > 0) {
+                            if (rectdom.children.length > 0) {
                                 pageDom.appendChild(rectdom)
                             }
                         }
@@ -385,10 +360,6 @@ export default {
                 page.dom = await pageDom;
                 page.loading = false
                 this.contentView.appendChild(pageDom);
-                let pdf_view = document.getElementsByClassName('pdf_view');
-                if (pdf_view && pdf_view[0]){
-                  pdf_view[0].style.backgroundImage = 'none'
-                }
                 if (this.transformSalce !== null) {
                     this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
                 }
@@ -455,7 +426,7 @@ export default {
                 startNum = Math.ceil(scrollTop / (that.pageSize.height + that.PAGE_INTVERVAL))
                 endNum = startNum + Math.ceil(height / (that.pageSize.height + that.PAGE_INTVERVAL))
             }
-            for (let pageIndex = startNum; pageIndex <= endNum; pageIndex++) {
+            for (let pageIndex = startNum; pageIndex < endNum; pageIndex++) {
                 if (pageIndex > 0 && pageIndex <= that.pages.length) {
                     that.loadPdfData(pageIndex)
                 }
@@ -560,7 +531,7 @@ export default {
                 this.currentPage = 0
                 if (!this.isPC) {
                     this.$toast({
-                        message: '当前已经是第一段了',
+                        message: this.$t('dragonCommon.firstParagraph'),
                         duration: 2000,
                     })
                     return
@@ -579,7 +550,7 @@ export default {
                 this.currentPage = this.tagIds.length - 1
                 if (!this.isPC) {
                     this.$toast({
-                        message: '当前已经是最后一段了',
+                        message: this.$t('dragonCommon.lastParagraph'),
                         duration: 2000,
                     })
                     return
@@ -818,15 +789,6 @@ export default {
             // Math.hypot()计算参数的平方根
             return Math.hypot(stop.x - start.x, stop.y - start.y);
         },
-        setupCanvas (canvas, width, height) {
-            const dpr = 1;
-            // const rect = canvas.getBoundingClientRect();
-            canvas.width = width
-            canvas.height = height
-            const ctx = canvas.getContext('2d');
-            ctx?.scale(dpr, dpr);
-            return ctx;
-        },
         changeScale (value) {
             if (value == 'zoom') {
                 this.handScale = 'auto'
@@ -848,164 +810,6 @@ export default {
             this.contentView.style.transform = 'scale(' + this.transformSalce + ')';
             // this.getpdfResloutePage(this.cachePdf[0])
         },
-        //添加水印
-        watermark() {
-          //默认设置
-          var defaultSettings = {
-            watermark_txt:"",
-            watermark_x: 0,//水印起始位置x轴坐标
-            watermark_y: 0,//水印起始位置Y轴坐标
-            watermark_rows: 0,//水印行数
-            watermark_cols: 0,//水印列数
-            watermark_x_space: 40,//水印x轴间隔
-            watermark_y_space: 60,//水印y轴间隔
-            watermark_color: 'black',//水印字体颜色
-            watermark_alpha: .3,//水印透明度
-            watermark_fontsize: 12,//水印字体大小
-            watermark_font: '微软雅黑',//水印字体
-            watermark_width: 100,//水印宽度
-            watermark_height: 80,//水印长度
-            watermark_angle: 20,//水印倾斜度数***
-            visitorWatermark_txt:""
-          };
-          if(this.knowledgeItem.textWatermarkValue){
-            defaultSettings.watermark_txt = this.knowledgeItem.textWatermarkValue;
-          }
-          if (this.knowledgeItem.visitorWatermarkValue){
-            defaultSettings.visitorWatermark_txt = this.knowledgeItem.visitorWatermarkValue
-          }
-          //采用配置项替换默认值，作用类似jquery.extend
-          if (arguments.length === 1 && typeof arguments[0] === "object") {
-            console.log("arguments = " + JSON.stringify(arguments[0]));
-            // 获取参数配置
-            var src = arguments[0];
-            for (let key in src) {
-              if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
-                continue;
-              else if (src[key])
-                defaultSettings[key] = src[key];
-            }
-          }
-          var oTemp = document.createDocumentFragment();
-          //获取页面最大宽度
-          console.debug('pdf_view',document.getElementById('pdf_view'))
-          let scrollWidth = document.getElementById('pdf_view').scrollWidth;
-          let clientWidth = document.getElementById('pdf_view').clientWidth;
-          var page_width = Math.max(scrollWidth, clientWidth);
-
-          var cutWidth = page_width * 0.0150;
-
-          page_width = page_width - cutWidth;
-
-          //获取页面最大高度
-          let height = parseInt(this.totalPageCount * this.pageSize.height)
-          var page_height = Math.max(document.getElementById('pdf_container_view').scrollHeight,height);
-
-          console.debug('page_height',page_height,this.totalPageCount * this.pageSize.height);
-
-          // var page_height = document.body.scrollHeight+document.body.scrollTop;
-
-          //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
-
-          if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings
-              .watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space *
-              (defaultSettings.watermark_cols - 1)) > page_width)) {
-            defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings
-                .watermark_x_space) / (defaultSettings.watermark_width + defaultSettings
-                .watermark_x_space));
-            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x -
-                defaultSettings
-                    .watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
-          }
-
-          //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
-
-          if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings
-
-              .watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (
-
-              defaultSettings.watermark_rows - 1)) > page_height)) {
-
-            defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height -
-
-                defaultSettings
-
-                    .watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
-
-            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) -
-
-                defaultSettings
-
-                    .watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
-
-          }
-
-          var x;
-
-          var y;
-
-          for (var i = 0; i < defaultSettings.watermark_rows; i++) {
-            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
-            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
-              x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
-
-              var mask_div = document.createElement('div');
-              mask_div.id = 'mask_div' + i + j;
-              mask_div.className = 'mask_div';
-
-              //注意看这里加了图片水印
-              mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-              mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-              mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-              mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-              mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
-              mask_div.style.visibility = "";
-              mask_div.style.position = "absolute";
-              //奇偶行错开，这样水印就不对齐，显的不呆板
-              console.debug('x',x)
-              if (i % 2 != 0) {
-                mask_div.style.left = x + 'px';
-                if (j % 2 != 0 && this.knowledgeItem.visitorWatermarkValue){
-                  mask_div.appendChild(document.createTextNode(defaultSettings.visitorWatermark_txt));
-                } else {
-                  if (!this.knowledgeItem.textWatermarkValue){
-                    mask_div.appendChild(document.createTextNode(defaultSettings.visitorWatermark_txt));
-                  } else {
-                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
-                  }
-                }
-              } else {
-                mask_div.style.left = x + 'px';
-                if (j % 2 != 0 && this.knowledgeItem.textWatermarkValue){
-                  mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
-                } else {
-                  if (!this.knowledgeItem.visitorWatermarkValue){
-                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
-                  } else {
-                    mask_div.appendChild(document.createTextNode(defaultSettings.visitorWatermark_txt));
-                  }
-                }
-              }
-
-              mask_div.style.top = y + 'px';
-              mask_div.style.overflow = "hidden";
-              mask_div.style.zIndex = "9999";
-              mask_div.style.pointerEvents = 'none'; //让水印不遮挡页面的点击事件
-              mask_div.style.opacity = defaultSettings.watermark_alpha;
-              mask_div.style.fontSize = defaultSettings.watermark_fontsize;
-              mask_div.style.fontFamily = defaultSettings.watermark_font;
-              mask_div.style.color = defaultSettings.watermark_color;
-              mask_div.style.textAlign = "center";
-              mask_div.style.width = defaultSettings.watermark_width + 'px';
-              mask_div.style.height = defaultSettings.watermark_height + 'px';
-              mask_div.style.display = "block";
-              oTemp.appendChild(mask_div);
-            }
-          }
-          let pageDom = document.getElementById('pdf_container_view')
-          pageDom.appendChild(oTemp);
-
-      },
     },
     computed: {
         perviewUrl () {
@@ -1033,18 +837,16 @@ export default {
                 if (value && value.length) {
                     // 在 pdf_view 下创建 所有canvs的容器
                     this.contentView = document.createElement('div')
-                    this.contentView.setAttribute('id','contentView')
                     this.contentView.style.transformOrigin = '0px 0px 0px'
                     this.contentView.setAttribute('id','contentView');
-
-                  this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res => {
+                    this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res => {
                         // res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"64590ce1eb1320043401cc90","knowledgeId":"64590cd5017b461d67e282e1","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":2,"total":5,"pageHeight":841.8898,"pageWidth":595.30396,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/10/53/20/64590ce0eb1320043401cc7b/2.pdf","extractInfo":{"location":[89.32981,638.1907,415.15512,98.63251],"content":":北京地铁 13\r号线 :藤黄\r色 :西直门站—\r东直门站 :17 :41.\r5 :6\r准\rB :2002年\r09月\r28日 ","lines":[{"content":":北京地铁 13\r号线 ","location":[89.32981,638.1907,99.44599,98.63251]},{"content":":藤黄\r色 ","location":[188.7758,638.1907,46.79959,98.63251]},{"content":":西直门站—\r东直门站 ","location":[235.5754,638.1907,86.09996,98.63251]},{"content":":17 ","location":[321.67535,638.1907,36.200012,98.63251]},{"content":":41.\r5 ","location":[357.87537,638.1907,39.400696,98.63251]},{"content":":6\r准\rB ","location":[397.27606,638.1907,41.099,98.63251]},{"content":":2002年\r09月\r28日 ","location":[438.37506,638.1907,66.10986,98.63251]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"6475eab868110215ab821a80","knowledgeId":"6475e7eac724c54c46cbfa2d","mainId":"5ecf2fcd704541149201ab9c1c31162d","page":0,"total":1,"pageHeight":0.0,"pageWidth":0.0,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/5ecf2fcd704541149201ab9c1c31162d/2023/05/30/08/23/20/6475eab63339db423f26b196/0.html","extractInfo":{"location":null,"content":"产品:系统配置,产品型号:存储,VX30:4G+16G,VX50:16G+256G","lines":null,"tagId":"6475eab868110215ab821a80"}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"6475e9393339db423f26af01","knowledgeId":"6475e44fc724c54c46cbfa21","mainId":"5ecf2fcd704541149201ab9c1c31162d","page":2,"total":2,"pageHeight":510.25,"pageWidth":1559.05,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/5ecf2fcd704541149201ab9c1c31162d/2023/05/30/08/00/29/6475e55d3339db423f26a9b8/2.pdf","extractInfo":{"location":[327.70532,288.0498,414.9734,12.241608],"content":"三、指示灯状态说明1.白色常亮：开机/开机中2.红色常亮：待机3.白色呼吸：息屏4.红色闪烁：升级1.LAN:通过网线连接到主机的Camera端口2.电源开关:电源切换开关","lines":[{"content":"三、指示灯状态说明","location":[634.3203,288.0498,108.3584,12.0]},{"content":"1.白色常亮：开机/开机中","location":[634.3203,320.08978,108.23407,9.0]},{"content":"2.红色常亮：待机","location":[634.3204,341.3298,78.597046,9.0]},{"content":"3.白色呼吸：息屏","location":[634.32043,362.45282,78.597046,9.0]},{"content":"4.红色闪烁：升级","location":[634.3205,383.6928,78.597046,9.0]},{"content":"1.LAN:通过网线连接到主机的","location":[327.70535,291.2914,144.35995,9.0]},{"content":"Camera端口","location":[327.70532,306.88843,55.322998,9.0]},{"content":"2.电源开关:电源切换开关","location":[482.74832,291.2914,105.36301,9.0]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // if(value.length === 1) {
-                        //     this.$refs.pdfView.style.height = 'calc(100% - 50px)'
+                        //     this.$refs.pdfView.style.height = 'calc(100% - 50px)' 
                         // }
                         // res.data = {
                         //     "data": [
@@ -1219,23 +1021,18 @@ export default {
                                             "Content-Type": "application/json",
                                         },
                                     }).then(res => {
-                                        // 使用原声请求方式 axios会带有不需要的请求头
+                                        // 使用原声请求方式 axios会带有不需要的请求头 
                                         let xhr = new XMLHttpRequest();
                                         xhr.open('GET', res.data || res.bodyText, true);
                                         // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
                                         xhr.onload = ({ currentTarget }) => {
                                             // 请求完成
                                             if (currentTarget.status === 200) {   // 返回200
-                                                let pdf_view = document.getElementsByClassName('pdf_view');
-                                                if (pdf_view && pdf_view[0]){
-                                                  pdf_view[0].style.backgroundImage = 'none'
-                                                }
                                                 this.contentView.innerHTML = currentTarget.response
                                                 this.contentView.style.padding = '10px'
                                                 // this.contentView.style.position = 'relative'
                                                 this.$refs.pdfView.style.backgroundColor = '#FFFFFF'
                                                 this.$refs.pdfView.appendChild(this.contentView)
-
                                                 let allTr = Array.from(this.$refs.pdfView.getElementsByTagName('tr'))
                                                 this.allTr = []
                                                 for (let index = 0; index < allTr.length; index++) {
@@ -1252,7 +1049,7 @@ export default {
                             }
                         } else {
                             let div = document.createElement('div')
-                            div.innerText = '文件加载异常'
+                            div.innerText = this.$t('dragonCommon.fileloadException')
                             this.contentView.appendChild(div)
                             this.$refs.pdfView.appendChild(this.contentView)
                         }
@@ -1264,6 +1061,38 @@ export default {
         }
     },
     mounted () {
+        this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
+        this.scaleList = [
+            {
+                label: this.$t('dragonCommon.scaleAuto'),
+                value: 'auto'
+            },
+            {
+                label: this.$t('dragonCommon.scaleReality'),
+                value: 'reality'
+            },
+            {
+                label: '100%',
+                value: 1
+            },
+            {
+                label: '120%',
+                value: 1.2
+            },
+            {
+                label: '150%',
+                value: 1.5
+            },
+            {
+                label: '170%',
+                value: 1.7
+            }
+            ,
+            {
+                label: '200%',
+                value: 2
+            }
+        ]
         if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
             this.isPC = false
         } else {
@@ -1274,13 +1103,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import "../assets/less/variables.less";
 .pdf_view {
     width: 100%;
     // height: calc(100% - 110px);
     height: 100%;
     overflow: auto;
-    //overflow-y: scroll;
-    background-color: #f5f7fb;
+    background-color: @background-content-color;
     // margin-bottom: 60px;
     box-sizing: border-box;
     // position: relative;
@@ -1321,7 +1150,7 @@ export default {
         bottom: 0px;
         left: 0;
         z-index: 999;
-        background: #ffffff;
+        background: @background-color-light;
 
         .prev,
         .next {
@@ -1335,13 +1164,13 @@ export default {
         }
 
         .prev {
-            background: #F2F5FA;
-            color: #000;
+            background: @background-content-color;
+            color: @font-primary-color;
         }
 
         .next {
-            background: #366aff;
-            color: #ffffff;
+            background: @primary-color;
+            color: @font-primary-light-color;
         }
     }
 
@@ -1359,7 +1188,7 @@ export default {
         align-items: center;
         justify-content: center;
         height: 50px;
-        background-color: white;
+        background-color: @background-color-light;
         box-shadow: 0px 0px 18px 0px rgba(29, 55, 129, 0.07);
         border-radius: 5px;
         z-index: 1000;
@@ -1371,21 +1200,21 @@ export default {
         }
 
         /deep/.el-pager {
-            background: #EDF0F6;
+            background: @background-color-pagination;
             border-radius: 15px;
         }
 
         /deep/.el-pagination.is-background .btn-next {
             width: 30px;
             height: 30px;
-            background: #EDF0F6;
+            background: @background-color-pagination;
             border-radius: 50%;
         }
 
         /deep/.el-pagination .btn-next {
             width: 30px;
             height: 30px;
-            background: #EDF0F6;
+            background: @background-color-pagination;
             border-radius: 50%;
             padding-left: 0;
             margin-left: 5px;
@@ -1394,7 +1223,7 @@ export default {
         /deep/.el-pagination .btn-prev {
             width: 30px;
             height: 30px;
-            background: #EDF0F6;
+            background: @background-color-pagination;
             border-radius: 50%;
             padding-right: 0;
             margin-right: 5px;
@@ -1406,12 +1235,12 @@ export default {
         }
 
         /deep/.el-pager li {
-            background: #EDF0F6;
+            background: @background-color-pagination;
             height: 30px;
             min-width: 30px;
             line-height: 30px;
             font-size: 12px;
-            color: #717b90;
+            color: @font-pagination-color;
         }
 
         /deep/.el-pager li:first-child {
@@ -1428,15 +1257,15 @@ export default {
             width: 30px;
             height: 30px;
             min-width: 30px;
-            background: #366AFF;
-            border: 3px solid #A1B9FF;
+            background: @primary-color;
+            border: 3px solid @border-color-copy;
             border-radius: 50%;
             line-height: 24px;
-            color: white;
+            color: @font-primary-light-color;
         }
 
         /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-            background: #366AFF;
+            background: @primary-color;
         }
     }
 
@@ -1446,7 +1275,7 @@ export default {
         position: absolute;
         top: 50px;
         left: 0;
-        background: #ffffff;
+        background: @background-color-light;
         display: flex;
         align-items: center;
         padding: 0 10px;
@@ -1505,4 +1334,4 @@ export default {
     100% {
         background: rgba(255, 136, 0, 0.3);
     }
-}</style>
+}</style>

package/src/components/popup.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="popUp">
     <div class="topBtn">
-      <span class="cancel" @click="closeBtn">取消</span>
-      <span class="sure" @click="sure">确定</span>
+      <span class="cancel" @click="closeBtn">{{ $t('dragonCommon.cancel') }}</span>
+      <span class="sure" @click="sure">{{ $t('dragonCommon.confirm') }}</span>
     </div>
     <slot name="popup-header" class="popup-header"></slot>
     <div class="popup-content">
       <div
-          class="filter-item"
-          v-for="(item,index) in options"
-          :key="index"
-          @click="checked(item,index)"
+        class="filter-item"
+        v-for="(item, index) in options"
+        :key="index"
+        @click="checked(item, index)"
       >
-        <div :class="[checkIdList.includes(item[props.value]) && 'setColor', 'label']">{{item[props.label]}}</div>
+        <div :class="[checkIdList.includes(item[props.value]) && 'setColor', 'label']">{{ item[props.label] }}</div>
       </div>
     </div>
     <div class="popup-footer">
@@ -164,6 +164,7 @@ export default {
     },
   },
   mounted() {
+    this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
     console.debug('options',this.options)
 
   }
@@ -171,6 +172,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import "../assets/less/variables.less";
+
 .popup-content {
   /*padding-top: 8px;*/
   height: 240px;
@@ -184,7 +187,7 @@ export default {
     height: 48px;
     cursor: pointer;
     .setColor {
-      color: #366aff;
+      color: @font-primary-accent-color;
     }
     .label {
       display: block;
@@ -205,11 +208,11 @@ export default {
     box-sizing: border-box;
     padding: 0 20px;
     .cancel {
-      color: #606266;
+      color: @font-secondary-color;
       cursor:pointer;
     }
     .sure {
-      color: #366aff;
+      color: @font-primary-accent-color;
       cursor: pointer;
     }
   }
@@ -221,8 +224,8 @@ export default {
   justify-content: center;
   align-items: center;
   width: 100%;
-  color: #366aff;
-  background: #eff2f5;
+  color: @font-primary-accent-color;
+  background: @background-color-btn-cancel;
   /*border-radius: 28px;*/
 }
 </style>