39 changed files with 1696 additions and 2331 deletions
@ -1,23 +1,68 @@
|
||||
<div class="tabbar"> |
||||
<span style="margin:0 20px;">单位毗邻</span> |
||||
<button mat-raised-button color="primary">建筑一</button> |
||||
</div> |
||||
<div class="content"> |
||||
<mat-tab-group> |
||||
<mat-tab label="单位毗邻"> |
||||
<div class="allImgs"> |
||||
|
||||
<div class="aroundimagebox"> |
||||
<div class="aroundimage"> |
||||
<div class="imgBox" *ngFor="let item of AllAdjoining" > |
||||
<div class="fixedImg" *ngIf="item.imageUrls.length"> |
||||
<img [src]="item.imageUrls[0]" 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: 10px;"> |
||||
<label style="margin-left: 25px;">建筑物名称:</label> |
||||
<label style="margin-left: 25px;">{{item.name}}</label> |
||||
</div> |
||||
<div style="margin-top: 10px;"> |
||||
<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> |
||||
|
||||
<p style="width: 100%;text-align: center;" *ngIf="!AllAdjoining.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||
</div> |
||||
</mat-tab> |
||||
|
||||
<div class="imgitem"*ngFor="let item of AllAdjoining"> |
||||
<span class="position">{{item.direction}}</span> |
||||
<div class="houseimg"> |
||||
<span class="img1" style="margin-right: 10px;">建筑物图片</span> |
||||
<img class="img2" [src]="item.imageUrls[0]" title="查看详情" (click)="imgdetails()"> |
||||
</div> |
||||
<div class="housename"> |
||||
<span style="margin-right: 10px;">建筑物名称:</span> |
||||
<span>{{item.name}}</span> |
||||
</div> |
||||
<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.imageUrls[0]" 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: 10px;"> |
||||
<label style="margin-left: 25px;">建筑物名称:</label> |
||||
<label style="margin-left: 25px;">{{items.name}}</label> |
||||
</div> |
||||
<div style="margin-top: 10px;"> |
||||
<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> |
||||
|
||||
<h3 *ngIf="!AllAdjoining.length" style="width: 100px; height: 100%; margin: 100px auto;">暂无数据</h3> |
||||
</div> |
||||
<p style="width: 100%;text-align: center;" *ngIf="!item.allImgs.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||
</div> |
||||
</mat-tab> |
||||
|
||||
</mat-tab-group> |
||||
</div> |
||||
@ -1,107 +1,53 @@
|
||||
.tabbar{ |
||||
height: 60px; |
||||
// background: yellow; |
||||
line-height: 60px; |
||||
margin-bottom: 20px; |
||||
border-bottom: 1px solid black;; |
||||
.content { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 10px; |
||||
} |
||||
.aroundimagebox{ |
||||
height: 100%; |
||||
width: 100%; |
||||
.aroundimage{ |
||||
width:97%; |
||||
height: 80%; |
||||
// background-color: skyblue; |
||||
overflow: auto; |
||||
margin: 0 30px; |
||||
border: 6px solid #cccccc; |
||||
.imgitem{ |
||||
position: relative; |
||||
float: left; |
||||
margin: 60px 10px 70px 98px; |
||||
img{ |
||||
width: 299px; |
||||
height: 169px; |
||||
border: 1px dashed grey; |
||||
} |
||||
.position{ |
||||
position: absolute; |
||||
left: 16px; |
||||
top: 6px; |
||||
} |
||||
.houseimg{ |
||||
margin-bottom: 20px; |
||||
position: relative; |
||||
width: 391px; |
||||
height: 200px; |
||||
.img1{ |
||||
position: absolute; |
||||
left: 0; |
||||
top: 70px; |
||||
} |
||||
.img2{ |
||||
position: absolute; |
||||
left:90px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//图片详情弹出框样式 |
||||
.imgdialog{ |
||||
//图片外部div |
||||
.allImgs { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
margin: 25px; |
||||
.imgBox{ |
||||
width: 300px; |
||||
height: 230px; |
||||
margin: 0 35px 35px 0; |
||||
display: inline-block; |
||||
position: relative; |
||||
.imagestitle{ |
||||
width: 100%; |
||||
.fixedImg { |
||||
width: 100%; |
||||
height: 170px; |
||||
text-align: center; |
||||
margin-bottom: 3px; |
||||
img { |
||||
width: auto; |
||||
height: auto; |
||||
max-width: 100%; |
||||
height: 100%; |
||||
cursor:pointer;} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.imagesbox{ |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
line-height: 700px; |
||||
|
||||
img{ |
||||
height: 100%; |
||||
// width: 1280px; |
||||
} |
||||
.img1{ |
||||
transform:rotate(90deg) scale(0.55); |
||||
height: 100%; |
||||
} |
||||
.img2{ |
||||
transform:rotate(180deg); |
||||
height: 100%; |
||||
} |
||||
.img3{ |
||||
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{ |
||||
height: 50px; |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 20px;; |
||||
button{ |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
//预览图片 |
||||
.previewImgBox { |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
img{ |
||||
width: auto; |
||||
height: auto; |
||||
max-width: 100%; |
||||
height: 100%;} |
||||
} |
||||
.previewImgBottom { |
||||
text-align: center; |
||||
height: 30px; |
||||
margin: 20px auto; |
||||
} |
||||
|
||||
//预览图片旋转角度 |
||||
.rotateA {transform: rotate(90deg) scale(0.75);} |
||||
.rotateB {transform: rotate(180deg)} |
||||
.rotateC {transform: rotate(270deg) scale(0.75);} |
||||
@ -1,24 +1,16 @@
|
||||
<div class="imgdialog"> |
||||
<div mat-dialog-title class="imagestitle ">图片详情</div> |
||||
<!-- <div class="swiper-container swiper-no-swiping"> --> |
||||
<div class="swiper-container swiper-no-swiping"> |
||||
<div class="swiper-wrapper "> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583660754310&di=782b4fc4e7186c8db2fa6dfe5e0760f4&imgtype=0&src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0704%2F04e855314b2e0b342a949fd9f8698e97.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1804916093,12959926&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2496032502,3509277120&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="../../../assets/images/xxx.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="../../../assets/images/fengjing.jpg" alt=""></div> |
||||
<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}" [src]="item"> |
||||
</div> |
||||
|
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<div class="swiper-button-prev" (click)="defaultrotateA($event)"></div> |
||||
<div class="swiper-button-next" (click)="defaultrotateA($event)"></div> |
||||
|
||||
|
||||
</div> |
||||
<div class="detailbtn"> |
||||
<button type="button" mat-icon-button (click)="rotate()"><mat-icon>refresh</mat-icon></button> |
||||
<button type="button" mat-icon-button><mat-icon>vertical_align_bottom</mat-icon></button> |
||||
</div> |
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<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> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,207 +1,34 @@
|
||||
<div class="tabbar"> |
||||
<span style="margin:0 20px;">单位消防设施</span> |
||||
<button mat-raised-button color="primary">建筑一</button> |
||||
</div> |
||||
<div class="devicebox"> |
||||
<div class="device"> |
||||
<div class="content"> |
||||
<mat-tab-group> |
||||
<mat-tab label="单位消防设施"> |
||||
<div class="contentBox"> |
||||
|
||||
<div class="tablebox"> |
||||
<div class="imagestitle">消防水源</div> |
||||
<div style="width: 80%;"> |
||||
<mat-icon title="创建">add_circle_outline</mat-icon> |
||||
<mat-icon title="保存" style="margin-left: 25px;">description</mat-icon> |
||||
<mat-icon title="删除" style="margin-left: 25px;">delete</mat-icon> |
||||
</div> |
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-checkbox></mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="project"> |
||||
<th mat-header-cell *matHeaderCellDef>项目</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="phone"> |
||||
<th mat-header-cell *matHeaderCellDef>照片</th> |
||||
<td mat-cell *matCellDef="let element" class="lookphone" (click)="lookphone()">查看照片</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="mainmsg"> |
||||
<th mat-header-cell *matHeaderCellDef>主要情况</th> |
||||
<td mat-cell *matCellDef="let element">{{element.main}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<h3 style="text-align: center;font-weight: 550;">消防水源</h3> |
||||
<div> |
||||
<mat-icon title="创建">add_circle_outline</mat-icon> |
||||
<mat-icon title="保存" style="margin-left: 25px;">description</mat-icon> |
||||
<mat-icon title="删除" style="margin-left: 25px;">delete</mat-icon> |
||||
</div> |
||||
|
||||
<div class="tablebox"> |
||||
<div class="imagestitle">安全疏散设施</div> |
||||
<div style="width: 80%;"> |
||||
<mat-icon title="创建">add_circle_outline</mat-icon> |
||||
<mat-icon title="保存" style="margin-left: 25px;">description</mat-icon> |
||||
<mat-icon title="删除" style="margin-left: 25px;">delete</mat-icon> |
||||
</div> |
||||
<table mat-table [dataSource]="dataSource2" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-checkbox></mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="project"> |
||||
<th mat-header-cell *matHeaderCellDef>项目</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="phone"> |
||||
<th mat-header-cell *matHeaderCellDef>照片</th> |
||||
<td mat-cell *matCellDef="let element" class="lookphone" (click)="lookphone()">查看照片</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="mainmsg"> |
||||
<th mat-header-cell *matHeaderCellDef>主要情况</th> |
||||
<td mat-cell *matCellDef="let element">{{element.main}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<div> |
||||
<div class="flexBox"> |
||||
<p></p> |
||||
<p>项目</p> |
||||
<p>照片</p> |
||||
<p>主要情况</p> |
||||
</div> |
||||
<div class="flexBox"> |
||||
<p></p> |
||||
<p></p> |
||||
<p></p> |
||||
<p></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="tablebox"> |
||||
<div class="imagestitle">消防水系统</div> |
||||
<div style="width: 80%;"> |
||||
<mat-icon title="创建">add_circle_outline</mat-icon> |
||||
<mat-icon title="保存" style="margin-left: 25px;">description</mat-icon> |
||||
<mat-icon title="删除" style="margin-left: 25px;">delete</mat-icon> |
||||
</div> |
||||
<table mat-table [dataSource]="dataSource3" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-checkbox></mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="project" > |
||||
<th mat-header-cell *matHeaderCellDef>项目</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="phone"> |
||||
<th mat-header-cell *matHeaderCellDef>照片</th> |
||||
<td mat-cell *matCellDef="let element" class="lookphone" (click)="lookphone()">查看照片</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="mainmsg"> |
||||
<th mat-header-cell *matHeaderCellDef>主要情况</th> |
||||
<td mat-cell *matCellDef="let element">{{element.main}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</mat-tab> |
||||
|
||||
<div class="insidebox"> |
||||
<div class="inside"> |
||||
<div class="insidetitle">内部力量</div> |
||||
<div class="insidemsg"> |
||||
<div class="insidemsgitem"> |
||||
<span>消防队地址：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>负责人：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>联系电话：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>消防员数量：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>消防车数量：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>其他装备：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>灭火剂储存量：</span> |
||||
<span class="insidemsgitemdata"></span> |
||||
</div> |
||||
<div class="insidemsgitem"> |
||||
<span>消防性质：</span> |
||||
<mat-radio-group required name="nature" ngModel #nature="ngModel" style="margin-left: 95px;"> |
||||
<mat-radio-button value="1" style="margin-left: 10px;">专职队</mat-radio-button> |
||||
<mat-radio-button value="0" style="margin-left: 40px;">微型站</mat-radio-button> |
||||
</mat-radio-group> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<mat-tab label="建筑消防设施"> |
||||
</mat-tab> |
||||
|
||||
<div class="insidebox"> |
||||
<div class="inside"> |
||||
<div class="insidetitle">其他</div> |
||||
<div class="insidemsg"> |
||||
<div class="otheritem"> |
||||
<span class="otheritemdataname">消防控制室：</span> |
||||
<span class="otheritemdata" style="margin-left: 20px;"></span> |
||||
</div> |
||||
<div class="otheritem"> |
||||
<span class="otheritemdataname">防火卷帘分割：</span> |
||||
<span class="otheritemdata" style="margin-left: 4px;"></span> |
||||
</div> |
||||
<div class="radiobox"> |
||||
<div class="radioitem"> |
||||
<span>自动报警系统：</span> |
||||
<mat-radio-group required name="callpolice " ngModel #callpolice="ngModel"> |
||||
<mat-radio-button value="1">有</mat-radio-button> |
||||
<mat-radio-button value="0">无</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="radioitem"> |
||||
<span>自动喷水系统：</span> |
||||
<mat-radio-group required name="water " ngModel #water="ngModel"> |
||||
<mat-radio-button value="1">有</mat-radio-button> |
||||
<mat-radio-button value="0">无</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="radioitem"> |
||||
<span>应急广播系统：</span> |
||||
<mat-radio-group required name="broadcast " ngModel #broadcast="ngModel"> |
||||
<mat-radio-button value="1">有</mat-radio-button> |
||||
<mat-radio-button value="0">无</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="radioitem"> |
||||
<span>防排烟系统：</span> |
||||
<mat-radio-group required name="smog " ngModel #smog="ngModel"> |
||||
<mat-radio-button value="1">有</mat-radio-button> |
||||
<mat-radio-button value="0">无</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</mat-tab-group> |
||||
</div> |
||||
@ -1,211 +1,21 @@
|
||||
.tabbar{ |
||||
height: 60px; |
||||
line-height: 60px; |
||||
margin-bottom: 20px; |
||||
border-bottom: 1px solid black;; |
||||
} |
||||
.devicebox{ |
||||
height: 100%; |
||||
width: 100%; |
||||
.device{ |
||||
width:96%; |
||||
height: 80%; |
||||
// background-color: skyblue; |
||||
overflow: auto; |
||||
margin: 0 30px; |
||||
border: 6px solid #cccccc; |
||||
.tablebox{ |
||||
display: flex; |
||||
flex-direction:column ; |
||||
align-items:center; |
||||
.imagestitle{ |
||||
text-align: center; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
font-size: 26px; |
||||
} |
||||
.mat-elevation-z8{ |
||||
width: 80%; |
||||
margin: 10px 0; |
||||
} |
||||
.mat-column-project{ |
||||
width: 15%; |
||||
text-align: center; |
||||
} |
||||
.mat-column-phone{ |
||||
width: 15%; |
||||
text-align: center; |
||||
} |
||||
.mat-column-mainmsg{ |
||||
width: 70%; |
||||
text-align: center; |
||||
} |
||||
.lookphone{ |
||||
cursor: pointer; |
||||
color: blue;; |
||||
} |
||||
} |
||||
.insidebox{ |
||||
width:100%; |
||||
height: 300px; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 40px; |
||||
.insidetitle{ |
||||
text-align: center; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
font-size: 26px; |
||||
} |
||||
.inside{ |
||||
width: 80%; |
||||
border: 1px solid black; |
||||
.insidemsg{ |
||||
.insidemsgitem{ |
||||
width: 50%; |
||||
height: 43px; |
||||
line-height:43px; |
||||
float: left; |
||||
|
||||
span{ |
||||
display: block; |
||||
float: left; |
||||
margin-left: 60px; |
||||
} |
||||
.insidemsgitemdata{ |
||||
float: right; |
||||
width: 330px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
border: 1px solid black; |
||||
margin-right: 70px; |
||||
} |
||||
|
||||
} |
||||
.otheritem{ |
||||
height: 50px; |
||||
line-height: 50px; |
||||
width: 100%; |
||||
span{ |
||||
display: block; |
||||
float: left; |
||||
} |
||||
.otheritemdataname{ |
||||
margin-left: 210px; |
||||
} |
||||
.otheritemdata{ |
||||
border: 1px solid black; |
||||
height:40px; |
||||
width:715px ; |
||||
} |
||||
} |
||||
.radiobox{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
margin-top: 38px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.imagesdialog{ |
||||
text-align: center; |
||||
.imagesbox{ |
||||
width:99%; |
||||
height: 755px; |
||||
border: 6px solid #cccccc; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-flow:wrap; |
||||
overflow: auto; |
||||
.imgitem{ |
||||
width: 300px; |
||||
height: 200px; |
||||
float: left; |
||||
margin-top:70px; |
||||
.img{ |
||||
width: 300px; |
||||
height: 180px; |
||||
img{ |
||||
width: 300px; |
||||
height: 160px; |
||||
cursor: pointer; |
||||
} |
||||
p{ |
||||
width: 300px; |
||||
height: 20px; |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
//icon统一样式 |
||||
.mat-icon { |
||||
cursor:pointer; |
||||
} |
||||
table { |
||||
.content { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
height: 100%; |
||||
padding: 10px; |
||||
.contentBox { |
||||
width: 75%; |
||||
height: 100%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
|
||||
//图片详情弹出框样式 |
||||
.imgdialog{ |
||||
position: relative; |
||||
.imagestitle{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.imagesbox{ |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
line-height: 700px; |
||||
|
||||
img{ |
||||
height: 100%; |
||||
// width: 1280px; |
||||
} |
||||
.img1{ |
||||
transform:rotate(90deg) scale(0.55); |
||||
height: 100%; |
||||
} |
||||
.img2{ |
||||
transform:rotate(180deg); |
||||
height: 100%; |
||||
} |
||||
.img3{ |
||||
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{ |
||||
height: 50px; |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 20px;; |
||||
button{ |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
//每一行 flex布局 |
||||
.flexBox { |
||||
display: flex; |
||||
text-align: center; |
||||
border: 1px solid black; |
||||
:first-child{flex: 5%} |
||||
:nth-child(2) {flex: 15%} |
||||
:nth-child(3) {flex: 15%} |
||||
:last-child {flex: 65%} |
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
<div class="imagesdialog"> |
||||
<div mat-dialog-title class="imagestitle">消防水源</div> |
||||
<div class="imagesbox"> |
||||
|
||||
<div class="imgitem" *ngFor="let item of xxx"> |
||||
<div class="img"> |
||||
<img [src]="defaultimg" alt="" title="查看大图" (click)="imgdetails()"> |
||||
<p>建筑物图片</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -1,44 +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 { MatSnackBar } from '@angular/material/snack-bar'; |
||||
import { ImgsDataDetail } from './imgsdatadetail.component' |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'imagesdata', |
||||
templateUrl: './imagesdata.component.html', |
||||
styleUrls: ['./fire-fighting-device.component.scss'] |
||||
}) |
||||
export class ImagesData { |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImagesData>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {} |
||||
xxx = [1,2,3,4,5,6,7,8,9,10,11] |
||||
defaultimg = "../../../assets/images/upload.jpg" |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
//图片查看大图
|
||||
imgdetails(){ |
||||
const dialogRef = this.dialog.open(ImgsDataDetail, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '1600px', |
||||
height:'900px', |
||||
data: {} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
|
||||
} |
||||
); |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
} |
||||
export class ImagesData { |
||||
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImagesData>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {} |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
@ -1,24 +0,0 @@
|
||||
<div class="imgdialog"> |
||||
<div mat-dialog-title class="imagestitle ">图片详情</div> |
||||
<!-- <div class="swiper-container swiper-no-swiping"> --> |
||||
<div class="swiper-container swiper-no-swiping"> |
||||
<div class="swiper-wrapper "> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583660754310&di=782b4fc4e7186c8db2fa6dfe5e0760f4&imgtype=0&src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0704%2F04e855314b2e0b342a949fd9f8698e97.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1804916093,12959926&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2496032502,3509277120&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="../../../assets/images/xxx.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="../../../assets/images/fengjing.jpg" alt=""></div> |
||||
</div> |
||||
|
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<div class="swiper-button-prev" (click)="defaultrotateA()"></div> |
||||
<div class="swiper-button-next" (click)="defaultrotateA()"></div> |
||||
|
||||
|
||||
</div> |
||||
<div class="detailbtn"> |
||||
<button type="button" mat-icon-button (click)="rotate()"><mat-icon>refresh</mat-icon></button> |
||||
<button type="button" mat-icon-button><mat-icon>vertical_align_bottom</mat-icon></button> |
||||
</div> |
||||
</div> |
||||
@ -1,57 +1,120 @@
|
||||
<div class="tabbar"> |
||||
<span style="margin:0 20px;">单位重点部位</span> |
||||
<button mat-raised-button color="primary">建筑一</button> |
||||
</div> |
||||
<div class="devicebox"> |
||||
<div class="device"> |
||||
<div class="tablebox"> |
||||
<div class="imagestitle">重点部位情况</div> |
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
<div class="content"> |
||||
<mat-tab-group> |
||||
<mat-tab label="单位重点部位"> |
||||
<div class="contentBox"> |
||||
|
||||
<ng-container matColumnDef="mainname"> |
||||
<th mat-header-cell *matHeaderCellDef>重点部位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.mainname}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="position"> |
||||
<th mat-header-cell *matHeaderCellDef>重点部位所在位置</th> |
||||
<td mat-cell *matCellDef="let element">{{element.position}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="construction"> |
||||
<th mat-header-cell *matHeaderCellDef>建筑结构</th> |
||||
<td mat-cell *matCellDef="let element">{{element.construction}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="nature"> |
||||
<th mat-header-cell *matHeaderCellDef>使用性质</th> |
||||
<td mat-cell *matCellDef="let element">{{element.nature}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="danger"> |
||||
<th mat-header-cell *matHeaderCellDef>主要危险性</th> |
||||
<td mat-cell *matCellDef="let element">{{element.danger}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="img"> |
||||
<th mat-header-cell *matHeaderCellDef>图片</th> |
||||
<td mat-cell *matCellDef="let element" class="lookphone" (click)="lookphone()">查看图片</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<div style="margin-top: 25px;"> |
||||
<h3 style="text-align: center;font-weight: 550;">重点部位情况</h3> |
||||
<table mat-table [dataSource]="allCompanyPosition"> |
||||
<ng-container matColumnDef="mainname"> |
||||
<th mat-header-cell *matHeaderCellDef>重点部位名称</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.name}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="position"> |
||||
<th mat-header-cell *matHeaderCellDef>重点部位所在位置</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.position}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="construction"> |
||||
<th mat-header-cell *matHeaderCellDef>建筑结构</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.structure}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="nature"> |
||||
<th mat-header-cell *matHeaderCellDef>使用性质</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.nature}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="danger"> |
||||
<th mat-header-cell *matHeaderCellDef>主要危险性</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.hazards}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="img"> |
||||
<th mat-header-cell *matHeaderCellDef>图片</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<a href="javascript:void(0);" (click)='seeImg(element.imageUrls)' style="color: blue;">查看图片</a> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<p style="text-align: center;" *ngIf="!allCompanyPosition.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||
</div> |
||||
|
||||
<div class="bigbox"> |
||||
<div class="bigboxtitle">重点提示</div> |
||||
<div class="hintbox"> |
||||
<div class="hint"> |
||||
|
||||
</div> |
||||
</div> |
||||
<div style="margin-top: 25px;"> |
||||
<h3 style="text-align: center;font-weight: 550;">重点提示</h3> |
||||
<mat-icon title="保存" style="margin-left: 5%;cursor: pointer;" (click)='Preservation()'>description</mat-icon> |
||||
<p class="tips"> |
||||
<textarea [(ngModel)]="companyInput"></textarea> |
||||
</p> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</mat-tab> |
||||
|
||||
<mat-tab label="{{item.name}}" *ngFor="let item of allBuilding"> |
||||
<div class="contentBox"> |
||||
|
||||
<div style="margin-top: 25px;"> |
||||
<h3 style="text-align: center;font-weight: 550;">重点部位情况</h3> |
||||
<table mat-table [dataSource]="item.position"> |
||||
<ng-container matColumnDef="mainname"> |
||||
<th mat-header-cell *matHeaderCellDef>重点部位名称</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.name}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="position"> |
||||
<th mat-header-cell *matHeaderCellDef>重点部位所在位置</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.position}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="construction"> |
||||
<th mat-header-cell *matHeaderCellDef>建筑结构</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.structure}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="nature"> |
||||
<th mat-header-cell *matHeaderCellDef>使用性质</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.nature}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="danger"> |
||||
<th mat-header-cell *matHeaderCellDef>主要危险性</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.hazards}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="img"> |
||||
<th mat-header-cell *matHeaderCellDef>图片</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<a href="javascript:void(0);" (click)='seeImg(element.imageUrls)' style="color: blue;">查看图片</a> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<p style="text-align: center;" *ngIf="!item.position.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||
</div> |
||||
<div style="margin-top: 25px;"> |
||||
<h3 style="text-align: center;font-weight: 550;">重点提示</h3> |
||||
<mat-icon title="保存" style="margin-left: 5%;cursor: pointer;" (click)='PreservationBuilding(item)'>description</mat-icon> |
||||
<p class="tips"> |
||||
<textarea [(ngModel)]="item.companyInput"></textarea> |
||||
</p> |
||||
</div> |
||||
|
||||
</div> |
||||
</mat-tab> |
||||
|
||||
</mat-tab-group> |
||||
</div> |
||||
@ -1,230 +1,55 @@
|
||||
.tabbar{ |
||||
height: 60px; |
||||
// background: yellow; |
||||
line-height: 60px; |
||||
margin-bottom: 20px; |
||||
border-bottom: 1px solid black;; |
||||
} |
||||
.devicebox{ |
||||
.content { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 10px; |
||||
.contentBox{ |
||||
width: 75%; |
||||
height: 100%; |
||||
width: 100%; |
||||
.device{ |
||||
width:96%; |
||||
height: 80%; |
||||
// background-color: skyblue; |
||||
overflow: auto; |
||||
margin: 0 30px; |
||||
border: 6px solid #cccccc; |
||||
.tablebox{ |
||||
display: flex; |
||||
flex-direction:column ; |
||||
align-items:center; |
||||
margin-bottom: 60px; |
||||
margin-top: 70px; |
||||
.imagestitle{ |
||||
text-align: center; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
font-size: 26px; |
||||
} |
||||
.mat-elevation-z8{ |
||||
width: 80%; |
||||
margin: 10px 0; |
||||
} |
||||
.mat-column-project{ |
||||
width: 15%; |
||||
text-align: center; |
||||
} |
||||
.mat-column-phone{ |
||||
width: 15%; |
||||
text-align: center; |
||||
} |
||||
.mat-column-mainmsg{ |
||||
width: 70%; |
||||
text-align: center; |
||||
} |
||||
.lookphone{ |
||||
cursor: pointer; |
||||
color: blue;; |
||||
} |
||||
} |
||||
.insidebox{ |
||||
width:100%; |
||||
height: 300px; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 40px; |
||||
.insidetitle{ |
||||
text-align: center; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
font-size: 26px; |
||||
} |
||||
.inside{ |
||||
width: 80%; |
||||
border: 1px solid black; |
||||
.insidemsg{ |
||||
.insidemsgitem{ |
||||
width: 50%; |
||||
height: 43px; |
||||
line-height:43px; |
||||
float: left; |
||||
|
||||
span{ |
||||
display: block; |
||||
float: left; |
||||
margin-left: 60px; |
||||
} |
||||
.insidemsgitemdata{ |
||||
float: right; |
||||
width: 330px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
border: 1px solid black; |
||||
margin-right: 70px; |
||||
} |
||||
|
||||
} |
||||
.otheritem{ |
||||
height: 50px; |
||||
line-height: 50px; |
||||
width: 100%; |
||||
span{ |
||||
display: block; |
||||
float: left; |
||||
} |
||||
.otheritemdataname{ |
||||
margin-left: 210px; |
||||
} |
||||
.otheritemdata{ |
||||
border: 1px solid black; |
||||
height:40px; |
||||
width:715px ; |
||||
} |
||||
} |
||||
.radiobox{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
margin-top: 38px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.bigbox{ |
||||
// margin-top: 100px; |
||||
.bigboxtitle{ |
||||
text-align: center; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
font-size: 26px; |
||||
} |
||||
.hintbox{ |
||||
width: 100%; |
||||
height: 300px; |
||||
display: flex; |
||||
justify-content: center; |
||||
.hint{ |
||||
width: 60%; |
||||
height: 200px; |
||||
border: 1px solid black; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
table { |
||||
width: 100%; |
||||
margin: 15px auto; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
|
||||
.imagesdialog{ |
||||
text-align: center; |
||||
.imagesbox{ |
||||
width:99%; |
||||
height: 755px; |
||||
border: 6px solid #cccccc; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-flow:wrap; |
||||
overflow: auto; |
||||
.imgitem{ |
||||
width: 300px; |
||||
height: 200px; |
||||
float: left; |
||||
margin-top:70px; |
||||
.img{ |
||||
width: 300px; |
||||
height: 180px; |
||||
img{ |
||||
width: 300px; |
||||
height: 160px; |
||||
cursor: pointer; |
||||
} |
||||
p{ |
||||
width: 300px; |
||||
height: 20px; |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
//重点提示 |
||||
.tips{ |
||||
width: 85%; |
||||
height: 150px; |
||||
border: 1px solid black; |
||||
border-radius: 5px; |
||||
margin: 15px auto; |
||||
text-align: center; |
||||
padding: 25px; |
||||
textarea { |
||||
resize: none; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
//图片详情弹出框样式 |
||||
.imgdialog{ |
||||
position: relative; |
||||
.imagestitle{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.imagesbox{ |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
line-height: 700px; |
||||
|
||||
img{ |
||||
height: 100%; |
||||
// width: 1280px; |
||||
} |
||||
.img1{ |
||||
transform:rotate(90deg) scale(0.55); |
||||
height: 100%; |
||||
} |
||||
.img2{ |
||||
transform:rotate(180deg); |
||||
height: 100%; |
||||
} |
||||
.img3{ |
||||
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{ |
||||
height: 50px; |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 20px;; |
||||
button{ |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
//预览图片旋转角度 |
||||
.rotateA {transform: rotate(90deg) scale(0.75);} |
||||
.rotateB {transform: rotate(180deg)} |
||||
.rotateC {transform: rotate(270deg) scale(0.75);} |
||||
//预览图片 |
||||
.previewImgBox { |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
img{ |
||||
width: auto; |
||||
height: auto; |
||||
max-width: 100%; |
||||
height: 100%;} |
||||
} |
||||
.previewImgBottom { |
||||
text-align: center; |
||||
height: 30px; |
||||
margin: 20px auto; |
||||
} |
||||
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="imgdialog"> |
||||
<div mat-dialog-title class="imagestitle">图片详情</div> |
||||
<!-- <div class="swiper-container swiper-no-swiping"> --> |
||||
<div class="swiper-container swiper-no-swiping"> |
||||
<div class="swiper-wrapper "> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583660754310&di=782b4fc4e7186c8db2fa6dfe5e0760f4&imgtype=0&src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0704%2F04e855314b2e0b342a949fd9f8698e97.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1804916093,12959926&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2496032502,3509277120&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="../../../assets/images/xxx.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img class="imgitemdefault" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" src="../../../assets/images/fengjing.jpg" alt=""></div> |
||||
</div> |
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<div class="swiper-button-prev" (click)="defaultrotateA()"></div> |
||||
<div class="swiper-button-next" (click)="defaultrotateA()"></div> |
||||
|
||||
|
||||
</div> |
||||
<div class="detailbtn"> |
||||
<button type="button" mat-icon-button (click)="rotate()"><mat-icon>refresh</mat-icon></button> |
||||
<button type="button" mat-icon-button><mat-icon>vertical_align_bottom</mat-icon></button> |
||||
</div> |
||||
</div> |
||||
@ -1,20 +1,16 @@
|
||||
<div class="imagesdialog"> |
||||
<div mat-dialog-title class="imagestitle">消防水源</div> |
||||
<div class="imagesbox"> |
||||
|
||||
<div class="imgitem" *ngFor="let item of xxx"> |
||||
<div class="img"> |
||||
<img [src]="defaultimg" alt="" title="查看大图" (click)="imgdetails()"> |
||||
<p>建筑物图片</p> |
||||
</div> |
||||
<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}" [src]="item"> |
||||
</div> |
||||
<mat-paginator |
||||
[length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="yyy()"> |
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
|
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<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> |
||||
@ -1,56 +1,49 @@
|
||||
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'; |
||||
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'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import Swiper from 'swiper'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'keysiteimgs', |
||||
templateUrl: './keysiteimgs.component.html', |
||||
styleUrls: ['./key-site.component.scss'] |
||||
}) |
||||
export class KeySiteImgs { |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<KeySiteImgs>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {} |
||||
|
||||
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(){ |
||||
const dialogRef = this.dialog.open(KeyImgDetail, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '1600px', |
||||
height:'900px', |
||||
data: {} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
|
||||
} |
||||
); |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
} |
||||
|
||||
export class KeySiteImgs { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<KeySiteImgs>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
testSwiper: Swiper; |
||||
|
||||
ngOnInit(): void { |
||||
this.allImages = this.data |
||||
} |
||||
|
||||
ngAfterViewInit() { |
||||
this.testSwiper = new Swiper('.swiper-container', { |
||||
direction: 'horizontal', |
||||
loop: false, |
||||
|
||||
// 如果需要前进后退按钮
|
||||
navigation: { |
||||
nextEl: '.swiper-button-next', |
||||
prevEl: '.swiper-button-prev', |
||||
} |
||||
}); |
||||
} |
||||
|
||||
allImages:any; //展示所有的图片
|
||||
rotationAngle:number=0; //旋转角度
|
||||
|
||||
//旋转图片
|
||||
rotate () { |
||||
this.rotationAngle = this.rotationAngle+90 |
||||
if (this.rotationAngle === 360) {this.rotationAngle = 0} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
Loading…
Reference in new issue