chenjingyu
4 years ago
83 changed files with 1804 additions and 4455 deletions
@ -1,14 +0,0 @@ |
|||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<mat-form-field> |
|
||||||
<input matInput id="name" name="name" type='text' |
|
||||||
required |
|
||||||
ngModel #name="ngModel" placeholder="请输入资料库名称"> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<div class="btn"> |
|
||||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
|
||||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<mat-form-field> |
|
||||||
<input matInput id="name" name="name" type='text' |
|
||||||
required |
|
||||||
[(ngModel)]="dataBankName" placeholder="修改资料库名称"> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<div class="btn"> |
|
||||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
|
||||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
@ -1,159 +0,0 @@ |
|||||||
|
|
||||||
<div class="topbox"> |
|
||||||
<div class="leftbox"> |
|
||||||
<div class="upload" (mouseenter)="uploadBtnEnter()" (mouseleave)="uploadBtnLeave()" *ngIf="isAdmin"> |
|
||||||
<div class="btn" style="width: 88px;height: 33px;" > |
|
||||||
<mat-icon>backup</mat-icon><span> 上传</span> |
|
||||||
<input type="file" (change)='selectFile($event)'> |
|
||||||
</div> |
|
||||||
<div class="openbtn" style="position: absolute;" *ngIf="isOpenUpload"> |
|
||||||
<div> |
|
||||||
<span>上传文件</span> |
|
||||||
<input type="file" (change)='selectFile($event)'> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span>上传文件夹</span> |
|
||||||
<input multiple webkitdirectory type="file" (change)='selectFiles($event)'> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="newFile" (click)="createFolder()" *ngIf="isAdmin"> |
|
||||||
<mat-icon>create_new_folder</mat-icon> <span>新建文件夹</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newFile" style="width: 88px;" (click)='downLoadFile()'> |
|
||||||
<mat-icon>save_alt</mat-icon> <span>下载</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newFile delete" style="width: 88px;" *ngIf="isAdmin" (click)="deleteFiles()" > |
|
||||||
<mat-icon>delete</mat-icon> <span>删除</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="progressBox" *ngIf="uploadisLoading"> |
|
||||||
<button mat-raised-button style="margin-right: 5px;width: 84px;height: 33px;" (click)="cancel()">取消上传</button> |
|
||||||
<span style="font-size: 12px;">上传中...</span> |
|
||||||
<mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"></mat-progress-bar> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- <div class="progressBox" *ngIf="uploadisLoading2"> |
|
||||||
<button mat-raised-button style="margin-right: 5px;width: 84px;height: 33px;" (click)="cancel2()">取消上传</button> |
|
||||||
<span style="font-size: 12px;">文件夹上传中...(当前上传 {{uploadProgress2}} )</span> |
|
||||||
<mat-spinner determinate style="position: absolute;right: 0;right: 260px;bottom: -10px;" diameter=40></mat-spinner> |
|
||||||
</div> --> |
|
||||||
|
|
||||||
<div class="progressBox" *ngIf="downloadFile.isDownloading"> |
|
||||||
<!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> --> |
|
||||||
<span style="font-size: 12px;">下载中...</span> |
|
||||||
<mat-progress-bar mode="determinate" [value]="downloadFile.downloadProgress" class="progress" style="left: 52px;top: 13px;"></mat-progress-bar> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- <div class="rightbox"> |
|
||||||
<div class="inputbox"> |
|
||||||
<input type="text" [(ngModel)]="searchData" (focus)="searchfocus($event)" (blur)="searchblur($event)"> |
|
||||||
<span class="cancel" *ngIf="isCancel" (click)="cancelbtn()"><mat-icon style="font-size: 16px;">cancel</mat-icon></span> |
|
||||||
<span class="search" (click)="search()"><mat-icon>search</mat-icon></span> |
|
||||||
</div> |
|
||||||
</div> --> |
|
||||||
</div> |
|
||||||
<div class="titlebox"> |
|
||||||
<div class="titleleft"> |
|
||||||
<span class="goBack" (click)='backToTop()' *ngIf="selectedDataBank.includes('/')">返回根目录</span> |
|
||||||
|
|
||||||
<span class="goBack" (click)='backTominTop()' *ngIf="selectedDataBank.includes('/')">返回上一级</span> |
|
||||||
<span style="margin: 0 3px;color: #c5d8f3;">|</span> |
|
||||||
<span class="allFile" *ngIf="!selectedDataBank.includes('/')">全部文件</span> |
|
||||||
<span style="margin: 0 3px;color: #c5d8f3;">→</span> |
|
||||||
<span class="allFile">{{selectedDataBank}}</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="titleright"> |
|
||||||
<span>已全部加载，共 {{fileNum}} 个</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="mainbox" style="overflow-y: auto;max-height: 80%;width: 100%;"> |
|
||||||
<table style="width: 100%;" mat-table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" class="mat-elevation-z8"> |
|
||||||
<ng-container matColumnDef="select"> |
|
||||||
<th style="width: 4%;" mat-header-cell *matHeaderCellDef> |
|
||||||
<mat-checkbox (change)="$event ? masterToggle() : null" |
|
||||||
[checked]="selection.hasValue() && isAllSelected()" |
|
||||||
color="primary" |
|
||||||
[indeterminate]="selection.hasValue() && !isAllSelected()"> |
|
||||||
</mat-checkbox> |
|
||||||
</th> |
|
||||||
<td mat-cell *matCellDef="let row"> |
|
||||||
<mat-checkbox (click)="clickCheckBox($event)" |
|
||||||
color="primary" |
|
||||||
(change)="$event ? selection.toggle(row) : null" |
|
||||||
[checked]="selection.isSelected(row)"> |
|
||||||
</mat-checkbox> |
|
||||||
</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<ng-container matColumnDef="name"> |
|
||||||
<th style="width: 63%;" mat-header-cell *matHeaderCellDef> 文件名 </th> |
|
||||||
<td mat-cell *matCellDef="let element"> |
|
||||||
<img *ngIf="element.type == 'pdf'" src="../../../assets/images/pdf.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'jpeg' || element.type == 'jpg' || element.type == 'png' || element.type == 'gif' || element.type == 'svg'|| element.type == 'webp' || element.type == 'bmp'|| element.type == 'JPG'" src="../../../assets/images/img.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'doc' || element.type == 'docx'" src="../../../assets/images/word.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'xlsx'" src="../../../assets/images/excel.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'zip'" src="../../../assets/images/zip.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'MP4' || element.type == 'mp4'" src="../../../assets/images/video.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'txt'" src="../../../assets/images/text.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'pptx'" src="../../../assets/images/ppt.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'cad' || element.type == 'CAD'" src="../../../assets/images/cad.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'avi' || element.type == 'swf'|| element.type == 'mov'" src="../../../assets/images/video.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'mp3' || element.type == 'aif' || element.type == 'wav' || element.type == 'flac'" src="../../../assets/images/music.png" alt=""> |
|
||||||
<img *ngIf="element.isDir" src="../../../assets/images/file.png" alt=""> |
|
||||||
<img *ngIf="element.type == 'gaopenche' || element.type == 'denggao'" src="../../../assets/images/gaopenche.gif" alt=""> |
|
||||||
<img *ngIf="element.type == 'jiqiren' || element.type == 'konghuqi'" src="../../../assets/images/shebei.jpg" alt=""> |
|
||||||
<img *ngIf="element.type == 'waifu' || element.type == 'neifu' || element.type == 'gong' || element.type == 'qiu'" src="../../../assets/images/sheshi.jpg" alt=""> |
|
||||||
|
|
||||||
<span *ngIf="element.isDir == false" class="filename" (click)="clickName($event,element)"> |
|
||||||
{{element.key | name}} |
|
||||||
</span> |
|
||||||
<span *ngIf="element.isDir == true" class="filename" (click)="clickName($event,element)"> |
|
||||||
{{element.key | name2}} |
|
||||||
</span> |
|
||||||
<span class="font3d" *ngIf="element.type == 'waifu' || element.type == 'neifu' || element.type == 'gong' || element.type == 'qiu' || element.type == 'gaopenche' || element.type == 'denggao' || element.type == 'jiqiren' || element.type == 'konghuqi'"> |
|
||||||
3D |
|
||||||
</span> |
|
||||||
</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<ng-container matColumnDef="weight"> |
|
||||||
<th mat-header-cell style="width: 15%;" *matHeaderCellDef> 大小 </th> |
|
||||||
<td mat-cell *matCellDef="let element"> {{element.size | size}} </td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<ng-container matColumnDef="time"> |
|
||||||
<th style="width: 18%;" mat-header-cell *matHeaderCellDef mat-sort-header> 修改日期 </th> |
|
||||||
<td mat-cell *matCellDef="let element"> {{element.lastModified | date:'yyyy-MM-dd HH:mm:ss'}} </td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" |
|
||||||
(click)="clickCheckBoxLi($event,row)"> |
|
||||||
</tr> |
|
||||||
</table> |
|
||||||
|
|
||||||
<div class="nofiles" *ngIf="isNoFileTitle && selectedDataBank.includes('/')"> |
|
||||||
<span style="font-size: 14px;cursor: default;">您还没上传过文件哦～</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="openSystem" *ngIf="!selectedDataBank.includes('/') && roleType =='1' " > |
|
||||||
<a (click)="openteacher()" [href]='aHrefUnsafeLearnFun()'> <mat-icon style="vertical-align: middle; font-size: 24px;">account_balance</mat-icon> 战术授课<span>进入</span></a> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="openSystem" *ngIf="!selectedDataBank.includes('/') && roleType == '2' "> |
|
||||||
<a (click)="openlearn()" [href]='aHrefUnsafeLearnFun()'> <mat-icon style="vertical-align: middle; font-size: 24px;">account_balance</mat-icon> 战术学习<span>进入</span></a> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="fixedBox" [hidden]="!uploadisLoading2"> |
|
||||||
<app-upload-files [thatFile]='this' #child></app-upload-files> |
|
||||||
</div> |
|
||||||
|
|
||||||
<ul> |
|
||||||
<li *ngFor="let item of checkedAllFiles">{{item.key}}</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
@ -1,265 +0,0 @@ |
|||||||
// @import "//at.alicdn.com/t/font_1863119_sy1f800ck9h.css"; |
|
||||||
.topbox{ |
|
||||||
height: 33px; |
|
||||||
position: relative; |
|
||||||
padding: 11px 10px; |
|
||||||
.leftbox{ |
|
||||||
float: left; |
|
||||||
display: flex; |
|
||||||
.upload{ |
|
||||||
margin-left:16px; |
|
||||||
background-color: #09AAFF; |
|
||||||
border-radius: 4px; |
|
||||||
cursor: pointer; |
|
||||||
.btn{ |
|
||||||
position: relative; |
|
||||||
color: white; |
|
||||||
font-size: 13px; |
|
||||||
mat-icon{ |
|
||||||
position: absolute; |
|
||||||
top: 5px; |
|
||||||
left: 10px; |
|
||||||
} |
|
||||||
span{ |
|
||||||
position: absolute; |
|
||||||
left: 41px; |
|
||||||
top: 9px; |
|
||||||
} |
|
||||||
input{ |
|
||||||
width: 88px; |
|
||||||
height: 33px; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
.openbtn{ |
|
||||||
background-color: white; |
|
||||||
width: 86px; |
|
||||||
text-align: center; |
|
||||||
font-size: 12px; |
|
||||||
border-radius: 0px 0px 4px 4px; |
|
||||||
border: 1px solid #09AAFF; |
|
||||||
div{ |
|
||||||
position: relative; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
color: #09AAFF; |
|
||||||
input{ |
|
||||||
width: 86px; |
|
||||||
height: 30px; |
|
||||||
opacity: 0; |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
div:hover{ |
|
||||||
background-color: whitesmoke; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.newFile{ |
|
||||||
cursor: pointer; |
|
||||||
background-color: #fff; |
|
||||||
color: #09AAFF; |
|
||||||
border: 1px solid #C3EAFF; |
|
||||||
border-radius: 4px; |
|
||||||
margin-left: 12px; |
|
||||||
height: 33px; |
|
||||||
line-height: 33px; |
|
||||||
font-size: 13px; |
|
||||||
position: relative; |
|
||||||
width: 130px; |
|
||||||
height: 33px; |
|
||||||
float: left; |
|
||||||
mat-icon{ |
|
||||||
position: absolute; |
|
||||||
top: 5px; |
|
||||||
left: 10px; |
|
||||||
} |
|
||||||
span{ |
|
||||||
position: absolute; |
|
||||||
left: 41px; |
|
||||||
} |
|
||||||
} |
|
||||||
.delete{ |
|
||||||
color: rgba(245, 59, 59); |
|
||||||
border: 0.5px solid rgba(245, 59, 59); |
|
||||||
// background-color: red; |
|
||||||
// color: white; |
|
||||||
} |
|
||||||
} |
|
||||||
.rightbox{ |
|
||||||
float: right; |
|
||||||
width: 21%; |
|
||||||
.inputbox{ |
|
||||||
float: right; |
|
||||||
width: 21%; |
|
||||||
min-width: 165px; |
|
||||||
max-width: 315px; |
|
||||||
height: 30px; |
|
||||||
// margin: 12px 8px 12px 0; |
|
||||||
position: relative; |
|
||||||
right: 100px; |
|
||||||
border-radius: 33px; |
|
||||||
padding-left: 15px; |
|
||||||
padding-right: 54px; |
|
||||||
background: #f1f2f4; |
|
||||||
border-radius: 33px; |
|
||||||
input{ |
|
||||||
width: 100%; |
|
||||||
height: 30px; |
|
||||||
background: 0 0; |
|
||||||
border: 0; |
|
||||||
outline: 0; |
|
||||||
line-height: 29px!important; |
|
||||||
position: relative; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
.search{ |
|
||||||
cursor: pointer; |
|
||||||
position: absolute; |
|
||||||
right: 5px; |
|
||||||
top: 3px; |
|
||||||
color: grey; |
|
||||||
} |
|
||||||
.cancel{ |
|
||||||
cursor: pointer; |
|
||||||
position: absolute; |
|
||||||
right: 22px; |
|
||||||
top: 5px; |
|
||||||
color: #808080; |
|
||||||
} |
|
||||||
.cancel:hover{ |
|
||||||
mat-icon{ |
|
||||||
color: #808090; |
|
||||||
; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
//进度条 |
|
||||||
.progressBox{ |
|
||||||
position: absolute; |
|
||||||
display: inline-block; |
|
||||||
width: 550px; |
|
||||||
left: 480px; |
|
||||||
} |
|
||||||
.progress{ |
|
||||||
position: absolute; |
|
||||||
width: 350px; |
|
||||||
top: 18px; |
|
||||||
left: 160px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.titlebox{ |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
padding-left: 18px; |
|
||||||
padding-right: 18px; |
|
||||||
span{ |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
.titleleft{ |
|
||||||
float: left; |
|
||||||
.goBack{ |
|
||||||
color: #09aaff; |
|
||||||
} |
|
||||||
.goBack:hover{ |
|
||||||
cursor: pointer; |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
} |
|
||||||
.titleright{ |
|
||||||
float: right; |
|
||||||
} |
|
||||||
} |
|
||||||
.mainbox{ |
|
||||||
// overflow-y: auto; |
|
||||||
table{ |
|
||||||
td{ |
|
||||||
img{ |
|
||||||
position: relative; |
|
||||||
width: 26px; |
|
||||||
height: 26px; |
|
||||||
top: 6px; |
|
||||||
margin-right: 3px; |
|
||||||
} |
|
||||||
.filename:hover{ |
|
||||||
cursor: pointer; |
|
||||||
color: #09aaff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.btn{ |
|
||||||
width: 100%; |
|
||||||
text-align: center; |
|
||||||
button{ |
|
||||||
margin: 0 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
.font3d{ |
|
||||||
font-size: 13px; |
|
||||||
background-color: #2cbe4e; |
|
||||||
display: inline-block; |
|
||||||
font-weight: 600; |
|
||||||
line-height: 20px; |
|
||||||
color: #fff; |
|
||||||
text-align: center; |
|
||||||
white-space: nowrap; |
|
||||||
border-radius: 3px; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
//上传文件夹弹窗 |
|
||||||
.fixedBox { |
|
||||||
position: fixed; |
|
||||||
bottom: 3%; |
|
||||||
right: 3%; |
|
||||||
width: 500px; |
|
||||||
} |
|
||||||
.nofiles{ |
|
||||||
background: url("../../../assets/images/nofiles.png") no-repeat scroll center 0 transparent; |
|
||||||
padding-top: 150px; |
|
||||||
width: 488px; |
|
||||||
position: absolute; |
|
||||||
left: 50%; |
|
||||||
top: 50%; |
|
||||||
text-align: center; |
|
||||||
margin: -78px 0 0 -244px; |
|
||||||
} |
|
||||||
.openSystem{ |
|
||||||
position: relative; |
|
||||||
a{ |
|
||||||
color: rgba(0, 0, 0, 0.87); |
|
||||||
font-size: 14px; |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: 48px; |
|
||||||
line-height: 48px; |
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
|
||||||
padding-left: 4%; |
|
||||||
background-color: white; |
|
||||||
img{ |
|
||||||
position: relative; |
|
||||||
width: 26px; |
|
||||||
height: 26px; |
|
||||||
top: 6px; |
|
||||||
margin-right: 8px; |
|
||||||
} |
|
||||||
span{ |
|
||||||
position: absolute; |
|
||||||
right: 31.3%; |
|
||||||
line-height: 48px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { AllFileComponent } from './all-file.component'; |
|
||||||
|
|
||||||
describe('AllFileComponent', () => { |
|
||||||
let component: AllFileComponent; |
|
||||||
let fixture: ComponentFixture<AllFileComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ AllFileComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(AllFileComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput id="name" name="name" type='text' |
|
||||||
required |
|
||||||
style="font-size: 12px;" |
|
||||||
onfocus="this.select()" |
|
||||||
[(ngModel)]="newFolderName" placeholder="创建文件夹"> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<div class="btn"> |
|
||||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
|
||||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
<div style="position: relative;"> |
|
||||||
<div style="position: absolute;right: 0;top: 0;cursor: pointer;" (click)="closeDialog()"> |
|
||||||
<span><mat-icon>clear</mat-icon></span> |
|
||||||
</div> |
|
||||||
<div class="imgbox" style="text-align: center;"> |
|
||||||
<img *ngIf="data.type == 'img'" style="max-width: 96%;max-height: 100%;margin-top: 20px;" class="imgitemdefault" [src]="Url"> |
|
||||||
<video style="margin-top:18px;" autoplay controls *ngIf="data.type == 'video'" [src]="Url"></video> |
|
||||||
<audio autoplay controls *ngIf="data.type == 'mp3'" [src]="Url"></audio> |
|
||||||
<!-- <pre *ngIf="data.type == 'txt'">{{Url}}</pre> --> |
|
||||||
<!-- <iframe *ngIf="data.type == 'txt'" [src]="Url" frameborder="1" width="100%" height="600"></iframe> --> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,33 +1,30 @@ |
|||||||
<div style="min-width: 240px;"> |
<div style="min-width: 240px;" id="nodeTree"> |
||||||
<div style="text-align: center;font-weight: 550;">消防设施考题设定</div> |
<div style="text-align: center;font-weight: 550;">消防设施考题设定</div> |
||||||
<div style="max-height: 300px;overflow-y: auto; margin: 25px 0;"> |
<div style="max-height: 300px;overflow-y: auto; margin: 25px 0;"> |
||||||
<!-- 消防列表树 --> |
<!-- 消防列表树 --> |
||||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList [cdkDropListData]="dataSource"> |
<nz-tree |
||||||
|
#nzTreeComponent |
||||||
<mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' class="treeNode"> |
[nzData]="renderData" |
||||||
<button mat-icon-button disabled></button> |
nzCheckable |
||||||
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}"> |
nzMultiple |
||||||
{{node.name}} |
[nzCheckedKeys]="defaultCheckedKeys" |
||||||
</span> |
[nzExpandedKeys]="defaultExpandedKeys" |
||||||
<span *ngIf="node.isTemplate">({{node.children.length}})</span> |
[nzSelectedKeys]="defaultSelectedKeys" |
||||||
<mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox> |
(nzClick)="nzEvent($event)" |
||||||
</mat-tree-node> |
(nzExpandChange)="nzEvent($event)" |
||||||
|
(nzCheckBoxChange)="nzEvent($event)" |
||||||
<mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="treeNode" > |
[nzTreeTemplate]="nzTreeTemplate" |
||||||
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> |
> |
||||||
<mat-icon class="mat-icon-rtl-mirror"> |
</nz-tree> |
||||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
</mat-icon> |
<div class="treeNodeTemplate"> |
||||||
</button> |
<label class="overflowText textNode">{{node.origin.name || node.origin.Name}}</label> |
||||||
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}"> |
</div> |
||||||
{{node.name}} |
</ng-template> |
||||||
</span> |
|
||||||
<span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span> |
|
||||||
<mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox> |
|
||||||
</mat-tree-node> |
|
||||||
|
|
||||||
</mat-tree> |
|
||||||
<!-- 消防列表树 --> |
<!-- 消防列表树 --> |
||||||
</div> |
</div> |
||||||
<div style="text-align: center;"><button mat-stroked-button style="border: none;background-color: #FF8678;color: #fff;" mat-dialog-close>退出</button></div> |
<div style="text-align: center;"> |
||||||
|
<button mat-stroked-button style="margin-right: 15px;border: none;background: #07CDCF;color: #fff;" (click)='submit()'>确定</button> |
||||||
|
<button mat-stroked-button style="margin-left: 15px;border: none;background: #dfe0e0;" mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
<div id="disposalNodeTree"> |
||||||
|
<div style="max-height: 500px;overflow-x: hidden;overflow-y: auto;margin-bottom: 25px;width: 330px;padding-right: 10px;"> |
||||||
|
<nz-tree #nzTreeComponent [nzData]="treeData" nzCheckable nzMultiple [nzTreeTemplate]="nzTreeTemplate"></nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div id="terrNodePublic"> |
||||||
|
<label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
<div style="text-align: center;"> |
||||||
|
<button mat-stroked-button style="margin-right: 15px;border: none;background: #07CDCF;color: #fff;" (click)='submit()'>确定</button> |
||||||
|
<button mat-stroked-button style="margin-left: 15px;border: none;background: #dfe0e0;" mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -1,54 +0,0 @@ |
|||||||
<div class="box"> |
|
||||||
<div class="createBtn"> |
|
||||||
<button mat-raised-button color="primary" (click)="createTest()">新增考题</button> |
|
||||||
</div> |
|
||||||
<div class="tablebox"> |
|
||||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
|
||||||
<ng-container matColumnDef="name"> |
|
||||||
<th mat-header-cell *matHeaderCellDef>试卷名称</th> |
|
||||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<!-- Name Column --> |
|
||||||
<ng-container matColumnDef="organization"> |
|
||||||
<th mat-header-cell *matHeaderCellDef>考核中队</th> |
|
||||||
<td mat-cell *matCellDef="let element">{{element.organization}}</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<!-- Weight Column --> |
|
||||||
<ng-container matColumnDef="startTime"> |
|
||||||
<th mat-header-cell *matHeaderCellDef>开考时间</th> |
|
||||||
<td mat-cell *matCellDef="let element">{{element.startTime}}</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<!-- Symbol Column --> |
|
||||||
<ng-container matColumnDef="overTime"> |
|
||||||
<th mat-header-cell *matHeaderCellDef>结束时间</th> |
|
||||||
<td mat-cell *matCellDef="let element">{{element.overTime}}</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<!-- Symbol Column --> |
|
||||||
<ng-container matColumnDef="testState"> |
|
||||||
<th mat-header-cell *matHeaderCellDef>考试状态</th> |
|
||||||
<td mat-cell *matCellDef="let element"> |
|
||||||
<i [ngClass]="{'green': element.testState == '2','red':element.testState == '3'}"> |
|
||||||
{{element.testState | testState}} |
|
||||||
</i> |
|
||||||
</td> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<!-- Symbol Column --> |
|
||||||
<ng-container matColumnDef="operation"> |
|
||||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
|
||||||
<td mat-cell *matCellDef="let element"> |
|
||||||
<span>编辑</span> |
|
||||||
<span>详情</span> |
|
||||||
<span [ngClass]="{'grey': element.testState == '2' || element.testState == '3'}">删除</span> |
|
||||||
</td> |
|
||||||
</ng-container> |
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
|
||||||
</table> |
|
||||||
<mat-paginator [pageSize]="10"></mat-paginator> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
.box{ |
|
||||||
width:100%; |
|
||||||
height: 100%; |
|
||||||
margin: 0 auto; |
|
||||||
.createBtn{ |
|
||||||
height: 60px; |
|
||||||
line-height: 60px; |
|
||||||
margin-bottom: 6px; |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
.tablebox{ |
|
||||||
table{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
.mat-header-cell{ |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.mat-cell{ |
|
||||||
text-align: center; |
|
||||||
span{ |
|
||||||
color: #0000BF; |
|
||||||
margin: 0 3px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
span:hover{ |
|
||||||
text-decoration:underline |
|
||||||
} |
|
||||||
.grey{ |
|
||||||
color: grey; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
.green{ |
|
||||||
color: #70b603; |
|
||||||
} |
|
||||||
.red{ |
|
||||||
color: #d9001b; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.dialog{ |
|
||||||
.title{ |
|
||||||
h1{ |
|
||||||
font-size: 25px; |
|
||||||
font-weight: 900; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { CreateExamComponent } from './create-exam.component'; |
|
||||||
|
|
||||||
describe('CreateExamComponent', () => { |
|
||||||
let component: CreateExamComponent; |
|
||||||
let fixture: ComponentFixture<CreateExamComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ CreateExamComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(CreateExamComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,76 +0,0 @@ |
|||||||
import { Component, OnInit,Inject } from '@angular/core'; |
|
||||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
|
||||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
||||||
import {FormControl} from '@angular/forms'; |
|
||||||
const ELEMENT_DATA: any[] = [ |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'1'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'1'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'3'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'3'}, |
|
||||||
{name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'3'}, |
|
||||||
]; |
|
||||||
@Component({ |
|
||||||
selector: 'app-create-exam', |
|
||||||
templateUrl: './create-exam.component.html', |
|
||||||
styleUrls: ['./create-exam.component.scss'] |
|
||||||
}) |
|
||||||
export class CreateExamComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(public dialog: MatDialog,public snackBar: MatSnackBar) { } |
|
||||||
displayedColumns: string[] = ['name', 'organization', 'startTime', 'overTime', 'testState', 'operation']; |
|
||||||
dataSource = ELEMENT_DATA; |
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
//新增考题弹出框
|
|
||||||
createTest(){ |
|
||||||
const dialogRef = this.dialog.open(CreateDialog, { |
|
||||||
data: {} |
|
||||||
}); |
|
||||||
dialogRef.afterClosed().subscribe( |
|
||||||
data=>{ |
|
||||||
if(data){ |
|
||||||
|
|
||||||
}
|
|
||||||
} |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// import getISOWeek from 'date-fns/getISOWeek';
|
|
||||||
//创建组织
|
|
||||||
@Component({ |
|
||||||
selector: 'CreateDialog', |
|
||||||
templateUrl: './createDialog.html', |
|
||||||
styleUrls: ['./create-exam.component.scss'] |
|
||||||
}) |
|
||||||
export class CreateDialog { |
|
||||||
myControl = new FormControl(); |
|
||||||
constructor( |
|
||||||
public dialogRef: MatDialogRef<CreateDialog>, |
|
||||||
@Inject(MAT_DIALOG_DATA) public data, |
|
||||||
public snackBar: MatSnackBar) {} |
|
||||||
|
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
|
|
||||||
onSubmit(value){ |
|
||||||
} |
|
||||||
date = null; |
|
||||||
|
|
||||||
onChange(result: Date[]): void { |
|
||||||
console.log('onChange: ', result); |
|
||||||
} |
|
||||||
// getWeek(result: Date[]): void {
|
|
||||||
// console.log('week: ', result.map(getISOWeek));
|
|
||||||
// }
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,34 +0,0 @@ |
|||||||
<div class="dialog"> |
|
||||||
<div class="title"> |
|
||||||
<h1>试卷新增</h1> |
|
||||||
</div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div> |
|
||||||
<span>试卷名称</span> |
|
||||||
<input id="name" name="name" type='text' |
|
||||||
required |
|
||||||
ngModel #name="ngModel"> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<div> |
|
||||||
<span>考核中队</span> |
|
||||||
<input id="name" name="name" type='text' |
|
||||||
required |
|
||||||
ngModel #name="ngModel"> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span>考试时间</span> |
|
||||||
<!-- <nz-range-picker id="date" name="date" [nzShowTime]="true" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker> --> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<div class="btn"> |
|
||||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
|
||||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
</div> |
|
||||||
|
|
||||||
@ -1,40 +0,0 @@ |
|||||||
<div class="content"> |
|
||||||
|
|
||||||
<div class="header"> |
|
||||||
<form #form="ngForm"> |
|
||||||
<div class="queryBox"> |
|
||||||
|
|
||||||
<div class="queryField" style="margin-right: 90px;"> |
|
||||||
<!-- <button type="button" mat-raised-button color="primary" style="margin-right: 10px;" (click)='goBack()'><mat-icon style="vertical-align: middle; font-size: 20px;">reply</mat-icon>返回</button> --> |
|
||||||
<button type="button" mat-raised-button color="primary" (click)='queryAll()'>查看全部详情</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- <div class="queryField"> |
|
||||||
<label style="margin-right: 10px;">开始时间:</label> |
|
||||||
<input matInput [matDatepicker]="start" placeholder="请选择开始时间" readonly (dateChange)="startEvent($event)" [formControl]='startTime'> |
|
||||||
<mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle> |
|
||||||
<mat-datepicker #start></mat-datepicker> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="queryField"> |
|
||||||
<label style="margin-right: 10px;">结束时间:</label> |
|
||||||
<input matInput [matDatepicker]="end" placeholder="请选择结束时间" readonly (dateChange)="endEvent($event)" [formControl]='endTime'> |
|
||||||
<mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle> |
|
||||||
<mat-datepicker #end></mat-datepicker> |
|
||||||
</div> --> |
|
||||||
|
|
||||||
|
|
||||||
<div class="btnbox" style="margin-left: 90px;"> |
|
||||||
<button mat-raised-button color="primary" (click)='query()'>查询</button> |
|
||||||
<button mat-raised-button style="margin-left: 10px;" type="button" (click)='getList()'>重置</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="center" id="center"></div> |
|
||||||
<div class="nofiles" *ngIf="!echartsData.length"> |
|
||||||
<span style="font-size: 14px;cursor: default;">暂无学习记录～</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
.content{ |
|
||||||
width: 100%; |
|
||||||
height: 93%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.header { |
|
||||||
padding: 10px; |
|
||||||
box-sizing: border-box; |
|
||||||
border-bottom: 1px solid #999; |
|
||||||
.queryBox { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 5px 15px; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-items:center; |
|
||||||
justify-content:center; |
|
||||||
.queryField { |
|
||||||
margin: 0 15px; |
|
||||||
font-size: 14px; |
|
||||||
input { |
|
||||||
width: 180px; |
|
||||||
height: 22px; |
|
||||||
line-height: 22px; |
|
||||||
} |
|
||||||
} |
|
||||||
.btnbox{ |
|
||||||
float: right; |
|
||||||
} |
|
||||||
|
|
||||||
} //queryBox |
|
||||||
} |
|
||||||
|
|
||||||
.center { |
|
||||||
flex: 1; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
.nofiles{ |
|
||||||
background: url("../../../assets/images/nofiles.png") no-repeat scroll center 0 transparent; |
|
||||||
padding-top: 150px; |
|
||||||
width: 488px; |
|
||||||
position: absolute; |
|
||||||
left: 50%; |
|
||||||
top: 50%; |
|
||||||
text-align: center; |
|
||||||
margin: -96px 0 0 -244px; |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { EhartsStatisticsComponent } from './eharts-statistics.component'; |
|
||||||
|
|
||||||
describe('EhartsStatisticsComponent', () => { |
|
||||||
let component: EhartsStatisticsComponent; |
|
||||||
let fixture: ComponentFixture<EhartsStatisticsComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ EhartsStatisticsComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(EhartsStatisticsComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,228 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; |
|
||||||
import {MatDatepickerInputEvent} from '@angular/material/datepicker'; |
|
||||||
import { HttpClient } from '@angular/common/http'; |
|
||||||
import { FormControl } from '@angular/forms'; |
|
||||||
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
||||||
import { ActivatedRoute, Router } from '@angular/router'; |
|
||||||
declare var echarts : any; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-eharts-statistics', |
|
||||||
templateUrl: './eharts-statistics.component.html', |
|
||||||
styleUrls: ['./eharts-statistics.component.scss'], |
|
||||||
}) |
|
||||||
export class EhartsStatisticsComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private adapter: DateAdapter<any>,private http:HttpClient,public snackBar: MatSnackBar,private route:ActivatedRoute,private router:Router) { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
this.idCard = this.route.snapshot.queryParams.id || '' |
|
||||||
this.idName = this.route.snapshot.queryParams.name || '' |
|
||||||
this.adapter.setLocale('CH') |
|
||||||
this.getList() |
|
||||||
} |
|
||||||
|
|
||||||
ngAfterViewInit(): void { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
startTime:any; //查询开始时间
|
|
||||||
endTime:any; //查询结束时间
|
|
||||||
oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳
|
|
||||||
|
|
||||||
echartsData:any = []; //图表数据
|
|
||||||
|
|
||||||
idCard:string; //用户身份证
|
|
||||||
idName:string; //用户姓名
|
|
||||||
|
|
||||||
//初始化 + 重置
|
|
||||||
getList () { |
|
||||||
this.startTime = new FormControl( new Date((new Date(new Date().getTime()-this.oneMonthDate)).toLocaleDateString()) ) |
|
||||||
this.endTime = new FormControl( new Date() ) |
|
||||||
let msg = { |
|
||||||
Name: this.idCard, |
|
||||||
// StartTime: new Date(new Date().getTime()-this.oneMonthDate).toLocaleDateString(),
|
|
||||||
// EndTime: new Date().toLocaleDateString(),
|
|
||||||
} |
|
||||||
this.http.get('/api/StudyRecords/Statistics',{params:msg}).subscribe((data:any)=>{ |
|
||||||
this.echartsData = data |
|
||||||
if (data.length) { |
|
||||||
this.handleData(data) |
|
||||||
} else { //数据为空时销毁图表
|
|
||||||
let chartHynyxf = echarts.init(document.getElementById('center'), 'skinUpp'); |
|
||||||
chartHynyxf.dispose(); |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
//查询
|
|
||||||
query () { |
|
||||||
let msg = { |
|
||||||
Name: this.idCard, |
|
||||||
StartTime: this.getTime(this.startTime.value), //开始时间
|
|
||||||
EndTime: this.getTime(this.endTime.value), //结束时间
|
|
||||||
} |
|
||||||
this.http.get('/api/StudyRecords/Statistics',{params:msg}).subscribe((data:any)=>{ |
|
||||||
this.echartsData = data |
|
||||||
if (data.length) { |
|
||||||
this.handleData(data) |
|
||||||
} else { //数据为空时销毁图表
|
|
||||||
let chartHynyxf = echarts.init(document.getElementById('center'), 'skinUpp'); |
|
||||||
chartHynyxf.dispose(); |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
//查询全部详情
|
|
||||||
queryAll () { |
|
||||||
this.router.navigate(['/home/learningrecorddetails'],{queryParams:{'Catalog': '','id':this.idCard}}); |
|
||||||
} |
|
||||||
|
|
||||||
//返回上一页
|
|
||||||
goBack () { |
|
||||||
history.go(-1) |
|
||||||
} |
|
||||||
|
|
||||||
//处理时间 传入 new Date()格式
|
|
||||||
getTime(date){ |
|
||||||
let year = date.getFullYear(); //年
|
|
||||||
let month = date.getMonth() + 1; //月
|
|
||||||
let day = date.getDate(); //日
|
|
||||||
let hour = date.getHours() //时
|
|
||||||
let min = date.getMinutes(); //分
|
|
||||||
let seconds = date.getSeconds(); //秒
|
|
||||||
return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds; |
|
||||||
} |
|
||||||
|
|
||||||
//选择开始时间
|
|
||||||
startEvent (e: MatDatepickerInputEvent<Date>) { |
|
||||||
let nowTime = new Date() |
|
||||||
if (nowTime < e.value) { |
|
||||||
const config = new MatSnackBarConfig(); |
|
||||||
config.verticalPosition = 'top'; |
|
||||||
config.duration = 3000 |
|
||||||
this.snackBar.open('选择时间不能大于现在时间段','确定',config); |
|
||||||
this.startTime = new FormControl( new Date(new Date().toLocaleDateString()) ) |
|
||||||
} else { |
|
||||||
this.startTime = new FormControl(e.value) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//选择结束时间
|
|
||||||
endEvent (e: MatDatepickerInputEvent<Date>) { |
|
||||||
let oneDay:number = 86399000; //一天的毫秒数
|
|
||||||
let selectDay = (e.value).toLocaleDateString() //选择的年月日
|
|
||||||
let newDay = (new Date()).toLocaleDateString() //现在的年月日
|
|
||||||
let nowTime = new Date() //现在的时间
|
|
||||||
|
|
||||||
if (nowTime < e.value && selectDay!=newDay) { //选择时间段大于现在时间段时
|
|
||||||
const config = new MatSnackBarConfig(); |
|
||||||
config.verticalPosition = 'top'; |
|
||||||
config.duration = 3000 |
|
||||||
this.snackBar.open('选择时间不能大于现在时间段','确定',config); |
|
||||||
this.endTime = new FormControl( new Date() ) |
|
||||||
} else if (nowTime > e.value && selectDay!=newDay) { //正常情况下 时间+1天
|
|
||||||
this.endTime = new FormControl( new Date(e.value.getTime()+oneDay) ) |
|
||||||
} else if ( selectDay == newDay ) { //选择时间段是今天时
|
|
||||||
this.endTime = new FormControl( new Date() ) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//处理图表数据
|
|
||||||
handleData (data) { |
|
||||||
let postNames = [] //y轴坐标
|
|
||||||
let catalogs = [] //学习目标
|
|
||||||
let counts = [] //统计次数
|
|
||||||
let newData = data.sort( function (a,b) { |
|
||||||
return b.count - a.count |
|
||||||
} ) |
|
||||||
newData.forEach(element => { |
|
||||||
postNames.push(element.postName ? element.postName : '暂无数据') |
|
||||||
catalogs.push(element.catalog ? element.catalog : '暂无数据') |
|
||||||
counts.push(element.count ? element.count : 0) |
|
||||||
}); |
|
||||||
this.echartsInit(postNames,catalogs,counts) |
|
||||||
} |
|
||||||
|
|
||||||
//图表初始化
|
|
||||||
echartsInit (postNames,catalogs,counts) { |
|
||||||
let that = this |
|
||||||
let chartHynyxf = echarts.init(document.getElementById('center'), 'skinUpp'); |
|
||||||
let option = { |
|
||||||
title: {
|
|
||||||
text: that.idName, |
|
||||||
left:45, |
|
||||||
top:20 |
|
||||||
}, |
|
||||||
tooltip: { |
|
||||||
trigger: 'axis', |
|
||||||
axisPointer: {type: 'shadow'} |
|
||||||
}, |
|
||||||
grid: { |
|
||||||
left: '3%', |
|
||||||
right: '4%', |
|
||||||
bottom: '3%', |
|
||||||
containLabel: true |
|
||||||
}, |
|
||||||
xAxis: { |
|
||||||
show: false, |
|
||||||
type: 'value', |
|
||||||
boundaryGap: [0, 0.01] |
|
||||||
}, |
|
||||||
yAxis: { |
|
||||||
inverse: true, |
|
||||||
"axisLine":{ //y轴
|
|
||||||
"show":false |
|
||||||
}, |
|
||||||
"axisTick":{ //y轴刻度线
|
|
||||||
"show":false, |
|
||||||
}, |
|
||||||
"splitLine": { //网格线
|
|
||||||
"show": false |
|
||||||
}, |
|
||||||
type: 'category', |
|
||||||
data: postNames, |
|
||||||
max: 15 |
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
type: 'bar', |
|
||||||
data: counts, |
|
||||||
barMinWidth: 10, // 最小宽度
|
|
||||||
barMaxWidth: 30, // 最大宽度
|
|
||||||
barCategoryGap: 5, |
|
||||||
itemStyle:{ |
|
||||||
normal:{ |
|
||||||
color:'#40B4E8', |
|
||||||
barBorderRadius:[10, 10, 10, 10], |
|
||||||
label: { |
|
||||||
formatter: function (e) { |
|
||||||
return `${catalogs[e.dataIndex]}`+` (统计次数: ${e.value})` |
|
||||||
}, |
|
||||||
show: true, |
|
||||||
position: 'insideLeft', |
|
||||||
textStyle: { color: '#555'}, |
|
||||||
fontSize: 14, |
|
||||||
fontWeight: 550 |
|
||||||
}, |
|
||||||
}, |
|
||||||
} //itemStyle
|
|
||||||
}, |
|
||||||
|
|
||||||
] //series
|
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
chartHynyxf.setOption(option); |
|
||||||
|
|
||||||
//柱状图点击事件
|
|
||||||
chartHynyxf.on('click', function(e) { |
|
||||||
that.router.navigate(['/home/learningrecorddetails'],{queryParams:{'Catalog':catalogs[e.dataIndex],'id':that.idCard,'PostName':e.name}}); |
|
||||||
}); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { JoinExamComponent } from './join-exam.component'; |
|
||||||
|
|
||||||
describe('JoinExamComponent', () => { |
|
||||||
let component: JoinExamComponent; |
|
||||||
let fixture: ComponentFixture<JoinExamComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ JoinExamComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(JoinExamComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-join-exam', |
|
||||||
templateUrl: './join-exam.component.html', |
|
||||||
styleUrls: ['./join-exam.component.scss'] |
|
||||||
}) |
|
||||||
export class JoinExamComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,49 +0,0 @@ |
|||||||
|
|
||||||
<div style="height: 100%; width: 100%;"> |
|
||||||
<div class="topbox"> |
|
||||||
<div class="backtop"> |
|
||||||
<button type="button" mat-raised-button color="primary" (click)="backtop()"><mat-icon style="vertical-align: middle;font-size: 20px;">reply</mat-icon>返回</button> |
|
||||||
</div> |
|
||||||
<div class="datasearch"> |
|
||||||
<!-- <div class="starttime"> |
|
||||||
<span>开始时间 :</span> |
|
||||||
<input style="width: 220px; height:21px;line-height: 21px;font-size: 15px;" matInput [matDatepicker]="dp" readonly [formControl]="startdate"> |
|
||||||
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle> |
|
||||||
<mat-datepicker #dp disabled="false"></mat-datepicker> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="endtime"> |
|
||||||
<span>结束时间 :</span> |
|
||||||
<input style="width: 220px; height:21px;line-height: 21px;font-size: 15px;" matInput [matDatepicker]="dp2" readonly [formControl]="enddate"> |
|
||||||
<mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle> |
|
||||||
<mat-datepicker #dp2 disabled="false"></mat-datepicker> |
|
||||||
</div> --> |
|
||||||
</div> |
|
||||||
<div class="btnbox"> |
|
||||||
<button type="button" mat-raised-button color="primary" (click)="onSubmit()">查询</button> |
|
||||||
<button type="button" mat-raised-button (click)="reset()">重置</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<mat-divider></mat-divider> |
|
||||||
<div class="listbox" [hidden]="noRecord"> |
|
||||||
<ul> |
|
||||||
<li *ngFor="let item of recordList;let key = index"> |
|
||||||
<p class="timeTitle" *ngIf="key ==0 || item.time != recordList[key - 1].time">{{item.time}}</p> |
|
||||||
<span class="listitem"> |
|
||||||
<span style="margin-right: 5px;">{{item.time2}}</span> |
|
||||||
{{item.operation}} : {{item.target | name3}} |
|
||||||
</span> |
|
||||||
|
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<mat-paginator |
|
||||||
|
|
||||||
[length]="length" |
|
||||||
[pageSize]="pageSize" |
|
||||||
(page)="chagePage($event)"> |
|
||||||
</mat-paginator> |
|
||||||
</div> |
|
||||||
<div class="nofiles" *ngIf="noRecord"> |
|
||||||
<span style="font-size: 14px;cursor: default;">该时间段未查询到学习记录～</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
.topbox{ |
|
||||||
display: flex; |
|
||||||
width: 100%; |
|
||||||
height:7%; |
|
||||||
line-height: 66px; |
|
||||||
// border-bottom: 1px solid gray; |
|
||||||
justify-content: space-around; |
|
||||||
.datasearch{ |
|
||||||
display: flex; |
|
||||||
div{ |
|
||||||
margin: 0 10px; |
|
||||||
span{ |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
mat-form-field{ |
|
||||||
input{ |
|
||||||
padding-left: 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
.btnbox{ |
|
||||||
button{ |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.listbox{ |
|
||||||
margin-top: 18px; |
|
||||||
margin-left: 26%; |
|
||||||
height: 84%; |
|
||||||
overflow-y: auto; |
|
||||||
.timeTitle{ |
|
||||||
font-weight: 800; |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
.listitem{ |
|
||||||
margin-left: 80px; |
|
||||||
font-size: 16px; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
} |
|
||||||
.mat-paginator { |
|
||||||
background-color: hsla(0,0%,100%,0); |
|
||||||
padding-right: 10%; |
|
||||||
} |
|
||||||
.nofiles{ |
|
||||||
background: url("../../../assets/images/nofiles.png") no-repeat scroll center 0 transparent; |
|
||||||
padding-top: 150px; |
|
||||||
width: 488px; |
|
||||||
position: absolute; |
|
||||||
left: 50%; |
|
||||||
top: 50%; |
|
||||||
text-align: center; |
|
||||||
margin: -88px 0 0 -244px; |
|
||||||
} |
|
||||||
@ -1,188 +0,0 @@ |
|||||||
import { Component, OnInit ,ViewChild} from '@angular/core'; |
|
||||||
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; |
|
||||||
import {MatDatepicker} from '@angular/material/datepicker'; |
|
||||||
import {FormControl} from '@angular/forms'; |
|
||||||
import {HttpClient} from '@angular/common/http'; |
|
||||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
||||||
import { MatPaginator } from '@angular/material/paginator'; |
|
||||||
import { PageEvent } from '@angular/material/paginator'; |
|
||||||
import { Router,ActivatedRoute } from '@angular/router' |
|
||||||
@Component({ |
|
||||||
selector: 'app-learning-record-details', |
|
||||||
templateUrl: './learning-record-details.component.html', |
|
||||||
styleUrls: ['./learning-record-details.component.scss'] |
|
||||||
}) |
|
||||||
export class LearningRecordDetailsComponent implements OnInit { |
|
||||||
startdate:any //开始时间
|
|
||||||
enddate:any //结束时间
|
|
||||||
constructor(private adapter: DateAdapter<any>,private http:HttpClient,public snackBar: MatSnackBar,private router:Router,private route:ActivatedRoute) { } |
|
||||||
|
|
||||||
lastdate:any //上个月日期
|
|
||||||
|
|
||||||
startTime:any //开始时间查询条件
|
|
||||||
endTime:any //结束时间查询条件
|
|
||||||
|
|
||||||
Catalog:any = this.route.snapshot.queryParams.Catalog || "" //目录
|
|
||||||
|
|
||||||
PageNumber:any = 1//当前页数
|
|
||||||
id:any = this.route.snapshot.queryParams.id//身份证
|
|
||||||
PostName:any = this.route.snapshot.queryParams.PostName || "" //传过来的职务名称
|
|
||||||
|
|
||||||
recordList:any = false//渲染的100条列表
|
|
||||||
oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳
|
|
||||||
|
|
||||||
|
|
||||||
noRecord:boolean
|
|
||||||
//分页
|
|
||||||
@ViewChild(MatPaginator, {static: true})
|
|
||||||
pageEvent: PageEvent; |
|
||||||
paginator: MatPaginator; |
|
||||||
length:any; //共多少条数据
|
|
||||||
pageSize:any; //每页条数
|
|
||||||
// pageSizeOptions: number[] = [10] //设置每页条数
|
|
||||||
pageNumber:number = 1; //第几页
|
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
this.adapter.setLocale('CH'); |
|
||||||
|
|
||||||
let nowdate = new Date().toLocaleDateString() //本月日期 2020/07/11 形式
|
|
||||||
this.lastdate = new Date(new Date().getTime()-this.oneMonthDate).toLocaleDateString() //上个月日期 2020/06/11 形式
|
|
||||||
|
|
||||||
this.startdate = new FormControl(new Date(this.lastdate)); //日历开始时间显示
|
|
||||||
this.enddate = new FormControl(new Date()); //日历结束时间显示
|
|
||||||
|
|
||||||
this.startTime = this.getTIme(new Date(this.lastdate))
|
|
||||||
this.endTime = this.getTIme(new Date()) |
|
||||||
|
|
||||||
this.getAllStudyRecords() |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//分页切换
|
|
||||||
chagePage (e) { |
|
||||||
this.pageNumber = e.pageIndex+1 |
|
||||||
let date:any = new Date() |
|
||||||
let data = { |
|
||||||
Name : this.id, |
|
||||||
StartTime : this.startTime, |
|
||||||
EndTime : this.endTime, |
|
||||||
Catalog : this.Catalog, |
|
||||||
PageNumber : String(this.pageNumber), |
|
||||||
PageSize:"100", |
|
||||||
PostName : this.PostName |
|
||||||
} |
|
||||||
this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => { |
|
||||||
this.recordList = data.items |
|
||||||
if(data.items.length == 0){ |
|
||||||
this.noRecord = true |
|
||||||
}else{ |
|
||||||
this.noRecord = false |
|
||||||
} |
|
||||||
this.recordList.forEach((item) => { |
|
||||||
item.time = item.creationTime.substring(0,10) |
|
||||||
item.time2 = item.creationTime.substring(11,16) |
|
||||||
}) |
|
||||||
this.length = data.totalCount |
|
||||||
this.pageSize = data.pageSize |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
//传入 new Date()格式 将日期变为 年月日时分秒
|
|
||||||
getTIme(date){ |
|
||||||
let year = date.getFullYear(); //年
|
|
||||||
let month = date.getMonth() + 1; //月
|
|
||||||
let day = date.getDate(); //日
|
|
||||||
let hour = date.getHours() //时
|
|
||||||
let min = date.getMinutes(); //分
|
|
||||||
let seconds = date.getSeconds(); //秒
|
|
||||||
return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds; |
|
||||||
}
|
|
||||||
|
|
||||||
//初始获得所有学习记录
|
|
||||||
getAllStudyRecords(){ |
|
||||||
let date:any = new Date() |
|
||||||
let data = { |
|
||||||
Name : this.id, |
|
||||||
Catalog : this.Catalog || "", |
|
||||||
PageNumber : this.PageNumber, |
|
||||||
PageSize:"100", |
|
||||||
PostName:this.PostName |
|
||||||
} |
|
||||||
this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => { |
|
||||||
this.recordList = data.items |
|
||||||
if(data.items.length == 0){ |
|
||||||
this.noRecord = true |
|
||||||
}else{ |
|
||||||
this.noRecord = false |
|
||||||
} |
|
||||||
this.recordList.forEach((item) => { |
|
||||||
item.time = item.creationTime.substring(0,10) |
|
||||||
item.time2 = item.creationTime.substring(11,16) |
|
||||||
}) |
|
||||||
this.length = data.totalCount |
|
||||||
this.pageSize = data.pageSize |
|
||||||
this.pageEvent.pageIndex = 0 |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
//返回上一页
|
|
||||||
backtop(){ |
|
||||||
history.go(-1) |
|
||||||
} |
|
||||||
//带查询时间获得所有学习记录
|
|
||||||
getAllStudyRecords2(){ |
|
||||||
let date:any = new Date() |
|
||||||
let data = { |
|
||||||
Name : this.id, |
|
||||||
StartTime : this.startTime, |
|
||||||
EndTime : this.endTime, |
|
||||||
Catalog : this.Catalog || "", |
|
||||||
PageNumber : this.PageNumber, |
|
||||||
PageSize:"100", |
|
||||||
PostName:this.PostName |
|
||||||
} |
|
||||||
this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => { |
|
||||||
this.recordList = data.items |
|
||||||
if(data.items.length == 0){ |
|
||||||
this.noRecord = true |
|
||||||
}else{ |
|
||||||
this.noRecord = false |
|
||||||
} |
|
||||||
this.recordList.forEach((item) => { |
|
||||||
item.time = item.creationTime.substring(0,10) |
|
||||||
item.time2 = item.creationTime.substring(11,16) |
|
||||||
}) |
|
||||||
this.length = data.totalCount |
|
||||||
this.pageSize = data.pageSize |
|
||||||
this.pageEvent.pageIndex = 0 |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
//
|
|
||||||
//查询
|
|
||||||
onSubmit(){ |
|
||||||
if(this.startdate.value > this.enddate.value){ |
|
||||||
const config = new MatSnackBarConfig(); |
|
||||||
config.verticalPosition = 'top'; |
|
||||||
config.duration = 3000 |
|
||||||
this.snackBar.open('起始时间大于结束时间','确定',config); |
|
||||||
} |
|
||||||
if(this.enddate.value.toLocaleDateString() == new Date().toLocaleDateString() || this.enddate.value > new Date()){ |
|
||||||
this.enddate.value = new Date() |
|
||||||
} |
|
||||||
if(this.enddate.value < new Date() && this.enddate.value.toLocaleDateString() != new Date().toLocaleDateString()){ |
|
||||||
this.enddate.value = new Date(this.enddate.value.getTime() + 24*60*60*1000) |
|
||||||
} |
|
||||||
this.startTime = this.getTIme(this.startdate.value) |
|
||||||
this.endTime = this.getTIme(this.enddate.value) |
|
||||||
this.getAllStudyRecords2() |
|
||||||
} |
|
||||||
//重置
|
|
||||||
reset(){ |
|
||||||
this.startdate = new FormControl(new Date(this.lastdate)); //日历开始时间显示
|
|
||||||
this.enddate = new FormControl(new Date()); //日历结束时间显示
|
|
||||||
this.startTime = this.getTIme(this.startdate.value) |
|
||||||
this.endTime = this.getTIme(this.enddate.value) |
|
||||||
this.getAllStudyRecords() |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { LookOverTestComponent } from './look-over-test.component'; |
|
||||||
|
|
||||||
describe('LookOverTestComponent', () => { |
|
||||||
let component: LookOverTestComponent; |
|
||||||
let fixture: ComponentFixture<LookOverTestComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ LookOverTestComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(LookOverTestComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-look-over-test', |
|
||||||
templateUrl: './look-over-test.component.html', |
|
||||||
styleUrls: ['./look-over-test.component.scss'] |
|
||||||
}) |
|
||||||
export class LookOverTestComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1 +0,0 @@ |
|||||||
<p>统计分析</p> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { StatisticAnalysisComponent } from './statistic-analysis.component'; |
|
||||||
|
|
||||||
describe('StatisticAnalysisComponent', () => { |
|
||||||
let component: StatisticAnalysisComponent; |
|
||||||
let fixture: ComponentFixture<StatisticAnalysisComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ StatisticAnalysisComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(StatisticAnalysisComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-statistic-analysis', |
|
||||||
templateUrl: './statistic-analysis.component.html', |
|
||||||
styleUrls: ['./statistic-analysis.component.scss'] |
|
||||||
}) |
|
||||||
export class StatisticAnalysisComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { TestRecordsComponent } from './test-records.component'; |
|
||||||
|
|
||||||
describe('TestRecordsComponent', () => { |
|
||||||
let component: TestRecordsComponent; |
|
||||||
let fixture: ComponentFixture<TestRecordsComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ TestRecordsComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(TestRecordsComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-test-records', |
|
||||||
templateUrl: './test-records.component.html', |
|
||||||
styleUrls: ['./test-records.component.scss'] |
|
||||||
}) |
|
||||||
export class TestRecordsComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<div class="content"> |
|
||||||
<div class="header"> |
|
||||||
<label style="font-size: 14px;">{{thatFile.uploadProgress2}} 上传中...</label> |
|
||||||
<button mat-raised-button style="margin-left: 60%;" *ngIf="isShow" (click)='toggle()'><mat-icon>keyboard_arrow_down</mat-icon></button> |
|
||||||
<button mat-raised-button style="margin-left: 60%;" *ngIf="!isShow" (click)='toggle()'><mat-icon>keyboard_arrow_up</mat-icon></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div style="margin-top: 10px; border-top: 1px solid #e2e2e2;" [hidden]="!isShow"> |
|
||||||
|
|
||||||
<p class="dataStyle" *ngFor="let item of filesData"> |
|
||||||
<span class="dataName">{{item.name}}</span> |
|
||||||
<span class="dataSize">{{item.size | size}}</span> |
|
||||||
<span class="dataState" style="position: relative;"> |
|
||||||
<label *ngIf="item.state==0">等待中...</label> |
|
||||||
<label *ngIf="item.state==1"><mat-spinner diameter=24></mat-spinner></label> |
|
||||||
<label *ngIf="item.state==2" style="color: green;">√</label> |
|
||||||
</span> |
|
||||||
<span class="dataState" *ngIf="item.state==1 && item.size > 5242880" style="font-size: 22px; cursor:pointer;" title='取消上传' (click)='cancel()'> × </span> |
|
||||||
</p> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
.content { |
|
||||||
width: 100%; |
|
||||||
max-height: 250px; |
|
||||||
overflow-y: auto; |
|
||||||
overflow-x: hidden; |
|
||||||
background-color: #fff; |
|
||||||
border: 1px solid #e2e2e2; |
|
||||||
box-shadow: 0 0 10px #ccc; |
|
||||||
border-radius: 10px; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
.header { |
|
||||||
box-sizing: border-box; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
button { |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//每一行数据 |
|
||||||
.dataStyle { |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
margin: 5px 0; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 3px; |
|
||||||
span{ |
|
||||||
display: inline-block; |
|
||||||
font-size: 12px; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
.dataName { |
|
||||||
width: 40%; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
.dataSize { |
|
||||||
width: 20%; |
|
||||||
} |
|
||||||
.dataState { |
|
||||||
width: 15%; |
|
||||||
} |
|
||||||
} |
|
||||||
.dataStyle:hover { |
|
||||||
background-color: #e2e2e2; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//滚动条样式 |
|
||||||
.content::-webkit-scrollbar { |
|
||||||
/*滚动条整体样式*/ |
|
||||||
width : 6px; /*高宽分别对应横竖滚动条的尺寸*/ |
|
||||||
height: 1px; |
|
||||||
} |
|
||||||
.content::-webkit-scrollbar-thumb { |
|
||||||
/*滚动条里面小方块*/ |
|
||||||
border-radius: 10px; |
|
||||||
box-shadow : inset 0 0 5px #999; |
|
||||||
background : #535353; |
|
||||||
} |
|
||||||
.content::-webkit-scrollbar-track { |
|
||||||
/*滚动条里面轨道*/ |
|
||||||
box-shadow : inset 0 0 5px #999; |
|
||||||
border-radius: 10px; |
|
||||||
background : #ededed; |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { UploadFilesComponent } from './upload-files.component'; |
|
||||||
|
|
||||||
describe('UploadFilesComponent', () => { |
|
||||||
let component: UploadFilesComponent; |
|
||||||
let fixture: ComponentFixture<UploadFilesComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ UploadFilesComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(UploadFilesComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,67 +0,0 @@ |
|||||||
import { Component, OnInit,Input } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-upload-files', |
|
||||||
templateUrl: './upload-files.component.html', |
|
||||||
styleUrls: ['./upload-files.component.scss'] |
|
||||||
}) |
|
||||||
export class UploadFilesComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
@Input( ) thatFile:any //父组件
|
|
||||||
|
|
||||||
isShow:boolean = true; //弹出框最大/化最小化
|
|
||||||
filesData:any = []; //上传文件夹数据
|
|
||||||
|
|
||||||
//上传文件夹弹窗显隐
|
|
||||||
toggle () { |
|
||||||
this.isShow = !this.isShow |
|
||||||
} |
|
||||||
|
|
||||||
//处理数据格式
|
|
||||||
handleData () { |
|
||||||
this.filesData = [] |
|
||||||
for (let i=0; i<this.thatFile.fileArr.length; i++) { |
|
||||||
this.thatFile.fileArr[i].state = 0 |
|
||||||
this.filesData.push(this.thatFile.fileArr[i]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//当前上传文件正在上传
|
|
||||||
uploading (e) { |
|
||||||
this.filesData.forEach(element => { |
|
||||||
if (element.name == e.name) { |
|
||||||
element.state = 1
|
|
||||||
return |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//当前上传文件上传成功
|
|
||||||
endUpload (e) { |
|
||||||
this.filesData.forEach(element => { |
|
||||||
if (element.name == e.name) { |
|
||||||
element.state = 2
|
|
||||||
return |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//清空数据
|
|
||||||
delete () { |
|
||||||
this.filesData = [] |
|
||||||
} |
|
||||||
|
|
||||||
//取消上传
|
|
||||||
cancel () { |
|
||||||
this.thatFile.cancel2() |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,24 +1,443 @@ |
|||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import * as ObjectID from 'bson-objectid'; |
||||||
|
import { GameMode } from './gameMode'; |
||||||
|
import { Pipeline } from './pipeline'; |
||||||
|
import { PaintMode } from './paintModel'; |
||||||
import * as PIXI from 'pixi.js'; |
import * as PIXI from 'pixi.js'; |
||||||
|
import { PropertyInfo } from './PropertyInfo'; |
||||||
|
import { AxShape } from './axShape'; |
||||||
|
import { Sprite } from 'pixi.js'; |
||||||
|
|
||||||
/** |
/** |
||||||
* 安信形状 |
* 安信图片形状 |
||||||
|
* AxImageShape |
||||||
*/ |
*/ |
||||||
export class AxImageShape extends PIXI.Container { |
export class AxImageShape extends AxShape { |
||||||
|
style = new PIXI.TextStyle({ |
||||||
|
fontFamily: 'Arial', |
||||||
|
fontSize: 18, |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: 'bold', |
||||||
|
fill: ['#000000'], |
||||||
|
stroke: '#ffffff', |
||||||
|
strokeThickness: 3, |
||||||
|
dropShadow: true, |
||||||
|
dropShadowColor: '#000000', |
||||||
|
dropShadowBlur: 3, |
||||||
|
dropShadowAngle: Math.PI / 6, |
||||||
|
dropShadowDistance: 1, |
||||||
|
wordWrap: false, |
||||||
|
wordWrapWidth: 100, |
||||||
|
}); |
||||||
|
|
||||||
|
text = new PIXI.Text(this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
||||||
|
|
||||||
|
/** |
||||||
|
* 选中圆点 |
||||||
|
*/ |
||||||
|
|
||||||
image: PIXI.Sprite; |
image: PIXI.Sprite; |
||||||
|
selectionBox = new PIXI.Graphics(); |
||||||
|
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); |
||||||
|
connectPoint: Sprite; |
||||||
|
// 可移动的
|
||||||
|
|
||||||
constructor() { |
// 可选中的
|
||||||
super(); |
|
||||||
|
|
||||||
} |
// up: PIXI.Sprite;
|
||||||
|
// down: PIXI.Sprite;
|
||||||
|
// left: PIXI.Sprite;
|
||||||
|
// right: PIXI.Sprite;
|
||||||
|
// upLeft: PIXI.Sprite;
|
||||||
|
// upRight: PIXI.Sprite;
|
||||||
|
// downLeft: PIXI.Sprite;
|
||||||
|
// downRight: PIXI.Sprite;
|
||||||
|
constructor(assetData: any, workingArea: WorkingAreaComponent) { |
||||||
|
super(assetData, workingArea); |
||||||
|
this.x = this.assetData.Point.x; |
||||||
|
this.y = this.assetData.Point.y; |
||||||
|
this.name = this.assetData.Id; |
||||||
|
this.image = PIXI.Sprite.from(this.assetData.ImageUrl); |
||||||
|
this.image.angle = this.assetData.Angle; |
||||||
|
|
||||||
|
this.image.x = 0; |
||||||
|
this.image.y = 0; |
||||||
|
this.image.width = this.assetData.Width; |
||||||
|
this.image.height = this.assetData.Height; |
||||||
|
this.image.alpha = 1; |
||||||
|
this.image.anchor.set(0.5); |
||||||
|
// this.image.interactive = true;
|
||||||
|
// this.image.buttonMode = true;
|
||||||
|
// this.image
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// this.workingArea.selection.selectOne(this);
|
||||||
|
// // this.paintingPipeline(this.x, this.y);
|
||||||
|
// // 如果链接对象不为空,禁止移动
|
||||||
|
// if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
|
||||||
|
// event.currentTarget.parent.data = event.data;
|
||||||
|
// event.currentTarget.parent.alpha = 0.5;
|
||||||
|
// event.currentTarget.parent.dragging = true;
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .on('mouseup', event => {
|
||||||
|
// if (event.currentTarget.parent.dragging) {
|
||||||
|
// event.currentTarget.parent.alpha = 1;
|
||||||
|
// event.currentTarget.parent.dragging = false;
|
||||||
|
// event.currentTarget.parent.data = null;
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .on('mouseupoutside', event => {
|
||||||
|
// if (event.currentTarget.parent.dragging) {
|
||||||
|
// event.currentTarget.parent.alpha = 1;
|
||||||
|
// event.currentTarget.parent.dragging = false;
|
||||||
|
// event.currentTarget.parent.data = null;
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .on('mousemove', event => {
|
||||||
|
// if (event.currentTarget.parent.dragging) {
|
||||||
|
// // // 如果拖动过程中发现父对象不是背景图
|
||||||
|
// // if (this.parent !== this.workingArea.backgroundImage) {
|
||||||
|
// // this.setParent(this.workingArea.backgroundImage);
|
||||||
|
// // if (this.assetData.FixedSize) {
|
||||||
|
// // const scale = 1 / this.workingArea.backgroundImage.scale.x;
|
||||||
|
// // this.scale.set(scale);
|
||||||
|
// // }
|
||||||
|
// // }
|
||||||
|
// const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
|
||||||
|
// event.currentTarget.parent.x = newPosition.x;
|
||||||
|
// event.currentTarget.parent.y = newPosition.y;
|
||||||
|
// this.assetData.Point = new PIXI.Point(this.x, this.y);
|
||||||
|
// this.workingArea.canvasData.isChange = true;
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .on('rightclick', event => {
|
||||||
|
|
||||||
paintVertexShape(rect: PIXI.Rectangle) { |
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// if (this.workingArea.previewImage !== null
|
||||||
|
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
|
||||||
|
// this.workingArea.previewImage.visible = false;
|
||||||
|
// }
|
||||||
|
// // if (this.assetData.CanConnect) {
|
||||||
|
// // this.setSelectionBox(true, this.image);
|
||||||
|
// // }
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// if (this.workingArea.previewImage !== null
|
||||||
|
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
|
||||||
|
// this.workingArea.previewImage.visible = true;
|
||||||
|
// }
|
||||||
|
// // if (this.assetData.CanConnect) {
|
||||||
|
// // this.setSelectionBox(false);
|
||||||
|
// // }
|
||||||
|
// });
|
||||||
|
this.text.x = this.image.x; |
||||||
|
this.text.y = this.image.y - this.image.height / 2; |
||||||
|
this.text.anchor.set(0.5, 1); |
||||||
|
|
||||||
} |
if (this.assetData.GameMode === 2) { |
||||||
paintBackground(rect: PIXI.Rectangle) { } |
this.text.visible = false; |
||||||
|
} |
||||||
|
this.addChild(this.text); |
||||||
|
this.addChild(this.image); |
||||||
|
this.addChild(this.selectionBox); |
||||||
|
|
||||||
|
if (this.assetData.CanConnect) { |
||||||
|
// connectPoint
|
||||||
|
this.connectPoint = new PIXI.Sprite(this.connectPointTexture); |
||||||
|
this.connectPoint.anchor.set(0.5); |
||||||
|
this.connectPoint.x = this.image.x; |
||||||
|
this.connectPoint.y = this.image.y; |
||||||
|
this.addChild(this.connectPoint); |
||||||
|
this.connectPoint.interactive = true; |
||||||
|
this.connectPoint |
||||||
|
.on('mousedown', event => { |
||||||
|
event.stopPropagation(); |
||||||
|
this.paintingPipeline(this.x, this.y); |
||||||
|
}) |
||||||
|
.on('mouseover', event => { |
||||||
|
this.setSelectionBox(true, this.connectPoint); |
||||||
|
}) |
||||||
|
.on('mouseout', event => { |
||||||
|
this.setSelectionBox(false); |
||||||
|
}); |
||||||
|
// // up
|
||||||
|
// this.up = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.up.anchor.set(0.5);
|
||||||
|
// this.up.x = this.image.x;
|
||||||
|
// this.up.y = this.image.y - (this.image.height / 2);
|
||||||
|
// this.addChild(this.up);
|
||||||
|
// this.up.interactive = true;
|
||||||
|
// this.up
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.up);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
// // down
|
||||||
|
// this.down = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.down.anchor.set(0.5);
|
||||||
|
// this.down.x = this.image.x;
|
||||||
|
// this.down.y = this.image.y + (this.image.height / 2);
|
||||||
|
// this.addChild(this.down);
|
||||||
|
// this.down.interactive = true;
|
||||||
|
// this.down
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.down.x, this.down.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.down);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
// // left
|
||||||
|
// this.left = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.left.anchor.set(0.5);
|
||||||
|
// this.left.x = this.image.x - (this.image.width / 2);
|
||||||
|
// this.left.y = this.image.y;
|
||||||
|
// this.addChild(this.left);
|
||||||
|
// this.left.interactive = true;
|
||||||
|
// this.left
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.left.x, this.left.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.left);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
// // right
|
||||||
|
// this.right = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.right.anchor.set(0.5);
|
||||||
|
// this.right.x = this.image.x + (this.image.width / 2);
|
||||||
|
// this.right.y = this.image.y;
|
||||||
|
// this.addChild(this.right);
|
||||||
|
// this.right.interactive = true;
|
||||||
|
// this.right
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.right.x, this.right.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.right);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
// // up-left
|
||||||
|
// this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.upLeft.anchor.set(0.5);
|
||||||
|
// this.upLeft.x = this.image.x - (this.image.width / 2);
|
||||||
|
// this.upLeft.y = this.image.y - (this.image.height / 2);
|
||||||
|
// this.addChild(this.upLeft);
|
||||||
|
// this.upLeft.interactive = true;
|
||||||
|
// this.upLeft
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.upLeft.x, this.upLeft.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.upLeft);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
// // up-right
|
||||||
|
// this.upRight = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.upRight.anchor.set(0.5);
|
||||||
|
// this.upRight.x = this.image.x + (this.image.width / 2);
|
||||||
|
// this.upRight.y = this.image.y - (this.image.height / 2);
|
||||||
|
// this.addChild(this.upRight);
|
||||||
|
// this.upRight.interactive = true;
|
||||||
|
// this.upRight
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.upRight.x, this.upRight.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.upRight);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
|
||||||
paintForeground(rect: PIXI.Rectangle) { } |
// // down-left
|
||||||
|
// this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.downLeft.anchor.set(0.5);
|
||||||
|
// this.downLeft.x = this.image.x - (this.image.width / 2);
|
||||||
|
// this.downLeft.y = this.image.y + (this.image.height / 2);
|
||||||
|
// this.addChild(this.downLeft);
|
||||||
|
// this.downLeft.interactive = true;
|
||||||
|
// this.downLeft
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.downLeft.x, this.downLeft.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.downLeft);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
// // down-right
|
||||||
|
// this.downRight = new PIXI.Sprite(this.selectedPointTexture);
|
||||||
|
// this.downRight.anchor.set(0.5);
|
||||||
|
// this.downRight.x = this.image.x + (this.image.width / 2);
|
||||||
|
// this.downRight.y = this.image.y + (this.image.height / 2);
|
||||||
|
// this.addChild(this.downRight);
|
||||||
|
// this.downRight.interactive = true;
|
||||||
|
// this.downRight
|
||||||
|
// .on('mousedown', event => {
|
||||||
|
// event.stopPropagation();
|
||||||
|
// const pt = this.toGlobal(new PIXI.Point(this.downRight.x, this.downRight.y));
|
||||||
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
||||||
|
// this.paintingPipeline(pt2.x, pt2.y);
|
||||||
|
// })
|
||||||
|
// .on('mouseover', event => {
|
||||||
|
// this.setSelectionBox(true, this.downRight);
|
||||||
|
// })
|
||||||
|
// .on('mouseout', event => {
|
||||||
|
// this.setSelectionBox(false);
|
||||||
|
// });
|
||||||
|
|
||||||
paintEdgeShape(pts: Array<PIXI.Point>) { } |
this.showConnectionPoint(false); |
||||||
|
} |
||||||
|
} |
||||||
|
// 设置选择框
|
||||||
|
public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { |
||||||
|
if (b) { |
||||||
|
this.selectionBox.lineStyle(2, 0x00EB00, 1); |
||||||
|
this.selectionBox.position = sprite.position; |
||||||
|
this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); |
||||||
|
// const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
|
||||||
|
// const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
|
||||||
|
// const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
|
||||||
|
// const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
|
||||||
|
// this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
|
||||||
|
// this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
|
||||||
|
// this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
|
||||||
|
// this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
|
||||||
|
} else { |
||||||
|
this.selectionBox.clear(); |
||||||
|
} |
||||||
|
} |
||||||
|
// 设置名称
|
||||||
|
public setNameVisible(value: boolean, mode: GameMode) { |
||||||
|
if (this.assetData.GameMode === mode) { |
||||||
|
this.text.visible = value; |
||||||
|
} |
||||||
|
} |
||||||
|
// 显示连接点
|
||||||
|
public showConnectionPoint(b: boolean) { |
||||||
|
this.connectPoint.visible = b; |
||||||
|
// this.up.visible = b;
|
||||||
|
// this.down.visible = b;
|
||||||
|
// this.left.visible = b;
|
||||||
|
// this.right.visible = b;
|
||||||
|
// this.upLeft.visible = b;
|
||||||
|
// this.downLeft.visible = b;
|
||||||
|
// this.upRight.visible = b;
|
||||||
|
// this.downRight.visible = b;
|
||||||
|
} |
||||||
|
paintingPipeline(x: number, y: number) { |
||||||
|
if (this.assetData.CanConnect) { |
||||||
|
if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { |
||||||
|
if (this.workingArea.paintingPipeline === null) { |
||||||
|
this.workingArea.previewLineSegment.visible = true; |
||||||
|
this.workingArea.currentClickPoint.position = |
||||||
|
new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); |
||||||
|
this.workingArea.paintPoints.push(new PIXI.Point(x, y)); |
||||||
|
const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); |
||||||
|
const list = []; |
||||||
|
json.forEach(element => { |
||||||
|
const property = new PropertyInfo(element); |
||||||
|
list.push(property); |
||||||
|
}); |
||||||
|
const tempData = { |
||||||
|
TemplateId: this.workingArea.canvasData.selectTemplateData.id, |
||||||
|
CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, |
||||||
|
Pipelines: new Array(), |
||||||
|
FloorId: this.workingArea.canvasData.selectStorey.id, |
||||||
|
Angle: this.workingArea.canvasData.selectTemplateData.angle, |
||||||
|
Color: this.workingArea.canvasData.selectTemplateData.color, |
||||||
|
Enabled: this.workingArea.canvasData.selectTemplateData.enabled, |
||||||
|
FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, |
||||||
|
FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, |
||||||
|
FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, |
||||||
|
Height : 32, |
||||||
|
Width : 32, |
||||||
|
Id: ObjectID.default.generate(), |
||||||
|
ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, |
||||||
|
InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, |
||||||
|
MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), |
||||||
|
Point: new PIXI.Point(0, 0), |
||||||
|
Name : this.workingArea.canvasData.selectTemplateData.name, |
||||||
|
PropertyInfos: list, |
||||||
|
Border : this.workingArea.canvasData.selectTemplateData.border, |
||||||
|
DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, |
||||||
|
Thickness : this.workingArea.canvasData.selectTemplateData.thickness, |
||||||
|
IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, |
||||||
|
GameMode: this.workingArea.canvasData.gameMode, |
||||||
|
LinkedObjects: new Array(this.assetData.Id), |
||||||
|
}; |
||||||
|
this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); |
||||||
|
this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id); |
||||||
|
this.workingArea.emit('createIcon', this.workingArea.paintingPipeline); |
||||||
|
} else { |
||||||
|
this.workingArea.previewLineSegment.visible = false; |
||||||
|
this.workingArea.currentClickPoint.position = |
||||||
|
new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); |
||||||
|
this.workingArea.paintPoints.push(new PIXI.Point(x, y)); |
||||||
|
this.workingArea.paintingPipeline.assetData.MultiPoint = |
||||||
|
JSON.parse(JSON.stringify(this.workingArea.paintPoints)); |
||||||
|
this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this.assetData.Id); |
||||||
|
this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id); |
||||||
|
this.workingArea.paintingPipeline.refresh(); |
||||||
|
this.workingArea.initPipelineData(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// 刷新
|
||||||
|
public refresh() { |
||||||
|
if (this.assetData.CanConnect) { |
||||||
|
|
||||||
|
} |
||||||
|
this.image.width = this.assetData.Width; |
||||||
|
this.image.height = this.assetData.Height; |
||||||
|
this.image.angle = this.assetData.Angle; |
||||||
|
this.text.text = this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
||||||
|
this.text.x = this.image.x; |
||||||
|
this.text.y = this.image.y - this.image.height / 2; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,27 @@ |
|||||||
|
import { Sprite, Texture } from 'pixi.js'; |
||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import { AxShape } from './axShape'; |
||||||
|
|
||||||
|
export class AxPreviewImageShape extends AxShape { |
||||||
|
image: Sprite = null; |
||||||
|
/** |
||||||
|
* |
||||||
|
*/ |
||||||
|
constructor(workingArea: WorkingAreaComponent) { |
||||||
|
super(null, workingArea); |
||||||
|
this.image = new Sprite(); |
||||||
|
this.image.width = 32; |
||||||
|
this.image.height = 32; |
||||||
|
this.image.anchor.set(0.5); |
||||||
|
this.interactive = false; |
||||||
|
this.scale.set(1 / this.workingArea.backgroundImage.scale.x); |
||||||
|
this.addChild(this.image); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 重新设置图片地址 |
||||||
|
* @param url 图片路径 |
||||||
|
*/ |
||||||
|
setImageUrl(url: string) { |
||||||
|
this.image.texture = Texture.from(url); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,56 +1,76 @@ |
|||||||
|
import { Constructor } from '@angular/material/core/common-behaviors/constructor'; |
||||||
import * as PIXI from 'pixi.js'; |
import * as PIXI from 'pixi.js'; |
||||||
// import { Point, Rectangle, Graphics } from 'pixi.js';
|
import { Point, Rectangle, Graphics, Container } from 'pixi.js'; |
||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
|
||||||
/** |
/** |
||||||
* 安信形状 |
* 安信形状 |
||||||
*/ |
*/ |
||||||
export class AxShape extends PIXI.Container { |
export class AxShape extends Container { |
||||||
|
assetData: any; |
||||||
|
workingArea: WorkingAreaComponent; |
||||||
|
// 可以被移动的
|
||||||
|
moveable = true; |
||||||
|
// 可以被选中的
|
||||||
|
selectable = true; |
||||||
|
|
||||||
points: Array<PIXI.Point> = []; |
constructor(assetData: any, workingArea: WorkingAreaComponent) { |
||||||
title: string; |
|
||||||
titleVisible: boolean; |
|
||||||
g: PIXI.Graphics = new PIXI.Graphics(); |
|
||||||
|
|
||||||
constructor() { |
|
||||||
super(); |
super(); |
||||||
this.addChild(this.g); |
this.assetData = assetData; |
||||||
// this.drawDashedLine(this.g, new Point(0, 0), new Point(0, 200), 0xff0000);
|
this.workingArea = workingArea; |
||||||
} |
this.workingArea.backgroundImage.addChild(this); |
||||||
// /**
|
this.interactive = true; |
||||||
// * 绘制虚线
|
this.buttonMode = true; |
||||||
// * @param g
|
this.on('mousedown', event => { |
||||||
// * @param p0
|
console.log(this.assetData); |
||||||
// * @param pe
|
event.stopPropagation(); |
||||||
// * @param color
|
if (this.selectable) { |
||||||
// * @param width
|
this.workingArea.selection.selectOne(this); |
||||||
// * @param dashLen
|
} |
||||||
// */
|
if (this.moveable) { |
||||||
// drawDashedLine(g: Graphics, p0: Point, pe: Point, color: number, width: number = 1, dashLen: number = 5) {
|
event.currentTarget.data = event.data; |
||||||
// g.lineStyle(width, color);
|
event.currentTarget.alpha = 0.5; |
||||||
// const len = Math.sqrt(Math.pow(pe.x - p0.x, 2) + Math.pow(pe.y - p0.y, 2));
|
event.currentTarget.dragging = true; |
||||||
// // tslint:disable-next-line: no-bitwise
|
|
||||||
// const num = ~~(len / dashLen);
|
|
||||||
// for (let i = 0; i < num; i++) {
|
|
||||||
// const x = p0.x + (pe.x - p0.x) / num * i;
|
|
||||||
// const y = p0.y + (pe.y - p0.y) / num * i;
|
|
||||||
// // tslint:disable-next-line: no-bitwise
|
|
||||||
// i & 1 ? g.lineTo(x, y) : g.moveTo(x, y);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
paintVertexShape(rect: PIXI.Rectangle) { |
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); |
||||||
// this.paintBackground(c, x, y, w, h);
|
event.currentTarget.dragPoint.x -= event.currentTarget.x; |
||||||
|
event.currentTarget.dragPoint.y -= event.currentTarget.y; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseup', event => { |
||||||
|
if (event.currentTarget.dragging) { |
||||||
|
event.currentTarget.alpha = 1; |
||||||
|
event.currentTarget.dragging = false; |
||||||
|
event.currentTarget.data = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseupoutside', event => { |
||||||
|
if (event.currentTarget.dragging) { |
||||||
|
event.currentTarget.alpha = 1; |
||||||
|
event.currentTarget.dragging = false; |
||||||
|
event.currentTarget.data = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mousemove', event => { |
||||||
|
if (event.currentTarget.dragging) { |
||||||
|
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); |
||||||
|
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; |
||||||
|
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; |
||||||
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
||||||
|
this.workingArea.canvasData.isChange = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('rightclick', event => { |
||||||
|
|
||||||
// if (!this.outline || this.style == null || mxUtils.getValue(
|
}) |
||||||
// this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0)
|
.on('mouseover', event => { |
||||||
// {
|
event.stopPropagation(); |
||||||
// c.setShadow(false);
|
}) |
||||||
// this.paintForeground(c, x, y, w, h);
|
.on('mouseout', event => { |
||||||
// }
|
event.stopPropagation(); |
||||||
|
}); |
||||||
|
} |
||||||
|
redraw(): void { |
||||||
|
|
||||||
} |
} |
||||||
paintBackground(rect: PIXI.Rectangle) { } |
|
||||||
|
|
||||||
paintForeground(rect: PIXI.Rectangle) { } |
|
||||||
|
|
||||||
paintEdgeShape(pts: Array<PIXI.Point>) { } |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,59 +1,59 @@ |
|||||||
import { OldFilmFilter } from 'pixi-filters'; |
// import { OldFilmFilter } from 'pixi-filters';
|
||||||
import { WorkingAreaComponent } from '../working-area.component'; |
// import { WorkingAreaComponent } from '../working-area.component';
|
||||||
import { PaintMode } from './paintModel'; |
// import { PaintMode } from './paintModel';
|
||||||
import { SinglePointIcon } from './singlePointIcon'; |
// import { SinglePointIcon } from './axImageShape';
|
||||||
import * as PIXI from 'pixi.js'; |
// import * as PIXI from 'pixi.js';
|
||||||
|
|
||||||
/** |
// /**
|
||||||
* 汽车放置区域 |
// * 汽车放置区域
|
||||||
*/ |
// */
|
||||||
export class PutCarArea extends PIXI.Container { |
// export class PutCarArea extends PIXI.Container {
|
||||||
public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); |
// public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
|
||||||
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
// constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
|
||||||
super(); |
// super();
|
||||||
this.name = this.assetData.Id; |
// this.name = this.assetData.Id;
|
||||||
this.x = this.assetData.Point.x; |
// this.x = this.assetData.Point.x;
|
||||||
this.y = this.assetData.Point.y; |
// this.y = this.assetData.Point.y;
|
||||||
this.workingArea.backgroundImage.addChild(this); |
// this.workingArea.backgroundImage.addChild(this);
|
||||||
this.sortableChildren = true; |
// this.sortableChildren = true;
|
||||||
|
|
||||||
// 填充多边形
|
// // 填充多边形
|
||||||
|
|
||||||
const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); |
// const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
|
||||||
const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; |
// const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
|
||||||
this.polygonGraphics.beginFill(color, angle); |
// this.polygonGraphics.beginFill(color, angle);
|
||||||
this.polygonGraphics.drawPolygon(this.assetData.MultiPoint); |
// this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
|
||||||
this.polygonGraphics.endFill(); |
// this.polygonGraphics.endFill();
|
||||||
this.addChild(this.polygonGraphics); |
// this.addChild(this.polygonGraphics);
|
||||||
// 添加选中事件
|
// // 添加选中事件
|
||||||
this.polygonGraphics.interactive = true; |
// this.polygonGraphics.interactive = true;
|
||||||
this.polygonGraphics |
// this.polygonGraphics
|
||||||
.on('pointerdown', (event) => { |
// .on('pointerdown', (event) => {
|
||||||
if (this.workingArea.getPaintMode() === PaintMode.Car) { |
// if (this.workingArea.getPaintMode() === PaintMode.Car) {
|
||||||
this.workingArea.selectCar.Point = |
// this.workingArea.selectCar.Point =
|
||||||
new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y); |
// new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
|
||||||
this.workingArea.selectCar.Angle = this.assetData.Direction; |
// this.workingArea.selectCar.Angle = this.assetData.Direction;
|
||||||
const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea); |
// const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
|
||||||
this.workingArea.setPaintMode(PaintMode.endPaint); |
// this.workingArea.setPaintMode(PaintMode.endPaint);
|
||||||
} |
// }
|
||||||
}) |
// })
|
||||||
.on('pointerup', (event) => { |
// .on('pointerup', (event) => {
|
||||||
|
|
||||||
}) |
// })
|
||||||
.on('pointerupoutside', (event) => { |
// .on('pointerupoutside', (event) => {
|
||||||
|
|
||||||
}) |
// })
|
||||||
.on('pointerover', (event) => { |
// .on('pointerover', (event) => {
|
||||||
this.workingArea.previewSinglePointIcon.filters = null; |
// this.workingArea.previewSinglePointIcon.filters = null;
|
||||||
this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1; |
// this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
|
||||||
// 设置车辆方向
|
// // 设置车辆方向
|
||||||
this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction; |
// this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
|
||||||
console.log(this.assetData.Name); |
// console.log(this.assetData.Name);
|
||||||
}) |
// })
|
||||||
.on('pointerout', (event) => { |
// .on('pointerout', (event) => {
|
||||||
this.workingArea.previewSinglePointIcon.filters = [ |
// this.workingArea.previewSinglePointIcon.filters = [
|
||||||
new OldFilmFilter() |
// new OldFilmFilter()
|
||||||
]; |
// ];
|
||||||
}); |
// });
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
|
|||||||
@ -1,373 +0,0 @@ |
|||||||
import { WorkingAreaComponent } from '../working-area.component'; |
|
||||||
import * as ObjectID from 'bson-objectid'; |
|
||||||
import { GameMode } from './gameMode'; |
|
||||||
import { Pipeline } from './pipeline'; |
|
||||||
import { PaintMode } from './paintModel'; |
|
||||||
import * as PIXI from 'pixi.js'; |
|
||||||
import { PropertyInfo } from './PropertyInfo'; |
|
||||||
import { AxShape } from './axShape'; |
|
||||||
|
|
||||||
/** |
|
||||||
* 单点图标 |
|
||||||
*/ |
|
||||||
export class SinglePointIcon extends AxShape { |
|
||||||
style = new PIXI.TextStyle({ |
|
||||||
fontFamily: 'Arial', |
|
||||||
fontSize: 18, |
|
||||||
fontStyle: 'normal', |
|
||||||
fontWeight: 'bold', |
|
||||||
fill: ['#000000'], |
|
||||||
stroke: '#ffffff', |
|
||||||
strokeThickness: 3, |
|
||||||
dropShadow: true, |
|
||||||
dropShadowColor: '#000000', |
|
||||||
dropShadowBlur: 3, |
|
||||||
dropShadowAngle: Math.PI / 6, |
|
||||||
dropShadowDistance: 1, |
|
||||||
wordWrap: false, |
|
||||||
wordWrapWidth: 100, |
|
||||||
}); |
|
||||||
|
|
||||||
text = new PIXI.Text(this.assetData.Name |
|
||||||
+ '\r\n' |
|
||||||
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
||||||
|
|
||||||
/** |
|
||||||
* 选中圆点 |
|
||||||
*/ |
|
||||||
selectedPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); |
|
||||||
image = PIXI.Sprite.from(this.assetData.ImageUrl); |
|
||||||
selectionBox = new PIXI.Graphics(); |
|
||||||
up: PIXI.Sprite; |
|
||||||
down: PIXI.Sprite; |
|
||||||
left: PIXI.Sprite; |
|
||||||
right: PIXI.Sprite; |
|
||||||
upLeft: PIXI.Sprite; |
|
||||||
upRight: PIXI.Sprite; |
|
||||||
downLeft: PIXI.Sprite; |
|
||||||
downRight: PIXI.Sprite; |
|
||||||
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
|
||||||
super(); |
|
||||||
this.workingArea.backgroundImage.addChild(this); |
|
||||||
this.x = this.assetData.Point.x; |
|
||||||
this.y = this.assetData.Point.y; |
|
||||||
this.name = this.assetData.Id; |
|
||||||
|
|
||||||
this.image.angle = this.assetData.Angle; |
|
||||||
|
|
||||||
this.image.x = 0; |
|
||||||
this.image.y = 0; |
|
||||||
this.image.width = this.assetData.Width; |
|
||||||
this.image.height = this.assetData.Height; |
|
||||||
console.log(this.getBounds()); |
|
||||||
this.image.alpha = 1; |
|
||||||
this.image.anchor.set(0.5); |
|
||||||
this.image.interactive = true; |
|
||||||
this.image |
|
||||||
.on('mousedown', event => { |
|
||||||
event.stopPropagation(); |
|
||||||
this.workingArea.selection.selectOne(this); |
|
||||||
this.paintingPipeline(this.x, this.y); |
|
||||||
// 如果链接对象不为空,禁止移动
|
|
||||||
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { |
|
||||||
event.currentTarget.parent.data = event.data; |
|
||||||
event.currentTarget.parent.alpha = 0.5; |
|
||||||
event.currentTarget.parent.dragging = true; |
|
||||||
} |
|
||||||
}) |
|
||||||
.on('mouseup', event => { |
|
||||||
if (event.currentTarget.parent.dragging) { |
|
||||||
event.currentTarget.parent.alpha = 1; |
|
||||||
event.currentTarget.parent.dragging = false; |
|
||||||
event.currentTarget.parent.data = null; |
|
||||||
} |
|
||||||
}) |
|
||||||
.on('mouseupoutside', event => { |
|
||||||
if (event.currentTarget.parent.dragging) { |
|
||||||
event.currentTarget.parent.alpha = 1; |
|
||||||
event.currentTarget.parent.dragging = false; |
|
||||||
event.currentTarget.parent.data = null; |
|
||||||
} |
|
||||||
}) |
|
||||||
.on('mousemove', event => { |
|
||||||
if (event.currentTarget.parent.dragging) { |
|
||||||
// 如果拖动过程中发现父对象不是背景图
|
|
||||||
if (this.parent !== this.workingArea.backgroundImage) { |
|
||||||
this.setParent(this.workingArea.backgroundImage); |
|
||||||
if (this.assetData.FixedSize) { |
|
||||||
const scale = 1 / this.workingArea.backgroundImage.scale.x; |
|
||||||
this.scale.set(scale); |
|
||||||
} |
|
||||||
} |
|
||||||
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); |
|
||||||
event.currentTarget.parent.x = newPosition.x; |
|
||||||
event.currentTarget.parent.y = newPosition.y; |
|
||||||
this.assetData.Point = new PIXI.Point(this.x, this.y); |
|
||||||
this.workingArea.canvasData.isChange = true; |
|
||||||
} |
|
||||||
}) |
|
||||||
.on('rightclick', event => { |
|
||||||
|
|
||||||
}) |
|
||||||
.on('mouseover', event => { |
|
||||||
// if (this.assetData.CanConnect) {
|
|
||||||
// this.setSelectionBox(true, this.image);
|
|
||||||
// }
|
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
// if (this.assetData.CanConnect) {
|
|
||||||
// this.setSelectionBox(false);
|
|
||||||
// }
|
|
||||||
}); |
|
||||||
this.text.x = this.image.x; |
|
||||||
this.text.y = this.image.y - this.image.height / 2; |
|
||||||
this.text.anchor.set(0.5, 1); |
|
||||||
|
|
||||||
if (this.assetData.GameMode === 2) { |
|
||||||
this.text.visible = false; |
|
||||||
} |
|
||||||
this.addChild(this.text); |
|
||||||
this.addChild(this.image); |
|
||||||
this.addChild(this.selectionBox); |
|
||||||
|
|
||||||
if (this.assetData.CanConnect) { |
|
||||||
// up
|
|
||||||
this.up = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.up.anchor.set(0.5); |
|
||||||
this.up.x = this.image.x; |
|
||||||
this.up.y = this.image.y - (this.image.height / 2); |
|
||||||
this.addChild(this.up); |
|
||||||
this.up.interactive = true; |
|
||||||
this.up |
|
||||||
.on('mousedown', event => { |
|
||||||
event.stopPropagation(); |
|
||||||
const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y)); |
|
||||||
const pt2 = this.workingArea.backgroundImage.toLocal(pt); |
|
||||||
this.paintingPipeline(pt2.x, pt2.y); |
|
||||||
}) |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.up); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
// down
|
|
||||||
this.down = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.down.anchor.set(0.5); |
|
||||||
this.down.x = this.image.x; |
|
||||||
this.down.y = this.image.y + (this.image.height / 2); |
|
||||||
this.addChild(this.down); |
|
||||||
this.down.interactive = true; |
|
||||||
this.down |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.down); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
// left
|
|
||||||
this.left = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.left.anchor.set(0.5); |
|
||||||
this.left.x = this.image.x - (this.image.width / 2); |
|
||||||
this.left.y = this.image.y; |
|
||||||
this.addChild(this.left); |
|
||||||
this.left.interactive = true; |
|
||||||
this.left |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.left); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
// right
|
|
||||||
this.right = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.right.anchor.set(0.5); |
|
||||||
this.right.x = this.image.x + (this.image.width / 2); |
|
||||||
this.right.y = this.image.y; |
|
||||||
this.addChild(this.right); |
|
||||||
this.right.interactive = true; |
|
||||||
this.right |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.right); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
// up-left
|
|
||||||
this.upLeft = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.upLeft.anchor.set(0.5); |
|
||||||
this.upLeft.x = this.image.x - (this.image.width / 2); |
|
||||||
this.upLeft.y = this.image.y - (this.image.height / 2); |
|
||||||
this.addChild(this.upLeft); |
|
||||||
this.upLeft.interactive = true; |
|
||||||
this.upLeft |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.upLeft); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
// up-right
|
|
||||||
this.upRight = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.upRight.anchor.set(0.5); |
|
||||||
this.upRight.x = this.image.x + (this.image.width / 2); |
|
||||||
this.upRight.y = this.image.y - (this.image.height / 2); |
|
||||||
this.addChild(this.upRight); |
|
||||||
this.upRight.interactive = true; |
|
||||||
this.upRight |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.upRight); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
|
|
||||||
// down-left
|
|
||||||
this.downLeft = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.downLeft.anchor.set(0.5); |
|
||||||
this.downLeft.x = this.image.x - (this.image.width / 2); |
|
||||||
this.downLeft.y = this.image.y + (this.image.height / 2); |
|
||||||
this.addChild(this.downLeft); |
|
||||||
this.downLeft.interactive = true; |
|
||||||
this.downLeft |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.downLeft); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
// down-right
|
|
||||||
this.downRight = new PIXI.Sprite(this.selectedPointTexture); |
|
||||||
this.downRight.anchor.set(0.5); |
|
||||||
this.downRight.x = this.image.x + (this.image.width / 2); |
|
||||||
this.downRight.y = this.image.y + (this.image.height / 2); |
|
||||||
this.addChild(this.downRight); |
|
||||||
this.downRight.interactive = true; |
|
||||||
this.downRight |
|
||||||
.on('mouseover', event => { |
|
||||||
this.setSelectionBox(true, this.downRight); |
|
||||||
}) |
|
||||||
.on('mouseout', event => { |
|
||||||
this.setSelectionBox(false); |
|
||||||
}); |
|
||||||
|
|
||||||
this.showConnectionPoint(false); |
|
||||||
} |
|
||||||
} |
|
||||||
// 设置选择框
|
|
||||||
public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { |
|
||||||
if (b) { |
|
||||||
this.selectionBox.lineStyle(2, 0x00EB00, 1); |
|
||||||
this.selectionBox.position = sprite.position; |
|
||||||
this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); |
|
||||||
// const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
|
|
||||||
// const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
|
|
||||||
// const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
|
|
||||||
// const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
|
|
||||||
// this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
|
|
||||||
// this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
|
|
||||||
// this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
|
|
||||||
// this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
|
|
||||||
} else { |
|
||||||
this.selectionBox.clear(); |
|
||||||
} |
|
||||||
} |
|
||||||
// 设置名称
|
|
||||||
public setNameVisible(value: boolean, mode: GameMode) { |
|
||||||
if (this.assetData.GameMode === mode) { |
|
||||||
this.text.visible = value; |
|
||||||
} |
|
||||||
} |
|
||||||
// 显示连接点
|
|
||||||
public showConnectionPoint(b: boolean) { |
|
||||||
this.up.visible = b; |
|
||||||
this.down.visible = b; |
|
||||||
this.left.visible = b; |
|
||||||
this.right.visible = b; |
|
||||||
this.upLeft.visible = b; |
|
||||||
this.downLeft.visible = b; |
|
||||||
this.upRight.visible = b; |
|
||||||
this.downRight.visible = b; |
|
||||||
} |
|
||||||
paintingPipeline(x: number, y: number) { |
|
||||||
if (this.assetData.CanConnect) { |
|
||||||
if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { |
|
||||||
if (this.workingArea.paintingPipeline === null) { |
|
||||||
this.workingArea.previewLineSegment.visible = true; |
|
||||||
this.workingArea.currentClickPoint.position = |
|
||||||
new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); |
|
||||||
this.workingArea.paintPoints.push(new PIXI.Point(x, y)); |
|
||||||
// const tempData = {
|
|
||||||
// Id: ObjectID.default.generate(),
|
|
||||||
// MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
|
|
||||||
// Point: new PIXI.Point(0, 0),
|
|
||||||
// Name: '管线',
|
|
||||||
// LinkedObjects: new Array(),
|
|
||||||
// };
|
|
||||||
const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); |
|
||||||
const list = []; |
|
||||||
json.forEach(element => { |
|
||||||
const property = new PropertyInfo(element); |
|
||||||
list.push(property); |
|
||||||
}); |
|
||||||
const tempData = { |
|
||||||
TemplateId: this.workingArea.canvasData.selectTemplateData.id, |
|
||||||
CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, |
|
||||||
Pipelines: new Array(), |
|
||||||
FloorId: this.workingArea.canvasData.selectStorey.id, |
|
||||||
Angle: this.workingArea.canvasData.selectTemplateData.angle, |
|
||||||
Color: this.workingArea.canvasData.selectTemplateData.color, |
|
||||||
Enabled: this.workingArea.canvasData.selectTemplateData.enabled, |
|
||||||
FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, |
|
||||||
FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, |
|
||||||
FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, |
|
||||||
Height : 32, |
|
||||||
Width : 32, |
|
||||||
Id: ObjectID.default.generate(), |
|
||||||
ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, |
|
||||||
InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, |
|
||||||
MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), |
|
||||||
Point: new PIXI.Point(0, 0), |
|
||||||
Name : this.workingArea.canvasData.selectTemplateData.name, |
|
||||||
PropertyInfos: list, |
|
||||||
Border : this.workingArea.canvasData.selectTemplateData.border, |
|
||||||
DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, |
|
||||||
Thickness : this.workingArea.canvasData.selectTemplateData.thickness, |
|
||||||
IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, |
|
||||||
GameMode: this.workingArea.canvasData.gameMode, |
|
||||||
LinkedObjects: new Array(), |
|
||||||
}; |
|
||||||
this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); |
|
||||||
// this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
|
|
||||||
// this.assetData.Pipelines.push(this.workingArea.paintingPipeline.Id);
|
|
||||||
this.workingArea.emit('createIcon', this.workingArea.paintingPipeline); |
|
||||||
} else { |
|
||||||
this.workingArea.previewLineSegment.visible = false; |
|
||||||
this.workingArea.currentClickPoint.position = |
|
||||||
new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); |
|
||||||
this.workingArea.paintPoints.push(new PIXI.Point(x, y)); |
|
||||||
this.workingArea.paintingPipeline.assetData.MultiPoint = |
|
||||||
JSON.parse(JSON.stringify(this.workingArea.paintPoints)); |
|
||||||
// this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
|
|
||||||
// this.assetData.Pipelines.push(this.workingArea.paintingPipeline);
|
|
||||||
this.workingArea.paintingPipeline.refresh(); |
|
||||||
this.workingArea.initPipelineData(); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
// 刷新
|
|
||||||
public refresh() { |
|
||||||
if (this.assetData.CanConnect) { |
|
||||||
|
|
||||||
} |
|
||||||
this.image.width = this.assetData.Width; |
|
||||||
this.image.height = this.assetData.Height; |
|
||||||
this.image.angle = this.assetData.Angle; |
|
||||||
this.text.text = this.assetData.Name |
|
||||||
+ '\r\n' |
|
||||||
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
||||||
this.text.x = this.image.x; |
|
||||||
this.text.y = this.image.y - this.image.height / 2; |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue