添加告警

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";

src/views/components/carouselChartmore.vue

@@ -27,10 +27,23 @@
           :style="'backgroundImage:url(' + bigPicPath + ')'"
         ></div>
         <div class="bigimgView" @click="handleBigPicbox(bigArr, bigPicPath)">
-          <img id="bigimg" ref="picJpg" class="animImg" :src="bigPicPath" />
+          <img
+            id="bigimgage"
+            ref="picJpg"
+            class="animImg"
+            :src="bigPicPath"
+            @load="imgOnload"
+          />
         </div>
+        <canvas
+          id="bigCanvas1"
+          class="myCanvas2"
+          ref="myCanvasbig"
+          :width="canvasWidth"
+          :height="canvasHeight"
+        ></canvas>
         <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">
@@ -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";

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,