Browse Source

[完善]预警查看弹出框图片大小优化

beijing
邵佳豪 2 years ago
parent
commit
dd97b0fc8c
  1. 6
      src/app/pages/oil-unloading-process/anxin-img-look/anxin-img-look.component.ts
  2. 2
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
  3. 23
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

6
src/app/pages/oil-unloading-process/anxin-img-look/anxin-img-look.component.ts

@ -73,7 +73,7 @@ export class AnxinImgLookComponent implements OnInit {
} }
this.coordinate = dataArr; this.coordinate = dataArr;
this.currentCoordinate = JSON.parse(JSON.stringify(this.coordinate)); this.currentCoordinate = JSON.parse(JSON.stringify(this.coordinate));
console.log("坐标信息", this.coordinate); // console.log("坐标信息", this.coordinate);
let checkboxArr = []; let checkboxArr = [];
this.coordinate.forEach((element) => { this.coordinate.forEach((element) => {
checkboxArr.push({ id: element.id, checked: true }); checkboxArr.push({ id: element.id, checked: true });
@ -98,8 +98,8 @@ export class AnxinImgLookComponent implements OnInit {
const img = new Image(); const img = new Image();
img.src = imgBg.src; img.src = imgBg.src;
img.onload = () => { img.onload = () => {
console.log(1,this.canvasWidth) // console.log(1,this.canvasWidth)
console.log(2,this.canvasHeight) // console.log(2,this.canvasHeight)
const canvas: any = document.querySelector("#canvas"); const canvas: any = document.querySelector("#canvas");
this.ctx = canvas.getContext("2d"); this.ctx = canvas.getContext("2d");
const cWidth = canvas.width, const cWidth = canvas.width,

2
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

@ -49,7 +49,7 @@
</div> </div>
<div [hidden]="!(selectedType == 'video')" class="vediobox"> <div [hidden]="!(selectedType == 'video')" class="vediobox">
<ng-container *ngIf="vedioUrl; else elseTemplate3"> <ng-container *ngIf="vedioUrl; else elseTemplate3">
<video crossorign="anonymous" controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video> <video crossorign="anonymous" controls [src]="vedioUrl"></video>
</ng-container> </ng-container>
<ng-template #elseTemplate3> <ng-template #elseTemplate3>
暂无视频 暂无视频

23
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

@ -1,6 +1,6 @@
.box { .box {
width: 100%; width: 100%;
min-height: 715px; // min-height: 715px;
// overflow-y: auto; // overflow-y: auto;
color: #fff; color: #fff;
display: flex; display: flex;
@ -94,6 +94,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
height: 550px;
.imgbox { .imgbox {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
@ -106,9 +108,11 @@
position: relative; position: relative;
// margin-bottom: 12px; // margin-bottom: 12px;
flex-direction: column; flex-direction: column;
iframe { iframe {
flex: 1; flex: 1;
} }
#canvas { #canvas {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -117,29 +121,24 @@
} }
img { img {
max-width: 100%; height: 550px;
max-height: 100%; width: auto;
}
}
.imgboxAX {
img {
width: 100%;
height: auto;
} }
} }
.vediobox { .vediobox {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 550px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding: 0 12px; padding: 0 12px;
video { video {
max-width: 100%; height: 550px;
max-height: 100%; width: auto;
} }
} }
} }

Loading…
Cancel
Save