emacroh5lib 1.0.67 → 1.0.70

package/src/views/TestView/index.vue

@@ -2,6 +2,7 @@
   <div class="app-container">
 
     <button @click="handleOpen">打开查看器</button>
+    <button @click="handleOpen2">打开模型查看器查看器</button>
     <button @click="exportExcel($event)">透过Excel模板导出表格</button>
     <button @click="selectFile($event)">选择文件</button>
     <button @click="fileMD5($event)">文件MD5</button>
@@ -28,299 +29,315 @@
       <div class="filler2">111</div>
     </Draw>
 
-    <video-viewer :list="srcList" :show.sync="showVideoViewer" width="80%" height="80%"/>
-
+    <video-viewer :list="srcList" :show.sync="showVideoViewer" width="80%" height="80%" />
+    <model-viewer :list="srcList" :show.sync="showModelViewer" width="80%" height="80%" />
 
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import ImageViewer from "@/views/ImageViewer/index.vue";
-import VideoViewer from "@/views/VideoViewer/index.vue";
-import DragResizeView from "@/views/DragResizeView/index.vue";
-import Draw from "@/views/Draw/index.vue";
-
-import { formatJson, export_json_to_excel, number_to_excel, testToExcel } from "./Export2Excel"
-import { EMacro } from "../../utilities/File";
-
-import axios from 'axios'
-import Cookie from 'js-cookie'
-
-import LAY_EXCEL from 'lay-excel';
-
-import BMF from 'browser-md5-file';
-import { info } from "console";
-
-
-@Component({
-  components: {
-    ImageViewer,
-    DragResizeView,
-    VideoViewer,
-    Draw
-  },
-  mounted() {
-
-  }
-})
-export default class TestView extends Vue {
-
-  public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
-  public srcList: Array<String> = [
-    "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"
-
-  public showViewer: Boolean = false // 是否打开图片查看器
-  public showVideoViewer: Boolean = false // 是否打开图片查看器
-
-  public listWidth = 0;
-  public listHeight = 0;
-
-  public handleOpen() {
-    this.showViewer = true;
-    // this.showVideoViewer = true;
-  }
-  public openCallback() { } // 打开时的回调
-  public closeCallback() { } // 关闭时的回调
-
-  public rects = [
-    {
-      'name': "test-0",
-      'width': 200,
-      'height': 150,
-      'top': 10,
-      'left': 10,
-      'draggable': true,
-      'resizable': true,
-      'minw': 10,
-      'minh': 10,
-      'axis': 'both',
-      'parentLim': true,
-      'snapToGrid': false,
-      'aspectRatio': false,
-      'zIndex': 1,
-      'color': '#EF9A9A',
-      'active': false
-    },
-    {
-      'name': "test-1",
-      'width': 200,
-      'height': 150,
-      'top': 170,
-      'left': 220,
-      'draggable': true,
-      'resizable': true,
-      'minw': 10,
-      'minh': 10,
-      'axis': 'both',
-      'parentLim': true,
-      'snapToGrid': false,
-      'aspectRatio': false,
-      'zIndex': 1,
-      'color': '#E6C27A',
-      'active': false,
-      'class': 'box-shaddow'
+  import { Component, Vue } from "vue-property-decorator";
+  import ImageViewer from "@/views/ImageViewer/index.vue";
+  import VideoViewer from "@/views/VideoViewer/index.vue";
+  import ModelViewer from "@/views/ModelViewer/index.vue";
+  import DragResizeView from "@/views/DragResizeView/index.vue";
+  import Draw from "@/views/Draw/index.vue";
+  import { formatJson, export_json_to_excel, number_to_excel, testToExcel } from "./Export2Excel"
+  import { EMacro } from "../../utilities/File";
+  import axios from 'axios'
+  import Cookie from 'js-cookie'
+  import LAY_EXCEL from 'lay-excel';
+  import BMF from 'browser-md5-file';
+  import { info } from "console";
+
+
+  @Component({
+    components: {
+      ImageViewer,
+      DragResizeView,
+      VideoViewer,
+      ModelViewer,
+      Draw
     },
-    {
-      'name': "test-2",
-      'width': 200,
-      'height': 150,
-      'top': 10,
-      'left': 220,
-      'draggable': true,
-      'resizable': true,
-      'minw': 10,
-      'minh': 10,
-      'axis': 'both',
-      'parentLim': true,
-      'snapToGrid': false,
-      'aspectRatio': false,
-      'zIndex': 2,
-      'color': '#AED581',
-      'active': false
+    mounted() {
+
+    }
+  })
+  export default class TestView extends Vue {
+
+    public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
+    public srcList: Array<String> = [
+      "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 modelList: Array<Object> = [{
+      type: "obj",
+      name: "产品1",
+      mtl: "http://221.225.49.240:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\test.mtl",
+      obj: "http://221.225.49.240:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\test.obj"
     },
     {
-      'name': "test-3",
-      'width': 200,
-      'height': 150,
-      'top': 170,
-      'left': 10,
-      'draggable': true,
-      'resizable': true,
-      'minw': 10,
-      'minh': 10,
-      'axis': 'both',
-      'parentLim': true,
-      'snapToGrid': false,
-      'aspectRatio': false,
-      'zIndex': 3,
-      'color': '#81D4FA',
-      'active': false
-    }
-  ]
+      type: "obj",
+      name: "产品2",
+      mtl: "http://221.225.49.240:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\test.mtl",
+      obj: "http://221.225.49.240:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\test.obj"
+    },]
 
-  public exportExcel(e): void {
-    console.log('event', e);
+    public src: String = "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4"
 
-    // testToExcel(e)
-    // LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx')
+    public showViewer: Boolean = false // 是否打开图片查看器
+    public showVideoViewer: Boolean = false // 是否打开图片查看器
+    public showModelViewer: Boolean = false
 
+    public listWidth = 0;
+    public listHeight = 0;
 
-    // var list = [[null,1, 2, 3], [null,1, 2, "a撒地方打赏打发士大夫"]]
-    var list = {
-      "aaa1撒旦飞洒": [
-        [null, 1, 2, 3]
-      ],
-      "bbb1": [
-        [2, 1, 2, null]
-      ]
+    public handleOpen() {
+      this.showViewer = true;
+      // this.showVideoViewer = true;
     }
 
-    // 2. 使用批量设置样式函数 setExportCellStyle 对单元格维度的数据进行批量设置样式
-    // PS:注意这里是ARGB，前两位是透明度
-    LAY_EXCEL.setExportCellStyle(list, 'A1:Z1', {
-      s: {
-        border: {
-          top: { style: 'thick', color: { rgb: 'FFFF0000' } },
-          bottom: { style: 'thick', color: { rgb: 'FFFF0000' } },
-          left: { style: 'thick', color: { rgb: 'FFFF0000' } },
-          right: { style: 'thick', color: { rgb: 'FFFF0000' } }
-        },
-        fill: {
-          fgColor: {
-            rgb: "ffff00"
-          }
-        },
-        font: {
-          name: "楷体",
-          sz: 22,
-          color: {
-            rgb: "ff0000"
-          },
-          bold: true,
-          italic: false,
-          underline: false
-        },
+    public handleOpen2() {
+      this.showModelViewer = true;
+      // this.showVideoViewer = true;
+    }
+
+    public openCallback() { } // 打开时的回调
+    public closeCallback() { } // 关闭时的回调
+
+    public rects = [
+      {
+        'name': "test-0",
+        'width': 200,
+        'height': 150,
+        'top': 10,
+        'left': 10,
+        'draggable': true,
+        'resizable': true,
+        'minw': 10,
+        'minh': 10,
+        'axis': 'both',
+        'parentLim': true,
+        'snapToGrid': false,
+        'aspectRatio': false,
+        'zIndex': 1,
+        'color': '#EF9A9A',
+        'active': false
+      },
+      {
+        'name': "test-1",
+        'width': 200,
+        'height': 150,
+        'top': 170,
+        'left': 220,
+        'draggable': true,
+        'resizable': true,
+        'minw': 10,
+        'minh': 10,
+        'axis': 'both',
+        'parentLim': true,
+        'snapToGrid': false,
+        'aspectRatio': false,
+        'zIndex': 1,
+        'color': '#E6C27A',
+        'active': false,
+        'class': 'box-shaddow'
+      },
+      {
+        'name': "test-2",
+        'width': 200,
+        'height': 150,
+        'top': 10,
+        'left': 220,
+        'draggable': true,
+        'resizable': true,
+        'minw': 10,
+        'minh': 10,
+        'axis': 'both',
+        'parentLim': true,
+        'snapToGrid': false,
+        'aspectRatio': false,
+        'zIndex': 2,
+        'color': '#AED581',
+        'active': false
+      },
+      {
+        'name': "test-3",
+        'width': 200,
+        'height': 150,
+        'top': 170,
+        'left': 10,
+        'draggable': true,
+        'resizable': true,
+        'minw': 10,
+        'minh': 10,
+        'axis': 'both',
+        'parentLim': true,
+        'snapToGrid': false,
+        'aspectRatio': false,
+        'zIndex': 3,
+        'color': '#81D4FA',
+        'active': false
+      }
+    ]
+
+    public exportExcel(e): void {
+      console.log('event', e);
+
+      // testToExcel(e)
+      // LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx')
+
+      // var list = [[null,1, 2, 3], [null,1, 2, "a撒地方打赏打发士大夫"]]
+      var list = {
+        "aaa1撒旦飞洒": [
+          [null, 1, 2, 3]
+        ],
+        "bbb1": [
+          [2, 1, 2, null]
+        ]
       }
-    })
 
+      // 2. 使用批量设置样式函数 setExportCellStyle 对单元格维度的数据进行批量设置样式
+      // PS:注意这里是ARGB，前两位是透明度
+      LAY_EXCEL.setExportCellStyle(list, 'A1:Z1', {
+        s: {
+          border: {
+            top: { style: 'thick', color: { rgb: 'FFFF0000' } },
+            bottom: { style: 'thick', color: { rgb: 'FFFF0000' } },
+            left: { style: 'thick', color: { rgb: 'FFFF0000' } },
+            right: { style: 'thick', color: { rgb: 'FFFF0000' } }
+          },
+          fill: {
+            fgColor: {
+              rgb: "ffff00"
+            }
+          },
+          font: {
+            name: "楷体",
+            sz: 22,
+            color: {
+              rgb: "ff0000"
+            },
+            bold: true,
+            italic: false,
+            underline: false
+          },
+        }
+      })
+
+      LAY_EXCEL.exportExcel(list, '表格导出.xlsx', 'xlsx')
+    }
 
-    LAY_EXCEL.exportExcel(list, '表格导出.xlsx', 'xlsx')
-  }
+    public selectFile(e) {
 
-  public selectFile(e) {
+      EMacro.File.selectFile().then((files) => {
+        EMacro.File.uploadFiles(files, file => {
 
-    EMacro.File.selectFile().then((files) => {
-      EMacro.File.uploadFiles(files, file => {
+          file.savePath = "C:\\MES\\EMacroAndroidServer_Windows_v1.1\\EMacroAssets\\file\\" + file.fileName
 
-        file.savePath = "C:\\MES\\EMacroAndroidServer_Windows_v1.1\\EMacroAssets\\file\\" + file.fileName
+          let postData = { 'id': 0, 'message': '', 'action': 'uploadSOPFile', 'user': {}, 'data': file }
+          axios.post("http://121.228.113.68:8019/H5/prod/Command/requestVueData", postData, {
+            timeout: 6000,
+            headers: {
+              Authorization: "Basic RU1hY3JvOkVNYWNybw==",
+              "Content-Type": "application/json;charset=UTF-8",
+            }
+          }).then(data => {
 
-        let postData = { 'id': 0, 'message': '', 'action': 'uploadSOPFile', 'user': {}, 'data': file }
-        axios.post("http://121.228.113.68:8019/H5/prod/Command/requestVueData", postData, {
-          timeout: 6000,
-          headers: {
-            Authorization: "Basic RU1hY3JvOkVNYWNybw==",
-            "Content-Type": "application/json;charset=UTF-8",
-          }
-        }).then(data => {
+            console.log("上传返回", data);
 
-          console.log("上传返回", data);
+          }).catch(err => {
+            console.error("上传错误: ", err);
+          })
 
-        }).catch(err => {
-          console.error("上传错误: ", err);
         })
 
+      }).catch(err => {
+        console.error(err);
       })
 
-    }).catch(err => {
-      console.error(err);
-    })
-
-  }
-
-  activateEv(index) {
-    console.log("activateEv index", index);
-  }
+    }
 
-  deactivateEv(index) {
-    console.log("deactivateEv index", index);
-  }
+    activateEv(index) {
+      console.log("activateEv index", index);
+    }
 
-  changePosition(newRect, index) {
-    console.log("changePosition newRect", newRect);
-    console.log("changePosition index", index);
-  }
+    deactivateEv(index) {
+      console.log("deactivateEv index", index);
+    }
 
-  changeSize(newRect, index) {
-    console.log("changeSize newRect", newRect);
-    console.log("changeSize index", index);
-  }
+    changePosition(newRect, index) {
+      console.log("changePosition newRect", newRect);
+      console.log("changePosition index", index);
+    }
 
-  public fileMD5() {
+    changeSize(newRect, index) {
+      console.log("changeSize newRect", newRect);
+      console.log("changeSize index", index);
+    }
 
-    EMacro.File.selectFile().then(files => {
+    public fileMD5() {
 
-      if (files == null) {
-        return
-      }
+      EMacro.File.selectFile().then(files => {
 
-      EMacro.File.getFileMD5(files[0]).then(md5 => {
+        if (files == null) {
+          return
+        }
 
-        console.log("文件MD5", md5);
+        EMacro.File.getFileMD5(files[0]).then(md5 => {
 
-      })
+          console.log("文件MD5", md5);
 
+        })
 
-      // new MD5().update(buffer).digest()
 
+        // new MD5().update(buffer).digest()
 
-      // const hash = crypto
-      //   .createHash('md5')
-      //   .update(files[0], 'utf8')
-      //   .digest('hex');
 
-    })
+        // const hash = crypto
+        //   .createHash('md5')
+        //   .update(files[0], 'utf8')
+        //   .digest('hex');
 
+      })
 
 
-  }
 
-  public mounted() {
+    }
 
-    EMacro.getVideoScale("http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4").then(info => {
-      console.log("获取视频", info);
-    });
+    public mounted() {
 
+      EMacro.getVideoScale("http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4").then(info => {
+        console.log("获取视频", info);
+      });
 
 
-    const listEl = document.getElementById('list') as HTMLElement;
-    this.listWidth = listEl.clientWidth;
-    this.listHeight = listEl.clientHeight;
 
-    window.addEventListener('resize', () => {
+      // const listEl = document.getElementById('list') as HTMLElement;
       // this.listWidth = listEl.clientWidth;
       // this.listHeight = listEl.clientHeight;
-    })
-  }
+
+      window.addEventListener('resize', () => {
+        // this.listWidth = listEl.clientWidth;
+        // this.listHeight = listEl.clientHeight;
+      })
+    }
 
 
-}
+  }
 </script>
 
 <style lang="less" scoped>
-@import "index.less";
+  @import "index.less";
 </style>