Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
T_FT_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
T_FT_01
Commits
beec69e8
Commit
beec69e8
authored
Oct 21, 2020
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
perf:完成配置界面开发
parent
fa703d42
Changes
7
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
9630 additions
and
78 deletions
+9630
-78
angular.json
form/angular.json
+5
-2
ObjBean.ts
form/src/app/bean/ObjBean.ts
+75
-0
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+5
-3
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+18
-8
form.component.html
form/src/app/form/form.component.html
+134
-32
form.component.ts
form/src/app/form/form.component.ts
+82
-33
yarn.lock
form/yarn.lock
+9311
-0
No files found.
form/angular.json
View file @
beec69e8
...
...
@@ -128,5 +128,8 @@
}
}
},
"defaultProject"
:
"ng-template-generator"
}
"defaultProject"
:
"ng-template-generator"
,
"cli"
:
{
"analytics"
:
"7ae231a8-358a-4ce6-9597-2bc03da77a3e"
}
}
\ No newline at end of file
form/src/app/bean/ObjBean.ts
0 → 100644
View file @
beec69e8
class
Obj
{
/**音频材料 */
audioUrl
:
String
;
/**图片材料 */
picUrl
:
String
;
/**值 */
val
:
String
;
}
export
class
Answer
extends
Obj
{
/**是否正确:0-否,1-是 */
isRight
:
String
;
}
export
class
Exercises
extends
Obj
{
/**备选择答案:3-5个 */
answers
:
Array
<
Answer
>
=
[];
/**序列帧 */
frames
:
Array
<
Frame
>
=
[];
hotZoneItemArr
=
[];
}
export
class
Frame
extends
Obj
{
}
export
class
Backgroud
extends
Obj
{
rect
=
{};
}
export
class
Title
extends
Obj
{
}
export
class
Item
{
bg
:
Backgroud
;
title
:
Title
;
//练习题
exercisesArr
:
Array
<
Exercises
>
=
[];
}
export
function
getDefaultItem
(){
const
item
=
new
Item
();
item
.
bg
=
new
Backgroud
();
item
.
title
=
new
Title
();
item
.
title
.
val
=
'
Find Body Part
'
return
item
;
}
export
function
getDefaultExercises
(){
const
exercises
=
new
Exercises
();
for
(
let
i
=
0
;
i
<
3
;
++
i
){
const
answer
=
new
Answer
();
answer
.
isRight
=
'
0
'
;
exercises
.
answers
.
push
(
answer
);
}
return
exercises
;
}
\ No newline at end of file
form/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
beec69e8
...
...
@@ -7,18 +7,19 @@
</div>
<div
nz-row
nzType=
"flex"
nzAlign=
"middle"
>
<!--
<div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5>
<div class="bg-box">
<app-upload-image-with-preview
[
picUrl
]="
bgItem
?.
u
rl
"
[picUrl]="bgItem?.
picU
rl"
(imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
-->
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
*
ngFor=
"let it of hotZoneArr; let i = index"
>
...
...
@@ -35,7 +36,8 @@
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<label
*
ngIf=
"isHasRect"
nz-radio
nzValue=
"rect"
>
矩形
</label>
<!--<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>
...
...
form/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
beec69e8
...
...
@@ -129,7 +129,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
this
.
bgItem
.
u
rl
=
e
.
url
;
this
.
bgItem
.
picU
rl
=
e
.
url
;
this
.
refreshBackground
();
}
...
...
@@ -148,22 +148,23 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if
(
!
this
.
bg
)
{
this
.
bg
=
new
MySprite
(
this
.
ctx
);
this
.
renderArr
.
push
(
this
.
bg
);
console
.
log
(
this
.
renderArr
)
}
const
bg
=
this
.
bg
;
if
(
this
.
bgItem
.
u
rl
)
{
bg
.
load
(
this
.
bgItem
.
u
rl
).
then
(()
=>
{
if
(
this
.
bgItem
.
picU
rl
)
{
bg
.
load
(
this
.
bgItem
.
picU
rl
).
then
(()
=>
{
const
rate1
=
this
.
canvasWidth
/
bg
.
width
;
const
rate2
=
this
.
canvasHeight
/
bg
.
height
;
const
rate
=
Math
.
min
(
rate1
,
rate2
);
bg
.
setScaleXY
(
rate
);
bg
.
x
=
this
.
canvasWidth
/
2
;
bg
.
y
=
this
.
canvasHeight
/
2
;
if
(
callBack
)
{
callBack
();
}
...
...
@@ -382,6 +383,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
initItem
()
{
//定时刷新背景图片
const
refreshBg
=
()
=>
{
setInterval
(()
=>
{
this
.
refreshBackground
();
},
2000
);
}
if
(
!
this
.
bgItem
)
{
this
.
bgItem
=
{};
}
else
{
...
...
@@ -401,6 +410,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
initHotZoneArr
();
}
refreshBg
();
});
}
...
...
@@ -506,7 +516,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData
()
{
console
.
log
(
this
.
wrap
.
nativeElement
)
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
mapScale
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
...
...
form/src/app/form/form.component.html
View file @
beec69e8
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
style=
"width: 300px;"
align=
'center'
>
<span>
图1:
</span>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
>
</app-upload-image-with-preview>
<div
nz-row
>
<div
nz-col
nzOffset=
'4'
>
<h1
nz-title
>
课程练习内容编辑
</h1>
</div>
</div>
<div
style=
"width: 300px; margin-top: 5px;"
align=
'center'
>
<span>
图2:
</span>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url_2
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
>
</app-upload-image-with-preview>
<div
nz-row
>
<div
nz-col
[
nzSpan
]="
20
"
nzOffset=
"2"
>
<div
nz-form
>
<div
id=
'title-anchor'
>
<nz-divider
nzText=
"基本信息"
nzOrientation=
"left"
></nz-divider>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title"
>
标题
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<nz-input-group
nzAddOnBefore=
"Part"
>
<input
type=
"text"
id=
"title"
nz-input
[(
ngModel
)]="
item
.
title
.
val
"
(
blur
)="
save
()"
>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"audioUrl"
>
发音
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-audio-recorder
[
audioUrl
]="
item
.
title
.
audioUrl
"
id=
"audioUrl"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
item
.
title
,
'
audioUrl
')"
>
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
>
背景图片
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
bg
.
picUrl
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
bg
,
'
picUrl
')"
>
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
<div
style=
"width: 300px; margin-top: 15px;"
>
<span>
文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
<div
nz-row
>
<div
id=
'listen-anchor'
nz-col
[
nzSpan
]="
20
"
nzOffset=
"2"
>
<nz-divider
nzText=
"练习题"
nzOrientation=
"left"
></nz-divider>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
nzFor=
"exercises"
>
操作
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<button
nz-button
nzType=
"dashed"
class=
"add-btn"
id=
"add-btn"
(
click
)="
addExercisesItem
()"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div
nz-col
[
nzSpan
]="
20
"
nzOffset=
"2"
class=
'border'
>
<div
*
ngFor=
"let data of item.exercisesArr;let i = index"
>
<div
class=
'border-lite'
>
内容:{{i+1}}
<button
style=
"margin: 10px;"
nz-button
nzType=
"danger"
(
click
)="
delExercisesItem
(
i
)"
>
<span>
删除
</span>
</button>
</div>
<app-custom-hot-zone
[
bgItem
]="
item
.
bg
"
[
hotZoneItemArr
]="
data
.
hotZoneItemArr
"
(
save
)="
saveData
($
event
,
i
)"
></app-custom-hot-zone>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
>
序列帧动画
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<button
nz-button
nzType=
"dashed"
class=
"add-btn"
id=
"add-btn"
(
click
)="
addFrame
(
data
,
'
frames
')"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control
[
nzOffset
]="
2
"
[
nzSpan
]="
18
"
>
<div
nz-col
[
nzSpan
]="
6
"
*
ngFor=
"let frame of data.frames;let m = index"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
frame
.
picUrl
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
frame
,
'
picUrl
')"
>
</app-upload-image-with-preview>
<button
style=
"margin: 10px;"
nz-button
nzType=
"danger"
(
click
)="
delFrame
(
data
,
'
frames
',
m
)"
>
<span>
删除
</span>
</button>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
>
备选答案
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<button
nz-button
nzType=
"dashed"
class=
"add-btn"
id=
"add-btn"
(
click
)="
addAnswer
(
data
,
'
answers
')"
[
disabled
]="
data
.
answers
.
length =
=
5
?
true
:
false
"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control
[
nzOffset
]="
2
"
[
nzSpan
]="
18
"
>
<nz-table
#
answerTable
nzBordered
nzTitle=
"备选答案"
[
nzData
]="
data
.
answers
"
[
nzShowPagination
]=
false
>
<thead>
<tr>
<th>
序号
</th>
<th>
音频
</th>
<th>
图片
</th>
<th>
是否正确答案
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr
*
ngFor=
"let answer of answerTable.data;let j = index"
>
<td>
{{ j+1 }}
</td>
<td>
<app-audio-recorder
[
audioUrl
]="
answer
.
audioUrl
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
answer
,
'
audioUrl
')"
>
</app-audio-recorder>
</td>
<td>
<app-upload-image-with-preview
[
picUrl
]="
answer
.
picUrl
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
answer
,
'
picUrl
')"
>
</app-upload-image-with-preview>
</td>
<td>
<nz-radio-group
[(
ngModel
)]="
answer
.
isRight
"
(
ngModelChange
)="
save
()"
>
<label
nz-radio
nzValue=
"1"
>
是
</label>
<label
nz-radio
nzValue=
"0"
>
否
</label>
</nz-radio-group>
</td>
<td>
<button
nz-button
nzType=
"danger"
(
click
)="
delAnswer
(
data
,
'
answers
',
j
)"
[
disabled
]="
data
.
answers
.
length =
=
3
?
true
:
false
"
>
<span>
删除
</span>
</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
<div
style=
"margin-top: 5px"
>
<span>
音频:
</span>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
></app-audio-recorder>
</div>
</div>
</div>
</div>
\ No newline at end of file
form/src/app/form/form.component.ts
View file @
beec69e8
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
Answer
,
Frame
,
getDefaultExercises
,
getDefaultItem
}
from
'
../bean/ObjBean
'
;
@
Component
({
...
...
@@ -10,32 +11,18 @@ import { JsonPipe } from '@angular/common';
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
saveKey
=
"
test_0
01
"
;
saveKey
=
"
FT-
01
"
;
// 储存对象
item
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
createShell
()
{
this
.
item
.
wordList
.
push
({
word
:
''
,
audio
:
''
,
backWord
:
''
,
backWordAudio
:
''
,
});
this
.
save
();
}
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
removeShell
(
idx
)
{
this
.
item
.
wordList
.
splice
(
idx
,
1
);
this
.
save
();
}
ngOnInit
()
{
this
.
item
=
{}
;
this
.
item
=
getDefaultItem
()
;
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
...
...
@@ -59,28 +46,29 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
init
()
{
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
key
)
{
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
item
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
item
[
key
]
=
e
.
url
;
this
.
save
();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
item
,
key
)
{
item
[
key
]
=
e
.
url
;
this
.
save
();
}
onWordAudioUploadSuccess
(
e
,
idx
)
{
this
.
item
.
wordList
[
idx
].
audio
=
e
.
url
;
...
...
@@ -111,4 +99,65 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
},
1
);
}
/**
* 添加练习
*/
addExercisesItem
()
{
let
exercises
=
getDefaultExercises
();
this
.
item
.
exercisesArr
.
push
(
exercises
);
this
.
save
();
}
delExercisesItem
(
index
)
{
if
(
index
!==
-
1
)
{
this
.
item
.
exercisesArr
.
splice
(
index
,
1
);
this
.
save
();
}
}
addAnswer
(
exercises
,
key
){
let
answer
=
new
Answer
();
exercises
[
key
]
=
[...
exercises
[
key
],
answer
];
this
.
save
();
}
delAnswer
(
exercises
,
key
,
index
)
{
if
(
index
!==
-
1
)
{
exercises
[
key
].
splice
(
index
,
1
);
exercises
[
key
]
=
[...
exercises
[
key
]];
this
.
save
();
}
}
addFrame
(
exercises
,
key
){
let
frame
=
new
Frame
();
exercises
[
key
]
=
[...
exercises
[
key
],
frame
];
this
.
save
();
}
delFrame
(
exercises
,
key
,
index
)
{
if
(
index
!==
-
1
)
{
exercises
[
key
].
splice
(
index
,
1
);
exercises
[
key
]
=
[...
exercises
[
key
]];
this
.
save
();
}
}
saveData
(
e
,
i
)
{
console
.
log
(
'
savedata e:
'
,
e
);
this
.
item
.
bg
=
e
.
bgItem
;
this
.
item
.
exercisesArr
[
i
].
hotZoneItemArr
=
e
.
hotZoneItemArr
;
this
.
save
();
}
}
\ No newline at end of file
form/yarn.lock
0 → 100644
View file @
beec69e8
This diff is collapsed.
Click to expand it.
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