画图

src/views/components/carouselChart.vue

@@ -10,7 +10,7 @@
         :style="
           bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!128x72)' : ''
         "
-        @click="handleBigPic(bigPicPath)"
+        @click="handleBigPicbox(bigPicPath)"
       >
         <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" />
 
@@ -153,6 +153,7 @@
 </template>
 
 <script>
+import { getCoordinate } from "@/utils/api/index";
 export default {
   components: {},
   props: {
@@ -199,16 +200,18 @@ export default {
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
     console.log(this.fiveList);
-
-    this.localPoints = this.terminalPhoto[0].list;
-    console.log("111111111111111111111");
-    console.log(this.localPoints);
-    if (this.localPoints == undefined) {
-      console.log("无数据");
-      return;
-    } else if (this.localPoints) {
-      this.drawline();
-    }
+    //获取points
+    getCoordinate({
+      channelId: this.fiveList[0].channelId,
+      needPic: "0",
+      termId: this.fiveList[0].termId,
+    })
+      .then((res) => {
+        console.log(res);
+        this.localPoints = res.data.list;
+        this.drawline();
+      })
+      .catch((err) => {});
   },
   watch: {
     terminalPhoto: function (newVal, oldVal) {
@@ -219,7 +222,7 @@ export default {
   },
   created() {},
   methods: {
-    handleBigPic() {
+    handleBigPicbox() {
       this.showBigpic = true;
     },
     closePic() {
@@ -277,8 +280,18 @@ export default {
         this.activeSmall = 4;
         this.smallLeftClick();
       }
-      this.localPoints = this.terminalPhoto[this.bigNum].list;
-      this.drawline();
+      console.log(this.terminalPhoto[this.bigNum]);
+      getCoordinate({
+        channelId: this.terminalPhoto[this.bigNum].channelId,
+        needPic: "1",
+        termId: this.terminalPhoto[this.bigNum].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.drawline();
+        })
+        .catch((err) => {});
     },
     //点击右侧切换图片
     rightClick() {
@@ -291,8 +304,17 @@ export default {
         console.log(this.activeSmall);
         this.smallRightClick();
       }
-      this.localPoints = this.terminalPhoto[this.bigNum].list;
-      this.drawline();
+      getCoordinate({
+        channelId: this.terminalPhoto[this.bigNum].channelId,
+        needPic: "1",
+        termId: this.terminalPhoto[this.bigNum].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.drawline();
+        })
+        .catch((err) => {});
     },
     //点击小图变成大图
     handleBigpic(row, index) {
@@ -300,8 +322,17 @@ export default {
       console.log();
       this.activeSmall = index;
       this.bigPicPath = row.path;
-      this.localPoints = row.list;
-      this.drawline();
+      getCoordinate({
+        channelId: row.channelId,
+        needPic: "1",
+        termId: row.termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.drawline();
+        })
+        .catch((err) => {});
     },
     //点击小图切换左侧
     smallLeftClick() {
@@ -316,6 +347,18 @@ export default {
       }
       console.log(this.page);
       console.log(this.fiveList);
+      //获取points
+      getCoordinate({
+        channelId: this.fiveList[0].channelId,
+        needPic: "0",
+        termId: this.fiveList[0].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.drawline();
+        })
+        .catch((err) => {});
     },
     //点击小图切换右侧
     smallRightClick() {
@@ -325,6 +368,18 @@ export default {
       this.page++;
       this.getphotoList();
       console.log(this.fiveList);
+      //获取points
+      getCoordinate({
+        channelId: this.fiveList[0].channelId,
+        needPic: "0",
+        termId: this.fiveList[0].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.drawline();
+        })
+        .catch((err) => {});
     },
   },
 };

src/views/management/monitoringEquipment/photographicDevice/components/pictureTags.vue

@@ -7,7 +7,7 @@
     width="1262px"
   >
     <div class="picPannel">
-      <div class="imgbox" v-if="picsrc">
+      <div class="imgbox" v-if="picsrc" v-loading="loading">
         <img ref="picJpg" :src="picsrc" />
         <canvas
           id="myCanvas"
@@ -17,6 +17,7 @@
           @mouseup="mouseup"
           @mousemove="mousemove"
         ></canvas>
+        <!-- <canvas v-else id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> -->
       </div>
       <div class="imgbox" v-else>
         <img ref="picJpg" src="../../../../../assets/img/nopic.jpg" />
@@ -110,6 +111,8 @@ export default {
       markId: "",
       cmdid: "",
       photoId: "",
+      loading: false,
+      nopic: require("@/assets/img/nopic.jpg"),
     };
   },
   mounted() {},
@@ -125,6 +128,7 @@ export default {
       this.picsrc = obj.path;
       this.channelId = obj.id;
       this.photoId = obj.photoId;
+      this.restCanvas();
       this.getcanvansPic(this.pictureData, this.channelId);
       // console.log(this.picsrc);
     },
@@ -139,6 +143,7 @@ export default {
       this.$parent.terminalList(); //刷新
     },
     display(val) {
+      console.log(val);
       this.isShow = true;
       this.pictureData = val; //获取当前列表数据
       this.picoptions = val.list; //获取所有通道
@@ -152,9 +157,10 @@ export default {
       this.pictureData = "";
       this.picoptions = [];
       this.picvalue = "";
+      this.picsrc = "";
     },
     getcanvansPic(val, channelid) {
-      //this.loading = true;
+      this.loading = true;
       getCoordinate({
         channelId: channelid,
         needPic: "0",
@@ -162,7 +168,19 @@ export default {
       })
         .then((res) => {
           console.log(res);
-          this.picsrc = res.data.path;
+          this.markId = res.data.markId;
+
+          if (res.data.path !== null) {
+            this.picsrc = res.data.path;
+            if (res.data.list.length !== 0) {
+              this.localPoints = res.data.list;
+              this.drawline();
+            }
+            this.loading = false;
+          } else {
+            this.picsrc = this.nopic;
+            this.loading = false;
+          }
         })
         .catch((err) => {});
 
@@ -182,10 +200,6 @@ export default {
         this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
         this.ctx = this.canvas.getContext("2d");
         //console.log(localStorage.getItem("piclinePoints"));
-
-        this.localPoints = val.lineList;
-
-        this.drawline();
       });
     },
     mousedown(e) {
@@ -269,16 +283,19 @@ export default {
       this.ctx.strokeStyle = this.color;
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = this.num;
-      for (var i = 0; i < this.localPoints.length; i++) {
-        this.ctx.moveTo(
-          this.localPoints[i].x1 * this.imgpic.width,
-          this.localPoints[i].y1 * this.imgpic.height
-        );
-        this.ctx.lineTo(
-          this.localPoints[i].x2 * this.imgpic.width,
-          this.localPoints[i].y2 * this.imgpic.height
-        );
+      if (this.localPoints.length !== 0) {
+        for (var i = 0; i < this.localPoints.length; i++) {
+          this.ctx.moveTo(
+            this.localPoints[i].x1 * this.imgpic.width,
+            this.localPoints[i].y1 * this.imgpic.height
+          );
+          this.ctx.lineTo(
+            this.localPoints[i].x2 * this.imgpic.width,
+            this.localPoints[i].y2 * this.imgpic.height
+          );
+        }
       }
+
       // this.ctx.moveTo(x, y);
       // this.ctx.lineTo(e.offsetX, e.offsetY);
 
@@ -289,7 +306,6 @@ export default {
     //点击保存
     saveCanvas() {
       console.log(this.linePoints);
-      // localStorage.setItem(this.cmdid, JSON.stringify(this.linePoints));
       updateCoordinate({
         boderWidth: this.num,
         channelId: this.channelId,
@@ -299,9 +315,11 @@ export default {
         list: this.linePoints,
         termId: this.termId,
         width: this.imgpic.width,
-        photoId: this.photoId,
       })
         .then((res) => {
+          this.localPoints = [];
+          console.log(this.linePoints);
+          console.log("qing");
           console.log(res);
           this.$message({
             type: "success",

src/views/management/monitoringEquipment/photographicDevice/index.vue

@@ -331,6 +331,7 @@ export default {
     },
     //线缆绘制
     handlepicture(data) {
+      console.log(data);
       this.$refs.picturetagsref.display(data);
     },
 

src/views/realTimeMonitor/index.vue

@@ -202,6 +202,7 @@ import {
   getLatestPhotoJoggle,
   getReturnedPhotoJoggle,
   alarmMarkJoggle,
+  getCoordinate,
 } from "@/utils/api/index";
 import { mapState } from "vuex";
 import carouselChart from "../components/carouselChart.vue";