<div class="mainCon">
    <div class="topIcon" (click)="toIndex()">
        <i class="vo v-back"></i>
    </div>
    <div class="topSearch">
        <SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"
                   (onCancel)="searchText ='';toggleFocus(false);"
                   [setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)"
                   (onClear)="searchText ='';toggleFocus(false);"></SearchBar>
    </div>
    <v-search *ngIf="ifFocus" [(value)]="searchText"></v-search>
    <div>
        <ion-slides style="width: 100%;height: 200px;" mode="ios"
                    [options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">
            <ion-slide class="slideCon" *ngFor="let one of imgs">
                <div class="inBox">
                    <img [src]="'../../../assets/lunbo/' + one">
                </div>
            </ion-slide>
        </ion-slides>
        <v-alarm-bar></v-alarm-bar>
        <div class="seePart">
            <v-sub-title title="监测信息"></v-sub-title>
            <div style="background-color: #efeff4">
                <div class="out" *ngIf="items.length === 0 && !isError">
                    <i class="vo v-none"></i>
                    <div class="in">暂无数据</div>
                </div>
                <div class="out" *ngIf="isError">
                    <i class="vo v-no-signal"></i>
                    <div class="in">网络连接失败</div>
                </div>
                <div class="item" *ngFor="let item of items" (click)="toControl(item.url, item.name, item.no)">
                    <div>
                        <div class="top">{{item.name}}
                            <div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
                        </div>
                        <div class="content">
                            <div class="left">
                                <img [src]="'../../assets/icon/' + item.img">
                            </div>
                            <div class="rightCon">
                                <div class="block1">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>
                                <div class="block2">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
                                <div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '离线'}} </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;
                            <span style="font-size: 13px">{{item.state ? '在线' : '离线'}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
