[新增]增加下载帮助文档链接

src/app/tabbar/tabbar.component.html

@@ -112,7 +112,7 @@
       </div>
     </div>
     
-    <p style="font-size: 16px;position: absolute; right: 170px;">欢迎您, {{realName}}</p>
+    <p style="font-size: 16px;position: absolute; right: 233px;">欢迎您, {{realName}}</p>
     
 
     <div class="scoringRule"  *ngIf="companyIntegrityScore">
@@ -187,6 +187,20 @@
         </div>
     </div>
 
+    <div class="spinner" *ngIf="isSpinner">
+        <mat-spinner [diameter]='26' color="warn"></mat-spinner>
+        <span style="font-size: 13px;margin-left: 6px;">帮助文档下载中,请等待...</span>
+    </div>
+    <!-- 帮助文档按钮 -->
+    <button mat-icon-button [matMenuTriggerFor]="appSetHelp" class="help" title="帮助">
+        <mat-icon>help</mat-icon>
+    </button>
+    <mat-menu #appSetHelp="matMenu" yPosition="below" xPosition="after">
+        <button mat-menu-item (click)='downloadHelpFile()'> 
+        <mat-icon>save_alt</mat-icon>
+        <span>下载帮助文档</span>
+        </button>
+    </mat-menu>
     <!-- 全屏  -->
     <button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen">
     <ng-container *ngIf="!isfullscreen; else elseTemplate">

src/app/tabbar/tabbar.component.scss

@@ -61,6 +61,16 @@ mat-icon{
     position: absolute;
     right:60px;
 }
+.spinner{
+    position: absolute;
+    right:400px;
+    display: flex;
+    align-items: center;
+}
+.help{
+    position: absolute;
+    right:170px;
+}
 .setting{
     position: absolute;
     right:120px;

src/app/tabbar/tabbar.component.ts

@@ -8,7 +8,6 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { filter } from 'rxjs/operators';
 import { TabbarAndScoreService } from '../http-interceptors/tabbar-and-score.service';
 
-
 @Component({
   selector: 'app-tabbar',
   templateUrl: './tabbar.component.html',
@@ -29,8 +28,7 @@ export class TabbarComponent implements OnInit {
     this.toggleDarkTheme.emit(eventValue);
   }
 
-  constructor(private tabbarService: TabbarAndScoreService,private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public dialog: MatDialog,
-    public snackBar: MatSnackBar) { }
+  constructor(private tabbarService: TabbarAndScoreService,private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
 
   grade = null //单位完整度得分
   title:any = "数字化预案编制管理平台"
@@ -71,6 +69,88 @@ export class TabbarComponent implements OnInit {
     
   }
 
+  isSpinner:boolean = false//下载帮助文档进度
+  //下载帮助文档
+  downloadHelpFile () {
+    this.getFileMSG()
+  }
+  helpFile:any = 'api/ObjectMetadata/help/数字化预案编制管理平台手册.pdf'; //下载文件的url地址
+  download:any; //下载的文件
+
+  //获取下载文件信息
+  getFileMSG () {
+    this.isSpinner = true
+    this.http.get(`${this.helpFile}`).subscribe(data=>{
+      this.download = data
+      this.downloadFile()
+    },err=>{
+      let config = new MatSnackBarConfig();
+      config.verticalPosition = 'bottom';
+      config.duration = 3000
+      this.snackBar.open('下载失败','确定',config);
+    })
+  }
+
+  //初始化下载
+  downloadFile () {
+    let file = this.download
+    let fileSize = file.fileLength//下载文件的总大小
+    let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
+
+    if (file && fileSize<=shardSize) { //<=10MB时直接下载
+      this.http.get(`/api/Objects/help/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{
+        let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        link.setAttribute("download", '数字化预案编制管理平台手册.pdf');
+        document.body.appendChild(link);
+        link.click();
+        this.isSpinner = false
+      },err=>{
+        let config = new MatSnackBarConfig();
+        config.verticalPosition = 'bottom';
+        config.duration = 3000
+        this.snackBar.open('下载失败','确定',config);
+      })
+    } else if (file && fileSize>shardSize) { //>10MB时分块下载
+      this.blockingDownload() //分段下载
+    }
+
+  }
+
+  //分段下载并合并
+  async blockingDownload () {
+    let file = this.download
+    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/help/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
+          result(data) }) 
+      })
+      allFile.push(result)
+
+      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;
+        link.setAttribute("download", '数字化预案编制管理平台手册.pdf');
+        document.body.appendChild(link);
+        link.click();
+        this.isSpinner = false
+      }
+
+    } //for循环
+
+  }
   //根据usci获取当前单位的分数信息
   getIntegrityScore(){
     let params:any = {