shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

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

zhuzhou
邵佳豪 4 years ago
parent
b99492318f
commit
70829bf4b2
3 changed files with 239 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/app/tabbar/tabbar.component.html
  2. 10
      src/app/tabbar/tabbar.component.scss
  3. 348
      src/app/tabbar/tabbar.component.ts

16
src/app/tabbar/tabbar.component.html
Unescape View File

@ -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">

10
src/app/tabbar/tabbar.component.scss
Unescape View File

@ -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;

348
src/app/tabbar/tabbar.component.ts
Unescape View File

@ -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,158 +28,239 @@ 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) { }
grade = null //单位完整度得分
title:any = "数字化预案编制管理平台"
planName:any = null
routerEventsListener //监测路由变化
integrityData:any
companyIntegrityScore:any
ngOnInit() {
this.routerEventsListener = this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((e) => {
this.title = "数字化预案编制管理平台"
this.planName = null
this.grade = null
if(this.router.url.indexOf("editunitinfo") == -1 || this.router.url.indexOf("viewunitinfoplan") == -1){//如果url地址是从录入预案跳转
this.companyIntegrityScore = ''
}
})
constructor(private tabbarService: TabbarAndScoreService,private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
if(this.router.url.indexOf("editunitinfo") != -1 || this.router.url.indexOf("viewunitinfoplan") != -1){//如果url地址是从录入预案跳转
this.title = sessionStorage.getItem("companyName")
this.planName = sessionStorage.getItem("planName")
}
if(this.router.url.indexOf("editplaninfo") != -1 || (this.router.url.indexOf("viewunitinfo") != -1 && this.router.url.indexOf("viewunitinfoplan") == -1)){//如果url地址是从重点单位跳转
this.title = sessionStorage.getItem("companyName")
// let obj = JSON.parse(sessionStorage.getItem(this.route.snapshot.queryParams.id))
// this.companyIntegrityScore = obj
grade = null //单位完整度得分
title:any = "数字化预案编制管理平台"
planName:any = null
routerEventsListener //监测路由变化
integrityData:any
companyIntegrityScore:any
ngOnInit() {
this.routerEventsListener = this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((e) => {
this.title = "数字化预案编制管理平台"
this.planName = null
this.grade = null
if(this.router.url.indexOf("editunitinfo") == -1 || this.router.url.indexOf("viewunitinfoplan") == -1){//如果url地址是从录入预案跳转
this.companyIntegrityScore = ''
}
})
if(this.router.url.indexOf("editunitinfo") != -1 || this.router.url.indexOf("viewunitinfoplan") != -1){//如果url地址是从录入预案跳转
this.title = sessionStorage.getItem("companyName")
this.planName = sessionStorage.getItem("planName")
}
if(this.router.url.indexOf("editplaninfo") != -1 || (this.router.url.indexOf("viewunitinfo") != -1 && this.router.url.indexOf("viewunitinfoplan") == -1)){//如果url地址是从重点单位跳转
this.title = sessionStorage.getItem("companyName")
// let obj = JSON.parse(sessionStorage.getItem(this.route.snapshot.queryParams.id))
// this.companyIntegrityScore = obj
this.getIntegrityScore()
this.tabbarService.getMessage().subscribe((message: any)=>{
console.log(789,message);//send a message
this.getIntegrityScore()
this.tabbarService.getMessage().subscribe((message: any)=>{
console.log(789,message);//send a message
this.getIntegrityScore()
});
}
this.getUserInfo()
});
}
this.getUserInfo()
}
//根据usci获取当前单位的分数信息
getIntegrityScore(){
let params:any = {
USCI : this.route.snapshot.queryParams.usci
}
this.http.get('/api/Companies',{params:params}).subscribe((data:any) => {
this.companyIntegrityScore = data.items[0].companyIntegrityScore
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() //分段下载
}
ngOnDestroy(){
this.routerEventsListener.unsubscribe()
}
}
//分段下载并合并
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分段
integrityDetails(width,zong){
let style:any = {}
style.width = (width/zong)*100 +'%';
return style
}
//计分规则
scoringRuleImg:boolean = false
scoringRule(){
this.scoringRuleImg = !this.scoringRuleImg
}
closebtn(){
this.scoringRuleImg = false
}
boxed(css){
const Element = document.body;
Element.style.width = '1200px'
}
for (let i=0;i<allSlice;i++) {
let start = i * shardSize //每次下载文件开始位置
let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
standard(){
const Element = document.body;
Element.style.width = '100%'
}
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)
isfullscreen:boolean = false;
fullscreenToggle(){
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
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
}
this.isfullscreen = true;
} //for循环
}
//根据usci获取当前单位的分数信息
getIntegrityScore(){
let params:any = {
USCI : this.route.snapshot.queryParams.usci
}
closefullscreen(){
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
this.http.get('/api/Companies',{params:params}).subscribe((data:any) => {
this.companyIntegrityScore = data.items[0].companyIntegrityScore
})
}
ngOnDestroy(){
this.routerEventsListener.unsubscribe()
}
integrityDetails(width,zong){
let style:any = {}
style.width = (width/zong)*100 +'%';
return style
}
//计分规则
scoringRuleImg:boolean = false
scoringRule(){
this.scoringRuleImg = !this.scoringRuleImg
}
closebtn(){
this.scoringRuleImg = false
}
boxed(css){
const Element = document.body;
Element.style.width = '1200px'
}
standard(){
const Element = document.body;
Element.style.width = '100%'
}
isfullscreen:boolean = false;
fullscreenToggle(){
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
if (docWithBrowsersExitFunctions.exitFullscreen) {
docWithBrowsersExitFunctions.exitFullscreen();
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
docWithBrowsersExitFunctions.mozCancelFullScreen();
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
docWithBrowsersExitFunctions.webkitExitFullscreen();
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
docWithBrowsersExitFunctions.msExitFullscreen();
}
this.isfullscreen = false;
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
}
this.isfullscreen = true;
}
closefullscreen(){
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
};
if (docWithBrowsersExitFunctions.exitFullscreen) {
docWithBrowsersExitFunctions.exitFullscreen();
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
docWithBrowsersExitFunctions.mozCancelFullScreen();
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
docWithBrowsersExitFunctions.webkitExitFullscreen();
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
docWithBrowsersExitFunctions.msExitFullscreen();
}
this.isfullscreen = false;
}
realName:any; //登录用户信息
//获取用户信息
getUserInfo () {
this.http.get("/api/Account/Profiles").subscribe((data:any)=>{
this.realName = data.realName
})
}
realName:any; //登录用户信息
//获取用户信息
getUserInfo () {
this.http.get("/api/Account/Profiles").subscribe((data:any)=>{
this.realName = data.realName
})
}
//退出系统
signOut = () => {
let out = confirm("您确定要退出吗")
if(out) {
this.http.post('/api/Account/SignOut',{}).subscribe(
data=> {
this.token.delete()
sessionStorage.clear()
window.localStorage.clear()
this.router.navigate(['/login'])
const config = new MatSnackBarConfig();
config.verticalPosition = 'bottom';
config.duration = 3000
this.snackBar.open('成功退出','确定',config);
}
)
}
//退出系统
signOut = () => {
let out = confirm("您确定要退出吗")
if(out) {
this.http.post('/api/Account/SignOut',{}).subscribe(
data=> {
this.token.delete()
sessionStorage.clear()
window.localStorage.clear()
this.router.navigate(['/login'])
const config = new MatSnackBarConfig();
config.verticalPosition = 'bottom';
config.duration = 3000
this.snackBar.open('成功退出','确定',config);
}
)
}
}
//修改密码
changpsw() {
let dialogRef = this.dialog.open(ChangepasswordComponent,
{width:'348px'});
//修改密码
changpsw() {
let dialogRef = this.dialog.open(ChangepasswordComponent,
{width:'348px'});
dialogRef.afterClosed().subscribe();
}
dialogRef.afterClosed().subscribe();
}
}

Write Preview
Loading…
Cancel
Save