nzdrtrt
/
Luck-Draw
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[优化]tabbar

master
chenjingyu 4 years ago
parent
4ec19d1dd4
commit
9f547f7a0d
4 changed files with 0 additions and 519 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. 178
      src/app/tabbar/tabbar.component.html
  2. 181
      src/app/tabbar/tabbar.component.scss
  3. 25
      src/app/tabbar/tabbar.component.spec.ts
  4. 135
      src/app/tabbar/tabbar.component.ts

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

@ -1,178 +0,0 @@
<mat-toolbar [color]="theme?'primary':'accent'">
<!-- <mat-toolbar> -->
<h1>{{title}} <span *ngIf="planName != null">: {{planName}}</span> </h1>
<!--分数框-->
<!-- <div class="grade" *ngIf="grade" onmouseover="xiangqing.style.display='block';" onmouseout="xiangqing.style.display='none';">
<a class="active"><span ><a></a>{{grade}} 分</span></a>
</div> -->
<div class="uploadFile">
<a href="http://139.9.106.124:8088/ExaminationLauncher.zip"><span>获取中高级指挥长考评系统(仅供练习使用)</span></a>
</div>
<!--详情框 -->
<div class="integrityDetails" id="xiangqing">
<div class="integrityDetailsTop">
<span class="span1">分类名称</span>
<span class="span2">已得分</span>
<span class="span3">总分</span>
</div>
<div class="integrityDetailsBody">
<ul>
<li>
<div class="name">单位信息</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">建筑信息</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">平面图</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">四周毗邻</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">消防设施</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">重点部位</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">功能分区</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">实景图</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
<li>
<div class="name">CAD上传</div>
<div class="colorDiv">
<div class="colorDivBac">
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div>
</div>
<span>8分</span>
</div>
<div class="number">10分</div>
</li>
</ul>
</div>
<div style="width: 100%;text-align: center;font-size: 13px;">
仅供参考
</div>
</div>
<p style="font-size: 16px;position: absolute; right: 170px;">欢迎您, {{realName}}</p>
<!-- 全屏 -->
<button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen">
<ng-container *ngIf="!isfullscreen; else elseTemplate">
<mat-icon *ngIf="!isfullscreen">fullscreen</mat-icon>
</ng-container>
<ng-template #elseTemplate>
<mat-icon else>fullscreen_exit</mat-icon>
</ng-template>
</button>
<!-- 黑夜模式开关 -->
<mat-slide-toggle (change)='onChange($event.checked)' class="darktheme"></mat-slide-toggle>
<!-- 锁屏按钮 -->
<!-- <button mat-button class="lockscreen" [routerLink]="['/lockscreen']" routerLinkActive="router-link-active" >
<mat-icon>screen_lock_landscape</mat-icon>
</button> -->
<!-- 登录信息按钮 -->
<button mat-icon-button [matMenuTriggerFor]="appMenu" class="login">
<mat-icon>account_circle</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
<button mat-menu-item [routerLink]="['/ui/userdata']" >
<mat-icon>perm_identity</mat-icon>
<span>个人资料</span>
</button>
<button mat-menu-item (click)='changpsw()'>
<mat-icon>verified_user</mat-icon>
<span>修改密码</span>
</button>
<button mat-menu-item (click)='signOut()'>
<mat-icon>power_settings_new</mat-icon>
<span>退出系统</span>
</button>
</mat-menu>
<!-- 设置按钮 -->
<button mat-icon-button [matMenuTriggerFor]="appSet" class="setting">
<mat-icon>settings</mat-icon>
</button>
<mat-menu #appSet="matMenu" yPosition="below" xPosition="after">
<button mat-menu-item (click)="defaulttheme.next()">
<mat-icon>palette</mat-icon>
<span>默认主题</span>
</button>
<button mat-menu-item (click)="redtheme.next()">
<mat-icon>whatshot</mat-icon>
<span>亮色主题</span>
</button>
<button mat-menu-item (click)="standard()">
<mat-icon>settings_overscan</mat-icon>
<span>标准模式</span>
</button>
<button mat-menu-item (click)="boxed('boxed')">
<mat-icon>laptop</mat-icon>
<span>盒子模式</span>
</button>
</mat-menu>
</mat-toolbar>

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

@ -1,181 +0,0 @@
//@import "/src/app/style.css";
mat-toolbar{
position: relative;
padding-left: 65px;
.grade{
width: 120px;
height: 45px;
//border:1px solid #F00;
position: absolute;
text-align: center;
margin-left: 250px;
margin-top: 0px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform:text;
a{
box-sizing: border-box;
display: inline-block;
color: #fff;
//padding: 12px 5px;
text-decoration: none;
cursor: pointer;
}
span{
text-align: center;
font-size: 36px;
line-height: 45px;
font-family: "STXinwei";
color:#FFA500;
cursor: default;
text-decoration:underline;
padding-bottom:5px;
}
a.active>span ,a:hover>span {
//padding-bottom: 8px;
border-bottom: 3px solid #FFA500;
}
}
}
.logo{
height: 64px;
widows: 64px;
}
h1{
line-height: 64px;
color: white;
}
mat-icon{
color: white;
}
.login{
position: absolute;
right:30px;
}
.fullscreen{
position: absolute;
right:60px;
}
.setting{
position: absolute;
right:120px;
}
.lockscreen{
position: absolute;
right:160px;
}
.darktheme{
position: absolute;
right:140px;
display: none;
}
.boxed{
width: 1200px;
}
//鼠标移入详情页面显示
.integrityDetails{
position: absolute;
z-index: 999;
color: black;
display: none;
width: 350px;
height:290px;
left: 440px;
top: 30px;
border: 1px solid rgba(0, 0, 0, 0.22);
background-color: white;
.integrityDetailsTop{
width: 100%;
height: 23px;
line-height:23px;
border-bottom: 1px solid rgba(0, 0, 0, 0.22);
margin-bottom: 1px;
font-size: 14px;
span{
display: inline-block;
text-align: center;
font-weight: 800;
}
.span1{
width: 25%;
}
.span2{
width: 60%;
}
.span3{
width: 15%;
}
}
.integrityDetailsBody{
ul{
li{
width: 100%;
height: 23px;
line-height: 23px;
margin: 3px 15px;
div{
float: left;
font-size: 13px;
}
.name{
width: 25%;
height: 100%;
}
.colorDiv{
width: 60%;
height: 100%;
position: relative;
.colorDivBac{
width: 90%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #dfe5ec;
border-radius: 5px;
.colorDivCon{
border-radius: 5px;
height: 100%;
background-color: #2398f1;
}
}
span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
// color: white;
font-weight: 600;
}
}
.number{
width: 15%;
height: 100%;
}
}
}
}
}
.uploadFile{
height: 64px;
line-height: 64px;
a{
color: rgb(26, 15, 179);
font-size: 22px;
position: absolute;
right: 370px;
}
a:hover{
text-decoration: underline;
color: red;
}
}

25
src/app/tabbar/tabbar.component.spec.ts
Unescape View File

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TabbarComponent } from './tabbar.component';
describe('TabbarComponent', () => {
let component: TabbarComponent;
let fixture: ComponentFixture<TabbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TabbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TabbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@ -1,135 +0,0 @@
import { Component, OnInit,Output,EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router,ActivatedRoute,NavigationEnd } from '@angular/router'
import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务
import { MatDialog } from '@angular/material/dialog';
import {ChangepasswordComponent} from '../ui/changepassword/changepassword.component'
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-tabbar',
templateUrl: './tabbar.component.html',
styleUrls: ['./tabbar.component.scss']
})
export class TabbarComponent implements OnInit {
theme: boolean = true;
@Output()
toggle = new EventEmitter<void>();
@Output()
toggleDarkTheme = new EventEmitter<boolean>();
@Output()
defaulttheme = new EventEmitter<boolean>();
@Output()
redtheme = new EventEmitter<boolean>();
onChange(eventValue: boolean){
this.toggleDarkTheme.emit(eventValue);
}
constructor(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 //监测路由变化
ngOnInit() {
}
ngOnDestroy(){
}
integrityDetails(width,zong){
let style:any = {}
style.width = (width/zong)*100 +'%';
return style
}
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 (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
})
}
//退出系统
signOut = () => {
let out = confirm("您确定要退出吗")
if(out) {
this.http.post('/api/Account/SignOut',{}).subscribe(
data=> {
this.token.delete()
sessionStorage.clear()
window.localStorage.clear()
const config = new MatSnackBarConfig();
config.verticalPosition = 'bottom';
config.duration = 3000
this.snackBar.open('成功退出','确定',config);
}
)
}
}
//修改密码
changpsw() {
let dialogRef = this.dialog.open(ChangepasswordComponent,
{width:'348px'});
dialogRef.afterClosed().subscribe();
}
}
Write Preview
Loading…
Cancel
Save