From 7df734aee2acacc77bf9f072d7aff83be584b1f2 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Mon, 28 Aug 2023 10:24:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=A9=BA=E7=99=BDbug,?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E8=BE=A8=E7=8E=87=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=8B=E8=BD=BD=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/carouselChart.vue | 78 ++++++++++++++++----------
 src/views/realTimeMonitor/index.vue    | 53 +++++++++--------
 2 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index 3ea0cb2..1ff90ad 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="thumb-example">
+    <div
+      class="radioBox"
+      v-if="
+        bigPicPath.indexOf('nopic') == -1 && bigPicPath.indexOf('videos') == -1
+      "
+    >
+      {{ picRadio }}
+    </div>
     <div class="picTop">
       <!-- 判断是否是图片并且不为空 -->
 
@@ -21,6 +29,12 @@
           "
           >下载图片</el-button
         >
+        <!-- <a
+          class="downBtn"
+          :href="bigPicPath.substring(0, bigPicPath.length - 9)"
+          download
+          >下载图片</a
+        > -->
         <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
         <div
           class="nosee"
@@ -235,7 +249,6 @@ export default {
       page: 1, //当前第几页
       pagesize: 5, //每页显示五条
       total: 0, //总共又几页
-
       localPoints: [], //画图对象
       canvas: null,
       ctx: null,
@@ -248,13 +261,15 @@ export default {
       zoomD: 1,
       canvasloading: false,
       bigImgPath: "",
+      picRadio: "", //图片分辨率
     };
   },
   mounted() {
     console.log(this.terminalPhoto);
     this.mediaType = this.terminalPhoto[0].mediaType;
     this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-
+    this.picRadio =
+      this.terminalPhoto[0].width + "x" + this.terminalPhoto[0].height;
     // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
@@ -292,31 +307,22 @@ export default {
       e.target.src = defaultImage;
       this.bigPicPath = defaultImage;
     },
-    downLoadPic(url, name) {
-      const image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
-      image.src = url;
-      image.onload = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, image.width, image.height);
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          this.download(url, name);
-          // 用完释放URL对象
-          URL.revokeObjectURL(url);
-        });
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
+    async downLoadPic(path, name) {
+      const imgUrl = path;
+      const response = await fetch(imgUrl);
+      const blob = await response.blob();
+      // 创建下载链接
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // 释放 Blob URL
+      window.URL.revokeObjectURL(url);
     },
+
     // showbigpicPath(data) {
     //   console.log(data);
     //   if (data.includes("!")) {
@@ -485,7 +491,10 @@ export default {
       this.bigNum--; //执行下一张
       this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-
+      this.picRadio =
+        this.terminalPhoto[this.bigNum].width +
+        "x" +
+        this.terminalPhoto[this.bigNum].height;
       this.activeSmall--;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       console.log(this.page);
@@ -513,7 +522,10 @@ export default {
       this.bigNum++; //执行下一张
       this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-
+      this.picRadio =
+        this.terminalPhoto[this.bigNum].width +
+        "x" +
+        this.terminalPhoto[this.bigNum].height;
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       if (this.activeSmall > 4) {
@@ -542,6 +554,7 @@ export default {
       this.activeSmall = index;
       this.mediaType = row.mediaType;
       this.bigPicPath = row.path + "!1366x768";
+      this.picRadio = row.width + "x" + row.height;
       // this.bgbigPath = row.path + "!1366x768";
       getCoordinate({
         channelId: row.channelId,
@@ -621,7 +634,14 @@ export default {
   flex-direction: column;
   height: calc(100% - 32px);
   box-sizing: border-box;
-
+  position: relative;
+  .radioBox {
+    position: absolute;
+    right: 24px;
+    color: #fff;
+    font-size: 14px;
+    top: -24px;
+  }
   .picTop {
     width: 100%;
     height: 80%;
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index ddc72b1..aa27808 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -549,39 +549,38 @@ export default {
           console.log(res);
           this.lineTreeData = res.data.list;
           console.log(this.lineTreeData);
-
           this.onlineNum = res.data.onlineNum;
           this.totalNum = res.data.totalNum;
           this.currentData = JSON.parse(localStorage.getItem("currentData"));
           console.log(this.currentData);
-          if (this.lineTreeData[0].list[0].list.length > 0) {
+          if (
+            this.currentData !== null &&
+            Object.keys(this.currentData).length !== 0
+          ) {
+            console.log("aaa");
+            this.currentNodekey = this.currentData.id;
+            this.handleNodeClick(this.currentData);
+          } else {
             console.log("diyici");
-            if (
-              this.currentData !== null &&
-              Object.keys(this.currentData).length !== 0
-            ) {
-              console.log("aaa");
-              this.currentNodekey = this.currentData.id;
-              this.handleNodeClick(this.currentData);
-            } else {
-              console.log("diyici");
-              this.selectData = this.lineTreeData[0]; //第一个选中的数据
-              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-              this.type = 1;
-              this.newCurrentId = this.lineTreeData[0].id;
-              this.previewData = this.lineTreeData[0]; //预览图数据
-              this.channelId = this.currentNodekey;
-              this.$refs.previewRef.getPicList(
-                this.currentNodekey,
-                this.type,
-                this.page
-              );
-            }
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-            });
+            this.selectData = this.lineTreeData[0]; //第一个选中的数据
+            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+            this.type = 1;
+            this.newCurrentId = this.lineTreeData[0].id;
+            this.previewData = this.lineTreeData[0]; //预览图数据
+            this.channelId = this.currentNodekey;
+            this.$refs.previewRef.getPicList(
+              this.currentNodekey,
+              this.type,
+              this.page
+            );
           }
+
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+          });
+          // if (this.lineTreeData[0].list[0].list.length > 0) {
+          //   console.log("diyici");
+          // }
           // if (this.zzradio == -1) {
           //   this.lineTreeData = this.lineTreeData;
           // } else if (this.zzradio == 1) {