Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
O
op_01
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
op_01
Commits
84e30557
Commit
84e30557
authored
Sep 22, 2021
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 点选组件
parent
ce304201
Changes
16
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
2189 additions
and
1202 deletions
+2189
-1202
angular.json
form/angular.json
+5
-2
package-lock.json
form/package-lock.json
+641
-146
package.json
form/package.json
+1
-1
app.module.ts
form/src/app/app.module.ts
+3
-1
audio-recorder.component.html
...c/app/common/audio-recorder/audio-recorder.component.html
+2
-1
audio-recorder.component.ts
...src/app/common/audio-recorder/audio-recorder.component.ts
+19
-1
custom-action.component.html
...src/app/common/custom-action/custom-action.component.html
+153
-0
custom-action.component.scss
...src/app/common/custom-action/custom-action.component.scss
+110
-0
custom-action.component.ts
form/src/app/common/custom-action/custom-action.component.ts
+216
-0
Unit.ts
form/src/app/common/custom-hot-zone/Unit.ts
+57
-791
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+165
-21
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+10
-109
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+694
-125
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+17
-0
form.component.html
form/src/app/form/form.component.html
+25
-3
form.component.ts
form/src/app/form/form.component.ts
+71
-1
No files found.
form/angular.json
View file @
84e30557
...
@@ -128,5 +128,8 @@
...
@@ -128,5 +128,8 @@
}
}
}
}
},
},
"defaultProject"
:
"ng-template-generator"
"defaultProject"
:
"ng-template-generator"
,
}
"cli"
:
{
"analytics"
:
false
}
}
\ No newline at end of file
form/package-lock.json
View file @
84e30557
This diff is collapsed.
Click to expand it.
form/package.json
View file @
84e30557
...
@@ -55,4 +55,4 @@
...
@@ -55,4 +55,4 @@
"tslint"
:
"~5.18.0"
,
"tslint"
:
"~5.18.0"
,
"typescript"
:
"~3.7.5"
"typescript"
:
"~3.7.5"
}
}
}
}
\ No newline at end of file
form/src/app/app.module.ts
View file @
84e30557
...
@@ -25,6 +25,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
...
@@ -25,6 +25,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
import
{
fas
}
from
'
@fortawesome/free-solid-svg-icons
'
;
import
{
fas
}
from
'
@fortawesome/free-solid-svg-icons
'
;
import
{
far
}
from
'
@fortawesome/free-regular-svg-icons
'
;
import
{
far
}
from
'
@fortawesome/free-regular-svg-icons
'
;
import
{
UploadDragonBoneComponent
}
from
'
./common/upload-dragon-bone/upload-dragon-bone.component
'
;
import
{
UploadDragonBoneComponent
}
from
'
./common/upload-dragon-bone/upload-dragon-bone.component
'
;
import
{
CustomActionComponent
}
from
'
./common/custom-action/custom-action.component
'
;
registerLocaleData
(
zh
);
registerLocaleData
(
zh
);
...
@@ -42,7 +43,8 @@ registerLocaleData(zh);
...
@@ -42,7 +43,8 @@ registerLocaleData(zh);
UploadVideoComponent
,
UploadVideoComponent
,
CustomHotZoneComponent
,
CustomHotZoneComponent
,
UploadDragonBoneComponent
,
UploadDragonBoneComponent
,
PlayerContentWrapperComponent
PlayerContentWrapperComponent
,
CustomActionComponent
,
],
],
imports
:
[
imports
:
[
...
...
form/src/app/common/audio-recorder/audio-recorder.component.html
View file @
84e30557
...
@@ -35,7 +35,8 @@
...
@@ -35,7 +35,8 @@
<ng-template
#
truthyTemplate
>
<ng-template
#
truthyTemplate
>
<div
class=
"btn-delete"
(
click
)="
onBtnDeleteAudio
()"
>
<div
class=
"btn-delete"
(
click
)="
onBtnDeleteAudio
()"
>
<fa-icon
icon=
"close"
></fa-icon>
<!-- <fa-icon icon="close"></fa-icon> -->
<i
nz-icon
nzType=
"close"
nzTheme=
"outline"
></i>
</div>
</div>
</ng-template>
</ng-template>
...
...
form/src/app/common/audio-recorder/audio-recorder.component.ts
View file @
84e30557
...
@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadData
;
uploadData
;
@
Input
()
@
Input
()
needRemove
=
fals
e
;
needRemove
=
tru
e
;
@
Input
()
@
Input
()
audioItem
:
any
=
null
;
audioItem
:
any
=
null
;
...
@@ -62,8 +62,25 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -62,8 +62,25 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this
.
uploadUrl
=
url
;
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
this
.
uploadData
=
data
;
};
};
this
.
setUploadUrl
();
}
}
setUploadUrl
()
{
if
(
!
this
.
uploadUrl
)
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
setTimeout
(()
=>
{
this
.
setUploadUrl
();
},
500
);
}
}
init
()
{
init
()
{
this
.
playIcon
=
'
play
'
;
this
.
playIcon
=
'
play
'
;
this
.
isPlaying
=
false
;
this
.
isPlaying
=
false
;
...
@@ -157,6 +174,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -157,6 +174,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
onBtnDeleteAudio
()
{
onBtnDeleteAudio
()
{
this
.
audioUrl
=
null
;
this
.
audioUrl
=
null
;
this
.
audioUploaded
.
emit
({});
this
.
audioRemoved
.
emit
();
this
.
audioRemoved
.
emit
();
}
}
...
...
form/src/app/common/custom-action/custom-action.component.html
0 → 100644
View file @
84e30557
<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
)]="
panelVisible
"
(
nzAfterClose
)="
closePanel
()"
[
nzTitle
]="
btnName
"
(
nzOnCancel
)="
panelCancel
()"
(
nzOnOk
)="
panelOk
()"
nzOkText=
"保存"
>
<div>
<h4>
基础内容:
</h4>
<div
style=
"margin-bottom: 10px; width: 80%; margin: auto;"
>
<!-- <nz-radio-group [ngModel]="item.type" (ngModelChange)="radioChange($event)">
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="text">文本</label>
</nz-radio-group> -->
<div
*
ngIf=
"item.type == 'pic'"
>
<app-upload-image-with-preview
[
picUrl
]="
item
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
item
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"item.type == 'text'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
saveText
(
item
)"
>
</div>
<div
*
ngIf=
"item.type == 'anima'"
style=
"margin-left: 100px;"
>
<app-upload-dragon-bone
[
skeJsonData
]=
item
.
skeJsonData
[
texJsonData
]=
item
.
texJsonData
[
texPngData
]=
item
.
texPngData
(
save
)="
saveAnima
($
event
)"
>
</app-upload-dragon-bone>
</div>
</div>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<h4>
状态设置:
</h4>
<div
style=
"display: flex; justify-content: space-around;"
>
<div
style=
"width: 30%; display: flex; align-items: center; flex-direction: column;"
>
<h5>
开始状态
</h5>
<div
*
ngFor=
"let op of item.changeOption; let i = index"
style=
"margin-bottom: 5px; "
>
<div
style=
"display: flex; align-items: center; justify-content: center;"
>
<span>
{{op[0]}}:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
op
[
1
]"
(
blur
)="
saveText
(
op
)"
style=
"margin-left: 5px;"
>
</div>
</div>
</div>
<div
style=
"width: 30%; display: flex; align-items: center; flex-direction: column; "
>
<h5>
切换时间
</h5>
<div
style=
"display: flex; width: 100%; align-items: center; justify-content: center;"
>
<span>
time:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
changeTime
"
(
blur
)="
saveText
(
item
.
changeTime
)"
style=
"width: 80px; margin-left: 5px;"
>
</div>
</div>
<div
style=
"width: 30%; display: flex; align-items: center; flex-direction: column;"
>
<h5>
结束状态
</h5>
<div
*
ngFor=
"let op of item.changeOption; let i = index"
style=
"margin-bottom: 5px; "
>
<div
style=
"display: flex; align-items: center; justify-content: center;"
>
<span>
{{op[0]}}:
</span>
<input
[
disabled
]="
op
[
2
]
==
null
"
type=
"text"
nz-input
[(
ngModel
)]="
op
[
2
]"
(
blur
)="
saveText
(
op
)"
style=
"margin-left: 5px;"
>
</div>
</div>
</div>
</div>
<div
style=
"display: flex; align-items: center; justify-content: center; margin-top: 10px;"
>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyChangeData
()"
>
复制数据
</button>
<div
style=
"margin-left: 20px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<h4>
音频设置
</h4>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
item
?.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
item
)"
></app-audio-recorder>
</div>
<!--
<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>
form/src/app/common/custom-action/custom-action.component.scss
0 → 100644
View file @
84e30557
@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/custom-action/custom-action.component.ts
0 → 100644
View file @
84e30557
import
{
ApplicationRef
,
Component
,
EventEmitter
,
Input
,
OnChanges
,
OnDestroy
,
Output
}
from
'
@angular/core
'
;
import
{
NzMessageService
,
UploadXHRArgs
,
UploadFile
}
from
'
ng-zorro-antd
'
;
@
Component
({
selector
:
'
app-custom-action
'
,
templateUrl
:
'
./custom-action.component.html
'
,
styleUrls
:
[
'
./custom-action.component.scss
'
]
})
export
class
CustomActionComponent
implements
OnDestroy
,
OnChanges
{
uploading
=
false
;
progress
=
0
;
@
Input
()
btnName
=
'
配置变化状态
'
;
@
Input
()
option
=
[]
@
Input
()
item
;
@
Input
()
type
=
'
text
'
@
Output
()
save
=
new
EventEmitter
();
@
Output
()
refreshEmitter
=
new
EventEmitter
();
uploadUrl
;
uploadData
;
panelVisible
=
false
;
pasteData
=
''
;
constructor
(
private
appRef
:
ApplicationRef
,
private
nzMessageService
:
NzMessageService
)
{
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
const
tmpId
=
setInterval
(()
=>
{
console
.
log
(
'
in setInterval
'
)
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
if
(
this
.
uploadUrl
)
{
clearInterval
(
tmpId
);
}
},
500
)
}
ngOnInit
()
{
this
.
initItem
();
}
ngOnChanges
()
{
}
initItem
()
{
console
.
log
(
'
```this.item:
'
,
this
.
item
);
if
(
!
this
.
item
)
{
this
.
item
=
{
type
:
this
.
type
,
skeJsonData
:
{},
texJsonData
:
{},
texPngData
:
{},
changeStart
:
[
],
changeEnd
:
[
],
changeTime
:
0.3
};
if
(
this
.
option
)
{
this
.
item
.
changeOption
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
option
));
}
}
console
.
log
(
'
initItem
'
,
this
.
item
);
}
setAnimaBtnClick
()
{
this
.
panelVisible
=
true
;
this
.
refresh
();
}
panelCancel
()
{
this
.
panelVisible
=
false
;
this
.
refresh
();
}
panelOk
()
{
// this.sendItemDragonBoneData();
this
.
panelVisible
=
false
;
this
.
refresh
();
this
.
save
.
emit
(
this
.
item
);
}
saveText
(
t
)
{
}
radioChange
(
e
)
{
this
.
item
.
type
=
e
;
console
.
log
(
'
e:
'
,
e
);
}
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
this
.
refresh
();
}
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
saveAnima
(
e
)
{
console
.
log
(
"
~ e:
"
,
e
);
}
copyChangeData
()
{
console
.
log
(
'
this.item:
'
,
this
.
item
);
const
jsonData
=
{
changeOption
:
this
.
item
.
changeOption
,
changeTime
:
this
.
item
.
changeTime
// bgItem,
// hotZoneItemArr,
// isHasRect: this.isHasRect,
// isHasPic: this.isHasPic,
// isHasText: this.isHasText,
// isHasAudio: this.isHasAudio,
// isHasAnima: this.isHasAnima,
// hotZoneFontObj: this.hotZoneFontObj,
// defaultItemType: this.defaultItemType,
// hotZoneImgSize: this.hotZoneImgSize,
};
const
oInput
=
document
.
createElement
(
'
input
'
);
oInput
.
value
=
JSON
.
stringify
(
jsonData
);
document
.
body
.
appendChild
(
oInput
);
oInput
.
select
();
// 选择对象
document
.
execCommand
(
'
Copy
'
);
// 执行浏览器复制命令
document
.
body
.
removeChild
(
oInput
);
this
.
nzMessageService
.
success
(
'
复制成功
'
);
}
importData
()
{
if
(
!
this
.
pasteData
)
{
return
;
}
try
{
const
data
=
JSON
.
parse
(
this
.
pasteData
);
console
.
log
(
'
data:
'
,
data
);
const
{
changeOption
,
changeTime
}
=
data
;
this
.
item
.
changeOption
=
changeOption
;
this
.
item
.
changeTime
=
changeTime
;
this
.
pasteData
=
''
;
}
catch
(
e
)
{
console
.
log
(
'
err:
'
,
e
);
this
.
nzMessageService
.
error
(
'
导入失败
'
);
}
}
/**
* 刷新 渲染页面
*/
refresh
()
{
// this.refreshEmitter.emit();
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
closePanel
()
{
console
.
log
(
'
in closePanel
'
);
this
.
refresh
();
}
ngOnDestroy
()
{
}
}
form/src/app/common/custom-hot-zone/Unit.ts
View file @
84e30557
This diff is collapsed.
Click to expand it.
form/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
84e30557
...
@@ -32,33 +32,111 @@
...
@@ -32,33 +32,111 @@
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<div
style=
"margin-top: -20px; margin-bottom: 5px; width: 100%;"
>
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<div
*
ngIf=
"customTypeGroupArr"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<nz-radio-group
[
ngModel
]="
it
.
gIdx
"
(
ngModelChange
)="
customRadioChange
($
event
,
it
)"
style=
"display: flex; align-items: center; justify-content: center; flex-wrap: wrap;"
>
<label
*
ngIf=
"isHasRect"
nz-radio
nzValue=
"rect"
>
矩形
</label>
<div
*
ngFor=
"let group of customTypeGroupArr; let gIdx = index"
style=
"display: flex; "
>
<label
*
ngIf=
"isHasPic"
nz-radio
nzValue=
"pic"
>
图片
</label>
<label
nz-radio
nzValue=
"{{gIdx}}"
>
{{group.name}}
</label>
<label
*
ngIf=
"isHasText"
nz-radio
nzValue=
"text"
>
文本
</label>
</div>
</nz-radio-group>
</nz-radio-group>
</div>
<div
*
ngIf=
"it.itemType == 'pic'"
>
</div>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
<!-- <div *ngIf="!customTypeGroupArr">
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
</app-upload-image-with-preview>
</div>
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div> -->
<div
*
ngIf=
"it.itemType == 'text'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
</div>
<div
style=
"width: 100%; margin-top: 5px;"
>
<div
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[it.gIdx]"
>
<app-audio-recorder
[
audioUrl
]="
it
.
audio_url
"
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].pic"
>
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
<app-upload-image-with-preview
></app-audio-recorder>
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].text"
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].anima"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].animaSmall"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaSmallBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画(小)
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].audio"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.action"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-custom-action
style=
"margin: auto"
[
item
]="
it
?
it
['
actionData_
'
+
it
.
gIdx
]
:
{}"
[
type
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
type
"
[
option
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
option
"
(
save
)="
onSaveCustomAction
($
event
,
it
)"
>
>
</app-custom-action>
</div>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
</div>
</div>
...
@@ -83,12 +161,29 @@
...
@@ -83,12 +161,29 @@
<div
class=
"save-box"
>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
<button
style=
"margin-left: 200px"
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
<i
nz-icon
nzType=
"save"
></i>
Save
Save
</button>
</button>
<div
*
ngIf=
"isCopyData"
style=
"height: 40px; display: flex; justify-items: center;"
>
<label
style=
"margin-left: 40px"
nz-checkbox
[(
ngModel
)]="
bgItem
.
isShowDebugLine
"
>
显示辅助框
</label>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyHotZoneData
()"
>
复制基础数据
</button>
<div
style=
"margin-left: 10px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
</div>
</div>
...
@@ -98,3 +193,52 @@
...
@@ -98,3 +193,52 @@
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<!--龙骨面板-->
<nz-modal
[(
nzVisible
)]="
animaPanelVisible
"
nzTitle=
"配置资源文件"
(
nzAfterClose
)="
closeAfterPanel
()"
(
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['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['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['name']"
style=
"margin-left: 10px"
><u>
{{texPngData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames"
>
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
form/src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
84e30557
...
@@ -81,19 +81,21 @@
...
@@ -81,19 +81,21 @@
}
}
}
}
h5
{
.anima-upload-btn
{
margin-top
:
1rem
;
padding
:
10px
;
}
}
h5
{
margin-top
:
1rem
;
@font-face
{
font-family
:
'BRLNSR_1'
;
src
:
url("/assets/font/BRLNSR_1.TTF")
;
}
}
//
//@font-face
//{
// font-family: 'BRLNSR_1';
// src: url("/assets/font/BRLNSR_1.TTF") ;
//}
...
@@ -107,104 +109,3 @@ h5 {
...
@@ -107,104 +109,3 @@ h5 {
//@import '../../../style/common_mixin';
//
//.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-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.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;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
form/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
84e30557
This diff is collapsed.
Click to expand it.
form/src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
View file @
84e30557
...
@@ -42,7 +42,24 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
...
@@ -42,7 +42,24 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
this
.
uploadData
=
data
;
this
.
uploadData
=
data
;
};
};
this
.
setUploadUrl
();
}
}
setUploadUrl
()
{
if
(
!
this
.
uploadUrl
)
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
setTimeout
(()
=>
{
this
.
setUploadUrl
();
},
500
);
}
}
ngOnChanges
()
{
ngOnChanges
()
{
if
(
!
this
.
picItem
)
{
if
(
!
this
.
picItem
)
{
return
;
return
;
...
...
form/src/app/form/form.component.html
View file @
84e30557
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
style=
"padding: 10px;"
>
<div
style=
"width: 300px;"
align=
'center'
>
<div
style=
"width: 100%; margin-top: 15px; margin-bottom: 50px;"
align=
"center"
>
<h2>
标题设置
</h2>
<div
style=
"width: 50%; display: flex; justify-content: center; align-items: center;"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
title
"
(
blur
)="
save
()"
style=
"width: 200px;margin-top: 5px"
>
<app-audio-recorder
style=
"margin-top: 5px; margin-left: 5px;"
[
audioUrl
]="
item
.
title_audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
title_audio_url
')"
></app-audio-recorder>
</div>
</div>
<app-custom-hot-zone
[
bgItem
]="
item
.
bgItem
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
[
customTypeGroupArr
]="
customTypeGroupArr
"
(
save
)="
saveHotZone
(
item
,
$
event
)"
>
</app-custom-hot-zone>
<!-- <div style="width: 300px;" align='center'>
<span>图1: </span>
<span>图1: </span>
<app-upload-image-with-preview
<app-upload-image-with-preview
[picUrl]="item.pic_url"
[picUrl]="item.pic_url"
...
@@ -29,7 +51,7 @@
...
@@ -29,7 +51,7 @@
[audioUrl]="item.audio_url"
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
></app-audio-recorder>
</div>
</div>
-->
</div>
</div>
...
...
form/src/app/form/form.component.ts
View file @
84e30557
...
@@ -10,10 +10,62 @@ import { JsonPipe } from '@angular/common';
...
@@ -10,10 +10,62 @@ import { JsonPipe } from '@angular/common';
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
// 储存数据用
saveKey
=
"
test_0
01
"
;
saveKey
=
"
op_
01
"
;
// 储存对象
// 储存对象
item
;
item
;
customTypeGroupArr
=
[
{
name
:
'
发音动画
'
,
rect
:
true
,
animaSmall
:
true
,
audio
:
true
,
},
{
name
:
'
发音图片
'
,
pic
:
true
,
audio
:
true
,
},
{
name
:
'
发音区块
'
,
rect
:
true
,
audio
:
true
,
},
{
name
:
'
变化文本
'
,
action
:
{
type
:
'
text
'
,
option
:
[
[
'
fontColor
'
,
'
#000000
'
],
[
'
fontSize
'
,
'
100
'
],
[
'
opacity
'
,
'
0
'
,
'
100
'
]
]
},
},
{
name
:
'
变化图片
'
,
action
:
{
type
:
'
pic
'
,
option
:
[
// ['scale', '1'],
[
'
opacity
'
,
'
0
'
,
'
100
'
]
]
},
},
{
name
:
'
变化动画
'
,
action
:
{
type
:
'
anima
'
,
option
:
[
// ['scale', '1'],
[
'
opacity
'
,
'
0
'
,
'
100
'
]
]
},
},
]
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
}
...
@@ -63,6 +115,24 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -63,6 +115,24 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
onSaveCustomAction
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
this
.
item
.
customAction
=
e
;
this
.
save
();
}
saveHotZone
(
group
,
e
)
{
console
.
log
(
'
e:
'
,
e
);
const
{
bgItem
,
hotZoneItemArr
}
=
e
;
group
.
bgItem
=
bgItem
;
group
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
save
();
}
/**
/**
* 储存图片数据
* 储存图片数据
* @param e
* @param e
...
...
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