From a09e6262830423cf88978a39f3a3d3f7492bc1c7 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Sun, 7 Aug 2022 15:10:25 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=A4=A7=E9=98=9F=E6=9C=AC?= =?UTF-8?q?=E7=BA=A7=E8=AE=A1=E5=88=92=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/home/home.module.ts | 4 +- .../da-oneself-plan.component.html | 256 +++++++++++++++--- .../da-oneself-plan.component.scss | 221 ++++++++++++++- .../da-oneself-plan.component.ts | 18 +- src/assets/images/icon/station.png | Bin 0 -> 340 bytes src/theme.less | 5 + 6 files changed, 448 insertions(+), 56 deletions(-) create mode 100644 src/assets/images/icon/station.png diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 40a8a30..722150f 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -47,6 +47,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { ScrollingModule } from '@angular/cdk/scrolling'; import { NzGridModule } from 'ng-zorro-antd/grid'; +import { NzRadioModule } from 'ng-zorro-antd/radio'; @NgModule({ declarations: [ NavComponent, @@ -99,7 +100,8 @@ import { NzGridModule } from 'ng-zorro-antd/grid'; NzPopoverModule, NzCheckboxModule, ScrollingModule, - NzGridModule + NzGridModule, + NzRadioModule ], entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent] }) diff --git a/src/app/home/task/da-oneself-plan/da-oneself-plan.component.html b/src/app/home/task/da-oneself-plan/da-oneself-plan.component.html index ccd94f4..f0fb9cc 100644 --- a/src/app/home/task/da-oneself-plan/da-oneself-plan.component.html +++ b/src/app/home/task/da-oneself-plan/da-oneself-plan.component.html @@ -10,57 +10,229 @@ {{item.name}} -
-
- 本级部署 - - {{isExpand ? '收起' :'展开'}} - - -
-
-
-
-
-
- - {{item.name}} + +
+ +
+
+ 本级部署 + + {{isExpand ? '收起' :'展开'}} + + +
+
+
+
+
+
+ + {{item.name}} +
+
+

+ 任务分配 + +

+

5/9

+
+
-
-

- 任务分配 - -

-

5/9

+
+ +
-
-
- - +
+

+ {{item.name}} + 返回 +

+
+
+

+ 济南历下森豪室内娱乐场 + + 派发 + +

+

A消防救援站

+

派发

+
+
-
-

- {{item.name}} - 返回 -

-
-
-

- 济南历下森豪室内娱乐场 - - 派发 - -

-

A消防救援站

-
+
+
+ +
+
+
+
+ + + {{item.name}} + + 单位总数: 7/8 +
+ 完成进度 + +
+ + + {{item.isExpand ? '收起' :'展开'}} + + +
+
+
+
+
+ + 重大活动 +
+
+
+ 已分配 + 1 +
+
+
+ 已完成 + 1 +
+
+
+
+
+ + 尬粒酒店管理有限公司济南泺文路分公司 + + + 单位名称 + +
+
+ + 重点单位 + + + 级别 + +
+
+ + 历下区A消防救援站 + + + 责任机构 + +
+
+ + 历下区B消防救援站 + + + 协助机构 + +
+
+ + + + + 同步工作 + +
+
+ + + + + + 进度 + +
+
+ + +
+
+
+
+ + 尬粒酒店管理有限公司济南泺文路分公司 + + + 单位名称 + +
+
+ + 重点单位 + + + 级别 + +
+
+ + 历下区A消防救援站 + + + 责任机构 + +
+
+ + 历下区B消防救援站 + + + 协助机构 + +
+
+ + + + + 同步工作 + +
+
+ + + + + + 进度 + +
+
+ + +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss b/src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss index 535f92c..96272e7 100644 --- a/src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss +++ b/src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss @@ -41,9 +41,9 @@ } } -.instrumentpanel { +.instrumentpanelbox { box-sizing: border-box; - padding: 15px 20px; + padding: 18px; color: #303133; .instrumentpanelheader { @@ -53,36 +53,34 @@ margin-bottom: 15px; } - .instrumentpanelopen { + .instrumentpanel { display: flex; flex-wrap: wrap; justify-content: space-between; } - .instrumentpanelopenitem { - width: 24.3%; - height: 260px; + .instrumentpanelitem { 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; display: flex; - margin-bottom: 18px; + .itemone { width: 100%; height: 100%; display: flex; - .instrumentpanelopenitemleft { + .instrumentpanelitemleft { display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; flex: 1; box-sizing: border-box; - padding: 26px 0 26px 10%; + .panelheadername { width: 80%; @@ -118,7 +116,7 @@ } } - .instrumentpanelopenitemright { + .instrumentpanelitemright { flex: 1; display: flex; align-items: center; @@ -168,19 +166,218 @@ align-items: flex-start; box-sizing: border-box; padding: 8px 0; - p{ + + p { margin-bottom: 0; } - .itemtwocontentitemp1{ + + .itemtwocontentitemp1 { width: 100%; display: flex; justify-content: space-between; box-sizing: border-box; padding-right: 5px; + + .itemtwocontentitemp1name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } } } + .instrumentpanelitemopen { + width: 24.3%; + height: 260px; + margin-bottom: 18px; + + .itemone { + .instrumentpanelitemleft { + padding: 26px 0 26px 10%; + } + } + } + + .instrumentpanelitemclose { + width: 11.7%; + height: 200px; + margin-bottom: 0px; + + .itemone { + .instrumentpanelitemleft { + padding: 15px 0 15px 10%; + } + } + } +} + +.stationcardlistbox { + .stationcardlistitembox { + width: 100%; + border-top: 1px dashed #C7CAD0; + box-sizing: border-box; + padding: 18px; + + .stationcardlistitem { + width: 100%; + background: #FFFFFF; + box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); + border-radius: 4px 4px 4px 4px; + border: 1px solid #E4E7EC; + color: #303133; + box-sizing: border-box; + padding: 0 18px; + + .header { + width: 100%; + height: 64px; + display: flex; + align-items: center; + text-align: left; + + .progress { + width: 200px; + display: flex; + align-items: center; + + span { + margin-right: 12px; + + } + + nz-progress { + width: 230px; + } + } + + .expand { + margin-left: 20px; + } + } + + .maincontent { + .maincontentitem { + box-sizing: border-box; + padding: 16px; + margin-bottom: 18px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #42B983; + display: flex; + } + + .maincontentitemleft { + width: 170px; + box-sizing: border-box; + padding-right: 40px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + border-right: 1px dashed #C7CAD0; + + .panelheadername { + width: 90%; + height: 38px; + line-height: 38px; + text-align: center; + box-sizing: border-box; + border-radius: 6px 0px 6px 6px; + color: #fff; + margin-bottom: 8px; + + img { + vertical-align: text-top; + } + } + + .num { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + + .round { + width: 8px; + height: 8px; + } + + .word { + margin: 0 6px; + } + + .boldspan { + font-weight: 800; + font-size: 25px; + } + } + } + + .maincontentitemright { + flex: 1; + box-sizing: border-box; + padding-left: 40px; + display: flex; + flex-direction: column; + justify-content: space-around; + // align-items: center; + + .maincontentitemrightitem { + display: flex; + align-items: center; + box-sizing: border-box; + padding: 12px 0px; + border-bottom: 1px dashed #C7CAD0; + + + + .flexcol { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 3%; + + span:nth-child(1) { + color: #303133; + margin-bottom: 8px; + } + + span:nth-child(2) { + color: #C7CAD0; + } + } + + .namebox { + width: 28%; + } + + .progressbox { + width: 220px; + + span:nth-child(1) { + width: 100%; + } + } + + .btnbox { + display: flex; + justify-content: flex-end; + } + } + + div:last-child { + border-bottom: 0px; + } + } + } + } + } + +} + +.cutoffrule { + width: 100%; + border-top: 1px dashed #C7CAD0; } diff --git a/src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts b/src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts index b7fbb90..4b1700d 100644 --- a/src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts +++ b/src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts @@ -30,7 +30,7 @@ export class DaOneselfPlanComponent implements OnInit { this.selectedMonth = item.name } - isExpand = true + isExpand = false expand() { this.isExpand = !this.isExpand } @@ -52,4 +52,20 @@ export class DaOneselfPlanComponent implements OnInit { openDetails(data, type) { data.isDetails = type } + xxx = false + radioChange(e) { + + setTimeout(() => { + this.xxx = !this.xxx + }, 0); + + } + stationData = [ + { name: '历下区A消防救援站', isExpand: true }, + { name: '历下区B消防救援站', isExpand: false }, + { name: '历下区C消防救援站', isExpand: false } + ] + expandcarditem(item) { + item.isExpand = !item.isExpand + } } diff --git a/src/assets/images/icon/station.png b/src/assets/images/icon/station.png new file mode 100644 index 0000000000000000000000000000000000000000..20e9dd8f47f1ef62b7c4f21b96139271920c0a9a GIT binary patch literal 340 zcmV-a0jvIrP)Px$4oO5oR5(wqlc7!nK@><^vCm5byydAuR%rpy*u#9tDmBnxHCZKY>8t2e3E_ zL2iRVA}E4X)qpDL2QZhkVM&^_TasnW>nQs)BGl2-G7VVmbpYipyNq>qBl@a2`)`|3v}Nk4(b zUy(_bZF*Rz$aRTT%#p2uB3}XXx$vLQKd~}&Wgmdf5$lAoi`2JtD_F?ahHgZ(Z-