Browse Source

[完善]批量删除以及界面视图优化

master
邵佳豪 5 years ago
parent
commit
43fd7a45ff
  1. 7
      src/app/navigation/navigation.component.html
  2. 13
      src/app/navigation/navigation.component.scss
  3. 2
      src/app/tabbar/tabbar.component.html
  4. 4
      src/app/ui/all-file/all-file.component.html
  5. 12
      src/app/ui/all-file/all-file.component.scss
  6. 220
      src/app/ui/all-file/all-file.component.ts
  7. 11
      src/app/ui/all-file/viewdetails.html
  8. BIN
      src/assets/images/logo.jpg
  9. BIN
      src/assets/images/logo.png
  10. 2
      src/index.html

7
src/app/navigation/navigation.component.html

@ -2,11 +2,14 @@
<mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme">
<mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;">
<div class="biglogobox">
<img src="../../assets/images/logo.jpg" alt="">
<img src="../../assets/images/logo.png" alt="">
</div>
<div class="navbox">
<div class="openSystem" style="border-bottom: 1px solid gray;">
<a href="ax://startup?" style="color: white">战术授课</a>
</div>
<div class="openSystem">
<a href="ax://startup?" style="color: white">启动培训系统</a>
<a href="ax2://startup?" style="color: white">战术学习</a>
</div>
<div class="addBankBtn" (click)="addDataBank()" *ngIf="islogin.isLogin">
<mat-icon>note_add</mat-icon> <span>新增资料库</span>

13
src/app/navigation/navigation.component.scss

@ -84,7 +84,7 @@ mat-sidenav{
.navbox{
position: absolute;
left: 0px;
top: 100px;
top: 149px;
right: -18px;
bottom: 0px;
overflow-y: scroll;
@ -166,20 +166,19 @@ mat-sidenav{
}
.biglogobox{
width: 194px;
height: 149px;
background-color: #4699f6;
display: block;
text-align: center;
line-height:40px;
position: relative;
left: 0;
margin-bottom: 20px;
color: #FFF;
font-size: 2em;
margin: 0 auto;
// margin-bottom: 100px;
img{
// margin-right: 11px;
width: 100px;
height: 100px;
width: 149px;
height: 149px;
}
}
mat-panel-title mat-icon{

2
src/app/tabbar/tabbar.component.html

@ -1,7 +1,7 @@
<mat-toolbar style="background-color: #3b8cff;">
<!-- <mat-toolbar> -->
<p style="color: white;border-bottom: 3px solid #fff;border-radius: 3px; font-size: 16px;">学习演练平台</p>
<p style="color: white;border-bottom: 3px solid #fff;border-radius: 3px; font-size: 16px;padding: 0 4px;">指挥长(员)战术战法培训系统</p>
<!-- 未登录状态 -->
<button mat-icon-button class="login" *ngIf="!isLogin.isLogin" (click)='login()'>

4
src/app/ui/all-file/all-file.component.html

@ -116,7 +116,9 @@
<span *ngIf="element.isDir == true" class="filename" (click)="clickName($event,element)">
{{element.key | name2}}
</span>
<span class="font3d" *ngIf="element.type == 'waifu' || element.type == 'neifu' || element.type == 'gong' || element.type == 'qiu' || element.type == 'gaopenche' || element.type == 'denggao'">
&nbsp; 3D &nbsp;
</span>
</td>
</ng-container>

12
src/app/ui/all-file/all-file.component.scss

@ -198,3 +198,15 @@
margin: 0 5px;
}
}
.font3d{
font-size: 13px;
background-color: #2cbe4e;
display: inline-block;
font-weight: 600;
line-height: 20px;
color: #fff;
text-align: center;
white-space: nowrap;
border-radius: 3px;
box-sizing: border-box;
}

220
src/app/ui/all-file/all-file.component.ts

@ -41,9 +41,11 @@ export class AllFileComponent {
if(element.key.indexOf(".") != -1){
let typeArr = element.key.split('.')
element.type = typeArr[typeArr.length - 1]
element.newTime = new Date(element.lastModified).getTime()
}
element.newTime = new Date(element.lastModified).getTime()
});
// console.log(666,e)
if( e.direction=='asc' ) { //从小到大排序
data.sort( function(a,b) {
return a.newTime - b.newTime
@ -108,21 +110,22 @@ export class AllFileComponent {
size: 0,
isDir: false,
type: "denggao"
},
{ key: "装备车辆/灭火侦查机器人",
lastModified: null,
eTag: null,
size: 0,
isDir: false,
type: "miehuo"
},
{ key: "装备车辆/空气呼吸器",
lastModified: null,
eTag: null,
size: 0,
isDir: false,
type: "kongqi"
}
// ,
// { key: "装备车辆/灭火侦查机器人",
// lastModified: null,
// eTag: null,
// size: 0,
// isDir: false,
// type: "miehuo"
// },
// { key: "装备车辆/空气呼吸器",
// lastModified: null,
// eTag: null,
// size: 0,
// isDir: false,
// type: "kongqi"
// }
)
}
if(this.selectedDataBank == "设备设施"){
@ -213,7 +216,7 @@ export class AllFileComponent {
prefix : this.searchData
}
}).subscribe(data=>{
console.log(data)
// console.log(data)
},
err=>{
@ -226,18 +229,17 @@ export class AllFileComponent {
// console.log(item)
e.stopPropagation()
if(item.type == "jpg" || item.type == "png" || item.type == "bmp"&& !item.isDir){
if(item.type == "jpg" || item.type == "png" || item.type == "bmp"|| item.type == "gif"&& !item.isDir){
const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
width: '1600px',
height:'900px',
data: {url:item.key,type:"img"}
});
}else if(item.type == "mp4" || item.type == "MP4" && !item.isDir){
const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
width: '1600px',
height:'900px',
width: '1400px',
height:'800px',
data: {url:item.key,type:"video"}
});
dialogRef.afterClosed().subscribe(
@ -633,88 +635,124 @@ export class AllFileComponent {
})
}
//删除文件
// deleteFiles(){
// if (this.selection.selected.length != 0) {
// let isDelete = confirm('您确定要删除吗')
// let arr = []
// if (isDelete) {
// this.selection.selected.forEach( async (element,index) => {
// let result = await new Promise((result,reject)=>{
// this.http.delete(`/api/Objects/drives/${element.key}`).subscribe(data=>{
// result(index)
// })
// })
// arr.push(result)
// if (arr.length == this.selection.selected.length) {
// this.getALLFileList(this.selectedDataBank)
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('删除文件成功','确定',config);}
// this.selection.clear()
// this.isDelete = false
// });
// }
// } else {
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('请选择要删除的文件','确定',config);
// }
// }
// 删除文件
deleteFiles(){
if (this.selection.selected.length == 1) {
let isDelete = confirm('您确定要删除吗')
if (this.selection.selected.length != 0) {
let isDelete = confirm('您确定要删除选中文件吗')
let arr = []
if (isDelete) {
let item = this.selection.selected[0]
if(item.isDir){//如果是文件夹
let paramsdata:any = {
prefix : item.key,
recursive : true
}
this.http.delete(`/api/Objects/drives`,{
params:paramsdata
}).subscribe(data=>{
this.getALLFileList(this.selectedDataBank)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除文件夹成功','确定',config);
this.selection.clear()
this.isDelete = false
})
}
else{
this.http.delete(`/api/Objects/drives/${item.key}`).subscribe(data=>{
this.getALLFileList(this.selectedDataBank)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除文件成功','确定',config);
this.selection.clear()
this.isDelete = false
this.selection.selected.forEach( async (element,index) => {
let result = await new Promise((result,reject)=>{
if(element.isDir){ //如果是文件夹
let lastIndex = element.key.lastIndexOf("/")
let prefix = element.key.substring(0,lastIndex)
let paramsdata:any = {
prefix : prefix,
recursive : true
}
this.http.delete(`/api/Objects/drives`,{
params:paramsdata
}).subscribe(data=>{
arr.push("删除成功了")
if (arr.length == this.selection.selected.length) {
this.getALLFileList(this.selectedDataBank)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除文件成功','确定',config);
this.selection.clear()
this.isDelete = false
}
result(data)
})
}else{
this.http.delete(`/api/Objects/drives/${element.key}`).subscribe(data=>{
arr.push("删除成功了")
if (arr.length == this.selection.selected.length) {
this.getALLFileList(this.selectedDataBank)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除文件成功','确定',config);
this.selection.clear()
this.isDelete = false
}
result(data)
})
}
})
}
});
}
}
if (this.selection.selected.length == 0) {
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择要删除的文件','确定',config);
}
if (this.selection.selected.length > 1) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('暂不支持批量删除','确定',config);
}
}
// deleteFiles(){
// if (this.selection.selected.length == 1) {
// let isDelete = confirm('您确定要删除吗')
// let arr = []
// if (isDelete) {
// let item = this.selection.selected[0]
// if(item.isDir){//如果是文件夹
// let paramsdata:any = {
// prefix : item.key,
// recursive : true
// }
// this.http.delete(`/api/Objects/drives`,{
// params:paramsdata
// }).subscribe(data=>{
// this.getALLFileList(this.selectedDataBank)
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('删除文件夹成功','确定',config);
// this.selection.clear()
// this.isDelete = false
// })
// }
// else{
// this.http.delete(`/api/Objects/drives/${item.key}`).subscribe(data=>{
// this.getALLFileList(this.selectedDataBank)
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('删除文件成功','确定',config);
// this.selection.clear()
// this.isDelete = false
// })
// }
// }
// }
// if (this.selection.selected.length == 0) {
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('请选择要删除的文件','确定',config);
// }
// if (this.selection.selected.length > 1) {
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('暂不支持批量删除','确定',config);
// }
// }
//下载文件
//下载↓
selectDownloadFile:any; //选择下载的文件
@ -771,7 +809,9 @@ export class ViewDetails {
ngOnInit(): void {
this.Url = "/api/Objects/drives/" + this.data.url
}
closeDialog(){
this.dialogRef.close();
}
}

11
src/app/ui/all-file/viewdetails.html

@ -1,7 +1,12 @@
<div>
<div style="position: relative;">
<div style="position: absolute;right: 0;top: 0;cursor: pointer;" (click)="closeDialog()">
<span><mat-icon>clear</mat-icon></span>
</div>
<div class="imgbox" style="text-align: center;">
<img *ngIf="data.type == 'img'" style="max-width: 100%;max-height: 100%;" class="imgitemdefault" [src]="Url">
<video style="margin-top: 70px;" autoplay controls *ngIf="data.type == 'video'" [src]="Url"></video>
<img *ngIf="data.type == 'img'" style="max-width: 96%;max-height: 100%;margin-top: 20px;" class="imgitemdefault" [src]="Url">
<video style="margin-top:18px;" autoplay controls *ngIf="data.type == 'video'" [src]="Url"></video>
<audio autoplay controls *ngIf="data.type == 'mp3'" [src]="Url"></audio>
<!-- <pre *ngIf="data.type == 'txt'">{{Url}}</pre> -->
<!-- <iframe *ngIf="data.type == 'txt'" [src]="Url" frameborder="1" width="100%" height="600"></iframe> -->
</div>
</div>

BIN
src/assets/images/logo.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/images/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

2
src/index.html

@ -2,7 +2,7 @@
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>学习演练平台</title>
<title>指挥长(员)战术战法培训系统</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

Loading…
Cancel
Save