[完善]审核页面的下载

proxy.config.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://121.36.37.70:8223/",
+    "target": "http://192.168.1.51:8201/",
     "secure": false,
     "changeOrigin": true
   }

src/app/plan-audit/plan-record/plan-record.component.html

@@ -208,7 +208,12 @@
         <span>{{compantData.address?compantData.address : '暂无数据'}}</span>
       </div>
       <div class="planBox">
-        <span style="color: #2196F3;cursor:pointer;" (click)='oopen3Dshow()'>查看详情</span>
+        <span style="color: #2196F3;cursor:pointer;" (click)='open3Dshow()'>查看详情</span>
+      </div>
+
+      <div class="mask" *ngIf="downloadisLoading">
+        <span style="font-size: 13px;">下载中...</span>
+        <mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
       </div>
     </div>
     <!-- 水源审核 -->

src/app/plan-audit/plan-record/plan-record.component.scss

@@ -315,6 +315,21 @@
     margin-left: 10px;
     display: flex;
     flex-direction: column;
+    position: relative;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      mat-progress-bar{
+        width: 70%;
+      }
+    }
 
     @media screen and (max-device-width:1300px) {
       overflow-y: auto;

src/app/plan-audit/plan-record/plan-record.component.ts

@@ -353,13 +353,131 @@ export class PlanRecordComponent implements OnInit {
   }
 
   //打开三维预案弹窗
-  oopen3Dshow() {
-    this.dialog.open(recordshow3D, {
-      width: "1650px",
-      height: "850px",
-      data: { url: this.thirdPartyURL, twoOrthree: this.twoOrthree },
-    });
+  selectedFileData;
+  open3Dshow() {
+    // console.log("三维预案1", this.thirdPartyURL);
+    // console.log("三维预案2", this.twoOrthree);
+    // return
+    if (this.twoOrthree === 2) {
+      this.dialog.open(recordshow3D, {
+        width: "1650px",
+        height: "850px",
+        data: { url: this.thirdPartyURL, twoOrthree: this.twoOrthree },
+      });
+    } else if (this.twoOrthree === 3) {
+      console.log(this.planData);
+      if (this.planData.attachmentUrls.length !== 0) {
+        this.downloadisLoading = true;
+        this.http
+          .get(
+            "/api/ObjectMetadata/PlanPlatform/" +
+              this.planData.attachmentUrls[0]
+          )
+          .subscribe((data: any) => {
+            console.log("源文件", data);
+            this.selectedFileData = data;
+            this.downloadFile();
+          });
+      }
+    }
+  }
+  //初始化下载
+  downloadProgress = 0;
+  downloadisLoading = false;
+  downloadFile() {
+    this.downloadProgress = 0;
+    let file = this.selectedFileData;
+    let fileSize = file.fileLength; //下载文件的总大小
+    let shardSize = 10 * 1024 * 1024; //文件大小是否大于10MB
+    console.log(file);
+    if (file && fileSize <= shardSize) {
+      //<=10MB时直接下载
+
+      this.http
+        .get(`/api/Objects/PlanPlatform/${file.objectName}`, {
+          responseType: "blob",
+        })
+        .subscribe((data) => {
+          console.log(data);
+          let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
+          let link = document.createElement("a");
+          link.style.display = "none";
+          link.href = url;
+
+          let suffix = file.objectName.substring(
+            file.objectName.lastIndexOf(".") + 1,
+            file.objectName.length
+          );
+          link.setAttribute(
+            "download",
+            file.fileName
+              ? file.fileName
+              : file.objectName.split("/")[
+                  file.objectName.split("/").length - 1
+                ]
+          );
+          document.body.appendChild(link);
+          link.click();
+          this.downloadisLoading = false;
+        });
+    } else if (file && fileSize > shardSize) {
+      //>10MB时分块下载
+      this.blockingDownload(); //分段下载
+      this.downloadisLoading = true;
+      // this.setFileLoading()
+    }
   }
+
+  // //分段下载并合并
+  async blockingDownload() {
+    let file = this.selectedFileData;
+    let fileSize = file.fileLength; //下载文件的总大小
+    let shardSize = 3 * 1024 * 1024; //3MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize); //总文件/3MB===共分多少段
+    let allFile: any = []; //所有的file分段
+
+    for (let i = 0; i < allSlice; i++) {
+      let start = i * shardSize; //每次下载文件开始位置
+      let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止
+
+      let result = await new Promise((result, reject) => {
+        this.http
+          .get(`/api/Objects/PlanPlatform/${file.objectName}`, {
+            headers: { range: `bytes= ${start}-${end}` },
+            responseType: "blob",
+          })
+          .subscribe((data) => {
+            result(data);
+          });
+      });
+      allFile.push(result);
+      this.downloadProgress = Number((i / allSlice).toFixed(2)) * 100;
+
+      if (allFile.length === allSlice) {
+        //合并文件输出给浏览器
+        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        let suffix = file.objectName.substring(
+          file.objectName.lastIndexOf(".") + 1,
+          file.objectName.length
+        );
+        link.setAttribute(
+          "download",
+          file.fileName
+            ? file.fileName
+            : file.objectName.split("/")[file.objectName.split("/").length - 1]
+        );
+        document.body.appendChild(link);
+        link.click();
+        // this.downloadProgress = 0
+        this.downloadisLoading = false;
+        // this.setFileLoading()
+      }
+    } //for循环
+  }
+
   //判断iframe是否加载完成
   iftrue = true;
   ifranmeLoad() {

src/app/plan-audit/wait-examineer/wait-examineer.component.html

@@ -361,6 +361,11 @@
         <div class="planBox">
           <span style="color: #2196F3;cursor:pointer;" (click)='oopen3Dshow()'>查看详情</span>
         </div>
+
+        <div class="mask" *ngIf="downloadisLoading">
+          <span style="font-size: 13px;">下载中...</span>
+          <mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+        </div>
       </div>
       <!-- 重点单位 -->
       <div id="company" *ngIf="showtype == 3">

src/app/plan-audit/wait-examineer/wait-examineer.component.scss

@@ -20,9 +20,11 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      form{
+
+      form {
         width: 100%;
       }
+
       .headdiv {
         @media screen and (min-device-width: 1400px) {
           margin: 0 0 0 28px;
@@ -163,11 +165,13 @@
           }
         }
       }
-      .btnbox{
+
+      .btnbox {
         display: flex;
         justify-content: center;
         align-items: center;
-        button{
+
+        button {
           margin: 0 6px;
         }
       }
@@ -250,6 +254,22 @@
   .boxright {
     height: 100%;
     width: 53%;
+    position: relative;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      mat-progress-bar {
+        width: 70%;
+      }
+    }
 
     @media screen and (max-device-width: 1400px) {
       overflow-y: auto;

src/app/plan-audit/wait-examineer/wait-examineer.component.ts

@@ -477,16 +477,131 @@ export class WaitExamineerComponent implements OnInit {
   }
 
   //打开三维预案弹窗
+  selectedFileData: any;
   oopen3Dshow() {
-    this.dialog.open(show3D, {
-      width: "1650px",
-      height: "850px",
-      data: {
-        url: this.thirdPartyURL,
-        twoOrthree: this.twoOrthree,
-        radioid: this.radioid,
-      },
-    });
+    if (this.twoOrthree === 2) {
+      this.dialog.open(show3D, {
+        width: "1650px",
+        height: "850px",
+        data: {
+          url: this.thirdPartyURL,
+          twoOrthree: this.twoOrthree,
+          radioid: this.radioid,
+        },
+      });
+    } else if (this.twoOrthree === 3) {
+      console.log(this.planData);
+      if (this.planData.attachmentUrls.length !== 0) {
+        this.downloadisLoading = true;
+        this.http
+          .get(
+            "/api/ObjectMetadata/PlanPlatform/" +
+              this.planData.attachmentUrls[0]
+          )
+          .subscribe((data: any) => {
+            console.log("源文件", data);
+            this.selectedFileData = data;
+            this.downloadFile();
+          });
+      }
+    }
+  }
+
+  //初始化下载
+  downloadProgress = 0;
+  downloadisLoading = false;
+  downloadFile() {
+    this.downloadProgress = 0;
+    let file = this.selectedFileData;
+    let fileSize = file.fileLength; //下载文件的总大小
+    let shardSize = 10 * 1024 * 1024; //文件大小是否大于10MB
+    console.log(file);
+    if (file && fileSize <= shardSize) {
+      //<=10MB时直接下载
+
+      this.http
+        .get(`/api/Objects/PlanPlatform/${file.objectName}`, {
+          responseType: "blob",
+        })
+        .subscribe((data) => {
+          console.log(data);
+          let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
+          let link = document.createElement("a");
+          link.style.display = "none";
+          link.href = url;
+
+          let suffix = file.objectName.substring(
+            file.objectName.lastIndexOf(".") + 1,
+            file.objectName.length
+          );
+          link.setAttribute(
+            "download",
+            file.fileName
+              ? file.fileName
+              : file.objectName.split("/")[
+                  file.objectName.split("/").length - 1
+                ]
+          );
+          document.body.appendChild(link);
+          link.click();
+          this.downloadisLoading = false;
+        });
+    } else if (file && fileSize > shardSize) {
+      //>10MB时分块下载
+      this.blockingDownload(); //分段下载
+      this.downloadisLoading = true;
+      // this.setFileLoading()
+    }
+  }
+
+  // //分段下载并合并
+  async blockingDownload() {
+    let file = this.selectedFileData;
+    let fileSize = file.fileLength; //下载文件的总大小
+    let shardSize = 3 * 1024 * 1024; //3MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize); //总文件/3MB===共分多少段
+    let allFile: any = []; //所有的file分段
+
+    for (let i = 0; i < allSlice; i++) {
+      let start = i * shardSize; //每次下载文件开始位置
+      let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止
+
+      let result = await new Promise((result, reject) => {
+        this.http
+          .get(`/api/Objects/PlanPlatform/${file.objectName}`, {
+            headers: { range: `bytes= ${start}-${end}` },
+            responseType: "blob",
+          })
+          .subscribe((data) => {
+            result(data);
+          });
+      });
+      allFile.push(result);
+      this.downloadProgress = Number((i / allSlice).toFixed(2)) * 100;
+
+      if (allFile.length === allSlice) {
+        //合并文件输出给浏览器
+        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        let suffix = file.objectName.substring(
+          file.objectName.lastIndexOf(".") + 1,
+          file.objectName.length
+        );
+        link.setAttribute(
+          "download",
+          file.fileName
+            ? file.fileName
+            : file.objectName.split("/")[file.objectName.split("/").length - 1]
+        );
+        document.body.appendChild(link);
+        link.click();
+        // this.downloadProgress = 0
+        this.downloadisLoading = false;
+        // this.setFileLoading()
+      }
+    } //for循环
   }
 
   //变更数据和全部数据切换按钮

src/app/plan-management/entry-plan-look/entry-plan-look.component.html

@@ -134,7 +134,7 @@
                         <!-- <span (click)="sixFamiliarize(element)">六熟悉</span> -->
                         <span (click)="lookPlan(element)">查看</span>
                         <span (click)="readFile(element)"
-                            [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span>
+                            [ngClass]="{'grey':  element.planMode == '2' || element.planMode == '3'}">下载</span>
                     </td>
                 </ng-container>
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>