+
- ![]()
+ ![]()
+
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
index ee16da5..e31644a 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
@@ -1,6 +1,6 @@
.box {
width: 100%;
- height: 715px;
+ min-height: 715px;
// overflow-y: auto;
color: #fff;
display: flex;
@@ -76,16 +76,45 @@
padding: 0 12px;
}
+.typecheckbox {
+ box-sizing: border-box;
+ padding: 0 12px;
+ margin-bottom: 6px;
+
+ label {
+ color: #fff;
+ }
+
+}
+
.content {
flex: 1;
overflow: hidden;
-
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
.imgbox {
+ flex: 1;
+ box-sizing: border-box;
+ padding: 0 12px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
+ // margin-bottom: 12px;
+ flex-direction: column;
+ iframe{
+ flex: 1;
+ }
+ #canvas {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
img {
max-width: 100%;
@@ -93,6 +122,13 @@
}
}
+ .imgboxAX {
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+
.vediobox {
width: 100%;
height: 100%;
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
index b282461..f0f8339 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
@@ -42,7 +42,73 @@ export class GetOutOfLineDetailsComponent implements OnInit {
isLicenseWarning = false;
isSubmit;
+
+ // 标注安信框选区
+ isAnxin = false;
+ coordinate = []; //完整坐标点信息
+ currentCoordinate = []; //当前需要标绘坐标点信息
+ legendList: any = [];
+ typeArr = [
+ { id: 0, name: "工装", color: "#91CCFF" },
+ { id: 2, name: "便装", color: "#46DFFF" },
+ { id: 2, name: "抽烟", color: "#36A2FF" },
+ { id: 3, name: "打电话", color: "#FF6181" },
+ { id: 4, name: "隔离锥", color: "#000000" },
+ { id: 5, name: "手持灭火器", color: "#ffffff" },
+ { id: 6, name: "推车灭火器", color: "#B4C3FF" },
+ { id: 7, name: "静电接地", color: "#FF9963" },
+ { id: 8, name: "输油管(连接)", color: "#5A9CFF" },
+ { id: 9, name: "输油管连接车", color: "#4BFFD4" },
+ { id: 10, name: "输油管连接卸油口", color: "red" },
+ { id: 11, name: "卸油口盖子", color: "green" },
+ { id: 12, name: "卸油车", color: "yellow" },
+ { id: 13, name: "私家车", color: "black" },
+ { id: 14, name: "断开的卸油管", color: "blue" },
+ ];
+ userName; //登录账号的用户名
+ isShowAxOtherRegion; //控制哪些用户可以看到ax全部
ngOnInit(): void {
+
+ // 安信框选
+ this.userName = JSON.parse(sessionStorage.getItem("userdata")).userName;
+ if (this.userName === "admin" || this.userName === "superadmin") {
+ this.isShowAxOtherRegion = true;
+ } else {
+ this.isShowAxOtherRegion = false;
+ }
+ if (
+ this.data.violatedItemSnapshot &&
+ this.data.violation.eventSystemName.indexOf("证照") == -1 &&
+ this.data.violation.eventSystemName.indexOf("设备") == -1
+ ) {
+ this.isAnxin = true;
+ }
+ if (this.isAnxin) {
+ let dataArr = [];
+ for (const key in JSON.parse(this.data.violatedItemSnapshot)) {
+ const element = JSON.parse(this.data.violatedItemSnapshot)[key];
+ dataArr.push(element);
+ }
+ this.coordinate = dataArr;
+ this.currentCoordinate = JSON.parse(JSON.stringify(this.coordinate));
+ console.log("坐标信息", this.coordinate);
+
+ let checkboxArr = [];
+ this.coordinate.forEach((element) => {
+ checkboxArr.push({ id: element.id, checked: true });
+ });
+
+ for (let i = 0; i < checkboxArr.length; i++) {
+ if (!this.legendList.some((e) => e.id == checkboxArr[i].id))
+ this.legendList.push(checkboxArr[i]);
+ }
+ setTimeout(() => {
+ this.canvasLabel();
+ }, 0);
+ }
+
+ // 安信框选
+
console.log("预警信息", this.data);
if (this.data.violation.violationType == "证照资质") {
@@ -106,6 +172,122 @@ export class GetOutOfLineDetailsComponent implements OnInit {
this.isMisinformation = false;
}
}
+
+ canvasWidth = 0;
+ canvasHeight = 0;
+ ctx;
+ canvasLabel() {
+ let imgBg: any = document.getElementById("img");
+ imgBg.onload = () => {
+ this.canvasWidth = imgBg.offsetWidth;
+ this.canvasHeight = imgBg.offsetHeight;
+ const img = new Image();
+ img.src = imgBg.src;
+ img.onload = () => {
+ const canvas: any = document.querySelector("#canvas");
+ this.ctx = canvas.getContext("2d");
+ const cWidth = canvas.width,
+ cHeight = canvas.height;
+ // 以图画底
+ this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+ this.strokeRect(this.currentCoordinate);
+ };
+ };
+ }
+
+ strokeRect(data) {
+ data.forEach((item) => {
+ let startPoint = [
+ Math.round(this.canvasWidth * item.box[0]),
+ Math.round(this.canvasHeight * item.box[1]),
+ ];
+ let endPoint = [
+ Math.round(this.canvasWidth * item.box[2]),
+ Math.round(this.canvasHeight * item.box[3]),
+ ];
+ if (this.isShowAxOtherRegion) {
+ this.ctx.strokeStyle = this.typeArr[item.id].color;
+ this.ctx.lineWidth = 3;
+ this.ctx.strokeRect(
+ startPoint[0],
+ startPoint[1],
+ endPoint[0] - startPoint[0],
+ endPoint[1] - startPoint[1]
+ );
+ //如果当前矩形区域为错误区域，则左上角增加色块
+ if (item.error) {
+ this.ctx.fillStyle = this.typeArr[item.id].color;
+ this.ctx.fillRect(startPoint[0], startPoint[1], 10, 10);
+ }
+ this.ctx.fillStyle = this.typeArr[item.id].color;
+ this.ctx.font = "16px Verdana";
+ let name = "";
+ if (this.isShowAxOtherRegion) {
+ name = this.typeArr[item.id].name + item.scores;
+ } else {
+ name = this.typeArr[item.id].name;
+ }
+ this.ctx.fillText(
+ name,
+ startPoint[0],
+ startPoint[1] < 20 || item.id === 2 || item.id === 3
+ ? endPoint[1] + 18
+ : startPoint[1] - 5
+ );
+ } else {
+ if (item.error) {
+ this.ctx.strokeStyle = this.typeArr[item.id].color;
+ this.ctx.lineWidth = 3;
+ this.ctx.strokeRect(
+ startPoint[0],
+ startPoint[1],
+ endPoint[0] - startPoint[0],
+ endPoint[1] - startPoint[1]
+ );
+ this.ctx.fillStyle = this.typeArr[item.id].color;
+ this.ctx.fillRect(startPoint[0], startPoint[1], 10, 10);
+ this.ctx.fillStyle = this.typeArr[item.id].color;
+ this.ctx.font = "16px Verdana";
+ let name = this.typeArr[item.id].name;
+ // this.ctx.fillText(
+ // name,
+ // startPoint[0],
+ // startPoint[1] < 20 || item.id === 2 || item.id === 3
+ // ? endPoint[1] + 18
+ // : startPoint[1] - 5
+ // );
+ }
+ }
+ });
+ }
+ typeChange(item) {
+ if (item.checked) {
+ this.coordinate.forEach((element) => {
+ if (element.id === item.id) {
+ this.currentCoordinate.push(element);
+ }
+ });
+ } else {
+ this.currentCoordinate = this.currentCoordinate.filter(
+ (v) => v.id !== item.id
+ );
+ }
+ this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+ this.strokeRect(this.currentCoordinate);
+ }
+
+ downImg() {
+ const canvasDom: any = document.querySelector("#canvas");
+ const imageData = canvasDom.toDataURL("image/png"); //返回base64的URL
+ const elink = document.createElement("a");
+ elink.download = "图片";
+ elink.style.display = "none";
+ elink.href = imageData;
+ document.body.appendChild(elink);
+ elink.click();
+ URL.revokeObjectURL(elink.href); //释放URL对象
+ document.body.removeChild(elink);
+ }
fileList = [];
isLoadingSave: boolean = false;