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

添加告警

Browse Source
hn2.0
fanluyan 2 years ago
parent 6278b80d1b
commit 01c63c8de5
6 changed files with 1352 additions and 70 deletions
Show Stats Download Patch File Download Diff File

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

@ -262,6 +262,7 @@
@click.stop="handlePicHistory(item)"
></el-button>
</div>
<div class="picshow" @click="handlePicAlarm(item)">
<img
v-if="item.path == '' || null"
@ -364,6 +365,7 @@ import {
readAlarm,
} from "@/utils/api/index";
import historyimg from "./components/historyimg.vue";
import moment from "moment";
export default {
components: {
@ -578,7 +580,7 @@ export default {
getAlarmList(this.formdata)
.then((res) => {
this.loading = false;
this.tableData = res.data.list;
this.tableData = res.data.list.filter((item) => item.path);
this.total = res.data.total;
this.photoPic = res.data.list[0].path;
this.selectRow = res.data.list[0];
@ -599,6 +601,7 @@ export default {
console.log(err);
});
},
//查询
onSubmit() {
if (this.formdata.starttime > this.formdata.endtime) {

178
src/views/components/carouselChart.vue
Unescape Escape View File

@ -26,10 +26,11 @@
class="nosee"
:style="'backgroundImage:url(' + bigPicPath + ')'"
></div>
<div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
<img ref="picJpg" class="animImg" :src="bigPicPath" />
<div class="bigimgView" @click="handleBigPicbox(bigArr, bigPicPath)">
<img id="bigimg" ref="picJpg" class="animImg" :src="bigPicPath" />
</div>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<canvas id="bigCanvas" class="myCanvas2" ref="myCanvasbig"></canvas>
<!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
</div>
<div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
@ -102,6 +103,7 @@
: item.channelName
}}</span
>
<span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
</p>
</div>
<div
@ -182,12 +184,13 @@
>
<img
@load="imgOnload"
id="bigimg"
id="bigimg2"
ref="bigimgref"
class="maskPic img"
:src="bigImgPath"
/>
<!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
<!-- <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>
@ -242,17 +245,27 @@ export default {
zoomD: 1,
canvasloading: false,
bigImgPath: "",
//告警原因
alarmMark: true,
textInfo: "",
alarmList: [],
bigArr: "",
};
},
mounted() {
console.log(this.terminalPhoto);
this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.bigArr = this.terminalPhoto[0];
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
console.log(this.fiveList);
//this.alarmList = this.fiveList[0].alarmlist;
this.alarmList = this.fiveList[0].alarmlist;
console.log(this.alarmList[0]);
this.drawlineBig(this.alarmList[0]);
//获取points
getCoordinate({
channelId:
@ -275,9 +288,9 @@ export default {
watch: {
terminalPhoto: function (newVal, oldVal) {
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
//this.drawlineBig(this.terminalPhoto[0].alarmList[0])
},
},
created() {},
@ -376,11 +389,18 @@ export default {
this.canvasloading = false;
},
//放大图
handleBigPicbox(val) {
handleBigPicbox(bigArr, val) {
console.log(val);
console.log(bigArr);
//this.canvasloading = true;
this.showBigpic = true;
this.bigImgPath = val.substring(0, val.length - 9);
this.alarmList = bigArr.alarmlist;
setTimeout(() => {
this.$nextTick(() => {
this.drawlineBig2(this.alarmList[0]);
});
}, 100);
},
closePic(e) {
console.log(e);
@ -455,15 +475,108 @@ export default {
(this.page - 1) * this.pagesize,
this.page * this.pagesize
);
this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
this.bigArr = this.fiveList[this.activeSmall];
this.videopath = this.fiveList[this.activeSmall].thumb;
if (this.fiveList[this.activeSmall].isAlarm == 1) {
console.log("告警");
this.alarmList = this.fiveList[this.activeSmall].alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
},
//绘制大图告警区域
drawlineBig(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);
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;
// 绘制矩形
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);
console.log(document.getElementById("bigCanvas2"));
console.log(document.getElementById("bigimg"));
this.canvas = document.getElementById("bigCanvas2");
this.imgpic = 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;
// 绘制矩形
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();
},
//大图点击左侧切换图片
leftClick() {
this.bigNum--; //执行下一张
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
@ -473,6 +586,15 @@ export default {
}
this.mediaType = this.fiveList[this.bigNum].mediaType;
this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
this.bigArr = this.fiveList[this.activeSmall];
if (this.fiveList[this.bigNum].isAlarm == 1) {
console.log("告警");
this.alarmList = this.fiveList[this.bigNum].alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
console.log(this.fiveList[this.bigNum]);
getCoordinate({
channelId: this.fiveList[this.bigNum].channelId,
@ -501,6 +623,15 @@ export default {
}
this.mediaType = this.fiveList[this.bigNum].mediaType;
this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
this.bigArr = this.fiveList[this.activeSmall];
if (this.fiveList[this.bigNum].isAlarm == 1) {
console.log("告警");
this.alarmList = this.fiveList[this.bigNum].alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
getCoordinate({
channelId: this.fiveList[this.bigNum].channelId,
needPic: "1",
@ -523,6 +654,15 @@ export default {
this.bigNum = index;
this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
this.bigArr = row;
if (row.isAlarm == 1) {
this.alarmList = row.alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
// this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
@ -678,6 +818,17 @@ export default {
height: 100%;
cursor: pointer;
z-index: 2;
pointer-events: none;
}
.myCanvas2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 3;
pointer-events: none;
}
}
img {
@ -760,6 +911,10 @@ export default {
text-align: center;
color: #333;
}
.alarmSpan {
color: #f00;
font-weight: bold;
}
.videoicon {
position: absolute;
top: 73%;
@ -851,12 +1006,11 @@ export default {
img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
cursor: grab;
}
.myCanvas {
.mybigCanvas {
position: absolute;
// top: 0;
// left: 0;

233
src/views/components/carouselChartmore.vue
Unescape Escape View File

@ -26,10 +26,11 @@
class="nosee"
:style="'backgroundImage:url(' + bigPicPath + ')'"
></div>
<div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
<img ref="picJpg" class="animImg" :src="bigPicPath" />
<div class="bigimgView" @click="handleBigPicbox(bigArr, bigPicPath)">
<img id="bigimg" ref="picJpg" class="animImg" :src="bigPicPath" />
</div>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<canvas id="bigCanvas" class="myCanvas2" ref="myCanvasbig"></canvas>
<!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
</div>
<div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
@ -102,6 +103,7 @@
: item.channelName
}}</span
>
<span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
</p>
</div>
<div
@ -182,12 +184,13 @@
>
<img
@load="imgOnload"
id="bigimg"
id="bigimg2"
ref="bigimgref"
class="maskPic img"
:src="bigImgPath"
/>
<!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
<!-- <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>
@ -242,17 +245,27 @@ export default {
zoomD: 1,
canvasloading: false,
bigImgPath: "",
//告警原因
alarmMark: true,
textInfo: "",
alarmList: [],
bigArr: "",
};
},
mounted() {
console.log(this.terminalPhoto);
this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.bigArr = this.terminalPhoto[0];
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
console.log(this.fiveList);
//this.alarmList = this.fiveList[0].alarmlist;
this.alarmList = this.fiveList[0].alarmlist;
console.log(this.alarmList[0]);
this.drawlineBig(this.alarmList[0]);
//获取points
getCoordinate({
channelId:
@ -275,9 +288,9 @@ export default {
watch: {
terminalPhoto: function (newVal, oldVal) {
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
//this.drawlineBig(this.terminalPhoto[0].alarmList[0])
},
},
created() {},
@ -376,11 +389,18 @@ export default {
this.canvasloading = false;
},
//放大图
handleBigPicbox(val) {
handleBigPicbox(bigArr, val) {
console.log(val);
console.log(bigArr);
//this.canvasloading = true;
this.showBigpic = true;
this.bigImgPath = val.substring(0, val.length - 9);
this.alarmList = bigArr.alarmlist;
setTimeout(() => {
this.$nextTick(() => {
this.drawlineBig2(this.alarmList[0]);
});
}, 100);
},
closePic(e) {
console.log(e);
@ -455,49 +475,128 @@ export default {
(this.page - 1) * this.pagesize,
this.page * this.pagesize
);
this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
this.bigArr = this.fiveList[this.activeSmall];
this.videopath = this.fiveList[this.activeSmall].thumb;
if (this.fiveList[this.activeSmall].isAlarm == 1) {
console.log("告警");
this.alarmList = this.fiveList[this.activeSmall].alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
console.log("清空");
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
},
//点击小图变成大图
handleBigpic(row, index) {
console.log(row, index);
console.log();
this.activeSmall = index;
this.bigNum = index;
this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
// this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
needPic: "1",
termId: row.termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
// this.drawline();
})
.catch((err) => {});
//绘制大图告警区域
drawlineBig(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);
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;
// 绘制矩形
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);
console.log(document.getElementById("bigCanvas2"));
console.log(document.getElementById("bigimg"));
this.canvas = document.getElementById("bigCanvas2");
this.imgpic = 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;
// 绘制矩形
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();
},
//大图点击左侧切换图片
leftClick() {
this.bigNum--; //执行下一张
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
if (this.activeSmall < 0) {
this.activeSmall = 9;
this.activeSmall = 4;
this.smallLeftClick();
}
this.mediaType = this.fiveList[this.bigNum].mediaType;
this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
console.log(this.terminalPhoto[this.bigNum]);
this.bigArr = this.fiveList[this.activeSmall];
if (this.fiveList[this.bigNum].isAlarm == 1) {
console.log("告警");
this.alarmList = this.fiveList[this.bigNum].alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
console.log(this.fiveList[this.bigNum]);
getCoordinate({
channelId: this.fiveList[this.bigNum].channelId,
needPic: "1",
@ -514,16 +613,26 @@ export default {
},
//点击右侧切换图片
rightClick() {
console.log("点击切换分页", this.fiveList);
this.bigNum++; //执行下一张
this.activeSmall++;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
if (this.activeSmall > 9) {
if (this.activeSmall > 4) {
this.activeSmall = 0;
console.log(this.activeSmall);
this.smallRightClick();
}
this.mediaType = this.fiveList[this.bigNum].mediaType;
this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
this.bigArr = this.fiveList[this.activeSmall];
if (this.fiveList[this.bigNum].isAlarm == 1) {
console.log("告警");
this.alarmList = this.fiveList[this.bigNum].alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
getCoordinate({
channelId: this.fiveList[this.bigNum].channelId,
needPic: "1",
@ -538,13 +647,45 @@ export default {
})
.catch((err) => {});
},
//点击小图变成大图
handleBigpic(row, index) {
console.log(row);
console.log();
this.activeSmall = index;
this.bigNum = index;
this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
this.bigArr = row;
if (row.isAlarm == 1) {
this.alarmList = row.alarmlist;
this.drawlineBig(this.alarmList[0]);
} else {
console.log("清空");
this.canvas = document.getElementById("bigCanvas");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
// this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
needPic: "1",
termId: row.termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
// this.drawline();
})
.catch((err) => {});
},
//点击小图切换左侧
smallLeftClick() {
this.activeSmall = 0;
this.bigNum = 0;
console.log("点击了左侧");
this.page--;
if (this.page < 1) {
this.isshowArrow = false;
@ -679,6 +820,17 @@ export default {
height: 100%;
cursor: pointer;
z-index: 2;
pointer-events: none;
}
.myCanvas2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 3;
pointer-events: none;
}
}
img {
@ -761,6 +913,10 @@ export default {
text-align: center;
color: #333;
}
.alarmSpan {
color: #f00;
font-weight: bold;
}
.videoicon {
position: absolute;
top: 73%;
@ -852,12 +1008,11 @@ export default {
img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
cursor: grab;
}
.myCanvas {
.mybigCanvas {
position: absolute;
// top: 0;
// left: 0;

108
src/views/components/imgCanvans.vue
Unescape Escape View File

@ -0,0 +1,108 @@
<template>
<div class="imgCanvansDiv">
<img
:src="imageObj[index].path"
:ref="'imgref' + index"
:id="'img' + index"
/>
<canvas
:ref="'canvansref' + index"
:id="'canvas_' + index"
class="canvasAll"
></canvas>
</div>
</template>
<script>
export default {
props: {
imageObj: {
type: Array,
default: () => [],
},
index: {
type: Number,
default: () => "",
},
},
data() {
return {
textInfo: "",
};
},
mounted() {
this.$nextTick(() => {
this.drawlineListAll(this.imageObj);
});
},
methods: {
//绘制所有的图片告警区域
drawlineListAll(val) {
for (let i = 0; i < val.length; i++) {
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].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].photoWidth, //this.iw图片的宽
scaleY = this.canvas.height / val[i].photoHeight; //this.ih图片的高
console.log(scaleX, scaleY);
var top = val[i].x * scaleX,
left = val[i].y * scaleY,
width = val[i].width * scaleX,
height = val[i].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();
}
},
},
};
</script>
<style lang="less">
.imgCanvansDiv {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
}
.canvasAll {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 0;
top: 0;
pointer-events: none;
}
}
</style>

13
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -395,7 +395,20 @@ export default {
this.$refs.tree.filter(val);
console.log(this.$refs.tree);
},
zztermId: {
handler(newVal, oldVal) {
console.log("我改变了");
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
this.btnpicloading = false;
this.btnvideoloading = false;
},
deep: true,
immediate: true,
},
},
computed: {},
mounted() {
this.dragControllerDiv();

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

@ -114,16 +114,20 @@
v-for="(item, index) in picList"
:key="index"
>
<viewer
:options="OptionssalseImg"
class="bigpic"
v-if="item.path.indexOf('videos') == -1"
>
<img
:src="item.path + '!1366x768'"
:class="'bigpath' + index"
@click="showbigpicPath(item, index)"
/>
<div class="bigpic" v-if="item.path.indexOf('videos') == -1">
<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>
<!-- <el-image :src="item.path" lazy></el-image> -->
@ -144,12 +148,15 @@
? item.alias
: item.channnelname
}}
<span class="alarmSpan" v-if="item.isAlarm == 1"
>(已告警)</span
>
<!-- 上传时间：{{
$moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
}} -->
</p>
</div>
</viewer>
</div>
<div class="bigpic" v-else>
<!-- <el-image :src="item.path" lazy></el-image> -->
<video
@ -201,6 +208,26 @@
</el-pagination>
</div>
</div>
<!-- 点击出现大图 -->
<div v-if="showBigpic" class="showPic">
<div
class="picboxI"
@mousewheel.prevent="rollImg"
:style="{ transform: 'scale(' + zoomD + ')' }"
@mousedown="move"
>
<img
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>
</div>
</div>
</div>
</template>
@ -243,6 +270,17 @@ export default {
total: 0, //总条数
loading: false,
signtype: 0, //0第一次查询
//点击变大图参数
showBigpic: false,
canvasloading: false,
bigPhotoPic: "", //大图路径
textInfo: "",
zoomD: 1,
canvansdata: "",
current: 0,
//告警
alarmList: "",
};
},
created() {
@ -286,13 +324,6 @@ export default {
}
},
methods: {
showbigpicPath(item, index) {
console.log(item, index);
var personBox = document.querySelector(".bigpath" + index);
console.log(personBox.src);
console.log(item.path);
personBox.src = item.path;
},
//获取电压信息
getSearchdy() {
getSearchInfo({ type: 1 })
@ -393,15 +424,564 @@ export default {
//获取图片列表
getPicData() {
this.loading = true;
this.picList = [];
this.$set(this.formdata, "pageindex", this.page);
this.$set(this.formdata, "pagesize", this.pageSize);
// this.$set(this.formdata, "starttime", this.formdata.timeVal[0]);
// this.$set(this.formdata, "endtime", this.formdata.timeVal[1]);
getRealtimePhoto(this.formdata)
.then((res) => {
// this.picList = [
// {
// id: 2000898,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697595617,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018102017.jpg",
// alarmTime: "2023-10-18T02:20:17.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 84,
// x: 743,
// y: 141,
// width: 377,
// height: 465,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000897,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697595602,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018102002.jpg",
// alarmTime: "2023-10-18T02:20:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 84,
// x: 624,
// y: 0,
// width: 433,
// height: 577,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000896,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697595017,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018101017.jpg",
// alarmTime: "2023-10-18T02:10:17.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 84,
// x: 747,
// y: 141,
// width: 375,
// height: 465,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000895,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697595002,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018101002.jpg",
// alarmTime: "2023-10-18T02:10:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 83,
// x: 624,
// y: 0,
// width: 433,
// height: 577,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000894,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697594416,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018100016.jpg",
// alarmTime: "2023-10-18T02:00:16.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 84,
// x: 745,
// y: 143,
// width: 375,
// height: 462,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 1,
// },
// {
// id: 2000893,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697594402,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018100002.jpg",
// alarmTime: "2023-10-18T02:00:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 83,
// x: 624,
// y: 0,
// width: 435,
// height: 577,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000892,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697593815,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018095015.jpg",
// alarmTime: "2023-10-18T01:50:15.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 85,
// x: 747,
// y: 141,
// width: 382,
// height: 465,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000891,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697593802,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018095002.jpg",
// alarmTime: "2023-10-18T01:50:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 85,
// x: 622,
// y: 0,
// width: 438,
// height: 576,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000890,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697593218,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018094018.jpg",
// alarmTime: "2023-10-18T01:40:18.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 85,
// x: 743,
// y: 140,
// width: 384,
// height: 466,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 1,
// },
// {
// id: 2000889,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697593202,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018094002.jpg",
// alarmTime: "2023-10-18T01:40:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 86,
// x: 622,
// y: 0,
// width: 435,
// height: 576,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 1,
// },
// {
// id: 2000887,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697592550,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018092910.jpg",
// alarmTime: "2023-10-18T01:29:10.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 69,
// x: 955,
// y: 131,
// width: 410,
// height: 589,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 1,
// },
// {
// id: 2000885,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697591415,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018091015.jpg",
// alarmTime: "2023-10-18T01:10:15.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 62,
// x: 764,
// y: 286,
// width: 953,
// height: 482,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 1,
// },
// {
// id: 2000884,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697591402,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018091002.jpg",
// alarmTime: "2023-10-18T01:10:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 70,
// x: 612,
// y: 199,
// width: 983,
// height: 602,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000883,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697590816,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018090016.jpg",
// alarmTime: "2023-10-18T01:00:16.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 64,
// x: 753,
// y: 287,
// width: 977,
// height: 482,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000882,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697590802,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018090002.jpg",
// alarmTime: "2023-10-18T01:00:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 74,
// x: 622,
// y: 199,
// width: 987,
// height: 604,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000881,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 2,
// channnelName: "通道2",
// alias: null,
// presetId: 255,
// photoOrgId: 1697590215,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018085015.jpg",
// alarmTime: "2023-10-18T00:50:15.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 64,
// x: 779,
// y: 287,
// width: 942,
// height: 482,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000880,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697590202,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018085002.jpg",
// alarmTime: "2023-10-18T00:50:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 71,
// x: 597,
// y: 199,
// width: 1082,
// height: 604,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000878,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697589602,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018084002.jpg",
// alarmTime: "2023-10-18T00:40:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 70,
// x: 618,
// y: 201,
// width: 1292,
// height: 612,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000876,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697589002,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018083002.jpg",
// alarmTime: "2023-10-18T00:30:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 68,
// x: 618,
// y: 200,
// width: 1290,
// height: 613,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// {
// id: 2000874,
// termId: 10027,
// displayName: "XYIGQ10D221000100",
// lineId: 111,
// lineName: "其它测试线路",
// towerId: 25,
// towerName: "湖南XYIGQ10D221000100",
// channelId: 1,
// channnelName: "通道1",
// alias: null,
// presetId: 255,
// photoOrgId: 1697588402,
// path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018082002.jpg",
// alarmTime: "2023-10-18T00:20:02.000+00:00",
// label: 3,
// name: "WaJueJi",
// enname: "挖掘机",
// prob: 65,
// x: 620,
// y: 200,
// width: 1286,
// height: 613,
// photoWidth: 1920,
// photoHeight: 1080,
// isread: 0,
// },
// ];
this.picList = res.data.list;
this.alarmList = res.data.list.alarmlist;
this.total = res.data.total;
this.loading = false;
//绘制告警
this.$nextTick(() => {
this.drawlineListAll(this.picList);
});
})
.catch((err) => {
this.loading = false;
@ -431,6 +1011,189 @@ export default {
this.pageSize = val;
this.getPicData();
},
//点击变大图
handlePicAlarm(val, index) {
console.log(val, index);
this.current = index;
this.canvasloading = true;
this.canvansdata = val;
if (val.path !== "") {
console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
setTimeout(() => {
this.$nextTick(() => {
this.drawline2(val);
});
}, 100);
}
},
//关闭大图
closePic() {
this.showBigpic = false;
this.zoomD = 1;
},
imgOnload() {
console.log("加载完成");
this.canvasloading = false;
},
//移动demo
move(e) {
console.log(e);
e.preventDefault();
// 获取元素
var personBox = document.querySelector(".picboxI");
var img = document.querySelector(".img");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 添加鼠标移动事件
personBox.addEventListener("mousemove", move);
console.log(personBox.addEventListener("mousemove", move));
console.log(personBox.style);
function move(e) {
console.log(personBox.style.left);
personBox.style.left = e.pageX - x + "px";
personBox.style.top = e.pageY - y + "px";
}
// 添加鼠标抬起事件，鼠标抬起，将事件移除
img.addEventListener("mouseup", function () {
personBox.removeEventListener("mousemove", move);
});
// 鼠标离开父级元素，把事件移除
personBox.addEventListener("mouseout", function () {
personBox.removeEventListener("mousemove", move);
});
},
// 缩放图片
rollImg(e) {
let direction = e.deltaY > 0 ? "down" : "up";
if (direction === "up") {
// 滑轮向上滚动
this.large();
} else {
// 滑轮向下滚动
this.Small();
}
},
//大
large() {
this.$nextTick(() => {
if (this.zoomD < 6) {
this.zoomD += 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
});
},
// 小
Small() {
this.$nextTick(() => {
if (this.zoomD > 0.3) {
this.zoomD -= 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
});
},
//绘制所有的图片告警区域
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 {
this.canvas = document.getElementById("canvas_" + i);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
},
//绘制大图告警区域
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);
console.log(this.imgpic);
this.textInfo = data.alarmlist[0].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;
// 绘制矩形
var scaleX = this.canvas.width / data.alarmlist[0].photoWidth, //this.iw图片的宽
scaleY = this.canvas.height / data.alarmlist[0].photoHeight; //this.ih图片的高
console.log(scaleX, scaleY);
var top = data.alarmlist[0].x * scaleX,
left = data.alarmlist[0].y * scaleY,
width = data.alarmlist[0].width * scaleX,
height = data.alarmlist[0].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();
},
},
};
</script>
@ -476,6 +1239,20 @@ export default {
width: 100%;
height: 100%;
background-size: 100% 100%;
.picshow {
width: 100%;
height: 250px;
position: relative;
.canvasAll {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 0;
top: 0;
pointer-events: none;
}
}
}
img {
cursor: pointer;
@ -503,6 +1280,10 @@ export default {
padding-left: 5px;
padding-right: 5px;
}
.alarmSpan {
color: #f00;
margin-left: 4px;
}
}
}
.noPicBox {
@ -515,5 +1296,73 @@ export default {
}
}
}
.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: 85%;
height: 85%;
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;
}
.myCanvas {
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>

Write Preview
Loading…
Cancel
Save