You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
398 lines
21 KiB
398 lines
21 KiB
<!-- <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> |