Commit 689d13b1 authored by liujiangnan's avatar liujiangnan

通用模板覆盖

parent 0d51c698
...@@ -166,6 +166,54 @@ ...@@ -166,6 +166,54 @@
</div> </div>
</nz-form-item> </nz-form-item>
</div> </div>
<nz-divider nzText="右侧单词" nzOrientation="left"></nz-divider>
<div nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.right.word_val" (blur)="saveWordItem(i,'right')">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="it.right.word_audio_url"
[audioUrl]="it.right.word_audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.right,'word_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<div nz-col [nzSpan]="22" nzOffset="1">
<nz-table [nzData]="it.right.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead>
<tr>
<th>字母</th>
<th>颜色</th>
<th>是否填空</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of it.right.letters;let j = index">
<td>{{data.letter_val}}</td>
<td>
<nz-select [(ngModel)]="data.letter_color" (ngModelChange)="saveItem()">
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</td>
<td>
<nz-select [(ngModel)]="data.is_" (ngModelChange)="saveItem()">
<nz-option nzValue="1" nzLabel="是"></nz-option>
<nz-option nzValue="0" nzLabel="否"></nz-option>
</nz-select>
</td>
</tr>
</tbody>
</nz-table>
</div>
</nz-form-item>
</div>
<button style="margin: 10px;" nz-button nzType="danger" (click)="deleteItem(i)"> <button style="margin: 10px;" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span> <span>删除</span>
</button> </button>
......
...@@ -159,6 +159,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -159,6 +159,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
word_val: '', word_val: '',
word_audio_url: '', word_audio_url: '',
letters: [] letters: []
},
right: {
word_val: '',
word_audio_url: '',
letters: []
} }
}; };
} }
......
...@@ -633,9 +633,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -633,9 +633,8 @@ export class PlayComponent implements OnInit, OnDestroy {
{letter_val: "a",letter_color: 'C02',is_: '0'}, {letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "t",letter_color: 'C02',is_: '0'} {letter_val: "t",letter_color: 'C02',is_: '0'}
] ]
} },
},{ right: {
left: {
word_val: 'ate', word_val: 'ate',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
...@@ -654,9 +653,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -654,9 +653,8 @@ export class PlayComponent implements OnInit, OnDestroy {
{letter_val: "a",letter_color: 'C02',is_: '0'}, {letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "t",letter_color: 'C02',is_: '0'} {letter_val: "t",letter_color: 'C02',is_: '0'}
] ]
} },
},{ right: {
left: {
word_val: 'ate', word_val: 'ate',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
...@@ -676,10 +674,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -676,10 +674,9 @@ export class PlayComponent implements OnInit, OnDestroy {
{letter_val: "a",letter_color: 'C02',is_: '0'}, {letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "p",letter_color: 'C02',is_: '0'} {letter_val: "p",letter_color: 'C02',is_: '0'}
] ]
} },
},{ right: {
left: { word_val: 'capexxxxxxxx',
word_val: 'capexxxxxxxxxxxx',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'}, {letter_val: "c",letter_color: 'C04',is_: '0'},
...@@ -693,10 +690,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -693,10 +690,6 @@ export class PlayComponent implements OnInit, OnDestroy {
{letter_val: "x",letter_color: 'C02',is_: '1'}, {letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'}, {letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'}, {letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'} {letter_val: "x",letter_color: 'C02',is_: '1'}
] ]
} }
...@@ -710,9 +703,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -710,9 +703,8 @@ export class PlayComponent implements OnInit, OnDestroy {
{letter_val: "a",letter_color: 'C02',is_: '0'}, {letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "p",letter_color: 'C02',is_: '0'} {letter_val: "p",letter_color: 'C02',is_: '0'}
] ]
} },
},{ right: {
left: {
word_val: 'tape', word_val: 'tape',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
...@@ -722,6 +714,90 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -722,6 +714,90 @@ export class PlayComponent implements OnInit, OnDestroy {
{letter_val: "e",letter_color: 'C02',is_: '1'} {letter_val: "e",letter_color: 'C02',is_: '1'}
] ]
} }
},
{
left: {
word_val: 'can',
word_audio_url: '',
letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "n",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'cane',
word_audio_url: '',
letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "n",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'mat',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "t",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'mate',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "t",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'man',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "n",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'mane',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "n",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'van',
word_audio_url: '',
letters: [
{letter_val: "v",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "n",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'vane',
word_audio_url: '',
letters: [
{letter_val: "v",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "n",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
} }
]; ];
} }
...@@ -798,11 +874,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -798,11 +874,14 @@ export class PlayComponent implements OnInit, OnDestroy {
// 初始化单词音效 // 初始化单词音效
for (let i = 0; i < this.data.wordArr.length; ++ i) { for (let i = 0; i < this.data.wordArr.length; ++ i) {
console.log(this.data.wordArr[i]);
let wordLeft = this.data.wordArr[i].left; let wordLeft = this.data.wordArr[i].left;
if (wordLeft.word_audio_url && wordLeft.word_audio_url != '') { if (wordLeft.word_audio_url && wordLeft.word_audio_url != '') {
this.addUrlToAudioObj(wordLeft.word_audio_url); this.addUrlToAudioObj(wordLeft.word_audio_url);
} }
let wordRight = this.data.wordArr[i].right;
if (wordRight.word_audio_url && wordRight.word_audio_url != '') {
this.addUrlToAudioObj(wordRight.word_audio_url);
}
} }
} }
...@@ -1050,21 +1129,104 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1050,21 +1129,104 @@ export class PlayComponent implements OnInit, OnDestroy {
// let minScale = getMinScale(word_bg, 120); // let minScale = getMinScale(word_bg, 120);
// word_bg.setScaleXY(minScale); // word_bg.setScaleXY(minScale);
word_bg_group.addChild(word_bg); word_bg_group.addChild(word_bg);
this.word_arr_left.push(word_bg);
if(word_content.right.letters.length>0){
//中间斜杠
let splitStr = new Label();
let splitStrWidth = 60;
splitStr.text = '/';
splitStr.textAlign = 'center';
splitStr.fontSize = letterFontSize;
splitStr.fontName = 'MMTextBook';
splitStr.fontColor = 'black';
//设置不显示
splitStr.visible = true;
splitStr.refreshSize();
splitStr.y = splitStr.height / 2 ;
splitStr.x = startWidth + totalWidth + 40 ;
word_bg_group.addChild(splitStr) ;
//=============================右侧单词========================================
// 单词背景
let word_bg_right = new ShapeRect();
word_bg_right.fillColor = 'transparent' ;
word_bg_right.x = startWidth + totalWidth + splitStrWidth;
word_bg_right.y = 0;
word_bg_right["wordLoaded"] = true;
//单词
let totalWidth_right = 0;
let height_right = 0;
let letter_spr_arr_right = [];
for(let i = 0; i < word_content.right.letters.length; ++ i) {
//字母
let letter = word_content.right.letters[i];
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
if(letter.is_=="0"){
//设置不显示
letter_spr.visible = true;
}else{
word_bg_right["wordLoaded"] = false;
//设置不显示
letter_spr.visible = false;
}
letter_spr.textAlign = 'left';
letter_spr.fontSize = letterFontSize;
letter_spr.fontName = 'MMTextBook';
letter_spr.fontColor = this.getColor(letter.letter_color);
letter_spr.refreshSize();
letter_spr_arr_right.push(letter_spr);
//设置坐标
letter_spr.x = Math.ceil(letter_spr.width/2) + totalWidth_right +5;
letter_spr.y = letter_spr.height/2;
if(letter.is_=="1"){
let lts_ = new Label();
lts_.text = "_";
lts_.textAlign = 'left';
lts_.fontSize = letterFontSize;
lts_.fontName = 'MMTextBook';
lts_.fontColor = this.getColor(letter.letter_color);
lts_.x = letter_spr.x;
lts_.y = letter_spr.y+2;
lts_.visible = true;
word_bg_right.addChild(lts_);
}
height_right = letter_spr.height;
totalWidth_right += letter_spr.width+10;
// 设置单词未加截完
// this.setWordLoad(index, String(i), false, letter_spr);
word_bg_right.addChild(letter_spr);
}
word_bg_right.setSize(totalWidth_right, height_right);
word_bg_group.addChild(word_bg_right) ;
word_bg_group.setSize((totalWidth_right+totalWidth+splitStrWidth+startWidth), height);
this.word_arr.push(word_bg_right);
}else{
this.word_arr.push(null); //站位用
word_bg_group.setSize((totalWidth+startWidth), height); word_bg_group.setSize((totalWidth+startWidth), height);
}
if(word_bg_group.width>350){ if(word_bg_group.width>350){
word_bg_group.setScaleXY(getMinScale(word_bg_group, 350)*this.mapScale); word_bg_group.setScaleXY(getMinScale(word_bg_group, 350)*this.mapScale);
}else{ }else{
word_bg_group.setScaleXY(this.mapScale); word_bg_group.setScaleXY(this.mapScale);
} }
this.word_bg_groups.push(word_bg_group);
if(index<4){ if(index<4){
this.word_arr_left.push(word_bg);
this.body_bg.addChild(word_bg_group); this.body_bg.addChild(word_bg_group);
}else{ }else{
this.word_arr.push(word_bg);
this.body_bg_right.addChild(word_bg_group); this.body_bg_right.addChild(word_bg_group);
} }
this.word_bg_groups.push(word_bg_group);
}; };
//单词个数 //单词个数
...@@ -1179,7 +1341,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1179,7 +1341,7 @@ export class PlayComponent implements OnInit, OnDestroy {
for(let i = 0; i < this.word_arr.length; ++ i){ for(let i = 0; i < this.word_arr.length; ++ i){
let word = this.word_arr[i]; let word = this.word_arr[i];
// console.log('word', word) ; // console.log('word', word) ;
if (this.checkClickTarget(word)) { if (word&&this.checkClickTarget(word)) {
// 获取是否加载完成 // 获取是否加载完成
let loaded = word.wordLoaded; let loaded = word.wordLoaded;
// 未加载,不触发音效,加载单词 // 未加载,不触发音效,加载单词
...@@ -1194,7 +1356,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1194,7 +1356,7 @@ export class PlayComponent implements OnInit, OnDestroy {
word.wordLoaded = true; word.wordLoaded = true;
return ; return ;
} }
this.playAudio(this.data.wordArr[i+4].left.word_audio_url); this.playAudio(this.data.wordArr[i].right.word_audio_url);
return ; return ;
} }
......
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