14 changed files with 1266 additions and 263 deletions
@ -1,111 +1,181 @@ |
|||||||
<!-- <p>任务申请</p> --> |
<!-- <p>任务申请</p> --> |
||||||
<div class="box"> |
<div class="box"> |
||||||
|
<div class="informbox"> |
||||||
<div class="fffbox"> |
<div class="inform"> |
||||||
<div class="header"> |
<div class="informleft"> |
||||||
<span> |
<img src="../../../../assets/images/icon/inform.png" alt=""> |
||||||
任务申请 |
通知播报: |
||||||
</span> |
</div> |
||||||
<span style="font-size: 14px; color: #42B983;"> |
<div class="informright" id="container" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()"> |
||||||
<i nz-icon nzType="info-circle" nzTheme="outline"></i> |
<div id="list-wrapper" style="top: 0"> |
||||||
任务申请已开始！剩余时间 3天13小时 / 生成周计划已开始！剩余时间 23:54:03 |
<ul class="notice-list" id="notice-list"> |
||||||
</span> |
<li class="info" *ngFor="let item of messageList;let key = index"> |
||||||
</div> |
<div class="infoitem"> |
||||||
<div class="searchbox"> |
您有一条新的信息！ |
||||||
<div class="search"> |
</div> |
||||||
<nz-select nzPlaceHolder="任务名称" [(ngModel)]="searchForm.taskname"> |
</li> |
||||||
<nz-option nzValue="监督检查" nzLabel="监督检查"></nz-option> |
</ul> |
||||||
<nz-option nzValue="熟悉演练" nzLabel="熟悉演练"></nz-option> |
<ul class="notice-list" id="notice-list-2"> |
||||||
</nz-select> |
</ul> |
||||||
<input type="text" nz-input placeholder="单位名称" [(ngModel)]="searchForm.unitname" /> |
</div> |
||||||
<!-- <nz-select nzPlaceHolder="单位级别" [(ngModel)]="searchForm.unitlevel"> |
|
||||||
<nz-option nzValue="一般单位" nzLabel="一般单位"></nz-option> |
|
||||||
<nz-option nzValue="重点单位" nzLabel="重点单位"></nz-option> |
|
||||||
</nz-select> --> |
|
||||||
<nz-tree-select [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch nzPlaceHolder="协助机构" |
|
||||||
[(ngModel)]="searchForm.or" [nzExpandedIcon]="multiExpandedIconTpl" |
|
||||||
[nzDropdownClassName]="'maxHeightTreeSelect'" [nzAllowClear]="false"></nz-tree-select> |
|
||||||
<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> |
|
||||||
<button (click)="search()" nz-button nzType="primary"><i nz-icon nzType="search" |
|
||||||
nzTheme="outline"></i>查询</button> |
|
||||||
<button (click)="reset()" nz-button nzType="default"><i nz-icon nzType="reload" |
|
||||||
nzTheme="outline"></i>重置</button> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div class="content"> |
</div> |
||||||
<div class="applybtn"> |
<div class="timebox"> |
||||||
<button (click)="apply()" nz-button nzType="primary"><i nz-icon nzType="form" |
<nz-select [(ngModel)]="selectedYear" (ngModelChange)="selectYear($event)"> |
||||||
nzTheme="outline"></i>申请</button> |
<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.id == selectedMonth}"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="contentbox"> |
||||||
|
|
||||||
|
<div class="fffbox"> |
||||||
|
<div class="spin" *ngIf="isloading"> |
||||||
|
<nz-spin nzSimple></nz-spin> |
||||||
|
</div> |
||||||
|
<div class="header"> |
||||||
|
<span> |
||||||
|
任务申请 |
||||||
|
</span> |
||||||
|
<span style="font-size: 14px; color: #42B983;"> |
||||||
|
<i nz-icon nzType="info-circle" nzTheme="outline"></i> |
||||||
|
任务申请已开始！剩余时间 3天13小时 / 生成周计划已开始！剩余时间 23:54:03 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="searchbox"> |
||||||
|
<div class="search"> |
||||||
|
<nz-select nzPlaceHolder="任务名称" [(ngModel)]="searchForm.taskname" nzAllowClear> |
||||||
|
<nz-option nzValue="监督检查" nzLabel="监督检查"></nz-option> |
||||||
|
<nz-option nzValue="熟悉演练" nzLabel="熟悉演练"></nz-option> |
||||||
|
</nz-select> |
||||||
|
<input type="text" nz-input placeholder="单位名称" [(ngModel)]="searchForm.unitname" nzAllowClear /> |
||||||
|
<!-- <nz-select nzPlaceHolder="单位级别" [(ngModel)]="searchForm.unitlevel"> |
||||||
|
<nz-option nzValue="一般单位" nzLabel="一般单位"></nz-option> |
||||||
|
<nz-option nzValue="重点单位" nzLabel="重点单位"></nz-option> |
||||||
|
</nz-select> --> |
||||||
|
<nz-tree-select [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch nzPlaceHolder="协助机构" |
||||||
|
[(ngModel)]="searchForm.or" [nzExpandedIcon]="multiExpandedIconTpl" |
||||||
|
[nzDropdownClassName]="'maxHeightTreeSelect'" nzAllowClear> |
||||||
|
</nz-tree-select> |
||||||
|
<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> |
||||||
|
<button (click)="search()" nz-button nzType="primary"><i nz-icon nzType="search" |
||||||
|
nzTheme="outline"></i>查询</button> |
||||||
|
<button (click)="reset()" nz-button nzType="default"><i nz-icon nzType="reload" |
||||||
|
nzTheme="outline"></i>重置</button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
<div class="tablebox"> |
<div class="content"> |
||||||
<nz-table nzBordered #basicTable [nzLoading]="nzLoading" [nzData]="taskLIst" [nzShowPagination]='false' |
<div class="applybtn"> |
||||||
[nzPageSize]='10'> |
<button (click)="apply()" nz-button nzType="primary"><i nz-icon nzType="form" |
||||||
<thead> |
nzTheme="outline"></i>申请</button> |
||||||
<tr> |
</div> |
||||||
<th [width]="'15%'">任务名称</th> |
<div class="tablebox"> |
||||||
<th [width]="'20%'">单位名称</th> |
<div class="tableboxitem" *ngFor="let item of taskLIst" |
||||||
<!-- <th>单位级别</th> --> |
[ngClass]="{'greenborder': item.approvalStatus == '通过','redborder': item.approvalStatus == '驳回'}"> |
||||||
<th>协助机构</th> |
<div class="flexcol tasknamebox"> |
||||||
<th>时间</th> |
<span> |
||||||
<th>申请结果</th> |
|
||||||
<th>检查结果</th> |
|
||||||
<th [width]="'8%'">操作</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr *ngFor="let item of basicTable.data"> |
|
||||||
<td> |
|
||||||
{{item.taskName}} |
{{item.taskName}} |
||||||
</td> |
</span> |
||||||
<td nzBreakWord> |
<span> |
||||||
|
任务名称 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol unitnamebox"> |
||||||
|
<span> |
||||||
{{item.company.companyName}} |
{{item.company.companyName}} |
||||||
</td> |
</span> |
||||||
<!-- <td> |
<span> |
||||||
一般单位 |
单位名称 |
||||||
</td> --> |
</span> |
||||||
<td> |
</div> |
||||||
{{item.assitantOrganization.name}} |
<div class="flexcol"> |
||||||
</td> |
<span> |
||||||
<td> |
{{item.company.useNature}} |
||||||
{{item.creationTime | date:"yyyy-MM-dd hh:mm:ss"}} |
</span> |
||||||
</td> |
<span> |
||||||
<td> |
级别 |
||||||
<ng-container *ngIf="item.approvalStatus; else elseTemplate"> |
</span> |
||||||
<ng-container *ngIf="item.approvalStatus == 'reject'; else elseTemplate2"> |
</div> |
||||||
<span class="green">审核驳回</span> |
<div class="flexcol"> |
||||||
</ng-container> |
<span> |
||||||
<ng-template #elseTemplate2> |
{{item.organization.name}} |
||||||
<span class="red">审核通过</span> |
</span> |
||||||
</ng-template> |
<span> |
||||||
</ng-container> |
主负责人 |
||||||
<ng-template #elseTemplate> |
</span> |
||||||
未审核 |
</div> |
||||||
</ng-template> |
<div class="flexcol flexcolassistant"> |
||||||
</td> |
<span class="assistant" nz-tooltip [nzTooltipTitle]="titleTemplate"> |
||||||
<td> |
<span *ngFor="let i of item.supervisors"> |
||||||
/ |
<img *ngIf="i.posts && i.posts[0] == '主查人员'" src="../../../../assets/images/icon/main.png" |
||||||
</td> |
alt=""> |
||||||
<td class="operation"> |
<img *ngIf="i.posts && i.posts[0] == '协查人员'" src="../../../../assets/images/icon/assist.png" |
||||||
<a class="blue" (click)="look(item)">查看</a> |
alt=""> |
||||||
</td> |
{{i.name}} |
||||||
</tr> |
</span> |
||||||
</tbody> |
</span> |
||||||
</nz-table> |
<ng-template #titleTemplate let-thing> |
||||||
</div> |
<span style="margin-right: 6px;" *ngFor="let i of item.supervisors"> |
||||||
<div class="pagination"> |
<img *ngIf="i.posts && i.posts[0] == '主查人员'" src="../../../../assets/images/icon/main.png" |
||||||
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totalCount" [nzPageSize]="10" |
alt=""> |
||||||
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
<img *ngIf="i.posts && i.posts[0] == '协查人员'" src="../../../../assets/images/icon/assist.png" |
||||||
</nz-pagination> |
alt=""> |
||||||
<ng-template #totalTemplate let-total> 10条/页,共{{totalCount}}条 </ng-template> |
{{i.name}} |
||||||
|
</span> |
||||||
|
</ng-template> |
||||||
|
<span> |
||||||
|
协助人员 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
宣传 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
同步工作 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span> |
||||||
|
<img *ngIf="item.approvalStatus == '通过'" src="../../../../assets/images/icon/agree.png" |
||||||
|
alt=""> |
||||||
|
<img *ngIf="item.approvalStatus == '驳回'" src="../../../../assets/images/icon/reject.png" |
||||||
|
alt=""> |
||||||
|
<span *ngIf="item.approvalStatus == '待处理'">待处理</span> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
结果 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="flexcol"> |
||||||
|
<span class="blue" (click)="look(item)"> |
||||||
|
查看 |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
操作 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totalCount" |
||||||
|
[nzPageSize]="10" [nzShowTotal]="totalTemplate" nzShowQuickJumper |
||||||
|
(nzPageIndexChange)="pageChange($event)"> |
||||||
|
</nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 10条/页,共{{totalCount}}条 </ng-template> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
</div> |
</div> |
||||||
@ -1,60 +1,242 @@ |
|||||||
<!-- <p>生成周计划</p> --> |
<!-- <p>生成周计划</p> --> |
||||||
<div class="box weeklyplan"> |
<div class="box"> |
||||||
<div class="fffbox"> |
<div class="timebox"> |
||||||
<div class="header"> |
<nz-select ngModel="2022"> |
||||||
<span> |
<nz-option nzValue="2021" nzLabel="2021年"></nz-option> |
||||||
申请周计划 |
<nz-option nzValue="2022" nzLabel="2022年"></nz-option> |
||||||
</span> |
</nz-select> |
||||||
<span style="font-size: 14px; color: #42B983;"> |
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)" |
||||||
<i nz-icon nzType="info-circle" nzTheme="outline"></i> |
[ngClass]="{'selectedMonth': item.name == selectedMonth}"> |
||||||
任务申请已开始！剩余时间 3天13小时 / 生成周计划已开始！剩余时间 23:54:03 |
{{item.name}} |
||||||
</span> |
|
||||||
</div> |
</div> |
||||||
<div class="content"> |
</div> |
||||||
<div class="tablebox"> |
|
||||||
<nz-table nzBordered #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false' |
<div style="flex: 1;overflow-y: auto;"> |
||||||
[nzPageSize]='16'> |
<!-- 上部仪表盘 --> |
||||||
<thead> |
<div class="instrumentpanelbox"> |
||||||
<tr> |
<div class="instrumentpanelheader"> |
||||||
<th [width]="'10%'">任务类型</th> |
<span>本级部署</span> |
||||||
<th [width]="'25%'">单位名称</th> |
<span (click)="expand()" class="expand blue"> |
||||||
<th>单位级别</th> |
{{isExpand ? '收起' :'展开'}} |
||||||
<th>检查人</th> |
<i nz-icon [nzType]="isExpand ? 'down' : 'up'" nzTheme="outline"></i> |
||||||
<th>消防负责人</th> |
</span> |
||||||
<th>联系电话</th> |
</div> |
||||||
<th [width]="'15%'">操作</th> |
<div class="instrumentpanel"> |
||||||
</tr> |
<div class="instrumentpanelitem" *ngFor="let item of cardData" |
||||||
</thead> |
[ngClass]="{'instrumentpanelitemopen': isExpand,'instrumentpanelitemclose': !isExpand}"> |
||||||
<tbody> |
<div class="itemone" *ngIf="!item.isDetails"> |
||||||
<tr *ngFor="let item of basicTable.data"> |
<div class="instrumentpanelitemleft"> |
||||||
<td>双随机</td> |
<div class="panelheadername" [style]="'background:'+ item.background"> |
||||||
<td nzBreakWord>上海雅特酒店管理有限公司济南泺文路分公司</td> |
<img [src]="'../../../../assets/images/icon/'+ item.icon" alt=""> |
||||||
<td> |
{{item.name}} |
||||||
一般单位 |
</div> |
||||||
</td> |
<div class="tasknum"> |
||||||
<td> |
<p> |
||||||
张三三 |
<span style="margin-right: 6px;">任务分配</span> |
||||||
</td> |
<i (click)="openDetails(item,true)" |
||||||
<td> |
style="vertical-align: text-top;cursor: pointer;" nz-icon nzType="right-circle" |
||||||
张三三 |
nzTheme="outline"></i> |
||||||
</td> |
</p> |
||||||
<td> |
<p style="font-weight: 900;font-size: 36px;text-align: left;">5/9</p> |
||||||
15022667845 |
</div> |
||||||
</td> |
<button *ngIf="isExpand" nz-button class="btn">一键通过</button> |
||||||
<td class="operation"> |
</div> |
||||||
<!-- <span>检查时间 </span> --> |
<div class="instrumentpanelitemright" *ngIf="isExpand"> |
||||||
<nz-date-picker nzPlaceHolder="请选择检查日期" nzBorderless></nz-date-picker> |
<nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne" |
||||||
</td> |
nzStrokeColor="#42B983"> |
||||||
</tr> |
</nz-progress> |
||||||
</tbody> |
</div> |
||||||
</nz-table> |
</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="green" style="margin-right: 5px;" *ngIf="isExpand">接受</span> |
||||||
|
<span class="blue" *ngIf="isExpand">拒绝</span> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
<p>A消防救援站</p> |
||||||
|
<p> |
||||||
|
<span class="green" style="margin-right: 5px;" *ngIf="!isExpand">接受</span> |
||||||
|
<span class="blue" *ngIf="!isExpand">拒绝</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
<div class="pagination"> |
</div> |
||||||
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16" |
|
||||||
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
<!-- 救援站列表 --> |
||||||
</nz-pagination> |
<div class="stationcardlistbox"> |
||||||
<ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template> |
<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> |
</div> |
||||||
|
<!-- --> |
||||||
|
<div class="cutoffrule"></div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
</div> |
</div> |
||||||
@ -1,52 +1,383 @@ |
|||||||
.box { |
.box { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
color: #303133; |
.timebox { |
||||||
|
width: 100%; |
||||||
|
height: 68px; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
padding: 20px; |
padding: 0 20px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
border-bottom: 1px dashed #C7CAD0; |
||||||
|
|
||||||
.fffbox { |
nz-select { |
||||||
width: 100%; |
margin-right: 16px; |
||||||
height: 100%; |
border-radius: 4px 4px 4px 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.monthbtn { |
||||||
|
width: 80px; |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
background: #FFFFFF; |
background: #FFFFFF; |
||||||
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); |
|
||||||
border-radius: 4px 4px 4px 4px; |
border-radius: 4px 4px 4px 4px; |
||||||
opacity: 1; |
opacity: 1; |
||||||
border: 1px solid #E4E7EC; |
border: 1px solid #E4E7EC; |
||||||
display: flex; |
color: #303133; |
||||||
flex-direction: column; |
margin-right: 16px; |
||||||
|
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
|
.selectedMonth { |
||||||
|
|
||||||
.header { |
background: #2C4DC0; |
||||||
width: 100%; |
color: #FFFFFF; |
||||||
height: 56px; |
} |
||||||
|
} |
||||||
|
|
||||||
|
.instrumentpanelbox { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px; |
||||||
|
color: #303133; |
||||||
|
|
||||||
|
.instrumentpanelheader { |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
align-items: center; |
align-items: center; |
||||||
padding: 0 20px; |
margin-bottom: 15px; |
||||||
border-bottom: 1px solid #E4E7EC; |
} |
||||||
|
|
||||||
span { |
.instrumentpanel { |
||||||
color: #303133; |
display: flex; |
||||||
font-weight: 500; |
flex-wrap: wrap; |
||||||
font-size: 16px; |
} |
||||||
|
|
||||||
|
.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; |
||||||
|
margin-right: 8px; |
||||||
|
.itemone { |
||||||
|
.instrumentpanelitemleft { |
||||||
|
padding: 26px 0 26px 10%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.instrumentpanelitemclose { |
||||||
|
width: 11.7%; |
||||||
|
height: 200px; |
||||||
|
margin-bottom: 0px; |
||||||
|
margin-right: 1%; |
||||||
|
.itemone { |
||||||
|
.instrumentpanelitemleft { |
||||||
|
padding: 15px 0 15px 10%; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
.content { |
.stationcardlistbox { |
||||||
flex: 1; |
.stationcardlistitembox { |
||||||
|
width: 100%; |
||||||
|
border-top: 1px dashed #C7CAD0; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
padding: 18px; |
padding: 18px; |
||||||
padding-top: 0px; |
|
||||||
margin-top: 18px; |
|
||||||
.operation { |
|
||||||
|
|
||||||
nz-date-picker { |
.stationcardlistitem { |
||||||
width: 140px; |
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; |
||||||
} |
} |
||||||
|
|||||||
|
After Width: | Height: | Size: 489 B |
Loading…
Reference in new issue