|
<div class="bui-page" id="main">
|
<main ref="main">
|
|
<div class="main-inner">
|
<ul class="bui-list bui-fluid exammine" ref="block1">
|
<li class="bui-btn bui-box span3" @click="handlerTabs('menu')">
|
<div class="thumbnail success"><i class="icon"></i></div>
|
<div class="span1">
|
<h3 class="item-title approve">9</h3>
|
<p class="item-text">菜单</p>
|
</div>
|
</li>
|
<li class="bui-btn bui-box span3" @click="handlerTabs('alarm')">
|
<div class="thumbnail approve"><i class="icon"></i></div>
|
<div class="span1">
|
<h3 class="item-title approve" v-text="numbers.alarms">0</h3>
|
<p class="item-text">告警中</p>
|
</div>
|
</li>
|
<li class="bui-btn bui-box span3" @click="handlerTabs('charge')">
|
<div class="thumbnail respond"><i class="iconfont icon-chudianchichongdian"></i></div>
|
<div class="span1">
|
<h3 class="item-title respond" v-text="numbers.charge">0</h3>
|
<p class="item-text">充电中</p>
|
</div>
|
</li>
|
<li class="bui-btn bui-box span3" @click="handlerTabs('discharge')">
|
<div class="thumbnail due"><i class="iconfont icon-chudianchichongdian"></i></div>
|
<div class="span1">
|
<h3 class="item-title due" v-text="numbers.discharge">0</h3>
|
<p class="item-text">放电中</p>
|
</div>
|
</li>
|
</ul>
|
<div class="tab-contents mt8">
|
<div class="tab-item" v-show="tabs.menu" style="display:none">
|
<ul class="bui-nav-icon bui-fluid-3">
|
<li class="bui-btn" @click="handerClick('battery')">
|
<div class="bui-icon primary round"><i class="iconfont icon-zhexianzhuzhuangtu"></i></div>
|
<div class="span1">监测数据</div>
|
</li>
|
<li class="bui-btn" @click="handerClick('warn')">
|
<div class="bui-icon warning round"><i class="icon-bell"></i><span class="bui-badges" v-text="numbers.alarms">0</span></div>
|
<div class="span1">告警管理</div>
|
</li>
|
<li class="bui-btn">
|
<div class="bui-icon primary round"><i class="iconfont icon-canshushezhi1"></i></div>
|
<div class="span1">系统管理</div>
|
</li>
|
<li class="bui-btn">
|
<div class="bui-icon danger round"><i class="iconfont icon-dianchiguanli"></i></div>
|
<div class="span1">电池组管理</div>
|
</li>
|
<li class="bui-btn">
|
<div class="bui-icon primary round"><i class="iconfont icon-quanjucanshushezhi"></i></div>
|
<div class="span1">参数设置</div>
|
</li>
|
<li class="bui-btn">
|
<div class="bui-icon success round"><i class="iconfont icon-jiedianguanli"></i></div>
|
<div class="span1">节点管理</div>
|
</li>
|
<li class="bui-btn">
|
<div class="bui-icon warning round"><i class="icon-info"></i></div>
|
<div class="span1">汇集模块设置</div>
|
</li>
|
<li class="bui-btn">
|
<div class="bui-icon success round"><i class="iconfont icon-daochu"></i></div>
|
<div class="span1">日志导出</div>
|
</li>
|
<li class="bui-btn" @click="outSystem()">
|
<div class="bui-icon danger round"><i class="iconfont icon-tuichu"></i></div>
|
<div class="span1">退出系统</div>
|
</li>
|
</ul>
|
</div>
|
<div class="tab-item" v-show="tabs.alarm" style="display:none">
|
<iview-table :columns="tbls.alarm.columns" :data="tbls.alarm.data" :title="tbls.alarm.title" :height="getAlarmHt()" style="margin:0"></iview-table>
|
<div class="tbl-page mt8" style="text-align:center" ref="alarmBlock1">
|
<i-button type="info" @click="pre('alarm')" :disabled="tbls.alarm.pageBtn.pre">上一页</i-button>
|
<i-button type="info" class="ml8" @click="next('alarm')" :disabled="tbls.alarm.pageBtn.next">下一页</i-button>
|
</div>
|
</div>
|
<div class="tab-item" v-show="tabs.charge" style="display:none">
|
<iview-table :columns="tbls.charge.columns" :data="tbls.charge.data" :title="tbls.charge.title" :height="getTblHt()" style="margin:0"></iview-table>
|
</div>
|
<div class="tab-item" v-show="tabs.discharge" style="display:none">
|
<iview-table :columns="tbls.discharge.columns" :data="tbls.discharge.data" :title="tbls.discharge.title" :height="getTblHt()" style="margin:0"></iview-table>
|
</div>
|
</div>
|
</div>
|
</main>
|
</div>
|
<style scoped>.table{display:table;width:100vw;height:100vh}.table .table-cell{display:table-cell;vertical-align:top}.table-cell-inner{height:100vh;overflow:auto}.exammine{padding:.25rem 0;background-color:#fff}.exammine>[class*=bui-btn]{border:none;padding:0 .2rem;border-right:1px solid #f5f5f5}.activity .icon,.exammine .icon{color:#fff}.exammine li .span1 h3{font-size:.38rem;text-align:right}.exammine li .span1 h3.approve{color:#f90}.exammine li .span1 h3.respond{color:#70b4e1}.exammine li .span1 h3.due{color:#f16a7a}.exammine li .span1 p{font-size:.18rem;text-align:right}.exammine>[class*=bui-btn]:last-child{border:none}.exammine .thumbnail{line-height:.88rem;height:.88rem;width:.88rem;text-align:center;border-radius:50%;margin-right:0;color:#fff}.exammine .thumbnail.approve{background-color:#f90}.exammine .thumbnail.respond{background-color:#70b4e1}.exammine .thumbnail.due{background-color:#f16a7a}.exammine [class*=bui-btn] .icon{font-size:.54rem;margin:0}.activity{border-top:none;margin-top:.2rem;padding:0 .2rem;background-color:#fff}.activity .bui-btn{padding-top:.2rem;padding-bottom:.2rem;padding-left:0;padding-right:0}.bui-btn:active{background-color:#bbb}</style>
|
