diff --git a/src/app/ui/find-problem/find-problem.component.html b/src/app/ui/find-problem/find-problem.component.html new file mode 100644 index 0000000..ecffdd5 --- /dev/null +++ b/src/app/ui/find-problem/find-problem.component.html @@ -0,0 +1,28 @@ + +
+
+ +
+
+
+ 问题1： +
+
+ +
+
+
+ +
+ + +
+
+
diff --git a/src/app/ui/find-problem/find-problem.component.scss b/src/app/ui/find-problem/find-problem.component.scss new file mode 100644 index 0000000..9cf98c9 --- /dev/null +++ b/src/app/ui/find-problem/find-problem.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 100%; + .topadd{ + width: 100%; + margin: 0.488281rem 0.097656rem; + button{ + background-color: #008CBA; /* Green */ + border: none; + border-radius: 8px; + color: white; + padding: 0.097656rem 0.488281rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 0.146484rem; + margin-left: 0.488281rem; + cursor: pointer; + } + } + .center{ + width: 100%; + height: 100%; + display: flex; + flex-direction:column; + span{ + font-size: 0.097656rem; + margin-left: 0.195313rem; + } + textarea{ + position: relative; + left: 60%; + } + .one{ + width: 100%; + } + } + .upload{ + width: 20%; + height: 20%; + .uploadingimg{ + width: 20%; + height: 10%; + // background: url('../../../assets/images/upload2.png') no-repeat center center; + + position: absolute; + left: 0.390625rem; + bottom: 80px; + //border: 1px dashed gray; + border-radius:3px; + img{ + margin-left: 0.195313rem; + margin-top: 0.048828rem; + } + } + } + .image{ + // position: absolute; + // top: 199px; + // left: 160px; + // width: 299px; + // height: 170px; + input{ + width: 0.976563rem; + height: 0.683594rem; + position: absolute; + left: 60px; + bottom: 0.244141rem; + opacity: 0; + margin-top: 0.048828rem; + cursor: pointer; + } + // opacity:0; + + } +} \ No newline at end of file diff --git a/src/app/ui/find-problem/find-problem.component.spec.ts b/src/app/ui/find-problem/find-problem.component.spec.ts new file mode 100644 index 0000000..3f86382 --- /dev/null +++ b/src/app/ui/find-problem/find-problem.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FindProblemComponent } from './find-problem.component'; + +describe('FindProblemComponent', () => { + let component: FindProblemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FindProblemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FindProblemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ui/find-problem/find-problem.component.ts b/src/app/ui/find-problem/find-problem.component.ts new file mode 100644 index 0000000..a5f612b --- /dev/null +++ b/src/app/ui/find-problem/find-problem.component.ts @@ -0,0 +1,24 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-11-06 14:39:10 + * @LastEditors: sueRimn + * @LastEditTime: 2020-11-06 15:15:22 + */ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-find-problem', + templateUrl: './find-problem.component.html', + styleUrls: ['./find-problem.component.scss'] +}) +export class FindProblemComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数 + +} diff --git a/src/app/ui/know-route/know-route.component.html b/src/app/ui/know-route/know-route.component.html index 4047f78..81486d3 100644 --- a/src/app/ui/know-route/know-route.component.html +++ b/src/app/ui/know-route/know-route.component.html @@ -4,27 +4,28 @@ * @Author: sueRimn * @Date: 2020-11-05 15:27:58 * @LastEditors: sueRimn - * @LastEditTime: 2020-11-06 10:33:56 + * @LastEditTime: 2020-11-06 14:26:00 -->
添加熟悉部位: - - - - - - - + +
添加路线: - {{item.name+item.idnum}}
-
-
+
+
+
+ +
+
+
+ +
备注：
diff --git a/src/app/ui/know-route/know-route.component.scss b/src/app/ui/know-route/know-route.component.scss index afc73eb..1e31757 100644 --- a/src/app/ui/know-route/know-route.component.scss +++ b/src/app/ui/know-route/know-route.component.scss @@ -9,6 +9,18 @@ button{ margin-left: 0.097656rem; } + .button { + background-color: #4CAF50; /* Green */ + border: 0.009766rem; + color: white; + padding: 0.097656rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 0.146484rem; + margin-left: 0.488281rem; + cursor: pointer; + } } //添加路线 .addRoute{ @@ -52,6 +64,40 @@ .upload{ width: 50%; height: 50%; + .uploadingimg{ + width: 40%; + height: 30%; + // background: url('../../../assets/images/upload2.png') no-repeat center center; + + position: absolute; + left: 0.097656rem; + bottom: 0.048828rem; + //border: 1px dashed gray; + border-radius:3px; + img{ + margin-left: 0.195313rem; + margin-top: 0.048828rem; + } + } + } + .image{ + // position: absolute; + // top: 199px; + // left: 160px; + // width: 299px; + // height: 170px; + input{ + width: 2.929688rem; + height: 1.708984rem; + position: absolute; + left: 0.097656rem; + bottom: 0.048828rem; + opacity: 0; + margin-top: 0.048828rem; + cursor: pointer; + } + // opacity:0; + } .remarks{ width: 50%; @@ -60,6 +106,9 @@ height: 0.488281rem; width: 0.488281rem; } + textarea{ + margin-left: 0.195313rem; + } } } //熟悉路线选中样式 diff --git a/src/app/ui/know-route/know-route.component.ts b/src/app/ui/know-route/know-route.component.ts index dd16f3c..3130bd5 100644 --- a/src/app/ui/know-route/know-route.component.ts +++ b/src/app/ui/know-route/know-route.component.ts @@ -4,9 +4,12 @@ * @Author: sueRimn * @Date: 2020-11-05 15:27:58 * @LastEditors: sueRimn - * @LastEditTime: 2020-11-06 10:30:10 + * @LastEditTime: 2020-11-06 14:10:39 */ import { Component, OnInit } from '@angular/core'; +import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http'; +import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar'; +import { FileUploader, FileItem } from 'ng2-file-upload' @Component({ selector: 'app-know-route', @@ -15,21 +18,128 @@ import { Component, OnInit } from '@angular/core'; }) export class KnowRouteComponent implements OnInit { - constructor() { } + constructor(public snackBar: MatSnackBar,private http: HttpClient) { } ngOnInit(): void { } + unitinfo:any={ + id: '', + name: '', //单位信息名字 + usci: '', //单位信用代码 + contacts: '', //联系人 + phone: '', //联系电话 + address: '', //单位地址 + imageUrl: '', //图片地址 + location: '', //单位地理位置 + modifiedTime: '', //信息修改时间 + organizationId: '', //所属组织机构 + organizationName: '', //组织机构名称 + buildingTypes: [ + { + id:'', + name:'' + } + ] + } + uploader:FileUploader = new FileUploader({ //初始化上传事件 ng2-upload + url: `/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`, + method: "POST", + itemAlias: "uploadedfile", + autoUpload: false, + removeAfterUpload:true //上传之后是否在队列中移除，如果不移除就会出现无法上传第二次的情况 + }); + //控制底部div显隐 + showorfalse="www" //判断选中路线的值 chooseid=-1 - knowRoute=[ - {name:``,idnum:""} - /* {name:`柳州支队`,idnum:"🠖"} */ - ] + //熟悉路线对象 + knowRoute=[{name:``,idnum:""}] + //熟悉部位对象 + knowBw=[{name:"消控室"},{name:"水泵房"},{name:"疏散楼梯"},{name:"各楼层"},{name:"楼层消火栓"},{name:"水泵结合器"},{name:"室外消防水源"}] + + imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数 + imgUrl = ""//返回来的图片地址后缀 + file: any; //上传的文件 + objectName: any; //上传对象名 + uploadId: any; //上传分块上传事件编号 + isspinner:boolean=false //控制进度圈的显示隐藏 + PartNumberETag: any = []; //分块上传每次返回需要保存的信息 + //上传文件 + startUploading() { + this.isspinner = true + let file = this.file || null //获取上传的文件 + let fileSize = file.size || null //上传文件的总大小 + let shardSize = 5 * 1024 * 1024 //5MB一个分片 + + if (file && fileSize <= shardSize) { //上传文件<=5MB时 + // this.upload() + let formData = new FormData() + formData.append("file",file) + this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ + this.isspinner = false + this.imgUrl = data.objectName + this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('上传成功','确定',config); + }) + } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传 + + 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() + }) + } + } + //开始分块上传 + async subsectionUploading () { + let file = this.file || null //获取上传的文件 + let fileSize = file.size || null //上传文件的总大小 + let shardSize = 5 * 1024 * 1024 //5MB一个分片 + let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段 + + for (let i = 0;i < allSlice;i++) { //循环分段上传 + let start = i * shardSize //切割文件开始位置 + let end = Math.min(fileSize, start + shardSize); //切割文件结束位置 + let formData = new FormData() + formData.append("file",file.slice(start, end)) + // 同步写法实现异步调用 + let result = await new Promise((resolve, reject) => { + // await 需要后面返回一个 promise 对象 + this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{ + let msg = { + "partNumber":data.partNumber || null, + "eTag": data.eTag || null + } + resolve(msg) // 调用 promise 内置方法处理成功 + }) + }); + this.PartNumberETag.push(result) + if (this.PartNumberETag.length === allSlice) { + this.endUploading() + } + } + } + //完成分块上传 + endUploading() { + let data = this.PartNumberETag + let paramsData = { uploadId: this.uploadId } + this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`, data, { params: paramsData }).subscribe(data => { + this.imgsrc = `/api/Objects/PlanPlatform/${this.objectName}?x-oss-process=image/resize,m_fill,h_170,w_299` + this.isspinner = false + this.PartNumberETag = [] + this.uploader.clearQueue(); //清空input控件文件 + }) + } //熟悉部位点击事件 addRoute(event){ //console.log(event.target.innerHTML) //this.knowRoute+=event.target.innerHTML+"🠖" + this.showorfalse="show" this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"}) } //熟悉路线点击事件 diff --git a/src/app/ui/training-recordinfo/training-recordinfo.component.html b/src/app/ui/training-recordinfo/training-recordinfo.component.html index 98c29bc..a255997 100644 --- a/src/app/ui/training-recordinfo/training-recordinfo.component.html +++ b/src/app/ui/training-recordinfo/training-recordinfo.component.html @@ -1,3 +1,11 @@ +
@@ -9,7 +17,9 @@ 行驶路线 - 熟悉路线 + + + @@ -18,7 +28,7 @@ 消防设施情况 水源道路情况 重点部位情况 - 发现问题 + 现场照片
diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index e3aec45..e0381ac 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -65,8 +65,10 @@ import { HomeComponent } from './home/home.component'; import { TrainingRecordinfoComponent } from './training-recordinfo/training-recordinfo.component'; import { BasicinfoComponent } from '../key-unit/basicinfo/basicinfo.component'; import { KeyUnitModule } from '../key-unit/key-unit.module'; +import { KnowRouteComponent } from './know-route/know-route.component'; +import { FindProblemComponent } from './find-problem/find-problem.component'; @NgModule({ - declarations: [UiComponent, FooterComponent, UserdataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,EditUser,CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,HomeComponent, AddSixFamiliarComponent, TitleComponent, SelectUnit, TrainingRecordinfoComponent], + declarations: [UiComponent, FooterComponent, UserdataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,EditUser,CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,HomeComponent, AddSixFamiliarComponent, TitleComponent, SelectUnit, TrainingRecordinfoComponent,KnowRouteComponent, FindProblemComponent], imports: [ CommonModule,