Commit 903276d7 authored by 范雪寒's avatar 范雪寒
parents a6f8e6e0 6aa3d128
...@@ -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);
} }
......
<div class="position-relative"> <div class="position-relative">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;"> <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" >
<i nz-icon nzType="tool" nzTheme="outline"></i> <i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}} {{btnName}}
</button> </button>
<!--配置龙骨面板--> <!--配置龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" <nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span> <span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false"
(nzChange)="skeJsonHandleChange($event)"> nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
...@@ -23,8 +25,11 @@ ...@@ -23,8 +25,11 @@
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span> <span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false"
(nzChange)="texJsonHandleChange($event)"> nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
...@@ -33,8 +38,11 @@ ...@@ -33,8 +38,11 @@
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span> <span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false"
(nzChange)="texPngHandleChange($event)"> nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
...@@ -47,4 +55,6 @@ ...@@ -47,4 +55,6 @@
</nz-modal> </nz-modal>
</div> </div>
\ No newline at end of file
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="text-align: center;">
<div style="padding: 10px;"> <div style="margin-top: 20px; margin-bottom: 20px;">
<div style="margin-top: 5px"> <app-upload-dragon-bone
<span>开始音频: </span> [btnName]=animaBtnName
<app-audio-recorder [skeJsonData]=data.skeJsonData
[audioUrl]="item.begin_audio" [texJsonData]=data.texJsonData
(audioUploaded)="onAudioUploadSuccess($event, 'begin_audio')" [texPngData]=data.texPngData
></app-audio-recorder> (save)="saveAnima($event, data)"
</div> (refreshEmitter)="refresh()"
<div style="margin-top: 5px"> >
<span>区分时间点: </span> </app-upload-dragon-bone>
<nz-input-number </div>
(nzBlur)="setBeginSepTime()"
[(ngModel)]="item.begin_sep_time" <div>
[nzStep]="1"></nz-input-number> 上传收获的图片: <br>
</div> <app-upload-image-with-preview
<div style="margin-top: 5px"> style="display: inline-block; width: 300px; height: 150px;"
<span>做题引导音频: </span> [picUrl]="data.havePic"
<app-audio-recorder (imageUploaded)="onImageUploadSuccess($event, 'havePic', data)">
[audioUrl]="item.guide_audio" </app-upload-image-with-preview>
(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>
<div style="margin-top: 5px"> </div>
<span>结尾音频: </span>
<app-audio-recorder <div *ngFor="let item of data.pageArr; let i = index" style="margin: 20px; padding: 20px; border: solid 2px #000; border-radius: 30px;">
[audioUrl]="item.end_audio" <h3 style="text-align: center;">制作索引页{{i+1}}</h3>
(audioUploaded)="onAudioUploadSuccess($event, 'end_audio')" <button style="float: right;" nz-button nzType="danger" (click)='deleteItem(i)'>删除</button>
></app-audio-recorder> 页码:<input type="text" style="width: 200px;" nz-input placeholder="请填写对应书页" [(ngModel)]="item.pageIdx" (blur)="saveItem()" />
<br><br>
<div>
<span>上传书页引导音频: </span> &nbsp;&nbsp;&nbsp;
<app-audio-recorder
style="display: inline-block;"
[audioUrl]="item.startAudio"
(audioUploaded)="onAudioUploadSuccess($event, 'startAudio', item)"
></app-audio-recorder>
</div>
<br>
<div>
上传书页背景图: <br>
<app-upload-image-with-preview
style="display: inline-block; width: 300px; height: 150px;"
[picUrl]="item.startBg"
(imageUploaded)="onImageUploadSuccess($event, 'startBg', item)">
</app-upload-image-with-preview>
</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,82 @@ import { JsonPipe } from '@angular/common'; ...@@ -8,88 +8,82 @@ 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; data;
customTypeGroupArr = [
{ animaBtnName = '上传龙骨动画';
name: '交互动画', animaNames = ['normal', 'wrong'];
anima: true,
audio: true,
// pic: true,
rect: true,
// text: true,
// isShowPos: true,
// isCopy: true,
label: '开始提示时间点', customTypeGroupArr = [
},
{
name: '显示动画',
anima: true,
// audio: true,
// pic: true,
// rect: true,
// text: true,
// isShowPos: true,
// isCopy: true,
// label: '开始提示时间点',
},
{ {
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: '开始提示时间点', // 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.data.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.data.pageArr.splice(index, 1);
this.save();
}
}
saveAnima(e, group) {
console.log('e:', e);
group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData;
this.save(); this.save();
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.data = {
havePic: "",
skeJsonData: {},
texJsonData: {},
texPngData: {},
pageArr: [],
};
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.data = data;
} }
this.init(); this.init();
...@@ -107,40 +101,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -107,40 +101,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
init() { init() {
if (!this.data.skeJsonData) {
} this.data.skeJsonData = null;
}
if (!this.data.texJsonData) {
/** this.data.texJsonData = null;
* 储存图片数据 }
* @param e if (!this.data.texPngData) {
*/ this.data.texPngData = null;
onImageUploadSuccess(e, key) { }
if (!this.data.havePic) {
this.item[key] = e.url; this.data.havePic = "";
this.save(); }
if (!this.data.pageArr) {
this.data.pageArr = [];
}
} }
/** /**
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, key, item) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
onImageUploadSuccess(e, key, item) {
setBeginSepTime() { item[key] = e.url;
this.save();
}
onWordAudioUploadSuccess(e, idx) {
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 +135,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -148,10 +135,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.data, null, this.saveKey);
this.refresh(); this.refresh();
console.log('this.item = ' + JSON.stringify(this.item)); console.log('this.pageArr = ' + JSON.stringify(this.data));
} }
/** /**
......
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