Commit 4973c0b8 authored by Tt's avatar Tt

节点

parent 0427feb1
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core'; import { NgModule, ErrorHandler } from '@angular/core';
import {MyErrorHandler} from './MyError'; import { MyErrorHandler } from './MyError';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
...@@ -10,17 +10,18 @@ import { HttpClientModule } from '@angular/common/http'; ...@@ -10,17 +10,18 @@ import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; import zh from '@angular/common/locales/zh';
import {FormComponent} from './form/form.component'; import { OverlayModule } from '@angular/cdk/overlay';
import {PlayComponent} from './play/play.component'; import { FormComponent } from './form/form.component';
import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-title-config.component'; import { PlayComponent } from './play/play.component';
import {BackgroundImagePipe} from './pipes/background-image.pipe'; import { LessonTitleConfigComponent } from './common/lesson-title-config/lesson-title-config.component';
import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component'; import { BackgroundImagePipe } from './pipes/background-image.pipe';
import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component'; import { UploadImageWithPreviewComponent } from './common/upload-image-with-preview/upload-image-with-preview.component';
import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component'; import { PlayerContentWrapperComponent } from './common/player-content-wrapper/player-content-wrapper.component';
import {UploadVideoComponent} from './common/upload-video/upload-video.component'; import { CustomHotZoneComponent } from './common/custom-hot-zone/custom-hot-zone.component';
import {TimePipe} from './pipes/time.pipe'; import { UploadVideoComponent } from './common/upload-video/upload-video.component';
import {ResourcePipe} from './pipes/resource.pipe'; import { TimePipe } from './pipes/time.pipe';
import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.component'; import { ResourcePipe } from './pipes/resource.pipe';
import { AudioRecorderComponent } from './common/audio-recorder/audio-recorder.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons';
...@@ -51,10 +52,11 @@ registerLocaleData(zh); ...@@ -51,10 +52,11 @@ registerLocaleData(zh);
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule, BrowserAnimationsModule,
FontAwesomeModule FontAwesomeModule,
OverlayModule
], ],
providers: [ providers: [
{provide: ErrorHandler, useClass: MyErrorHandler}, { provide: ErrorHandler, useClass: MyErrorHandler },
{ provide: NZ_I18N, useValue: zh_CN } { provide: NZ_I18N, useValue: zh_CN }
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
@import '../style/common_mixin.css'; @import '../style/common_mixin.css';
.model-content { .model-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* display: flex; */
/* justify-content: flex-start; */
/* align-items: flex-start; */
/* flex-wrap: wrap; */
}
.item-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 2vw;
padding-top: 3vw;
} }
.radioPaire { .pic-sound-box {
float: left; width: 50%;
margin: 3px; display: flex;
border-style: dashed; flex-direction: column;
border-color: #000; }
border-width: 1px;
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
height: 20vw;
padding: 10px;
padding-top: 5vw;
} }
.border { .border {
width: 450px;
height: 450px;
border-radius: 20px; border-radius: 20px;
border-style: dashed; border-style: dashed;
padding: 20px; text-align: center;
margin: 20px; float: left;
/*width: 500px; */ margin-left: 10px;
/*//border-radius: 20px;*/ margin-bottom: 10px;
/*//border-width: 2px;*/
/*//border-color: #000000;*/
} }
.group-title {
width: 100%;
}
.border-lite { .group-item {
border: 2px dashed #ddd; width: 100%;
border-radius: 0.5rem; display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 10px; padding: 10px;
margin: 10px;
} }
.box-dbt-0 {
border: 1px solid gray;
width: 100%;
/* text-align: center; */
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom: 0px;
}
.box-dbt-1 {
border: 1px solid gray;
width: 100%;
text-align: left;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.box-dbt-2 {
margin-left: 25%;
width: 50%;
height: 100px;
text-align: center;
}
.box-lbt-0 {
border: 1px solid gray;
width: 100%;
text-align: center;
border-left: 0px;
border-right: 0px;
}
.box-lbt-1 {
border: 1px 0px 0px 0px solid gray;
width: 100%;
text-align: left;
}
.box-lbt-2 {
border: 1px 0px 0px 0px solid gray;
margin-left: 25%;
width: 50%;
height: 100px;
text-align: center;
}
.box-son-0 {
border: 1px solid gray;
width: 100%;
text-align: center;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}
.box-son-1 {
border: 1px 0px 0px 0px solid gray;
width: 100%;
text-align: left;
}
.error-message {
border: 1px solid gray;
margin-top: 1%;
width: 100%;
height: 100px;
background-color: #fff;
border-radius: 15px;
text-align: center;
box-shadow: 0px 0px 5px 2px #888888;
overflow: hidden;
}
/* .cdk-overlay-container {
width: 600px;
height: 300px;
position: absolute;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 10px;
margin-left: 100px;
margin-top: 100px;
text-align: center;
padding: 10px;
} */
\ No newline at end of file
This diff is collapsed.
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef } from '@angular/core';
import { JsonPipe } from '@angular/common';
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
...@@ -9,106 +7,219 @@ import { JsonPipe } from '@angular/common'; ...@@ -9,106 +7,219 @@ import { JsonPipe } from '@angular/common';
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 picArr = [];
saveKey = "test_001"; _item: any;
// 储存对象 KEY = 'hw_006';
item; errs = [];
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { // @Input()
set item(item) {
this._item = item;
// this.init();
} }
get item() {
createShell() { return this._item;
this.item.wordList.push({
word: '',
audio: '',
backWord: '',
backWordAudio: '',
});
this.save();
} }
removeShell(idx) { @Output()
this.item.wordList.splice(idx, 1); update = new EventEmitter();
this.save();
constructor(private appRef: ApplicationRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.contentObj = {};
// 获取存储的数据 const getData = (<any>window).courseware.getData;
(<any>window).courseware.getData((data) => { getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} else {
this.item = {};
} }
if (!this.item.contentObj) {
this.item.contentObj = {};
}
console.log('~data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
}, this.saveKey); }, this.KEY);
}
// this.initData();
}
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
} }
classItem() {
function AniAssets() {
this.ske = "";
this.tex = "";
this.png = "";
this.setData = function (obj) {
this.ske = obj.ske;
this.tex = obj.tex;
this.png = obj.png;
}
}
function Item() {
this.title = "";
this.bgImg = "";
this.wordAudio = "";
this.imgAni = new AniAssets();
this.wordAni = new AniAssets();
}
return new Item();
}
init() { init() {
//在卡片组之上需要增加 两个组 0根->picArr 1题组->testlet 2页面->page 3卡片对->itemData
if (this.item.contentObj.picArr) {
this.picArr = this.item.contentObj.picArr;
this.check();
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
}
console.log('item:', this.item);
}
cardItemData() {
return {
// cardId: "",
// title: "",
// pic_url: "",
// audio_url: "",
};
}
getDefaultPicArr() {
let arr = [this.classItem(), this.classItem(), this.classItem(), this.classItem()]
return arr;
} }
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url; initData() {
}
onDragonBoneSave(e, item) {
console.log(e);
this.save(); this.save();
} }
/** onImageUploadSuccessByItem(e, item) {
* 储存音频数据 item.pic_url = e.url;
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save(); this.save();
} }
onWordAudioUploadSuccess(e, idx) { onAudioUploadSuccessByItem(e, item) {
this.item.wordList[idx].audio = e.url; item.audio_url = e.url;
this.save(); this.save();
} }
onBackWordAudioUploadSuccess(e, idx) { //添加一对
this.item.wordList[idx].backWordAudio = e.url; addItem() {
//最多4个
let item = this.cardItemData();
this.picArr.push(item)
this.saveItem();
}
deleteItem(i) {
this.picArr.splice(i, 1);
this.save(); this.save();
} }
/**
* 储存数据
*/
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
//选择圆圈
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item);
this.save();
}
check() {
if (!this.picArr) return;
this.errs.length = 0;
// let picArr = this.picArr;
// function tia(info) {
// let str = "";
// if (info.radioValue == "A") {
// if (!info.title) str += ",图片";
// } else if (info.radioValue == "B") {
// if (!info.pic_url) str += ",图片";
// } else if (info.radioValue == "C") {
// if (!info.audio_url) str += ",音频";
// } else {
// str += "卡片"
// }
// if (str) str += "未上传"
// return str;
// }
// for (let m = 0; m < picArr.length; m++) {
// for (let n = 0; n < picArr[m].length; n++) {
// if (picArr[m][n].length < 2) {
// this.errs.push(`星-${m + 1} 页-${n + 1} 卡片少于2个`);
// }
// for (let i = 0; i < picArr[m][n].length; i++) {
// let item = picArr[m][n][i];
// let left = item.left;
// let right = item.right;
// let code0 = tia(left);
// let code1 = tia(right);
// if (code0) this.errs.push(`星-${m + 1} 页-${n + 1} 第${i + 1}个卡片 左侧${code0}`);
// if (code1) this.errs.push(`星-${m + 1} 页-${n + 1} 第${i + 1}个卡片 右侧${code1}`);
// }
// }
// }
console.log("this.errs");
console.log(this.errs);
console.log("-------------------------");
}
save() {
//触发一次检测
this.check();
(<any>window).courseware.setData(this.item, null, this.KEY);
console.log('this.item = ' + JSON.stringify(this.item)); console.log('this.item = ' + JSON.stringify(this.item));
this.refresh();
} }
/**
* 刷新 渲染页面
*/
refresh() { refresh() {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
}
}
\ 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