diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 5db5e3b..8d63bb2 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -262,6 +262,7 @@ @click.stop="handlePicHistory(item)" > +
{ 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) { diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 9ab6ebb..67aa695 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -26,10 +26,11 @@ class="nosee" :style="'backgroundImage:url(' + bigPicPath + ')'" >
-
- +
+
+
@@ -102,6 +103,7 @@ : item.channelName }} + (已告警)

- + +
@@ -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; diff --git a/src/views/components/carouselChartmore.vue b/src/views/components/carouselChartmore.vue index fe8543f..c37ba52 100644 --- a/src/views/components/carouselChartmore.vue +++ b/src/views/components/carouselChartmore.vue @@ -26,10 +26,11 @@ class="nosee" :style="'backgroundImage:url(' + bigPicPath + ')'" >
-
- +
+
+
@@ -102,6 +103,7 @@ : item.channelName }} + (已告警)

- + +
@@ -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; diff --git a/src/views/components/imgCanvans.vue b/src/views/components/imgCanvans.vue new file mode 100644 index 0000000..e206f31 --- /dev/null +++ b/src/views/components/imgCanvans.vue @@ -0,0 +1,108 @@ + + + diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index b9ad789..2850913 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -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(); diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue index 82460d4..b89896e 100644 --- a/src/views/realTimeSearch/index.vue +++ b/src/views/realTimeSearch/index.vue @@ -114,16 +114,20 @@ v-for="(item, index) in picList" :key="index" > - - +
+
+ + +
@@ -144,12 +148,15 @@ ? item.alias : item.channnelname }} + (已告警)

- +
+ +
+
+ + +
+
+ +
+
@@ -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(); + }, }, }; @@ -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; + } + } + } }