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

添加告警信息

Browse Source
hn2.0
fanluyan 2 years ago
parent 01c63c8de5
commit 88e7f192d6
4 changed files with 160 additions and 21 deletions
Show Stats Download Patch File Download Diff File

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

@ -1237,6 +1237,7 @@ export default {
bottom: 0px;
background: rgba(0, 0, 0, 0.5);
width: calc(100% - 12px);
z-index: 4;
.alarmInfo {
color: #fff;
}

91
src/views/pictureRotation/index.vue
Unescape Escape View File

@ -35,18 +35,6 @@
:key="'col-' + index"
>
<div class="imgList" @click="handleShowHistory(item)">
<!-- <viewer
:options="OptionssalseImg"
v-if="item.path !== null && item.path.indexOf('videos') == -1"
class="bigpic"
:style="
item.path
? 'backgroundImage:url(' + item.path + '!128x72)'
: ''
"
>
<img :src="item.path + '!1366x768'" />
</viewer> -->
<div
v-if="item.path !== null && item.path.indexOf('videos') == -1"
class="bigpic"
@ -56,7 +44,16 @@
: ''
"
>
<img :src="item.path + '!1366x768'" />
<img
:src="item.path + '!1366x768'"
:id="'img' + index"
:ref="'imgref' + index"
/>
<canvas
:ref="'canvansref' + index"
:id="'canvas_' + index"
class="canvasAll"
></canvas>
</div>
<div
class="bigpic"
@ -302,7 +299,6 @@ export default {
//获取图片
getTerminalPhotoList(channelid, date, termId) {
this.terminalPhoto = [];
this.historyPicLoading = true;
getTerminalPhotoListJoggle({
channelid: channelid,
@ -373,6 +369,7 @@ export default {
//请求数据接口方法
getPicData() {
this.loading = true;
this.picList = [];
getPictureList({
pageindex: this.page,
pagesize: this.rowNum * this.colNum,
@ -382,6 +379,9 @@ export default {
this.totalPage = res.data.totalpage;
this.total = res.data.total;
this.loading = false;
this.$nextTick(() => {
this.drawlineListAll(this.picList);
});
})
.catch((err) => {
console.log(err);
@ -430,6 +430,58 @@ export default {
}
this.isRuning = !this.isRuning;
},
//绘制所有的图片告警区域
drawlineListAll(val) {
console.log(val);
for (let i = 0; i < val.length; i++) {
if (val[i].isAlarm == 1) {
console.log(i);
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].alarmlist[0].enname;
console.log(this.textInfo);
console.log(this.imgpic.offsetWidth);
console.log(this.canvas);
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
this.canvas.height = this.imgpic.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 / val[i].alarmlist[0].photoWidth, //this.iw图片的宽
scaleY = this.canvas.height / val[i].alarmlist[0].photoHeight; //this.ih图片的高
console.log(scaleX, scaleY);
var top = val[i].alarmlist[0].x * scaleX,
left = val[i].alarmlist[0].y * scaleY,
width = val[i].alarmlist[0].width * scaleX,
height = val[i].alarmlist[0].height * scaleY;
console.log(top, left, width, height);
// this.ctx.strokeStyle = "red"; //线的颜色
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
//this.ctx.strokeRect(val[i].x, val[i].y, val[i].width, val[i].height);
this.ctx.font = "16px 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();
} else {
console.log("没有告警");
}
}
},
},
computed: {},
mounted() {
@ -516,12 +568,22 @@ export default {
width: 100%;
height: 100%;
background-size: 100% 100%;
position: relative;
}
img {
width: 100%;
height: 100%;
cursor: pointer;
}
.canvasAll {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 0;
top: 0;
pointer-events: none;
}
.picInfo {
position: absolute;
background: #169e8ca1;
@ -532,6 +594,7 @@ export default {
bottom: 0;
width: 100%;
text-align: center;
z-index: 4;
p {
margin-top: 4px;
}

74
src/views/realTimeMonitor/previewContain.vue
Unescape Escape View File

@ -19,6 +19,8 @@
<img
:src="item.path + '!1366x768'"
v-if="item.mediatype == 0 && item.path !== null"
:id="'img' + index"
:ref="'imgref' + index"
/>
<!-- 判断是否是视频mediatype=1,并且path不为空 展示图片 -->
<img
@ -30,6 +32,12 @@
v-else-if="item.mediatype == null"
src="../../assets/img/nodatapic2.jpg"
/>
<canvas
:ref="'canvansref' + index"
:id="'canvas_' + index"
class="canvasAll"
></canvas>
<div class="picInfo">
<p>
{{ item.linename }}-{{ item.towername }}-（{{
@ -88,6 +96,7 @@ export default {
this.page = page;
console.log(id, type);
this.previewLoading = true;
this.picList = [];
getTowerAndPhotoList({
id: id,
type: type,
@ -100,6 +109,9 @@ export default {
this.picList = res.data.list;
this.totalPage = res.data.totalpage;
this.total = res.data.total;
this.$nextTick(() => {
this.drawlineListAll(this.picList);
});
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
@ -116,6 +128,58 @@ export default {
this.picList = [];
this.getPicList(this.id, this.type, this.page);
},
//绘制所有的图片告警区域
drawlineListAll(val) {
console.log(val);
for (let i = 0; i < val.length; i++) {
if (val[i].isAlarm == 1) {
console.log(i);
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].alarmlist[0].enname;
console.log(this.textInfo);
console.log(this.imgpic.offsetWidth);
console.log(this.canvas);
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
this.canvas.height = this.imgpic.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 / val[i].alarmlist[0].photoWidth, //this.iw图片的宽
scaleY = this.canvas.height / val[i].alarmlist[0].photoHeight; //this.ih图片的高
console.log(scaleX, scaleY);
var top = val[i].alarmlist[0].x * scaleX,
left = val[i].alarmlist[0].y * scaleY,
width = val[i].alarmlist[0].width * scaleX,
height = val[i].alarmlist[0].height * scaleY;
console.log(top, left, width, height);
// this.ctx.strokeStyle = "red"; //线的颜色
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
//this.ctx.strokeRect(val[i].x, val[i].y, val[i].width, val[i].height);
this.ctx.font = "16px 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();
} else {
console.log("没有告警");
}
}
},
},
};
</script>
@ -154,6 +218,15 @@ export default {
width: 100%;
height: 100%;
}
.canvasAll {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 0;
top: 0;
pointer-events: none;
}
.picInfo {
position: absolute;
background: #169e8ca1;
@ -164,6 +237,7 @@ export default {
bottom: 0;
width: 100%;
text-align: center;
z-index: 4;
.timeinfo {
margin-top: 4px;
margin-bottom: 4px;

5
src/views/realTimeSearch/index.vue
Unescape Escape View File

@ -1021,12 +1021,14 @@ export default {
console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
if (val.isAlarm == 1) {
setTimeout(() => {
this.$nextTick(() => {
this.drawline2(val);
});
}, 100);
}
}
},
//关闭大图
closePic() {
@ -1145,8 +1147,7 @@ export default {
this.ctx.closePath();
this.ctx.stroke();
} else {
this.canvas = document.getElementById("canvas_" + i);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
console.log("没有告警");
}
}
},

Write Preview
Loading…
Cancel
Save