Jinan_project/src/app/home/task/station-task-apply/station-task-apply.component.html

<!-- <p>任务申请</p> -->
<div class="box">
    <div class="informbox">
        <div class="inform">
            <div class="informleft">
                <img src="../../../../assets/images/icon/inform.png" alt="">
                通知播报:
            </div>
            <div class="informright" id="container" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()">
                <div id="list-wrapper" style="top: 0">
                    <ul class="notice-list" id="notice-list">
                        <li class="info" *ngFor="let item of messageList;let key = index">
                            <div class="infoitem">
                                您有一条新的信息！
                            </div>
                        </li>
                    </ul>
                    <ul class="notice-list" id="notice-list-2">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="timebox">
        <nz-select [(ngModel)]="selectedYear" (ngModelChange)="selectYear($event)">
            <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 class="content">
                <div class="applybtn">
                    <button (click)="apply()" nz-button nzType="primary"><i nz-icon nzType="form"
                            nzTheme="outline"></i>申请</button>
                </div>
                <div class="tablebox">
                    <div class="tableboxitem">
                        <div class="flexcol tasknamebox">
                            <span>
                                熟悉演练
                            </span>
                            <span>
                                任务名称
                            </span>
                        </div>
                        <div class="flexcol unitnamebox">
                            <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">
                            <span>
                                <img src="../../../../assets/images/icon/agree.png" alt="">
                            </span>
                            <span>
                                结果
                            </span>
                        </div>
                        <div class="flexcol">
                            <span>
                                查看
                            </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>