Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dg28_drag
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
dg28_drag
Commits
8f522f36
Commit
8f522f36
authored
Dec 14, 2023
by
Tt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
文本高亮完成
parent
f80ce26d
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
200 additions
and
235 deletions
+200
-235
.DS_Store
.DS_Store
+0
-0
ComponentBase.ts
form/src/app/form/ComponentBase.ts
+4
-2
form.component.html
form/src/app/form/form.component.html
+165
-100
form.component.ts
form/src/app/form/form.component.ts
+31
-133
No files found.
.DS_Store
View file @
8f522f36
No preview for this file type
form/src/app/form/ComponentBase.ts
View file @
8f522f36
...
...
@@ -66,12 +66,14 @@ export class ComponentBase {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
,
it
=
this
.
item
)
{
onAudioUploadSuccess
(
e
,
key
,
it
=
this
.
item
,
audioName
=
null
)
{
let
url
=
e
.
url
;
let
sp
=
url
.
split
(
"
.mp3
"
);
let
u
=
sp
[
0
]
+
"
_l.mp3
"
;
it
[
key
]
=
u
;
it
[
"
audioName
"
]
=
e
.
name
||
""
;
if
(
!
audioName
)
audioName
=
key
+=
"
Name
"
it
.
audioName
=
e
.
name
||
""
;
console
.
log
(
e
.
name
,
audioName
)
this
.
save
();
}
...
...
form/src/app/form/form.component.html
View file @
8f522f36
...
...
@@ -84,130 +84,195 @@
<div
style=
"padding: 10px;background-color: #fff;"
>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<span
style=
"margin-right: 20px;font-size: 18px;font-weight: bold;"
>
提示开关
</span>
<nz-radio-group
[
ngModel
]="
item
.
tipSwitch
"
(
ngModelChange
)="
customRadioChange
($
event
,
item
,'
tipSwitch
')"
style=
"font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;"
>
<label
nz-radio
nzValue=
"1"
>
开
</label>
<label
nz-radio
nzValue=
"0"
>
关
</label>
</nz-radio-group>
<div
*
ngIf=
"item.tipSwitch == 1"
>
<span
style=
"font-size: 20px;"
>
提示动画:
</span>
<app-upload-dragon-bone
style=
"width: 100%"
(
save
)="
onDragonBoneSave
($
event
,
item
)"
[
skeJsonData
]="
item
.
imgAni
.
ske
"
[
texJsonData
]="
item
.
imgAni
.
tex
"
[
texPngData
]="
item
.
imgAni
.
png
"
>
</app-upload-dragon-bone>
<div>
<span
style=
"font-size: 20px;"
>
提示背景:
</span>
<div
style=
"width:300px"
>
<app-upload-image-with-preview
[
picUrl
]="
item
.
tipBg
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,'
tipBg
',
item
)"
></app-upload-image-with-preview>
<div
name=
"开始音频"
>
<span
style=
"font-size: 20px;"
>
开始音频:
</span>
<div
style=
"display:flex ;"
>
<div>
<app-audio-recorder
[
audioUrl
]="
item
.
auidoStart
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
auidoStart
')"
>
</app-audio-recorder>
</div>
</div>
<div>
<span
style=
"font-size: 20px;"
>
提示内容:
</span>
<input
*
ngIf=
"item.tipType == 'scroll'"
type=
"text"
nz-input
[(
ngModel
)]="
item
.
title
"
(
blur
)="
save
()"
>
<div
*
ngIf=
"item.tipType == 'page'"
>
<div
*
ngFor=
"let page of item.tipPage; let m = index"
style=
"margin-bottom: 5px; "
>
<div
style=
"display: flex;"
>
<div
style=
"font-size: 20px;line-height:32px"
>
页{{m+1}}
</div>
<input
style=
"width:700px;margin-left: 10px;"
type=
"text"
nz-input
[(
ngModel
)]="
page
.
title
"
(
blur
)="
save
()"
>
<div
style=
"margin-left: 20px;"
>
<app-audio-recorder
[
audioUrl
]="
page
.
audio
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio
',
page
)"
>
</app-audio-recorder>
</div>
<button
class=
"btn-red"
style=
"width: 100px; height: 32px;margin-left: 20px;"
nz-button
nzType=
"default"
nzDanger
(
click
)="
removePage
(
m
)"
>
删除
</button>
</div>
</div>
<button
class=
"btn-blue"
style=
"width: 150px; height: 32px;"
nz-button
nzType=
"default"
nzDanger
(
click
)="
addPage
()"
>
+增加提示内容
</button>
<div
style=
"margin: 5px"
>
<span>
{{ item.auidoStartName}}
</span>
</div>
</div>
<!-- <span style="font-size: 20px;">提示音频: </span>
</div>
<div
name=
"结束音频"
>
<span
style=
"font-size: 20px;"
>
结束音频:
</span>
<div
style=
"display:flex ;"
>
<div>
<app-audio-recorder [audioUrl]="item.au
dio" (audioUploaded)="onAudioUploadSuccess($event, 'audio
')">
<app-audio-recorder
[
audioUrl
]="
item
.
au
idoEnd
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
auidoEnd
')"
>
</app-audio-recorder>
</div>
<div
style=
"margin: 5px"
>
<span>{{ item.au
dio
Name}}</span>
<span>
{{ item.au
idoEnd
Name}}
</span>
</div>
</div> -->
</div>
</div>
<div>
<span
style=
"font-size: 20px;"
>
游戏背景:
</span>
<div
style=
"width:300px"
>
<app-upload-image-with-preview
[
picUrl
]="
item
.
image
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,'
image
',
item
)"
></app-upload-image-with-preview>
<div
name=
"肉饼引导音频"
>
<span
style=
"font-size: 20px;"
>
肉饼引导音频:
</span>
<div
style=
"display:flex ;"
>
<div>
<app-audio-recorder
[
audioUrl
]="
item
.
auidoMeet
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
auidoMeet
')"
>
</app-audio-recorder>
</div>
<div
style=
"margin: 5px"
>
<span>
{{ item.auidoMeetName}}
</span>
</div>
</div>
</div>
<div
style=
"display: flex; align-items: center; "
>
<h2>
题目分值:
</h2>
<div
name=
"蔬菜引导音频"
>
<span
style=
"font-size: 20px;"
>
蔬菜引导音频:
</span>
<div
style=
"display:flex ;"
>
<div>
<app-audio-recorder
[
audioUrl
]="
item
.
auidoVegetable
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
auidoVegetable
')"
>
</app-audio-recorder>
</div>
<div
style=
"margin: 5px"
>
<span>
{{ item.auidoVegetableName}}
</span>
</div>
</div>
</div>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
questionScore
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
结束动画:
</span>
<app-upload-dragon-bone
style=
"width: 100%"
(
save
)="
onDragonBoneSave
($
event
,
item
)"
[
skeJsonData
]="
item
.
endImgAni
.
ske
"
[
texJsonData
]="
item
.
endImgAni
.
tex
"
[
texPngData
]="
item
.
endImgAni
.
png
"
>
</app-upload-dragon-bone>
<span
style=
"font-size: 20px;"
>
结束动画文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
endImgTitle
"
(
blur
)="
save
()"
>
<div
style=
"display: flex; align-items: center; "
>
<h2>
跳转页面:
</h2>
<div
name=
"第一次完成音频"
>
<span
style=
"font-size: 20px;"
>
第一次完成音频:
</span>
<div
style=
"display:flex ;"
>
<div>
<app-audio-recorder
[
audioUrl
]="
item
.
auidoFinish
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
auidoFinish
')"
>
</app-audio-recorder>
</div>
<div
style=
"margin: 5px"
>
<span>
{{ item.auidoFinishName}}
</span>
</div>
</div>
</div>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
jumpIdx
"
(
blur
)="
save
()"
>
</div>
<!-- 切换开关
<span style="margin-right: 20px;font-size: 18px;font-weight: bold;">提示开关 </span>
<nz-radio-group [ngModel]="item.tipSwitch" (ngModelChange)="customRadioChange($event, item,'tipSwitch')"
style="font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;">
<label nz-radio nzValue="1">开</label>
<label nz-radio nzValue="0">关</label>
</nz-radio-group> -->
<!-- 龙骨 <span style="font-size: 20px;">提示动画: </span>
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)"
[skeJsonData]="item.imgAni.ske" [texJsonData]="item.imgAni.tex" [texPngData]="item.imgAni.png">
</app-upload-dragon-bone> -->
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<span
style=
"font-size: 20px;"
>
锦囊:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
tips
"
(
blur
)="
save
()"
>
</div>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<h2>
正文(空格分隔选词,回车换行):
</h2>
<textarea
rows=
"4"
nz-input
[(
ngModel
)]="
item
.
contentMain
"
(
blur
)="
changeMain
()"
></textarea>
</div>
<!--图片
<span style="font-size: 20px;">提示背景: </span>
<div style="width:300px">
<app-upload-image-with-preview [picUrl]="item.tipBg"
(imageUploaded)="onImageUploadSuccess($event,'tipBg', item)"></app-upload-image-with-preview>
</div> -->
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<h2>
点击文本设置空格:
</h2>
<span
*
ngFor=
"let cont of item.contentArr; let i = index"
style=
"margin-bottom: 5px; "
>
<span
*
ngIf=
"cont.block"
class=
"option-title-line"
(
click
)="
onBlock
(
cont
,
false
)"
[
innerHtml
]="
cont
.
text
"
></span>
<span
*
ngIf=
"!cont.block"
class=
"option-title"
(
click
)="
onBlock
(
cont
,
true
)"
[
innerHtml
]="
cont
.
text
"
></span>
</span>
</div>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<h2>
空格是否校验对错:
</h2>
<div
*
ngFor=
"let cont of item.contentArr; let i = index"
style=
"margin-bottom: 5px; "
>
<div
*
ngIf=
"cont.block"
class=
"border-solid"
style=
"display: flex;"
>
<span
style=
"margin-right: 20px;font-size: 18px;font-weight: bold;"
>
{{cont.text}}
</span>
<nz-radio-group
[
ngModel
]="
cont
.
check
"
(
ngModelChange
)="
customRadioChange
($
event
,
cont
,'
check
')"
style=
"font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;"
>
<label
nz-radio
nzValue=
"1"
>
检查对错
</label>
<label
nz-radio
nzValue=
"0"
>
无对错
</label>
</nz-radio-group>
<div
style=
" margin: 20px;width: 1000px;"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
style=
"display: flex;margin-top: 20px;"
>
<div
class=
"border-solid"
style=
"min-width: 1000px;"
>
<div
class=
"word-type-title"
>
题目{{i+1}}
</div>
<div
name=
"题目标题"
>
<div
style=
"width: 200px"
>
<span
style=
"font-size: 20px;"
>
题目标题
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
question
.
title
"
(
blur
)="
save
()"
>
</div>
</div>
<div
style=
"margin-top: 20px;"
>
<div
name=
"题干部分"
>
<div
class=
"word-type-option-title"
>
题干类型:
</div>
<div
style=
"margin-top: 5px;"
>
<nz-radio-group
[(
ngModel
)]="
question
.
mainType
"
(
ngModelChange
)="
save
()"
>
<label
nz-radio
nzValue=
"empty"
>
<span
[
style
]="{
color:question
.
mainType=
='empty'
?
'#
169BD5
'
:
'#
000
'}"
>
无
</span>
</label>
<label
nz-radio
nzValue=
"img"
>
<span
[
style
]="{
color:question
.
mainType=
='img'
?
'#
169BD5
'
:
'#
000
'}"
>
图片
</span>
</label>
<label
nz-radio
nzValue=
"text"
>
<span
[
style
]="{
color:question
.
mainType=
='text'
?
'#
169BD5
'
:
'#
000
'}"
>
文字
</span>
</label>
<label
nz-radio
nzValue=
"img_text"
>
<span
[
style
]="{
color:question
.
mainType=
='img_text'
?
'#
169BD5
'
:
'#
000
'}"
>
文字+图片
</span>
</label>
</nz-radio-group>
</div>
<div>
<div
class=
"option-img"
>
<div
*
ngIf=
"question.mainType=='img' || question.mainType =='img_text'"
style=
"width: 200px;"
>
<span
style=
"font-size: 20px;"
>
图片:
</span>
<app-upload-image-with-preview
[
picUrl
]="
question
.
mainImage
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
mainImage
',
question
)"
>
</app-upload-image-with-preview>
</div>
</div>
<div
class=
"option-text"
>
<div
*
ngIf=
"question.mainType=='text' || question.mainType =='img_text'"
style=
"width: 1000px"
>
<span
style=
"font-size: 20px;"
>
文本:
</span>
<div
class=
"border-dashed"
style=
"width: 900px;"
>
<h2>
空格分隔选词:
</h2>
<textarea
rows=
"4"
nz-input
[(
ngModel
)]="
question
.
mainText
"
(
blur
)="
changeMain
(
i
)"
></textarea>
</div>
<div
class=
"border-dashed"
style=
"width: 900px;"
>
<h2>
点击文本设置高亮:
</h2>
<span
*
ngFor=
"let cont of question.mainTextArr; let i = index"
style=
"margin-bottom: 5px; "
>
<span
*
ngIf=
"cont.block"
class=
"option-title-line"
(
click
)="
onBlock
(
cont
,
false
)"
[
innerHtml
]="
cont
.
text
"
></span>
<span
*
ngIf=
"!cont.block"
class=
"option-title"
(
click
)="
onBlock
(
cont
,
true
)"
[
innerHtml
]="
cont
.
text
"
></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style=
"margin-top: 20px;"
>
<button
class=
"btn-blue"
style=
"width: 1000px; height: 50px;"
nz-button
nzType=
"default"
nzDanger
(
click
)="
addQuestion
()"
>
+增加题目
</button>
</div>
<nz-modal
[(
nzVisible
)]="
isVisible
"
[
nzTitle
]="
null
"
[
nzContent
]="
modalContent
"
[
nzFooter
]="
modalFooter
"
(
nzOnCancel
)="
handleCancel
()"
>
</div>
<ng-template
#
modalContent
>
<p>
{{deleteTitle}}
</p>
</ng-template>
<nz-modal
[(
nzVisible
)]="
isVisible
"
[
nzTitle
]="
null
"
[
nzContent
]="
modalContent
"
[
nzFooter
]="
modalFooter
"
(
nzOnCancel
)="
handleCancel
()"
>
<ng-template
#
modalFooter
>
<button
nz-button
nzType=
"default"
(
click
)="
handleCancel
()"
>
取消
</button>
<button
nz-button
nzType=
"primary"
(
click
)="
handleOk
()"
>
确定
</button>
</ng-template>
</nz-modal>
</div>
<ng-template
#
modalContent
>
<p>
{{deleteTitle}}
</p>
</ng-template>
<ng-template
#
modalFooter
>
<button
nz-button
nzType=
"default"
(
click
)="
handleCancel
()"
>
取消
</button>
<button
nz-button
nzType=
"primary"
(
click
)="
handleOk
()"
>
确定
</button>
</ng-template>
</nz-modal>
</div>
\ No newline at end of file
</div>
</div>
\ No newline at end of file
form/src/app/form/form.component.ts
View file @
8f522f36
...
...
@@ -13,122 +13,24 @@ let replaceAll = function (str, s1, s2) {
})
export
class
FormComponent
extends
ComponentBase
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
saveKey
=
"
wood_input
"
;
// 1.猫动画可替换。
// 2.文本内容可替换。//字体随内容缩小。
// 3.语音替换。
// 4.背景可替换
// 5.3~10选项内容。
// 6.配置对应的坐标。
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']
// ]
// },
// },
{
name
:
'
选项图片
'
,
drag
:
true
,
pic
:
true
,
// audio: true,
},
// {
// name: '选项文本',
// drag: true,
// audio: true,
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ]
// },
// },
// {
// name: '拖拽结束区',
// rect: true,
// }
]
saveKey
=
"
dg28_drag
"
;
item
=
{
imgAni
:
{
ske
:
{},
tex
:
{},
png
:
{}
},
tipSwitch
:
1
,
//提示功能开关
tipType
:
"
page
"
,
tipBg
:
''
,
tipPage
:
[{
title
:
''
,
audio
:
''
}],
title
:
""
,
audio
:
""
,
audioName
:
""
,
image
:
''
,
jumpIdx
:
''
,
endImgAni
:
{
ske
:
{},
tex
:
{},
png
:
{}
},
endImgTitle
:
""
,
// 开始音频
auidoStart
:
""
,
auidoStartName
:
""
,
// 结束音频
auidoEnd
:
""
,
auidoEndName
:
""
,
// 肉饼引导音频
auidoMeet
:
""
,
auidoMeetName
:
""
,
// 蔬菜引导音频
auidoVegetable
:
""
,
auidoVegetableName
:
""
,
// 第一次完成音频
auidoFinish
:
""
,
auidoFinishName
:
""
,
points
:
""
,
tips
:
''
,
questionScore
:
0
,
//分数
questions
:
[],
questionText
:
""
,
...
...
@@ -158,7 +60,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
console
.
log
(
new
MetaFormCreator
().
create
());
if
(
this
.
item
.
questions
.
length
==
0
)
{
this
.
add
q
uestion
();
this
.
add
Q
uestion
();
}
}
...
...
@@ -187,14 +89,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
removePage
(
idx
)
{
this
.
item
.
tipPage
.
splice
(
idx
,
1
);
this
.
save
();
}
addPage
()
{
this
.
item
.
tipPage
.
push
({
title
:
""
,
audio
:
""
})
this
.
save
();
}
removequestion
(
idx
)
{
this
.
openDelete
(
"
确定删除题目?
"
,
()
=>
{
...
...
@@ -203,14 +97,15 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
})
}
addquestion
()
{
addQuestion
()
{
// 题目自带一堆东西不用添加选项部分
this
.
item
.
questions
.
push
({
options
:
[],
type
:
"
img
"
title
:
""
,
//大标题
mainType
:
""
,
//题干类型
mainText
:
""
,
//题干文字
mainTextArr
:
[],
//题干文字高亮
mainImage
:
""
,
//题干图片
});
while
(
this
.
item
.
questions
[
0
].
options
.
length
<
3
)
{
this
.
addoption
(
0
);
}
this
.
save
();
}
ngChange
(
i
,
j
)
{
...
...
@@ -229,10 +124,13 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
save
();
}
changeMain
()
{
changeMain
(
i
)
{
let
question
=
this
.
item
.
questions
[
i
]
//输出的数据可以识别到\n的换行符
let
arr
=
this
.
item
.
contentMain
.
split
(
"
"
);
let
oldArr
=
this
.
item
.
contentArr
.
concat
();
let
contentMain
=
question
.
mainText
;
let
contentArr
=
question
.
mainTextArr
||
[];
let
arr
=
contentMain
.
split
(
"
"
);
let
oldArr
=
contentArr
.
concat
();
let
contetArr
=
arr
.
map
(
ar
=>
{
let
obj
=
{
text
:
replaceAll
(
`
${
ar
}
`
,
"
\n
"
,
"
<br/>
"
),
...
...
@@ -249,7 +147,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
return
obj
;
})
this
.
item
.
conten
tArr
=
contetArr
;
question
.
mainTex
tArr
=
contetArr
;
console
.
log
(
contetArr
)
this
.
save
();
}
...
...
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