Commit 88de4761 authored by liujiangnan's avatar liujiangnan

feat: 初始化表单

parent 70303cba
No preview for this file type
...@@ -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"
...@@ -55,4 +55,4 @@ ...@@ -55,4 +55,4 @@
"tslint": "~5.18.0", "tslint": "~5.18.0",
"typescript": "~3.7.5" "typescript": "~3.7.5"
} }
} }
\ No newline at end of file
...@@ -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();
...@@ -111,4 +163,4 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -111,4 +163,4 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
} }
\ No newline at end of file
...@@ -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;
......
This diff is collapsed.
This diff is collapsed.
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