From 2e3b50cf7da4e855b7719fd2eaace00368001de8 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Thu, 4 Aug 2022 16:27:02 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=94=AF=E9=98=9F=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E6=8C=87=E6=A0=87=E5=9F=BA=E7=A1=80=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/home/home.module.ts | 8 +- src/app/home/task/task.component.scss | 16 +- .../zhi-indicators.component.html | 201 +++++++++++++++++- .../zhi-indicators.component.scss | 170 +++++++++++++++ .../zhi-indicators.component.ts | 92 +++++++- src/assets/images/icon/admin.png | Bin 346 -> 0 bytes src/assets/images/icon/host.png | Bin 359 -> 0 bytes src/assets/images/icon/huodong.png | Bin 0 -> 384 bytes src/assets/images/icon/huozai.png | Bin 0 -> 355 bytes src/assets/images/icon/organization.png | Bin 329 -> 0 bytes src/assets/images/icon/power.png | Bin 484 -> 0 bytes src/assets/images/icon/push.png | Bin 441 -> 0 bytes src/assets/images/icon/role.png | Bin 438 -> 0 bytes src/assets/images/icon/suiji.png | Bin 0 -> 279 bytes src/assets/images/icon/tousu.png | Bin 0 -> 235 bytes src/assets/images/icon/user.png | Bin 404 -> 0 bytes src/assets/images/icon/xuanchuan.png | Bin 0 -> 268 bytes src/assets/images/icon/xuke.png | Bin 0 -> 263 bytes src/assets/images/icon/yanlian.png | Bin 0 -> 308 bytes src/styles.scss | 20 +- 20 files changed, 492 insertions(+), 15 deletions(-) delete mode 100644 src/assets/images/icon/admin.png delete mode 100644 src/assets/images/icon/host.png create mode 100644 src/assets/images/icon/huodong.png create mode 100644 src/assets/images/icon/huozai.png delete mode 100644 src/assets/images/icon/organization.png delete mode 100644 src/assets/images/icon/power.png delete mode 100644 src/assets/images/icon/push.png delete mode 100644 src/assets/images/icon/role.png create mode 100644 src/assets/images/icon/suiji.png create mode 100644 src/assets/images/icon/tousu.png delete mode 100644 src/assets/images/icon/user.png create mode 100644 src/assets/images/icon/xuanchuan.png create mode 100644 src/assets/images/icon/xuke.png create mode 100644 src/assets/images/icon/yanlian.png diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index a4a57d1..d27f592 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -42,6 +42,9 @@ import { NzTreeModule } from 'ng-zorro-antd/tree'; import { AddorComponent } from './system-management/or/addor/addor.component'; import { EditorComponent } from './system-management/or/editor/editor.component'; 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'; @NgModule({ declarations: [ NavComponent, @@ -89,7 +92,10 @@ import { AddUnitComponent } from './basic-info/add-unit/add-unit.component'; NzMessageModule, NzInputModule, NzPaginationModule, - NzTreeModule + NzTreeModule, + NzCollapseModule, + NzPopoverModule, + NzCheckboxModule ], entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent] }) diff --git a/src/app/home/task/task.component.scss b/src/app/home/task/task.component.scss index a5750bc..82a213b 100644 --- a/src/app/home/task/task.component.scss +++ b/src/app/home/task/task.component.scss @@ -34,18 +34,18 @@ .content { - box-sizing: border-box; - padding: 16px; + // box-sizing: border-box; + // padding: 16px; background: #F6F5F8; .routerbox { width: 100%; height: 100%; - background: #FFFFFF; - box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); - border-radius: 4px 4px 4px 4px; - opacity: 1; - border: 1px solid #E4E7EC; - overflow-y: auto; + // background: #FFFFFF; + // box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); + // border-radius: 4px 4px 4px 4px; + // opacity: 1; + // border: 1px solid #E4E7EC; + // overflow-y: auto; } } 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 abf1c31..1c28d08 100644 --- a/src/app/home/task/zhi-indicators/zhi-indicators.component.html +++ b/src/app/home/task/zhi-indicators/zhi-indicators.component.html @@ -1 +1,200 @@ -

zhi-indicators works!

+ +
+
+ + + + +
+ {{item.name}} +
+
+
+
+
+
+
+ + 双随机 +
+ + +
+
+ 单位名称 + | + 组织机构 +
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+ + + +
+ + + + {{ node.title }} + +
+ + + + + + + + + +
+
+
+ + +
+
+ + + 已分配: 14/15 家单位 + +
+
+ + + {{doubleRandom.isExpand ? '收起' :'展开'}} + + +
+
+
+ + + + 责任机构 + 任务额 + 单位名称 + 监督员 + 说明 + + + + + 访客 + 2021-11-19 + + 22 + + + 22 + + + 22 + + + + +
+
+
+
+
+
+ + 重大活动 +
+ + + 已分配: 0/0 家单位 + +
+
+ +
+
+
+
+
+
+
+ + 消防宣传 +
+ + + 已分配: 0/0 家单位 + +
+
+ +
+
+
+
+
+
+
+ + 火灾调查 +
+ + + 已分配: 0/0 家单位 + +
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/home/task/zhi-indicators/zhi-indicators.component.scss b/src/app/home/task/zhi-indicators/zhi-indicators.component.scss index e69de29..1bbddb2 100644 --- a/src/app/home/task/zhi-indicators/zhi-indicators.component.scss +++ b/src/app/home/task/zhi-indicators/zhi-indicators.component.scss @@ -0,0 +1,170 @@ +.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; + } + } + + button { + margin-right: 36px; + } + } + + .panelheaderright { + display: flex; + align-items: center; + + .expand { + margin-left: 36px; + } + } + } + + .panelcontent { + nz-table { + margin-top: 16px; + } + } +} + +.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-indicators/zhi-indicators.component.ts b/src/app/home/task/zhi-indicators/zhi-indicators.component.ts index ff8729e..96313d7 100644 --- a/src/app/home/task/zhi-indicators/zhi-indicators.component.ts +++ b/src/app/home/task/zhi-indicators/zhi-indicators.component.ts @@ -1,4 +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-indicators', @@ -7,9 +10,94 @@ import { Component, OnInit } from '@angular/core'; }) export class ZhiIndicatorsComponent 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]//表格数据 + } + 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)] + }) + } + 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/assets/images/icon/admin.png b/src/assets/images/icon/admin.png deleted file mode 100644 index f7f11ef61f8a29d04589c6bce797df47394575ea..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 346 zcmV-g0j2(lP)RG?HKRv>gh2Wkb-@|@`6$kF#^7Tr6jW{ zl?VOjR?_nT{iW$=)I1o#B5zHoru!kO@Ba_tRFY|*Q8mT43mQLd*r3L0#0I#t5x^d} zs;=%b+KD+ykCE@|Ex+yPknZ-5Ho*rs+MkupIcl6qGG*WJ7>IVsz6?f0u^V`lv`VzC z^$D2Q_}Nt(xK>TZPkE5M;G`nL=+3SqSC}}*9&{$17#ng{5#g}=9Jlqigv5iFba;us s3P*8p(6{On(Li>Rx{7LM)?dzZ07fB;r`F!0NdN!<07*qoM6N<$f_-S4JOBUy diff --git a/src/assets/images/icon/host.png b/src/assets/images/icon/host.png deleted file mode 100644 index 20d356c40c2abf2e701c32d67b8925d9d8ad855f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 359 zcmV-t0hs=YP)of1Kio7@1ptP`C^{0AtXB$XFC)T5P=7ert2H_OKz zJ<>!_ZE6dq6mI?iZ2@gZprxQ&lF#@Z1uwzXzIy>VrW#UM9QoPr%<8yct}UoD;saQYeA7=#68Ef002ovPDHLk FV1hVWmQerz diff --git a/src/assets/images/icon/huodong.png b/src/assets/images/icon/huodong.png new file mode 100644 index 0000000000000000000000000000000000000000..4767b076977dc9653601da147092554cddd3a642 GIT binary patch literal 384 zcmV-`0e}99P)JP00001b5ch_0Itp) z=>Px$I!Q!9R47w*(lJYyQ4|L7--QMt#|DFfgqn14X=`vOFj^8E3W5{_C%=Q=!6^_V z3Jer#2?PZj+8S!8$)F%XhsJ`o8;_nB{`{%4+nMLAIggfto_I7 eXRWnA;r#_XS8O5^c0juT0000JP00001b5ch_0Itp) z=>Px$9Z5t%R47x0(ywdRQ544U*HeTU1(`vc#kM#W{1-&jU=qPF%aS&mY0-gf!y*>J zA0QS%FbETy7?ung1O>&UprUZbk?(hWxS*bN@AI5D_qpfZm{e6A!E@ZfR+2AMzt0sK zs_GbCxVu!v@~t=zoB@{jq_cI4}SkSi;Fc|J}eR93G6b zcr?p?ZsNUb-~oE1^LmBlB)_VvbH7FZfUcVjtYBw0|GwN(k~ed@s%~HnUvc8k!&TKa zT*vJs7l-e11?xDU|JOkY_BA}OL~#?77_baX^fM$pCr9X+T__)(lH{)PvS;k8vwvkc#!lVsROl0V4Lv( z(~bWwB2EBp|K3AD(F5Hh;*vl-Ao>ZARL*K0y@a~U$b;vUK^bzsBz;TzEE5h0vgju} z;K42dq}T@F$2^B*Hzojpnfpr0z=K>bxf8}tBouwN=}6&Z3$^6&1Z9y~ZU1 zjKYI+`hjM?!97?a=sQP5uY2wu%o4P2Tk9hIHv-!@zs;Gd<*CMdo#2m6^@O zKJW%yMuft{in4nTX#3sneL*YC%=3z~1uTGxu@qQUR}VgH%GrtNZU$WFG9u2KfU3f} z`wx~PnYmkVM+J7KfG@RVM%|dv=k+SMc9qk>$nK4S8yQGl+B-#Gp|{Mmo1fH1GP03% zC;qO3tj@lWx*6?cEU63kqu?$|@DW%>#7F_NYft-X%<^ssoEZfpI|-mh;d=h5T9o zhbYC!5kFC&pD+(<|Eoq=ae#I1-pEVu4$EUVMM zx6zBEP3;SD447XolVW5m@2SNp62cZIE1?z0)p7{jGV7M7(Nb8U{sUlj1g=S40GN`TBwztplDz5*EXj92_X0~g2XMA8 z0m24DbS_^(z-ngeh} zPb6pA)LxP-C5>Z>-`kAylD^Y;W~@A=gH%OUp{KU+`7lG()e0Z1g~)*IppxWJlE3*m z3Ai9x#EKZSfpZ^^NjCO}Bn#!qJO%L6GP|epCf=|6_IR^wS`}HmM*y!0*i0DhL&b3Qz$m5EY0DBo&|nbU+2;+;9Isn>9J+oSgjKzw>6^ zd$ZqaA|ghT&Ly2n+L81nX({Q>Hveh3-i-(nA0_QedXw~8z*uidIa*o2sApdy~c#Ie}J+> z6-D%!{s%OZbkpk7m;tqsZD?+!#>@Aj1A=1v5E0QAN;PaDL}VLilE^fpl<9pUB;^8m*g_T`&e{ z$`x5>7Z#QkJ&7ng`%&t>$0yk>`__k=9pqT>c#Fd1!&m$ncs;%r2rm$L_vAoj;_M$= ba$DrHt0O){Tv`wV^cjPvtDnm{r-UW|-85{l literal 0 HcmV?d00001 diff --git a/src/assets/images/icon/tousu.png b/src/assets/images/icon/tousu.png new file mode 100644 index 0000000000000000000000000000000000000000..c2031467c98f65dd0092c7273d328c9e6aa67ff4 GIT binary patch literal 235 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa#^NA%Cx&(BWL^R}OFdm2LoEE~ zPEzD^a^!KjufoA%p~BSoL_>n*U=c&#VM7asCT9f!4k4bVmiY-ER7K~voYmKizP<0< z8^6>v?F8IrZ@E_i`6fpj1`paM|=I-mknfC{7oQGuv{4p0H1fYk)d-9l9n&^7Q`lpF(@(YRGO0F+9BWI%gO8$W@z z?QH|3l|&|Du4jvj|@3R zimDZ$`2%Ys*jT8mRTdH|H@PO^kk&}Ul0000Px##z{m$R47x8(V+?gK@i6A{|5%6RWSMp7ZkM_41y1!LGS^*E(XCac7ve7B3Q+! z!EUhl2zG;EWaUoQLp>LkU54Mz?Cc6}m{|a{Bn|zz+baPFz}U?senB(K0B4{W9d1b4 z#)*8`17==@qond1G_wM50&ujP)Px#!AV3xR47xm&^<~+Q4ogV=YXYUnt+X+r5i|XsVM~ucOdRSSC9<^w6n~00jb=8 zrJapnYj0p=?p-cE3 zJJ`nq_Dba!%Px#?ny*JR47x8kugdGKoCXW?<_4mKn`FapoIaOfS^q}L3iA%suB)Dt@fyaK#P>dge_eB*TDf50y{Bwkn=!GP-k0000UdiK literal 0 HcmV?d00001 diff --git a/src/styles.scss b/src/styles.scss index f2ba085..e9bb05d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -106,7 +106,7 @@ textarea { } ::-webkit-scrollbar-track { - background-color: #999; + // background-color: #999; } app-root { @@ -161,7 +161,21 @@ app-root { max-height: 280px; } -button { +// 可展开面板 +.panel { + width: 100%; + background: #FFFFFF; + box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); + border-radius: 4px 4px 4px 4px; + opacity: 1; + border: 1px solid #E4E7EC; + box-sizing: border-box; + padding: 16px; + + .panelheader { + height: 46px; + display: flex; + align-items: center; + } - background: #2C4DC0; }