diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index a4a57d1..722150f 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -42,6 +42,12 @@ 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'; +import { ScrollingModule } from '@angular/cdk/scrolling'; +import { NzGridModule } from 'ng-zorro-antd/grid'; +import { NzRadioModule } from 'ng-zorro-antd/radio'; @NgModule({ declarations: [ NavComponent, @@ -89,7 +95,13 @@ import { AddUnitComponent } from './basic-info/add-unit/add-unit.component'; NzMessageModule, NzInputModule, NzPaginationModule, - NzTreeModule + NzTreeModule, + NzCollapseModule, + NzPopoverModule, + NzCheckboxModule, + ScrollingModule, + NzGridModule, + NzRadioModule ], entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent] }) diff --git a/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html b/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html index 35e3dab..e65da0c 100644 --- a/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html +++ b/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html @@ -1 +1,398 @@ -

da-monthly-task-overview works!

+ +
+
+ + + + +
+ {{item.name}} +
+
+ +
+ +
+
+ 上级任务指标 +
+
+
+
+
+
+ + {{item.name}} +
+
+

+ 任务分配 + +

+

5/9

+
+
+

+ 完成率 + 60% +

+ +
+
+
+
+

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

+
+
+

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

+

+ 已分配 + 已检查 +

+
+
+
+
+
+
+ + + +
+
+ 下级任务申请 + + {{istaskauditExpanded ? '收起' :'展开'}} + + +
+ +
+
+ 熟悉演练任务 + + {{shuxiTaskData.isExpand ? '收起' :'展开'}} + + +
+
+
+
+ + 上海雅特酒店管理有限公司济南泺文路分公司 +
+
+ + + 未分配 + + + + 未分配 + + 分配 + | + 申请人: 历下区A消防救援站 + 修改 +
+
+ + +
+ + +
+
+
+ + 上海雅特酒店管理有限公司济南泺文路分公司 +
+
+ + + 未分配 + + + + 未分配 + + 分配 + | + 申请人: 历下区A消防救援站 + 修改 +
+
+ + +
+ + +
+
+
+ +
+
+ 联络指导任务 + + {{zhidaoTaskData.isExpand ? '收起' :'展开'}} + + +
+
+ +
+
+
+ + +
+
+ 本级部署 + + {{isdeployboxExpanded ? '收起' :'展开'}} + + +
+
+
+
+ 月计划统计 +
+
+
+ 月计划总数 + 15 +
+ 已完成 15 + + 完成率 + + + 75% + +
+
+
+
+ 周计划统计 +
+
+
+ 周计划总数 + 15 +
+ 已完成 15 + + 完成率 + + + 75% + +
+
+
+
+ + + +
+
+
+
+ + + {{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-monthly-task-overview/da-monthly-task-overview.component.scss b/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.scss index e69de29..c8ce4da 100644 --- a/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.scss +++ b/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.scss @@ -0,0 +1,557 @@ +.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; + } +} + +.instrumentpanelbox { + box-sizing: border-box; + padding: 18px; + color: #303133; + + .instrumentpanelheader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + } + + .instrumentpanel { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .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; + + + .itemone { + width: 100%; + height: 100%; + display: flex; + + .instrumentpanelitemleft { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + flex: 1; + box-sizing: border-box; + + + .panelheadername { + width: 80%; + height: 46px; + line-height: 46px; + text-align: center; + box-sizing: border-box; + border-radius: 6px 0px 6px 6px; + color: #fff; + + img { + vertical-align: text-top; + } + } + + .tasknum { + margin-left: 8px; + + p { + margin: 0; + } + } + + .jindu { + width: 80%; + margin-left: 8px; + + p { + margin: 0; + display: flex; + justify-content: space-between; + } + } + } + + .instrumentpanelitemright { + flex: 1; + display: flex; + align-items: center; + + nz-progress { + margin-top: 65px; + } + } + } + + .itemtwo { + width: 100%; + height: 100%; + display: flex; + box-sizing: border-box; + padding: 16px; + flex-direction: column; + overflow: hidden; + + .itemtwotitle { + display: flex; + justify-content: space-between; + + .back { + cursor: pointer; + + i { + margin-right: 3px; + } + } + + margin-bottom: 0; + } + + .itemtwocontent { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + + .itemtwocontentitem { + border-bottom: 1px dashed #C7CAD0; + height: 70px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + box-sizing: border-box; + padding: 8px 0; + + p { + margin-bottom: 0; + } + + .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: 250px; + margin-bottom: 0px; + + .itemone { + .instrumentpanelitemleft { + padding: 15px 0 15px 10%; + } + } + } +} + +.taskaudit { + box-sizing: border-box; + padding: 18px; + color: #303133; + border-top: 1px dashed #C7CAD0; + + .taskauditheader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + } + + .shuxibox, + .zhidaobox { + + 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: 18px; + margin-bottom: 18px; + + .header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .content { + .card:first-child { + margin-top: 18px; + } + + .card:last-child { + margin-bottom: 0px; + } + + .card { + color: #303133; + width: 100%; + height: 70px; + border-radius: 4px 4px 4px 4px; + opacity: 1; + display: flex; + box-sizing: border-box; + padding: 0 20px; + position: relative; + margin-bottom: 18px; + + div { + display: flex; + align-items: center; + + img { + margin-top: -3px; + } + } + + .unitname { + flex: 3; + } + + .info { + flex: 6; + + span { + margin-right: 20px; + } + } + + .btn { + flex: 1; + } + + .auditimg { + position: absolute; + right: 18%; + top: 9%; + } + } + + .greencard { + background: rgba(66, 185, 131, 0.0400); + border: 1px solid rgba(66, 185, 131, 0.1600); + } + + .redcard { + background: rgba(255, 0, 0, 0.0200); + border: 1px solid rgba(255, 0, 0, 0.1000); + } + } + } + + .zhidaobox { + margin-bottom: 0px; + + } +} + +.deploybox { + box-sizing: border-box; + padding: 18px; + color: #303133; + border-top: 1px dashed #C7CAD0; + + .deployboxheader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + } + + .deploycontent { + width: 100%; + display: flex; + justify-content: space-between; + + .deploycontentitem { + width: 49.5%; + height: 110px; + background: linear-gradient(180deg, #7AA3FC 0%, #2C4DC0 100%); + box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); + border-radius: 4px 4px 4px 4px; + opacity: 1; + box-sizing: border-box; + padding: 18px 18px; + display: flex; + flex-direction: column; + justify-content: space-around; + color: #fff; + .title{ + text-align: left; + } + .details{ + display: flex; + justify-content: space-between; + align-items: center; + .detailsname{ + display: flex; + align-items: center; + } + .progresssquare{ + width: 60%; + display: flex; + color: #fff; + align-items: center; + span:nth-child(1){ + margin-right: 16px; + } + span:last-child{ + margin-left: 16px; + } + } + } + } + + .deploycontentitem:nth-child(1) { + background: linear-gradient(180deg, #7AA3FC 0%, #2C4DC0 100%); + } + + .deploycontentitem:nth-child(2) { + + background: linear-gradient(180deg, #56C5FF 0%, #005DFF 100%); + } + } +} + + + +.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; + align-self: flex-start; + } + } + + div:last-child { + border-bottom: 0px; + } + } + } + } + } + +} + +.cutoffrule { + width: 100%; + border-top: 1px dashed #C7CAD0; +} diff --git a/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts b/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts index 8dee578..6dee90a 100644 --- a/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts +++ b/src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts @@ -11,5 +11,79 @@ export class DaMonthlyTaskOverviewComponent implements OnInit { ngOnInit(): void { } + 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 + } + + + istaskauditExpanded = true + istaskauditexpand() { + this.istaskauditExpanded = !this.istaskauditExpanded + } + + isdeployboxExpanded = true + isdeployboxexpand() { + this.isdeployboxExpanded = !this.isdeployboxExpanded + } + + + shuxiTaskData = { + isExpand: true + } + zhidaoTaskData = { + isExpand: true + } + expand(data) { + data.isExpand = !data.isExpand + } + + formatOne = (percent: number): string => `${percent}%\n完成率`; + + + cardData = [ + { name: '重大活动', isDetails: false, background: '#FF9203', icon: 'huodong.png' }, + { name: '双随机', isDetails: false, background: '#1D9DFF', icon: 'suiji.png' }, + { name: '行政许可', isDetails: false, background: '#42B983', icon: 'xuke.png' }, + { name: '熟悉演练', isDetails: false, background: '#9D80FF', icon: 'yanlian.png' }, + { name: '联络指导', isDetails: false, background: '#5483EA', icon: 'zhidao.png' }, + { name: '消防宣传', isDetails: false, background: '#FF5D2A', icon: 'xuanchuan.png' }, + { name: '投诉举报', isDetails: false, background: '#5087FF', icon: 'tousu.png' }, + { name: '火灾调查', isDetails: false, background: '#FF404D', icon: 'huozai.png' } + ] + + 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/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 484b08a..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 @@ -1 +1,238 @@ -

da-oneself-plan works!

+ +
+
+ + + + +
+ {{item.name}} +
+
+ +
+ +
+
+ 本级部署 + + {{isExpand ? '收起' :'展开'}} + + +
+
+
+
+
+
+ + {{item.name}} +
+
+

+ 任务分配 + +

+

5/9

+
+ +
+
+ + +
+
+
+

+ {{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 e69de29..d59d3b0 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 @@ -0,0 +1,384 @@ +.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; + } +} + +.instrumentpanelbox { + box-sizing: border-box; + padding: 18px; + color: #303133; + + .instrumentpanelheader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + } + + .instrumentpanel { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .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; + + + .itemone { + width: 100%; + height: 100%; + display: flex; + + .instrumentpanelitemleft { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + flex: 1; + box-sizing: border-box; + + + .panelheadername { + width: 80%; + height: 46px; + line-height: 46px; + text-align: center; + box-sizing: border-box; + border-radius: 6px 0px 6px 6px; + color: #fff; + + img { + vertical-align: text-top; + } + } + + .tasknum { + margin-left: 8px; + + p { + margin: 0; + } + } + + .btn { + margin-left: 8px; + width: 60%; + max-width: 96px; + height: 36px; + border-radius: 4px 4px 4px 4px; + background: #42B983; + color: white; + cursor: pointer; + } + } + + .instrumentpanelitemright { + flex: 1; + display: flex; + align-items: center; + + nz-progress { + margin-top: 65px; + } + } + } + + .itemtwo { + width: 100%; + height: 100%; + display: flex; + box-sizing: border-box; + padding: 16px; + flex-direction: column; + overflow: hidden; + + .itemtwotitle { + display: flex; + justify-content: space-between; + + .back { + cursor: pointer; + + i { + margin-right: 3px; + } + } + + margin-bottom: 0; + } + + .itemtwocontent { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + + .itemtwocontentitem { + border-bottom: 1px dashed #C7CAD0; + height: 70px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + box-sizing: border-box; + padding: 8px 0; + + p { + margin-bottom: 0; + } + + .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; + align-self: flex-start; + } + } + + 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 62983a4..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 @@ -11,5 +11,61 @@ export class DaOneselfPlanComponent implements OnInit { ngOnInit(): void { } + 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 + } + + isExpand = false + expand() { + this.isExpand = !this.isExpand + } + + formatOne = (percent: number): string => `${percent}%\n完成率`; + + cardData = [ + { name: '重大活动', isDetails: false, background: '#FF9203', icon: 'huodong.png' }, + { name: '双随机', isDetails: false, background: '#1D9DFF', icon: 'suiji.png' }, + { name: '行政许可', isDetails: false, background: '#42B983', icon: 'xuke.png' }, + { name: '熟悉演练', isDetails: false, background: '#9D80FF', icon: 'yanlian.png' }, + { name: '联络指导', isDetails: false, background: '#5483EA', icon: 'zhidao.png' }, + { name: '消防宣传', isDetails: false, background: '#FF5D2A', icon: 'xuanchuan.png' }, + { name: '投诉举报', isDetails: false, background: '#5087FF', icon: 'tousu.png' }, + { name: '火灾调查', isDetails: false, background: '#FF404D', icon: 'huozai.png' } + ] + + 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/app/home/task/da-subordinate-audit/da-subordinate-audit.component.html b/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.html index f4ff38b..8fa5aeb 100644 --- a/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.html +++ b/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.html @@ -1 +1,87 @@ -

da-subordinate-audit works!

+ +
+
+ + + + +
+ {{item.name}} +
+
+
+
+
+
+ 熟悉演练任务 + + 已审批: 6/8 +
+
+
+
+ 联络指导任务 + + 已审批: 6/8 +
+
+
+
+
+
+ + 上海雅特酒店管理有限公司济南泺文路分公司 +
+
+ + + 未分配 + + + + 未分配 + + 分配 + | + 申请人: 历下区A消防救援站 + 修改 +
+
+ + +
+ + +
+
+
+
+
+ + 上海雅特酒店管理有限公司济南泺文路分公司 +
+
+ + + 未分配 + + + + 未分配 + + 分配 + | + 申请人: 历下区A消防救援站 + 修改 +
+
+ + +
+ + +
+
+
+
\ No newline at end of file diff --git a/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.scss b/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.scss index e69de29..fa7430c 100644 --- a/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.scss +++ b/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.scss @@ -0,0 +1,146 @@ +.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; + + 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 { + flex: 1; + overflow: hidden; + margin: 20px; + margin-top: 0px; + background: #fff; + box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); + border-radius: 4px 4px 4px 4px; + opacity: 1; + border: 1px solid #E4E7EC; + color: #303133; + text-align: left; + display: flex; + flex-direction: column; + + .tabheader { + width: 100%; + height: 52px; + background: #E4E7EC; + display: flex; + + .tabtitle { + width: 205px; + height: 52px; + line-height: 52px; + text-align: center; + display: flex; + justify-content: center; + cursor: pointer; + + div { + border-top: 2px solid #E4E7EC; + } + } + + .selectedTab { + background: #fff; + + div { + border-top: 2px solid #2C4DC0; + } + } + } + + .tabbody { + flex: 1; + overflow-y: auto; + color: #000; + box-sizing: border-box; + padding: 18px; + + .card { + color: #303133; + width: 100%; + height: 70px; + border-radius: 4px 4px 4px 4px; + opacity: 1; + display: flex; + margin-bottom: 18px; + box-sizing: border-box; + padding: 0 20px; + position: relative; + div { + display: flex; + align-items: center; + + img { + margin-top: -3px; + } + } + + .unitname { + flex: 3; + } + + .info { + flex: 6; + + span { + margin-right: 20px; + } + } + + .btn { + flex: 1; + } + + .auditimg { + position: absolute; + right: 18%; + top: 9%; + } + } + + .greencard { + background: rgba(66, 185, 131, 0.0400); + border: 1px solid rgba(66, 185, 131, 0.1600); + } + + .redcard { + background: rgba(255, 0, 0, 0.0200); + border: 1px solid rgba(255, 0, 0, 0.1000); + } + } +} diff --git a/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.ts b/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.ts index 7e4f904..aa8aa9e 100644 --- a/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.ts +++ b/src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.ts @@ -11,5 +11,28 @@ export class DaSubordinateAuditComponent implements OnInit { ngOnInit(): void { } + 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 + } + + selectedTab = 1 + selectTab(item) { + this.selectedTab = item + } } 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-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 abf1c31..02eb18f 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,334 @@ -

zhi-indicators works!

+ +
+
+ + + + +
+ {{item.name}} +
+
+
+ +
+
+
+
+ + 双随机 +
+ + +
+
+ 单位名称 + | + 组织机构 +
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+ + + +
+ + + + {{ node.title }} + +
+ + + + + + + + + +
+
+
+ + +
+
+ + + 已分配: 14/15 家单位 + +
+
+ + + {{doubleRandom.isExpand ? '收起' :'展开'}} + + +
+
+
+ + + + 责任机构 + 任务额 + 单位名称 + 监督员 + 说明 + + + + + 访客 + 2021-11-19 + + 22 + + + 22 + + + + + + + +
+
+ + + +
+
+
+
+ + 熟悉演练 +
+ + +
+
+ 单位名称 + | + 组织机构 +
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+ + + +
+ + + + {{ node.title }} + +
+ + + + + + + + + +
+
+
+ + +
+
+ + + 已分配: 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-indicators/zhi-indicators.component.scss b/src/app/home/task/zhi-indicators/zhi-indicators.component.scss index e69de29..aca7a11 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,144 @@ +.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; + } + } +} + + + +.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..172710a 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,111 @@ 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, 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/assets/images/icon/admin.png b/src/assets/images/icon/admin.png deleted file mode 100644 index f7f11ef..0000000 Binary files a/src/assets/images/icon/admin.png and /dev/null differ 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/assist.png b/src/assets/images/icon/assist.png new file mode 100644 index 0000000..6f45dc9 Binary files /dev/null and b/src/assets/images/icon/assist.png differ diff --git a/src/assets/images/icon/host.png b/src/assets/images/icon/host.png deleted file mode 100644 index 20d356c..0000000 Binary files a/src/assets/images/icon/host.png and /dev/null differ diff --git a/src/assets/images/icon/huodong.png b/src/assets/images/icon/huodong.png new file mode 100644 index 0000000..4767b07 Binary files /dev/null and b/src/assets/images/icon/huodong.png differ diff --git a/src/assets/images/icon/huozai.png b/src/assets/images/icon/huozai.png new file mode 100644 index 0000000..ae5890d Binary files /dev/null and b/src/assets/images/icon/huozai.png differ diff --git a/src/assets/images/icon/main.png b/src/assets/images/icon/main.png new file mode 100644 index 0000000..c69d276 Binary files /dev/null and b/src/assets/images/icon/main.png differ diff --git a/src/assets/images/icon/organization.png b/src/assets/images/icon/organization.png deleted file mode 100644 index 6fc46c2..0000000 Binary files a/src/assets/images/icon/organization.png and /dev/null differ diff --git a/src/assets/images/icon/power.png b/src/assets/images/icon/power.png deleted file mode 100644 index d9e9600..0000000 Binary files a/src/assets/images/icon/power.png and /dev/null differ diff --git a/src/assets/images/icon/push.png b/src/assets/images/icon/push.png deleted file mode 100644 index f52e818..0000000 Binary files a/src/assets/images/icon/push.png and /dev/null 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/assets/images/icon/role.png b/src/assets/images/icon/role.png deleted file mode 100644 index 9ec88e9..0000000 Binary files a/src/assets/images/icon/role.png and /dev/null differ diff --git a/src/assets/images/icon/station.png b/src/assets/images/icon/station.png new file mode 100644 index 0000000..20e9dd8 Binary files /dev/null and b/src/assets/images/icon/station.png differ diff --git a/src/assets/images/icon/suiji.png b/src/assets/images/icon/suiji.png new file mode 100644 index 0000000..89b421e Binary files /dev/null and b/src/assets/images/icon/suiji.png differ diff --git a/src/assets/images/icon/task.png b/src/assets/images/icon/task.png new file mode 100644 index 0000000..491589e Binary files /dev/null and b/src/assets/images/icon/task.png differ diff --git a/src/assets/images/icon/task0.png b/src/assets/images/icon/task0.png new file mode 100644 index 0000000..487fd1a Binary files /dev/null and b/src/assets/images/icon/task0.png differ diff --git a/src/assets/images/icon/tousu.png b/src/assets/images/icon/tousu.png new file mode 100644 index 0000000..c203146 Binary files /dev/null and b/src/assets/images/icon/tousu.png differ diff --git a/src/assets/images/icon/unit.png b/src/assets/images/icon/unit.png new file mode 100644 index 0000000..e3a124d Binary files /dev/null and b/src/assets/images/icon/unit.png differ diff --git a/src/assets/images/icon/user.png b/src/assets/images/icon/user.png deleted file mode 100644 index 6962ffd..0000000 Binary files a/src/assets/images/icon/user.png and /dev/null differ diff --git a/src/assets/images/icon/xuanchuan.png b/src/assets/images/icon/xuanchuan.png new file mode 100644 index 0000000..a431c6d Binary files /dev/null and b/src/assets/images/icon/xuanchuan.png differ diff --git a/src/assets/images/icon/xuke.png b/src/assets/images/icon/xuke.png new file mode 100644 index 0000000..18339ee Binary files /dev/null and b/src/assets/images/icon/xuke.png differ diff --git a/src/assets/images/icon/yanlian.png b/src/assets/images/icon/yanlian.png new file mode 100644 index 0000000..1264b6c Binary files /dev/null and b/src/assets/images/icon/yanlian.png differ diff --git a/src/assets/images/icon/zhidao.png b/src/assets/images/icon/zhidao.png new file mode 100644 index 0000000..ae0c445 Binary files /dev/null and b/src/assets/images/icon/zhidao.png differ diff --git a/src/styles.scss b/src/styles.scss index f2ba085..6275361 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -98,7 +98,7 @@ textarea { /* 滚动条样式 */ // ::-webkit-scrollbar:horizontal { width: 5px; background-color: white; } ::-webkit-scrollbar-thumb { - background-color: #999; + background: #E4E7EC; } ::-webkit-scrollbar { @@ -106,7 +106,7 @@ textarea { } ::-webkit-scrollbar-track { - background-color: #999; + // background-color: #999; } app-root { @@ -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; } @@ -161,7 +161,49 @@ 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; + } + +} + +.panelheadernameblue { + background-color: #1D9DFF; +} + +.panelheadernamepurple { + background-color: #9D80FF; +} + +.panelheadernameblue2 { + background-color: #5087FF; +} + +.panelheadernamegreen { + background-color: #42B983; +} + +.panelheadernameor { + background-color: #FF9203; +} + +.panelheadernameor2 { + background-color: #FF5D2A; +} - background: #2C4DC0; +.panelheadernamered { + background-color: #FF404D; } diff --git a/src/theme.less b/src/theme.less index 401ee93..e04ee2c 100644 --- a/src/theme.less +++ b/src/theme.less @@ -6,12 +6,23 @@ .ant-table-thead { .ant-table-cell { - background-color: #EEF1F6!important; + background-color: #EEF1F6 !important; } } -.ant-table-cell{ - height: 44px; - box-sizing: border-box; - padding: 0 20px!important; - color: #606266; + +.ant-table-cell { + height: 44px; + box-sizing: border-box; + padding: 0 20px !important; + color: #606266; +} + +.ant-progress-circle .ant-progress-text { + white-space: pre; + font-size: 18px; } +.progresssquare{ + .ant-progress-inner{ + border-radius: 0px; + } +} \ No newline at end of file