diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index d27f592..cc307d0 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -45,6 +45,7 @@ import { AddUnitComponent } from './basic-info/add-unit/add-unit.component'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; +import { ScrollingModule } from '@angular/cdk/scrolling'; @NgModule({ declarations: [ NavComponent, @@ -95,7 +96,8 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; NzTreeModule, NzCollapseModule, NzPopoverModule, - NzCheckboxModule + NzCheckboxModule, + ScrollingModule ], entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent] }) diff --git a/src/app/home/task/zhi-audit/zhi-audit.component.html b/src/app/home/task/zhi-audit/zhi-audit.component.html index 8ba83c5..2e70ed2 100644 --- a/src/app/home/task/zhi-audit/zhi-audit.component.html +++ b/src/app/home/task/zhi-audit/zhi-audit.component.html @@ -1 +1,215 @@ -

zhi-audit works!

+ +
+
+ + + + +
+ {{item.name}} +
+
+
+ +
+
+
+
+ + 双随机 +
+ + 已选择: 15 家单位 + + | + + 已分配: 14 家单位 + + | + + 已通过: 14/15 家单位 + +
+
+ + + + {{doubleRandom.isExpand ? '收起' :'展开'}} + + +
+
+
+ + + + 责任机构 + 任务额 + 单位名称 + 监督员 + 说明 + 操作 + + + + + 访客 + 2021-11-19 + + 22 + + + 22 + + + 一段简短的说明文字... + + + + + 同意 + 驳回 + + + + +
+
+ + + +
+
+
+
+ + 熟悉演练 +
+ + 已选择: 15 家单位 + + | + + 已分配: 14 家单位 + + | + + 已通过: 14/15 家单位 + +
+
+ + + + {{rehearsal.isExpand ? '收起' :'展开'}} + + +
+
+
+ + + + 责任机构 + 任务额 + 单位名称 + 监督员 + 说明 + 操作 + + + + + 访客 + 2021-11-19 + + 22 + + + 22 + + + 一段简短的说明文字... + + + + + 同意 + 驳回 + + + + +
+
+ + + + +
+
+
+
+ + 重大活动 +
+ + + 已分配: 0/0 家单位 + +
+
+ +
+
+
+
+
+
+
+ + 消防宣传 +
+ + + 已分配: 0/0 家单位 + +
+
+ +
+
+
+
+
+
+
+ + 火灾调查 +
+ + + 已分配: 0/0 家单位 + +
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/home/task/zhi-audit/zhi-audit.component.scss b/src/app/home/task/zhi-audit/zhi-audit.component.scss index e69de29..feac492 100644 --- a/src/app/home/task/zhi-audit/zhi-audit.component.scss +++ b/src/app/home/task/zhi-audit/zhi-audit.component.scss @@ -0,0 +1,183 @@ +.box { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.timebox { + width: 100%; + height: 68px; + box-sizing: border-box; + padding: 0 20px; + display: flex; + align-items: center; + + border-bottom: 1px dashed #C7CAD0; + + nz-select { + margin-right: 16px; + border-radius: 4px 4px 4px 4px; + } + + .monthbtn { + width: 80px; + height: 32px; + line-height: 32px; + background: #FFFFFF; + border-radius: 4px 4px 4px 4px; + opacity: 1; + border: 1px solid #E4E7EC; + color: #303133; + margin-right: 16px; + cursor: pointer; + } + + .selectedMonth { + + background: #2C4DC0; + color: #FFFFFF; + } +} + +.content { + box-sizing: border-box; + padding: 20px; + flex: 1; + overflow-y: auto; + color: #606266; +} + +.panel { + margin-bottom: 16px; + + .panelheader { + justify-content: space-between; + + .panelheaderleft { + display: flex; + align-items: center; + + .panelheadername { + width: 130px; + height: 36px; + box-sizing: border-box; + padding: 8px 28px; + border-radius: 6px 0px 6px 6px; + color: #fff; + margin-right: 36px; + + img { + vertical-align: text-top; + } + } + + .spanline { + color: rgba(44, 77, 192, 0.4000); + margin: 0 20px; + } + } + + .panelheaderright { + display: flex; + align-items: center; + + .expand { + margin-left: 36px; + } + } + } + + .panelcontent { + nz-table { + margin-top: 16px; + } + .explain{ + position: relative; + img{ + width: 36px; + height: 36px; + position: absolute; + right: 20px; + top: 4px; + } + } + } +} + +.panelheadernameblue { + background-color: #1D9DFF; +} + +.panelheadernamepurple { + background-color: #9D80FF; +} + +.panelheadernameblue2 { + background-color: #5087FF; +} + +.panelheadernamegreen { + background-color: #42B983; +} + +.panelheadernameor { + background-color: #FF9203; +} + +.panelheadernameor2 { + background-color: #FF5D2A; +} + +.panelheadernamered { + background-color: #FF404D; +} + +.selectUnitPopover { + width: 550px; + height: 492px; + + nz-form-item { + margin: 12px 0; + } + + display: flex; + flex-direction: column; + + .popoverTitle { + display: flex; + align-items: center; + + span { + color: #C7CAD0; + cursor: pointer; + } + + .selectedspan { + color: #2C4DC0; + } + } + + .popoverContent { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .popoverContentitem { + flex: 1; + overflow-y: auto; + } + } + + .popoverBtn { + display: flex; + justify-content: flex-end; + margin-top: 16px; + + button { + margin-left: 18px; + } + } +} diff --git a/src/app/home/task/zhi-audit/zhi-audit.component.ts b/src/app/home/task/zhi-audit/zhi-audit.component.ts index e4c6be2..c9d85d8 100644 --- a/src/app/home/task/zhi-audit/zhi-audit.component.ts +++ b/src/app/home/task/zhi-audit/zhi-audit.component.ts @@ -1,5 +1,7 @@ -import { Component, OnInit } from '@angular/core'; - +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { TreeService } from 'src/app/service/tree.service'; @Component({ selector: 'app-zhi-audit', templateUrl: './zhi-audit.component.html', @@ -7,9 +9,111 @@ import { Component, OnInit } from '@angular/core'; }) export class ZhiAuditComponent implements OnInit { - constructor() { } + validateForm!: FormGroup; + + constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { } + + months = [ + { name: '1月', isable: true }, + { name: '2月', isable: true }, + { name: '3月', isable: true }, + { name: '4月', isable: true }, + { name: '5月', isable: true }, + { name: '6月', isable: true }, + { name: '7月', isable: true }, + { name: '8月', isable: true }, + { name: '9月', isable: true }, + { name: '10月', isable: true }, + { name: '11月', isable: true }, + { name: '12月', isable: true } + ] + selectedMonth + selectMonth(item) { + this.selectedMonth = item.name + } + + + // 双随机 + doubleRandom = { + isExpand: true,//卡片展开 + isPopover: false,//选择单位气泡卡片 + search1: '',//选择单位气泡卡片---单位选择列表 + search1Value: [], + search2: '',//选择单位气泡卡片---组织选择列表 + search2Value: [], + selectedMenu: 1,//选择单位气泡卡片 + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据 + nodes: [] + } + + // 熟悉演练 + rehearsal = { + isExpand: false,//卡片展开 + isPopover: false,//选择单位气泡卡片 + search1: '',//选择单位气泡卡片---单位选择列表 + search1Value: [], + search2: '',//选择单位气泡卡片---组织选择列表 + search2Value: [], + selectedMenu: 1,//选择单位气泡卡片 + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据 + nodes: [] + } + isPopover(data) { + data.isPopover = !data.isPopover + } + //搜索框提交 + submitForm(value): void { + // console.log(value) + } + // 弹出 tab + popoverMenuSelect(data, type) { + data.selectedMenu = type + } + expand(data) { + data.isExpand = !data.isExpand + } ngOnInit(): void { + this.getAllOrganization() } + nzExpandAll = false; + totalCount: string + + allOrList: any + nodes + getAllOrganization() { + let params = { + ContainsChildren: true, + pageSize: 9999 + } + this.http.get('/api/Organizations', { + params: params + }).subscribe((data: any) => { + this.totalCount = data.totalCount + data.items.forEach(element => { + element.key = element.id + element.title = element.name + element.selectable = false + }); + this.allOrList = data.items + this.nodes = [...this.toTree.toTree(data.items)] + + this.doubleRandom.nodes = JSON.parse(JSON.stringify(this.nodes)) + this.rehearsal.nodes = JSON.parse(JSON.stringify(this.nodes)) + }) + } + orcheckbox(data, $event, node) { + if ($event) { + data.search2Value.push(node.origin.name) + } else { + for (let index = 0; index < data.search2Value.length; index++) { + const element = data.search2Value[index]; + if (element == node.origin.name) { + data.search2Value.splice(index, 1) + } + } + } + console.log(data.search2Value) + } } diff --git a/src/app/home/task/zhi-indicators/zhi-indicators.component.html b/src/app/home/task/zhi-indicators/zhi-indicators.component.html index 1c28d08..02eb18f 100644 --- a/src/app/home/task/zhi-indicators/zhi-indicators.component.html +++ b/src/app/home/task/zhi-indicators/zhi-indicators.component.html @@ -10,7 +10,8 @@ {{item.name}} -
+
+
@@ -62,14 +63,16 @@
- + - + {{ node.title }}
@@ -125,14 +128,145 @@ 22 + + + + + + +
+
+ + + +
+
+
+
+ + 熟悉演练 +
+ + +
+
+ 单位名称 + | + 组织机构 +
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+ + + +
+ + + + {{ node.title }} + +
+ + + + + + + + + +
+
+
+ + +
+
+ + + 已分配: 14/15 家单位 + +
+
+ + + {{rehearsal.isExpand ? '收起' :'展开'}} + + +
+
+
+ + + + 责任机构 + 任务额 + 单位名称 + 监督员 + 说明 + + + + + 访客 + 2021-11-19 + + 22 + 22 + + +
+ + + +
diff --git a/src/app/home/task/zhi-indicators/zhi-indicators.component.ts b/src/app/home/task/zhi-indicators/zhi-indicators.component.ts index 96313d7..172710a 100644 --- a/src/app/home/task/zhi-indicators/zhi-indicators.component.ts +++ b/src/app/home/task/zhi-indicators/zhi-indicators.component.ts @@ -43,7 +43,21 @@ export class ZhiIndicatorsComponent implements OnInit { search2: '',//选择单位气泡卡片---组织选择列表 search2Value: [], selectedMenu: 1,//选择单位气泡卡片 - data: [1]//表格数据 + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据 + nodes: [] + } + + // 熟悉演练 + rehearsal = { + isExpand: false,//卡片展开 + isPopover: false,//选择单位气泡卡片 + search1: '',//选择单位气泡卡片---单位选择列表 + search1Value: [], + search2: '',//选择单位气泡卡片---组织选择列表 + search2Value: [], + selectedMenu: 1,//选择单位气泡卡片 + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据 + nodes: [] } isPopover(data) { data.isPopover = !data.isPopover @@ -85,6 +99,9 @@ export class ZhiIndicatorsComponent implements OnInit { }); this.allOrList = data.items this.nodes = [...this.toTree.toTree(data.items)] + + this.doubleRandom.nodes = JSON.parse(JSON.stringify(this.nodes)) + this.rehearsal.nodes = JSON.parse(JSON.stringify(this.nodes)) }) } orcheckbox(data, $event, node) { diff --git a/src/assets/images/icon/agree.png b/src/assets/images/icon/agree.png new file mode 100644 index 0000000..761de4e Binary files /dev/null and b/src/assets/images/icon/agree.png differ diff --git a/src/assets/images/icon/reject.png b/src/assets/images/icon/reject.png new file mode 100644 index 0000000..f30b666 Binary files /dev/null and b/src/assets/images/icon/reject.png differ diff --git a/src/styles.scss b/src/styles.scss index e9bb05d..50fa3d0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -115,17 +115,17 @@ app-root { .blue { cursor: pointer; - color: #2C4DC0; + color: #2C4DC0!important; } .green { cursor: pointer; - color: #42B983; + color: #42B983!important; } .red { cursor: pointer; - color: #FF0000; + color: #FF0000!important; }