From 3f6c57257839d760b62e2796ff5575b8088987c9 Mon Sep 17 00:00:00 2001 From: fanxuehan <fanxuehan@qq.com> Date: Wed, 24 Feb 2021 09:20:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E9=A1=B5=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E9=BE=99=E9=AA=A8=E4=B8=8A=E4=BC=A0=E7=94=A8=E7=9A=84?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- form/src/app/app.module.ts | 3 +- .../upload-dragon-bone.component.html | 50 +++++ .../upload-dragon-bone.component.scss | 110 +++++++++++ .../upload-dragon-bone.component.ts | 181 ++++++++++++++++++ 4 files changed, 343 insertions(+), 1 deletion(-) create mode 100644 form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html create mode 100644 form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss create mode 100644 form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts diff --git a/form/src/app/app.module.ts b/form/src/app/app.module.ts index a0995a7..fe6ed4a 100644 --- a/form/src/app/app.module.ts +++ b/form/src/app/app.module.ts @@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'; +import { UploadDragonBoneComponent } from './common/upload-dragon-bone/upload-dragon-bone.component'; registerLocaleData(zh); @@ -40,7 +41,7 @@ registerLocaleData(zh); TimePipe, UploadVideoComponent, CustomHotZoneComponent, - + UploadDragonBoneComponent, PlayerContentWrapperComponent ], diff --git a/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html new file mode 100644 index 0000000..9354797 --- /dev/null +++ b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html @@ -0,0 +1,50 @@ +<div class="position-relative"> + + + <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;"> + <i nz-icon nzType="tool" nzTheme="outline"></i> + {{btnName}} + </button> + + + <!--é…ç½®é¾™éª¨é¢æ¿--> + <nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="é…ç½®èµ„æºæ–‡ä»¶" + (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="ä¿å˜"> + + <div class="anima-upload-btn"> + <span style="margin-right: 10px">ä¸Šä¼ ske_json 文件: </span> + <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" + (nzChange)="skeJsonHandleChange($event)"> + <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> + </nz-upload> + <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> + <span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span> + </div> + + <div class="anima-upload-btn"> + <span style="margin-right: 10px">ä¸Šä¼ tex_json 文件: </span> + <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" + (nzChange)="texJsonHandleChange($event)"> + <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> + </nz-upload> + <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> + <span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span> + </div> + + <div class="anima-upload-btn"> + <span style="margin-right: 10px">ä¸Šä¼ tex_png 文件: </span> + <nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData" + (nzChange)="texPngHandleChange($event)"> + <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> + </nz-upload> + <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> + <span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span> + </div> + + <div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0"> + æç¤ºï¼šéœ€åŒ…å«åŠ¨ç”»: {{animaNames.toString()}}. + </div> + + </nz-modal> + +</div> \ No newline at end of file diff --git a/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss new file mode 100644 index 0000000..e9c56bf --- /dev/null +++ b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss @@ -0,0 +1,110 @@ +@import '../../style/common_mixin.css'; + +.p-image-uploader { + position: relative; + display: block; + width: 100%; + height: 0; + padding-bottom: 56.25%; + .p-box { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 2px dashed #ddd; + border-radius: 0.5rem; + background-color: #fafafa; + text-align: center; + color: #aaa; + .p-upload-icon { + text-align: center; + margin: auto; + .anticon-upload { + color: #888; + font-size: 5rem; + } + .p-progress-bar { + position: relative; + width: 20rem; + height: 1.5rem; + border: 1px solid #ccc; + border-radius: 1rem; + .p-progress-bg { + background-color: #1890ff; + border-radius: 1rem; + height: 100%; + } + .p-progress-value { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-shadow: 0 0 4px #000; + color: white; + text-align: center; + font-size: 0.9rem; + line-height: 1.5rem; + } + } + } + .p-preview { + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: 50% 50%; + //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); + } + } + .d-flex{ + display: flex; + } +} + +.p-btn-delete { + position: absolute; + right: -0.5rem; + top: -0.5rem; + width: 2rem; + height: 2rem; + border: 0.2rem solid white; + border-radius: 50%; + font-size: 1.2rem; + background-color: #fb781a; + color: white; + text-align: center; +} + +.p-upload-progress-bg { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + & .i-text { + position: absolute; + text-align: center; + color: white; + text-shadow: 0 0 2px rgba(0, 0, 0, .85); + } + & .i-bg { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: #27b43f; + border-radius: 0.5rem; + } +} + +.anima-upload-btn { + padding: 10px; +} + + +:host ::ng-deep .ant-upload { + display: block; +} diff --git a/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts new file mode 100644 index 0000000..a99c3e4 --- /dev/null +++ b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts @@ -0,0 +1,181 @@ +import {ApplicationRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output} from '@angular/core'; +import { NzMessageService, UploadXHRArgs, UploadFile } from 'ng-zorro-antd'; + + +@Component({ + selector: 'app-upload-dragon-bone', + templateUrl: './upload-dragon-bone.component.html', + styleUrls: ['./upload-dragon-bone.component.scss'] +}) +export class UploadDragonBoneComponent implements OnDestroy, OnChanges { + uploading = false; + progress = 0; + @Input() + btnName = 'é…置龙骨动画'; + @Input() + animaNames = []; + + @Input() + skeJsonData = {}; + @Input() + texJsonData = {}; + @Input() + texPngData = {}; + + @Output() + save = new EventEmitter(); + + @Output() + refreshEmitter = new EventEmitter(); + + // @Input() + // picUrl; + // @Input() + // canDelete = false; + // @Output() + // imageUploaded = new EventEmitter(); + // @Output() + // imageUploadFailure = new EventEmitter(); + // @Output() + // delete = new EventEmitter(); + // @Input() + // picItem = null; + // @Input() + // iconSize = 2; + // @Input() + // TIP = 'Click here to upload image'; + // @Input() + // disableUpload = false; + + + uploadUrl; + uploadData; + + animaPanelVisible = false; + + isSkeJsonLoading = false; + isTexJsonLoading = false; + isTexPngLoading = false; + + constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) { + + this.uploadUrl = (<any> window).courseware.uploadUrl(); + this.uploadData = (<any> window).courseware.uploadData(); + + window['air'].getUploadCallback = (url, data) => { + this.uploadUrl = url; + this.uploadData = data; + }; + + } + ngOnChanges() { + + } + + setAnimaBtnClick() { + this.animaPanelVisible = true; + this.refresh(); + } + + animaPanelCancel() { + this.animaPanelVisible = false; + this.refresh(); + } + + animaPanelOk() { + this.sendItemDragonBoneData(); + this.animaPanelVisible = false; + this.refresh(); + } + + sendItemDragonBoneData() { + const data = {}; + data['skeJsonData'] = this.skeJsonData; + data['texJsonData'] = this.texJsonData; + data['texPngData'] = this.texPngData; + this.save.emit(data); + } + + + skeJsonHandleChange(e) { + console.log('e: ', e); + switch (e.type) { + case 'start': + this.isSkeJsonLoading = true; + break; + + case 'success': + this.skeJsonData['url'] = e.file.response.url; + this.skeJsonData['name'] = e.file.name; + this.nzMessageService.success('ä¸Šä¼ æˆåŠŸ'); + this.isSkeJsonLoading = false; + break; + + case 'progress': + break; + } + } + + texJsonHandleChange(e) { + console.log('e: ', e); + switch (e.type) { + case 'start': + this.isTexJsonLoading = true; + break; + + case 'success': + this.texJsonData['url'] = e.file.response.url; + this.texJsonData['name'] = e.file.name; + this.nzMessageService.success('ä¸Šä¼ æˆåŠŸ'); + this.isTexJsonLoading = false; + break; + + case 'progress': + break; + } + } + + texPngHandleChange(e) { + console.log('e: ', e); + switch (e.type) { + case 'start': + this.isTexPngLoading = true; + break; + + case 'success': + this.texPngData['url'] = e.file.response.url; + this.texPngData['name'] = e.file.name; + this.nzMessageService.success('ä¸Šä¼ æˆåŠŸ'); + this.isTexPngLoading = false; + break; + + case 'progress': + break; + } + } + + + + /** + * 刷新 æ¸²æŸ“é¡µé¢ + */ + refresh() { + + // this.refreshEmitter.emit(); + setTimeout(() => { + this.appRef.tick(); + }, 1); + } + + + closePanel() { + console.log(' in closePanel '); + this.refresh(); + } + + + + ngOnDestroy() { + } + +} -- 2.21.0