diff --git a/package-lock.json b/package-lock.json index a2bec11..30ebda3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -236,14 +236,14 @@ } }, "@angular/animations": { - "version": "9.0.0", - "resolved": "https://registry.npm.taobao.org/@angular/animations/download/@angular/animations-9.0.0.tgz", - "integrity": "sha1-jSuFLFJzvMFh0T+C+q81ZqtWKVE=" + "version": "9.1.12", + "resolved": "https://registry.npm.taobao.org/@angular/animations/download/@angular/animations-9.1.12.tgz", + "integrity": "sha1-HJwaeSvktSsZbKseXIi9MZtgcW0=" }, "@angular/cdk": { - "version": "9.0.0", - "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-9.0.0.tgz", - "integrity": "sha1-VzSBeulwRPkNME+g8lycGn+gv5Y=", + "version": "9.2.4", + "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-9.2.4.tgz", + "integrity": "sha1-hBOVi9J15MNL47lvVkRGcd0wupM=", "requires": { "parse5": "^5.0.0" }, @@ -444,9 +444,9 @@ "dev": true }, "@angular/material": { - "version": "9.0.0", - "resolved": "https://registry.npm.taobao.org/@angular/material/download/@angular/material-9.0.0.tgz", - "integrity": "sha1-ZVv9TUBHM36ESAufkr6Oga83W5I=" + "version": "9.2.4", + "resolved": "https://registry.npm.taobao.org/@angular/material/download/@angular/material-9.2.4.tgz", + "integrity": "sha1-JmbvYG+7iNYPji8YxeT5Sj3Vctg=" }, "@angular/platform-browser": { "version": "9.0.0", @@ -16640,7 +16640,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -16683,7 +16684,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -16694,7 +16696,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -16811,7 +16814,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -16823,6 +16827,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -16852,6 +16857,7 @@ "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -16870,6 +16876,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -16972,6 +16979,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -17057,7 +17065,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -17093,6 +17102,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -17112,6 +17122,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -17155,12 +17166,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -17598,7 +17611,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -17758,6 +17772,7 @@ "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -17776,6 +17791,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -17878,6 +17894,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -17963,7 +17980,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -17999,6 +18017,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -18062,12 +18081,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index 6c9be3c..3fce73c 100644 --- a/package.json +++ b/package.json @@ -11,14 +11,14 @@ }, "private": true, "dependencies": { - "@angular/animations": "^9.0.0", - "@angular/cdk": "^9.0.0", + "@angular/animations": "^9.1.12", + "@angular/cdk": "^9.2.4", "@angular/common": "~9.0.0", "@angular/compiler": "~9.0.0", "@angular/core": "~9.0.0", "@angular/fire": "^5.3.0", "@angular/forms": "~9.0.0", - "@angular/material": "^9.0.0", + "@angular/material": "^9.2.4", "@angular/platform-browser": "~9.0.0", "@angular/platform-browser-dynamic": "~9.0.0", "@angular/router": "~9.0.0", diff --git a/src/app/my-paginator.ts b/src/app/my-paginator.ts new file mode 100644 index 0000000..9d5ecbb --- /dev/null +++ b/src/app/my-paginator.ts @@ -0,0 +1,29 @@ +import { MatPaginatorIntl } from '@angular/material/paginator'; + + +const dutchRangeLabel = (page: number, pageSize: number, length: number) => { + if (length === 0 || pageSize === 0) { return `0 到 ${length}`; } + length = Math.max(length, 0); + const startIndex = page * pageSize; + const endIndex = startIndex < length ? + Math.min(startIndex + pageSize, length) : + startIndex + pageSize; + return `${startIndex + 1} - ${endIndex} / ${length}条`; + +} + +export function myPaginator() { + + const paginatorIntl = new MatPaginatorIntl(); + + paginatorIntl.itemsPerPageLabel = '每页条数:'; + + paginatorIntl.nextPageLabel = '下一页:'; + + paginatorIntl.previousPageLabel = '上一页:'; + + paginatorIntl.getRangeLabel = dutchRangeLabel; + + return paginatorIntl; + +} diff --git a/src/app/ui/basicinfo-look/basicinfo.component.html b/src/app/ui/basicinfo-look/basicinfo.component.html index 61556ec..045671a 100644 --- a/src/app/ui/basicinfo-look/basicinfo.component.html +++ b/src/app/ui/basicinfo-look/basicinfo.component.html @@ -111,11 +111,11 @@
-
+
-
+
diff --git a/src/app/ui/basicinfo-look/basicinfo.component.scss b/src/app/ui/basicinfo-look/basicinfo.component.scss index 658074b..4a3260c 100644 --- a/src/app/ui/basicinfo-look/basicinfo.component.scss +++ b/src/app/ui/basicinfo-look/basicinfo.component.scss @@ -106,6 +106,7 @@ } } .bottombox{ + color: white!important; // height:400px; width: 100%; // background-color: skyblue; @@ -204,7 +205,7 @@ table{ .tankinfo{ display: block; width: 100%; - // height: 45px; + border: 0px; text-align: center; } // .adddeviceinfo{ @@ -268,4 +269,14 @@ textarea { .mat-expansion-panel{ background-color:transparent!important +} + +textarea,table,td,th,tr,input{ + background-color: transparent; + border-collapse: collapse!important; + color: white!important +} +.mat-tab-label-content{ + color: white!important; + opacity: 1!important; } \ No newline at end of file diff --git a/src/app/ui/function-division-look/addPartition.html b/src/app/ui/function-division-look/addPartition.html new file mode 100644 index 0000000..80b063c --- /dev/null +++ b/src/app/ui/function-division-look/addPartition.html @@ -0,0 +1,23 @@ +
创建建筑功能分区
+
+ + + + + + {{item.name}} + + + +

暂无数据,请您创建基本信息建筑模块

+ +
+ + +
+ + +
\ No newline at end of file diff --git a/src/app/ui/function-division-look/addPartitionAttribute.html b/src/app/ui/function-division-look/addPartitionAttribute.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/ui/function-division-look/function-division.component.html b/src/app/ui/function-division-look/function-division.component.html new file mode 100644 index 0000000..21de153 --- /dev/null +++ b/src/app/ui/function-division-look/function-division.component.html @@ -0,0 +1,106 @@ +
+
+ +
+ + + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + 区域 + + + + 面积 + + + + + 基本情况 + +
+

暂无数据

+
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + 区域 + + + + 面积 + + + + + 基本情况 + +
+
+ + + +
\ No newline at end of file diff --git a/src/app/ui/function-division-look/function-division.component.scss b/src/app/ui/function-division-look/function-division.component.scss new file mode 100644 index 0000000..e74bcf1 --- /dev/null +++ b/src/app/ui/function-division-look/function-division.component.scss @@ -0,0 +1,32 @@ +.content { + width: 100%; + height: 90%; + overflow-y: auto; + padding: 10px 0 0 10px; + display: flex; +} +.tableContent { + margin-left: 10px; + width: 100%; + height: 100%; + table { + width: 90%; + text-align: center; + margin: 0 auto; + .cdk-header-cell { + text-align: center; + } + textarea { + border-radius: 5px; + padding: 5px; + width: 80%; + height: 36px; + resize: none; + } + } +} + +//icon统一样式 +.mat-icon { + cursor:pointer; +} \ No newline at end of file diff --git a/src/app/ui/function-division-look/function-division.component.ts b/src/app/ui/function-division-look/function-division.component.ts new file mode 100644 index 0000000..808d6d9 --- /dev/null +++ b/src/app/ui/function-division-look/function-division.component.ts @@ -0,0 +1,248 @@ +import { Component, OnInit, Inject } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { Router,ActivatedRoute } from '@angular/router'; + + + +@Component({ + selector: 'app-function-division-look', + templateUrl: './function-division.component.html', + styleUrls: ['./function-division.component.scss'] +}) +export class FunctionDivisionLookComponent implements OnInit { + + constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } + + ngOnInit(): void { + this.companyId = this.route.snapshot.queryParams.id + this.getAllCompany() + this.getAllBuilding() + } + + displayedColumns: string[] = ['checked', 'region', 'measure', 'situation']; + + companyId:any; //单位编号 + companyFunctionalZoning:any=[]; //所有单位功能分区属性 + selectFunctionalZoning:any=[]; //选中的单位功能分区属性 + + //获得所有单位功能分区属性 + getAllCompany () { + let companyId = this.route.snapshot.queryParams.id + this.http.get('/api/CompanyFunctionalDivisions',{params:{ + companyId:companyId + }}).subscribe((data:any)=>{ + this.companyFunctionalZoning = data + this.selectFunctionalZoning = [] + }) + } + + //新建单位功能分区属性 + addCompany () { + let companyId = this.route.snapshot.queryParams.id + let data = {companyId:companyId, region:'', area:0, details:''} + this.companyFunctionalZoning.push(data) + this.preservation() + } + + //保存单位功能分区属性 + preservation () { + let companyId = this.route.snapshot.queryParams.id + // console.log(123,companyId) + if (this.companyFunctionalZoning.length) { + this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ + companyId:companyId + }}).subscribe(data=>{ + this.getAllCompany() + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('数据更新成功','确定',config); + }) + } + } + + //单位功能分区checked选择 + changeCompany (ele,e) { + if (e.checked) { + this.selectFunctionalZoning.push(ele.id) + } else { + this.selectFunctionalZoning.splice(this.selectFunctionalZoning.findIndex(item => item === ele.id), 1) + } + } + + //删除单位功能分区属性 + delete () { + let companyId = this.route.snapshot.queryParams.id + if (this.selectFunctionalZoning.length) { + let isDelete = confirm('您确定要删除吗') + if (isDelete) { + this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ + companyId:companyId + }}).subscribe(data=>{ + const options = { + headers: new HttpHeaders({'Content-Type': 'application/json',}), + body:this.selectFunctionalZoning} + this.http.delete(`/api/CompanyFunctionalDivisions/Batch`,options).subscribe(data=>{ + this.getAllCompany() + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('数据更新成功','确定',config); + }) + }) + } + } else if (!this.selectFunctionalZoning.length) { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请选择单位功能分区','确定',config); + } + } + + + + + + //建筑功能分区↓ + allBuilding:any = []; //所有建筑 + allBuildingFunctionalZoning:any = []; //所有建筑的功能分区 + selectBuildingFunctionalZoning:any = []; //选中的建筑的功能分区 + + //获得所有建筑 + getAllBuilding () { + let companyId = this.route.snapshot.queryParams.id + this.http.get(`/api/Buildings`,{params:{ + companyId:companyId + }}).subscribe((data:any)=>{ + if (data.length) { + this.allBuilding = data + this.allBuilding.forEach(element => { //为每个建筑添加一个 功能分区对象 + element.functionalZoning = null + }); + this.getAllBuildingFunctionalZoning() + } + }) + } + + //获得所有建筑的功能分区 + getAllBuildingFunctionalZoning () { + this.selectBuildingFunctionalZoning = [] + this.allBuildingFunctionalZoning = [] + this.allBuilding.forEach(element => { + let data={buildingId: element.id} + this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ + if (data.length) { + element.functionalZoning = data + this.selectBuildingFunctionalZoning.push([]) //拥有建筑功能分区的提前push空数组 + this.allBuildingFunctionalZoning.push(element) } + }) + }); + } + + //封装函数刷新当前建筑功能分区 + updateCurrent (e,index) { + let data= {buildingId: e.id} + this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ + this.selectBuildingFunctionalZoning[index] = [] + this.allBuildingFunctionalZoning[index].functionalZoning = data + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('数据更新成功','确定',config); + }) + } + + //创建建筑功能分区 + addPartition () { + } + + //创建建筑功能分区属性 + addBuilding (e,index) { + let data = {buildingId:e.id, region:'', area:0, details:''} + this.http.post('/api/BuildingFunctionalDivisions',data).subscribe(data=>{ + this.preservationBuilding(e,index) + }) + } + + //保存建筑功能分区属性 + preservationBuilding (e,index) { + let data ={buildingId:e.id} + this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ + this.updateCurrent(e,index) + }) + } + + //建筑功能分区checked选择 + changeBuilding (ele,e,index) { + if (e.checked) { + this.selectBuildingFunctionalZoning[index].push(ele.id) + } else { + this.selectBuildingFunctionalZoning[index].splice(this.selectBuildingFunctionalZoning[index].findIndex(item => item === ele.id), 1) + } + } + + //删除建筑功能分区 + deleteBuilding (e,index) { + if (this.selectBuildingFunctionalZoning[index].length) { + let isDelete = confirm('您确定要删除吗') + if (isDelete) { + let data ={buildingId:e.id} + this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ + const options = { + headers: new HttpHeaders({'Content-Type': 'application/json',}), + body:this.selectBuildingFunctionalZoning[index], + params:{buildingId:e.id}} + this.http.delete(`/api/BuildingFunctionalDivisions/Batch`,options).subscribe(data=>{ + this.selectBuildingFunctionalZoning[index].forEach((element,newIndex) => { + this.allBuildingFunctionalZoning[index].functionalZoning.splice(this.allBuildingFunctionalZoning[index].functionalZoning.findIndex(item=>item.id==element),1) + if (newIndex==this.selectBuildingFunctionalZoning[index].length-1) { + if (this.allBuildingFunctionalZoning[index].functionalZoning.length) { + this.updateCurrent(e,index) + } else { + this.selectBuildingFunctionalZoning.splice(index,1) + this.allBuildingFunctionalZoning.splice(index,1)} + } + }); + + + }) + }) + } + } else if (!this.selectBuildingFunctionalZoning[index].length) { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请选择建筑功能分区','确定',config); + } + } + + + + + +} + + + + + +//暂时无用 +@Component({ + selector: 'app-addPartitionAttribute', + templateUrl: './addPartitionAttribute.html', + styleUrls: ['./function-division.component.scss'] +}) +export class addPartitionAttribute2 { + + constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data) { } + + ngOnInit(): void { + + } + + + +} diff --git a/src/app/ui/ui-routing.module.ts b/src/app/ui/ui-routing.module.ts index 4f046a4..639a39e 100644 --- a/src/app/ui/ui-routing.module.ts +++ b/src/app/ui/ui-routing.module.ts @@ -1,3 +1,11 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-27 18:06:29 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-27 18:27:40 + */ import { Routes, RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { CollectionToolsComponent } from './collection-tools/collection-tools.component'; @@ -8,6 +16,8 @@ import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.compo import { RealCasesComponent } from './real-cases/real-cases.component'; import { SimilarPlansComponent } from './similar-plans/similar-plans.component'; import { DataPushComponent } from './data-push/data-push.component'; +import { FunctionDivisionLookComponent } from './function-division-look/function-division.component' + import { BasicinfoLookComponent } from './basicinfo-look/basicinfo.component'; import { AllaroundComponent } from './allaround/allaround.component'; import { FireFightingDeviceLookComponent } from './fire-fighting-device-look/fire-fighting-device.component'; @@ -21,6 +31,7 @@ const routes: Routes = [ { path: 'plan', component:DataPushComponent, //子级路由 children:[ { path: 'planarGraph', component:planComponent}, + {path:'FunctionDivisionLookComponent', component:FunctionDivisionLookComponent}, { path: 'basicInfo', component:BasicinfoLookComponent}, { path: 'allaround', component:AllaroundComponent}, { path: 'fire-fighting-device', component:FireFightingDeviceLookComponent}, diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index 9f34a9e..ace2814 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -64,6 +64,7 @@ import { RealCasesComponent } from './real-cases/real-cases.component'; import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.component'; import { CountdownModule } from 'ngx-countdown'; import { DataPushComponent } from './data-push/data-push.component'; +import { FunctionDivisionLookComponent} from './function-division-look/function-division.component'; import { BasicinfoLookComponent } from './basicinfo-look/basicinfo.component'; import { LookMaster2 } from './basicinfo-look/lookmaster.component'; import { AllaroundComponent } from './allaround/allaround.component'; @@ -75,9 +76,20 @@ import { KeySiteLookComponent } from './key-site-look/key-site.component'; import { KeySiteImgs2 } from './key-site-look/keysiteimgs.component'; import { RealisticPictureLookComponent, previewImg3 } from './realistic-picture-look/realistic-picture.component'; import { ThreetypePlanComponent } from './threetype-plan/threetype-plan.component'; +import { myPaginator } from '../my-paginator'; + +import { from } from 'rxjs'; @NgModule({ - declarations: [SafeHtmlPipe,GisComponent,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, DisposalNodeComponent, DangerousComponent, SimilarPlansComponent, RealCasesComponent, PlanAssistanceComponent,planComponent, DataPushComponent,BasicinfoLookComponent,LookMaster2,AllaroundComponent,ImgDetails,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,KeySiteLookComponent,KeySiteImgs2,previewBigImg2,RealisticPictureLookComponent,previewImg3, ThreetypePlanComponent], + declarations: [SafeHtmlPipe,GisComponent,UiComponent,PersonaldataComponent, + ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent, + WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent, + ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, DisposalNodeComponent, + DangerousComponent, SimilarPlansComponent, RealCasesComponent, PlanAssistanceComponent,planComponent, + DataPushComponent,FunctionDivisionLookComponent,BasicinfoLookComponent,LookMaster2,AllaroundComponent, + ImgDetails,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,KeySiteLookComponent,KeySiteImgs2, + previewBigImg2,RealisticPictureLookComponent,previewImg3, ThreetypePlanComponent], + imports: [ CommonModule, @@ -133,6 +145,7 @@ import { ThreetypePlanComponent } from './threetype-plan/threetype-plan.componen exports:[ CollectionToolsComponent - ] + ], + providers: [ { provide: MatPaginatorIntl, useValue: myPaginator() } ] }) export class UiModule { } diff --git a/src/styles.scss b/src/styles.scss index 9182b55..d68e5ab 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -86,4 +86,7 @@ table td.mat-footer-cell:last-of-type{ } .mat-tab-label,.mat-tab-label,.mat-tab-label-content { color: #fff; +} +.mat-tab-label-content{ + color: white; } \ No newline at end of file