Jinan_project/src/app/home/task/zhi-indicators/zhi-indicators.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 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>
                    <button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
                        [nzPopoverContent]="contentTemplate" [nzPopoverTrigger]=null
                        [nzPopoverVisible]="doubleRandom.isPopover" (click)="isPopover(doubleRandom)">选择单位</button>
                    <ng-template #contentTemplate>
                        <div class="selectUnitPopover">
                            <div class="popoverTitle">
                                <span (click)="popoverMenuSelect(doubleRandom,1)"
                                    [ngClass]="{'selectedspan': doubleRandom.selectedMenu == 1}">单位名称</span>
                                <span style="margin: 0 10px;">|</span>
                                <span (click)="popoverMenuSelect(doubleRandom,2)"
                                    [ngClass]="{'selectedspan': doubleRandom.selectedMenu == 2}">组织机构</span>
                            </div>
                            <div class="popoverContent" *ngIf="doubleRandom.selectedMenu == 1">
                                <div>
                                    <form nz-form (ngSubmit)="submitForm(doubleRandom.search1)">
                                        <nz-form-item>
                                            <nz-form-control>
                                                <nz-input-group nzPrefixIcon="search">
                                                    <input type="text" [(ngModel)]="doubleRandom.search1" nz-input
                                                        placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
                                                </nz-input-group>
                                            </nz-form-control>
                                            <button style="display: none;" type="submit"></button>
                                        </nz-form-item>
                                    </form>
                                </div>
                                <div class="popoverContentitem">
                                </div>
                            </div>
                            <div class="popoverContent" *ngIf="doubleRandom.selectedMenu == 2">
                                <div>
                                    <form nz-form>
                                        <nz-form-item>
                                            <nz-form-control>
                                                <nz-input-group nzPrefixIcon="search">
                                                    <input type="text" [(ngModel)]="doubleRandom.search2" nz-input
                                                        placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
                                                </nz-input-group>
                                            </nz-form-control>
                                        </nz-form-item>
                                    </form>
                                </div>
                                <div class="popoverContentitem">
                                    <nz-tree [nzHideUnMatched]='true' [nzSearchValue]="doubleRandom.search2"
                                        #nzTreeComponent [nzData]="doubleRandom.nodes" [nzTreeTemplate]="nzTreeTemplate"
                                        nzBlockNode [nzExpandedIcon]="multiExpandedIconTpl">
                                    </nz-tree>
                                    <ng-template #nzTreeTemplate let-node let-origin="origin">
                                        <div class="nodebox">

                                            <span class="name">
                                                <label *ngIf="node.origin.isGasStation"
                                                    [(ngModel)]="node.origin.isChecked" nz-checkbox
                                                    (ngModelChange)="orcheckbox(doubleRandom,$event,node)"></label>
                                                {{ node.title }}
                                            </span>
                                        </div>
                                    </ng-template>
                                    <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>
                                </div>
                            </div>
                            <div class="popoverBtn">
                                <button nz-button nzType="primary">确定</button>
                                <button nz-button nzType="default" (click)="isPopover(doubleRandom)">取消</button>
                            </div>
                        </div>
                    </ng-template>
                    <span>
                        已分配: <span class="blue">14/15</span> 家单位
                    </span>
                </div>
                <div class="panelheaderright">
                    <button nz-button nzType="primary">提交审核</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>
                        </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 style="padding:0 2px!important;">
                                <!-- <textarea [appDebounceInput]="700" (debounceInput)="dealInput($event)"
                                    style="border: 0;" rows="1" nz-input placeholder="一段简短的说明文字..."></textarea> -->
                            </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>
                    <button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
                        [nzPopoverContent]="contentTemplate2" [nzPopoverTrigger]=null
                        [nzPopoverVisible]="rehearsal.isPopover" (click)="isPopover(rehearsal)">选择单位</button>
                    <ng-template #contentTemplate2>
                        <div class="selectUnitPopover">
                            <div class="popoverTitle">
                                <span (click)="popoverMenuSelect(rehearsal,1)"
                                    [ngClass]="{'selectedspan': rehearsal.selectedMenu == 1}">单位名称</span>
                                <span style="margin: 0 10px;">|</span>
                                <span (click)="popoverMenuSelect(rehearsal,2)"
                                    [ngClass]="{'selectedspan': rehearsal.selectedMenu == 2}">组织机构</span>
                            </div>
                            <div class="popoverContent" *ngIf="rehearsal.selectedMenu == 1">
                                <div>
                                    <form nz-form (ngSubmit)="submitForm(rehearsal.search1)">
                                        <nz-form-item>
                                            <nz-form-control>
                                                <nz-input-group nzPrefixIcon="search">
                                                    <input type="text" [(ngModel)]="rehearsal.search1" nz-input
                                                        placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
                                                </nz-input-group>
                                            </nz-form-control>
                                            <button style="display: none;" type="submit"></button>
                                        </nz-form-item>
                                    </form>
                                </div>
                                <div class="popoverContentitem">
                                </div>
                            </div>
                            <div class="popoverContent" *ngIf="rehearsal.selectedMenu == 2">
                                <div>
                                    <form nz-form>
                                        <nz-form-item>
                                            <nz-form-control>
                                                <nz-input-group nzPrefixIcon="search">
                                                    <input type="text" [(ngModel)]="rehearsal.search2" nz-input
                                                        placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
                                                </nz-input-group>
                                            </nz-form-control>
                                        </nz-form-item>
                                    </form>
                                </div>
                                <div class="popoverContentitem">
                                    <nz-tree [nzHideUnMatched]='true' [nzSearchValue]="rehearsal.search2"
                                        #nzTreeComponent [nzData]="rehearsal.nodes" [nzTreeTemplate]="nzTreeTemplate"
                                        nzBlockNode [nzExpandedIcon]="multiExpandedIconTpl">
                                    </nz-tree>
                                    <ng-template #nzTreeTemplate let-node let-origin="origin">
                                        <div class="nodebox">

                                            <span class="name">
                                                <label *ngIf="node.origin.isGasStation"
                                                    [(ngModel)]="node.origin.isChecked" nz-checkbox
                                                    (ngModelChange)="orcheckbox(rehearsal,$event,node)"></label>
                                                {{ node.title }}
                                            </span>
                                        </div>
                                    </ng-template>
                                    <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>
                                </div>
                            </div>
                            <div class="popoverBtn">
                                <button nz-button nzType="primary">确定</button>
                                <button nz-button nzType="default" (click)="isPopover(rehearsal)">取消</button>
                            </div>
                        </div>
                    </ng-template>
                    <span>
                        已分配: <span class="blue">14/15</span> 家单位
                    </span>
                </div>
                <div class="panelheaderright">
                    <button nz-button nzType="primary">提交审核</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>
                        </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 style="padding:0 2px!important;">
                                <textarea style="border: 0;" rows="1" nz-input placeholder="一段简短的说明文字..."></textarea>
                            </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>