Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dfzx_cocos_dds
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
dfzx_cocos_dds
Commits
3f6c5725
Commit
3f6c5725
authored
Feb 24, 2021
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 表单页增加龙骨上传用的组件
parent
ddfebd10
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
343 additions
and
1 deletion
+343
-1
app.module.ts
form/src/app/app.module.ts
+2
-1
upload-dragon-bone.component.html
...mmon/upload-dragon-bone/upload-dragon-bone.component.html
+50
-0
upload-dragon-bone.component.scss
...mmon/upload-dragon-bone/upload-dragon-bone.component.scss
+110
-0
upload-dragon-bone.component.ts
...common/upload-dragon-bone/upload-dragon-bone.component.ts
+181
-0
No files found.
form/src/app/app.module.ts
View file @
3f6c5725
...
...
@@ -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
],
...
...
form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
0 → 100644
View file @
3f6c5725
<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
form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss
0 → 100644
View file @
3f6c5725
@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
;
}
form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts
0 → 100644
View file @
3f6c5725
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
()
{
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment