29 changed files with 1068 additions and 49 deletions
@ -1 +1,169 @@
|
||||
<p>fire-fighting-device works!</p> |
||||
<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"> |
||||
|
||||
<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="tablebox"> |
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
|
||||
<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">{{element.realName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="mainmsg"> |
||||
<th mat-header-cell *matHeaderCellDef>主要情况</th> |
||||
<td mat-cell *matCellDef="let element">{{element.organizationName}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
|
||||
<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">查看照片</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="mainmsg"> |
||||
<th mat-header-cell *matHeaderCellDef>主要情况</th> |
||||
<td mat-cell *matCellDef="let element">{{element.organizationName}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
|
||||
<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> |
||||
|
||||
<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> |
||||
</div> |
||||
@ -0,0 +1,186 @@
|
||||
.tabbar{ |
||||
height: 60px; |
||||
background: yellow; |
||||
line-height: 60px; |
||||
margin-bottom: 20px; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//图片详情弹出框样式 |
||||
.imgdialog{ |
||||
position: relative; |
||||
.imagestitle{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.imagesbox{ |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
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%; |
||||
} |
||||
|
||||
} |
||||
.detailbtn{ |
||||
height: 50px; |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 20px;; |
||||
button{ |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,13 @@
|
||||
<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> |
||||
@ -0,0 +1,44 @@
|
||||
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){ |
||||
|
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="imgdialog"> |
||||
<div mat-dialog-title class="imagestitle">图片详情</div> |
||||
<!-- <div class="swiper-container swiper-no-swiping"> --> |
||||
<div class="swiper-container"> |
||||
<div class="swiper-wrapper "> |
||||
<div class="swiper-slide imagesbox"><img [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270}" 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 [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270}" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1804916093,12959926&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270}" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2496032502,3509277120&fm=26&gp=0.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> |
||||
@ -0,0 +1,54 @@
|
||||
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 Swiper from 'swiper'; |
||||
@Component({ |
||||
selector: 'imgsdatadetail', |
||||
templateUrl: './imgsdatadetail.component.html', |
||||
styleUrls: ['./fire-fighting-device.component.scss'] |
||||
}) |
||||
export class ImgsDataDetail { |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImgsDataDetail>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
allunittype:any |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
ngOnInit(): void { |
||||
setTimeout(() => { |
||||
var mySwiper:any = new Swiper ('.swiper-container', { |
||||
|
||||
// 如果需要前进后退按钮
|
||||
navigation: { |
||||
nextEl: '.swiper-button-next', |
||||
prevEl: '.swiper-button-prev', |
||||
} |
||||
})
|
||||
|
||||
},1); |
||||
} |
||||
ngAfterViewInit(): void{ |
||||
|
||||
} |
||||
//旋转图片角度
|
||||
rotateA = 0 |
||||
rotate(){ |
||||
this.rotateA += 90 |
||||
if(this.rotateA == 360){ |
||||
this.rotateA = 0 |
||||
} |
||||
} |
||||
defaultrotateA(){ |
||||
this.rotateA = 0 |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
} |
||||
} |
||||
|
||||
@ -1 +1,57 @@
|
||||
<p>key-site works!</p> |
||||
<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"> |
||||
|
||||
<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> |
||||
|
||||
<div class="bigbox"> |
||||
<div class="bigboxtitle">重点提示</div> |
||||
<div class="hintbox"> |
||||
<div class="hint"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
</div> |
||||
@ -0,0 +1,208 @@
|
||||
.tabbar{ |
||||
height: 60px; |
||||
background: yellow; |
||||
line-height: 60px; |
||||
margin-bottom: 20px; |
||||
} |
||||
.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; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//图片详情弹出框样式 |
||||
.imgdialog{ |
||||
position: relative; |
||||
.imagestitle{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.imagesbox{ |
||||
width: 1500px; |
||||
height: 700px; |
||||
text-align: center; |
||||
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%; |
||||
} |
||||
|
||||
} |
||||
.detailbtn{ |
||||
height: 50px; |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 20px;; |
||||
button{ |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="imgdialog"> |
||||
<div mat-dialog-title class="imagestitle">图片详情</div> |
||||
<!-- <div class="swiper-container swiper-no-swiping"> --> |
||||
<div class="swiper-container"> |
||||
<div class="swiper-wrapper "> |
||||
<div class="swiper-slide imagesbox"><img [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270}" 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 [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270}" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1804916093,12959926&fm=26&gp=0.jpg" alt=""></div> |
||||
<div class="swiper-slide imagesbox"><img [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270}" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2496032502,3509277120&fm=26&gp=0.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> |
||||
@ -0,0 +1,54 @@
|
||||
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 Swiper from 'swiper'; |
||||
@Component({ |
||||
selector: 'keyimgdetail', |
||||
templateUrl: './keyimgdetail.component.html', |
||||
styleUrls: ['./key-site.component.scss'] |
||||
}) |
||||
export class KeyImgDetail { |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<KeyImgDetail>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
allunittype:any |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
ngOnInit(): void { |
||||
setTimeout(() => { |
||||
var mySwiper:any = new Swiper ('.swiper-container', { |
||||
|
||||
// 如果需要前进后退按钮
|
||||
navigation: { |
||||
nextEl: '.swiper-button-next', |
||||
prevEl: '.swiper-button-prev', |
||||
} |
||||
})
|
||||
|
||||
},1); |
||||
} |
||||
ngAfterViewInit(): void{ |
||||
|
||||
} |
||||
//旋转图片角度
|
||||
rotateA = 0 |
||||
rotate(){ |
||||
this.rotateA += 90 |
||||
if(this.rotateA == 360){ |
||||
this.rotateA = 0 |
||||
} |
||||
} |
||||
defaultrotateA(){ |
||||
this.rotateA = 0 |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,13 @@
|
||||
<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> |
||||
@ -0,0 +1,44 @@
|
||||
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 { KeyImgDetail } from './keyimgdetail.component' |
||||
@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 = [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(KeyImgDetail, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '1600px', |
||||
height:'900px', |
||||
data: {} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
|
||||
} |
||||
); |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
} |
||||
} |
||||
|
||||
@ -1 +0,0 @@
|
||||
<p>uploading-cad works!</p> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue