Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gs_carton
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
gs_carton
Commits
3fb3f0a6
Commit
3fb3f0a6
authored
Nov 15, 2024
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
debug
parent
cd5503d8
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
63 additions
and
100 deletions
+63
-100
form.component.css
src/app/form/form.component.css
+18
-2
form.component.html
src/app/form/form.component.html
+26
-33
form.component.ts
src/app/form/form.component.ts
+19
-65
No files found.
src/app/form/form.component.css
View file @
3fb3f0a6
...
...
@@ -28,8 +28,9 @@
.current-time-display
{
font-size
:
14px
;
color
:
#333
;
/* 深灰色文字 */
margin-top
:
10px
;
/* margin-top: 10px; */
padding
:
5px
;
margin-left
:
40px
;
background-color
:
#f9f9f9
;
/* 浅灰色背景 */
border
:
1px
solid
#ddd
;
/* 边框 */
border-radius
:
5px
;
/* 圆角 */
...
...
@@ -47,7 +48,8 @@
}
.hot-zone-container
{
margin-bottom
:
15px
;
margin-top
:
25px
;
margin-bottom
:
25px
;
border
:
1px
solid
#ddd
;
border-radius
:
5px
;
padding
:
10px
;
...
...
@@ -61,6 +63,7 @@
border-radius
:
5px
;
cursor
:
pointer
;
margin-bottom
:
5px
;
float
:
right
;
}
.hot-zone-content
{
...
...
@@ -68,3 +71,16 @@
background-color
:
#f8f9fa
;
border-radius
:
5px
;
}
.bg-box
{
margin-bottom
:
1rem
;
}
.add-btn
{
margin-top
:
1rem
;
margin-right
:
1rem
;
margin-bottom
:
1rem
;
width
:
150px
;
height
:
60px
;
display
:
inline-block
;
}
src/app/form/form.component.html
View file @
3fb3f0a6
<div
class=
"model-content"
>
<div
style=
"display: flex; align-items: center; margin-top: 20px;"
>
<div
style=
"position: fixed; top: 20px; left: 20px; right: 20px; z-index: 1000; background-color: #fff; padding: 20px; border-radius: 10px;"
>
<div
style=
"display: flex; align-items: center;"
>
<h4>
音频添加:
</h4>
<app-audio-recorder
style=
"margin-left: 20px"
[
audioUrl
]="
item
.
bg_audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
bg_audio_url
',
item
)"
>
</app-audio-recorder>
<div
class=
"current-time-display"
>
当前播放时间: [
<span
style=
"color: #0beb40;"
>
{{ currentTime }}
</span>
]毫秒
</div>
</div>
<div
id=
"waveform"
></div>
<div
*
ngIf=
"item.bg_audio_url"
>
<button
(
click
)="
togglePlayPause
()"
class=
"play-pause-button"
>
{{ isPlaying ? '暂停' : '播放' }}
</button>
<div
class=
"current-time-display"
>
当前播放时间: {{ currentTime }} 毫秒
</div>
<button
(
click
)="
addHotZone
()"
class=
"play-pause-button"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加页面
</button>
</div>
</div>
<
button
(
click
)="
addHotZone
()"
class=
"add-hot-zone-button"
>
添加热区
</button
>
<
div
style=
"height: 300px;"
>
</div
>
<div
*
ngFor=
"let hotZone of hotZones; let i = index"
class=
"hot-zone-container"
>
<button
(
click
)="
toggleCollapse
(
i
)"
class=
"toggle-button"
>
{{ isCollapsed[i] ? '展开' : '折叠' }}
第【{{i+1}}】页
<span
style=
"color: #04f1dd;"
>
{{ isCollapsed[i] ? '点击展开' : '点击折叠' }}
</span>
</button>
<div
*
ngIf=
"!isCollapsed[i]"
class=
"hot-zone-content"
>
<app-custom-hot-zone
[
bgItem
]="
bgItem
"
[
hotZoneItemArr
]="
hotZoneItemArr
"
[
hotZoneFontObj
]="
null
"
(
save
)="
saveHotZone
($
event
)"
[
bgItem
]="
hotZone
.
bgItem
"
[
hotZoneItemArr
]="
hotZone
.
hotZoneItemArr
"
(
save
)="
saveHotZone
($
event
,
i
)"
>
</app-custom-hot-zone>
</div>
</div>
<div
style=
"padding: 20px"
>
<app-custom-hot-zone
[
bgItem
]="
bgItem
"
[
hotZoneItemArr
]="
hotZoneItemArr
"
[
hotZoneFontObj
]="
null
"
(
save
)="
saveHotZone
($
event
)"
>
</app-custom-hot-zone>
</div>
</div>
src/app/form/form.component.ts
View file @
3fb3f0a6
...
...
@@ -13,10 +13,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey
=
"
gs_cartoon
"
;
// 储存对象
item
;
bgItem
=
{};
hotZoneItemArr
=
[];
animaArr
=
[];
picArr
;
wavesurfer
;
isPlaying
:
boolean
=
false
;
// 用于跟踪播放状态
currentTime
:
number
=
0
;
...
...
@@ -60,11 +56,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init
()
{
this
.
bgItem
=
this
.
item
.
bgItem
||
{};
this
.
hotZoneItemArr
=
this
.
item
.
hotZoneItemArr
||
[];
this
.
animaArr
=
this
.
item
.
animaArr
||
[];
this
.
picArr
=
this
.
item
.
picArr
||
[];
this
.
hotZones
=
this
.
item
.
hotZones
||
[];
this
.
isCollapsed
=
this
.
hotZones
.
map
((
item
,
index
)
=>
{
return
index
!==
0
;
});
// 使用 wavesurfer.js 绘制波形图
this
.
wavesurfer
=
WaveSurfer
.
create
({
...
...
@@ -87,19 +82,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
wavesurfer
.
load
(
this
.
item
.
bg_audio_url
);
}
this
.
refreshAnimaArr
();
}
updateCurrentTime
()
{
this
.
currentTime
=
Math
.
floor
(
this
.
wavesurfer
.
getCurrentTime
()
*
1000
);
// 转换为毫秒
}
addHotZone
()
{
this
.
hotZones
.
push
({});
// 添加一个新的热区
this
.
hotZones
.
push
({
bgItem
:
{},
hotZoneItemArr
:
[]
});
// 添加一个新的热区
this
.
isCollapsed
.
push
(
false
);
// 初始化为展开状态
}
toggleCollapse
(
index
:
number
)
{
this
.
isCollapsed
[
index
]
=
!
this
.
isCollapsed
[
index
];
// 切换折叠状态
// 切换折叠状态
this
.
isCollapsed
[
index
]
=
!
this
.
isCollapsed
[
index
];
// 确保只有一个热区是展开的
if
(
!
this
.
isCollapsed
[
index
])
{
this
.
isCollapsed
=
this
.
isCollapsed
.
map
((
collapsed
,
i
)
=>
i
===
index
?
false
:
true
);
}
}
/**
...
...
@@ -125,16 +128,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
save
();
}
saveHotZone
(
e
)
{
saveHotZone
(
e
,
i
)
{
console
.
log
(
'
e:
'
,
e
);
const
{
bgItem
,
hotZoneItemArr
}
=
e
;
this
.
bgItem
=
bgItem
;
this
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
hotZones
[
i
].
bgItem
=
bgItem
;
this
.
hotZone
s
[
i
].
hotZone
ItemArr
=
hotZoneItemArr
;
this
.
item
.
bgItem
=
bgItem
;
this
.
item
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
refreshAnimaArr
();
this
.
item
.
hotZones
=
this
.
hotZones
;
this
.
save
();
...
...
@@ -153,56 +153,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
isPlaying
=
!
this
.
isPlaying
;
// 切换播放状态
}
refreshAnimaArr
()
{
const
tmpArr
=
[];
this
.
hotZoneItemArr
.
forEach
((
item
:
any
)
=>
{
let
data
=
this
.
animaArr
.
find
((
anima
:
any
)
=>
{
return
anima
.
id
===
item
.
id
;
});
if
(
data
)
{
tmpArr
.
push
(
data
);
}
else
{
const
d1
=
this
.
createAnimaData
(
item
);
tmpArr
.
push
(
d1
);
}
});
this
.
animaArr
=
tmpArr
;
}
createAnimaData
(
hotZoneItem
)
{
const
animaData
=
{};
animaData
[
'
id
'
]
=
hotZoneItem
.
id
;
return
animaData
;
}
addPic
()
{
this
.
picArr
.
push
({
pic_url
:
''
,
audio_url
:
''
,
text
:
''
});
this
.
item
.
picArr
=
this
.
picArr
;
this
.
save
();
}
deletePic
(
i
)
{
this
.
picArr
.
splice
(
i
,
1
);
this
.
item
.
picArr
=
this
.
picArr
;
this
.
save
();
}
/**
* 储存数据
*/
save
()
{
console
.
log
(
'
this.item:
'
,
this
.
item
);
console
.
log
(
'
this.item JSON:
'
,
JSON
.
stringify
(
this
.
item
));
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
this
.
refresh
();
...
...
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