chenjingyu
4 years ago
9 changed files with 285 additions and 18 deletions
@ -0,0 +1,55 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-12-14 16:30:31 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-12-14 16:57:25 |
||||||
|
--> |
||||||
|
<div class="content"> |
||||||
|
<div class="header"> |
||||||
|
<div class="queryBox"> |
||||||
|
<div class="queryField"> |
||||||
|
<label style="margin-right: 10px;font-size: 18px;">试卷名称：</label> |
||||||
|
<input type="text" placeholder="请输入试卷名称" style="font-size: 16px;" [(ngModel)]="markName"/> |
||||||
|
</div> |
||||||
|
<div class="queryField"> |
||||||
|
<label style="margin-right: 10px;font-size: 18px;">考试日期：</label> |
||||||
|
<input type="date" placeholder="请输入考试日期" style="font-size: 16px;" [(ngModel)]="markDate"/> |
||||||
|
</div> |
||||||
|
<div class="queryField"> |
||||||
|
<button style="background-color: #07CDCF;" >查询</button> |
||||||
|
<button style="margin-left: 10px; background-color: #FF8678;" (click)="resert()">重置</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="centertable"> |
||||||
|
<table > |
||||||
|
<thead> |
||||||
|
<th style="width: 15%;">试卷名称</th> |
||||||
|
<th style="width: 15%;">考核中队</th> |
||||||
|
<th style="width: 15%;">开始时间</th> |
||||||
|
<th style="width: 15%;">结束时间</th> |
||||||
|
<th style="width: 20%;">操作</th> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let item of dataSource"> |
||||||
|
<td>{{item.name}}</td> |
||||||
|
<td>{{item.organization}}</td> |
||||||
|
<td>{{item.startTime}}</td> |
||||||
|
<td>{{item.overTime}}</td> |
||||||
|
<td> |
||||||
|
<span style="color: #07CDCF;cursor: pointer;">阅卷</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
|
||||||
|
</table> |
||||||
|
<mat-paginator [length]="100" |
||||||
|
[pageSize]="10" |
||||||
|
[pageSizeOptions]="[10]"> |
||||||
|
</mat-paginator> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
background: #F2F5F6; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.header { |
||||||
|
width: 100%; |
||||||
|
padding: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
.queryBox { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 5px 15px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items:center; |
||||||
|
justify-content:left; |
||||||
|
.queryField { |
||||||
|
margin: 0 25px; |
||||||
|
font-size: 14px; |
||||||
|
input { |
||||||
|
width: 320px; |
||||||
|
height: 44px; |
||||||
|
line-height: 34px; |
||||||
|
border-radius: 5px; |
||||||
|
padding-left: 5px; |
||||||
|
outline: none; |
||||||
|
border: 1px solid rgb(226, 211, 211); |
||||||
|
} |
||||||
|
button { |
||||||
|
border: none; |
||||||
|
color: white; |
||||||
|
padding: 10px 25px; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
display: inline-block; |
||||||
|
font-size: 16px; |
||||||
|
margin: 4px 2px; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 8px; |
||||||
|
outline:0 none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.headerright{ |
||||||
|
float: right; |
||||||
|
} |
||||||
|
} //queryBox |
||||||
|
} |
||||||
|
.centertable{ |
||||||
|
width: 95%; |
||||||
|
margin-right: 40px; |
||||||
|
margin-left: 40px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
table{ |
||||||
|
td,th{ |
||||||
|
height: 48px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
td{ |
||||||
|
border-bottom: 1px solid #F2F5F6; |
||||||
|
} |
||||||
|
thead{ |
||||||
|
background-color:#F5FDFE; |
||||||
|
} |
||||||
|
.green{ |
||||||
|
color: #07CDCF; |
||||||
|
} |
||||||
|
.red{ |
||||||
|
color: #FF8678; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.operationSpan{ |
||||||
|
margin: 0 10px; |
||||||
|
.spanbtn { |
||||||
|
font-weight: 550; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.green{ color: #04ced1; } |
||||||
|
.red{ color: #FF8678 } |
||||||
|
.gray{ color: gray; } |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { MarkPapersIndexComponent } from './mark-papers-index.component'; |
||||||
|
|
||||||
|
describe('MarkPapersIndexComponent', () => { |
||||||
|
let component: MarkPapersIndexComponent; |
||||||
|
let fixture: ComponentFixture<MarkPapersIndexComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ MarkPapersIndexComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(MarkPapersIndexComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||||
|
import {HttpClient} from '@angular/common/http' |
||||||
|
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatPaginator } from '@angular/material/paginator'; |
||||||
|
import { MatTableDataSource } from '@angular/material/table'; |
||||||
|
import { PageEvent } from '@angular/material/paginator'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import {FormControl} from '@angular/forms'; |
||||||
|
import { Router,ActivatedRoute } from '@angular/router'; |
||||||
|
const ELEMENT_DATA = [ |
||||||
|
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'未开考'}, |
||||||
|
{name: "富华酒店", organization: '黄埔支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'未开考'}, |
||||||
|
{name: "雁山园", organization: '徐汇支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'开考中'}, |
||||||
|
{name: "富华酒店", organization: '普陀支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'开考中'}, |
||||||
|
{name: "立新加油站", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'开考中'}, |
||||||
|
{name: "富华酒店", organization: '宝山支队', startTime: "2020-07-19 10:00", overTime: '2020-07-19 12:00',testState:'已结束'}, |
||||||
|
{name: "裕达国际酒店", organization: '浦东支队', startTime: "2020-08-19 10:00", overTime: '2020-08-19 12:00',testState:'已结束'}, |
||||||
|
{name: "锦德大酒店", organization: '长宁支队', startTime: "2019-09-19 10:00", overTime: '2019-09-19 12:00',testState:'已结束'}, |
||||||
|
]; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-mark-papers-index', |
||||||
|
templateUrl: './mark-papers-index.component.html', |
||||||
|
styleUrls: ['./mark-papers-index.component.scss'] |
||||||
|
}) |
||||||
|
export class MarkPapersIndexComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,private activatedRoute: ActivatedRoute,public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
dataSource = ELEMENT_DATA; |
||||||
|
markName//试卷名称
|
||||||
|
markDate//考试日期
|
||||||
|
resert(){ |
||||||
|
this.markName=undefined |
||||||
|
this.markDate=undefined |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue