|
<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="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="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:#fff}.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:#f90}.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:#fff}.exammine .thumbnail.approve{background-color:#f90}.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:#fff}.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>
|
