xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

告警图片展示

Browse Source
hn2.0
fanluyan 2 years ago
parent d1ef83de14
commit 3b50cf87c0
1 changed files with 63 additions and 76 deletions
Show Stats Download Patch File Download Diff File

139
src/views/alarmHandling/index.vue
Unescape Escape View File

@ -271,18 +271,19 @@
icon="el-icon-picture-outline"
@click.stop="handlePicHistory(item)"
></el-button>
<!-- <el-button
type="primary"
:loading="btnpicloading"
@click.stop="handlePicList(item)"
>主动拍照</el-button
>
<el-button type="primary" @click.stop="handlePicHistory(item)"
>历史图片</el-button
> -->
</div>
<div class="picshow" @click="handlePicAlarm(item, index)">
<img :src="item.path + '!1366x768'" ref="picJpg" />
<div class="picshow" @click="handlePicAlarm(item)">
<img
:id="'img' + index"
:ref="'imgref' + index"
:src="item.path + '!1366x768'"
ref="picJpg"
/>
<canvas
:ref="'canvansref' + index"
:id="'canvas_' + index"
class="canvasAll"
></canvas>
</div>
<div class="caption">
<p class="infoTop">
@ -337,8 +338,14 @@
:style="{ transform: 'scale(' + zoomD + ')' }"
@mousedown="move"
>
<img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" ref="" />
<canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
<img
@load="imgOnload"
id="bigimg"
ref="bigimgref"
class="maskPic img"
:src="bigPhotoPic"
/>
<canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
</div>
<div class="viewClose" @click="closePic">
<i class="el-icon-close"></i>
@ -510,12 +517,13 @@ export default {
this.canvasloading = true;
this.canvansdata = val;
if (val.path !== "" && this.tableData.length !== 0) {
console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
this.$nextTick(() => {
this.drawline2(val);
});
setTimeout(() => {
this.$nextTick(() => {
this.drawline2(val);
});
}, 100);
}
},
closePic() {
@ -586,8 +594,17 @@ export default {
this.photoPic = res.data.list[0].path;
this.selectRow = res.data.list[0];
console.log(this.selectRow);
this.$refs.multipleTable.setCurrentRow(this.selectRow);
this.handleRowClick(this.selectRow);
if (this.tableShow) {
this.$nextTick(() => {
this.$refs.multipleTable.setCurrentRow(this.selectRow);
this.handleRowClick(this.selectRow);
});
} else {
this.$nextTick(() => {
this.drawlineListAll(this.tableData);
});
}
})
.catch((err) => {
console.log(err);
@ -662,9 +679,12 @@ export default {
//绘制大图告警区域
drawline2(data) {
console.log(data);
console.log(document.getElementById("bigCanvas"));
console.log(document.getElementById("bigimg"));
this.canvas = document.getElementById("bigCanvas");
this.imgpic = document.getElementById("bigimg");
console.log(this.canvas);
this.canvas = this.$refs.myCanvasbig;
this.imgpic = this.$refs.picJpg;
console.log(this.imgpic);
this.textInfo = data.enname;
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
@ -688,7 +708,7 @@ export default {
// this.ctx.strokeStyle = "red"; //线的颜色
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
//this.ctx.strokeRect(data.x, data.y, data.width, data.height);
this.ctx.font = "12px normal";
this.ctx.font = "14px normal";
this.ctx.fillStyle = "#ff0000";
//this.ctx.fillText(this.textInfo, top, left + 24);
//距离上面有空间
@ -700,14 +720,15 @@ export default {
this.ctx.closePath();
this.ctx.stroke();
},
//绘制所有的图片告警区域
drawlineListAll(val) {
for (let i = 0; i < val.length; i++) {
console.log(i);
console.log(this.$refs.myCanvas);
console.log(this.$refs.picJpg);
this.canvas = this.$refs.myCanvas;
this.imgpic = this.$refs.picJpg;
console.log(document.getElementById("canvas_" + i));
console.log(document.getElementById("img" + i));
this.canvas = document.getElementById("canvas_" + i);
this.imgpic = document.getElementById("img" + i);
this.textInfo = val[i].enname;
console.log(this.textInfo);
console.log(this.imgpic.offsetWidth);
@ -747,49 +768,7 @@ export default {
this.ctx.stroke();
}
},
//绘制列表大图
drawlineList(data, index) {
console.log(data);
console.log(this.$refs.myCanvasbig);
console.log(this.$refs.picJpg);
console.log("picJpg" + index);
this.canvas = this.$refs.myCanvasbig;
this.imgpic = this.$refs.picJpg;
this.textInfo = data.enname;
this.canvas.width = this.imgpic[index].offsetWidth; //设置画布大小
this.canvas.height = this.imgpic[index].offsetHeight; //设置画布大小
console.log(this.canvas.width, this.canvas.height);
this.ctx = this.canvas.getContext("2d");
this.ctx.beginPath();
//设置线条颜色，必须放在绘制之前
this.ctx.strokeStyle = "#ff0000";
// 线宽设置，必须放在绘制之前
this.ctx.lineWidth = 1;
// 绘制矩形
var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
console.log(scaleX, scaleY);
var top = data.x * scaleX,
left = data.y * scaleY,
width = data.width * scaleX,
height = data.height * scaleY;
console.log(top, left, width, height);
// this.ctx.strokeStyle = "red"; //线的颜色
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
//this.ctx.strokeRect(data.x, data.y, data.width, data.height);
this.ctx.font = "12px normal";
this.ctx.fillStyle = "#ff0000";
//this.ctx.fillText(this.textInfo, top, left + 24);
//距离上面有空间
if (left > 32) {
this.ctx.fillText(this.textInfo, top, left - 4);
} else if (this.canvas.height - left + height > 32) {
this.ctx.fillText(this.textInfo, top, height - 4);
}
this.ctx.closePath();
this.ctx.stroke();
},
//点击当前行
handleRowClick(row) {
//this.$refs.multipleTable.toggleRowSelection(row);
@ -814,7 +793,6 @@ export default {
});
}, 300);
}
this.$nextTick(() => {
this.drawline(row);
this.imgOnload();
@ -957,7 +935,14 @@ export default {
this.tableShow = !this.tableShow;
this.zoomD = 1;
if (!this.tableShow) {
this.drawlineListAll(this.tableData);
this.$nextTick(() => {
this.drawlineListAll(this.tableData);
});
} else {
this.$nextTick(() => {
this.$refs.multipleTable.setCurrentRow(this.selectRow);
this.handleRowClick(this.selectRow);
});
}
},
@ -975,16 +960,18 @@ export default {
handlePicAlarm(val, index) {
console.log(val, index);
this.current = index;
this.canvansdata = val;
this.canvasloading = true;
this.canvansdata = val;
if (val.path !== "" && this.tableData.length !== 0) {
console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
this.$nextTick(() => {
console.log("huatu");
this.drawlineList(val, index);
});
setTimeout(() => {
this.$nextTick(() => {
this.drawline2(val);
});
}, 100);
//未读变已读
if (val.isread == 0) {
setTimeout(function () {
@ -1235,7 +1222,7 @@ export default {
width: 100%;
height: 100%;
}
.myCanvas {
.canvasAll {
position: absolute;
width: 100%;
height: 100%;

Write Preview
Loading…
Cancel
Save