From 7469c4a15e6667f4dce5418a137b84818fe5094f Mon Sep 17 00:00:00 2001 From: "lijie.hu" Date: Fri, 22 Mar 2024 14:47:11 +0800 Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E5=AD=90=E7=BA=A7=E8=8F=9C=E5=8D=95=E5=A4=AA=E5=A4=9A?= =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E6=8D=A2=E8=A1=8C=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/routes/data-v/card/card.component.ts | 19 ++- .../data-v/lj-card/lj-card.component.html | 9 ++ .../data-v/lj-card/lj-card.component.less | 48 ++++++ .../data-v/lj-card/lj-card.component.ts | 29 ++++ .../routes/data-v/menu/lj-menu.interface.ts | 1 + .../navigation/navigation.component.html | 83 ++++++----- .../navigation/navigation.component.less | 70 ++------- .../data-v/navigation/navigation.component.ts | 68 +++++++-- src/app/routes/data-v/s1/s1.component.html | 40 ++--- .../ag-grid-component.component.html | 30 +++- .../ag-grid-component.component.ts | 20 +-- .../lj-ag-grid-component.component.html | 30 ++++ .../lj-ag-grid-component.component.less | 18 +++ .../lj-ag-grid-component.component.ts | 64 ++++++++ .../pagination-style/pagination.less | 94 ++++++++++++ .../workstation/workstation.component.html | 46 ++++-- .../workstation/workstation.component.ts | 140 +++++++++++------- src/assets/anticon-appstore.svg | 1 + 18 files changed, 587 insertions(+), 223 deletions(-) create mode 100644 src/app/routes/data-v/lj-card/lj-card.component.html create mode 100644 src/app/routes/data-v/lj-card/lj-card.component.less create mode 100644 src/app/routes/data-v/lj-card/lj-card.component.ts create mode 100644 src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html create mode 100644 src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less create mode 100644 src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts create mode 100644 src/app/routes/data-v/workstation/lj-ag-grid-component/pagination-style/pagination.less create mode 100644 src/assets/anticon-appstore.svg diff --git a/src/app/routes/data-v/card/card.component.ts b/src/app/routes/data-v/card/card.component.ts index 0004733..946769c 100644 --- a/src/app/routes/data-v/card/card.component.ts +++ b/src/app/routes/data-v/card/card.component.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { Component, Input, Output, EventEmitter } from '@angular/core'; import { SHARED_IMPORTS } from '@shared'; -import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; +import { NzIconModule } from 'ng-zorro-antd/icon'; @Component({ selector: 'data-v-card', standalone: true, @@ -13,31 +13,30 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
{{ title }}
-
+
  • - +
- -
- + +
- + `, styleUrls: ['./card.component.less'], - imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS], + imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS] }) export class DataVCardComponent { @Input() showSetting = false; @Input() - optionsList: { label: string; checked: boolean; }[] = []; + optionsList: Array<{ label: string; checked: boolean }> = []; // 定义输出事件 - @Output() onCheckedItemsChange = new EventEmitter<{ label: string, checked: boolean }[]>(); + @Output() onCheckedItemsChange = new EventEmitter>(); @Input() title: string = ''; getCheckedItems() { return this.optionsList.filter(option => option.checked); diff --git a/src/app/routes/data-v/lj-card/lj-card.component.html b/src/app/routes/data-v/lj-card/lj-card.component.html new file mode 100644 index 0000000..33ca012 --- /dev/null +++ b/src/app/routes/data-v/lj-card/lj-card.component.html @@ -0,0 +1,9 @@ +
+ + +
+
{{ title }}
+
+ + +
diff --git a/src/app/routes/data-v/lj-card/lj-card.component.less b/src/app/routes/data-v/lj-card/lj-card.component.less new file mode 100644 index 0000000..3e1fb0b --- /dev/null +++ b/src/app/routes/data-v/lj-card/lj-card.component.less @@ -0,0 +1,48 @@ +.card-content-title { + width:fit-content; + height:fit-content; + padding: 5px 20px 0; /* 文本的内边距 */ + font-size: 16px; /* 根据需要调整字体大小 + font-weight: bold; /* 字体加粗 */ + color: #29b6f6; /* 字体颜色 */ + text-align: center; /* 文本居中对齐 */ + background-color: #19426E; /* 设置背景颜色为深蓝色 */ + border: 1px solid #1f6f97; /* 设置边框颜色 */ + border-radius: 10px 10px 0 0; /* 上面是圆角，下面是直角 */ + box-shadow: inset 0 0 10px #1f6f97; /* 内阴影效果 */ + } + +.card-content { + overflow: hidden; + margin-bottom: 0.5rem; + //height: 18rem; + padding: 1rem 1.5rem; + //position: relative; + background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); + background-repeat: no-repeat; /* 防止背景图片重复 */ + background-position: center; + // background-position: top; + background-size: 100% 100%; + // background-size: cover; + // background-size: cover; + // background-size: contain; /* 保证背景图片完整显示 */ + + .card-content-title { + display: flex; + margin-bottom: 0.5rem; + font-size: 18px; + font-weight: 600; + color: #74FAFB; + + .card-content-l { + flex: 1; + align-self: flex-start; + + /* 占据剩余空间 */ + } + + .card-content-r { + align-self: flex-end; + } + } +} \ No newline at end of file diff --git a/src/app/routes/data-v/lj-card/lj-card.component.ts b/src/app/routes/data-v/lj-card/lj-card.component.ts new file mode 100644 index 0000000..8d07e93 --- /dev/null +++ b/src/app/routes/data-v/lj-card/lj-card.component.ts @@ -0,0 +1,29 @@ +// parent.component.ts +import { CommonModule } from '@angular/common'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { SHARED_IMPORTS } from '@shared'; +import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +@Component({ + selector: 'lj-data-v-card', + standalone: true, + templateUrl: './lj-card.component.html', + styleUrls: ['./lj-card.component.less'], + imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS] +}) +export class LJDataVCardComponent { + @Input() showSetting = false; + @Input() + optionsList: Array<{ label: string; checked: boolean }> = []; + // 定义输出事件 + @Output() onCheckedItemsChange = new EventEmitter>(); + @Input() title: string = ''; + getCheckedItems() { + return this.optionsList.filter(option => option.checked); + } + + onCheckChange() { + const checkedItems = this.getCheckedItems(); + this.onCheckedItemsChange.emit(checkedItems); + } +} diff --git a/src/app/routes/data-v/menu/lj-menu.interface.ts b/src/app/routes/data-v/menu/lj-menu.interface.ts index 1cd85ea..0db0243 100644 --- a/src/app/routes/data-v/menu/lj-menu.interface.ts +++ b/src/app/routes/data-v/menu/lj-menu.interface.ts @@ -17,4 +17,5 @@ export interface Menu { children?: Menu[]; acl?: any; id: string; + childShowType: string; //展示类型 } diff --git a/src/app/routes/data-v/navigation/navigation.component.html b/src/app/routes/data-v/navigation/navigation.component.html index 5f37c08..2453d1a 100644 --- a/src/app/routes/data-v/navigation/navigation.component.html +++ b/src/app/routes/data-v/navigation/navigation.component.html @@ -1,47 +1,52 @@
diff --git a/src/app/routes/data-v/navigation/navigation.component.less b/src/app/routes/data-v/navigation/navigation.component.less index 10de6dc..09f867a 100644 --- a/src/app/routes/data-v/navigation/navigation.component.less +++ b/src/app/routes/data-v/navigation/navigation.component.less @@ -2,52 +2,14 @@ .navigation-container { // overflow-x: auto; /* 水平方向上的滚动条 */ display: flex; - flex-direction: row; + // flex-flow: row wrap; /* 允许换行 */ + flex-wrap: nowrap; /* 不允许换行 */ // width: 100%; padding-left: 2rem; - // white-space: nowrap; /* 防止菜单项换行 */ - white-space: normal; + white-space: nowrap; /* 防止菜单项换行 */ + // white-space: normal; } -// .navigation-container .dropdown-submenu { -// white-space: normal; /* 允许内容换行 */ -// } - -// /* 调整滚动条大小 */ -// ::-webkit-scrollbar { -// width: 8px; /* 调整滚动条的宽度 */ -// height: 8px; /* 调整滚动条的高度 */ -// // } - -// /* 调整滚动条轨道的样式 */ -// ::-webkit-scrollbar-track { -// background: #f1f1f1; -// border-radius: 4px; -// } - -// /* 调整滚动条滑块的样式 */ -// ::-webkit-scrollbar-thumb { -// background: #888; -// border-radius: 4px; -// } - -// /* 当鼠标悬停在滑块上时，改变滑块的颜色 */ -// ::-webkit-scrollbar-thumb:hover { -// background: #555; -// } - -// /* 调整菜单与滚动条的间距 */ -// .navigation-container ul { -// padding-right: 12px; /* 增加右侧内边距以增加间距 */ -// } - -// .dropdown-submenu { -// display: inline-block; /* 使菜单项在一行内显示 */ -// } - -// .scrollable-menu ul { - // padding-right: 20px; /* 右侧内边距，根据需要调整 */ -// } [nz-button] { margin-right: 8px; @@ -58,35 +20,27 @@ margin-right: 0; } -// ul.nz-menu { -// padding-left: 0; -// } - ul { - display: flex; + display: inline-flex; flex-wrap: wrap; /* 允许子元素换行 */ - // justify-content: space-around; - // width: max-content; - // margin-right: auto; margin-bottom: 10px; - - // nz-menu { padding-top: 0; padding-left: 0; + list-style-type: none; /* 移除标记 */ - // } + li { // display: flex; flex-wrap: wrap; margin-right: 10px; - margin-bottom: 10px; + margin-bottom: 30px; a { clear: both; - display: block; - width: 100%; + // display: inline-block; + // width: 100%; min-width: 4rem; margin-right: 1rem; padding: 0.5rem 1.5rem; @@ -108,6 +62,10 @@ ul { } .dropdown-menu { + display: inline-flex; + flex-wrap: nowrap; + margin-right: 10px; + margin-bottom: 10px; color: #fff; background-color: #337AB7; } diff --git a/src/app/routes/data-v/navigation/navigation.component.ts b/src/app/routes/data-v/navigation/navigation.component.ts index ffec37e..bd2c8c8 100644 --- a/src/app/routes/data-v/navigation/navigation.component.ts +++ b/src/app/routes/data-v/navigation/navigation.component.ts @@ -22,8 +22,10 @@ export class DataVNavigationComponent implements OnInit { private readonly modal = inject(ModalHelper); private readonly router = inject(Router); menuNetDataList: Menu[] = []; + visibleMenuList: Menu[] = []; // 新建一个用于存放要显示的菜单项的列表 // 添加一个属性来标记是否有菜单被选中 selectedParentMenu: Menu | undefined; + imageUrl: string = 'assets/dashboard/menu_btn_l.png'; title: string = 'Label'; @@ -48,14 +50,31 @@ export class DataVNavigationComponent implements OnInit { parentId: null, clientId: 'Platform_Datav', acl: null, + childShowType: 'menu', id: '3a1167f1-a86c-194d-eabf-258993a337ac' } ]; this.menuService.getMenus().subscribe((menus: Menu[]) => { + for (let menu of menus) { + // console.log(menu); + if (menu.children && menu.children.length > 0) { + for (let tempMenu of menu.children) { + tempMenu.childShowType = 'menu'; + if (tempMenu.children) { + // 检查 tempMenu 是否有 children 属性 + for (let tempChildMenu of tempMenu.children) { + tempChildMenu.childShowType = 'drop-down'; + console.log(tempChildMenu.text); + console.log(tempChildMenu.children); + } + } + this.menuNetDataList.push(tempMenu); + } + } + } console.log('this.menuNetDataList'); - this.menuNetDataList = this.menuNetDataList.concat(menus); - + this.updateVisibleMenuList(); // 更新要显示的菜单列表 console.log(this.menuNetDataList); // this.menuList; }); @@ -67,17 +86,39 @@ export class DataVNavigationComponent implements OnInit { // console.log(this.hasSelectedMenu); // } add(): void {} + // 计算属性，返回需要显示的菜单列表 + + // 更新要显示的菜单列表的方法 + updateVisibleMenuList(): void { + this.visibleMenuList = this.menuNetDataList.filter( + menu => !this.selectedParentMenu || menu.menuCode == 'Home' || (this.selectedParentMenu && this.selectedParentMenu.menuCode == 'Home') + ); + this.menuNetDataList.forEach(menu => { + if ( + menu.childShowType == 'menu' && + this.selectedParentMenu && + menu.menuCode == this.selectedParentMenu.menuCode && + menu.menuCode !== 'Home' + ) { + this.visibleMenuList = this.visibleMenuList.concat(menu.children || []); + } + }); + console.log('visibleMenuList'); + console.log(this.visibleMenuList); + } menuOver(menu: any, $event: any) {} isActive(menu: any) {} navigate(menu: any) { + console.log('点击menu'); + console.log(menu); // 清除所有菜单的选中状态 this.menuNetDataList.forEach(m => (m.selected = false)); // 如果是一级菜单并且有子菜单，则导航到新页面并传递数据 - if (menu.link && menu.rootFlag && menu.children && menu.children.length > 0) { + if (menu.link && menu.childShowType == 'menu' && menu.children && menu.children.length > 0) { console.log('来时跳转2级'); console.log(menu.link); console.log(menu.children); @@ -85,19 +126,24 @@ export class DataVNavigationComponent implements OnInit { // 设置当前菜单为选中状态 menu.selected = true; this.selectedParentMenu = menu; - - this.router.navigate([menu.link, menu.id], { - state: { menu: menu.children } - }); + if (menu.link) + this.router.navigate([menu.link, menu.id], { + state: { menu: menu.children } + }); } else if (menu.menuCode == 'Home') { menu.selected = true; this.selectedParentMenu = menu; - this.router.navigateByUrl(menu.link); + if (menu.link) this.router.navigateByUrl(menu.link); } else { menu.selected = true; - this.router.navigate([menu.link, menu.id], { - state: { menu: menu.children } - }); + console.log('路由'); + console.log(menu.link); + if (menu.link) + this.router.navigate([menu.link, menu.id], { + state: { menu: menu.children } + }); } + // 根据新的选中项更新要显示的菜单列表 + this.updateVisibleMenuList(); } } diff --git a/src/app/routes/data-v/s1/s1.component.html b/src/app/routes/data-v/s1/s1.component.html index 1ae63b0..422ce7e 100644 --- a/src/app/routes/data-v/s1/s1.component.html +++ b/src/app/routes/data-v/s1/s1.component.html @@ -18,24 +18,24 @@ - + - +
化验效率： - + （16/25）
完 成 率 ： - + （12/20）
@@ -59,27 +59,33 @@
- +
@for (item of chartConfig.optionsCheckList; track item) { -
- - -
+
+ + +
}
@for (item of chartConfig.optionBottomList; track item) { -
-
- +
+
+ +
-
}
-
\ No newline at end of file + diff --git a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html index 2aae1ce..961e691 100644 --- a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html +++ b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html @@ -1,13 +1,27 @@ - - +
共 {{ pageRowTotal }} 项数据
- -
\ No newline at end of file + + diff --git a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts index 284aeaa..ae345f4 100644 --- a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts +++ b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts @@ -1,17 +1,13 @@ import { Component, OnInit, ViewChild, Input } from '@angular/core'; - import { AgGridAngular } from 'ag-grid-angular'; -import { ColDef } from 'ag-grid-community'; -import { - GridApi, -} from 'ag-grid-community'; +import { ColDef, GridApi } from 'ag-grid-community'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; @Component({ selector: 'app-ag-grid-component', imports: [AgGridAngular, NzPaginationModule], standalone: true, templateUrl: './ag-grid-component.component.html', - styleUrls: ["./pagination-style/pagination.less"] + styleUrls: ['./pagination-style/pagination.less'] }) export class AgGridComponentComponent implements OnInit { @ViewChild('myGrid') grid!: AgGridAngular; @@ -25,17 +21,17 @@ export class AgGridComponentComponent implements OnInit { //默认列配置 @Input() defaultColDef: ColDef = { width: 130, - editable: false, + editable: false }; /** 列头 */ @Input() columnDefs: ColDef[] = []; /**行数据 */ @Input() rowData: any[] = []; /**表格主题 */ - @Input() gridThemeClass: string = "ag-theme-quartz" - @Input() paginationThemeClass: string = "ag-theme-quartz" + @Input() gridThemeClass: string = 'ag-theme-quartz'; + @Input() paginationThemeClass: string = 'ag-theme-quartz'; /** 构造函数 */ - constructor() { } + constructor() {} /**初始化 */ ngOnInit() { console.log('-----表格初始化-----'); @@ -46,11 +42,10 @@ export class AgGridComponentComponent implements OnInit { //每页数 nzPageSizeChange(_pageSize: any) { this.pageSize = _pageSize; - } //当前页 nzPageIndexChange(_pageIndex: any) { - console.log("nzPageIndexChange" + _pageIndex) + console.log(`nzPageIndexChange${_pageIndex}`); if (this.grid.api) { if (_pageIndex == 1) { /**去首页 */ @@ -61,5 +56,4 @@ export class AgGridComponentComponent implements OnInit { } } } - } diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html new file mode 100644 index 0000000..6a4035f --- /dev/null +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html @@ -0,0 +1,30 @@ + + + + +
+ +
+
共 {{ pageRowTotal }} 项数据
+ +
+ diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less new file mode 100644 index 0000000..bde9ad9 --- /dev/null +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less @@ -0,0 +1,18 @@ +/* Core Grid CSS */ +@import 'ag-grid-community/styles/ag-grid.css'; +@import 'ag-grid-community/styles/ag-theme-quartz.css'; + +.custom-label { + display: inline-block; + padding: 10px 20px; /* 内边距 */ + font-size: 16px; /* 字体大小 */ + color: white; /* 文字颜色 */ + background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */ + border-radius: 10px 10px 0 0; /* 上方圆角 */ + } + + .my-grid-font { + font-size: 16px; + font-weight: bold; + } + \ No newline at end of file diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts new file mode 100644 index 0000000..43e919b --- /dev/null +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { AgGridAngular } from 'ag-grid-angular'; +import { ColDef, GridApi } from 'ag-grid-community'; +import { NzPaginationModule } from 'ng-zorro-antd/pagination'; + +import { LJDataVCardComponent } from '../../lj-card/lj-card.component'; +@Component({ + selector: 'lj-app-ag-grid-component', + imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent], + standalone: true, + templateUrl: './lj-ag-grid-component.component.html', + styleUrls: ['./pagination-style/pagination.less'] +}) +export class LjAgGridComponentComponent implements OnInit { + [x: string]: any; + @ViewChild('myGrid') grid!: AgGridAngular; + + /**每页数 */ + public pageSize!: number; + /**当前页 */ + public pageIndex!: number; + /**总数 */ + public pageRowTotal!: number; + + //默认列配置 + @Input() defaultColDef: ColDef = { + width: 130, + editable: false, + cellStyle: { 'font-weight': 'bold' } + }; + /** 列头 */ + @Input() columnDefs: ColDef[] = []; + /**行数据 */ + @Input() rowData: any[] = []; + /**表格主题 */ + @Input() gridThemeClass: string = 'ag-theme-quartz'; + @Input() paginationThemeClass: string = 'ag-theme-quartz'; + /** 构造函数 */ + constructor() {} + /**初始化 */ + ngOnInit() { + console.log('-----表格初始化-----'); + this.pageSize = 10; + this.pageIndex = 1; + this.pageRowTotal = this.rowData.length; + } + //每页数 + nzPageSizeChange(_pageSize: any) { + this.pageSize = _pageSize; + } + //当前页 + nzPageIndexChange(_pageIndex: any) { + console.log(`nzPageIndexChange${_pageIndex}`); + if (this.grid.api) { + if (_pageIndex == 1) { + /**去首页 */ + this.grid.api.paginationGoToFirstPage(); + } else { + /** 页面跳转 */ + this.grid.api.paginationGoToPage(_pageIndex); + } + } + } +} diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/pagination-style/pagination.less b/src/app/routes/data-v/workstation/lj-ag-grid-component/pagination-style/pagination.less new file mode 100644 index 0000000..35e93f4 --- /dev/null +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/pagination-style/pagination.less @@ -0,0 +1,94 @@ +/* 分页器 */ +.grid-pagination { + display: flex; + justify-content: space-between; + height: 32px; +} + +// 第几条 文字 +.grid-pagination ::ng-deep .ant-select-selection-item, +.ant-select-selector { + color: #00eff8; + border-color: #00eff8; + border-width: 2px; +} + +//总数 +.grid-pagination ::ng-deep .page-total-style { + font-size: medium; + font-weight: 700; + color: #00eff8; +} + +//页面尺寸选中 +::ng-deep .ant-select-item-option { + color: #00eff8 !important; +} + +//页面尺寸每项 +::ng-deep .ant-select-item-option-active div { + font-weight: 800 !important; + color: #00eff8 !important; +} + +//箭头 颜色 +.grid-pagination::ng-deep .anticon { + color: #00eff8; +} + +//页面尺寸选择 +.grid-pagination ::ng-deep .ant-select-selector { + color: #00eff8; + border-color: #00eff8; + border-width: 2px; + +} + +//前 link +.grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link { + color: #00eff8; + border-color: transparent; +} + +//中间的 item +.grid-pagination ::ng-deep .ant-pagination-item { + color: #00eff8; + border-color: #00eff8; + border-width: 2px; +} + +// disable 样式 +.grid-pagination ::ng-deep .ant-pagination-item a { + color: #00eff8 !important; +} + +.grid-pagination ::ng-deep .ant-pagination-item-active a { + color: black !important; + +} + +//前后箭头 +.grid-pagination ::ng-deep .ant-pagination-next button, + +.ant-pagination-prev button { + color: #00eff8; + border-color: transparent; +} + +//鼠标放上去的样式 +.grid-pagination ::ng-deep .ant-pagination-item-active:focus-visible, +.ant-pagination-item-active:hover, + +.ant-pagination-next:hover button, +.ant-pagination-prev:hover button { + border-color: #00eff8; + border-width: 2px; +} + +//选中样式 +.grid-pagination ::ng-deep .ant-pagination-item-active { + font-weight: 500; + background-color: #00eff8; + border-color: #00eff8; + border-width: 2px; +} \ No newline at end of file diff --git a/src/app/routes/data-v/workstation/workstation.component.html b/src/app/routes/data-v/workstation/workstation.component.html index 48a4992..9d20062 100644 --- a/src/app/routes/data-v/workstation/workstation.component.html +++ b/src/app/routes/data-v/workstation/workstation.component.html @@ -1,23 +1,39 @@
- - - - - + + - - + + + - - + - - +
diff --git a/src/app/routes/data-v/workstation/workstation.component.ts b/src/app/routes/data-v/workstation/workstation.component.ts index 2840076..c225c96 100644 --- a/src/app/routes/data-v/workstation/workstation.component.ts +++ b/src/app/routes/data-v/workstation/workstation.component.ts @@ -1,22 +1,30 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; - import { ModalHelper, _HttpClient } from '@delon/theme'; import { SHARED_IMPORTS } from '@shared'; import { AgGridAngular } from 'ag-grid-angular'; -import { ColDef } from 'ag-grid-community'; -import { - GridApi, -} from 'ag-grid-community'; +import { ColDef, GridApi } from 'ag-grid-community'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; +import { MqttService } from 'ngx-mqtt'; + +import { AgGridComponentComponent } from './ag-grid-component/ag-grid-component.component'; +import { GridButtonValueRenderer } from './grid-button/grid-button'; +import { LjAgGridComponentComponent } from './lj-ag-grid-component/lj-ag-grid-component.component'; import { DataVCardComponent } from '../card/card.component'; import { DataVTitleComponent } from '../title/title.component'; -import { GridButtonValueRenderer } from './grid-button/grid-button'; -import { AgGridComponentComponent } from './ag-grid-component/ag-grid-component.component'; -import { MqttService } from 'ngx-mqtt'; + @Component({ selector: 'app-data-v-workstation', standalone: true, - imports: [AgGridAngular, AgGridComponentComponent, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS], + imports: [ + AgGridAngular, + AgGridComponentComponent, + LjAgGridComponentComponent, + NzPaginationModule, + DataVCardComponent, + GridButtonValueRenderer, + DataVTitleComponent, + ...SHARED_IMPORTS + ], templateUrl: './workstation.component.html', styleUrls: ['./workstation.component.less'] }) @@ -28,7 +36,7 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { @ViewChild('myGrid') grid!: AgGridAngular; public defaultColDef: ColDef = { width: 170, - editable: false, + editable: false }; public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav'; @@ -44,63 +52,74 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { }, width: 90, sortable: true, - unSortIcon: true, field: "xh", - - + unSortIcon: true, + field: 'xh' }, - { headerName: '任务名称', unSortIcon: true, field: "rwmc", }, - { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 }, - { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 }, - { headerName: '计划完成时间', unSortIcon: true, field: "jhwcsj", minWidth: 170, flex: 1 }, - { headerName: '超期', width: 80, field: "sfcq", }, - { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, + { headerName: '任务名称', unSortIcon: true, field: 'rwmc' }, + { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 }, + { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 }, + { headerName: '计划完成时间', unSortIcon: true, field: 'jhwcsj', minWidth: 170, flex: 1 }, + { headerName: '超期', width: 80, field: 'sfcq' }, + { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer } ]; colDefs2: ColDef[] = [ { - headerName: '序号', valueGetter: function (params: any) { + headerName: '序号', + valueGetter: function (params: any) { return parseInt(params.node.id) + 1; - }, width: 90, unSortIcon: true, field: "xh", + }, + width: 90, + unSortIcon: true, + field: 'xh' }, - { headerName: '任务名称', unSortIcon: true, field: "rwmc", }, - { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 }, - { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 }, - { headerName: '当前状态', field: "dqzt", }, - { headerName: '当前节点', field: "dqjd", }, - { headerName: '实际完成时间', field: "sjwcsj", minWidth: 170, flex: 1 }, - { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, + { headerName: '任务名称', unSortIcon: true, field: 'rwmc' }, + { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 }, + { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 }, + { headerName: '当前状态', field: 'dqzt' }, + { headerName: '当前节点', field: 'dqjd' }, + { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 }, + { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer } ]; colDefs3: ColDef[] = [ { - headerName: '序号', valueGetter: function (params: any) { + headerName: '序号', + valueGetter: function (params: any) { return parseInt(params.node.id) + 1; - }, width: 90, unSortIcon: true, field: "xh", + }, + width: 90, + unSortIcon: true, + field: 'xh' }, - { headerName: '报警名称', unSortIcon: true, field: "bjmc", }, - { headerName: '报警等级', unSortIcon: true, field: "bjdg", }, - { headerName: '报警描述', unSortIcon: true, field: "bjms", minWidth: 170, flex: 1 }, - { headerName: '报警时间', unSortIcon: true, field: "bjsj", minWidth: 170, flex: 1 }, - { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, - - { headerName: '故障原因', field: "gzyy", }, - { headerName: '处理方法', field: "clff", }, - { headerName: '注意事项', field: "clff", }, + { headerName: '报警名称', unSortIcon: true, field: 'bjmc' }, + { headerName: '报警等级', unSortIcon: true, field: 'bjdg' }, + { headerName: '报警描述', unSortIcon: true, field: 'bjms', minWidth: 170, flex: 1 }, + { headerName: '报警时间', unSortIcon: true, field: 'bjsj', minWidth: 170, flex: 1 }, + { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }, + + { headerName: '故障原因', field: 'gzyy' }, + { headerName: '处理方法', field: 'clff' }, + { headerName: '注意事项', field: 'clff' } ]; // Column Definitions: Defines the columns to be displayed. colDefs4: ColDef[] = [ { - headerName: '序号', valueGetter: function (params: any) { + headerName: '序号', + valueGetter: function (params: any) { return parseInt(params.node.id) + 1; - }, width: 90, unSortIcon: true, field: "xh", + }, + width: 90, + unSortIcon: true, + field: 'xh' }, - { headerName: '通知时间', unSortIcon: true, field: "tzsj", minWidth: 170, flex: 1 }, - { headerName: '重要程度', unSortIcon: true, field: "zycd", }, - { headerName: '通知名称', unSortIcon: true, field: "tzmc", }, - { headerName: '通知内容', unSortIcon: true, field: "tznr", minWidth: 170, flex: 1 }, - { headerName: '附件', field: "fj", }, - { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, + { headerName: '通知时间', unSortIcon: true, field: 'tzsj', minWidth: 170, flex: 1 }, + { headerName: '重要程度', unSortIcon: true, field: 'zycd' }, + { headerName: '通知名称', unSortIcon: true, field: 'tzmc' }, + { headerName: '通知内容', unSortIcon: true, field: 'tznr', minWidth: 170, flex: 1 }, + { headerName: '附件', field: 'fj' }, + { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer } ]; client: any; @@ -110,16 +129,31 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { } ngOnInit(): void { - console.log('ngOnInit' + this.rowData.length); + console.log(`ngOnInit${this.rowData.length}`); for (var i = 1; i < 30; i++) { this.rowData.push({ - rwmc: '任务' + i, rwms: '任务描述' + i, kssj: '2024-1-' + i + ' 13:38:' + i * 11, jhwcsj: '2024-1-' + i + ' 13:38:' + i * 10, sfcq: '否', - dqzt: "正常", dqjd: "节点" + i, sjwcsj: '2024-1-' + i + ' 13:38:' + i * 27, bjmc: "报警5", bjms: "报警描述5", bjsj: '2024-1-' + i + ' 13:38:' + i * 12, - gzyy: "-", clff: "-", tzsj: '2024-1-' + i + ' 13:38:' + i * 19, zycd: "一般", tzmc: '系统提示', tznr: '账户登录', fj: "-", cz: "操作" + rwmc: `任务${i}`, + rwms: `任务描述${i}`, + kssj: `2024-1-${i} 13:38:${i * 11}`, + jhwcsj: `2024-1-${i} 13:38:${i * 10}`, + sfcq: '否', + dqzt: '正常', + dqjd: `节点${i}`, + sjwcsj: `2024-1-${i} 13:38:${i * 27}`, + bjmc: '报警5', + bjms: '报警描述5', + bjsj: `2024-1-${i} 13:38:${i * 12}`, + gzyy: '-', + clff: '-', + tzsj: `2024-1-${i} 13:38:${i * 19}`, + zycd: '一般', + tzmc: '系统提示', + tznr: '账户登录', + fj: '-', + cz: '操作' }); } - } ngAfterViewInit(): void { @@ -136,6 +170,4 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { // .createStatic(FormEditComponent, { i: { id: 0 } }) // .subscribe(() => this.st.reload()); } - - } diff --git a/src/assets/anticon-appstore.svg b/src/assets/anticon-appstore.svg new file mode 100644 index 0000000..d19f93d --- /dev/null +++ b/src/assets/anticon-appstore.svg @@ -0,0 +1 @@ + \ No newline at end of file