ShangHaiYuan-AnXin/src/app/key-unit/key-unit-management/key-unit-management.component.html

<div style="height: 95%;overflow: auto;">
    <div id="header" class="header" (click)="bigclosediv($event)">
        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
            <div class="queryBox">
                <div class="queryField">
                    <label style="margin-right: 10px;">单位名称:</label>
                    <mat-form-field class="example-full-width">
                        <input  matInput placeholder="请输入单位名称" name="companyName" [(ngModel)]="companyName" autocomplete="off">
                    </mat-form-field>
                </div>
    
                <div class="queryField ordiv">
                    <label style="margin-right: 10px;">辖区中队:</label>
                    <mat-form-field class="example-full-width">
                        <input (click)="stopclose($event)" readonly matInput placeholder="请选择辖区中队" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
                    </mat-form-field>
                    <mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
                    <div class="organizationbox" *ngIf="isorganizationbox">
                        <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
                        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                            <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
                                <button type="button" mat-icon-button disabled ></button>
                                <li>{{node.name}}</li>
                            </mat-tree-node>
                            <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
                                <button 
                                    type="button" 
                                    mat-icon-button 
                                    matTreeNodeToggle
                                    [attr.aria-label]="'toggle ' + node.name">
                                <mat-icon class="mat-icon-rtl-mirror">
                                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                </mat-icon>
                                </button>
                                <li>{{node.name}}</li>
                            </mat-tree-node>
                        </mat-tree>  
                    </div>
                </div>
    
                <div class="queryField">
                    <label style="margin-right: 10px;">统一社会信用代码:</label>
                    <mat-form-field class="example-full-width">
                        <input matInput placeholder="请输入统一社会信用代码" name="shehui" [(ngModel)]="shehui" autocomplete="off">
                    </mat-form-field>
                </div>
                <div class="queryField">
                    <label style="margin-right: 10px;">单位类型:</label>
                    <mat-form-field>
                        <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
                            <mat-option *ngFor="let unit of allunittype" [value]="unit.id" >
                                {{unit.name}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
                <div class="queryField">
                    <label style="margin-right: 10px;">关注单位:</label>
                    <mat-form-field>
                        <mat-select placeholder='请选择单位是否关注' [(ngModel)]="follow" name="follow">
                            <mat-option value="0">未关注</mat-option>
                            <mat-option value="1">已关注</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
            <div style="width: 100%;text-align: center;">
                <button mat-raised-button color="primary">查询</button>
                <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
            </div>
        </form>
    </div>
    <mat-divider></mat-divider>
    <div class="body">
        <div class="buttonbox">
            <button type="button" mat-raised-button color="primary" (click)="createunit()">新增</button>
            <button type="button" mat-raised-button color="primary" (click)="editunit()">修改</button>
            <button type="button" mat-raised-button color="warn" (click)="deleteunit()">删除</button>
        </div>
        <div class="tablebox">
    
            <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
                <ng-container matColumnDef="checked">
                    <th mat-header-cell *matHeaderCellDef> 
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-checkbox (change)="checkChange($event,element)"></mat-checkbox>      
                    </td>
                </ng-container>
                <ng-container matColumnDef="Follow">
                    <th mat-header-cell *matHeaderCellDef> 
                    </th>
                    <td mat-cell *matCellDef="let element">
                    
                        <span title="已关注"  *ngIf="element.isFollowed"><mat-icon style="margin-top: 6px;color: red;">star</mat-icon></span>
                        
                    </td>
                </ng-container>
                <ng-container matColumnDef="unitname">
                    <th mat-header-cell *matHeaderCellDef>单位名称</th>
                    <td mat-cell *matCellDef="let element">{{element.name}}</td>
                </ng-container>

                <ng-container matColumnDef="integrity" >
                    <th mat-header-cell *matHeaderCellDef style="text-align: center;">信息完整度得分</th>
                    <td mat-cell *matCellDef="let element;let i = index">
                        <div class="integrityDiv">
                            <span class="integrityNum">
                                {{element.integrity.zong}}分
                            </span>
                            <div class="integrityColorDiv" [style]="integrity(element.integrity.zong)">
                            </div>
                            <div class="integrityDetails" [ngClass]="{'bottomposition': i <= 5,'topposition': i > 5}">
                                <div class="integrityDetailsTop">
                                    <span class="span1">分类名称</span>
                                    <span class="span2">已得分</span>
                                    <span class="span3">总分</span>
                                </div>
                                <div class="integrityDetailsBody">
                                    <ul> 
                                        <li *ngFor="let item of element.integrity.details">
                                            <div class="name">{{item.name}}</div>
                                            <div class="colorDiv">
                                                <div class="colorDivBac">
                                                    <div class="colorDivCon" [style]="integrityDetails(item.score,item.totalpoints)"></div>
                                                </div>
                                                <span>{{item.score}}分</span>
                                            </div>
                                            <div  class="number">{{item.totalpoints}}分</div>
                                        </li>
                                    </ul>
                                </div>
                                <div style="width: 100%;text-align: center;font-size: 13px;">
                                    仅供参考
                                </div>
                            </div>
                        </div>
                    </td>
                </ng-container>
        
                <ng-container matColumnDef="jurisdictionsquadron">
                    <th mat-header-cell *matHeaderCellDef>辖区中队</th>
                    <td mat-cell *matCellDef="let element">{{element.organizationName}}</td>
                </ng-container>
        
                <ng-container matColumnDef="unittype">
                    <th mat-header-cell *matHeaderCellDef>单位类型</th>
                    <td mat-cell *matCellDef="let element">{{element.buildingTypes.length != 0 ? element.buildingTypes[0].name : ''}}</td>
                </ng-container>
                <ng-container matColumnDef="scc">
                    <th mat-header-cell *matHeaderCellDef>统一社会信用代码</th>
                    <td mat-cell *matCellDef="let element">{{element.usci}}</td>
                </ng-container>
                <ng-container matColumnDef="time">
                    <th mat-header-cell *matHeaderCellDef>修改时间</th>
                    <td mat-cell *matCellDef="let element">
                        {{element.modifiedTime|date:'yyyy-MM-dd'}}
                    </td>
                </ng-container>
                <ng-container matColumnDef="operation"> 
                    <th mat-header-cell *matHeaderCellDef>操作</th>
                    <td mat-cell *matCellDef="let element"  class="operation">
                        <span (click)="unitdetails(element)" >查看详情</span>
                        <span (click)="Follow(element)" *ngIf="!element.isFollowed">关注单位</span>
                        <span (click)="unFollow(element)" *ngIf="element.isFollowed">取消关注</span>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
            <mat-paginator [length]="length"
                [pageSize]="pageSize"
                [pageSizeOptions]="pageSizeOptions"
                (page)="chagePage($event)">
            </mat-paginator>
        
        </div>
    </div>
</div>