ly.fan
/
xy-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

标记告警

Browse Source
jc
fanluyan 1 year ago
parent a4a7fdaaaa
commit 85423ae3ad
2 changed files with 213 additions and 54 deletions
Show Stats Download Patch File Download Diff File

250
src/views/realTimeMonitor/components/carouselChart.vue
Unescape Escape View File

@ -24,10 +24,11 @@
class="bigPic"
v-else-if="currentPicPath && mediaType == 0"
v-loading="picLoading"
@click="handleBigPicbox(currentPicPath)"
>
<!-- :preview-src-list="srcList" -->
<el-image
:src="currentPicPath + '!1366x768'"
:preview-src-list="srcList"
@load="loadImage"
@error="setDefaultImage"
ref="picJpg"
@ -173,6 +174,25 @@
</div>
</div>
</div>
<!-- 点击出现大图 -->
<div v-if="showBigpic" class="showPic" @click="closePic($event)">
<div class="picboxI">
<img
id="bigimg2"
ref="bigimgref"
class="maskPic img"
:src="bigImgPath"
width="100%"
height="100%"
/>
<!-- <canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig2"></canvas> -->
<canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig"></canvas>
</div>
<div class="viewClose" @click="closePic($event)">
<i class="el-icon-close"></i>
</div>
</div>
</div>
</template>
@ -215,24 +235,10 @@ export default {
markEnable: "", //是否显示
recArrs: [],
picDataAlarm: [],
labelMarkArrs: [
{
centerX: 0.5709497206703911,
centerY: 0.3220675944333996,
width: 0.18324022346368715,
height: 0.1908548707753479,
type: 1,
name: "塔吊",
},
{
centerX: 0.3,
centerY: 0.3856858846918489,
width: 0.17318435754189945,
height: 0.2584493041749503,
type: 0,
name: "挖掘机",
},
],
labelMarkArrs: [],
//大图
showBigpic: false,
};
},
mounted() {
@ -321,7 +327,6 @@ export default {
drawline() {
this.canvas = this.$refs.myCanvas;
this.imgpic = this.$refs.picJpg;
this.canvas.width = this.imgpic.imageWidth; //设置画布大小
this.canvas.height = this.imgpic.imageHeight; //设置画布大小
this.ctx = this.canvas.getContext("2d");
@ -444,7 +449,6 @@ export default {
//绘制大图告警区域
drawlineBig(data) {
console.log(data);
this.canvas = document.getElementById("alarmCanvas");
this.imgpic = document.getElementById("alarmPic");
console.log(document.getElementById("alarmCanvas"));
@ -487,9 +491,9 @@ export default {
if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
this.ctx.beginPath();
this.ctx.lineWidth = 2; // 矩形框的线条宽度
this.ctx.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色
this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
// 设置填充样式
this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
// this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
this.ctx.strokeRect(
this.recArrs[i].x,
this.recArrs[i].y,
@ -506,7 +510,7 @@ export default {
if (this.recArrs[i].text) {
this.ctx.font = "100 18px 微软雅黑";
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = "rgb(255,0,0)";
this.ctx.strokeStyle = "rgb(255,255,0)";
this.ctx.strokeText(
this.recArrs[i].text,
this.recArrs[i].x +
@ -519,30 +523,118 @@ export default {
}
}
}
// // 绘制矩形
// 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 = "14px 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();
},
//绘制大图告警区域
drawlineBig2(data) {
console.log(data);
this.canvas = document.getElementById("bigCanvas2");
this.imgpic = document.getElementById("bigimg2");
console.log(document.getElementById("alarmCanvas"));
console.log(document.getElementById("bigimg2"));
console.log(this.canvas);
console.log(this.imgpic);
this.textInfo = data.enname;
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;
this.labelMarkArrs = data.alarmlist;
this.recArrs = [];
for (var i = 0; i < this.labelMarkArrs.length; i++) {
console.log(this.labelMarkArrs[i]);
//获取的数据转化一下
this.recArrs.push({
x:
this.labelMarkArrs[i].x * this.canvas.width -
(this.labelMarkArrs[i].width * this.canvas.width) / 2,
y:
this.labelMarkArrs[i].y * this.canvas.height -
(this.labelMarkArrs[i].height * this.canvas.height) / 2,
w: this.labelMarkArrs[i].width * this.canvas.width,
h: this.labelMarkArrs[i].height * this.canvas.height,
text:
this.labelMarkArrs[i].enname +
"&amp;nbsp;&amp;nbsp;" +
this.labelMarkArrs[i].prob +
"%",
type: this.labelMarkArrs[i].label,
});
}
console.log(this.recArrs);
if (!this.recArrs.length) return;
for (var i = 0; i < this.recArrs.length; i++) {
// >2的判断是为了防止误触画出来的数据
if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
this.ctx.beginPath();
this.ctx.lineWidth = 1; // 矩形框的线条宽度
this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
// 设置填充样式
// this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
this.ctx.strokeRect(
this.recArrs[i].x,
this.recArrs[i].y,
this.recArrs[i].w,
this.recArrs[i].h
); // 矩形框
// this.ctx.fillRect(
// this.recArrs[i].x,
// this.recArrs[i].y,
// this.recArrs[i].w,
// this.recArrs[i].h
// ); // 填充矩形
// 如果有文本信息，填充文本信息
if (this.recArrs[i].text) {
this.ctx.font = "100 16px 微软雅黑";
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = "rgb(255,255,0)";
this.ctx.strokeText(
this.recArrs[i].text,
this.recArrs[i].x +
this.recArrs[i].w / 2 -
(this.recArrs[i].text.length / 2) * 16,
this.recArrs[i].y - 20 < 0
? this.recArrs[i].y + this.recArrs[i].h + 20
: this.recArrs[i].y - 10
);
}
}
}
this.ctx.closePath();
this.ctx.stroke();
},
//放大图
handleBigPicbox(val) {
console.log(val);
this.showBigpic = true;
this.bigImgPath = val;
setTimeout(() => {
this.$nextTick(() => {
this.drawlineBig2(this.picDataAlarm);
});
}, 100);
},
closePic(e) {
console.log(e);
var btn = this.$refs.bigimgref;
console.log(btn);
if (btn) {
if (!btn.contains(event.target)) {
//按钮.app-download以外的区域
this.zoomD = 1;
this.showBigpic = false;
}
}
//
// this.showBigpic = false;
},
},
};
</script>
@ -568,6 +660,7 @@ export default {
.bigPic {
width: 100%;
height: 100%;
cursor: pointer;
.el-image {
width: 100%;
height: 100%;
@ -762,5 +855,72 @@ export default {
justify-content: center;
}
}
.showPic {
position: fixed;
background-color: rgba(0, 0, 0, 50%);
bottom: 0;
left: 0;
overflow: hidden;
right: 0;
top: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: flex;
cursor: pointer;
.picboxI {
position: relative;
width: 90%;
height: 90%;
margin: auto;
animation-name: scaleDraw;
/*关键帧名称*/
animation-timing-function: ease;
/*动画的速度曲线*/
animation-iteration-count: 1;
/*动画播放的次数*/
animation-duration: 0.65s;
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
cursor: grab;
}
.mybigCanvas {
position: absolute;
// top: 0;
// left: 0;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
cursor: pointer;
pointer-events: none;
}
}
.viewClose {
-webkit-app-region: no-drag;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
height: 80px;
overflow: hidden;
position: absolute;
right: -40px;
top: -40px;
transition: background-color 0.15s;
width: 80px;
.el-icon-close {
bottom: 16px;
left: 16px;
position: absolute;
color: #fff;
font-size: 18px;
}
}
}
}
</style>

17
src/views/system/drawPic.vue
Unescape Escape View File

@ -14,10 +14,9 @@
<div class="picright">
<div class="pointBox">
<h3>
标注数据
<span>图片数量 {{ piclist.length }}</span>
<el-button type="primary" @click="savePointer">保存</el-button>
{{ piclist.length }}
</h3>
<div class="picRow">
<p
@ -746,12 +745,14 @@ export default {
</script>
<style lang="less">
.drawPicBox {
width: 100%;
height: 100%;
position: relative;
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #fff;
display: flex;
.piclist {
width: 400px;
overflow: auto;
li {
line-height: 32px;
height: 32px;
@ -777,10 +778,8 @@ export default {
line-height: 24px;
align-items: center;
display: flex;
.el-button--danger {
padding: 4px 8px;
margin-left: 14px;
span {
margin-right: 12px;
}
}
.picRow {

Write Preview
Loading…
Cancel
Save