9 changed files with 667 additions and 13 deletions
@ -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; |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
Loading…
Reference in new issue