Jinan_project/src/app/home/task/da-oneself-plan/da-oneself-plan.component.html

<!-- <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>