首页空白bug,添加分辨率，优化下载图片

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) {
+    async downLoadPic(path, name) {
-      const image = new Image();
+      const imgUrl = path;
-      image.setAttribute("crossOrigin", "anonymous");
+      const response = await fetch(imgUrl);
-      image.src = url;
+      const blob = await response.blob();
-      image.onload = () => {
+      // 创建下载链接
-        const canvas = document.createElement("canvas");
+      const url = window.URL.createObjectURL(blob);
-        canvas.width = image.width;
+      const link = document.createElement("a");
-        canvas.height = image.height;
+      link.href = url;
-        const ctx = canvas.getContext("2d");
+      link.download = name;
-        ctx.drawImage(image, 0, 0, image.width, image.height);
+      document.body.appendChild(link);
-        canvas.toBlob((blob) => {
+      link.click();
-          const url = URL.createObjectURL(blob);
+      document.body.removeChild(link);
-          this.download(url, name);
+      // 释放 Blob URL
-          // 用完释放URL对象
+      window.URL.revokeObjectURL(url);
-          URL.revokeObjectURL(url);
-        });
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
     },
+
     // 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%;

src/views/realTimeMonitor/index.vue

@@ -549,13 +549,10 @@ 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) {
-            console.log("diyici");
           if (
             this.currentData !== null &&
             Object.keys(this.currentData).length !== 0
@@ -581,7 +578,9 @@ export default {
           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) {