shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]gis管理页面响应式布局

zhuzhou
邵佳豪 4 years ago
parent
c2f832b451
commit
66ed29a8ee
27 changed files with 282 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/app/gis-management/allaround/allaround.component.html
  2. 25
      src/app/gis-management/allaround/allaround.component.scss
  3. 4
      src/app/gis-management/allaround/allaround.component.ts
  4. 33
      src/app/gis-management/allaround/imgdetails.component.html
  5. 17
      src/app/gis-management/fire-facilities/fire-facilities.component.scss
  6. 4
      src/app/gis-management/fire-facilities/fire-facilities.component.ts
  7. 3
      src/app/gis-management/fire-facilities/imagesdata.component.ts
  8. 28
      src/app/gis-management/fire-facilities/previewImg.html
  9. 46
      src/app/gis-management/fire-facilities/realistic-picture.component.scss
  10. 4
      src/app/gis-management/gis-labeling/gis-labeling.component.html
  11. 16
      src/app/gis-management/gis-labeling/gis-labeling.component.scss
  12. 5
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  13. 44
      src/app/gis-management/key-site-look/key-site.component.scss
  14. 3
      src/app/gis-management/key-site-look/key-site.component.ts
  15. 33
      src/app/gis-management/key-site-look/keysiteimgs.component.html
  16. 2
      src/app/gis-management/plan-list/openPlanTool.html
  17. 10
      src/app/gis-management/plan-list/openPlanTool.scss
  18. 6
      src/app/gis-management/plan-list/plan-list.component.scss
  19. 2
      src/app/gis-management/plan-list/plan-list.component.ts
  20. 28
      src/app/gis-management/realistic-picture-look/previewImg.html
  21. 54
      src/app/gis-management/realistic-picture-look/realistic-picture.component.scss
  22. 3
      src/app/gis-management/realistic-picture-look/realistic-picture.component.ts
  23. 8
      src/app/ui/collection-tools-plan/collection-tools.component.html
  24. 11
      src/app/ui/collection-tools-plan/collection-tools.component.scss
  25. 5
      src/app/ui/collection-tools-plan/panel.scss
  26. 5
      src/assets/css/newStyle.css
  27. 2
      src/styles.scss

87
src/app/gis-management/allaround/allaround.component.html
Unescape View File

@ -7,83 +7,6 @@
* @LastEditTime: 2020-11-26 17:11:54 * @LastEditTime: 2020-11-26 17:11:54
--> -->
<div class="content" id="allaround"> <div class="content" id="allaround">
<!-- <mat-tab-group style="height: 100%;">
<mat-tab label="单位毗邻">
<div class="allImgs">
<div class="imgBox" *ngFor="let item of AllAdjoining" >
<div class="fixedImg" *ngIf="item.imageUrls.length">
<img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'>
</div>
<div class="fixedImg" *ngIf="!item.imageUrls.length">
<img src="../../../assets/images/upload.png" (click)='imgdetails(item.imageUrls)'>
</div>
<div style="margin-top: 5px;">
<label style="margin-left: 25px;">建筑物名称:</label>
<label style="margin-left: 25px;">{{item.name}}</label>
</div>
<div style="margin-top: 5px;">
<label style="margin-left: 25px;">建筑物方向:</label>
<label style="margin-left: 25px;">
<label *ngIf="item.direction==0">东</label>
<label *ngIf="item.direction==1">西</label>
<label *ngIf="item.direction==2">南</label>
<label *ngIf="item.direction==3">北</label>
<label *ngIf="item.direction==4">东南</label>
<label *ngIf="item.direction==5">西南</label>
<label *ngIf="item.direction==6">东北</label>
<label *ngIf="item.direction==7">西北</label>
</label>
</div>
<div style="margin-top: 5px;">
<label style="margin-left: 25px;">图片数量:</label>
<label style="margin-left: 25px;" *ngIf="item.imageUrls.length">{{item.imageUrls.length}}张</label>
<label style="margin-left: 25px;" *ngIf="!item.imageUrls.length">0张</label>
</div>
</div>
<p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!AllAdjoining.length">暂无数据,请前往平面图进行相关数据录入</p>
</div>
</mat-tab>
<mat-tab label="{{item.name}}" *ngFor="let item of AllBuilding">
<div class="allImgs">
<div class="imgBox" *ngFor="let items of item.allImgs">
<div class="fixedImg" *ngIf="items.imageUrls.length">
<img [src]="items.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(items.imageUrls)'>
</div>
<div class="fixedImg" *ngIf="!items.imageUrls.length"><img src="../../../assets/images/upload.png" (click)='imgdetails(items.imageUrls)'></div>
<div style="margin-top: 5px;">
<label style="margin-left: 25px;">建筑物名称:</label>
<label style="margin-left: 25px;">{{items.name}}</label>
</div>
<div style="margin-top: 5px;">
<label style="margin-left: 25px;">建筑物方向:</label>
<label style="margin-left: 25px;">
<label *ngIf="items.direction==0">东</label>
<label *ngIf="items.direction==1">西</label>
<label *ngIf="items.direction==2">南</label>
<label *ngIf="items.direction==3">北</label>
<label *ngIf="items.direction==4">东南</label>
<label *ngIf="items.direction==5">西南</label>
<label *ngIf="items.direction==6">东北</label>
<label *ngIf="items.direction==7">西北</label>
</label>
</div>
<div style="margin-top: 5px;">
<label style="margin-left: 25px;">图片数量:</label>
<label style="margin-left: 25px;" *ngIf="items.imageUrls.length">{{items.imageUrls.length}}张</label>
<label style="margin-left: 25px;" *ngIf="!items.imageUrls.length">0张</label>
</div>
</div>
<p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!item.allImgs.length">暂无数据,请前往平面图进行相关数据录入</p>
</div>
</mat-tab>
</mat-tab-group> -->
<div style="margin: 10px 0;"> <div style="margin: 10px 0;">
<mat-accordion class="tableContent"> <mat-accordion class="tableContent">
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
@ -92,8 +15,6 @@
单位毗邻 单位毗邻
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header > </mat-expansion-panel-header >
<div class="colum" *ngFor="let item of AllAdjoining"> <div class="colum" *ngFor="let item of AllAdjoining">
<div class="left"> <div class="left">
<img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'> <img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'>
@ -122,11 +43,9 @@
</div> </div>
</div> </div>
</div> </div>
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel> </div>
</mat-accordion>
</div>
<div *ngFor="let item of AllBuilding" style="margin-bottom: 10px;"> <div *ngFor="let item of AllBuilding" style="margin-bottom: 10px;">
<mat-accordion class="tableContent" > <mat-accordion class="tableContent" >
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">

25
src/app/gis-management/allaround/allaround.component.scss
Unescape View File

@ -32,7 +32,6 @@
flex-direction: row; flex-direction: row;
.left{ .left{
width: 45%; width: 45%;
//height: 140px;
img{ img{
width: 140px; width: 140px;
height: 100px; height: 100px;
@ -40,6 +39,11 @@
cursor:pointer; cursor:pointer;
} }
} }
@media screen and (min-width:1000px) and (max-width:1400px){
.left{
width: 57%;
}
}
.right{ .right{
width: 40%; width: 40%;
margin-top: 4%; margin-top: 4%;
@ -84,8 +88,13 @@
} }
} }
} }
//预览图片 //预览图片
.bigimgbox{
width: 1500px;
height: 900px;
display: flex;
align-items: center;
}
.previewImgBox { .previewImgBox {
width: 1500px; width: 1500px;
height: 700px; height: 700px;
@ -105,3 +114,15 @@
.rotateA {transform: rotate(90deg) scale(0.75);} .rotateA {transform: rotate(90deg) scale(0.75);}
.rotateB {transform: rotate(180deg)} .rotateB {transform: rotate(180deg)}
.rotateC {transform: rotate(270deg) scale(0.75);} .rotateC {transform: rotate(270deg) scale(0.75);}
@media screen and (min-width:1000px) and (max-width:1400px){
.bigimgbox{
width:900px;
height: 580px;
}
//预览图片
.previewImgBox {
width: 800px;
height: 500px;
text-align: center;
}
}

4
src/app/gis-management/allaround/allaround.component.ts
Unescape View File

@ -75,8 +75,8 @@ export class AllaroundComponent implements OnInit {
if (e.length && e!=null) { if (e.length && e!=null) {
let data = e let data = e
const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去 const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
width: '1600px', data,
height:'900px',data}); id:'gisImgDialog'});
dialogRef.afterClosed().subscribe(); dialogRef.afterClosed().subscribe();
} else{ } else{
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();

33
src/app/gis-management/allaround/imgdetails.component.html
Unescape View File

@ -1,18 +1,21 @@
<div mat-dialog-title>图片详情</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy"
[attr.data-src]="item">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<!-- 如果需要导航按钮 --> <div class="bigimgbox">
<div class="swiper-button-prev"></div> <!-- <div mat-dialog-title>图片详情</div> -->
<div class="swiper-button-next"></div> <div class="swiper-container">
</div> <div class="swiper-wrapper">
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy"
[attr.data-src]="item">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<div class="previewImgBottom"> <!-- 如果需要导航按钮 -->
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!--
<div class="previewImgBottom">
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
</div> -->
</div> </div>

17
src/app/gis-management/fire-facilities/fire-facilities.component.scss
Unescape View File

@ -194,8 +194,9 @@
//img图片列表页面 //img图片列表页面
.imageList { .imageList {
width: 100%; width:1350px;
height: 100%; height:700px;
overflow-y: auto; overflow-y: auto;
.imageListBox { .imageListBox {
width: 100%; width: 100%;
@ -219,4 +220,14 @@
} }
} }
} }
@media screen and (max-width:1300px){
.imageList{
width:911px;
height:570px;
.imageListBox {
.imagesBox{
width:275px;
}
}
}
}

4
src/app/gis-management/fire-facilities/fire-facilities.component.ts
Unescape View File

@ -420,7 +420,7 @@ export class FireFacilitiesComponent implements OnInit {
}); //newDate }); //newDate
if (data.images.length) { if (data.images.length) {
let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗 let dialogRef = this.dialog.open(ImagesData2,{data}); //打开图片弹窗
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -446,7 +446,7 @@ export class FireFacilitiesComponent implements OnInit {
data.images.push(elements)} }); data.images.push(elements)} });
}); });
if (data.images.length) { if (data.images.length) {
let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗 let dialogRef = this.dialog.open(ImagesData2,{data}); //打开图片弹窗
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';

3
src/app/gis-management/fire-facilities/imagesdata.component.ts
Unescape View File

@ -34,8 +34,7 @@ export class ImagesData2 {
allImages:this.data.images, allImages:this.data.images,
imgIndex: index} imgIndex: index}
let dialogRef = this.dialog.open(previewBigImg2, let dialogRef = this.dialog.open(previewBigImg2,
{width: '1600px', {data});
height:'900px',data});
} }
} }

28
src/app/gis-management/fire-facilities/previewImg.html
Unescape View File

@ -6,20 +6,22 @@
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-11-27 08:47:38 * @LastEditTime: 2020-11-27 08:47:38
--> -->
<div mat-dialog-title>图片详情</div> <div class="imgDiaLogBox">
<div class="swiper-container"> <div mat-dialog-title>图片详情</div>
<div class="swiper-wrapper"> <div class="swiper-container">
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> <div class="swiper-wrapper">
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
<div class="swiper-lazy-preloader"></div> <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
<div class="swiper-lazy-preloader"></div>
</div>
</div> </div>
</div>
<!-- 如果需要导航按钮 --> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
</div> </div>
<div class="previewImgBottom"> <div class="previewImgBottom">
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
</div>
</div> </div>

46
src/app/gis-management/fire-facilities/realistic-picture.component.scss
Unescape View File

@ -156,19 +156,37 @@
//预览图片
.previewImgBox { .imgDiaLogBox{
width: 1500px; width: 1450px;
height: 700px; height: 810px;
text-align: center; //预览图片
img{ .previewImgBox {
width: auto; width: 1350px;
height: auto; height: 700px;
max-width: 100%; text-align: center;
height: 100%;} img{
width: auto;
height: auto;
max-width: 100%;
height: 100%;}
}
.previewImgBottom {
text-align: center;
height: 30px;
margin: 20px auto;
}
} }
.previewImgBottom { @media screen and (max-width:1300px){
text-align: center; .imgDiaLogBox{
height: 30px; width: 920px;
margin: 20px auto; height: 588px;
//预览图片
.previewImgBox {
width: 800px;
height: 500px;
text-align: center;
}
}
} }

4
src/app/gis-management/gis-labeling/gis-labeling.component.html
Unescape View File

@ -81,9 +81,9 @@
<!-- 左侧 --> <!-- 左侧 -->
<div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}"> <div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}">
<app-left-working (onCustomEvent)="closeDiv()" #appLeft></app-left-working> <app-left-working style="width: 100%;height: 100%;" (onCustomEvent)="closeDiv()" #appLeft></app-left-working>
</div> </div>
<img *ngIf="showLeftDiv" class="leftHide publicButton" title="隐藏" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' src="../../../assets//images/showhide.png" alt=""> <img *ngIf="showLeftDiv" id="leftHide" class="leftHide publicButton" title="隐藏" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' src="../../../assets//images/showhide.png" alt="">
<img class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' src="../../../assets//images/showhide.png" alt=""> <img class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' src="../../../assets//images/showhide.png" alt="">
<!-- 左侧 --> <!-- 左侧 -->

16
src/app/gis-management/gis-labeling/gis-labeling.component.scss
Unescape View File

@ -1,8 +1,8 @@
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 1024px; // min-width: 1024px;
min-height: 768px; // min-height: 768px;
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
@ -22,6 +22,7 @@
box-sizing: border-box; box-sizing: border-box;
padding: 3px; padding: 3px;
} }
//左侧工作区 显隐图标 //左侧工作区 显隐图标
.publicButton { .publicButton {
display: block; display: block;
@ -37,6 +38,7 @@
.leftHide { .leftHide {
left: 400px; left: 400px;
} }
.leftShow { .leftShow {
left: 0px;; left: 0px;;
} }
@ -364,3 +366,13 @@
outline-color: #FFFFFF; outline-color: #FFFFFF;
} }
} }
@media screen and (min-width:1200px) and (max-width:1300px){
.leftDiv {
width: 328px;
}
#leftHide{
left: 328px;
}
}

5
src/app/gis-management/gis-labeling/gis-labeling.component.ts
Unescape View File

@ -782,7 +782,7 @@ export class GisLabelingComponent implements OnInit {
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div> <div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div> <div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
</div> </div>
</div>` </div>`
// 创建一个自定义内容的 infowindow 实例 // 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({ this.infoWindow = new AMap.InfoWindow({
position: [e.location.x,e.location.y], position: [e.location.x,e.location.y],
@ -810,8 +810,7 @@ export class GisLabelingComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件
}) })
this.map.setZoomAndCenter(13,[marker._position[0],marker._position[1]+0.015]); //设置地图中心点
this.map.setZoomAndCenter(13,marker._position); //设置地图中心点
this.allCompany = [] this.allCompany = []
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();

44
src/app/gis-management/key-site-look/key-site.component.scss
Unescape View File

@ -121,19 +121,35 @@ table {
.rotateA {transform: rotate(90deg) scale(0.75);} .rotateA {transform: rotate(90deg) scale(0.75);}
.rotateB {transform: rotate(180deg)} .rotateB {transform: rotate(180deg)}
.rotateC {transform: rotate(270deg) scale(0.75);} .rotateC {transform: rotate(270deg) scale(0.75);}
//预览图片 .imgDiaLogBox{
.previewImgBox { width: 1450px;
width: 1500px; height: 810px;
height: 700px; //预览图片
text-align: center; .previewImgBox {
img{ width: 1350px;
width: auto; height: 700px;
height: auto; text-align: center;
max-width: 100%; img{
height: 100%;} width: auto;
height: auto;
max-width: 100%;
height: 100%;}
}
.previewImgBottom {
text-align: center;
height: 30px;
margin: 20px auto;
}
} }
.previewImgBottom { @media screen and (max-width:1300px){
text-align: center; .imgDiaLogBox{
height: 30px; width: 920px;
margin: 20px auto; height: 588px;
//预览图片
.previewImgBox {
width: 800px;
height: 500px;
text-align: center;
}
}
} }

3
src/app/gis-management/key-site-look/key-site.component.ts
Unescape View File

@ -159,8 +159,7 @@ export class KeySiteLookComponent implements OnInit {
if (e.length) { if (e.length) {
let data = e let data = e
const dialogRef = this.dialog.open(KeySiteImgs2, {//调用open方法打开对话框并且携带参数过去 const dialogRef = this.dialog.open(KeySiteImgs2, {//调用open方法打开对话框并且携带参数过去
width: '1600px', data});
height:'900px',data});
dialogRef.afterClosed().subscribe(); dialogRef.afterClosed().subscribe();
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();

33
src/app/gis-management/key-site-look/keysiteimgs.component.html
Unescape View File

@ -1,18 +1,21 @@
<div mat-dialog-title>图片详情</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy"
[attr.data-src]="item">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<!-- 如果需要导航按钮 --> <div class="imgDiaLogBox">
<div class="swiper-button-prev"></div> <div mat-dialog-title>图片详情</div>
<div class="swiper-button-next"></div> <div class="swiper-container">
</div> <div class="swiper-wrapper">
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy"
[attr.data-src]="item">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="previewImgBottom"> <div class="previewImgBottom">
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
</div>
</div> </div>

2
src/app/gis-management/plan-list/openPlanTool.html
Unescape View File

@ -1,3 +1,3 @@
<div style="width: 100%;height: 100%;"> <div class="divbox">
<app-collection-tools-plan #plan></app-collection-tools-plan> <app-collection-tools-plan #plan></app-collection-tools-plan>
</div> </div>

10
src/app/gis-management/plan-list/openPlanTool.scss
Unescape View File

@ -0,0 +1,10 @@
.divbox{
width: 1500px;
height:850px
}
@media screen and (min-width:1000px) and (max-width:1400px){
.divbox{
width: 950px;
height: 618px;
}
}

6
src/app/gis-management/plan-list/plan-list.component.scss
Unescape View File

@ -27,7 +27,6 @@
div{ div{
width: 110px; width: 110px;
height: 110px; height: 110px;
img{ img{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -41,4 +40,9 @@
width: 110px; width: 110px;
} }
} }
@media screen and (min-width:1200px) and (max-width:1300px){
.contantitem{
margin-right: 30px;
}
}
} }

2
src/app/gis-management/plan-list/plan-list.component.ts
Unescape View File

@ -51,8 +51,6 @@ export class PlanListComponent implements OnInit {
sessionStorage.setItem("companyId",this.unitId) sessionStorage.setItem("companyId",this.unitId)
let data = {select: item, key: index, allBuildings: this.allBuildings} let data = {select: item, key: index, allBuildings: this.allBuildings}
let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去 let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去
width: '1500px',
height:'850px',
id:'openPlanToolDialog', id:'openPlanToolDialog',
data data
}); });

28
src/app/gis-management/realistic-picture-look/previewImg.html
Unescape View File

@ -1,17 +1,19 @@
<div mat-dialog-title>图片详情</div> <div class="imgDiaLogBox">
<div class="swiper-container"> <div mat-dialog-title>图片详情</div>
<div class="swiper-wrapper"> <div class="swiper-container">
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> <div class="swiper-wrapper">
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> <div class="swiper-slide previewImgBox" *ngFor="let item of allImages">
<div class="swiper-lazy-preloader"></div> <img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}">
<div class="swiper-lazy-preloader"></div>
</div>
</div> </div>
</div>
<!-- 如果需要导航按钮 --> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
</div> </div>
<div class="previewImgBottom"> <div class="previewImgBottom">
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
</div>
</div> </div>

54
src/app/gis-management/realistic-picture-look/realistic-picture.component.scss
Unescape View File

@ -84,6 +84,16 @@
margin-left: 5%; margin-left: 5%;
margin-top: 7%; margin-top: 7%;
} }
@media screen and (max-width:1300px){
img{
width: 138px;
height: 100px;
margin-left: 5%;
margin-top: 7%;
}
}
input{ input{
width: 80%; width: 80%;
border: none; border: none;
@ -211,19 +221,35 @@
//预览图片 .imgDiaLogBox{
.previewImgBox { width: 1450px;
width: 1500px; height: 810px;
height: 700px; //预览图片
text-align: center; .previewImgBox {
img{ width: 1350px;
width: auto; height: 700px;
height: auto; text-align: center;
max-width: 100%; img{
height: 100%;} width: auto;
height: auto;
max-width: 100%;
height: 100%;}
}
.previewImgBottom {
text-align: center;
height: 30px;
margin: 20px auto;
}
} }
.previewImgBottom { @media screen and (max-width:1300px){
text-align: center; .imgDiaLogBox{
height: 30px; width: 920px;
margin: 20px auto; height: 588px;
//预览图片
.previewImgBox {
width: 800px;
height: 500px;
text-align: center;
}
}
} }

3
src/app/gis-management/realistic-picture-look/realistic-picture.component.ts
Unescape View File

@ -129,8 +129,7 @@ export class RealisticPictureLookComponent implements OnInit {
allImages:this.allImages, allImages:this.allImages,
imgIndex: index} imgIndex: index}
let dialogRef = this.dialog.open(previewImg3, let dialogRef = this.dialog.open(previewImg3,
{width: '1600px', {data});
height:'900px',data});
dialogRef.afterClosed().subscribe(); dialogRef.afterClosed().subscribe();
} }

8
src/app/ui/collection-tools-plan/collection-tools.component.html
Unescape View File

@ -47,16 +47,16 @@
<div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;"> <div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;">
<div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div> <div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div>
<!-- 平面图 --> <!-- 平面图 -->
<div class="planarGraph"> <div class="planarGraph" style="overflow: hidden;display: flex;flex-direction: column;">
<div class="planarGraphHeader" (click)='togglePlanarGraph()'> <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
<mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon> <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">平面图</label> <label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover" *ngIf="isEditPattern && pattern"> <label class="hover" *ngIf="isEditPattern && pattern" (click)='foundPanel($event)'>
<mat-icon (click)='foundPanel($event)'>add</mat-icon> <mat-icon >add</mat-icon>
</label> </label>
</div> </div>
<div [hidden]="!togglePlane" > <div [hidden]="!togglePlane" style="flex: 1;overflow-y: auto;">
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'> <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
<label class="overflowText" style="display:inline-block; max-width: 160px;"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label> <label class="overflowText" style="display:inline-block; max-width: 160px;"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label>
<a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern"> <a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">

11
src/app/ui/collection-tools-plan/collection-tools.component.scss
Unescape View File

@ -139,7 +139,7 @@
border: 1px solid #E6EAEE; border: 1px solid #E6EAEE;
width: 235px; width: 235px;
left: 0; left: 0;
z-index: 111; z-index: 112;
.leftDragDiv{ .leftDragDiv{
position: absolute; position: absolute;
right: 0; right: 0;
@ -156,6 +156,15 @@
border: 1px solid #E6EAEE; border: 1px solid #E6EAEE;
width: 235px; width: 235px;
right: 0; right: 0;
}
@media screen and (min-width:1200px) and (max-width:1300px){
.functionalDomainLeft{
min-width: 195px;
width: 195px;
}
.functionalDomainRight{
width: 195px;
}
} }
//右边导航栏显示隐藏 //右边导航栏显示隐藏
.togglePanel2 { .togglePanel2 {

5
src/app/ui/collection-tools-plan/panel.scss
Unescape View File

@ -24,7 +24,10 @@
.hover { .hover {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-left: 90px; // margin-left: 90px;
position: absolute;
right: 26px;
z-index:112;
border: 1px solid #999; border: 1px solid #999;
border-radius: 3px; border-radius: 3px;
.mat-icon {font-size: 18px; color: #999;} .mat-icon {font-size: 18px; color: #999;}

5
src/assets/css/newStyle.css
Unescape View File

@ -531,3 +531,8 @@ z-index:
*/ */
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */
@media screen and (min-width:1200px) and (max-width:1300px){
#chartMap{
padding-left: 25px;
}
}

2
src/styles.scss
Unescape View File

@ -139,7 +139,7 @@ table td.mat-footer-cell:last-of-type{
} }
//弹出框样式取消padding //弹出框样式取消padding
#shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog,#addLinkageForce,#videodialog2{ #shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog,#addLinkageForce,#videodialog2,#gisImgDialog{
padding: 0; padding: 0;
} }

Write Preview
Loading…
Cancel
Save