emacroh5lib 1.0.30 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.30",
+  "version": "1.0.33",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js",
   "scripts": {
@@ -106,4 +106,4 @@
     "xlsx": "^0.18.5",
     "xlsx-style": "^0.8.13"
   }
-}
+}

package/src/utilities/File.ts

@@ -6,7 +6,7 @@ import createTaskQueue from 'sync-task-queue'
 
 export namespace EMacro {
 
-    export const version = "1.0"
+    export const version = "1.1"
 
     export class File {
 
@@ -59,9 +59,7 @@ export namespace EMacro {
         }
 
         // 文件上传
-        public static async uploadFiles(files, postFunc, chunkSize: number = 1024 * 1024 * 1, errFunc = (err) => {
-            console.error(err);
-        }) {
+        public static async uploadFiles(files, chunkFileHandle, fileComplete = (file) => { }, completeHandle = (files) => { }, chunkSize: number = 1024 * 1024 * 1) {
 
             if (files[0].fileName == "" || files[0].fileSize == "" || files[0].fileSize == 0) {
                 throw new Error("文件异常")
@@ -76,7 +74,7 @@ export namespace EMacro {
                 for (let index in fileChunks) {
                     let chunk = fileChunks[Number(index)]
                     const base64 = await File.getBase64(chunk) as string
-                    let data = {
+                    let chunkFile = {
                         'chunkIndex': Number(index), // 分片位置
                         'chunksLength': chunksLength, // 分片长度
                         'sliceSize': sliceSize, // 分片大小
@@ -86,12 +84,14 @@ export namespace EMacro {
                         'data': base64.split(';base64,')[1], // 文件数据 
                         'lastModifiedDate': file.lastModifiedDate,  // 最后修改时间
                         'md5': md5,
+                        'index': i,
                         'dataType': 'base64' // 数据的类型
                     }
-                    await postFunc(data)
+                    await chunkFileHandle(chunkFile)
                 }
-
+                fileComplete(file);
             }
+            completeHandle(files)
         }
 
         public static selectFile(options: any = { multiple: true, accept: "*/*" }): Promise<FileList | null> {
@@ -137,6 +137,23 @@ export namespace EMacro {
 
     }
 
+    export const fullScreen = (docElm: any = null) => {
+        if (docElm === null) {
+            docElm = document.documentElement
+        }
+        if (docElm.requestFullscreen) {
+            docElm.requestFullscreen();
+        } else if (docElm.mozRequestFullScreen) {
+            docElm.mozRequestFullScreen();
+        } else if (docElm.msRequestFullscreen) {
+            docElm.msRequestFullscreen();
+        } else if (docElm.oRequestFullscreen) {
+            docElm.oRequestFullscreen();
+        } else if (docElm.webkitRequestFullScreen) {
+            docElm.webkitRequestFullScreen();
+        }
+    }
+
 }
 
 

package/src/views/ImageViewer/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
         <div class="duo-viewer-mask">
-            <img ref="duoViewerImage" :src="realSrc" alt="image" class="duo-viewer-mask__image" />
+            <img ref="duoViewerImage" :src="realSrc" :alt="alt" class="duo-viewer-mask__image" />
         </div>
         <div class="duo-viewer-footer">
             <div class="duo-viewer-footer__title">{{ realName }}</div>
@@ -29,7 +29,7 @@
                     ? 'duo-viewer-footer__navbar-thumbnail-item viewer-current'
                     : 'duo-viewer-footer__navbar-thumbnail-item'
                 ">
-                            <img data-viewer-action="select" :data-viewer-action-index="i" :src="item" alt="image"
+                            <img data-viewer-action="select" :data-viewer-action-index="i" :src="item" :alt="alt"
                                 class="duo-viewer-footer__navbar-thumbnail-image" />
                         </div>
                     </div>
@@ -43,7 +43,9 @@
 </template>
 
 <script>
-    import "./style/css/index.css";
+
+    // 需优化问题,图片很多时卡顿, 增加页面宽高自适应按钮
+    // 缩放时变形
 
     export default {
         name: "ImageViewer",
@@ -77,11 +79,21 @@
             },
             shrink: {
                 type: Number,
-                default: .4,
+                default: .6,
             },
             enlarge: {
                 type: Number,
                 default: .6,
+            },
+            alt: {
+                type: String,
+                default: "加载失败...",
+            },
+            loadComplete: {
+                type: Function,
+                default: (on, event) => {
+                    console.log("loadComplete", on, event);
+                }
             }
         },
         computed: {
@@ -133,7 +145,8 @@
                     const imageObject = new Image();
                     promises.push(
                         new Promise((resolve) => {
-                            imageObject.onload = function () {
+                            imageObject.onload = function (event) {
+
                                 $this.listDataCache[i] = {
                                     transform: {
                                         scaleX: "1",
@@ -148,22 +161,38 @@
                                     height: `${imageObject.height}px`,
                                 };
 
-                                resolve("");
+                                resolve(event);
+                                $this.loadComplete("onload", event)
                                 imageObject.onload = null
                             };
+
+                            imageObject.onerror = function (event) {
+                                resolve(event);
+                                $this.loadComplete("onerror", event)
+                                imageObject.onerror = null
+                            };
+
                             imageObject.src = item;
                         })
                     );
                 });
 
-                Promise.all(promises).then((data) => {
+                // Promise.all(promises).then((data) => {
+                //     this.image = this.$refs["duoViewerImage"];
+                //     this.initDrag();
+                //     const { width, height } = $this.listDataCache[index];
+                //     $this.setStyleByName($this.image, "width", width);
+                //     $this.setStyleByName($this.image, "height", height);
+                // })
+
+                Promise.race(promises).then((data) => {
                     this.image = this.$refs["duoViewerImage"];
                     this.initDrag();
                     const { width, height } = $this.listDataCache[index];
-
                     $this.setStyleByName($this.image, "width", width);
                     $this.setStyleByName($this.image, "height", height);
-                });
+                })
+
             },
             // Reset position
             resetPosition() {
@@ -335,8 +364,8 @@
                 if (h <= 20 && type === "out") return;
 
                 if (type === "out") {
-                    this.setStyleByName(image, "width", `${w * this.shrink}px`);
-                    this.setStyleByName(image, "height", `${h * this.shrink}px`);
+                    this.setStyleByName(image, "width", `${w * (1 - this.shrink)}px`);
+                    this.setStyleByName(image, "height", `${h * (1 - this.shrink)}px`);
                 } else {
                     this.setStyleByName(image, "width", `${w * (1 + this.enlarge)}px`);
                     this.setStyleByName(image, "height", `${h * (1 + this.enlarge)}px`);
@@ -528,5 +557,6 @@
     };
 </script>
 
-<style>
+<style lang="less" scoped>
+    @import "./style/css/index.css";
 </style>

package/src/views/TestView/index.vue

@@ -10,8 +10,6 @@
       :currentIndex="currentIndex" />
 
 
-
-
     <div class="list" id="list">
 
       <DragResizeView v-for="(rect, index) in rects" :key="index" :isStorage="true" :name="rect.name" :w="rect.width"
@@ -65,6 +63,7 @@ export default class TestView extends Vue {
 
   public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
   public srcList: Array<String> = [
+    "http://172.16.1.83:18019/EMacroApi/GetFile?type=0&path=C:\\MES\\EMacroAndroidServer_Windows_v1.1\\EMacroAssets\\file\\%E6%97%A0%E6%A0%87%E9%A2%98.png",
     "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
     "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
     "https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
@@ -209,8 +208,7 @@ export default class TestView extends Vue {
   }
 
   public selectFile(e) {
-
-
+ 
     EMacro.File.selectFile().then((files) => {
       EMacro.File.uploadFiles(files, file => {