优化下载图片

src/views/realTimeMonitor/components/carouselChart.vue

@@ -2,6 +2,7 @@
   <div class="thumb-example">
     <div class="radioBox" v-if="roleUser != 2">
       {{ radioPx }}
+      <!-- <span>(共{{ terminalPhoto.length }}张)</span> -->
     </div>
     <div class="topPic">
       <div
@@ -216,31 +217,46 @@ export default {
 
   methods: {
     //下载图片
-    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();
     },
+    // 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();
+    // },
     //获取线缆绘制显示
     getPointList(data) {
       getCoordinate({

src/views/realTimeMonitor/components/parameterArea.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="AreaBox">
-    <div class="areaHead">{{ areaData.cmdid }}</div>
+    <div class="areaHead">
+      <span>{{ areaData.cmdid }}</span>
+      <!-- <el-tooltip
+        class="item"
+        effect="dark"
+        :content="!collect ? '取消收藏' : '添加收藏'"
+        placement="top"
+      >
+        <i
+          :class="collect ? 'el-icon-star-off' : 'el-icon-star-on'"
+          @click="collectCourses"
+        ></i>
+      </el-tooltip> -->
+    </div>
     <div class="paramsDate">
       <h3>日历快速查询</h3>
       <el-date-picker
@@ -162,6 +175,7 @@ export default {
       selectDyId: "", //获取当前选中的电压线路等信息
       selectLineId: "",
       selectTowerId: "",
+      collect: false, //收藏
     };
   },
 
@@ -187,6 +201,10 @@ export default {
       this.dateValue = new Date().getTime();
       console.log(this.dateValue);
     },
+    //点击收藏和取消收藏
+    collectCourses() {
+      this.collect = !this.collect;
+    },
     //选择时间
     changedate() {
       console.log(this.dateValue.getTime());
@@ -317,6 +335,20 @@ export default {
     color: #169e8c;
     font-size: 14px;
     font-weight: normal;
+    display: flex;
+    align-items: center;
+    i {
+      margin-left: 16px;
+      cursor: pointer;
+    }
+    .el-icon-star-off {
+      font-size: 18px;
+      color: #f08200;
+    }
+    .el-icon-star-on {
+      font-size: 20px;
+      color: #f08200;
+    }
   }
   .paramsDate {
     margin-bottom: 16px;