Commit 88de4761 authored by liujiangnan's avatar liujiangnan

feat: 初始化表单

parent 70303cba
No related merge requests found
No preview for this file type
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
...@@ -28,8 +28,8 @@ ...@@ -28,8 +28,8 @@
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"node-sass": "4.14.0",
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"node-sass": "^4.0.0",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.10.2" "zone.js": "~0.10.2"
......
File moved
File moved
...@@ -6,7 +6,7 @@ import { Component , OnInit} from '@angular/core'; ...@@ -6,7 +6,7 @@ import { Component , OnInit} from '@angular/core';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
type = 'form'; type = 'play';
constructor() { constructor() {
const tp = this.getQueryString('type'); const tp = this.getQueryString('type');
......
...@@ -81,6 +81,10 @@ ...@@ -81,6 +81,10 @@
} }
} }
.anima-upload-btn {
padding: 10px;
}
h5 { h5 {
margin-top: 1rem; margin-top: 1rem;
} }
...@@ -89,8 +93,8 @@ h5 { ...@@ -89,8 +93,8 @@ h5 {
@font-face @font-face
{ {
font-family: 'BRLNSR_1'; font-family: 'ahronbd-1';
src: url("/assets/font/BRLNSR_1.TTF") ; src: url("/assets/font/ahronbd-1.ttf") ;
} }
...@@ -105,106 +109,3 @@ h5 { ...@@ -105,106 +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;
//}
<div class="model-content">
<div style="padding: 10px;">
<div style="margin-top: 5px">
<span>开始音频: </span>
<app-audio-recorder
[audioUrl]="item.begin_audio"
(audioUploaded)="onAudioUploadSuccess($event, 'begin_audio')"
></app-audio-recorder>
</div>
<div style="margin-top: 5px">
<span>区分时间点: </span>
<nz-input-number
(nzBlur)="setBeginSepTime()"
[(ngModel)]="item.begin_sep_time"
[nzStep]="1"></nz-input-number>
</div>
<div style="margin-top: 5px">
<span>做题引导音频: </span>
<app-audio-recorder
[audioUrl]="item.guide_audio"
(audioUploaded)="onAudioUploadSuccess($event, 'guide_audio')"
></app-audio-recorder>
</div>
<div style="margin-top: 5px">
<span>背景循环音频: </span>
<app-audio-recorder
[audioUrl]="item.playing_audio"
(audioUploaded)="onAudioUploadSuccess($event, 'playing_audio')"
></app-audio-recorder>
</div>
<!-- <div style="margin-top: 5px">-->
<!-- <span>做题引导音频: </span>-->
<!-- <app-audio-recorder-->
<!-- [audioUrl]="item.guide_audio"-->
<!-- (audioUploaded)="onAudioUploadSuccess($event, 'guide_audio')"-->
<!-- ></app-audio-recorder>-->
<!-- </div>-->
<div style="margin-top: 5px">
<span>正确提示音: </span>
<app-audio-recorder
[audioUrl]="item.right_audio"
(audioUploaded)="onAudioUploadSuccess($event, 'right_audio')"
></app-audio-recorder>
</div>
<div style="margin-top: 5px">
<span>默认错误提示音: </span>
<app-audio-recorder
[audioUrl]="item.wrong_audio"
(audioUploaded)="onAudioUploadSuccess($event, 'wrong_audio')"
></app-audio-recorder>
</div>
<div style="margin-top: 5px">
<span>错误提示音频1: </span>
<app-audio-recorder
[audioUrl]="item.wrong_audio1"
(audioUploaded)="onAudioUploadSuccess($event, 'wrong_audio1')"
></app-audio-recorder>
</div>
<div style="margin-top: 5px">
<span>错误提示音频2: </span>
<app-audio-recorder
[audioUrl]="item.wrong_audio2"
(audioUploaded)="onAudioUploadSuccess($event, 'wrong_audio2')"
></app-audio-recorder>
</div>
<div style="margin-top: 5px">
<span>结尾音频: </span>
<app-audio-recorder
[audioUrl]="item.end_audio"
(audioUploaded)="onAudioUploadSuccess($event, 'end_audio')"
></app-audio-recorder>
</div>
<h2>热区配置:</h2>
<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>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
</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>
<div style="width: 300px; margin-top: 15px;">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</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>
...@@ -10,10 +10,58 @@ import { JsonPipe } from '@angular/common'; ...@@ -10,10 +10,58 @@ import { JsonPipe } from '@angular/common';
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_001"; saveKey = 'test_op15';
// 储存对象 // 储存对象
item; item;
customTypeGroupArr = [
{
name: '交互动画',
anima: true,
audio: true,
// pic: true,
rect: true,
// text: true,
// isShowPos: true,
// isCopy: true,
label: '开始提示时间点',
},
{
name: '显示动画',
anima: true,
// audio: true,
// pic: true,
// rect: true,
// text: true,
// isShowPos: true,
// isCopy: true,
// label: '开始提示时间点',
},
{
name: '图片',
// anima: true,
// audio: true,
pic: true,
rect: true,
// text: true,
// isShowPos: true,
// isCopy: true,
// label: '开始提示时间点',
},
];
saveHotZone(group, e) {
console.log('e: ', e);
const {bgItem, hotZoneItemArr} = e;
group.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr;
this.save();
}
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -82,6 +130,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -82,6 +130,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
setBeginSepTime() {
this.save();
}
onWordAudioUploadSuccess(e, idx) { onWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].audio = e.url; this.item.wordList[idx].audio = e.url;
this.save(); this.save();
......
...@@ -57,7 +57,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,7 +57,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'test_op15';
btnLeft; btnLeft;
......
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
File moved
This diff is collapsed.
This diff is collapsed.
File moved
File moved
File moved
File moved
File moved
File moved
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment