diff --git a/src/app/ui/allaround/allaround.component.scss b/src/app/ui/allaround/allaround.component.scss index 3032154..dd0b185 100644 --- a/src/app/ui/allaround/allaround.component.scss +++ b/src/app/ui/allaround/allaround.component.scss @@ -1,8 +1,9 @@ .tabbar{ height: 60px; - background: yellow; + // background: yellow; line-height: 60px; margin-bottom: 20px; + border-bottom: 1px solid black;; } .aroundimagebox{ height: 100%; @@ -10,17 +11,14 @@ .aroundimage{ width:97%; height: 80%; - background-color: skyblue; + // background-color: skyblue; overflow: auto; margin: 0 30px; border: 6px solid #cccccc; .imgitem{ position: relative; float: left; - margin-bottom: 70px; - margin-right: 10px; - margin-top: 60px; - + margin: 60px 10px 70px 98px; img{ width: 299px; height: 169px; @@ -64,9 +62,11 @@ width: 1500px; height: 700px; text-align: center; + line-height: 700px; + img{ height: 100%; - width: 1280px; + // width: 1280px; } .img1{ transform:rotate(90deg) scale(0.55); @@ -80,6 +80,18 @@ transform:rotate(270deg) scale(0.55); height: 100%; } + .img4{ + transform:rotate(90deg) scale(1.3); + height: 100%; + } + .img5{ + transform:rotate(180deg); + height: 100%; + } + .img6{ + transform:rotate(270deg) scale(1.3); + height: 100%; + } } .detailbtn{ diff --git a/src/app/ui/allaround/allaround.component.ts b/src/app/ui/allaround/allaround.component.ts index dda9a32..562b56b 100644 --- a/src/app/ui/allaround/allaround.component.ts +++ b/src/app/ui/allaround/allaround.component.ts @@ -13,7 +13,7 @@ import { ImgDetails } from './imgdetails.component' styleUrls: ['./allaround.component.scss'] }) export class AllaroundComponent implements OnInit { - +yyy=false constructor(private http: HttpClient,public dialog: MatDialog) { } defaultimg = "../../../assets/images/upload.jpg" xxx = [1,2,3,4,5,6,7,8] diff --git a/src/app/ui/allaround/imgdetails.component.html b/src/app/ui/allaround/imgdetails.component.html index 52a4a47..b232732 100644 --- a/src/app/ui/allaround/imgdetails.component.html +++ b/src/app/ui/allaround/imgdetails.component.html @@ -1,17 +1,19 @@
-
图片详情
+
图片详情
-
+
-
-
-
+
+
+
+
+
-
-
+
+
diff --git a/src/app/ui/allaround/imgdetails.component.ts b/src/app/ui/allaround/imgdetails.component.ts index 3817e90..05e2a46 100644 --- a/src/app/ui/allaround/imgdetails.component.ts +++ b/src/app/ui/allaround/imgdetails.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Inject } from '@angular/core'; +import { Component, OnInit, Inject, ɵConsole } from '@angular/core'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {FlatTreeControl} from '@angular/cdk/tree'; import { HttpClient } from '@angular/common/http'; @@ -20,32 +20,77 @@ import Swiper from 'swiper'; onNoClick(): void { this.dialogRef.close(); } + defaultavtimgindex:any + avtimgindex:any//当前轮播图显示的下标 + isheng:any ngOnInit(): void { - setTimeout(() => { - var mySwiper:any = new Swiper ('.swiper-container', { - initialSlide :2, - // 如果需要前进后退按钮 - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - } - }) - // mySwiper.slideTo(2,0); - },1); + + var mySwiper:any = new Swiper ('.swiper-container', { + initialSlide :2, + // 如果需要前进后退按钮 + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + } + }) + mySwiper.on('slideChangeTransitionEnd', ()=>{ + this.avtimgindex = mySwiper.activeIndex + }); + this.defaultavtimgindex =mySwiper.activeIndex } ngAfterViewInit(): void{ - + + } - //旋转图片角度 + + //点击旋转按钮时 rotateA = 0 + rotateB = 0 rotate(){ - this.rotateA += 90 - if(this.rotateA == 360){ - this.rotateA = 0 + if(this.avtimgindex){//如果已经点击过切换图片按钮时 + var w= document.getElementsByClassName("imgitemdefault")[this.avtimgindex]['naturalWidth']; + var h = document.getElementsByClassName("imgitemdefault")[this.avtimgindex]['naturalHeight']; + if(w > h){ + this.isheng = true + }else{ + this.isheng = false + } + if(this.isheng){ + this.rotateA += 90 + if(this.rotateA == 360){ + this.rotateA = 0 + } + }else{ + this.rotateB += 10 + if(this.rotateB == 40){ + this.rotateB = 0 + } + } + }else{//如果想要直接旋转打开图片时 + var w= document.getElementsByClassName("imgitemdefault")[this.defaultavtimgindex]['naturalWidth']; + var h = document.getElementsByClassName("imgitemdefault")[this.defaultavtimgindex]['naturalHeight']; + if(w > h){ + this.isheng = true + }else{ + this.isheng = false + } + if(this.isheng){ + this.rotateA += 90 + if(this.rotateA == 360){ + this.rotateA = 0 + } + }else{ + this.rotateB += 10 + if(this.rotateB == 40){ + this.rotateB = 0 + } + } } + + } - defaultrotateA(){ - this.rotateA = 0 + defaultrotateA(e){ + } onSubmit(value){ diff --git a/src/app/ui/basicinfo/basicinfo.component.html b/src/app/ui/basicinfo/basicinfo.component.html index d61c819..1a3fcd4 100644 --- a/src/app/ui/basicinfo/basicinfo.component.html +++ b/src/app/ui/basicinfo/basicinfo.component.html @@ -80,13 +80,12 @@
- - - + +
- +
diff --git a/src/app/ui/basicinfo/basicinfo.component.scss b/src/app/ui/basicinfo/basicinfo.component.scss index db98c9b..f3bb780 100644 --- a/src/app/ui/basicinfo/basicinfo.component.scss +++ b/src/app/ui/basicinfo/basicinfo.component.scss @@ -146,4 +146,7 @@ margin: 0 8px; } } - +.mat-spinner{ + margin-top: 34px; + margin-left: 178px; +} diff --git a/src/app/ui/basicinfo/basicinfo.component.ts b/src/app/ui/basicinfo/basicinfo.component.ts index a6475c6..307b938 100644 --- a/src/app/ui/basicinfo/basicinfo.component.ts +++ b/src/app/ui/basicinfo/basicinfo.component.ts @@ -1,20 +1,24 @@ import { Component, OnInit, Inject } from '@angular/core'; -import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; -import {FlatTreeControl} from '@angular/cdk/tree'; -import { HttpClient } from '@angular/common/http'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; -import {FormControl} from '@angular/forms'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { FormControl } from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; import format from 'date-fns/format'; import { TreeService } from '../../http-interceptors/tree.service' -import { FileUploader } from 'ng2-file-upload' +import { FileUploader, FileItem } from 'ng2-file-upload' import { House } from '../../interface' import { AddHouseInfo } from './addhouseinfo.component' import { DomSanitizer } from '@angular/platform-browser' -interface newHouse extends House{ - gaoceng?:boolean - huo?:boolean - lei?:boolean +import { Injectable } from "@angular/core" +import { filter } from 'rxjs/operators'; +import { async } from '@angular/core/testing'; +export interface UploadResult { + name: string; + type: string; + size: number; + url: string; } @Component({ selector: 'app-basicinfo', @@ -22,11 +26,18 @@ interface newHouse extends House{ styleUrls: ['./basicinfo.component.scss'] }) export class BasicinfoComponent implements OnInit { + xxxx: any + blockdata: any//将每次的分块数据存储到这个变量 + blockdataindex: any//将每次的分块数据的编号存储到这个变量 + kkkk: any + initializedata: any //初始化分块事件返回的对象名以及唯一id + uploader:FileUploader = new FileUploader({ url: "/api/Objects/PlanPlatform", method: "POST", itemAlias: "uploadedfile" }); + private _transformer = (node, level: number) => { return { expandable: !!node.children && node.children.length > 0, @@ -34,79 +45,92 @@ export class BasicinfoComponent implements OnInit { level: level, id: node.id, parentId: node.parentId, - children:node.children + children: node.children }; } treeControl = new FlatTreeControl(node => node.level, node => node.expandable); treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); myControl = new FormControl(); - - allunittype:any //所有单位类型 + + allunittype: any //所有单位类型 isorganizationbox = false//控制辖区中队框的显示隐藏 - selectedorganization:any//所选的辖区中队 + selectedorganization: any//所选的辖区中队 highhouse = false//控制高层表单的显示 - houses:any[] = [//存储当前单位的建筑信息 + houses: any[] = [//存储当前单位的建筑信息 { - name:"xxx大厦", - type:"高层建筑", - space:"999" + name: "xxx大厦", + type: "高层建筑", + space: "999" }, { - name:"yyy大厦", - type:"火神山", - space:"999" + name: "yyy大厦", + type: "火神山", + space: "999" }, { - name:"666大厦", - type:"雷神山", - space:"999" + name: "666大厦", + type: "雷神山", + space: "999" } ] - constructor(private http: HttpClient,private tree:TreeService,private sanitizer:DomSanitizer,public dialog: MatDialog) { } + constructor(private http: HttpClient, private tree: TreeService, private sanitizer: DomSanitizer, public dialog: MatDialog) { } //选择单位类型，使底下表单跟着变化 newHouses = [] ngOnInit(): void { - this.getallunittype() - this.getorganization() + // this.getallunittype() + // this.getorganization() this.inithosue() + async function testAsync() { + return "hello ddddddddddddddddd"; + } + + const result = testAsync(); + console.log(1111,result); + testAsync().then(()=>{ + setTimeout(()=>{ + console.log(2222) + },3000) + console.log(3333) + }) + } //初始化建筑信息数组 - inithosue(){ + inithosue() { this.houses.forEach(item => { - if(item.type == "高层建筑"){ + if (item.type == "高层建筑") { item.gaoceng = true } - if(item.type == "火神山"){ + if (item.type == "火神山") { item.huo = true } - if(item.type == "雷神山"){ + if (item.type == "雷神山") { item.lei = true } }) } //选择单位类型 - selectunittype(node){ - if(!this.houses.length){ + selectunittype(node) { + if (!this.houses.length) { - if(node.name == "高层丶大型城市综合市场"){ - let data ={ - name:"建筑一", - gaoceng:true + if (node.name == "高层丶大型城市综合市场") { + let data = { + name: "建筑一", + gaoceng: true } this.houses.push(data) } - if(node.name == "火神山医院"){ + if (node.name == "火神山医院") { this.houses[0].huo = true } - if(node.name == "雷神山医院"){ + if (node.name == "雷神山医院") { this.houses[0].lei = true - } + } + } } -} //点击+号 增加建筑信息 - addhouseinfo(){ + addhouseinfo() { // let data = { } // this.houses.push(data) const dialogRef = this.dialog.open(AddHouseInfo, {//调用open方法打开对话框并且携带参数过去 @@ -114,123 +138,207 @@ export class BasicinfoComponent implements OnInit { data: {} }); dialogRef.afterClosed().subscribe( - data=>{ - + data => { + } ); } - selecttab(node){ - console.log(1111,node) - } + selecttab(node) { - //获得所有单位类型 - getallunittype(){ - this.http.get("/api/BuildingTypes").subscribe(data=>{ - this.allunittype = data - }) } + + //获得所有单位类型 + // getallunittype() { + // this.http.get("/api/BuildingTypes").subscribe(data => { + // this.allunittype = data + // }) + // } //获得所有组织机构 - getorganization(){ - this.http.get('/api/Organizations').subscribe( - (data:any)=>{ - this.dataSource.data = this.tree.toTree(data); - } - ) - } - + // getorganization() { + // this.http.get('/api/Organizations').subscribe( + // (data: any) => { + // this.dataSource.data = this.tree.toTree(data); + // } + // ) + // } - add(node){ + + add(node) { console.log(node) this.selectedorganization = node.name this.isorganizationbox = false } //关闭辖区中队隐藏框 - closeorganizationbox(){ + closeorganizationbox() { this.isorganizationbox = false } //打开辖区中队隐藏框 - openorganizationbox(){ + openorganizationbox() { this.isorganizationbox = true } hasChild = (_: number, node: any) => node.expandable; - filechange(e){ - const file = e.srcElement.files[0]; // 获取图片这里只操作一张图片 - var upfilesize = file.size/1048576 //上传照片大小MB - if(upfilesize <= 5){//如果想要上传照片小于5MB，则走正常上传流程 - this.upload() - } + // filechange(e){ + // const file = e.srcElement.files[0]; // 获取图片这里只操作一张图片 + // var upfilesize = file.size/1048576 //上传照片大小MB - if(upfilesize > 5 && upfilesize <= 20){//如果想要上传照片在5-20之间则采用分块上传 - var bytesPerPiece = 1024 * 1024 * 5;// 每个文件切片大小定为 5 Mb - var totalPieces;//一共有多少块 - var blob = e.srcElement.files[0];//想要上传的整体文件 - var start = 0; - var end; - var index = 0; - var filesize = blob.size;//上传文件的大小 - var filename = blob.name;//上传文件的名字 - totalPieces = Math.ceil(filesize / bytesPerPiece);//------计算需要分为多少段 - this.http.post(`/api/Objects/PlanPlatform/${filename}?uploads`,{}).subscribe(data=>{ - console.log(data) - }) - // while(start < filesize){ - // end = start + bytesPerPiece; - // if(end > filesize) { - // end = filesize; - // } - // var chunk = blob.slice(start,end);//切割文件 - // var sliceIndex= blob.name + index;//分块编号 - // var formData = new FormData(); - // formData.append("file", chunk, filename); - // this.blockupload() - // start = end; - // index++; - // } - // this.blockupload() - } + // if(upfilesize <= 5){//如果想要上传照片小于5MB，则走正常上传流程 + // this.upload() + // } + + + // if(upfilesize > 5 && upfilesize <= 20){//如果想要上传照片在5-20之间则采用分块上传 + // var bytesPerPiece = 1024 * 1024 * 5;// 每个文件切片大小定为 5 Mb + // var blob = e.srcElement.files[0];//想要上传的整体文件 + // var start = 0; + // var end; + // var index = 1; + // var filesize = blob.size;//上传文件的大小 + // var filename = blob.name;//上传文件 原始名字 + // this.http.post("/api/NewMultipartUpload/PlanPlatform/ceshi",{},{ + // params: { + // filename:filename, + // } + // }).subscribe((data:any)=>{ + // this.initializedata = data + + // var totalPieces;//一共有多少块 + // totalPieces = Math.ceil(filesize / bytesPerPiece);//------计算需要分为多少段 + + // while(start < filesize){ + // end = start + bytesPerPiece; + // if(end > filesize) { + // end = filesize; + // } + // var chunk = blob.slice(start,end);//切割文件 + // var sliceIndex= index;//分块编号 + // this.blockdataindex = sliceIndex + // this.blockdata = chunk + // this.blockdata.name = filename + // this.uploader.setOptions({ url:`/api/MultipartUpload/PlanPlatform/${this.initializedata.objectName}?uploadId=${this.initializedata.uploadId}&partNumber=${this.blockdataindex}`}); + // this.upload() + // start = end; + // index++; + // } + + // }) + + // } + + // if(upfilesize > 20){//如果想要上传照片大于20MB + // alert("上传照片应小于20MB") + // } + + // } - if(upfilesize > 20){//如果想要上传照片大于20MB - alert("上传照片应小于20MB") - } - - } imgsrc = "../../../assets/images/upload.jpg" imgUrl = ""//返回来的图片地址后缀 - upload(){ - if(!this.uploader.queue[0]){ - alert("请选择文件") - }else{ - this.uploader.queue[0].upload();//开始上传 - this.uploader.queue[0].onSuccess = (response, status, headers) => { - // 上传文件成功 - if (status == 201) { - // 上传文件后获取服务器返回的数据 - alert("上传成功") - let tempRes = JSON.parse(response); - this.imgUrl = tempRes.objectName - this.imgsrc = '/api/Objects/PlanPlatform/' + this.imgUrl - }else { - // 上传文件后获取服务器返回的数据错误 - } - }; - this.uploader.queue[0].onError = (response, status, headers) => { - if (status == 401) { - alert("无权限上传") - } - }; + + + file: any; //上传的文件 + objectName: any; //上传对象名 + uploadId: any; //上传分块上传事件编号 + + //change选择文件 + filechange(e) { + this.file = e.target.files[0] || null //上传的文件 + this.startUploading() + } + + + + + isspinner:boolean=false + //上传文件 + 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() + } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传 + + let data = { filename: file.name } + this.http.post(`/api/NewMultipartUpload/PlanPlatform/HHH`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传 + this.objectName = data.objectName + this.uploadId = data.uploadId + this.subsectionUploading() + }) } } + //小于5MB不需要分块上传 + upload(){ + this.uploader.queue[0].upload();//开始上传 + this.uploader.queue[0].onSuccess = (response, status, headers) => { + // 上传文件成功 + if (status == 201) { + // 上传文件后获取服务器返回的数据 + alert("上传成功") + this.isspinner = false + let tempRes = JSON.parse(response); + this.imgUrl = tempRes.objectName + this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_100,w_100` + }else { + // 上传文件后获取服务器返回的数据错误 + } + }; + this.uploader.queue[0].onError = (response, status, headers) => { + if (status == 401) { + alert("上传失败") + } + }; + } + PartNumberETag: any = []; //分块上传每次返回需要保存的信息 + flag = true + //开始分块上传 + 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===共分多少段 - blockupload(){//分块上传 - + 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() + } + } } - onSubmit(value){ + + //完成分块上传 + 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_100,w_100` + this.isspinner = false + this.PartNumberETag = [] + this.file = null + }) + } + onSubmit(value) { } - + } diff --git a/src/app/ui/fire-fighting-device/fire-fighting-device.component.html b/src/app/ui/fire-fighting-device/fire-fighting-device.component.html index ce6b3a1..98b5447 100644 --- a/src/app/ui/fire-fighting-device/fire-fighting-device.component.html +++ b/src/app/ui/fire-fighting-device/fire-fighting-device.component.html @@ -29,8 +29,9 @@
- - +
安全疏散设施
+
+ @@ -38,12 +39,12 @@ - + - + @@ -52,8 +53,9 @@
项目 {{element.name}}照片{{element.realName}}查看照片 主要情况{{element.organizationName}}{{element.main}}
- - +
消防水系统
+
+ @@ -61,12 +63,12 @@ - + - + diff --git a/src/app/ui/fire-fighting-device/fire-fighting-device.component.scss b/src/app/ui/fire-fighting-device/fire-fighting-device.component.scss index 679f6e3..328b492 100644 --- a/src/app/ui/fire-fighting-device/fire-fighting-device.component.scss +++ b/src/app/ui/fire-fighting-device/fire-fighting-device.component.scss @@ -1,8 +1,9 @@ .tabbar{ height: 60px; - background: yellow; + // background: yellow; line-height: 60px; margin-bottom: 20px; + border-bottom: 1px solid black;; } .devicebox{ height: 100%; @@ -10,7 +11,7 @@ .device{ width:96%; height: 80%; - background-color: skyblue; + // background-color: skyblue; overflow: auto; margin: 0 30px; border: 6px solid #cccccc; @@ -155,9 +156,11 @@ width: 1500px; height: 700px; text-align: center; + line-height: 700px; + img{ height: 100%; - width: 1280px; + // width: 1280px; } .img1{ transform:rotate(90deg) scale(0.55); @@ -171,6 +174,18 @@ transform:rotate(270deg) scale(0.55); height: 100%; } + .img4{ + transform:rotate(90deg) scale(1.3); + height: 100%; + } + .img5{ + transform:rotate(180deg); + height: 100%; + } + .img6{ + transform:rotate(270deg) scale(1.3); + height: 100%; + } } .detailbtn{ diff --git a/src/app/ui/fire-fighting-device/fire-fighting-device.component.ts b/src/app/ui/fire-fighting-device/fire-fighting-device.component.ts index c16a791..113651a 100644 --- a/src/app/ui/fire-fighting-device/fire-fighting-device.component.ts +++ b/src/app/ui/fire-fighting-device/fire-fighting-device.component.ts @@ -16,9 +16,28 @@ export class FireFightingDeviceComponent implements OnInit { constructor(public http: HttpClient,public dialog: MatDialog) { } displayedColumns: string[] = ['project', 'phone', 'mainmsg']; - dataSource:any; //所有用户 + dataSource:any; + dataSource2:any; + dataSource3:any; ngOnInit(): void { - this.dataSource = [{name:"xxx",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}] + this.dataSource = [ + {name:"消防水池",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"} + ] + this.dataSource2 = [ + {name:"疏散楼梯",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"消防电梯",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"避难设施",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"安全出口",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"} + ] + this.dataSource3 = [ + {name:"室外消火栓",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"室内消火栓",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"供水管网",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"湿式自动喷淋系统",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"水幕系统",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"消防泵房",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}, + {name:"水泵接合器",main:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"} + ] } lookphone(){ const dialogRef = this.dialog.open(ImagesData, {//调用open方法打开对话框并且携带参数过去 diff --git a/src/app/ui/fire-fighting-device/imgsdatadetail.component.html b/src/app/ui/fire-fighting-device/imgsdatadetail.component.html index 52a4a47..a31f8cf 100644 --- a/src/app/ui/fire-fighting-device/imgsdatadetail.component.html +++ b/src/app/ui/fire-fighting-device/imgsdatadetail.component.html @@ -1,11 +1,13 @@
-
图片详情
+
图片详情
-
+
-
-
-
+
+
+
+
+
diff --git a/src/app/ui/fire-fighting-device/imgsdatadetail.component.ts b/src/app/ui/fire-fighting-device/imgsdatadetail.component.ts index d616a07..2f901d8 100644 --- a/src/app/ui/fire-fighting-device/imgsdatadetail.component.ts +++ b/src/app/ui/fire-fighting-device/imgsdatadetail.component.ts @@ -20,6 +20,9 @@ import Swiper from 'swiper'; onNoClick(): void { this.dialogRef.close(); } + defaultavtimgindex:any + avtimgindex:any//当前轮播图显示的下标 + isheng:any ngOnInit(): void { setTimeout(() => { var mySwiper:any = new Swiper ('.swiper-container', { @@ -30,19 +33,61 @@ import Swiper from 'swiper'; prevEl: '.swiper-button-prev', } }) + mySwiper.on('slideChangeTransitionEnd', ()=>{ + this.avtimgindex = mySwiper.activeIndex + }); + this.defaultavtimgindex =mySwiper.activeIndex },1); } ngAfterViewInit(): void{ } - //旋转图片角度 + //点击旋转按钮时 rotateA = 0 + rotateB = 0 rotate(){ - this.rotateA += 90 - if(this.rotateA == 360){ - this.rotateA = 0 + if(this.avtimgindex){//如果已经点击过切换图片按钮时 + var w= document.getElementsByClassName("imgitemdefault")[this.avtimgindex]['naturalWidth']; + var h = document.getElementsByClassName("imgitemdefault")[this.avtimgindex]['naturalHeight']; + if(w > h){ + this.isheng = true + }else{ + this.isheng = false + } + if(this.isheng){ + this.rotateA += 90 + if(this.rotateA == 360){ + this.rotateA = 0 + } + }else{ + this.rotateB += 10 + if(this.rotateB == 40){ + this.rotateB = 0 + } + } + }else{//如果想要直接旋转打开图片时 + var w= document.getElementsByClassName("imgitemdefault")[this.defaultavtimgindex]['naturalWidth']; + var h = document.getElementsByClassName("imgitemdefault")[this.defaultavtimgindex]['naturalHeight']; + if(w > h){ + this.isheng = true + }else{ + this.isheng = false + } + if(this.isheng){ + this.rotateA += 90 + if(this.rotateA == 360){ + this.rotateA = 0 + } + }else{ + this.rotateB += 10 + if(this.rotateB == 40){ + this.rotateB = 0 + } + } } + + } defaultrotateA(){ this.rotateA = 0 diff --git a/src/app/ui/key-site/key-site.component.scss b/src/app/ui/key-site/key-site.component.scss index 6c86ed3..2bce7a2 100644 --- a/src/app/ui/key-site/key-site.component.scss +++ b/src/app/ui/key-site/key-site.component.scss @@ -1,8 +1,9 @@ .tabbar{ height: 60px; - background: yellow; + // background: yellow; line-height: 60px; margin-bottom: 20px; + border-bottom: 1px solid black;; } .devicebox{ height: 100%; @@ -10,7 +11,7 @@ .device{ width:96%; height: 80%; - background-color: skyblue; + // background-color: skyblue; overflow: auto; margin: 0 30px; border: 6px solid #cccccc; @@ -177,9 +178,11 @@ width: 1500px; height: 700px; text-align: center; + line-height: 700px; + img{ height: 100%; - width: 1280px; + // width: 1280px; } .img1{ transform:rotate(90deg) scale(0.55); @@ -193,6 +196,18 @@ transform:rotate(270deg) scale(0.55); height: 100%; } + .img4{ + transform:rotate(90deg) scale(1.3); + height: 100%; + } + .img5{ + transform:rotate(180deg); + height: 100%; + } + .img6{ + transform:rotate(270deg) scale(1.3); + height: 100%; + } } .detailbtn{ diff --git a/src/app/ui/key-site/keyimgdetail.component.html b/src/app/ui/key-site/keyimgdetail.component.html index 52a4a47..f040b7a 100644 --- a/src/app/ui/key-site/keyimgdetail.component.html +++ b/src/app/ui/key-site/keyimgdetail.component.html @@ -1,13 +1,14 @@
图片详情
-
+
-
-
-
+
+
+
+
+
-
diff --git a/src/app/ui/key-site/keyimgdetail.component.ts b/src/app/ui/key-site/keyimgdetail.component.ts index 8fdba37..5aaa734 100644 --- a/src/app/ui/key-site/keyimgdetail.component.ts +++ b/src/app/ui/key-site/keyimgdetail.component.ts @@ -20,6 +20,9 @@ import Swiper from 'swiper'; onNoClick(): void { this.dialogRef.close(); } + defaultavtimgindex:any + avtimgindex:any//当前轮播图显示的下标 + isheng:any ngOnInit(): void { setTimeout(() => { var mySwiper:any = new Swiper ('.swiper-container', { @@ -30,19 +33,60 @@ import Swiper from 'swiper'; prevEl: '.swiper-button-prev', } }) - + mySwiper.on('slideChangeTransitionEnd', ()=>{ + this.avtimgindex = mySwiper.activeIndex + }); + this.defaultavtimgindex =mySwiper.activeIndex },1); } ngAfterViewInit(): void{ } - //旋转图片角度 + //点击旋转按钮时 rotateA = 0 + rotateB = 0 rotate(){ - this.rotateA += 90 - if(this.rotateA == 360){ - this.rotateA = 0 + if(this.avtimgindex){//如果已经点击过切换图片按钮时 + var w= document.getElementsByClassName("imgitemdefault")[this.avtimgindex]['naturalWidth']; + var h = document.getElementsByClassName("imgitemdefault")[this.avtimgindex]['naturalHeight']; + if(w > h){ + this.isheng = true + }else{ + this.isheng = false + } + if(this.isheng){ + this.rotateA += 90 + if(this.rotateA == 360){ + this.rotateA = 0 + } + }else{ + this.rotateB += 10 + if(this.rotateB == 40){ + this.rotateB = 0 + } + } + }else{//如果想要直接旋转打开图片时 + var w= document.getElementsByClassName("imgitemdefault")[this.defaultavtimgindex]['naturalWidth']; + var h = document.getElementsByClassName("imgitemdefault")[this.defaultavtimgindex]['naturalHeight']; + if(w > h){ + this.isheng = true + }else{ + this.isheng = false + } + if(this.isheng){ + this.rotateA += 90 + if(this.rotateA == 360){ + this.rotateA = 0 + } + }else{ + this.rotateB += 10 + if(this.rotateB == 40){ + this.rotateB = 0 + } + } } + + } defaultrotateA(){ this.rotateA = 0 diff --git a/src/app/ui/key-site/keysiteimgs.component.html b/src/app/ui/key-site/keysiteimgs.component.html index 1315938..96de3bf 100644 --- a/src/app/ui/key-site/keysiteimgs.component.html +++ b/src/app/ui/key-site/keysiteimgs.component.html @@ -8,6 +8,13 @@

建筑物图片

+ +
+
diff --git a/src/app/ui/key-site/keysiteimgs.component.ts b/src/app/ui/key-site/keysiteimgs.component.ts index eb42d67..c99d6ba 100644 --- a/src/app/ui/key-site/keysiteimgs.component.ts +++ b/src/app/ui/key-site/keysiteimgs.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Inject } from '@angular/core'; +import { Component, OnInit, Inject ,ViewChild} from '@angular/core'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {FlatTreeControl} from '@angular/cdk/tree'; import { HttpClient } from '@angular/common/http'; @@ -6,6 +6,8 @@ import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog import {FormControl} from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; import { KeyImgDetail } from './keyimgdetail.component' +import { MatPaginator } from '@angular/material/paginator'; +import { PageEvent } from '@angular/material/paginator'; @Component({ selector: 'keysiteimgs', templateUrl: './keysiteimgs.component.html', @@ -16,13 +18,23 @@ import { KeyImgDetail } from './keyimgdetail.component' //注入MatDialogRef，可以用来关闭对话框 //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌 constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {} - xxx = [1,2,3,4,5,6,7,8,9,10,11] + + xxx:any = [{name:1},{name:12},{name:13},{name:14},{name:15},{name:16},{name:17},{name:18},{name:19},{name:111}] defaultimg = "../../../assets/images/upload.jpg" + length = 11; + pageSize = 8; + pageSizeOptions: number[] = [5, 10, 25, 100]; + pageEvent: PageEvent; + // @ViewChild(MatPaginator, {static: true}) + // paginator: MatPaginator; + yyy(){ + + } onNoClick(): void { this.dialogRef.close(); } ngOnInit(): void { - + // this.xxx.paginator = this.paginator; } //图片查看大图 imgdetails(){ diff --git a/src/app/ui/uploading-cad/uploading-cad.component.html b/src/app/ui/uploading-cad/uploading-cad.component.html index c19ea56..3adccb5 100644 --- a/src/app/ui/uploading-cad/uploading-cad.component.html +++ b/src/app/ui/uploading-cad/uploading-cad.component.html @@ -4,6 +4,7 @@
+
已用/容量: 500MB/5G diff --git a/src/app/ui/uploading-cad/uploading-cad.component.scss b/src/app/ui/uploading-cad/uploading-cad.component.scss index da8d2bb..61374b6 100644 --- a/src/app/ui/uploading-cad/uploading-cad.component.scss +++ b/src/app/ui/uploading-cad/uploading-cad.component.scss @@ -3,6 +3,15 @@ margin: 10px; :first-child{flex:88%} :last-child{flex:12%} + position: relative; + #selectedfile{ + width: 64px; + height: 34px; + position: absolute; + left: 15px; + opacity: 0; + } + .mat-raised-button { margin-left: 15px; } diff --git a/src/app/ui/uploading-cad/uploading-cad.component.ts b/src/app/ui/uploading-cad/uploading-cad.component.ts index e59a137..5081440 100644 --- a/src/app/ui/uploading-cad/uploading-cad.component.ts +++ b/src/app/ui/uploading-cad/uploading-cad.component.ts @@ -18,7 +18,12 @@ export class UploadingCADComponent implements OnInit { displayedColumns: string[] = ['checked', 'name', 'time', 'state','size']; dataSource:any; //所有CAD图 + //选择文件 + filechange(e){ + } + //上传文件 + uploader(){ - + } } diff --git a/src/app/ui/usermanagement/usermanagement.component.ts b/src/app/ui/usermanagement/usermanagement.component.ts index 57ca1b1..d269861 100644 --- a/src/app/ui/usermanagement/usermanagement.component.ts +++ b/src/app/ui/usermanagement/usermanagement.component.ts @@ -14,7 +14,7 @@ import { PageEvent } from '@angular/material/paginator'; export class UsermanagementComponent implements OnInit { constructor(public http: HttpClient,public dialog: MatDialog) { } - pageEvent: PageEvent; + ViewChild: PageEvent; ngOnInit() { this.getUsers()
项目 {{element.name}}照片查看照片查看照片 主要情况{{element.organizationName}}{{element.main}}