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.currentCoordinate = JSON.parse(JSON.stringify(this.coordinate));
console.log("坐标信息", this.coordinate);
// console.log("坐标信息", this.coordinate);
let checkboxArr = [];
this.coordinate.forEach((element) => {
checkboxArr.push({ id: element.id, checked: true });
@ -98,8 +98,8 @@ export class AnxinImgLookComponent implements OnInit {
const img = new Image();
img.src = imgBg.src;
img.onload = () => {
console.log(1,this.canvasWidth)
console.log(2,this.canvasHeight)
// console.log(1,this.canvasWidth)
// console.log(2,this.canvasHeight)
const canvas: any = document.querySelector("#canvas");
this.ctx = canvas.getContext("2d");
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 [hidden]="!(selectedType == 'video')" class="vediobox">
<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-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 {
width: 100%;
min-height: 715px;
// min-height: 715px;
// overflow-y: auto;
color: #fff;
display: flex;
@ -94,6 +94,8 @@
align-items: center;
justify-content: center;
flex-direction: column;
height: 550px;
.imgbox {
flex: 1;
box-sizing: border-box;
@ -106,9 +108,11 @@
position: relative;
// margin-bottom: 12px;
flex-direction: column;
iframe {
flex: 1;
}
#canvas {
position: absolute;
left: 50%;
@ -117,29 +121,24 @@
}
img {
max-width: 100%;
max-height: 100%;
}
}
.imgboxAX {
img {
width: 100%;
height: auto;
height: 550px;
width: auto;
}
}
.vediobox {
width: 100%;
height: 100%;
min-height: 550px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 12px;
video {
max-width: 100%;
max-height: 100%;
height: 550px;
width: auto;
}
}
}

Loading…
Cancel
Save