From d23b67c7ff01e4622d9e5df4bb2449c1ecb3611d Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Tue, 24 Oct 2023 18:07:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=91=8A=E8=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/carouselChart.vue | 23 +++-- src/views/components/carouselChartmore.vue | 84 +++++++++++++------ .../components/morePicPreveiw.vue | 1 + 3 files changed, 75 insertions(+), 33 deletions(-) diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 67aa695..e8a46bc 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -265,7 +265,12 @@ export default { //this.alarmList = this.fiveList[0].alarmlist; this.alarmList = this.fiveList[0].alarmlist; console.log(this.alarmList[0]); - this.drawlineBig(this.alarmList[0]); + if (this.alarmList.length !== 0) { + this.$nextTick(() => { + this.drawlineBig(this.alarmList[0]); + }); + } + //获取points getCoordinate({ channelId: @@ -483,8 +488,8 @@ export default { 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); + // this.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } }, //绘制大图告警区域 @@ -592,8 +597,8 @@ export default { 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); + // this.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } console.log(this.fiveList[this.bigNum]); getCoordinate({ @@ -629,8 +634,8 @@ export default { 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); + // this.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } getCoordinate({ channelId: this.fiveList[this.bigNum].channelId, @@ -659,8 +664,8 @@ export default { 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.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } // this.bgbigPath = row.path + "!1366x768"; diff --git a/src/views/components/carouselChartmore.vue b/src/views/components/carouselChartmore.vue index c37ba52..e35ff93 100644 --- a/src/views/components/carouselChartmore.vue +++ b/src/views/components/carouselChartmore.vue @@ -27,10 +27,23 @@ :style="'backgroundImage:url(' + bigPicPath + ')'" >
- +
+ - +
@@ -230,7 +243,7 @@ export default { fiveList: [], //小图图片list activeSmall: 0, //索引选中小图, page: 1, //当前第几页 - pagesize: 10, //每页显示10条 + pagesize: 10, //每页显示五条 total: 0, //总共又几页 localPoints: [], //画图对象 @@ -251,10 +264,13 @@ export default { textInfo: "", alarmList: [], bigArr: "", + canvasWidth: "", + canvasHeight: "", }; }, mounted() { console.log(this.terminalPhoto); + console.log("woshi asdadadadadasdasdasddsads more"); this.mediaType = this.terminalPhoto[0].mediaType; this.bigPicPath = this.terminalPhoto[0].path + "!1366x768"; this.bigArr = this.terminalPhoto[0]; @@ -265,7 +281,15 @@ export default { //this.alarmList = this.fiveList[0].alarmlist; this.alarmList = this.fiveList[0].alarmlist; console.log(this.alarmList[0]); - this.drawlineBig(this.alarmList[0]); + this.$nextTick(() => { + this.handleBigpic(this.bigArr, 0); + setTimeout(() => { + this.$nextTick(() => { + this.drawlineBig(this.alarmList[0]); + }); + }, 100); + console.log("执行绘制"); + }); //获取points getCoordinate({ channelId: @@ -481,27 +505,31 @@ export default { if (this.fiveList[this.activeSmall].isAlarm == 1) { console.log("告警"); this.alarmList = this.fiveList[this.activeSmall].alarmlist; - this.drawlineBig(this.alarmList[0]); + this.$nextTick(() => { + 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.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(document.getElementById("bigCanvas1")); + console.log(document.getElementById("bigimgage")); + this.canvas = document.getElementById("bigCanvas1"); + this.imgpic = document.getElementById("bigimgage"); console.log(this.canvas); console.log(this.imgpic); this.textInfo = data.enname; - this.canvas.width = this.imgpic.offsetWidth; //设置画布大小 - this.canvas.height = this.imgpic.offsetHeight; //设置画布大小 + this.canvas.width = this.imgpic.width; //设置画布大小 + this.canvas.height = this.imgpic.height; //设置画布大小 + this.canvasWidth = this.imgpic.width; + this.canvasHeight = this.imgpic.height; console.log(this.canvas.width, this.canvas.height); this.ctx = this.canvas.getContext("2d"); + this.ctx.beginPath(); //设置线条颜色，必须放在绘制之前 this.ctx.strokeStyle = "#ff0000"; @@ -517,6 +545,7 @@ export default { height = data.height * scaleY; console.log(top, left, width, height); // this.ctx.strokeStyle = "red"; //线的颜色 + //this.ctx.strokeRect(20, 100, 200, 400); this.ctx.strokeRect(top, left, width, height); //绘制路径矩形 //this.ctx.strokeRect(data.x, data.y, data.width, data.height); this.ctx.font = "14px normal"; @@ -528,8 +557,10 @@ export default { } else if (this.canvas.height - left + height > 32) { this.ctx.fillText(this.textInfo, top, height - 4); } + this.ctx.closePath(); this.ctx.stroke(); + console.log("asdasdadasdadasd绘制了canvans"); }, //绘制大图告警区域 drawlineBig2(data) { @@ -591,10 +622,12 @@ export default { if (this.fiveList[this.bigNum].isAlarm == 1) { console.log("告警"); this.alarmList = this.fiveList[this.bigNum].alarmlist; - this.drawlineBig(this.alarmList[0]); + this.$nextTick(() => { + this.drawlineBig(this.alarmList[0]); + }); } else { - this.canvas = document.getElementById("bigCanvas"); - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + // this.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } console.log(this.fiveList[this.bigNum]); getCoordinate({ @@ -628,10 +661,12 @@ export default { if (this.fiveList[this.bigNum].isAlarm == 1) { console.log("告警"); this.alarmList = this.fiveList[this.bigNum].alarmlist; - this.drawlineBig(this.alarmList[0]); + this.$nextTick(() => { + this.drawlineBig(this.alarmList[0]); + }); } else { - this.canvas = document.getElementById("bigCanvas"); - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + // this.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } getCoordinate({ channelId: this.fiveList[this.bigNum].channelId, @@ -658,11 +693,12 @@ export default { this.bigArr = row; if (row.isAlarm == 1) { this.alarmList = row.alarmlist; - this.drawlineBig(this.alarmList[0]); + this.$nextTick(() => { + 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.canvas = document.getElementById("bigCanvas"); + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } // this.bgbigPath = row.path + "!1366x768"; diff --git a/src/views/realTimeMonitor/components/morePicPreveiw.vue b/src/views/realTimeMonitor/components/morePicPreveiw.vue index 066e047..4b9e591 100644 --- a/src/views/realTimeMonitor/components/morePicPreveiw.vue +++ b/src/views/realTimeMonitor/components/morePicPreveiw.vue @@ -60,6 +60,7 @@ export default { //获取图片 getTerminalPhotoList(channelid, date, termId) { this.terminalPhoto = []; + console.log("我是morem"); this.picLoading = true; getTerminalPhotoListJoggle({ channelid: channelid,