Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
E
East_L215
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
East_L215
Commits
0cb0e9f7
Commit
0cb0e9f7
authored
Apr 12, 2020
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
dev commit
parent
240de8dc
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
185 additions
and
84 deletions
+185
-84
form.component.html
src/app/form/form.component.html
+103
-18
form.component.scss
src/app/form/form.component.scss
+2
-1
form.component.ts
src/app/form/form.component.ts
+35
-45
play.component.ts
src/app/play/play.component.ts
+45
-20
No files found.
src/app/form/form.component.html
View file @
0cb0e9f7
<div
class=
"model-content"
>
<div
class=
"card-config"
>
<div
class=
"card-item"
style=
"padding: 0.5vw;"
>
<div
class=
"card-item-content border"
style=
" width: 1000px;"
>
<div
class=
"card-item-content"
>
<div
class=
"title"
>
人物
设置
设置
</div>
<div
class=
"section"
>
<div
class=
"section-content"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:
1
"
>
性别:
<div
style=
"flex:
2
"
>
背景音乐
</div>
<div
style=
"flex:9"
>
<nz-radio-group
[(
ngModel
)]="
item
.
contentObj
.
sex
"
(
ngModelChange
)="
saveItem
()"
>
<label
nz-radio
[
nzValue
]="'
male
'"
>
男孩
</label>
<label
nz-radio
[
nzValue
]="'
female
'"
>
女孩
</label>
</nz-radio-group>
<div
style=
"flex:5"
>
<app-audio-recorder
[
audioUrl
]="
item
.
contentObj
.
bgMusic
"
(
audioUploaded
)="
onTitleAudioUploadSuccess
($
event
)"
></app-audio-recorder>
</div>
<div
style=
"flex:2"
>
卡片容器:
</div>
<div
style=
"flex:2"
>
<div>
<nz-select
[(
ngModel
)]="
item
.
contentObj
.
cardContainerSetting
.
type
"
(
ngModelChange
)="
saveItem
()"
>
<nz-option
*
ngFor=
"let p of containerType"
[
nzValue
]="
p
"
[
nzLabel
]="
containerTypeMap
[
p
]"
></nz-option>
</nz-select>
</div>
</div>
<div
style=
"flex:7"
>
<div
*
ngIf=
"contentObj.cardContainerSetting.type=='D'"
>
<app-upload-image-with-preview
style=
"width: 100%;"
[
picUrl
]="
item
.
contentObj
.
cardContainerSetting
.
image_url
"
(
imageUploaded
)="
onImageUploadSuccess_Container
($
event
)"
></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
*
ngFor=
"let item of contentObj.dataArray; let i = index"
class=
"card-item"
style=
"padding: 0.5vw;"
>
<div
class=
"card-item-content border"
style=
" width: 500px;"
>
<div
class=
"card-item-content"
>
<div
class=
"title"
>
音频设置
卡片 -
<strong>
{{ i + 1 }}
</strong>
-
</div>
<div
class=
"section"
>
<div
*
ngFor=
"let it of item.contentObj.audio; let i = index"
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:1;"
>
{{this.roleMapping[i]}}:
<div
class=
"section"
>
<div
class=
"section-content"
>
<div
style=
"flex:1"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:2"
>
音频
</div>
<div
style=
"flex:7"
>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
item
)"
></app-audio-recorder>
</div>
</div>
</div>
<div
style=
"flex:1"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:2"
>
显示选项
</div>
<div
style=
"flex:7"
>
<nz-radio-group
[(
ngModel
)]="
item
.
type
"
(
ngModelChange
)="
saveItem
()"
>
<label
nz-radio
[
nzValue
]="'
Text
'"
>
文字
</label>
<label
nz-radio
[
nzValue
]="'
Image
'"
>
图片
</label>
</nz-radio-group>
</div>
</div>
</div>
<div
*
ngIf=
"item.type=='Text'"
style=
"flex:1"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:2"
>
文字
</div>
<div
style=
"flex:7"
>
<input
type=
"text"
nz-input
placeholder=
""
[(
ngModel
)]="
item
.
text
"
(
blur
)="
saveItem
()"
/>
</div>
</div>
</div>
<div
*
ngIf=
"item.type=='Image'"
style=
"flex:1"
>
<div
style=
"display: flex;"
>
<div
style=
"flex:2"
>
图片
</div>
<div
style=
"flex:7"
>
<app-upload-image-with-preview
style=
"width: 100%;"
[
picUrl
]="
item
.
image_url
"
(
imageUploaded
)="
onImageUploadSuccessByItem
($
event
,
item
)"
></app-upload-image-with-preview>
</div>
</div>
</div>
<div
style=
"flex:9"
>
<app-audio-recorder
[
audioUrl
]="
it
.
url
"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
it
)"
></app-audio-recorder>
</div>
</div>
</div>
<div
class=
"section"
style=
"height: 40px;"
>
<div
style=
"float:left; text-align: left; padding-left: 20px;"
>
<button
style=
"flex:1;"
nz-button
nzType=
"default"
(
click
)="
handleMoveItemUp
(
i
)"
[
disabled
]="
i=
=0"
>
<i
nz-icon
nzType=
"up"
nzTheme=
"outline"
style=
"float: left; margin-top: 4px;"
></i>
<span
style=
"float: right;"
>
上移
</span>
</button>
<button
style=
"flex:1; margin-left: 10px; vertical-align:baseline;"
nz-button
nzType=
"default"
(
click
)="
handleMoveItemDown
(
i
)"
[
disabled
]="
i=
=contentObj.dataArray.length-1"
>
<i
nz-icon
nzType=
"down"
nzTheme=
"outline"
style=
"float: left; margin-top: 4px;"
></i>
<span
style=
"float: right;"
>
下移
</span>
</button>
</div>
<div
style=
"float:right; text-align: right; padding-right: 20px;"
>
<button
style=
"margin-bottom: 10px;"
nz-button
nzType=
"danger"
(
click
)="
deleteItem
(
i
)"
>
<span>
删除本题
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card-item"
style=
"padding: 0.5vw; width: 500px;"
>
<button
nz-button
nzType=
"primary"
class=
"add-btn"
(
click
)="
addItem
()"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
新建卡片
</button>
</div>
</div>
src/app/form/form.component.scss
View file @
0cb0e9f7
...
...
@@ -5,7 +5,8 @@
.card-config
{
width
:
100%
;
height
:
100%
;
display
:
flex
;
flex-wrap
:
wrap
;
box-sizing
:
border-box
;
.card-item
{
margin-bottom
:
40px
;
...
...
src/app/form/form.component.ts
View file @
0cb0e9f7
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
}
from
'
@angular/core
'
;
const
defaultData
=
[
{
audio_url
:
""
,
displayType
:
"
image
"
,
text
:
"
This is demoA.
"
,
image_url
:
""
},
{
audio_url
:
""
,
displayType
:
"
text
"
,
text
:
"
This is demoB.
"
,
image_url
:
""
},
{
audio_url
:
""
,
displayType
:
"
image
"
,
text
:
"
This is demoC.
"
,
image_url
:
""
},
{
audio_url
:
""
,
displayType
:
"
text
"
,
text
:
"
This is demoD.
"
,
image_url
:
""
}
]
const
defauleFormData
=
{
sex
:
"
male
"
,
audio
:
[
{
url
:
""
},
{
url
:
""
},
{
url
:
""
},
{
url
:
""
},
{
url
:
""
},
{
url
:
""
},
]
const
defaultData
=
{
bgMusic
:
""
,
dataArray
:[],
cardContainerSetting
:
{
type
:
"
A
"
,
image_url
:
""
}
}
@
Component
({
...
...
@@ -29,25 +19,25 @@ const defauleFormData = {
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
_item
:
any
;
dataArray
:
Array
<
Object
>
=
[];
contentObj
hotZoneItemArr
:
Array
<
Object
>
=
[];
bgItem
:
Object
;
containerTypeMap
=
{
"
A
"
:
"
盘子
"
,
"
B
"
:
"
盒子
"
,
"
C
"
:
"
桌布
"
,
"
D
"
:
"
自定义
"
}
containerType
=
[
'
A
'
,
'
B
'
,
'
C
'
,
'
D
'
]
KEY
=
'
DataKey_East_L215
'
;
roleMapping
=
[
"
建筑工
"
,
"
消防员
"
,
"
警察
"
,
"
教师
"
,
"
农民伯伯
"
,
"
医生
"
]
set
item
(
item
)
{
this
.
_item
=
item
;
}
get
item
()
{
return
this
.
_item
;
}
@
Output
()
update
=
new
EventEmitter
();
constructor
(
private
appRef
:
ApplicationRef
)
{
...
...
@@ -65,15 +55,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
else
{
this
.
item
=
{};
}
console
.
log
(
this
.
item
)
if
(
!
this
.
item
.
contentObj
)
{
this
.
item
.
contentObj
=
defauleFormData
;
}
if
(
!
this
.
item
.
contentObj
.
sex
){
this
.
item
.
contentObj
=
defauleFormData
;
}
if
(
!
this
.
item
.
contentObj
.
audio
||
this
.
item
.
contentObj
.
audio
.
length
===
0
){
this
.
item
.
contentObj
=
defauleFormData
;
this
.
item
.
contentObj
=
{};
}
this
.
init
();
this
.
refresh
();
...
...
@@ -88,12 +71,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
init
()
{
// if (this.item.contentObj.dataArray) {
// this.dataArray = this.item.contentObj.dataArray;
// } else {
// this.dataArray = this.getDefaultPicArr();
// this.item.contentObj.dataArray = this.dataArray;
// }
if
(
Object
.
keys
(
this
.
item
.
contentObj
).
length
!=
0
)
{
this
.
contentObj
=
this
.
item
.
contentObj
;
}
else
{
this
.
contentObj
=
this
.
getDefaultPicArr
();
this
.
item
.
contentObj
=
this
.
contentObj
;
}
console
.
log
(
this
.
contentObj
)
}
cardItemData
(){
...
...
@@ -146,20 +130,25 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item
.
image_url
=
e
.
url
this
.
save
();
}
onImageUploadSuccess_Container
(
e
)
{
this
.
item
.
contentObj
.
cardContainerSetting
.
image_url
=
e
.
url
this
.
save
();
}
onAudioUploadSuccessByItem
(
e
,
it
)
{
it
.
url
=
e
.
url
;
onAudioUploadSuccessByItem
(
e
,
it
em
)
{
it
em
.
audio_
url
=
e
.
url
;
this
.
save
();
}
onTitleAudioUploadSuccess
(
e
)
{
this
.
item
.
contentObj
.
titleAudio_url
=
e
.
url
;
this
.
item
.
contentObj
.
bgMusic
=
e
.
url
;
this
.
save
();
}
addItem
()
{
let
item
=
this
.
cardItemData
();
this
.
dataArray
.
push
(
item
);
this
.
contentObj
.
dataArray
.
push
(
item
);
this
.
saveItem
();
}
...
...
@@ -173,6 +162,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
saveItem
()
{
console
.
log
(
this
.
item
.
contentObj
.
bgMusic
)
this
.
save
();
}
...
...
src/app/play/play.component.ts
View file @
0cb0e9f7
...
...
@@ -37,24 +37,36 @@ import { debounceTime, map, takeWhile } from "rxjs/operators";
import
*
as
_
from
"
lodash
"
;
import
TWEEN
from
"
@tweenjs/tween.js
"
;
// const defauleFormData = {
// bgMusic:"FC-Sonw",
// dataArray:[
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"}
// ],
// cardContainerSetting: {
// type: "A",
// image_url: "dish"
// }
// }
const
defauleFormData
=
{
bgMusic
:
"
FC-Sonw
"
,
dataArray
:[
{
type
:
"
Image
"
,
image_url
:
"
bee-demo
"
,
audio_url
:
"
bee-demo
"
},
{
type
:
"
Text
"
,
text
:
"
Apple
"
,
audio_url
:
"
apple-demo
"
},
{
type
:
"
Image
"
,
image_url
:
"
bee-demo
"
,
audio_url
:
"
bee-demo
"
},
{
type
:
"
Text
"
,
text
:
"
Apple
"
,
audio_url
:
"
apple-demo
"
},
{
type
:
"
Image
"
,
image_url
:
"
bee-demo
"
,
audio_url
:
"
bee-demo
"
},
{
type
:
"
Text
"
,
text
:
"
Apple
"
,
audio_url
:
"
apple-demo
"
},
{
type
:
"
Image
"
,
image_url
:
"
bee-demo
"
,
audio_url
:
"
bee-demo
"
},
{
type
:
"
Text
"
,
text
:
"
Apple
"
,
audio_url
:
"
apple-demo
"
},
{
type
:
"
Image
"
,
image_url
:
"
bee-demo
"
,
audio_url
:
"
bee-demo
"
},
{
type
:
"
Text
"
,
text
:
"
Apple
"
,
audio_url
:
"
apple-demo
"
},
{
type
:
"
Image
"
,
image_url
:
"
bee-demo
"
,
audio_url
:
"
bee-demo
"
},
{
type
:
"
Text
"
,
text
:
"
Apple
"
,
audio_url
:
"
apple-demo
"
}
],
cardContainerSetting
:
{
type
:
"
D
"
,
type
:
"
A
"
,
image_url
:
"
dish
"
}
}
...
...
@@ -165,12 +177,24 @@ export class PlayComponent implements OnInit, OnDestroy {
// 映射预加载图片[网路]资源 返回包含图片路径的数组
mapToImageArray
(
contentObj
){
let
array
=
[]
if
(
contentObj
.
cardContainerSetting
.
type
==
"
D
"
){
array
.
push
(
contentObj
.
cardContainerSetting
.
image_url
?
contentObj
.
cardContainerSetting
.
image_url
:
""
)
}
contentObj
.
dataArray
.
forEach
(
item
=>
{
if
(
item
.
type
==
"
Image
"
){
array
.
push
(
item
.
image_url
?
item
.
image_url
:
""
)
}
});
return
array
}
// 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray
(
contentObj
){
let
array
=
[]
array
.
push
(
contentObj
.
bgMusic
?
contentObj
.
bgMusic
:
""
)
contentObj
.
dataArray
.
forEach
(
item
=>
{
array
.
push
(
item
.
audio_url
?
item
.
audio_url
:
""
)
});
return
array
}
...
...
@@ -334,32 +358,34 @@ export class PlayComponent implements OnInit, OnDestroy {
case
"
A
"
:
pos
.
image
=
"
dish
"
;
pos
.
x
=
this
.
g_canvasWidth
/
2
;
pos
.
y
=
481
*
this
.
g_mapScale
;
pos
.
y
=
660
*
this
.
g_mapScale
;
pos
.
sx
=
658
*
this
.
g_mapScale
;
pos
.
sy
=
228
*
this
.
g_mapScale
;
break
;
case
"
B
"
:
pos
.
image
=
"
box
"
;
pos
.
x
=
this
.
g_canvasWidth
/
2
;
pos
.
y
=
44
0
*
this
.
g_mapScale
;
pos
.
y
=
72
0
*
this
.
g_mapScale
;
pos
.
sx
=
771
*
this
.
g_mapScale
*
0.8
;
pos
.
sy
=
282
*
this
.
g_mapScale
*
0.8
;
break
;
case
"
C
"
:
pos
.
image
=
"
tablecloth
"
;
pos
.
x
=
this
.
g_canvasWidth
/
2
;
pos
.
y
=
490
*
this
.
g_mapScale
;
pos
.
y
=
718
*
this
.
g_mapScale
;
pos
.
sx
=
918
*
this
.
g_mapScale
;
pos
.
sy
=
228
*
this
.
g_mapScale
;
break
;
default
:
pos
.
image
=
this
.
g_formData
.
cardContainerSetting
.
image_url
?
this
.
g_formData
.
cardContainerSetting
.
image_url
:
"
dish
"
;
pos
.
image
=
this
.
g_formData
.
cardContainerSetting
.
image_url
;
pos
.
x
=
this
.
g_canvasWidth
/
2
;
pos
.
y
=
481
*
this
.
g_mapScale
;
pos
.
y
=
820
*
this
.
g_mapScale
;
pos
.
sx
=
658
*
this
.
g_mapScale
;
pos
.
sy
=
228
*
this
.
g_mapScale
;
break
;
}
console
.
log
(
this
.
g_cartoon
.
images
.
get
(
this
.
g_formData
.
cardContainerSetting
.
image_url
))
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
'
card-container
'
,
pos
.
image
,
(
w
,
h
)
=>
{
return
{
sx
:
pos
.
sx
/
w
,
...
...
@@ -368,9 +394,10 @@ export class PlayComponent implements OnInit, OnDestroy {
},
(
w
,
h
)
=>
{
return
{
x
:
pos
.
x
,
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
(
h
/
2
)
*
this
.
g_mapScale
+
pos
.
y
y
:
this
.
g_cartoon
.
getOrigin
().
y
-
(
h
/
2
)
*
this
.
g_mapScale
+
pos
.
y
}
})
console
.
log
(
element
)
this
.
render
(
element
.
ref
)
}
...
...
@@ -1049,9 +1076,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// ----------------------------------
initDefaultData
()
{
if
(
Object
.
keys
(
this
.
g_formData
).
length
===
0
)
{
// console.log("Init default form data")
this
.
g_formData
=
defauleFormData
;
}
else
if
(
!
this
.
g_data
.
contentObj
.
dataArray
||
!
this
.
g_data
.
contentObj
.
bgMusic
){
console
.
log
(
"
Init default form data
"
)
this
.
g_formData
=
defauleFormData
;
}
}
...
...
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