Commit eab02d17 authored by 唐鑫's avatar 唐鑫

调整后台显示内容

parent ecde648a
......@@ -14,8 +14,8 @@
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 2vw;
padding-top: 3vw;
/* padding-bottom: 2vw;
padding-top: 3vw; */
}
.pic-sound-box {
......
<div>
<!-- <nz-demo-notification-custom-style></nz-demo-notification-custom-style> -->
<!-- <div class="border">
<div style="padding-bottom: 20px;">
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder=""
[(ngModel)]="item.contentObj.title" (blur)="saveItem()">
<h5> Title-sound: </h5>
<app-audio-recorder [audioUrl]="item.contentObj.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj)">
</app-audio-recorder>
</div>
</div> -->
<div *ngFor="let testlet of picArr; let m = index" style="padding: 0.5vw;">
<div class="box-testlet-0">
<div class="group-title">
<div style="width: 100%; height: 70px; text-align: center; padding-top: 10px;">
<span style="font-weight: 700; font-size: 30px; vertical-align:middle;">星-{{m+1}}</span>
<button *ngIf="picArr.length > 1" style="margin-left: 30px; height: 40px; vertical-align:middle;" nz-button nzType="danger"
(click)="deleteTestlet(m)">
<span style="font-size: 20px;">删除星</span>
</button>
<button *ngIf="picArr.length <= 1" style="margin-left: 30px; height: 40px; vertical-align:middle;" disabled nz-button nzType="danger"
(click)="deleteTestlet(m)">
<span style="font-size: 20px;">删除星</span>
</button>
<span style="font-weight: 700; font-size: 30px; vertical-align:middle;">题干部分</span>
<div style="display: flex; justify-items: center; padding-top: 10px">
<app-audio-recorder [audioUrl]="picArr.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, picArr)">
</app-audio-recorder>
</div>
</div>
</div>
</div>
<div class="box-testlet-1">
<div *ngFor="let page of testlet; let n = index">
<div class="box-group-0">
<div class="group-title">
<div style="width: 100%; height: 70px; text-align: center; padding-top: 10px;">
<span style="font-weight: 500; font-size: 27px; vertical-align:middle;">星-{{m+1}} 页-{{n+1}}</span>
<button *ngIf="picArr[m].length <= 1" style="margin-left: 30px; height: 40px; vertical-align:middle;"
disabled nz-button nzType="danger" (click)="deletePage(m,n)">
<span style="font-size: 20px;">删除页</span>
</button>
<button *ngIf="picArr[m].length > 1" style="margin-left: 30px; height: 40px; vertical-align:middle;"
nz-button nzType="danger" (click)="deletePage(m,n)">
<span style="font-size: 20px;">删除页</span>
</button>
</div>
</div>
</div>
<div class="box-group-1">
<div class="group-item">
<div *ngFor="let it of page; let i = index">
<div *ngFor="let it of picArr.list; let i = index">
<div class="border">
<h3 style="width: 100%; line-height: 40px; text-align: center;">星-{{m+1}} 页-{{n+1}} 卡片-{{i+1}}</h3>
<h3 style="width: 100%; line-height: 40px; text-align: center;">卡片-{{i+1}}</h3>
<hr />
<div style="display: flex; align-items:center; width: 100%;">
<!-- 左边部分 -->
<div class="item-box" style="width: 45%;height:300px; margin-left: 5%;">
<nz-radio-group [(ngModel)]="it.left.radioValue">
<label nz-radio nzValue="A" (click)="radioClick(it, 'A')">文字
</label>
<label nz-radio nzValue="B" (click)="radioClick(it, 'B')">图片
</label>
<label nz-radio nzValue="C" (click)="radioClick(it, 'E')">音频
</label>
</nz-radio-group>
<input *ngIf="it.left.radioValue == 'A'" style="width: 80%; margin-bottom: 0.5vw" type="text"
nz-input placeholder="" [(ngModel)]="it.left.title" (blur)="saveItem()">
<app-upload-image-with-preview *ngIf="it.left.radioValue == 'B'" style="width: 100%"
[picUrl]="it.left.pic_url" (imageUploaded)="onImageUploadSuccessByItem($event, it.left)">
</app-upload-image-with-preview>
<div style="display: flex; justify-items: center; padding-top: 10px">
<app-audio-recorder [audioUrl]="it.left.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.left)">
</app-audio-recorder>
</div>
<!-- <div *ngIf="!it.left.audio_url"
style="display: flex; justify-items: center; padding-top: 10px; color: red;">
请上传音频
</div> -->
</div>
<!--右边部分-->
<div class="item-box" style="width: 45%;height:300px; margin-right: 5%">
<nz-radio-group [(ngModel)]="it.right.radioValue">
<label nz-radio nzValue="A" (click)="radioClick(it, 'C')">文字
<div class="item-box" style="width: 100%;height:300px; ">
<nz-radio-group [(ngModel)]="it.radioValue">
<label nz-radio nzValue="1" (click)="radioClick(it, '1')">正确
</label>
<label nz-radio nzValue="B" (click)="radioClick(it, 'D')">图片
</label>
<label nz-radio nzValue="C" (click)="radioClick(it, 'F')">音频
<label nz-radio nzValue="0" (click)="radioClick(it, '0')">错误
</label>
</nz-radio-group>
<input *ngIf="it.right.radioValue == 'A'" style="width: 80%; margin-bottom: 0.5vw" type="text"
nz-input placeholder="" [(ngModel)]="it.right.title" (blur)="saveItem()">
<app-upload-image-with-preview *ngIf="it.right.radioValue == 'B'" style="width: 100%"
[picUrl]="it.right.pic_url" (imageUploaded)="onImageUploadSuccessByItem($event, it.right)">
<app-upload-image-with-preview style="width: 100%" [picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it)">
</app-upload-image-with-preview>
<div style="display: flex; justify-items: center; padding-top: 10px">
<app-audio-recorder [audioUrl]="it.right.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.right)">
<app-audio-recorder [audioUrl]="it.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, it)">
</app-audio-recorder>
</div>
<!-- <div *ngIf="!it.right.audio_url"
style="display: flex; justify-items: center; padding-top: 10px; color: red;">
请上传音频
</div> -->
</div>
</div>
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i,m,n)">
<span>删除</span>
</button>
</div>
</div>
<div class="border">
<h3 style="margin-top: 15%; width: 100%; line-height: 40px; text-align: center; color: red;">
每页卡片2~5个
</h3>
<h3 style="width: 100%; line-height: 40px; text-align: center; color: red;">
卡片2个是上传图片尺寸为280*298
</h3>
<h3 style="width: 100%; line-height: 40px; text-align: center; color: red;">
卡片3个是上传图片尺寸为250*268
</h3>
<h3 style="width: 100%; line-height: 40px; text-align: center; color: red;">
卡片4个是上传图片尺寸为250*268
</h3>
<h3 style="width: 100%; line-height: 40px; text-align: center; color: red;">
卡片5个是上传图片尺寸为200*214
</h3>
<button *ngIf="picArr[m][n].length < 5" style="margin-top: 10%;" nz-button nzType="primary"
(click)="addItem(m,n)">
<span>增加卡片</span>
</button>
<button *ngIf="picArr[m][n].length >= 5" style="margin-top: 10%;" nz-button nzType="primary" disabled
(click)="addItem(m,n)">
<span>增加卡片</span>
</button>
</div>
</div>
</div>
</div>
<div class="box-group-2" style="padding: 0.5vw;">
<button style="width: 100%; height: 100%; border-radius: 25px; " nz-button nzType="dashed" (click)="addPage(m)">
<i nz-icon nzType="plus-circle"></i>
<span style="font-size: 20px;">增加页</span>
</button>
</div>
</div>
</div>
<div class="box-testlet-2" style="padding: 0.5vw;">
<button style="width: 100%; height: 100%; border-radius: 25px; " nz-button nzType="dashed" (click)="addTestlet()">
<i nz-icon nzType="plus-circle"></i>
<span style="font-size: 20px;">增加星</span>
</button>
</div>
<div style="position: fixed;margin-left: 70%; width:25%; top: 1em;right: 1em;">
<!-- <div style="position: fixed;margin-left: 70%; width:25%; top: 1em;right: 1em;">
<div class="error-message">
<div *ngFor="let err of errs; let m = index" style="font-size: 17px; color: red;"> {{err}}</div>
</div>
</div>
<!-- <div class="card-item" style="padding: 1vw;">
<div class="border">
<h5 style="width: 100%; line-height: 40px; text-align: center;">题星-{{m+1}}</h5>
<div style="display: flex; align-items: center; width: 100%;">
<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
(click)="addPage(m)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
增加页码
</button>
<br />
<br />
</div>
</div>
</div> -->
<!--<h5> id-{{i+1}} </h5>-->
<!-- <div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!-- <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"> -->
<!-- <button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)"> -->
<!-- <i nz-icon type="close"></i> -->
<!-- </button> -->
<!-- </div> -->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
<!-- </div> -->
<!-- <div nz-col nzSpan="8" class="add-btn-box">
<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
(click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
</button>
</div> -->
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> bg-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.bg_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
<!--<div *ngFor="let it of picArr; let i = index">-->
<!--<span> pic-{{i + 1}}: </span>-->
<!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
<!--<div style="width: 40%; padding-right: 20px">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--</div>-->
<!--<div class="pic-sound-box">-->
<!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">-->
<!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
<!--</div>-->
<!--</div>-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
<!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it2.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!-- <nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group> -->
<!--</div>-->
<!--</div>-->
</div>
\ No newline at end of file
......@@ -8,7 +8,10 @@ import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, A
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
picArr = [];
picArr = {
audio_url: "",
list: [],
};
_item: any;
KEY = 'hw_006';
errs = [];
......@@ -77,42 +80,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj.picArr = this.picArr;
}
console.log('item:', this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
}
cardItemData() {
return {
cardId: "",
left: {
title: "",
pic_url: "",
audio_url: ""
},
right: {
radioValue: "1",
title: "",
pic_url: "",
audio_url: ""
}
};
}
getDefaultPicArr() {
let obj: any = {};
let arr = [];
arr[0] = [];
arr[0][0] = [];
//在卡片组之上需要增加 两个组 0根->picArr 1题组->testlet 2页面->page 3卡片对->itemData
//默认 题组1 页面1 卡片对2个
for (let i = 0; i < 2; i++) {
for (let i = 0; i < 6; i++) {
let item = this.cardItemData();
arr[0][0].push(item);
arr.push(item);
}
// for (let index = 0; index < 4; index++) {
// let item = this.cardItemData();
// arr.push(item);
// }
return arr;
obj.list = arr;
obj.audio_url = "";
return obj;
}
......@@ -134,60 +125,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
//添加一对
addItem(m, n) {
//最多5对
if (this.picArr[m][n].length < 5) {
let item = this.cardItemData();
this.picArr[m][n].push(item);
this.saveItem();
}
}
deleteItem(index, m, n) {
if (index !== -1) {
this.picArr[m][n].splice(index, 1);
}
if (this.picArr[m][n].length == 0) {
this.picArr[m].splice(n, 1)
}
if (this.picArr[m].length == 0) {
this.picArr.splice(m, 1)
}
this.save();
}
//添加一页
addPage(m) {
let arr = [];
for (let i = 0; i < 2; i++) {
let item = this.cardItemData();
arr.push(item);
}
this.picArr[m].push(arr);
this.save();
}
deletePage(m, n) {
console.log("删除页," + m + "|" + n);
this.picArr[m].splice(n, 1)
if (this.picArr[m].length == 0) {
this.picArr.splice(m, 1)
}
this.save();
}
//添加题组
addTestlet() {
let arr = [[]];
for (let i = 0; i < 2; i++) {
let item = this.cardItemData();
arr[0].push(item);
}
this.picArr.push(arr);
this.save();
}
deleteTestlet(m) {
this.picArr.splice(m, 1)
this.save();
}
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
......@@ -208,41 +145,41 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
check() {
if (!this.picArr) return;
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;
}
this.errs.length = 0;
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("-------------------------");
// let picArr = this.picArr.list;
// 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;
// }
// this.errs.length = 0;
// 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("-------------------------");
}
......
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