智能研报下载报告图片优化

src/views/smartReport/reportDetail.vue

@@ -38,10 +38,11 @@
                     class="qrcode"
                 ></vue-qr>
             </div>
-            <div class="item" v-if="reportInfo.State == 2" @click="handleGetReportImg" v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg">
+            <!-- 去除详情页导出图片 放到报告列表页去 -->
+            <!-- <div class="item" v-if="reportInfo.State == 2" @click="handleGetReportImg" v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg">
                 <img src="~@/assets/img/smartReport/icon16.png" alt="" style="width:30px;height:30px;marginRight:10px;">
                 <span>导&nbsp;&nbsp;图</span>
-            </div>
+            </div> -->
         </div>
 
         <!-- 报告图片 -->

src/views/smartReport/reportList.vue

@@ -285,7 +285,14 @@
                                 <span
                                     v-if="permissionBtn.checkPermissionBtn(permissionBtn.smartReportManageBtn.reportManage_cancelPublish)"
                                     @click="handleReportPublishCancel(scope.row)"
-                                    style="color: red; cursor: pointer">取消发布</span>
+                                    style="color: red; cursor: pointer"
+                                >取消发布</span>
+                                <span
+                                    v-if="scope.row.DetailImgUrl"
+                                    v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg"
+                                    @click="handleDownReportImg(scope.row.DetailImgUrl)"
+                                    style="cursor: pointer; color: #4099ef;display:inline-block"
+                                >图片下载</span>
                                 <!-- <span
                             v-if="scope.row.MsgIsSend == 0 && permissionBtn.checkPermissionBtn(permissionBtn.smartReportManageBtn.reportManage_sendMsg)"
                             style="color: #4099ef; cursor: pointer"
@@ -336,6 +343,12 @@
                                     @click="handleReportPublishCancel(scope.row)"
                                     style="color: red; cursor: pointer">撤销
                                 </span>
+                                <span
+                                    v-if="scope.row.DetailImgUrl&&scope.row.State===4"
+                                    v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg"
+                                    @click="handleDownReportImg(scope.row.DetailImgUrl)"
+                                    style="cursor: pointer; color: #4099ef;display:inline-block"
+                                >图片下载</span>
                             </template>
                              <!--已驳回则只显示撤销按钮-->
                             <template v-if="scope.row.State===3">
@@ -478,6 +491,11 @@
                 </div>
             </div>
         </el-dialog>
+
+        <!-- 报告图片 -->
+        <div class="report-img-box" v-if="showReportImg&&reportImgUrl" @click="showReportImg=false">
+            <img :src="reportImgUrl" alt="" @click.stop="">
+        </div>
     </div>
 </template>
 
@@ -539,10 +557,42 @@ export default {
 
             showPublish:false,
             activeReportId:0,
-            isDSFB:false
+            isDSFB:false,
+
+            reportImgUrl:'',
+            showReportImg:false
         }
     },
     methods:{
+        // 下载报告图片
+        handleDownReportImg(imgUrl){
+            let img=new Image()
+            img.setAttribute('crossOrigin', 'anonymous');
+            img.src=imgUrl
+            img.onload=()=>{
+                let canvas = document.createElement("canvas");
+                canvas.width = img.width;
+                canvas.height = img.height;
+                let context = canvas.getContext('2d');
+                context.drawImage(img, 0, 0, img.width, img.height);
+                let dataURL = canvas.toDataURL("image/png", 1);
+                const a=document.createElement('a')
+                a.setAttribute("download",this.reportInfo.Title)
+                a.style.display = "none"
+                a.href=dataURL
+                document.body.appendChild(a);
+                a.click()
+            }
+            img.onerror=(e)=>{
+                console.log(e);
+                this.$message.warning("自动下载图片失败，请手动保存")
+                if(imgUrl){
+                    this.reportImgUrl=imgUrl
+                    this.showReportImg=true
+                }
+            }
+        },
+
         // 删除某个报告
         handleDelReport(item){
             //删除
@@ -857,6 +907,21 @@ export default {
 }
 </script>
 
-<style>
+<style lang='scss' scoped>
+.smart-report-list{
+    .report-img-box{
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        overflow-y: auto;
+        background: rgba($color: #000000, $alpha: 0.6);
+        text-align: center;
+        img{
+            max-width: 800px;
+        }
+    }
+}
 
 </style>