<div class="listTop">共 7 台
    <div class="topRight" (click)="filter()">
        <i class="icofo ioshaixuan"></i> 筛选
    </div>
</div>
<div class="filterPart" *ngIf="showFilter">
    <div class="filterTitle">设备状态</div>
    <div class="filterCon">
        <div class="filterItem" [ngClass]="{'active': req.state === 0}" (click)="req.state = 0;">全部</div>
        <div class="filterItem" [ngClass]="{'active': req.state === 1}" (click)="req.state = 1;">在线</div>
        <div class="filterItem" [ngClass]="{'active': req.state === 2}" (click)="req.state = 2;">离线</div>
        <div class="filterItem" [ngClass]="{'active': req.state === 3}" (click)="req.state = 3;">故障</div>
    </div>
    <div class="filterTitle">是否关注</div>
    <div class="filterCon">
        <div class="filterItem" [ngClass]="{'active': req.focus === 0}" (click)="req.focus = 0;">全部</div>
        <div class="filterItem" [ngClass]="{'active': req.focus === 1}" (click)="req.focus = 1;">已关注</div>
        <div class="filterItem" [ngClass]="{'active': req.focus === 2}" (click)="req.focus = 2;">未关注</div>
    </div>
    <div class="filterBottom">
        <ion-button mode="ios" color="light" style="border-radius: 5px;" size="small" (click)="cancel()">取消</ion-button>
        <ion-button mode="ios" style="background-color: #1890ff;border-radius: 5px;" size="small" (click)="confirm()">确定</ion-button>
    </div>
</div>

<div class="list" [ngClass]="{'heightWithFilter': showFilter, 'heightWithoutFilter': !showFilter}">
    <div class="one" *ngFor="let one of list" (click)="toDetail(one)">
        <div class="top">
            <div class="left">
                设备名称: {{one.name}}
            </div>
            <div class="right">
                {{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
            </div>
        </div>
        <div class="middle">
            <i class="icofo ioxihuan icon"></i>
            <div class="left">
                <img src="../../../assets/icon/favicon.png">
            </div>
            <div class="right">
                <div class="item">
                    温度: {{one.temp}}
                </div>
                <div class="item">
                    湿度: {{one.humid}}
                </div>
                <div class="item">
                    压力: {{one.press}}
                </div>
            </div>
            <div class="rightBtn">
                <div [class]="one.online === 1 ? 'tag online' : 'tag offline'">
                    {{one.online === 1 ? '在线' : '离线'}}
                </div>
                <div class="tag error" *ngIf="one.error === 1" style="margin-top: 5px">
                    故障
                </div>
            </div>
        </div>
    </div>
</div>
