<!-- 这里还是一个标准的BUI页面 -->
|
<div class="bui-page" id="main">
|
<div style="display:none">
|
<Modal
|
title="服务器地址设置"
|
v-model="addressModal.show"
|
width="400"
|
footer-hide
|
:mask-closable="false"
|
class-name="vertical-center-modal">
|
<i-input
|
v-model="addressModal.address"
|
@on-change="chagneSaveBtn()"
|
clearable>
|
<span slot="prepend">服务器IP地址</span>
|
</i-input>
|
<br/>
|
<i-input
|
v-model="addressModal.port"
|
@on-change="chagneSaveBtn()"
|
clearable>
|
<span slot="prepend">服务器端口号</span>
|
</i-input>
|
<br>
|
<div class="h-modal-footer">
|
<i-button
|
type="primary"
|
@click="testAddress()"
|
style="margin-right: 16px;">测试地址</i-button>
|
<i-button
|
v-if="addressModal.notSave"
|
disabled>保存地址</i-button>
|
<i-button
|
v-else
|
type="primary"
|
@click="saveAddress()">保存地址</i-button>
|
</div>
|
</Modal>
|
</div>
|
<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">5</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('history')">
|
<div class="bui-icon success round"><i class="iconfont icon-yunweiguanli"></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" @click="handerClickAlert('address')">
|
<div class="bui-icon primary round"><i class="iconfont icon-wangluo"></i></div>
|
<div class="span1">网址设置</div>
|
</li>
|
<!-- <li class="bui-btn" @click="handerClick('system')">
|
<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: 25px 0;
|
background-color: #ffffff;
|
}
|
.exammine>[class*=bui-btn]{
|
border: none;
|
padding: 0 20px;
|
border-right: 1px solid #f5f5f5;
|
}
|
.activity .icon,
|
.exammine .icon{
|
color:#fff;
|
}
|
.exammine li .span1 h3{
|
font-size: 38px;
|
text-align: right;
|
}
|
.exammine li .span1 h3.approve{
|
color: #ff9900;
|
}
|
.exammine li .span1 h3.respond{
|
color: #70b4e1;
|
}
|
.exammine li .span1 h3.due{
|
color: #f16a7a;
|
}
|
.exammine li .span1 p{
|
font-size: 18px;
|
text-align: right;
|
}
|
.exammine>[class*=bui-btn]:last-child{
|
border: none;
|
}
|
|
.exammine .thumbnail{
|
line-height: 88px;
|
height: 88px;
|
width: 88px;
|
text-align: center;
|
border-radius: 50%;
|
margin-right: 0;
|
color: #ffffff;
|
}
|
.exammine .thumbnail.approve{
|
background-color: #ff9900;
|
}
|
.exammine .thumbnail.respond{
|
background-color: #70b4e1;
|
}
|
.exammine .thumbnail.due{
|
background-color: #f16a7a;
|
}
|
.exammine [class*=bui-btn] .icon,
|
.exammine [class*=bui-btn] .iconfont{
|
font-size: 54px;
|
margin: 0;
|
}
|
.exammine [class*=bui-btn] .iconfont {
|
font-size: 32px;
|
margin: 0;
|
}
|
.activity{
|
border-top: none;
|
margin-top: 20px;
|
padding: 0 20px;
|
background-color: #ffffff;
|
}
|
.activity .bui-btn{
|
padding-top: 20px;
|
padding-bottom: 20px;
|
padding-left: 0;
|
padding-right: 0;
|
}
|
.bui-btn:active {
|
background-color: #bbb;
|
}
|
.h-modal-footer {
|
text-align: right;
|
}
|
</style>
|
