| | |
| | | body { |
| | | font-size: .25rem; |
| | | font-size: 25px; |
| | | } |
| | | #bui-router .bui-page>.main, .bui-page>main{ |
| | | background-color: #e1ecfa; |
| | |
| | | background-color: #2d8cf0; |
| | | } |
| | | .bui-table th, .bui-table td { |
| | | padding: .1rem .1rem; |
| | | padding: 10 15px; |
| | | border: 1px solid #CCCCCC; |
| | | } |
| | | .tbl-container-header { |
| | | padding: .5em; |
| | | padding: 5px; |
| | | font-weight: bold; |
| | | color: #2d8cf0; |
| | | } |
| | | .bui-btn-small { |
| | | padding-top: .15rem; |
| | | padding-bottom: .15rem; |
| | | padding-top: 15px; |
| | | padding-bottom: 15px; |
| | | } |
| | | .bui-icon { |
| | | width: 88px; |
| | | height: 88px; |
| | | line-height: 88px; |
| | | } |
| | | .bui-list .icon { |
| | | width: 54px; |
| | | height: 54px; |
| | | line-height: 54px; |
| | | } |
| | | .bui-nav-icon .bui-btn>.bui-icon, .bui-nav-icon .bui-btn>.icon { |
| | | margin-bottom: 20px; |
| | | } |
| | | [class*=bui-btn] { |
| | | padding-top: 8px; |
| | | padding-bottom: 8px; |
| | | padding-left: 10px; |
| | | padding-right: 10px; |
| | | line-height: 16px; |
| | | min-height: 24px; |
| | | } |
| | | [class*=bui-btn] .bui-icon { |
| | | font-size: 48px; |
| | | } |
| | | .bui-nav-icon .bui-btn i, .bui-nav-icon .bui-btn .icon, .bui-nav-icon .bui-btn [class^=bui-icon-] { |
| | | font-size: 64px; |
| | | width: 88px; |
| | | height: 88px; |
| | | } |
| | | .round { |
| | | border-radius: 10px; |
| | | } |
| | | .bui-nav-icon .bui-badges { |
| | | min-width: 33px; |
| | | min-height: 33px; |
| | | line-height: 33px; |
| | | } |
| | | [class*=bui-badges] { |
| | | font-size: 25px; |
| | | } |
| | | |
| | | .item-title { |
| | | padding-right: 10px; |
| | | margin-bottom: 20px; |
| | | font-size: 18px; |
| | | } |
| | | .header.bui-bar .bui-bar-main, |
| | | .header .bui-bar .bui-bar-main, |
| | | header.bui-bar .bui-bar-main, |
| | | header .bui-bar .bui-bar-main { |
| | | font-size: 18px; |
| | | } |
| | | .bui-bar .bui-bar-left, |
| | | .bui-bar .bui-bar-right { |
| | | width: 120px; |
| | | height: 50px; |
| | | } |
| | | .bui-bar .bui-bar-left>[class*=bui-btn] { |
| | | padding-left: 20px; |
| | | } |
| | | .bui-bar .bui-bar-left>[class*=bui-btn], |
| | | .bui-bar .bui-bar-right>[class*=bui-btn] { |
| | | height: 50px; |
| | | line-height: 50px; |
| | | font-size: 27px; |
| | | } |
| | | .bui-bar .bui-bar-left>[class*=bui-btn]>i, |
| | | .bui-bar .bui-bar-right>[class*=bui-btn]>i { |
| | | height: 50px; |
| | | line-height: 50px; |
| | | font-size: 30px; |
| | | } |
| | | .bui-bar [class^="icon-"] { |
| | | width: 44px; |
| | | height: 44px; |
| | | line-height: 44px; |
| | | } |
| | | .bui-loading .bui-loading-block { |
| | | width: 20px !important; |
| | | height: 20px !important; |
| | | } |
| | | .bui-table th, |
| | | .bui-table td { |
| | | padding: 5px 5px; |
| | | } |
| | | /* iview */ |
| | | .tbl-content .ivu-table th { |
| | | background-color: #2d8cf0; |
| | |
| | | |
| | | /* component style */ |
| | | .bui-list-header { |
| | | padding-top: .1rem; |
| | | padding-bottom: .1rem; |
| | | font-size: .34rem; |
| | | padding-top: 10px; |
| | | padding-bottom: 10px; |
| | | font-size: 18px; |
| | | color: #FFFFFF; |
| | | text-align: center; |
| | | background-color: #2d8cf0; |
| | |
| | | <link rel="stylesheet" href="css/bui.css"> |
| | | <link rel="stylesheet" href="css/style.css"> |
| | | <link rel="stylesheet" href="css/iconfont/iconfont.css"> |
| | | <link rel="stylesheet" href="css/commons.css"> |
| | | <link rel="stylesheet" href="css/commons.css?e6bd1a7f3f"> |
| | | <link rel="stylesheet" href="css/iview/styles/iview.css"> |
| | | </head> |
| | | |
| | |
| | | |
| | | <script src="js/const_var.js"></script> |
| | | |
| | | <script src="js/common_functions.js?637da5bf0c"></script> |
| | | <script src="js/common_functions.js"></script> |
| | | |
| | | <script src="js/vue.min.js"></script> |
| | | |
| | |
| | | |
| | | <script src="index.js"></script> |
| | | <script src="js/lazyload.js"></script> |
| | | <script src="js/load_lazy.js?bce3841820"></script> |
| | | <script src="js/load_lazy.js"></script> |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | }; |
| | | }, |
| | | |
| | | watch: { |
| | | height: function height(value) { |
| | | this.chart.setSize(undefined, value); |
| | | } |
| | | }, |
| | | methods: { |
| | | init: function init() { |
| | | var self = this; |
| | |
| | | // 侧边栏 |
| | | this.uiSidebar = bui.sidebar({ |
| | | id: "#sidebarWrap", //菜单的ID(必须) |
| | | width: 500, |
| | | width: 400, |
| | | trigger: "#menu", |
| | | isActive: true |
| | | }); |
| | |
| | | <td>电池状态:<span v-text="getBattState"></span></td> |
| | | <td>组端电压:<span v-text="rtState.group_vol"></span>V</td> |
| | | <td>组端电流:<span v-text="rtState.group_curr"></span>A</td> |
| | | <td rowspan="3" style="width:2rem"> |
| | | <td rowspan="3" style="width:300px"> |
| | | <button class="bui-btn bui-btn-small bg-primary">内阻测试</button> |
| | | <button class="bui-btn bui-btn-small mt8 bg-primary">导出数据</button> |
| | | </td> |
| | |
| | | |
| | | </ul> |
| | | </div> |
| | | <div class="bui-tab-main"> |
| | | <div class="bui-tab-main" ref="tabMain"> |
| | | <ul> |
| | | |
| | | <li> |
| | | <iview-table height="370" style="margin-top:8px;margin-left:0;margin-right:0" :columns="tbls.monList.columns" :data="tbls.monList.data"></iview-table> |
| | | <iview-table :height="getTabHt()" style="margin-top:8px;margin-left:0;margin-right:0" :columns="tbls.monList.columns" :data="tbls.monList.data"></iview-table> |
| | | </li> |
| | | <li style="display:none"> |
| | | <iview-table style="margin-top:8px;margin-left:0;margin-right:0" :columns="tbls.totalInfo.columns" :data="tbls.totalInfo.data"></iview-table> |
| | | </li> |
| | | <li style="display:none"> |
| | | <high-bar-chart height="370px" id="monVolBar" name="电压" unit="V" ref="monVolBar"></high-bar-chart> |
| | | <high-bar-chart :height="getTabHt('px')" id="monVolBar" name="电压" unit="V" ref="monVolBar"></high-bar-chart> |
| | | </li> |
| | | <li style="display:none"> |
| | | <high-bar-chart height="370px" id="monResBar" name="内阻" unit="mΩ" ref="monResBar"></high-bar-chart> |
| | | <high-bar-chart :height="getTabHt('px')" id="monResBar" name="内阻" unit="mΩ" :colors="{min:'#19be6b', max: '#ed4014'}" ref="monResBar"></high-bar-chart> |
| | | </li> |
| | | <li style="display:none"> |
| | | <high-bar-chart height="370px" id="monTmpBar" name="温度" unit="℃" :colors="{min:'#19be6b', max: '#ed4014'}" ref="monTmpBar"></high-bar-chart> |
| | | <high-bar-chart :height="getTabHt('px')" id="monTmpBar" name="温度" unit="℃" :colors="{min:'#19be6b', max: '#ed4014'}" ref="monTmpBar"></high-bar-chart> |
| | | </li> |
| | | <li style="display:none">当前告警</li> |
| | | <li style="display:none">测试数据</li> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | |
| | | var vm = this.vm = new Vue({ |
| | | el: bs.$el[0], |
| | | data: { |
| | | block: { |
| | | tabMain: 0 |
| | | }, |
| | | params: params, |
| | | title: '未知', |
| | | timer: { |
| | |
| | | type: '温度', |
| | | avg: '0℃' |
| | | }]; |
| | | if (tabsState.totalInfo.state) { |
| | | if (tabsState.totalInfo.state && data.length != 0) { |
| | | var data0 = data[0]; |
| | | // 电压 |
| | | var vol = { |
| | | max: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_vol |
| | | }, |
| | | min: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_vol |
| | | } |
| | | // 内阻 |
| | | };var res = { |
| | | max: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_res |
| | | }, |
| | | min: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_res |
| | | } |
| | | |
| | | // 温度 |
| | | };var tmp = { |
| | | max: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_tmp |
| | | }, |
| | | min: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_tmp |
| | | } |
| | | |
| | | // 总值 |
| | | };var sum = { |
| | | vol: data0.mon_vol, |
| | | res: data0.mon_res, |
| | | tmp: data0.mon_tmp |
| | | }; |
| | | // 长度 |
| | | var len = data.length; |
| | | for (var i = 1; i < len; i++) { |
| | | var _data = data[i]; |
| | | this.setTotalMaxMin(vol, _data, 'mon_vol'); |
| | | this.setTotalMaxMin(res, _data, 'mon_res'); |
| | | this.setTotalMaxMin(tmp, _data, 'mon_tmp'); |
| | | sum.vol += _data.mon_vol; |
| | | sum.res += _data.mon_res; |
| | | sum.tmp += _data.mon_tmp; |
| | | } |
| | | |
| | | // 设置电压 |
| | | var volMaxMin = this.formatMaxMin(vol, 'V'); |
| | | result[0].high = volMaxMin.max; |
| | | result[0].low = volMaxMin.min; |
| | | result[0].avg = this.getAvg(sum.vol, len, 'V'); |
| | | |
| | | // 设置内阻 |
| | | var resMaxMin = this.formatMaxMin(res, 'mΩ'); |
| | | result[1].high = resMaxMin.max; |
| | | result[1].low = resMaxMin.min; |
| | | result[1].avg = this.getAvg(sum.res, len, 'mΩ'); |
| | | |
| | | // 设置温度 |
| | | var tmpMaxMin = this.formatMaxMin(tmp, '℃'); |
| | | result[2].high = tmpMaxMin.max; |
| | | result[2].low = tmpMaxMin.min; |
| | | result[2].avg = this.getAvg(sum.tmp, len, '℃'); |
| | | |
| | | this.tbls.totalInfo.data = result; |
| | | } |
| | | }, |
| | | setTotalMaxMin: function setTotalMaxMin(target, item, key) { |
| | | if (item[key] > target.max.value) { |
| | | target.max.mon_num = [item.mon_num]; |
| | | target.max.value = item[key]; |
| | | } else if (item[key] == target.max.value) { |
| | | target.max.mon_num.push(item.mon_num); |
| | | } |
| | | |
| | | if (item[key] < target.min.value) { |
| | | target.min.mon_num = [item.mon_num]; |
| | | target.min.value = item[key]; |
| | | } else if (item[key] == target.min.value) { |
| | | target.min.mon_num.push(item.mon_num); |
| | | } |
| | | }, |
| | | formatMaxMin: function formatMaxMin(data, unit) { |
| | | var result = { |
| | | max: '', |
| | | min: '' |
| | | }; |
| | | // 设置max |
| | | var max = data.max; |
| | | var num_str = '#' + max.mon_num[0]; |
| | | for (var i = 1; i < max.mon_num.length; i++) { |
| | | num_str += ',#' + max.mon_num[i]; |
| | | } |
| | | result.max = num_str + ":" + max.value + unit; |
| | | |
| | | // 设置min |
| | | var min = data.min; |
| | | var num_str = '#' + min.mon_num[0]; |
| | | for (var i = 1; i < min.mon_num.length; i++) { |
| | | num_str += ',#' + min.mon_num[i]; |
| | | } |
| | | result.min = num_str + ":" + min.value + unit; |
| | | |
| | | return result; |
| | | }, |
| | | getAvg: function getAvg(sum, len, unit) { |
| | | return Number((sum / len).toFixed(2)) + unit; |
| | | }, |
| | | |
| | | setOptions: function setOptions(data) { |
| | | // 遍历data的值 |
| | | var monNum = []; // 单体编号 |
| | |
| | | // 关闭页面的计时器 |
| | | this.timer.rtState.stop(); |
| | | this.timer.rtData.stop(); |
| | | }, |
| | | setBlock: function setBlock() { |
| | | this.block.tabMain = this.$refs.tabMain.offsetHeight; |
| | | }, |
| | | getTabHt: function getTabHt(unit) { |
| | | var result = 0; |
| | | if (unit) { |
| | | result = this.block.tabMain - 5 + unit; |
| | | } else { |
| | | result = this.block.tabMain - 10; |
| | | } |
| | | return result; |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | }); |
| | | |
| | | this.startSearch(); |
| | | setTimeout(function () { |
| | | // 设置模块的高度 |
| | | self.setBlock(); |
| | | }, 10); |
| | | }, |
| | | beforeDestroy: function beforeDestroy() { |
| | | this.stopTimers(); |
| | |
| | | |
| | | <div class="bui-page" id="main"> |
| | | <main> |
| | | <main ref="main"> |
| | | |
| | | <div class="main-inner"> |
| | | <ul class="bui-list bui-fluid exammine"> |
| | | <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> |
| | | <h3 class="item-title approve">4</h3> |
| | | <p class="item-text">菜单</p> |
| | | </div> |
| | | </li> |
| | |
| | | <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"> |
| | | <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> |
| | | </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="430" style="margin:0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align:center"> |
| | | <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="460" style="margin:0"></iview-table> |
| | | <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="460" style="margin:0"></iview-table> |
| | | <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> |
| | | <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}</style> |
| | |
| | | var vm = new Vue({ |
| | | el: bs.$el[0], |
| | | data: { |
| | | block: { |
| | | main: 0, |
| | | block1: 0, |
| | | alarmBlock1: 0 |
| | | }, |
| | | numbers: { |
| | | alarms: 0, |
| | | charge: 0, |
| | |
| | | key: 'battGroupName' |
| | | }, { |
| | | title: '告警名称', |
| | | minWidth: 240, |
| | | minWidth: 200, |
| | | align: 'center', |
| | | key: 'note' |
| | | }, { |
| | |
| | | key: 'MonNum' |
| | | }, { |
| | | title: '告警开始时间', |
| | | minWidth: 240, |
| | | minWidth: 200, |
| | | align: 'center', |
| | | key: 'alm_start_time' |
| | | }, { |
| | |
| | | }, { |
| | | path: 'battery', |
| | | url: '../battery/battery.html' |
| | | }, { |
| | | path: 'system', |
| | | url: '../system/system.html' |
| | | }] |
| | | }, |
| | | methods: { |
| | |
| | | url: '../battery/batteryInfo.html', |
| | | param: param |
| | | }); |
| | | }, |
| | | setBlock: function setBlock() { |
| | | var main = this.$refs.main.offsetHeight; |
| | | var block1 = this.$refs.block1.offsetHeight; |
| | | var alarmBlock1 = this.$refs.alarmBlock1.offsetHeight; |
| | | this.block.main = main; |
| | | this.block.block1 = block1; |
| | | this.block.alarmBlock1 = alarmBlock1; |
| | | }, |
| | | getAlarmHt: function getAlarmHt() { |
| | | return this.getTblHt() - 45; |
| | | }, |
| | | getTblHt: function getTblHt() { |
| | | return this.block.main - this.block.block1 - 40; |
| | | } |
| | | }, |
| | | computed: { |
| | | getAlarmHt: function getAlarmHt() { |
| | | |
| | | return 400; |
| | | } |
| | | }, |
| | | mounted: function mounted() { |
| | |
| | | |
| | | // 查询告警,充电,放电的数目 |
| | | this.searchNums(); |
| | | this.setBlock(); |
| | | }, |
| | | destroyed: function destroyed() {} |
| | | }); |
| | |
| | | <li class="bui-btn">历史告警</li> |
| | | </ul> |
| | | </div> |
| | | <div class="bui-tab-main"> |
| | | <div class="bui-tab-main" ref="tabMain"> |
| | | <ul> |
| | | |
| | | <li> |
| | | <iview-table :columns="currTbl.columns" :data="currTbl.data" height="380" style="margin:0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align:center"> |
| | | <div class="tbl-page mt8" style="text-align:center" ref="currBlock1"> |
| | | <i-button type="info" @click="pre('alarm')" :disabled="currTbl.pageBtn.pre">上一页</i-button> |
| | | <i-button type="info" class="ml8" @click="next('alarm')" :disabled="currTbl.pageBtn.next">下一页</i-button> |
| | | </div> |
| | | </li> |
| | | <li style="display:none"> |
| | | <iview-table :columns="hisTbl.columns" :data="hisTbl.data" height="380" style="margin:0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align:center"> |
| | | <div class="tbl-page mt8" style="text-align:center" ref="hisBlock1"> |
| | | <i-button type="info" @click="pre('his')" :disabled="hisTbl.pageBtn.pre">上一页</i-button> |
| | | <i-button type="info" class="ml8" @click="next('his')" :disabled="hisTbl.pageBtn.next">下一页</i-button> |
| | | </div> |
| | |
| | | body { |
| | | font-size: .25rem; |
| | | font-size: 25px; |
| | | } |
| | | #bui-router .bui-page>.main, .bui-page>main{ |
| | | background-color: #e1ecfa; |
| | |
| | | background-color: #2d8cf0; |
| | | } |
| | | .bui-table th, .bui-table td { |
| | | padding: .1rem .1rem; |
| | | padding: 10 15px; |
| | | border: 1px solid #CCCCCC; |
| | | } |
| | | .tbl-container-header { |
| | | padding: .5em; |
| | | padding: 5px; |
| | | font-weight: bold; |
| | | color: #2d8cf0; |
| | | } |
| | | .bui-btn-small { |
| | | padding-top: .15rem; |
| | | padding-bottom: .15rem; |
| | | padding-top: 15px; |
| | | padding-bottom: 15px; |
| | | } |
| | | .bui-icon { |
| | | width: 88px; |
| | | height: 88px; |
| | | line-height: 88px; |
| | | } |
| | | .bui-list .icon { |
| | | width: 54px; |
| | | height: 54px; |
| | | line-height: 54px; |
| | | } |
| | | .bui-nav-icon .bui-btn>.bui-icon, .bui-nav-icon .bui-btn>.icon { |
| | | margin-bottom: 20px; |
| | | } |
| | | [class*=bui-btn] { |
| | | padding-top: 8px; |
| | | padding-bottom: 8px; |
| | | padding-left: 10px; |
| | | padding-right: 10px; |
| | | line-height: 16px; |
| | | min-height: 24px; |
| | | } |
| | | [class*=bui-btn] .bui-icon { |
| | | font-size: 48px; |
| | | } |
| | | .bui-nav-icon .bui-btn i, .bui-nav-icon .bui-btn .icon, .bui-nav-icon .bui-btn [class^=bui-icon-] { |
| | | font-size: 64px; |
| | | width: 88px; |
| | | height: 88px; |
| | | } |
| | | .round { |
| | | border-radius: 10px; |
| | | } |
| | | .bui-nav-icon .bui-badges { |
| | | min-width: 33px; |
| | | min-height: 33px; |
| | | line-height: 33px; |
| | | } |
| | | [class*=bui-badges] { |
| | | font-size: 25px; |
| | | } |
| | | |
| | | .item-title { |
| | | padding-right: 10px; |
| | | margin-bottom: 20px; |
| | | font-size: 18px; |
| | | } |
| | | .header.bui-bar .bui-bar-main, |
| | | .header .bui-bar .bui-bar-main, |
| | | header.bui-bar .bui-bar-main, |
| | | header .bui-bar .bui-bar-main { |
| | | font-size: 18px; |
| | | } |
| | | .bui-bar .bui-bar-left, |
| | | .bui-bar .bui-bar-right { |
| | | width: 120px; |
| | | height: 50px; |
| | | } |
| | | .bui-bar .bui-bar-left>[class*=bui-btn] { |
| | | padding-left: 20px; |
| | | } |
| | | .bui-bar .bui-bar-left>[class*=bui-btn], |
| | | .bui-bar .bui-bar-right>[class*=bui-btn] { |
| | | height: 50px; |
| | | line-height: 50px; |
| | | font-size: 27px; |
| | | } |
| | | .bui-bar .bui-bar-left>[class*=bui-btn]>i, |
| | | .bui-bar .bui-bar-right>[class*=bui-btn]>i { |
| | | height: 50px; |
| | | line-height: 50px; |
| | | font-size: 30px; |
| | | } |
| | | .bui-bar [class^="icon-"] { |
| | | width: 44px; |
| | | height: 44px; |
| | | line-height: 44px; |
| | | } |
| | | .bui-loading .bui-loading-block { |
| | | width: 20px !important; |
| | | height: 20px !important; |
| | | } |
| | | .bui-table th, |
| | | .bui-table td { |
| | | padding: 5px 5px; |
| | | } |
| | | /* iview */ |
| | | .tbl-content .ivu-table th { |
| | | background-color: #2d8cf0; |
| | |
| | | |
| | | /* component style */ |
| | | .bui-list-header { |
| | | padding-top: .1rem; |
| | | padding-bottom: .1rem; |
| | | font-size: .34rem; |
| | | padding-top: 10px; |
| | | padding-bottom: 10px; |
| | | font-size: 18px; |
| | | color: #FFFFFF; |
| | | text-align: center; |
| | | background-color: #2d8cf0; |
| | |
| | | chart: '' |
| | | } |
| | | }, |
| | | watch: { |
| | | height: function(value) { |
| | | this.chart.setSize(undefined, value); |
| | | } |
| | | }, |
| | | methods: { |
| | | init: function() { |
| | | var self = this; |
| | |
| | | lazyload.js([ |
| | | // 'js/zepto.js', |
| | | // 'js/bui.js', |
| | | 'js/echarts.min.js', |
| | | // 'js/echarts.min.js', |
| | | 'css/highchart/highcharts.js', |
| | | // 'js/const_var.js', |
| | | // 'js/common_functions.js', |
| | |
| | | // 侧边栏 |
| | | this.uiSidebar = bui.sidebar({ |
| | | id: "#sidebarWrap", //菜单的ID(必须) |
| | | width: 500, |
| | | width: 400, |
| | | trigger: "#menu", |
| | | isActive: true, |
| | | }); |
| | |
| | | <td>电池状态:<span v-text="getBattState"></span></td> |
| | | <td>组端电压:<span v-text="rtState.group_vol"></span>V</td> |
| | | <td>组端电流:<span v-text="rtState.group_curr"></span>A</td> |
| | | <td rowspan="3" style="width: 2rem"> |
| | | <td rowspan="3" style="width: 300px"> |
| | | <button class="bui-btn bui-btn-small bg-primary">内阻测试</button> |
| | | <button class="bui-btn bui-btn-small mt8 bg-primary">导出数据</button> |
| | | </td> |
| | |
| | | <li class="bui-btn">测试数据</li> --> |
| | | </ul> |
| | | </div> |
| | | <div class="bui-tab-main"> |
| | | <div class="bui-tab-main" ref="tabMain"> |
| | | <ul> |
| | | <!-- 内容必须在li里面 --> |
| | | <li> |
| | | <iview-table |
| | | height="370" |
| | | :height="getTabHt()" |
| | | style="margin-top: 8px; margin-left: 0; margin-right: 0;" |
| | | :columns="tbls.monList.columns" |
| | | :data="tbls.monList.data"></iview-table> |
| | |
| | | </li> |
| | | <li style="display: none"> |
| | | <high-bar-chart |
| | | height="370px" |
| | | :height="getTabHt('px')" |
| | | id="monVolBar" |
| | | name="电压" unit="V" |
| | | ref="monVolBar"></high-bar-chart> |
| | | </li> |
| | | <li style="display: none"> |
| | | <high-bar-chart |
| | | height="370px" |
| | | :height="getTabHt('px')" |
| | | id="monResBar" |
| | | name="内阻" unit="mΩ" |
| | | :colors="{min:'#19be6b', max: '#ed4014'}" |
| | | ref="monResBar"></high-bar-chart> |
| | | </li> |
| | | <li style="display: none"> |
| | | <high-bar-chart |
| | | height="370px" |
| | | :height="getTabHt('px')" |
| | | id="monTmpBar" |
| | | name="温度" unit="℃" |
| | | :colors="{min:'#19be6b', max: '#ed4014'}" |
| | | ref="monTmpBar"></high-bar-chart> |
| | | </li> |
| | | <li style="display: none">当前告警</li> |
| | | <li style="display: none">测试数据</li> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | |
| | | var vm = this.vm = new Vue({ |
| | | el: bs.$el[0], |
| | | data: { |
| | | block: { |
| | | tabMain: 0, |
| | | }, |
| | | params: params, |
| | | title: '未知', |
| | | timer: { |
| | |
| | | avg: '0℃', |
| | | } |
| | | ]; |
| | | if(tabsState.totalInfo.state) { |
| | | if(tabsState.totalInfo.state && data.length != 0) { |
| | | var data0 = data[0]; |
| | | // 电压 |
| | | var vol = { |
| | | max: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_vol |
| | | }, |
| | | min: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_vol |
| | | }, |
| | | } |
| | | // 内阻 |
| | | var res = { |
| | | max: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_res, |
| | | }, |
| | | min: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_res, |
| | | }, |
| | | } |
| | | |
| | | // 温度 |
| | | var tmp = { |
| | | max: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_tmp, |
| | | }, |
| | | min: { |
| | | mon_num: [data0.mon_num], |
| | | value: data0.mon_tmp, |
| | | }, |
| | | } |
| | | |
| | | // 总值 |
| | | var sum = { |
| | | vol: data0.mon_vol, |
| | | res: data0.mon_res, |
| | | tmp: data0.mon_tmp, |
| | | }; |
| | | // 长度 |
| | | var len = data.length; |
| | | for(var i=1; i<len; i++) { |
| | | var _data = data[i]; |
| | | this.setTotalMaxMin(vol, _data, 'mon_vol'); |
| | | this.setTotalMaxMin(res, _data, 'mon_res'); |
| | | this.setTotalMaxMin(tmp, _data, 'mon_tmp'); |
| | | sum.vol += _data.mon_vol; |
| | | sum.res += _data.mon_res; |
| | | sum.tmp += _data.mon_tmp; |
| | | } |
| | | |
| | | // 设置电压 |
| | | var volMaxMin = this.formatMaxMin(vol, 'V'); |
| | | result[0].high = volMaxMin.max; |
| | | result[0].low = volMaxMin.min; |
| | | result[0].avg = this.getAvg(sum.vol, len, 'V'); |
| | | |
| | | // 设置内阻 |
| | | var resMaxMin = this.formatMaxMin(res, 'mΩ'); |
| | | result[1].high = resMaxMin.max; |
| | | result[1].low = resMaxMin.min; |
| | | result[1].avg = this.getAvg(sum.res, len, 'mΩ'); |
| | | |
| | | // 设置温度 |
| | | var tmpMaxMin = this.formatMaxMin(tmp, '℃'); |
| | | result[2].high = tmpMaxMin.max; |
| | | result[2].low = tmpMaxMin.min; |
| | | result[2].avg = this.getAvg(sum.tmp, len, '℃'); |
| | | |
| | | this.tbls.totalInfo.data = result; |
| | | } |
| | | }, |
| | | setTotalMaxMin: function(target, item, key) { |
| | | if(item[key] > target.max.value) { |
| | | target.max.mon_num = [item.mon_num]; |
| | | target.max.value = item[key]; |
| | | }else if(item[key] == target.max.value) { |
| | | target.max.mon_num.push(item.mon_num); |
| | | } |
| | | |
| | | if(item[key] < target.min.value) { |
| | | target.min.mon_num = [item.mon_num]; |
| | | target.min.value = item[key]; |
| | | }else if(item[key] == target.min.value) { |
| | | target.min.mon_num.push(item.mon_num); |
| | | } |
| | | }, |
| | | formatMaxMin: function(data, unit) { |
| | | var result = { |
| | | max: '', |
| | | min: '' |
| | | }; |
| | | // 设置max |
| | | var max = data.max; |
| | | var num_str = '#'+max.mon_num[0]; |
| | | for(var i=1; i<max.mon_num.length; i++) { |
| | | num_str += ',#'+max.mon_num[i]; |
| | | } |
| | | result.max = num_str+":"+max.value+unit; |
| | | |
| | | // 设置min |
| | | var min = data.min; |
| | | var num_str = '#'+min.mon_num[0]; |
| | | for(var i=1; i<min.mon_num.length; i++) { |
| | | num_str += ',#'+min.mon_num[i]; |
| | | } |
| | | result.min = num_str+":"+min.value+unit; |
| | | |
| | | return result; |
| | | }, |
| | | getAvg(sum, len, unit) { |
| | | return Number((sum/len).toFixed(2))+unit; |
| | | }, |
| | | setOptions: function(data) { |
| | | // 遍历data的值 |
| | |
| | | // 关闭页面的计时器 |
| | | this.timer.rtState.stop(); |
| | | this.timer.rtData.stop(); |
| | | }, |
| | | setBlock: function() { |
| | | this.block.tabMain = this.$refs.tabMain.offsetHeight; |
| | | }, |
| | | getTabHt: function(unit) { |
| | | var result = 0; |
| | | if(unit) { |
| | | result = this.block.tabMain - 5+unit; |
| | | }else { |
| | | result = this.block.tabMain - 10; |
| | | } |
| | | return result; |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | }); |
| | | |
| | | this.startSearch(); |
| | | setTimeout(function() { |
| | | // 设置模块的高度 |
| | | self.setBlock(); |
| | | }, 10); |
| | | }, |
| | | beforeDestroy() { |
| | | this.stopTimers(); |
| | |
| | | <!-- 这里还是一个标准的BUI页面 --> |
| | | <div class="bui-page" id="main"> |
| | | <main> |
| | | <main ref="main"> |
| | | <!-- 中间内容 --> |
| | | <div class="main-inner"> |
| | | <ul class="bui-list bui-fluid exammine"> |
| | | <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> |
| | | <h3 class="item-title approve">4</h3> |
| | | <p class="item-text">菜单</p> |
| | | </div> |
| | | </li> |
| | |
| | | <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"> |
| | | <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"> |
| | | <!-- <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 success round"><i class="iconfont icon-daochu"></i></div> |
| | | <div class="span1">日志导出</div> |
| | | </li> |
| | | </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> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div class="tab-item" v-show="tabs.alarm" style="display: none"> |
| | |
| | | :columns="tbls.alarm.columns" |
| | | :data="tbls.alarm.data" |
| | | :title="tbls.alarm.title" |
| | | height="430" |
| | | :height="getAlarmHt()" |
| | | style="margin: 0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align: center"> |
| | | <div class="tbl-page mt8" style="text-align: center" ref="alarmBlock1"> |
| | | <i-button |
| | | type="info" |
| | | @click="pre('alarm')" |
| | |
| | | :columns="tbls.charge.columns" |
| | | :data="tbls.charge.data" |
| | | :title="tbls.charge.title" |
| | | height="460" |
| | | :height="getTblHt()" |
| | | style="margin: 0"></iview-table> |
| | | </div> |
| | | <div class="tab-item" v-show="tabs.discharge" style="display: none"> |
| | |
| | | :columns="tbls.discharge.columns" |
| | | :data="tbls.discharge.data" |
| | | :title="tbls.discharge.title" |
| | | height="460" |
| | | :height="getTblHt()" |
| | | style="margin: 0"></iview-table> |
| | | </div> |
| | | </div> |
| | |
| | | overflow: auto; |
| | | } |
| | | .exammine{ |
| | | padding: 0.25rem 0; |
| | | padding: 25px 0; |
| | | background-color: #ffffff; |
| | | } |
| | | .exammine>[class*=bui-btn]{ |
| | | border: none; |
| | | padding: 0 0.2rem; |
| | | padding: 0 20px; |
| | | border-right: 1px solid #f5f5f5; |
| | | } |
| | | .activity .icon, |
| | |
| | | color:#fff; |
| | | } |
| | | .exammine li .span1 h3{ |
| | | font-size: 0.38rem; |
| | | font-size: 38px; |
| | | text-align: right; |
| | | } |
| | | .exammine li .span1 h3.approve{ |
| | |
| | | color: #f16a7a; |
| | | } |
| | | .exammine li .span1 p{ |
| | | font-size: 0.18rem; |
| | | font-size: 18px; |
| | | text-align: right; |
| | | } |
| | | .exammine>[class*=bui-btn]:last-child{ |
| | |
| | | } |
| | | |
| | | .exammine .thumbnail{ |
| | | line-height: 0.88rem; |
| | | height: 0.88rem; |
| | | width: 0.88rem; |
| | | line-height: 88px; |
| | | height: 88px; |
| | | width: 88px; |
| | | text-align: center; |
| | | border-radius: 50%; |
| | | margin-right: 0; |
| | |
| | | .exammine .thumbnail.due{ |
| | | background-color: #f16a7a; |
| | | } |
| | | .exammine [class*=bui-btn] .icon{ |
| | | font-size: 0.54rem; |
| | | .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: 0.2rem; |
| | | padding: 0 0.2rem; |
| | | margin-top: 20px; |
| | | padding: 0 20px; |
| | | background-color: #ffffff; |
| | | } |
| | | .activity .bui-btn{ |
| | | padding-top: .2rem; |
| | | padding-bottom: .2rem; |
| | | padding-top: 20px; |
| | | padding-bottom: 20px; |
| | | padding-left: 0; |
| | | padding-right: 0; |
| | | } |
| | |
| | | var vm =new Vue({ |
| | | el: bs.$el[0], |
| | | data: { |
| | | block: { |
| | | main: 0, |
| | | block1: 0, |
| | | alarmBlock1: 0 |
| | | }, |
| | | numbers: { |
| | | alarms: 0, |
| | | charge: 0, |
| | |
| | | }, |
| | | { |
| | | title: '告警名称', |
| | | minWidth: 240, |
| | | minWidth: 200, |
| | | align: 'center', |
| | | key: 'note' |
| | | }, |
| | |
| | | }, |
| | | { |
| | | title: '告警开始时间', |
| | | minWidth: 240, |
| | | minWidth: 200, |
| | | align: 'center', |
| | | key: 'alm_start_time' |
| | | }, |
| | |
| | | { |
| | | path: 'battery', |
| | | url: '../battery/battery.html' |
| | | }, |
| | | { |
| | | path: 'system', |
| | | url: '../system/system.html' |
| | | } |
| | | ] |
| | | }, |
| | |
| | | url: '../battery/batteryInfo.html', |
| | | param: param |
| | | }); |
| | | }, |
| | | setBlock: function() { |
| | | var main = this.$refs.main.offsetHeight; |
| | | var block1 = this.$refs.block1.offsetHeight; |
| | | var alarmBlock1 = this.$refs.alarmBlock1.offsetHeight; |
| | | this.block.main = main; |
| | | this.block.block1 = block1; |
| | | this.block.alarmBlock1 = alarmBlock1; |
| | | }, |
| | | getAlarmHt: function() { |
| | | return this.getTblHt() - 45; |
| | | }, |
| | | getTblHt: function() { |
| | | return this.block.main - this.block.block1 - 40; |
| | | } |
| | | }, |
| | | computed: { |
| | | getAlarmHt: function() { |
| | | |
| | | return 400; |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | |
| | | // 查询告警,充电,放电的数目 |
| | | this.searchNums(); |
| | | this.setBlock(); |
| | | }, |
| | | destroyed() { |
| | | |
New file |
| | |
| | | <!-- 这里还是一个标准的BUI页面 --> |
| | | <div class="bui-page"> |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | <!-- 左边有图标示例 --> |
| | | <div class="bui-btn btn-back" @click="stopTimers"><i class="icon-back"></i></div> |
| | | </div> |
| | | <div class="bui-bar-main">系统管理</div> |
| | | <div class="bui-bar-right"> |
| | | <!-- 右边有图标示例 --> |
| | | <div class="bui-btn" id="menu" class="menu"><i class="icon"></i></div> |
| | | </div> |
| | | </header> |
| | | <main> |
| | | <!-- 中间内容 --> |
| | | </main> |
| | | </div> |
| | |
| | | <li class="bui-btn">历史告警</li> |
| | | </ul> |
| | | </div> |
| | | <div class="bui-tab-main"> |
| | | <div class="bui-tab-main" ref="tabMain"> |
| | | <ul> |
| | | <!-- 内容必须在li里面 --> |
| | | <li > |
| | |
| | | :data="currTbl.data" |
| | | height="380" |
| | | style="margin: 0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align: center"> |
| | | <div class="tbl-page mt8" style="text-align: center" ref="currBlock1"> |
| | | <i-button |
| | | type="info" |
| | | @click="pre('alarm')" |
| | |
| | | :data="hisTbl.data" |
| | | height="380" |
| | | style="margin: 0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align: center"> |
| | | <div class="tbl-page mt8" style="text-align: center" ref="hisBlock1"> |
| | | <i-button |
| | | type="info" |
| | | @click="pre('his')" |