Commit c199c49c authored by liujiangnan's avatar liujiangnan

feat: 表单配置

parent 88de4761
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "13fe2fd7-277c-409d-bfc5-8c084b10cab6"
}
}
\ No newline at end of file
This diff is collapsed.
...@@ -675,7 +675,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -675,7 +675,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
showItemPic(item) { showItemPic(item) {
item.pic.visible = true; item.pic.visible = true;
item.itemType = 'pic'; item.itemType = 'pic';
this.showArrowTop(item) this.showArrowTop(item, true)
} }
showItemLabel(item) { showItemLabel(item) {
...@@ -1718,10 +1718,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1718,10 +1718,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) { if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item); this.changeItemSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) { } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
// this.changeItemTopSize(item); this.changeItemTopSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) { } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
// this.changeItemRightSize(item); this.changeItemRightSize(item);
} else { } else {
this.changeCurItem(item); this.changeCurItem(item);
} }
......
export const defaultData = {
bookPages: [{
pageIdx: 1, // 第几页
startAudio: 'http://xxxx.mp3', // 页码引导音频
startBg: 'http://xxxx.jpg', // 页码背景图片
scanImg: 'http://xxxx.jpg', // 页码扫描图片
bgItem: {
guidAudio: 'http://xxxx.mp3', // 热区引导音频
guidBg: 'http://xxxx.jpg', // 热区背景图片
},
hotZoneArr: [{ // 数组顺序
rect: { x: 0, y: 0, width: 100, height: 100 },
}, { // 数组顺序
rect: { x: 0, y: 0, width: 100, height: 100 },
}]
}]
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;"> <div *ngFor="let item of pageArr; let i = index" style="margin: 20px; padding: 20px; border: solid 2px #000; border-radius: 30px;">
<div style="margin-top: 5px"> <button style="float: right;" nz-button nzType="danger" (click)='deleteItem(i)'>删除</button>
<span>开始音频: </span> <input type="text" style="width: 200px;" nz-input placeholder="请填写对应书页" [(ngModel)]="item.pageIdx" (blur)="saveItem()" />
<app-audio-recorder <br><br>
[audioUrl]="item.begin_audio" <div>
(audioUploaded)="onAudioUploadSuccess($event, 'begin_audio')" <span>上传书页引导音频: </span> &nbsp;&nbsp;&nbsp;
></app-audio-recorder> <app-audio-recorder
</div> style="display: inline-block;"
<div style="margin-top: 5px"> [audioUrl]="item.startAudio"
<span>区分时间点: </span> (audioUploaded)="onAudioUploadSuccess($event, 'startAudio', item)"
<nz-input-number ></app-audio-recorder>
(nzBlur)="setBeginSepTime()" </div>
[(ngModel)]="item.begin_sep_time" <br>
[nzStep]="1"></nz-input-number> <div>
</div> 上传书页背景图: <br>
<div style="margin-top: 5px"> <app-upload-image-with-preview
<span>做题引导音频: </span> style="display: inline-block; width: 300px; height: 150px;"
<app-audio-recorder [picUrl]="item.startBg"
[audioUrl]="item.guide_audio" (imageUploaded)="onImageUploadSuccess($event, 'startBg', item)">
(audioUploaded)="onAudioUploadSuccess($event, 'guide_audio')" </app-upload-image-with-preview>
></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> </div>
<h2>热区配置:</h2> <br><br>
<span>配置书页: </span>
<app-custom-hot-zone <app-custom-hot-zone
[bgItem]="item.bgItem" [bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr" [hotZoneItemArr]="item.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr" [customTypeGroupArr]="customTypeGroupArr"
(save)="saveHotZone(item, $event)" (save)="saveHotZone(item, $event)"
> >
</app-custom-hot-zone> </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>
<br>
<div style="text-align: center;">
<button nz-button nzType="primary" (click)='addItem()'>添加书页</button>
</div>
<br><br>
</div> </div>
...@@ -8,88 +8,64 @@ import { JsonPipe } from '@angular/common'; ...@@ -8,88 +8,64 @@ import { JsonPipe } from '@angular/common';
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.css']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = 'test_op15'; saveKey = 'ng_game_select';
// 储存对象 // 储存对象
item; pageArr;
customTypeGroupArr = [ customTypeGroupArr = [
{ {
name: '交互动画', name: '热区',
anima: true, // anima: true,
audio: true, audio: true,
// pic: true, // pic: true,
rect: true, rect: true,
// text: true, // text: true,
// isShowPos: true, // isShowPos: true,
// isCopy: 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: '开始提示时间点', // label: '开始提示时间点',
}, },
]; ];
saveHotZone(group, e) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
saveHotZone(item, e) {
console.log('e: ', e); console.log('e: ', e);
const {bgItem, hotZoneItemArr} = e; const {bgItem, hotZoneItemArr} = e;
group.bgItem = bgItem; item.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr; item.hotZoneItemArr = hotZoneItemArr;
item.scanImg = bgItem.url;
this.save(); this.save();
} }
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { addItem () {
this.pageArr.push({});
} }
createShell() { saveItem() {
this.item.wordList.push({
word: '',
audio: '',
backWord: '',
backWordAudio: '',
});
this.save(); this.save();
} }
removeShell(idx) { deleteItem(index) {
this.item.wordList.splice(idx, 1); if (index !== -1) {
this.save(); this.pageArr.splice(index, 1);
this.save();
}
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.pageArr = [];
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.pageArr = data;
} }
this.init(); this.init();
...@@ -110,37 +86,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -110,37 +86,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
/** /**
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, key, item) {
this.item[key] = e.url; item[key] = e.url;
this.save();
}
setBeginSepTime() {
this.save(); this.save();
} }
onImageUploadSuccess(e, key, item) {
onWordAudioUploadSuccess(e, idx) { item[key] = e.url;
this.item.wordList[idx].audio = e.url;
this.save();
}
onBackWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].backWordAudio = e.url;
this.save(); this.save();
} }
...@@ -148,10 +103,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -148,10 +103,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.pageArr, null, this.saveKey);
this.refresh(); this.refresh();
console.log('this.item = ' + JSON.stringify(this.item)); console.log('this.pageArr = ' + JSON.stringify(this.pageArr));
} }
/** /**
......
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