42 changed files with 3140 additions and 32 deletions
@ -1 +1,398 @@ |
|||||||
<p>da-monthly-task-overview works!</p> |
<!-- <p>月度任务总览</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="timebox"> |
||||||
|
<nz-select ngModel="2022"> |
||||||
|
<nz-option nzValue="2021" nzLabel="2021年"></nz-option> |
||||||
|
<nz-option nzValue="2022" nzLabel="2022年"></nz-option> |
||||||
|
</nz-select> |
||||||
|
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)" |
||||||
|
[ngClass]="{'selectedMonth': item.name == selectedMonth}"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="flex: 1;overflow-y: auto;"> |
||||||
|
<!-- 上部仪表盘 --> |
||||||
|
<div class="instrumentpanelbox"> |
||||||
|
<div class="instrumentpanelheader"> |
||||||
|
<span><img src="../../../../assets/images/icon/task.png" alt=""> 上级任务指标</span> |
||||||
|
</div> |
||||||
|
<div class="instrumentpanel"> |
||||||
|
<div class="instrumentpanelitem instrumentpanelitemclose" *ngFor="let item of cardData"> |
||||||
|
<div class="itemone" *ngIf="!item.isDetails"> |
||||||
|
<div class="instrumentpanelitemleft"> |
||||||
|
<div class="panelheadername" [style]="'background:'+ item.background"> |
||||||
|
<img [src]="'../../../../assets/images/icon/'+ item.icon" alt=""> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
<div class="tasknum"> |
||||||
|
<p> |
||||||
|
<span style="margin-right: 6px;">任务分配</span> |
||||||
|
<i (click)="openDetails(item,true)" |
||||||
|
style="vertical-align: text-top;cursor: pointer;" nz-icon nzType="right-circle" |
||||||
|
nzTheme="outline"></i> |
||||||
|
</p> |
||||||
|
<p style="font-weight: 900;font-size: 36px;text-align: left;">5/9</p> |
||||||
|
</div> |
||||||
|
<div class="jindu"> |
||||||
|
<p> |
||||||
|
<span>完成率</span> |
||||||
|
<span>60%</span> |
||||||
|
</p> |
||||||
|
<nz-progress style="width: 100%;" [nzPercent]="75" nzStrokeColor="#42B983" |
||||||
|
[nzShowInfo]="false"></nz-progress> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="itemtwo" *ngIf="item.isDetails"> |
||||||
|
<p class="itemtwotitle"> |
||||||
|
<span>{{item.name}}</span> |
||||||
|
<span class="back" (click)="openDetails(item,false)"><i nz-icon nzType="rollback" |
||||||
|
nzTheme="outline"></i>返回</span> |
||||||
|
</p> |
||||||
|
<div class="itemtwocontent"> |
||||||
|
<div class="itemtwocontentitem"> |
||||||
|
<p class="itemtwocontentitemp1"> |
||||||
|
<span class="itemtwocontentitemp1name">济南历下森豪室内娱乐场</span> |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span class="green" style="margin-right: 12px;">已分配</span> |
||||||
|
<span class="green">已检查</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 下级任务申请 --> |
||||||
|
<div class="taskaudit"> |
||||||
|
<div class="taskauditheader"> |
||||||
|
<span><img src="../../../../assets/images/icon/task.png" alt=""> 下级任务申请</span> |
||||||
|
<span (click)="istaskauditexpand()" class="expand blue"> |
||||||
|
{{istaskauditExpanded ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="istaskauditExpanded ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<!-- 熟悉演练任务 --> |
||||||
|
<div class="shuxibox" *ngIf="istaskauditExpanded"> |
||||||
|
<div class="header"> |
||||||
|
<span>熟悉演练任务</span> |
||||||
|
<span (click)="expand(shuxiTaskData)" class="expand blue"> |
||||||
|
{{shuxiTaskData.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="shuxiTaskData.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="content" *ngIf="shuxiTaskData.isExpand"> |
||||||
|
<div class="card redcard"> |
||||||
|
<div class="unitname"> |
||||||
|
<img src="../../../../assets/images/icon/unit.png" alt=""> |
||||||
|
<span>上海雅特酒店管理有限公司济南泺文路分公司</span> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/main.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/assist.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span class="blue">分配</span> |
||||||
|
<span>|</span> |
||||||
|
<span>申请人: 历下区A消防救援站</span> |
||||||
|
<span class="blue">修改</span> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
</div> |
||||||
|
<img class="auditimg" src="../../../../assets/images/icon/reject.png" alt=""> |
||||||
|
<!-- <img class="auditimg" src="../../../../assets/images/icon/agree.png" alt=""> --> |
||||||
|
</div> |
||||||
|
<div class="card greencard"> |
||||||
|
<div class="unitname"> |
||||||
|
<img src="../../../../assets/images/icon/unit.png" alt=""> |
||||||
|
<span>上海雅特酒店管理有限公司济南泺文路分公司</span> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/main.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/assist.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span class="blue">分配</span> |
||||||
|
<span>|</span> |
||||||
|
<span>申请人: 历下区A消防救援站</span> |
||||||
|
<span class="blue">修改</span> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
</div> |
||||||
|
<img class="auditimg" src="../../../../assets/images/icon/reject.png" alt=""> |
||||||
|
<!-- <img class="auditimg" src="../../../../assets/images/icon/agree.png" alt=""> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 联络指导任务 --> |
||||||
|
<div class="zhidaobox" *ngIf="istaskauditExpanded"> |
||||||
|
<div class="header"> |
||||||
|
<span>联络指导任务</span> |
||||||
|
<span (click)="expand(zhidaoTaskData)" class="expand blue"> |
||||||
|
{{zhidaoTaskData.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="zhidaoTaskData.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="content" *ngIf="zhidaoTaskData.isExpand"> |
||||||
|
<!-- <div class="card redcard"> |
||||||
|
<div class="unitname"> |
||||||
|
<img src="../../../../assets/images/icon/unit.png" alt=""> |
||||||
|
<span>上海雅特酒店管理有限公司济南泺文路分公司</span> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/main.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/assist.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span class="blue">分配</span> |
||||||
|
<span>|</span> |
||||||
|
<span>申请人: 历下区A消防救援站</span> |
||||||
|
<span class="blue">修改</span> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
</div> |
||||||
|
<img class="auditimg" src="../../../../assets/images/icon/reject.png" alt=""> |
||||||
|
<img class="auditimg" src="../../../../assets/images/icon/agree.png" alt=""> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 本级部署 --> |
||||||
|
<div class="deploybox"> |
||||||
|
<div class="deployboxheader"> |
||||||
|
<span><img src="../../../../assets/images/icon/task0.png" alt=""> 本级部署</span> |
||||||
|
<span (click)="isdeployboxexpand()" class="expand blue"> |
||||||
|
{{isdeployboxExpanded ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="isdeployboxExpanded ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="deploycontent" *ngIf="isdeployboxExpanded"> |
||||||
|
<div class="deploycontentitem"> |
||||||
|
<div class="title"> |
||||||
|
月计划统计 |
||||||
|
</div> |
||||||
|
<div class="details"> |
||||||
|
<div class="detailsname"> |
||||||
|
月计划总数 |
||||||
|
<span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> |
||||||
|
</div> |
||||||
|
<span>已完成 15</span> |
||||||
|
<span class="progresssquare"> |
||||||
|
<span>完成率</span> |
||||||
|
<nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;" |
||||||
|
[nzPercent]="75" nzStrokeColor="#42B983" [nzShowInfo]="false" [nzStrokeWidth]="18"> |
||||||
|
</nz-progress> |
||||||
|
<span>75%</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="deploycontentitem"> |
||||||
|
<div class="title"> |
||||||
|
周计划统计 |
||||||
|
</div> |
||||||
|
<div class="details"> |
||||||
|
<div class="detailsname"> |
||||||
|
周计划总数 |
||||||
|
<span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> |
||||||
|
</div> |
||||||
|
<span>已完成 15</span> |
||||||
|
<span class="progresssquare"> |
||||||
|
<span>完成率</span> |
||||||
|
<nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;" |
||||||
|
[nzPercent]="75" nzStrokeColor="#42B983" [nzShowInfo]="false" [nzStrokeWidth]="18"> |
||||||
|
</nz-progress> |
||||||
|
<span>75%</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 救援站列表 --> |
||||||
|
<div class="stationcardlistbox"> |
||||||
|
<div class="stationcardlistitembox" *ngFor="let item of stationData"> |
||||||
|
<div class="stationcardlistitem"> |
||||||
|
<div class="header"> |
||||||
|
<span style="width: 16%;"> |
||||||
|
<img src="../../../../assets//images/icon/station.png" alt=""> |
||||||
|
{{item.name}} |
||||||
|
</span> |
||||||
|
<span style="width: 8%;">单位总数: 7/8</span> |
||||||
|
<div style="width: 66%;" class="progress progresssquare"> |
||||||
|
<span>完成进度</span> |
||||||
|
<nz-progress nzStrokeLinecap="square" nzStrokeWidth="16" nzStrokeColor="#42B983" |
||||||
|
[nzPercent]="30"></nz-progress> |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">任务下派</button> |
||||||
|
<span (click)="expandcarditem(item)" class="expand blue"> |
||||||
|
{{item.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="item.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="maincontent" *ngIf="item.isExpand"> |
||||||
|
<div class="maincontentitem"> |
||||||
|
<div class="maincontentitemleft"> |
||||||
|
<div class="panelheadername panelheadernameor"> |
||||||
|
<img src="'../../../../assets/images/icon/huodong.png" alt=""> |
||||||
|
重大活动 |
||||||
|
</div> |
||||||
|
<div class="num"> |
||||||
|
<div class="round" style="background: #2C4DC0;"></div> |
||||||
|
<span class="word">已分配</span> |
||||||
|
<span class="boldspan">1</span> |
||||||
|
</div> |
||||||
|
<div class="num"> |
||||||
|
<div class="round" style="background: #42B983;"></div> |
||||||
|
<span class="word">已完成</span> |
||||||
|
<span class="boldspan">1</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="maincontentitemright"> |
||||||
|
<div class="maincontentitemrightitem"> |
||||||
|
<div class="flexcol namebox"> |
||||||
|
<span> |
||||||
|
尬粒酒店管理有限公司济南泺文路分公司 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
单位名称 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
重点单位 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
级别 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区A消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
责任机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区B消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
协助机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
宣传 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
同步工作 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol progressbox progresssquare"> |
||||||
|
<span> |
||||||
|
<nz-progress style="width: 200px;" nzStrokeLinecap="square" |
||||||
|
nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30"> |
||||||
|
</nz-progress> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
进度 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<button nz-button nzType="primary">提交审核</button> |
||||||
|
<button style="margin-left: 12px;" nz-button nzType="primary">取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="maincontentitemrightitem"> |
||||||
|
<div class="flexcol namebox"> |
||||||
|
<span> |
||||||
|
尬粒酒店管理有限公司济南泺文路分公司 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
单位名称 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
重点单位 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
级别 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区A消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
责任机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区B消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
协助机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
宣传 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
同步工作 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol progressbox progresssquare"> |
||||||
|
<span> |
||||||
|
<nz-progress style="width: 200px;" nzStrokeLinecap="square" |
||||||
|
nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30"> |
||||||
|
</nz-progress> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
进度 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<button nz-button nzType="primary">提交审核</button> |
||||||
|
<button style="margin-left: 12px;" nz-button nzType="primary">取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- --> |
||||||
|
<div class="cutoffrule"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -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; |
||||||
|
} |
||||||
@ -1 +1,238 @@ |
|||||||
<p>da-oneself-plan works!</p> |
<!-- <p>本级计划</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="timebox"> |
||||||
|
<nz-select ngModel="2022"> |
||||||
|
<nz-option nzValue="2021" nzLabel="2021年"></nz-option> |
||||||
|
<nz-option nzValue="2022" nzLabel="2022年"></nz-option> |
||||||
|
</nz-select> |
||||||
|
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)" |
||||||
|
[ngClass]="{'selectedMonth': item.name == selectedMonth}"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="flex: 1;overflow-y: auto;"> |
||||||
|
<!-- 上部仪表盘 --> |
||||||
|
<div class="instrumentpanelbox"> |
||||||
|
<div class="instrumentpanelheader"> |
||||||
|
<span>本级部署</span> |
||||||
|
<span (click)="expand()" class="expand blue"> |
||||||
|
{{isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="instrumentpanel"> |
||||||
|
<div class="instrumentpanelitem" *ngFor="let item of cardData" |
||||||
|
[ngClass]="{'instrumentpanelitemopen': isExpand,'instrumentpanelitemclose': !isExpand}"> |
||||||
|
<div class="itemone" *ngIf="!item.isDetails"> |
||||||
|
<div class="instrumentpanelitemleft"> |
||||||
|
<div class="panelheadername" [style]="'background:'+ item.background"> |
||||||
|
<img [src]="'../../../../assets/images/icon/'+ item.icon" alt=""> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
<div class="tasknum"> |
||||||
|
<p> |
||||||
|
<span style="margin-right: 6px;">任务分配</span> |
||||||
|
<i (click)="openDetails(item,true)" |
||||||
|
style="vertical-align: text-top;cursor: pointer;" nz-icon nzType="right-circle" |
||||||
|
nzTheme="outline"></i> |
||||||
|
</p> |
||||||
|
<p style="font-weight: 900;font-size: 36px;text-align: left;">5/9</p> |
||||||
|
</div> |
||||||
|
<button *ngIf="isExpand" nz-button class="btn">快速派发</button> |
||||||
|
</div> |
||||||
|
<div class="instrumentpanelitemright" *ngIf="isExpand"> |
||||||
|
<nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne" |
||||||
|
nzStrokeColor="#42B983"> |
||||||
|
</nz-progress> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="itemtwo" *ngIf="item.isDetails"> |
||||||
|
<p class="itemtwotitle"> |
||||||
|
<span>{{item.name}}</span> |
||||||
|
<span class="back" (click)="openDetails(item,false)"><i nz-icon nzType="rollback" |
||||||
|
nzTheme="outline"></i>返回</span> |
||||||
|
</p> |
||||||
|
<div class="itemtwocontent"> |
||||||
|
<div class="itemtwocontentitem"> |
||||||
|
<p class="itemtwocontentitemp1"> |
||||||
|
<span class="itemtwocontentitemp1name">济南历下森豪室内娱乐场</span> |
||||||
|
<span> |
||||||
|
<span class="blue" *ngIf="isExpand">派发</span> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
<p>A消防救援站</p> |
||||||
|
<p><span class="blue" *ngIf="!isExpand">派发</span></p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 救援站列表 --> |
||||||
|
<div class="stationcardlistbox"> |
||||||
|
<div class="stationcardlistitembox" *ngFor="let item of stationData"> |
||||||
|
<div class="stationcardlistitem"> |
||||||
|
<div class="header"> |
||||||
|
<span style="width: 16%;"> |
||||||
|
<img src="../../../../assets//images/icon/station.png" alt=""> |
||||||
|
{{item.name}} |
||||||
|
</span> |
||||||
|
<span style="width: 8%;">单位总数: 7/8</span> |
||||||
|
<div style="width: 66%;" class="progress progresssquare"> |
||||||
|
<span>完成进度</span> |
||||||
|
<nz-progress nzStrokeLinecap="square" nzStrokeWidth="16" nzStrokeColor="#42B983" |
||||||
|
[nzPercent]="30"></nz-progress> |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">任务下派</button> |
||||||
|
<span (click)="expandcarditem(item)" class="expand blue"> |
||||||
|
{{item.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="item.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="maincontent" *ngIf="item.isExpand"> |
||||||
|
<div class="maincontentitem"> |
||||||
|
<div class="maincontentitemleft"> |
||||||
|
<div class="panelheadername panelheadernameor"> |
||||||
|
<img src="'../../../../assets/images/icon/huodong.png" alt=""> |
||||||
|
重大活动 |
||||||
|
</div> |
||||||
|
<div class="num"> |
||||||
|
<div class="round" style="background: #2C4DC0;"></div> |
||||||
|
<span class="word">已分配</span> |
||||||
|
<span class="boldspan">1</span> |
||||||
|
</div> |
||||||
|
<div class="num"> |
||||||
|
<div class="round" style="background: #42B983;"></div> |
||||||
|
<span class="word">已完成</span> |
||||||
|
<span class="boldspan">1</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="maincontentitemright"> |
||||||
|
<div class="maincontentitemrightitem"> |
||||||
|
<div class="flexcol namebox"> |
||||||
|
<span> |
||||||
|
尬粒酒店管理有限公司济南泺文路分公司 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
单位名称 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
重点单位 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
级别 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区A消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
责任机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区B消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
协助机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
<label nz-radio ngModel [ngModel]="xxx" |
||||||
|
(click)="radioChange($event)">宣传</label> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
同步工作 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol progressbox progresssquare"> |
||||||
|
<span> |
||||||
|
<nz-progress style="width: 200px;" nzStrokeLinecap="square" |
||||||
|
nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30"> |
||||||
|
</nz-progress> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
进度 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<button nz-button nzType="primary">提交审核</button> |
||||||
|
<button style="margin-left: 12px;" nz-button nzType="primary">取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="maincontentitemrightitem"> |
||||||
|
<div class="flexcol namebox"> |
||||||
|
<span> |
||||||
|
尬粒酒店管理有限公司济南泺文路分公司 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
单位名称 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
重点单位 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
级别 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区A消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
责任机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
历下区B消防救援站 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
协助机构 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
<label nz-radio ngModel [ngModel]="xxx" |
||||||
|
(click)="radioChange($event)">宣传</label> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
同步工作 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol progressbox progresssquare"> |
||||||
|
<span> |
||||||
|
<nz-progress style="width: 200px;" nzStrokeLinecap="square" |
||||||
|
nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30"> |
||||||
|
</nz-progress> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
进度 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<button nz-button nzType="primary">提交审核</button> |
||||||
|
<button style="margin-left: 12px;" nz-button nzType="primary">取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- --> |
||||||
|
<div class="cutoffrule"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -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; |
||||||
|
} |
||||||
@ -1 +1,87 @@ |
|||||||
<p>da-subordinate-audit works!</p> |
<!-- <p>下级任务申请</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="timebox"> |
||||||
|
<nz-select ngModel="2022"> |
||||||
|
<nz-option nzValue="2021" nzLabel="2021年"></nz-option> |
||||||
|
<nz-option nzValue="2022" nzLabel="2022年"></nz-option> |
||||||
|
</nz-select> |
||||||
|
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)" |
||||||
|
[ngClass]="{'selectedMonth': item.name == selectedMonth}"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="tabheader"> |
||||||
|
<div class="tabtitle" [ngClass]="{'selectedTab': selectedTab == 1}" (click)="selectTab(1)"> |
||||||
|
<div [ngClass]="{'blue': selectedTab == 1}"> |
||||||
|
<span>熟悉演练任务</span> |
||||||
|
<span style="margin: 0 8px;"></span> |
||||||
|
<span>已审批: 6/8</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tabtitle" [ngClass]="{'selectedTab': selectedTab == 2}" (click)="selectTab(2)"> |
||||||
|
<div [ngClass]="{'blue': selectedTab == 2}"> |
||||||
|
<span>联络指导任务</span> |
||||||
|
<span style="margin: 0 8px;"></span> |
||||||
|
<span>已审批: 6/8</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tabbody" *ngIf="selectedTab == 1"> |
||||||
|
<div class="card redcard"> |
||||||
|
<div class="unitname"> |
||||||
|
<img src="../../../../assets/images/icon/unit.png" alt=""> |
||||||
|
<span>上海雅特酒店管理有限公司济南泺文路分公司</span> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/main.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/assist.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span class="blue">分配</span> |
||||||
|
<span>|</span> |
||||||
|
<span>申请人: 历下区A消防救援站</span> |
||||||
|
<span class="blue">修改</span> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
</div> |
||||||
|
<img class="auditimg" src="../../../../assets/images/icon/reject.png" alt=""> |
||||||
|
<!-- <img class="auditimg" src="../../../../assets/images/icon/agree.png" alt=""> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tabbody" *ngIf="selectedTab == 2"> |
||||||
|
<div class="card greencard"> |
||||||
|
<div class="unitname"> |
||||||
|
<img src="../../../../assets/images/icon/unit.png" alt=""> |
||||||
|
<span>上海雅特酒店管理有限公司济南泺文路分公司</span> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/main.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="../../../../assets/images/icon/assist.png" alt=""> |
||||||
|
未分配 |
||||||
|
</span> |
||||||
|
<span class="blue">分配</span> |
||||||
|
<span>|</span> |
||||||
|
<span>申请人: 历下区A消防救援站</span> |
||||||
|
<span class="blue">修改</span> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
</div> |
||||||
|
<!-- <img class="auditimg" src="../../../../assets/images/icon/reject.png" alt=""> --> |
||||||
|
<img class="auditimg" src="../../../../assets/images/icon/agree.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1 +1,215 @@ |
|||||||
<p>zhi-audit works!</p> |
<!-- <p>任务审批</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="timebox"> |
||||||
|
<nz-select ngModel="2022"> |
||||||
|
<nz-option nzValue="2021" nzLabel="2021年"></nz-option> |
||||||
|
<nz-option nzValue="2022" nzLabel="2022年"></nz-option> |
||||||
|
</nz-select> |
||||||
|
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)" |
||||||
|
[ngClass]="{'selectedMonth': item.name == selectedMonth}"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content" cdkScrollable> |
||||||
|
<!-- 双随机 --> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernameblue"> |
||||||
|
<img src="../../../../assets/images/icon/suiji.png" alt=""> |
||||||
|
双随机 |
||||||
|
</div> |
||||||
|
<span> |
||||||
|
已选择: <span class="blue">15</span> 家单位 |
||||||
|
</span> |
||||||
|
<span class="spanline">|</span> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">14</span> 家单位 |
||||||
|
</span> |
||||||
|
<span class="spanline">|</span> |
||||||
|
<span> |
||||||
|
已通过: <span class="blue">14/15</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
<span (click)="expand(doubleRandom)" class="expand blue"> |
||||||
|
{{doubleRandom.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="doubleRandom.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panelcontent" *ngIf="doubleRandom.isExpand"> |
||||||
|
<nz-table #colSpanTable [nzData]="doubleRandom.data" nzBordered nzSize="small" |
||||||
|
[nzShowPagination]="false"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th nzWidth="18%">责任机构</th> |
||||||
|
<th nzWidth="8%">任务额</th> |
||||||
|
<th nzWidth="25%">单位名称</th> |
||||||
|
<th nzWidth="15%">监督员</th> |
||||||
|
<th>说明</th> |
||||||
|
<th nzWidth="8%">操作</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let item of colSpanTable.data; index as i"> |
||||||
|
<td>访客</td> |
||||||
|
<td>2021-11-19</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td class="explain"> |
||||||
|
一段简短的说明文字... |
||||||
|
<img src="../../../../assets/images/icon/agree.png" alt=""> |
||||||
|
<!-- <img src="../../../../assets/images/icon/reject.png" alt=""> --> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span class="green" style="margin-right: 16px;">同意</span> |
||||||
|
<span class="red">驳回</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 熟悉演练 --> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernamepurple"> |
||||||
|
<img src="../../../../assets/images/icon/yanlian.png" alt=""> |
||||||
|
熟悉演练 |
||||||
|
</div> |
||||||
|
<span> |
||||||
|
已选择: <span class="blue">15</span> 家单位 |
||||||
|
</span> |
||||||
|
<span class="spanline">|</span> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">14</span> 家单位 |
||||||
|
</span> |
||||||
|
<span class="spanline">|</span> |
||||||
|
<span> |
||||||
|
已通过: <span class="blue">14/15</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<button nz-button style="background: #42B983;color: white;">同意</button> |
||||||
|
<button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button> |
||||||
|
<span (click)="expand(rehearsal)" class="expand blue"> |
||||||
|
{{rehearsal.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="rehearsal.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panelcontent" *ngIf="rehearsal.isExpand"> |
||||||
|
<nz-table #colSpanTable [nzData]="rehearsal.data" nzBordered nzSize="small" [nzShowPagination]="false"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th nzWidth="18%">责任机构</th> |
||||||
|
<th nzWidth="8%">任务额</th> |
||||||
|
<th nzWidth="25%">单位名称</th> |
||||||
|
<th nzWidth="15%">监督员</th> |
||||||
|
<th>说明</th> |
||||||
|
<th nzWidth="8%">操作</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let item of colSpanTable.data; index as i"> |
||||||
|
<td>访客</td> |
||||||
|
<td>2021-11-19</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td class="explain"> |
||||||
|
一段简短的说明文字... |
||||||
|
<img src="../../../../assets/images/icon/agree.png" alt=""> |
||||||
|
<!-- <img src="../../../../assets/images/icon/reject.png" alt=""> --> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span class="green" style="margin-right: 16px;">同意</span> |
||||||
|
<span class="red">驳回</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernameor"> |
||||||
|
<img src="../../../../assets/images/icon/huodong.png" alt=""> |
||||||
|
重大活动 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">选择单位</button> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">0/0</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<!-- <button nz-button nzType="primary">提交审核</button> |
||||||
|
<span class="expand blue"> |
||||||
|
收起 |
||||||
|
<i nz-icon nzType="down" nzTheme="outline"></i> |
||||||
|
</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernameor2"> |
||||||
|
<img src="../../../../assets/images/icon/xuanchuan.png" alt=""> |
||||||
|
消防宣传 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">选择单位</button> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">0/0</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<!-- <button nz-button nzType="primary">提交审核</button> |
||||||
|
<span class="expand blue"> |
||||||
|
收起 |
||||||
|
<i nz-icon nzType="down" nzTheme="outline"></i> |
||||||
|
</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernamered"> |
||||||
|
<img src="../../../../assets/images/icon/huozai.png" alt=""> |
||||||
|
火灾调查 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">选择单位</button> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">0/0</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<!-- <button nz-button nzType="primary">提交审核</button> |
||||||
|
<span class="expand blue"> |
||||||
|
收起 |
||||||
|
<i nz-icon nzType="down" nzTheme="outline"></i> |
||||||
|
</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1 +1,334 @@ |
|||||||
<p>zhi-indicators works!</p> |
<!-- <p>任务指标</p> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="timebox"> |
||||||
|
<nz-select ngModel="2022"> |
||||||
|
<nz-option nzValue="2021" nzLabel="2021年"></nz-option> |
||||||
|
<nz-option nzValue="2022" nzLabel="2022年"></nz-option> |
||||||
|
</nz-select> |
||||||
|
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)" |
||||||
|
[ngClass]="{'selectedMonth': item.name == selectedMonth}"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content" cdkScrollable> |
||||||
|
<!-- 双随机 --> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernameblue"> |
||||||
|
<img src="../../../../assets/images/icon/suiji.png" alt=""> |
||||||
|
双随机 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft" |
||||||
|
[nzPopoverContent]="contentTemplate" [nzPopoverTrigger]=null |
||||||
|
[nzPopoverVisible]="doubleRandom.isPopover" (click)="isPopover(doubleRandom)">选择单位</button> |
||||||
|
<ng-template #contentTemplate> |
||||||
|
<div class="selectUnitPopover"> |
||||||
|
<div class="popoverTitle"> |
||||||
|
<span (click)="popoverMenuSelect(doubleRandom,1)" |
||||||
|
[ngClass]="{'selectedspan': doubleRandom.selectedMenu == 1}">单位名称</span> |
||||||
|
<span style="margin: 0 10px;">|</span> |
||||||
|
<span (click)="popoverMenuSelect(doubleRandom,2)" |
||||||
|
[ngClass]="{'selectedspan': doubleRandom.selectedMenu == 2}">组织机构</span> |
||||||
|
</div> |
||||||
|
<div class="popoverContent" *ngIf="doubleRandom.selectedMenu == 1"> |
||||||
|
<div> |
||||||
|
<form nz-form (ngSubmit)="submitForm(doubleRandom.search1)"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" [(ngModel)]="doubleRandom.search1" nz-input |
||||||
|
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
<button style="display: none;" type="submit"></button> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="popoverContentitem"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="popoverContent" *ngIf="doubleRandom.selectedMenu == 2"> |
||||||
|
<div> |
||||||
|
<form nz-form> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" [(ngModel)]="doubleRandom.search2" nz-input |
||||||
|
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="popoverContentitem"> |
||||||
|
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="doubleRandom.search2" |
||||||
|
#nzTreeComponent [nzData]="doubleRandom.nodes" [nzTreeTemplate]="nzTreeTemplate" nzBlockNode |
||||||
|
[nzExpandedIcon]="multiExpandedIconTpl"> |
||||||
|
</nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div class="nodebox"> |
||||||
|
|
||||||
|
<span class="name"> |
||||||
|
<label *ngIf="node.origin.isGasStation" |
||||||
|
[(ngModel)]="node.origin.isChecked" nz-checkbox |
||||||
|
(ngModelChange)="orcheckbox(doubleRandom,$event,node)"></label> |
||||||
|
{{ node.title }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||||
|
|
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||||
|
class="ant-tree-switcher-line-icon"></i> |
||||||
|
</ng-template> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="popoverBtn"> |
||||||
|
<button nz-button nzType="primary">确定</button> |
||||||
|
<button nz-button nzType="default" (click)="isPopover(doubleRandom)">取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">14/15</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<button nz-button nzType="primary">提交审核</button> |
||||||
|
<span (click)="expand(doubleRandom)" class="expand blue"> |
||||||
|
{{doubleRandom.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="doubleRandom.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panelcontent" *ngIf="doubleRandom.isExpand"> |
||||||
|
<nz-table #colSpanTable [nzData]="doubleRandom.data" nzBordered nzSize="small" |
||||||
|
[nzShowPagination]="false"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th nzWidth="18%">责任机构</th> |
||||||
|
<th nzWidth="8%">任务额</th> |
||||||
|
<th nzWidth="25%">单位名称</th> |
||||||
|
<th nzWidth="15%">监督员</th> |
||||||
|
<th>说明</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let item of colSpanTable.data; index as i"> |
||||||
|
<td>访客</td> |
||||||
|
<td>2021-11-19</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td style="padding:0 2px!important;"> |
||||||
|
<textarea style="border: 0;" rows="1" nz-input placeholder="一段简短的说明文字..."></textarea> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 熟悉演练 --> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernamepurple"> |
||||||
|
<img src="../../../../assets/images/icon/yanlian.png" alt=""> |
||||||
|
熟悉演练 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft" |
||||||
|
[nzPopoverContent]="contentTemplate2" [nzPopoverTrigger]=null |
||||||
|
[nzPopoverVisible]="rehearsal.isPopover" (click)="isPopover(rehearsal)">选择单位</button> |
||||||
|
<ng-template #contentTemplate2> |
||||||
|
<div class="selectUnitPopover"> |
||||||
|
<div class="popoverTitle"> |
||||||
|
<span (click)="popoverMenuSelect(rehearsal,1)" |
||||||
|
[ngClass]="{'selectedspan': rehearsal.selectedMenu == 1}">单位名称</span> |
||||||
|
<span style="margin: 0 10px;">|</span> |
||||||
|
<span (click)="popoverMenuSelect(rehearsal,2)" |
||||||
|
[ngClass]="{'selectedspan': rehearsal.selectedMenu == 2}">组织机构</span> |
||||||
|
</div> |
||||||
|
<div class="popoverContent" *ngIf="rehearsal.selectedMenu == 1"> |
||||||
|
<div> |
||||||
|
<form nz-form (ngSubmit)="submitForm(rehearsal.search1)"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" [(ngModel)]="rehearsal.search1" nz-input |
||||||
|
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
<button style="display: none;" type="submit"></button> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="popoverContentitem"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="popoverContent" *ngIf="rehearsal.selectedMenu == 2"> |
||||||
|
<div> |
||||||
|
<form nz-form> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" [(ngModel)]="rehearsal.search2" nz-input |
||||||
|
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="popoverContentitem"> |
||||||
|
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="rehearsal.search2" |
||||||
|
#nzTreeComponent [nzData]="rehearsal.nodes" [nzTreeTemplate]="nzTreeTemplate" nzBlockNode |
||||||
|
[nzExpandedIcon]="multiExpandedIconTpl"> |
||||||
|
</nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div class="nodebox"> |
||||||
|
|
||||||
|
<span class="name"> |
||||||
|
<label *ngIf="node.origin.isGasStation" |
||||||
|
[(ngModel)]="node.origin.isChecked" nz-checkbox |
||||||
|
(ngModelChange)="orcheckbox(rehearsal,$event,node)"></label> |
||||||
|
{{ node.title }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||||
|
|
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||||
|
class="ant-tree-switcher-line-icon"></i> |
||||||
|
</ng-template> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="popoverBtn"> |
||||||
|
<button nz-button nzType="primary">确定</button> |
||||||
|
<button nz-button nzType="default" (click)="isPopover(rehearsal)">取消</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">14/15</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<button nz-button nzType="primary">提交审核</button> |
||||||
|
<span (click)="expand(rehearsal)" class="expand blue"> |
||||||
|
{{rehearsal.isExpand ? '收起' :'展开'}} |
||||||
|
<i nz-icon [nzType]="rehearsal.isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panelcontent" *ngIf="rehearsal.isExpand"> |
||||||
|
<nz-table #colSpanTable [nzData]="rehearsal.data" nzBordered nzSize="small" |
||||||
|
[nzShowPagination]="false"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th nzWidth="18%">责任机构</th> |
||||||
|
<th nzWidth="8%">任务额</th> |
||||||
|
<th nzWidth="25%">单位名称</th> |
||||||
|
<th nzWidth="15%">监督员</th> |
||||||
|
<th>说明</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let item of colSpanTable.data; index as i"> |
||||||
|
<td>访客</td> |
||||||
|
<td>2021-11-19</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
22 |
||||||
|
</td> |
||||||
|
<td style="padding:0 2px!important;"> |
||||||
|
<textarea style="border: 0;" rows="1" nz-input placeholder="一段简短的说明文字..."></textarea> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernameor"> |
||||||
|
<img src="../../../../assets/images/icon/huodong.png" alt=""> |
||||||
|
重大活动 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">选择单位</button> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">0/0</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<!-- <button nz-button nzType="primary">提交审核</button> |
||||||
|
<span class="expand blue"> |
||||||
|
收起 |
||||||
|
<i nz-icon nzType="down" nzTheme="outline"></i> |
||||||
|
</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernameor2"> |
||||||
|
<img src="../../../../assets/images/icon/xuanchuan.png" alt=""> |
||||||
|
消防宣传 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">选择单位</button> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">0/0</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<!-- <button nz-button nzType="primary">提交审核</button> |
||||||
|
<span class="expand blue"> |
||||||
|
收起 |
||||||
|
<i nz-icon nzType="down" nzTheme="outline"></i> |
||||||
|
</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panelheader"> |
||||||
|
<div class="panelheaderleft"> |
||||||
|
<div class="panelheadername panelheadernamered"> |
||||||
|
<img src="../../../../assets/images/icon/huozai.png" alt=""> |
||||||
|
火灾调查 |
||||||
|
</div> |
||||||
|
<button nz-button nzType="primary">选择单位</button> |
||||||
|
<span> |
||||||
|
已分配: <span class="blue">0/0</span> 家单位 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="panelheaderright"> |
||||||
|
<!-- <button nz-button nzType="primary">提交审核</button> |
||||||
|
<span class="expand blue"> |
||||||
|
收起 |
||||||
|
<i nz-icon nzType="down" nzTheme="outline"></i> |
||||||
|
</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 628 B |
|
Before Width: | Height: | Size: 359 B |
|
After Width: | Height: | Size: 384 B |
|
After Width: | Height: | Size: 355 B |
|
After Width: | Height: | Size: 482 B |
|
Before Width: | Height: | Size: 329 B |
|
Before Width: | Height: | Size: 484 B |
|
Before Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 438 B |
|
After Width: | Height: | Size: 340 B |
|
After Width: | Height: | Size: 279 B |
|
After Width: | Height: | Size: 391 B |
|
After Width: | Height: | Size: 446 B |
|
After Width: | Height: | Size: 235 B |
|
After Width: | Height: | Size: 345 B |
|
Before Width: | Height: | Size: 404 B |
|
After Width: | Height: | Size: 268 B |
|
After Width: | Height: | Size: 263 B |
|
After Width: | Height: | Size: 308 B |
|
After Width: | Height: | Size: 386 B |
Loading…
Reference in new issue