
<!--<div class="mainCon">-->
    <ion-header>
        <ion-toolbar color="gray">
            <ion-buttons slot="start">
                <ion-back-button text="" defaultHref="/index" color="secondary"></ion-back-button>
            </ion-buttons>
            <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>
        </ion-toolbar>

        <v-search *ngIf="ifFocus" [(value)]="searchText"></v-search>
        <ion-slides style="width: 100%;height: 125px;" 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>-->
        <!--<v-sub-title title="监测信息" style="background-color: #ffffff"></v-sub-title>-->
        <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">监测信息</h1>
    </ion-header>
        <!--<div class="seePart">-->

    <!--<ion-content fullscreen="true" style="&#45;&#45;padding-start:0px;&#45;&#45;padding-end:0px;height: 5000px; overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;" scroll="true" >-->
    <ion-content>
        <div style="background-color: #efeff4; width: 100%;" class="bigbk">
            <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>
                 <!--The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
            <!--<ion-infinite-scroll>-->

                <ion-list mode="md" class="listview" insert = "false" line="none">
                    <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
                        <div class="item">
                            <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/img/' + item.img">
                                </div>
                                <div class="rightCon">
                                    <div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>
                                    <div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
                                    <div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div [ngClass]="{'sucCir': item.online, 'errCir': !item.online}"></div>&nbsp;
                                <span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>
                            </div>
                        </div>
                    </ion-item>
                </ion-list>
            <!--</ion-infinite-scroll>-->
        </div>
    </ion-content>
<!--</div>-->


<!--<div class="item" *ngFor="let item of items" (click)="toControl(item)">-->
<!--<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/img/' + item.img">-->
<!--</div>-->
<!--<div class="rightCon">-->
<!--<div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>-->
<!--<div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &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.online ? '在线' : '离线'}}</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
