emacroh5lib 1.0.39 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.39",
+  "version": "1.0.42",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js",
   "scripts": {

package/src/index.ts

@@ -4,11 +4,12 @@ import { EMacro } from "./utilities/File";
 
 import FileViewer from './views/FileViewer/index.vue'
 import ImageViewer from './views/ImageViewer/index.vue'
+import VideoViewer from './views/VideoViewer/index.vue'
 import DragResizeView from './views/DragResizeView/index.vue'
 import DragView from './views/Draw/index.vue'
 import MessageBoxTest from "@/components/MessageBoxTest";
 
-const components = [FileViewer, ImageViewer, DragResizeView];
+const components = [FileViewer, ImageViewer, VideoViewer, DragResizeView];
 
 const install = (Vue: any) => {
   if ((install as any).installed) return;
@@ -23,12 +24,12 @@ if (typeof window !== 'undefined' && (window as any).Vue) {
   install((window as any).Vue);
 }
 
- 
+
 // import HelloWorld from "@/components/HelloWorld.vue";
 // import HelloWorld from "@/components/index";
 
- 
+
 
 
 export default {}
-export { EMacro,FileViewer, ImageViewer, DragResizeView }
+export { EMacro, FileViewer, ImageViewer, VideoViewer, DragResizeView }

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="alt" 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>
@@ -178,7 +178,7 @@
 
                     $this.image = $this.$refs["duoViewerImage"];
                     $this.initDrag();
-                    this.$emit("loadComplete");
+                    $this.$emit("loadComplete");
                     const { width, height } = $this.listDataCache[index];
                     $this.setStyleByName($this.image, "width", width);
                     $this.setStyleByName($this.image, "height", height);
@@ -191,13 +191,17 @@
                     const { width, height } = $this.listDataCache[index];
                     $this.setStyleByName($this.image, "width", width);
                     $this.setStyleByName($this.image, "height", height);
+
+                    setTimeout(() => {
+                        $this.resetZoom();
+                    }, 100);
                 })
 
             },
             // Reset position
             resetPosition() {
-                let image = this.image,
-                    oldTransform = this.getCurrentTransform(image);
+                let image = this.image;
+                let oldTransform = this.getCurrentTransform(image);
 
                 this.setStyleByName(image, "top", "50%");
                 this.setStyleByName(image, "left", "50%");
@@ -219,13 +223,26 @@
             },
 
             // Reset zoom action
-            resetZoom() {
+            resetZoom(adaptive = true) {
                 let image = this.image;
                 const imageObject = new Image();
 
                 imageObject.src = this.list[this.index];
 
-                const { width, height } = imageObject;
+                let { width, height } = imageObject;
+
+                if (adaptive) {
+                    let rate = 1
+                    if (width > height) {
+                        rate = width / document.body.clientWidth
+                    }
+                    else {
+                        rate = height / document.body.clientHeight
+                    }
+
+                    width = width / rate
+                    height = height / rate
+                }
 
                 this.setStyleByName(image, "width", `${width}px`);
                 this.setStyleByName(image, "height", `${height}px`);
@@ -310,11 +327,17 @@
                 }
                 this.judgeThumbnailListMove(lastIndex, this.index);
 
-                this.setStyleByName(this.image, "width", this.currentData.width);
-                this.setStyleByName(this.image, "height", this.currentData.height);
-                this.setStyleByName(this.image, "left", this.currentData.left);
-                this.setStyleByName(this.image, "top", this.currentData.top);
-                this.setTransform(this.image, this.currentData.transform);
+                setTimeout(() => {
+
+                    this.setStyleByName(this.image, "width", this.currentData.width);
+                    this.setStyleByName(this.image, "height", this.currentData.height);
+                    this.setStyleByName(this.image, "left", this.currentData.left);
+                    this.setStyleByName(this.image, "top", this.currentData.top);
+                    this.setTransform(this.image, this.currentData.transform);
+
+                    this.resetZoom();
+                    this.resetPosition();
+                }, 100);
             },
             // To judge thumbnail list move
             judgeThumbnailListMove(lastIndex, index) {
@@ -524,7 +547,7 @@
                         this.zoom("out");
                         break;
                     case "one-to-one":
-                        this.resetZoom();
+                        this.resetZoom(false);
                         break;
                     case "prev":
                         this.switchAction("prev");

package/src/views/TestView/index.vue

@@ -68,16 +68,18 @@ 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",
-    // "https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
-    // "https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
-    // "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
-    "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4",
-    "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\ker.mp4",
-    "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\video2.mp4",
+    "http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\看板整体图.png",
+    "http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\060 广西电子商务公共服务平台大数据中心.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",
+    "https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
+    // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4",
+    // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\ker.mp4",
+    // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\video2.mp4",
+    // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\看板整体图.png",
   ] // 图片查看器数据集
 
   public src: String = "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4"
@@ -89,8 +91,8 @@ export default class TestView extends Vue {
   public listHeight = 0;
 
   public handleOpen() {
-    // this.showViewer = true;
-    this.showVideoViewer = true;
+    this.showViewer = true;
+    // this.showVideoViewer = true;
   }
   public openCallback() { } // 打开时的回调
   public closeCallback() { } // 关闭时的回调