11 changed files with 482 additions and 17 deletions
@ -0,0 +1,14 @@
|
||||
<div class="box"> |
||||
<div class="topbox"> |
||||
<span style="color: #FC7045;">说明:</span> |
||||
<span> |
||||
{{explain}} |
||||
</span> |
||||
</div> |
||||
<div class="textbox"> |
||||
<textarea [(ngModel)]="textcontant" name="" id="" [placeholder]="placeholder"></textarea> |
||||
</div> |
||||
<div class="btn"> |
||||
<div (click)="save()">保存</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,46 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
font-size: 0.146484rem; |
||||
font-family: Source Han Sans CN; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.topbox{ |
||||
margin: 0 auto; |
||||
width: 90%; |
||||
margin-top: 0.195313rem; |
||||
} |
||||
.textbox{ |
||||
margin: 0 auto; |
||||
flex: 1; |
||||
width: 90%; |
||||
border-radius: 10px; |
||||
padding: 0.195313rem; |
||||
textarea{ |
||||
font-family: Source Han Sans CN; |
||||
font-size: 0.146484rem; |
||||
border-radius: 10px; |
||||
background: #F4F5F9; |
||||
width: 100%; |
||||
height: 100%; |
||||
border: none; |
||||
box-sizing:border-box; |
||||
padding: 0.195313rem; |
||||
} |
||||
} |
||||
.btn{ |
||||
div{ |
||||
margin: 0 auto; |
||||
margin-bottom: 0.126953rem; |
||||
width: 0.78125rem; |
||||
height: 0.351563rem; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: 0.351563rem; |
||||
background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%); |
||||
opacity: 1; |
||||
border-radius: 0.292969rem; |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ExplainTextareaComponent } from './explain-textarea.component'; |
||||
|
||||
describe('ExplainTextareaComponent', () => { |
||||
let component: ExplainTextareaComponent; |
||||
let fixture: ComponentFixture<ExplainTextareaComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ExplainTextareaComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ExplainTextareaComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,22 @@
|
||||
import { Component, Input, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-explain-textarea', |
||||
templateUrl: './explain-textarea.component.html', |
||||
styleUrls: ['./explain-textarea.component.scss'] |
||||
}) |
||||
export class ExplainTextareaComponent implements OnInit { |
||||
@Input() explain:String |
||||
@Input() placeholder:String |
||||
@Input() index:String |
||||
|
||||
textcontant:string
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
this.textcontant = localStorage.getItem(sessionStorage.getItem('companyId')+'text'+this.index) || '' |
||||
} |
||||
save(){ |
||||
localStorage.setItem(sessionStorage.getItem('companyId')+'text'+this.index,this.textcontant) |
||||
} |
||||
} |
||||
@ -0,0 +1,95 @@
|
||||
<!-- 现场照片 --> |
||||
<table > |
||||
<tr> |
||||
<td> |
||||
<div class="noImg" *ngIf="!unitImg" (click)="dialog()"> |
||||
<div> |
||||
<img class="camera" src="../../../assets/images/camera.png" alt=""> |
||||
</div> |
||||
<p>上传演练单位照片</p> |
||||
<div> |
||||
<span>单位整体建筑或大门照片，要求照拍照时要求设置拍照日期</span> |
||||
</div> |
||||
</div> |
||||
<div class="input" *ngIf="!unitImg && isEditPattern"> |
||||
<input type="file" (change)="filechange1($event,'1')" name="imgFile"> |
||||
</div> |
||||
<div *ngIf="unitImg" id="viewerjs1"> |
||||
<img class="image" [src]="unitImg" alt="" [attr.data-original]="unitImg.split('?')[0]"> |
||||
</div> |
||||
<div *ngIf="unitImg && isEditPattern" class="deleteicon"> |
||||
<button mat-icon-button (click)="deleteimg('1')"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div class="noImg" *ngIf="!lingdaoImg" (click)="dialog()"> |
||||
<div> |
||||
<img src="../../../assets/images/camera.png" alt=""> |
||||
</div> |
||||
<p>上传演练现场照片</p> |
||||
<div> |
||||
<span>拍照时要求设置拍照日期</span> |
||||
</div> |
||||
</div> |
||||
<div class="input" *ngIf="!lingdaoImg && isEditPattern"> |
||||
<input type="file" (change)="filechange1($event,'2')" name="imgFile"> |
||||
</div> |
||||
<div *ngIf="lingdaoImg" id="viewerjs2"> |
||||
<img class="image" [src]="lingdaoImg" alt="" [attr.data-original]="lingdaoImg.split('?')[0]"> |
||||
</div> |
||||
<div *ngIf="lingdaoImg && isEditPattern" class="deleteicon"> |
||||
<button mat-icon-button (click)="deleteimg('2')"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<div class="noImg" *ngIf="!peopleImg" (click)="dialog()"> |
||||
<div> |
||||
<img src="../../../assets/images/camera.png" alt=""> |
||||
</div> |
||||
<p>上传演练现场照片</p> |
||||
<div> |
||||
<span>拍照时要求设置拍照日期</span> |
||||
</div> |
||||
</div> |
||||
<div class="input" *ngIf="!peopleImg && isEditPattern"> |
||||
<input type="file" (change)="filechange1($event,'3')" name="imgFile"> |
||||
</div> |
||||
<div *ngIf="peopleImg" id="viewerjs3"> |
||||
<img class="image" [src]="peopleImg" alt="" [attr.data-original]="peopleImg.split('?')[0]"> |
||||
</div> |
||||
<div *ngIf="peopleImg && isEditPattern" class="deleteicon"> |
||||
<button mat-icon-button (click)="deleteimg('3')"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div class="noImg" *ngIf="!keysiteImg" (click)="dialog()"> |
||||
<div> |
||||
<img src="../../../assets/images/camera.png" alt=""> |
||||
</div> |
||||
<p>上传演练总结照片</p> |
||||
<div> |
||||
<span>演练总结时的照片，照片要求能反映演练指挥员及演练全体人员，拍照时要求设置拍照日期</span> |
||||
</div> |
||||
</div> |
||||
<div class="input" *ngIf="!keysiteImg && isEditPattern"> |
||||
<input type="file" (change)="filechange1($event,'4')" name="imgFile"> |
||||
</div> |
||||
<div *ngIf="keysiteImg" id="viewerjs4"> |
||||
<img class="image" [src]="keysiteImg" alt="" [attr.data-original]="keysiteImg.split('?')[0]"> |
||||
</div> |
||||
<div *ngIf="keysiteImg && isEditPattern" class="deleteicon"> |
||||
<button mat-icon-button (click)="deleteimg('4')"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
@ -0,0 +1,40 @@
|
||||
table{ |
||||
margin: 0 auto; |
||||
width: 85%; |
||||
height: 80%; |
||||
margin-top: 5%; |
||||
overflow-y: auto; |
||||
border-collapse: collapse; |
||||
td{ |
||||
position: relative; |
||||
width: 50%; |
||||
height: 2.246094rem; |
||||
p{ |
||||
font-size: 20px; |
||||
margin: 8px 0; |
||||
} |
||||
span{ |
||||
font-size: 15px; |
||||
font-weight: 500; |
||||
color: gray; |
||||
} |
||||
input{ |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 2.246094rem; |
||||
left: 0; |
||||
top: 0; |
||||
opacity: 0; |
||||
} |
||||
.image{ |
||||
height: 100%; |
||||
width: 2.919922rem; |
||||
} |
||||
.deleteicon{ |
||||
position: absolute; |
||||
right: 0.058594rem; |
||||
top: 0.058594rem; |
||||
} |
||||
} |
||||
} |
||||
table,table tr th, table tr td { border:1px solid black;text-align: center; } |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PhotoofthesceneComponent } from './photoofthescene.component'; |
||||
|
||||
describe('PhotoofthesceneComponent', () => { |
||||
let component: PhotoofthesceneComponent; |
||||
let fixture: ComponentFixture<PhotoofthesceneComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PhotoofthesceneComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PhotoofthesceneComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,180 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar'; |
||||
import Viewer from 'viewerjs'; |
||||
@Component({ |
||||
selector: 'app-photoofthescene2', |
||||
templateUrl: './photoofthescene.component.html', |
||||
styleUrls: ['./photoofthescene.component.scss'] |
||||
}) |
||||
export class PhotoofthesceneComponent2 implements OnInit { |
||||
|
||||
constructor(private http: HttpClient,public snackBar: MatSnackBar) { } |
||||
gallery//viewerJs实例
|
||||
isEditPattern = true |
||||
ngOnInit(): void { |
||||
setTimeout(() => { |
||||
if(document.getElementById('viewerjs1')){ |
||||
this.gallery = new Viewer(document.getElementById('viewerjs1'),{ |
||||
url: 'data-original' |
||||
}); |
||||
} |
||||
if(document.getElementById('viewerjs2')){ |
||||
this.gallery = new Viewer(document.getElementById('viewerjs2'),{ |
||||
url: 'data-original' |
||||
}); |
||||
} |
||||
if(document.getElementById('viewerjs3')){ |
||||
this.gallery = new Viewer(document.getElementById('viewerjs3'),{ |
||||
url: 'data-original' |
||||
}); |
||||
} |
||||
if(document.getElementById('viewerjs4')){ |
||||
this.gallery = new Viewer(document.getElementById('viewerjs4'),{ |
||||
url: 'data-original' |
||||
}); |
||||
} |
||||
}, 0); |
||||
|
||||
if(localStorage.getItem("pattern")=="edit"){ |
||||
this.isEditPattern = true |
||||
}else if(localStorage.getItem("pattern") == "look"){ |
||||
this.isEditPattern = true |
||||
} |
||||
} |
||||
|
||||
unitImg:any = localStorage.getItem(sessionStorage.getItem("companyId") + "1" + 'rehearsal') || "" |
||||
lingdaoImg:any = localStorage.getItem(sessionStorage.getItem("companyId") + "2" + 'rehearsal') || "" |
||||
peopleImg:any = localStorage.getItem(sessionStorage.getItem("companyId") + "3" + 'rehearsal') || "" |
||||
keysiteImg:any = localStorage.getItem(sessionStorage.getItem("companyId") + "4" + 'rehearsal') || "" |
||||
|
||||
//删除照片
|
||||
deleteimg(num){ |
||||
var msg = "您真的确定要删除吗？";
|
||||
if (confirm(msg)==true){
|
||||
localStorage.removeItem(sessionStorage.getItem('companyId')+num) |
||||
if(num == "1"){ |
||||
this.unitImg = "" |
||||
} |
||||
if(num == "2"){ |
||||
this.lingdaoImg = "" |
||||
} |
||||
if(num == "3"){ |
||||
this.peopleImg = "" |
||||
} |
||||
if(num == "4"){ |
||||
this.keysiteImg = "" |
||||
} |
||||
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
} |
||||
//熟悉单位照片上传
|
||||
file:any |
||||
filechange1(e,index){ |
||||
|
||||
this.file = e.target.files[0] || null //上传的文件
|
||||
var reader = new FileReader(); |
||||
reader.readAsDataURL(this.file); |
||||
var image:any = new Image(); |
||||
reader.onload = function(){ |
||||
image.src = reader.result |
||||
} |
||||
setTimeout(() => { |
||||
if(image.width>=4096 || image.height>=5000 ){
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config); |
||||
}else{ |
||||
if(this.file){ |
||||
this.startUploading(index) |
||||
} |
||||
} |
||||
}, 500); |
||||
} |
||||
|
||||
|
||||
// imgUrl:any //上传后的图片地址
|
||||
// imgsrc:any //上传后的缩略图地址
|
||||
|
||||
//上传文件
|
||||
startUploading(type) { |
||||
let file = this.file || null //获取上传的文件
|
||||
let fileSize = file.size || null //上传文件的总大小
|
||||
let shardSize = 5 * 1024 * 1024 //5MB一个分片
|
||||
|
||||
if (file && fileSize <= shardSize) { //上传文件<=5MB时
|
||||
|
||||
|
||||
|
||||
let formData = new FormData() |
||||
formData.append("file",file) |
||||
this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ |
||||
let imgsrc = `/api/Objects/PlanPlatform/${data.objectName}?x-oss-process=image/resize,m_fill,h_170,w_299` |
||||
localStorage.setItem(sessionStorage.getItem("companyId") + type + 'rehearsal', imgsrc) |
||||
if(type == '1'){ |
||||
this.unitImg = imgsrc |
||||
setTimeout(() => { |
||||
this.gallery = new Viewer(document.getElementById('viewerjs1'),{ |
||||
url: 'data-original' |
||||
}); |
||||
}, 0); |
||||
} |
||||
if(type == '2'){ |
||||
this.lingdaoImg = imgsrc |
||||
setTimeout(() => { |
||||
this.gallery = new Viewer(document.getElementById('viewerjs2'),{ |
||||
url: 'data-original' |
||||
}); |
||||
}, 0); |
||||
} |
||||
if(type == '3'){ |
||||
this.peopleImg = imgsrc |
||||
setTimeout(() => { |
||||
this.gallery = new Viewer(document.getElementById('viewerjs3'),{ |
||||
url: 'data-original' |
||||
}); |
||||
}, 0); |
||||
} |
||||
if(type == '4'){ |
||||
this.keysiteImg = imgsrc |
||||
setTimeout(() => { |
||||
this.gallery = new Viewer(document.getElementById('viewerjs4'),{ |
||||
url: 'data-original' |
||||
}); |
||||
}, 0); |
||||
} |
||||
|
||||
|
||||
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('上传成功','确定',config); |
||||
|
||||
|
||||
}) |
||||
} else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请上传小于5M图片','确定',config); |
||||
// let data = { filename: file.name }
|
||||
// this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.unitinfo.id}`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传
|
||||
// this.objectName = data.objectName
|
||||
// this.uploadId = data.uploadId
|
||||
// this.subsectionUploading()
|
||||
// })
|
||||
} |
||||
} |
||||
dialog(){ |
||||
if(localStorage.getItem("pattern")=="look"){ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('查看模式无法上传','确定',config); |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue