Commit ada42ef3 authored by Chen Jiping's avatar Chen Jiping

完成课件18开发

parent a7e92ed4
This diff is collapsed.
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<div nz-row>
<div nz-col nzOffset="2" [nzSpan]="16">
<div nz-row>
<div nz-col nzOffset='4' [nzSpan]="12"><h1 nz-title>课程内容编辑</h1></div>
</div>
<div style="position: absolute; left: 1000px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"
></app-upload-image-with-preview>
<div nz-form>
<div id='title-anchor'>
<nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_val1">标题</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Lesson">
<input type="text" id="t_val1" nz-input [(ngModel)]="item.title.t_val" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.audio_url_2"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
></app-audio-recorder>
[audioUrl]="item.title.t_audio_url" id="t_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 't_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div id='word-anchor'>
<nz-divider nzText="单词信息" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3" class="add-btn-box">
<nz-affix [nzOffsetTop]="120">
<button nz-button nzType="dashed" nzTooltipTitle="添加单词" nzTooltipPlacement="right" class="add-btn" id="add-btn"
(click)="addWordItem()" nz-tooltip>
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-affix>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="10" nzOffset="3">
<div *ngFor="let it of item.words; let i = index">
<nz-card nzType="inner" style="margin-top:16px;" nzTitle="单词 {{i + 1}}" [nzExtra]="delWordTemplate">
<div nz-form id="word-anchor-{{i + 1}}">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="12">
<input type="text" nz-input placeholder="Please input word" [(ngModel)]="it.word_val" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="word_pic_url">发音</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder id="it.word_audio_url"
[audioUrl]="it.word_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, it, 'word_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
</nz-card>
<ng-template #delWordTemplate>
<button nz-button nzType="danger" id="del-word-btn"
(click)="deleteArrItem(item.words, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>
</ng-template>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
<div nz-col nzOffset="2" [nzSpan]="4">
<nz-affix style="position: absolute; margin-top: 100px;margin-right: 10px;">
<nz-anchor>
<nz-link nzHref="#title-anchor" nzTitle="标题"></nz-link>
<nz-link nzHref="#word-anchor" nzTitle="单词信息">
<nz-link *ngFor="let it of item.words; let i = index" nzHref="#word-anchor-{{i}}" nzTitle="单词 {{i + 1}}">
</nz-link>
</nz-link>
</nz-anchor>
</nz-affix>
</div>
</div>
</div>
......
......@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "ym_018";
// 储存对象
item;
word_arr = [];
constructor(private appRef: ApplicationRef) {
......@@ -31,6 +32,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data;
}
console.log('item', this.item);
this.init();
this.refresh();
......@@ -49,6 +52,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
//标题
if(!this.item.title){
this.item.title = {
t_val:'1'
};
}
if(!this.item.words){
this.item.words = this.word_arr;
}
else{
this.word_arr = this.item.words;
}
}
......@@ -56,9 +72,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -66,9 +82,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -78,6 +94,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
console.log('item', this.item);
(<any> window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......@@ -91,5 +108,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
wordItemData(){
return {
word_val: "",
word_audio_url: ""
};
}
/**
* 添加单词项
*/
addWordItem(){
let word = this.wordItemData();
this.word_arr.push(word);
this.save();
}
/**
* 删除数组指定索引项
* @param arrItem 数组对象
* @param index 索引
*/
deleteArrItem(arrItem, index){
if (index !== -1) {
arrItem.splice(index, 1);
}
this.save();
}
}
......@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite {
}
}
export class ShapeRoundRect extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class ShapeCircle extends MySprite {
fillColor = '#FF0000';
......
......@@ -17,3 +17,8 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
\ No newline at end of file
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