| | |
| | | |
| | | <body> |
| | | |
| | | <div id="bui-router"></div> |
| | | |
| | | <div id="bui-router"> |
| | | <img src="images/first_bg.png"> |
| | | </div> |
| | | <script src="js/zepto.js"></script> |
| | | <script src="js/bui.js"></script> |
| | | |
| | | <script src="js/echarts.min.js"></script> |
| | | |
| | | |
| | | <script src="js/const_var.js"></script> |
| | | |
| | | <script src="js/common_functions.js"></script> |
| | | |
| | | <script src="js/vue.min.js"></script> |
| | | <script src="css/iview/iview.min.js"></script> |
| | | |
| | | <script src="js/components.js"></script> |
| | | |
| | | |
| | | |
| | | <script src="index.js"></script> |
| | | <script src="js/lazyload.js"></script> |
| | | <script src="js/load_lazy.js?b82bd0ea87"></script> |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | |
| | | methods: { |
| | | setOption: function setOption(opt) { |
| | | var self = this; |
| | | var defaults = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | |
| | | // 设置柱状图的颜色 |
| | | this._setColor(); |
| | | this.graph.setOption(this.option); |
| | | |
| | | this.graph.resize(); |
| | | this.graph.setOption(this.option, true); |
| | | }, |
| | | _setRange: function _setRange() { |
| | | // 设置范围 |
| | |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | |
| | | <div class="bui-btn btn-back"><i class="icon-back"></i></div> |
| | | <div class="bui-btn btn-back" @click="stopTimers"><i class="icon-back"></i></div> |
| | | </div> |
| | | <div class="bui-bar-main"><span v-text="devInfo.fbsName"></span>-电池数据监控</div> |
| | | <div class="bui-bar-right"> |
| | |
| | | */ |
| | | loader.define({ |
| | | data: { |
| | | vm: '' |
| | | vm: '', |
| | | loading: '' |
| | | }, |
| | | loaded: function loaded(require, exports, module) { |
| | | // bui.alert('loaded') |
| | | var loading = this.loading = bui.loading(); |
| | | this.loading.show(); |
| | | var bs = bui.store({ |
| | | scope: 'page', |
| | | data: {} |
| | |
| | | var data = rs.data; |
| | | for (var i = 0; i < data.length; i++) { |
| | | var _data = data[i]; |
| | | _data.title = _data.FBSDeviceName; |
| | | //console.log(_data); |
| | | _data.title = _data.StationName3; |
| | | } |
| | | self.devInfos.list = data; |
| | | } |
| | |
| | | handlerListClick: function handlerListClick(item) { |
| | | this.setDevInfo(this.formateListData(item)); |
| | | this.startBattInfo(item.FBSDeviceId); |
| | | // console.log(this.uiSidebar); |
| | | this.uiSidebar.close(); |
| | | }, |
| | | formateListData: function formateListData(data) { |
| | |
| | | } |
| | | }, |
| | | mounted: function mounted() { |
| | | var self = this; |
| | | // 关闭等待框 |
| | | loading.hide(); |
| | | |
| | | // 获取所有设备的信息 |
| | | this.searchDevice(); |
| | | |
| | | // 脚本都需要在这里执行 |
| | | var uiTab = bui.tab({ |
| | | id: "#uiTab" |
| | | }); |
| | | |
| | | // 侧边栏 |
| | | this.uiSidebar = bui.sidebar({ |
| | |
| | | isActive: true |
| | | }); |
| | | this.uiSidebar.open(); |
| | | // 脚本都需要在这里执行 |
| | | var uiTab = bui.tab({ |
| | | id: "#uiTab" |
| | | }); |
| | | router.preload({ |
| | | url: 'pages/battery/batteryInfo.html' |
| | | }); |
| | | }, |
| | | beforeDestroy: function beforeDestroy() { |
| | | // 关闭页面计时器 |
| | |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | |
| | | <div class="bui-btn btn-back"><i class="icon-back"></i></div> |
| | | <div class="bui-btn btn-back" @click="stopTimers"><i class="icon-back"></i></div> |
| | | </div> |
| | | <div class="bui-bar-main" v-text="getTitle"></div> |
| | | <div class="bui-bar-right"> |
| | |
| | | <li class="bui-btn">单体电压图</li> |
| | | <li class="bui-btn">单体内阻图</li> |
| | | <li class="bui-btn">单体温度图</li> |
| | | <li class="bui-btn">当前告警</li> |
| | | <li class="bui-btn">测试数据</li> |
| | | |
| | | </ul> |
| | | </div> |
| | | <div class="bui-tab-main"> |
| | | <ul> |
| | | |
| | | <li> |
| | | <iview-table height="300" 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">统计信息</li> |
| | | <li style="display:none"> |
| | | <bar-chart height="300px" ref="monVolBar" :show-value="true" :range="{'min': 0,'max': 1}"></bar-chart> |
| | | <iview-table height="370" 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"> |
| | | <bar-chart height="300px" ref="monResBar" :show-value="true" :range="{'min': 0,'max': 1}"></bar-chart> |
| | | <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"> |
| | | <bar-chart height="300px" ref="monTmpBar" :show-value="true" :range="{'min': 0,'max': 1}"></bar-chart> |
| | | <bar-chart height="370px" ref="monVolBar" :show-value="true" :range="{'min': 0,'max': 1}"></bar-chart> |
| | | </li> |
| | | <li style="display:none"> |
| | | <bar-chart height="370px" ref="monResBar" :show-value="true" :range="{'min': 0,'max': 1}"></bar-chart> |
| | | </li> |
| | | <li style="display:none"> |
| | | <bar-chart height="370px" ref="monTmpBar" :show-value="true" :range="{'min': 0,'max': 1}"></bar-chart> |
| | | </li> |
| | | <li style="display:none">当前告警</li> |
| | | <li style="display:none">测试数据</li> |
| | |
| | | */ |
| | | loader.define({ |
| | | data: { |
| | | vm: '' |
| | | vm: '', |
| | | loading: '' |
| | | }, |
| | | loaded: function loaded(require, exports, module) { |
| | | this.loading = bui.loading(); |
| | | this.loading.show(); |
| | | }, |
| | | show: function show() { |
| | | var loading = this.loading; |
| | | var bs = bui.store({ |
| | | scope: 'page', |
| | | data: {} |
| | |
| | | data: { |
| | | params: params, |
| | | title: '未知', |
| | | timer: { |
| | | rtState: new Timeout(), |
| | | rtData: new Timeout() |
| | | }, |
| | | rtState: { |
| | | batt_test_type: '', // 电池状态 |
| | | group_vol: '', // 组端电压 |
| | |
| | | batt_test_recordtime: '', // 更新日期 |
| | | batt_test_tlong: 0 // 测试时长 |
| | | }, |
| | | activeTab: 0, |
| | | tabsState: { |
| | | monList: { // 单体列表 |
| | | key: 0, |
| | | show: true, |
| | | state: true |
| | | }, |
| | | totalInfo: { // 统计信息 |
| | | key: 1, |
| | | init: false, |
| | | state: false |
| | | }, |
| | | monVol: { // 单体电压 |
| | | key: 2, |
| | | init: false, |
| | | state: false |
| | | }, |
| | | monRes: { // 单体电流 |
| | | key: 3, |
| | | init: false, |
| | | state: false |
| | | }, |
| | | monTmp: { // 单体温度 |
| | | key: 4, |
| | | init: false, |
| | | state: false |
| | | } |
| | | }, |
| | | tbls: { |
| | | monList: { |
| | | columns: [{ |
| | | title: '单体', |
| | | key: 'key1' |
| | | key: 'num1', |
| | | width: 70, |
| | | align: 'center' |
| | | }, { |
| | | title: '电压(V)', |
| | | key: 'key2' |
| | | title: '电压(V)', |
| | | key: 'vol1', |
| | | align: 'center' |
| | | }, { |
| | | title: '内阻(mΩ)', |
| | | key: 'key3' |
| | | title: '内阻(mΩ)', |
| | | key: 'res1', |
| | | align: 'center' |
| | | }, { |
| | | title: '温度(℃)', |
| | | key: 'tmp1', |
| | | align: 'center' |
| | | }, { |
| | | title: ' ', |
| | | key: 'key4', |
| | | width: 8, |
| | | key: 'split1', |
| | | width: 2, |
| | | className: 'split-td' |
| | | }, { |
| | | title: '单体', |
| | | key: 'key5' |
| | | key: 'num2', |
| | | width: 70, |
| | | align: 'center' |
| | | }, { |
| | | title: '电压(V)', |
| | | key: 'key6' |
| | | title: '电压(V)', |
| | | key: 'vol2', |
| | | align: 'center' |
| | | }, { |
| | | title: '内阻(mΩ)', |
| | | key: 'key7' |
| | | title: '内阻(mΩ)', |
| | | key: 'res2', |
| | | align: 'center' |
| | | }, { |
| | | title: '温度(℃)', |
| | | key: 'tmp2', |
| | | align: 'center' |
| | | }, { |
| | | title: ' ', |
| | | key: 'key8', |
| | | width: 8, |
| | | key: 'split2', |
| | | width: 2, |
| | | className: 'split-td' |
| | | }, { |
| | | title: '单体', |
| | | key: 'key9' |
| | | key: 'num3', |
| | | width: 70, |
| | | align: 'center' |
| | | }, { |
| | | title: '电压(V)', |
| | | key: 'key10' |
| | | title: '电压(V)', |
| | | key: 'vol3', |
| | | align: 'center' |
| | | }, { |
| | | title: '内阻(mΩ)', |
| | | key: 'key11' |
| | | title: '内阻(mΩ)', |
| | | key: 'res3', |
| | | align: 'center' |
| | | }, { |
| | | title: '温度(℃)', |
| | | key: 'tmp3', |
| | | align: 'center' |
| | | }], |
| | | data: [] |
| | | }, |
| | | totalInfo: { |
| | | columns: [{ |
| | | title: '类型', |
| | | key: 'type', |
| | | width: 90, |
| | | align: 'center' |
| | | }, { |
| | | title: '较高单体', |
| | | key: 'high', |
| | | align: 'center' |
| | | }, { |
| | | title: '较低单体', |
| | | key: 'low', |
| | | align: 'center' |
| | | }, { |
| | | title: '平均值', |
| | | key: 'avg', |
| | | width: 100, |
| | | align: 'center' |
| | | }], |
| | | data: [] |
| | | } |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | changeTabsState: function changeTabsState(num) { |
| | | var result = ''; |
| | | if (this.activeTab == num) { |
| | | return; |
| | | } |
| | | var tabsState = this.tabsState; |
| | | this.activeTab = num; |
| | | Object.keys(tabsState).forEach(function (key) { |
| | | var _tabsState = tabsState[key]; |
| | | if (_tabsState.key == num) { |
| | | result = _tabsState; |
| | | _tabsState.state = true; |
| | | } else { |
| | | _tabsState.state = false; |
| | | } |
| | | }); |
| | | return result; |
| | | }, |
| | | searchRtState: function searchRtState() { |
| | | var self = this; |
| | | var json = JSON.stringify({ |
| | |
| | | // console.log(data); |
| | | self.rtState = data; |
| | | } |
| | | }, |
| | | complete: function complete() { |
| | | // 开启计时器 |
| | | self.timer.rtState.open(); |
| | | } |
| | | }); |
| | | }, |
| | | searchRtData: function searchRtData() { |
| | | searchRtData: function searchRtData(isLoading) { |
| | | var self = this; |
| | | var json = JSON.stringify({ |
| | | BattGroupId: self.params.battGroupId |
| | | }); |
| | | var ajaxLoading = ""; |
| | | if (isLoading) { |
| | | ajaxLoading = bui.loading(); |
| | | ajaxLoading.show(); |
| | | } |
| | | |
| | | // 查询后台 |
| | | ajax({ |
| | | type: 'post', |
| | |
| | | // console.log(rs); |
| | | if (rs.code == 1) { |
| | | var data = rs.data; |
| | | console.log(data); |
| | | //console.log(data); |
| | | self.setTbls(data); |
| | | self.setOptions(data); |
| | | } else { |
| | | self.updateGraph(); |
| | | } |
| | | }, |
| | | complete: function complete() { |
| | | if (isLoading) { |
| | | ajaxLoading.hide(); |
| | | } |
| | | // 开启计时器 |
| | | self.timer.rtData.open(); |
| | | } |
| | | }); |
| | | }, |
| | | setTbls: function setTbls(data) { |
| | | this.setMonData(data); |
| | | this.setTotalInfoData(data); |
| | | }, |
| | | setMonData: function setMonData(data) { |
| | | var tabsState = this.tabsState; |
| | | // 判断是否显示单体列表 |
| | | if (tabsState.monList.state) { |
| | | var result = []; |
| | | // 遍历data的值进行格式化 |
| | | for (var i = 0; i < data.length; i += 3) { |
| | | var tmp = {}; |
| | | var data1 = data[i]; |
| | | tmp.num1 = '#' + data1.mon_num; |
| | | tmp.vol1 = data1.mon_vol; |
| | | tmp.res1 = data1.mon_res; |
| | | tmp.tmp1 = data1.mon_tmp; |
| | | var num2 = i + 1; |
| | | if (num2 == data.length) { |
| | | result.push(tmp); |
| | | break; |
| | | } |
| | | var data2 = data[i + 1]; |
| | | tmp.num2 = '#' + data2.mon_num; |
| | | tmp.vol2 = data2.mon_vol; |
| | | tmp.res2 = data2.mon_res; |
| | | tmp.tmp2 = data2.mon_tmp; |
| | | |
| | | var num3 = i + 2; |
| | | if (num3 == data.length) { |
| | | result.push(tmp); |
| | | break; |
| | | } |
| | | var data3 = data[i + 2]; |
| | | tmp.num3 = '#' + data3.mon_num; |
| | | tmp.vol3 = data3.mon_vol; |
| | | tmp.res3 = data3.mon_res; |
| | | tmp.tmp3 = data3.mon_tmp; |
| | | result.push(tmp); |
| | | } |
| | | this.tbls.monList.data = result; |
| | | } |
| | | }, |
| | | setTotalInfoData: function setTotalInfoData(data) { |
| | | var tabsState = this.tabsState; |
| | | var result = [{ |
| | | type: '电压', |
| | | avg: '0V' |
| | | }, { |
| | | type: '内阻', |
| | | avg: '0mΩ' |
| | | }, { |
| | | type: '温度', |
| | | avg: '0℃' |
| | | }]; |
| | | if (tabsState.totalInfo.state) { |
| | | this.tbls.totalInfo.data = result; |
| | | } |
| | | }, |
| | | setOptions: function setOptions(data) { |
| | | // 遍历data的值 |
| | |
| | | }, |
| | | // 更新图谱 |
| | | updateGraph: function updateGraph() { |
| | | var tabsState = this.tabsState; |
| | | // console.log(tabsState); |
| | | // 更新单体电压 |
| | | this.$refs['monVolBar'].setOption(this.options.monVol.option); |
| | | if (tabsState.monVol.state) { |
| | | // bui.alert(7788); |
| | | this.$refs['monVolBar'].setOption(this.options.monVol.option); |
| | | } |
| | | |
| | | // 更新单体内阻 |
| | | this.$refs['monResBar'].setOption(this.options.monRes.option); |
| | | if (tabsState.monRes.state) { |
| | | this.$refs['monResBar'].setOption(this.options.monRes.option); |
| | | } |
| | | |
| | | // 更新单体温度 |
| | | this.$refs['monTmpBar'].setOption(this.options.monTmp.option); |
| | | if (tabsState.monTmp.state) { |
| | | this.$refs['monTmpBar'].setOption(this.options.monTmp.option); |
| | | } |
| | | |
| | | // 更新单体电导 |
| | | // this.$refs['monSerBar'].setOption(this.options.monSer.option); |
| | | }, |
| | | startSearch: function startSearch() { |
| | | var self = this; |
| | | // 查询电池组状态 |
| | | this.timer.rtState.start(function () { |
| | | self.searchRtState(); |
| | | }, 4000); |
| | | // 查询电池组信息 |
| | | this.timer.rtData.start(function () { |
| | | self.searchRtData(); |
| | | }, 4000); |
| | | }, |
| | | stopTimers: function stopTimers() { |
| | | // 关闭页面的计时器 |
| | | this.timer.rtState.stop(); |
| | | this.timer.rtData.stop(); |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | } |
| | | }, |
| | | mounted: function mounted() { |
| | | loading.hide(); |
| | | var self = this; |
| | | // 脚本都需要在这里执行 |
| | | var uiTab = bui.tab({ |
| | | id: "#uiTab" |
| | | }); |
| | | uiTab.on('to', function (index) { |
| | | if (self.activeTab != index) { |
| | | var state = self.changeTabsState(index); |
| | | if (state && !state.init) { |
| | | state.init = true; |
| | | self.searchRtData(true); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | // 显示图表 |
| | | this.updateGraph(); |
| | | // 查询电池组状态 |
| | | this.searchRtState(); |
| | | // 查询电池组信息 |
| | | this.searchRtData(); |
| | | this.startSearch(); |
| | | }, |
| | | beforeDestroy: function beforeDestroy() { |
| | | this.stopTimers(); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | </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="360" style="margin:0"></iview-table> |
| | | <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"> |
| | | <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="390" style="margin:0"></iview-table> |
| | | <iview-table :columns="tbls.charge.columns" :data="tbls.charge.data" :title="tbls.charge.title" height="460" 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="390" style="margin:0"></iview-table> |
| | | <iview-table :columns="tbls.discharge.columns" :data="tbls.discharge.data" :title="tbls.discharge.title" height="460" style="margin:0"></iview-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | |
| | | <div class="bui-btn btn-back"><i class="icon-back"></i></div> |
| | | <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"> |
| | |
| | | |
| | | <body> |
| | | <!-- 第1步: 开启单页路由 --> |
| | | <div id="bui-router"></div> |
| | | |
| | | <div id="bui-router"> |
| | | <img src="images/first_bg.png" /> |
| | | </div> |
| | | <script src="js/zepto.js"></script> |
| | | <script src="js/bui.js"></script> |
| | | <!-- 导入echarts --> |
| | | <script src="js/echarts.min.js"></script> |
| | | <!-- <script src="js/echarts.min.js"></script> --> |
| | | <!-- 引入公共变量 --> |
| | | <script src="js/const_var.js"></script> |
| | | <!-- 引入公共函数 --> |
| | | <script src="js/common_functions.js"></script> |
| | | <!-- 引入vue.js --> |
| | | <script src="js/vue.min.js"></script> |
| | | <script src="css/iview/iview.min.js"></script> |
| | | <!-- <script src="css/iview/iview.min.js"></script> --> |
| | | <!-- 引入模板模块 --> |
| | | <script src="js/components.js"></script> |
| | | <!-- <script src="js/components.js"></script> --> |
| | | <!-- 初始化单页 --> |
| | | <script src="index.js"></script> |
| | | <script src="js/lazyload.js"></script> |
| | | <script src="js/load_lazy.js"></script> |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | }, |
| | | methods: { |
| | | setOption: function(opt) { |
| | | var self = this; |
| | | var defaults = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | |
| | | // 设置柱状图的颜色 |
| | | this._setColor(); |
| | | this.graph.setOption(this.option); |
| | | |
| | | this.graph.resize(); |
| | | this.graph.setOption(this.option, true); |
| | | }, |
| | | _setRange: function() { // 设置范围 |
| | | var option = this.option; |
New file |
| | |
| | | /*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false */ |
| | | |
| | | /** |
| | | LazyLoad makes it easy and painless to lazily load one or more external |
| | | JavaScript or CSS files on demand either during or after the rendering of a web |
| | | page. |
| | | |
| | | Supported browsers include Firefox 2+, IE6+, Safari 3+ (including Mobile |
| | | Safari), Google Chrome, and Opera 9+. Other browsers may or may not work and |
| | | are not officially supported. |
| | | |
| | | Visit https://github.com/rgrove/lazyload/ for more info. |
| | | |
| | | Copyright (c) 2011 Ryan Grove <ryan@wonko.com> |
| | | All rights reserved. |
| | | |
| | | Permission is hereby granted, free of charge, to any person obtaining a copy of |
| | | this software and associated documentation files (the 'Software'), to deal in |
| | | the Software without restriction, including without limitation the rights to |
| | | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of |
| | | the Software, and to permit persons to whom the Software is furnished to do so, |
| | | subject to the following conditions: |
| | | |
| | | The above copyright notice and this permission notice shall be included in all |
| | | copies or substantial portions of the Software. |
| | | |
| | | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| | | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS |
| | | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR |
| | | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER |
| | | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN |
| | | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
| | | |
| | | @module lazyload |
| | | @class LazyLoad |
| | | @static |
| | | */ |
| | | |
| | | var LazyLoad = function (doc) { |
| | | // -- Private Variables ------------------------------------------------------ |
| | | |
| | | // User agent and feature test information. |
| | | var env, |
| | | |
| | | // Reference to the <head> element (populated lazily). |
| | | head, |
| | | |
| | | // Requests currently in progress, if any. |
| | | pending = {}, |
| | | |
| | | // Number of times we've polled to check whether a pending stylesheet has |
| | | // finished loading. If this gets too high, we're probably stalled. |
| | | pollCount = 0, |
| | | |
| | | // Queued requests. |
| | | queue = {css: [], js: []}, |
| | | |
| | | // Reference to the browser's list of stylesheets. |
| | | styleSheets = doc.styleSheets; |
| | | |
| | | // -- Private Methods -------------------------------------------------------- |
| | | |
| | | /** |
| | | Creates and returns an HTML element with the specified name and attributes. |
| | | |
| | | @method createNode |
| | | @param {String} name element name |
| | | @param {Object} attrs name/value mapping of element attributes |
| | | @return {HTMLElement} |
| | | @private |
| | | */ |
| | | function createNode(name, attrs) { |
| | | var node = doc.createElement(name), attr; |
| | | |
| | | for (attr in attrs) { |
| | | if (attrs.hasOwnProperty(attr)) { |
| | | node.setAttribute(attr, attrs[attr]); |
| | | } |
| | | } |
| | | |
| | | return node; |
| | | } |
| | | |
| | | /** |
| | | Called when the current pending resource of the specified type has finished |
| | | loading. Executes the associated callback (if any) and loads the next |
| | | resource in the queue. |
| | | |
| | | @method finish |
| | | @param {String} type resource type ('css' or 'js') |
| | | @private |
| | | */ |
| | | function finish(type) { |
| | | var p = pending[type], |
| | | callback, |
| | | urls; |
| | | |
| | | if (p) { |
| | | callback = p.callback; |
| | | urls = p.urls; |
| | | |
| | | urls.shift(); |
| | | pollCount = 0; |
| | | |
| | | // If this is the last of the pending URLs, execute the callback and |
| | | // start the next request in the queue (if any). |
| | | if (!urls.length) { |
| | | callback && callback.call(p.context, p.obj); |
| | | pending[type] = null; |
| | | queue[type].length && load(type); |
| | | } |
| | | } |
| | | } |
| | | |
| | | /** |
| | | Populates the <code>env</code> variable with user agent and feature test |
| | | information. |
| | | |
| | | @method getEnv |
| | | @private |
| | | */ |
| | | function getEnv() { |
| | | var ua = navigator.userAgent; |
| | | |
| | | env = { |
| | | // True if this browser supports disabling async mode on dynamically |
| | | // created script nodes. See |
| | | // http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order |
| | | async: doc.createElement('script').async === true |
| | | }; |
| | | |
| | | (env.webkit = /AppleWebKit\//.test(ua)) |
| | | || (env.ie = /MSIE|Trident/.test(ua)) |
| | | || (env.opera = /Opera/.test(ua)) |
| | | || (env.gecko = /Gecko\//.test(ua)) |
| | | || (env.unknown = true); |
| | | } |
| | | |
| | | /** |
| | | Loads the specified resources, or the next resource of the specified type |
| | | in the queue if no resources are specified. If a resource of the specified |
| | | type is already being loaded, the new request will be queued until the |
| | | first request has been finished. |
| | | |
| | | When an array of resource URLs is specified, those URLs will be loaded in |
| | | parallel if it is possible to do so while preserving execution order. All |
| | | browsers support parallel loading of CSS, but only Firefox and Opera |
| | | support parallel loading of scripts. In other browsers, scripts will be |
| | | queued and loaded one at a time to ensure correct execution order. |
| | | |
| | | @method load |
| | | @param {String} type resource type ('css' or 'js') |
| | | @param {String|Array} urls (optional) URL or array of URLs to load |
| | | @param {Function} callback (optional) callback function to execute when the |
| | | resource is loaded |
| | | @param {Object} obj (optional) object to pass to the callback function |
| | | @param {Object} context (optional) if provided, the callback function will |
| | | be executed in this object's context |
| | | @private |
| | | */ |
| | | function load(type, urls, callback, obj, context) { |
| | | var _finish = function () { finish(type); }, |
| | | isCSS = type === 'css', |
| | | nodes = [], |
| | | i, len, node, p, pendingUrls, url; |
| | | |
| | | env || getEnv(); |
| | | |
| | | if (urls) { |
| | | // If urls is a string, wrap it in an array. Otherwise assume it's an |
| | | // array and create a copy of it so modifications won't be made to the |
| | | // original. |
| | | urls = typeof urls === 'string' ? [urls] : urls.concat(); |
| | | |
| | | // Create a request object for each URL. If multiple URLs are specified, |
| | | // the callback will only be executed after all URLs have been loaded. |
| | | // |
| | | // Sadly, Firefox and Opera are the only browsers capable of loading |
| | | // scripts in parallel while preserving execution order. In all other |
| | | // browsers, scripts must be loaded sequentially. |
| | | // |
| | | // All browsers respect CSS specificity based on the order of the link |
| | | // elements in the DOM, regardless of the order in which the stylesheets |
| | | // are actually downloaded. |
| | | if (isCSS || env.async || env.gecko || env.opera) { |
| | | // Load in parallel. |
| | | queue[type].push({ |
| | | urls : urls, |
| | | callback: callback, |
| | | obj : obj, |
| | | context : context |
| | | }); |
| | | } else { |
| | | // Load sequentially. |
| | | for (i = 0, len = urls.length; i < len; ++i) { |
| | | queue[type].push({ |
| | | urls : [urls[i]], |
| | | callback: i === len - 1 ? callback : null, // callback is only added to the last URL |
| | | obj : obj, |
| | | context : context |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | |
| | | // If a previous load request of this type is currently in progress, we'll |
| | | // wait our turn. Otherwise, grab the next item in the queue. |
| | | if (pending[type] || !(p = pending[type] = queue[type].shift())) { |
| | | return; |
| | | } |
| | | |
| | | head || (head = doc.head || doc.getElementsByTagName('head')[0]); |
| | | pendingUrls = p.urls.concat(); |
| | | |
| | | for (i = 0, len = pendingUrls.length; i < len; ++i) { |
| | | url = pendingUrls[i]; |
| | | |
| | | if (isCSS) { |
| | | node = env.gecko ? createNode('style') : createNode('link', { |
| | | href: url, |
| | | rel : 'stylesheet' |
| | | }); |
| | | } else { |
| | | node = createNode('script', {src: url}); |
| | | node.async = false; |
| | | } |
| | | |
| | | node.className = 'lazyload'; |
| | | node.setAttribute('charset', 'utf-8'); |
| | | |
| | | if (env.ie && !isCSS && 'onreadystatechange' in node && !('draggable' in node)) { |
| | | node.onreadystatechange = function () { |
| | | if (/loaded|complete/.test(node.readyState)) { |
| | | node.onreadystatechange = null; |
| | | _finish(); |
| | | } |
| | | }; |
| | | } else if (isCSS && (env.gecko || env.webkit)) { |
| | | // Gecko and WebKit don't support the onload event on link nodes. |
| | | if (env.webkit) { |
| | | // In WebKit, we can poll for changes to document.styleSheets to |
| | | // figure out when stylesheets have loaded. |
| | | p.urls[i] = node.href; // resolve relative URLs (or polling won't work) |
| | | pollWebKit(); |
| | | } else { |
| | | // In Gecko, we can import the requested URL into a <style> node and |
| | | // poll for the existence of node.sheet.cssRules. Props to Zach |
| | | // Leatherman for calling my attention to this technique. |
| | | node.innerHTML = '@import "' + url + '";'; |
| | | pollGecko(node); |
| | | } |
| | | } else { |
| | | node.onload = node.onerror = _finish; |
| | | } |
| | | |
| | | nodes.push(node); |
| | | } |
| | | |
| | | for (i = 0, len = nodes.length; i < len; ++i) { |
| | | head.appendChild(nodes[i]); |
| | | } |
| | | } |
| | | |
| | | /** |
| | | Begins polling to determine when the specified stylesheet has finished loading |
| | | in Gecko. Polling stops when all pending stylesheets have loaded or after 10 |
| | | seconds (to prevent stalls). |
| | | |
| | | Thanks to Zach Leatherman for calling my attention to the @import-based |
| | | cross-domain technique used here, and to Oleg Slobodskoi for an earlier |
| | | same-domain implementation. See Zach's blog for more details: |
| | | http://www.zachleat.com/web/2010/07/29/load-css-dynamically/ |
| | | |
| | | @method pollGecko |
| | | @param {HTMLElement} node Style node to poll. |
| | | @private |
| | | */ |
| | | function pollGecko(node) { |
| | | var hasRules; |
| | | |
| | | try { |
| | | // We don't really need to store this value or ever refer to it again, but |
| | | // if we don't store it, Closure Compiler assumes the code is useless and |
| | | // removes it. |
| | | hasRules = !!node.sheet.cssRules; |
| | | } catch (ex) { |
| | | // An exception means the stylesheet is still loading. |
| | | pollCount += 1; |
| | | |
| | | if (pollCount < 200) { |
| | | setTimeout(function () { pollGecko(node); }, 50); |
| | | } else { |
| | | // We've been polling for 10 seconds and nothing's happened. Stop |
| | | // polling and finish the pending requests to avoid blocking further |
| | | // requests. |
| | | hasRules && finish('css'); |
| | | } |
| | | |
| | | return; |
| | | } |
| | | |
| | | // If we get here, the stylesheet has loaded. |
| | | finish('css'); |
| | | } |
| | | |
| | | /** |
| | | Begins polling to determine when pending stylesheets have finished loading |
| | | in WebKit. Polling stops when all pending stylesheets have loaded or after 10 |
| | | seconds (to prevent stalls). |
| | | |
| | | @method pollWebKit |
| | | @private |
| | | */ |
| | | function pollWebKit() { |
| | | var css = pending.css, i; |
| | | |
| | | if (css) { |
| | | i = styleSheets.length; |
| | | |
| | | // Look for a stylesheet matching the pending URL. |
| | | while (--i >= 0) { |
| | | if (styleSheets[i].href === css.urls[0]) { |
| | | finish('css'); |
| | | break; |
| | | } |
| | | } |
| | | |
| | | pollCount += 1; |
| | | |
| | | if (css) { |
| | | if (pollCount < 200) { |
| | | setTimeout(pollWebKit, 50); |
| | | } else { |
| | | // We've been polling for 10 seconds and nothing's happened, which may |
| | | // indicate that the stylesheet has been removed from the document |
| | | // before it had a chance to load. Stop polling and finish the pending |
| | | // request to prevent blocking further requests. |
| | | finish('css'); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | return { |
| | | |
| | | /** |
| | | Requests the specified CSS URL or URLs and executes the specified |
| | | callback (if any) when they have finished loading. If an array of URLs is |
| | | specified, the stylesheets will be loaded in parallel and the callback |
| | | will be executed after all stylesheets have finished loading. |
| | | |
| | | @method css |
| | | @param {String|Array} urls CSS URL or array of CSS URLs to load |
| | | @param {Function} callback (optional) callback function to execute when |
| | | the specified stylesheets are loaded |
| | | @param {Object} obj (optional) object to pass to the callback function |
| | | @param {Object} context (optional) if provided, the callback function |
| | | will be executed in this object's context |
| | | @static |
| | | */ |
| | | css: function (urls, callback, obj, context) { |
| | | load('css', urls, callback, obj, context); |
| | | }, |
| | | |
| | | /** |
| | | Requests the specified JavaScript URL or URLs and executes the specified |
| | | callback (if any) when they have finished loading. If an array of URLs is |
| | | specified and the browser supports it, the scripts will be loaded in |
| | | parallel and the callback will be executed after all scripts have |
| | | finished loading. |
| | | |
| | | Currently, only Firefox and Opera support parallel loading of scripts while |
| | | preserving execution order. In other browsers, scripts will be |
| | | queued and loaded one at a time to ensure correct execution order. |
| | | |
| | | @method js |
| | | @param {String|Array} urls JS URL or array of JS URLs to load |
| | | @param {Function} callback (optional) callback function to execute when |
| | | the specified scripts are loaded |
| | | @param {Object} obj (optional) object to pass to the callback function |
| | | @param {Object} context (optional) if provided, the callback function |
| | | will be executed in this object's context |
| | | @static |
| | | */ |
| | | js: function (urls, callback, obj, context) { |
| | | load('js', urls, callback, obj, context); |
| | | } |
| | | |
| | | }; |
| | | }; |
New file |
| | |
| | | (function(u){var l;"undefined"!==typeof window?l=window:"undefined"!==typeof self&&(l=self);l.lazyload=u()})(function(){return function l(n,k,e){function r(g,m){if(!k[g]){if(!n[g]){var f="function"==typeof require&&require;if(!m&&f)return f(g,!0);if(t)return t(g,!0);f=Error("Cannot find module '"+g+"'");throw f.code="MODULE_NOT_FOUND",f;}f=k[g]={exports:{}};n[g][0].call(f.exports,function(e){var c=n[g][1][e];return r(c?c:e)},f,f.exports,l,n,k,e)}return k[g].exports}for(var t="function"==typeof require&& |
| | | require,m=0;m<e.length;m++)r(e[m]);return r}({1:[function(l,n,k){(function(e){function r(c){-1===k.call(p,c)&&p.push(c)}function t(c){function b(b){var d;d="function"===typeof c.src?c.src(b):b.getAttribute(c.src);d&&(b.src=d);b.setAttribute("data-lzled",!0);a[k.call(a,b)]=null}c=g({offset:333,src:"data-src",container:!1},c||{});"string"===typeof c.src&&r(c.src);var a=[];return function(h){h.onload=null;h.removeAttribute("onload");h.onerror=null;h.removeAttribute("onerror");-1===k.call(a,h)&&f(h,c, |
| | | b)}}function m(c){c="HTML"+c+"Element";if(!1!==c in e){var b=e[c].prototype.getAttribute;e[c].prototype.getAttribute=function(a){if("src"===a){for(var h,d=0,c=p.length;d<c&&!(h=b.call(this,p[d]));d++);return h||b.call(this,a)}return b.call(this,a)}}}function g(c,b){for(var a in c)void 0===b[a]&&(b[a]=c[a]);return b}function k(c){for(var b=this.length;b--&&this[b]!==c;);return b}n.exports=t;var f=l("in-viewport"),p=["data-src"];e.lzld=t();m("Image");m("IFrame")}).call(this,"undefined"!==typeof global? |
| | | global:"undefined"!==typeof self?self:"undefined"!==typeof window?window:{})},{"in-viewport":2}],2:[function(l,n,k){(function(e){function k(b,a,h){b.attachEvent?b.attachEvent("on"+a,h):b.addEventListener(a,h,!1)}function l(b,a,h){var d;return function(){var c=this,e=arguments,w=h&&!d;clearTimeout(d);d=setTimeout(function(){d=null;h||b.apply(c,e)},a);w&&b.apply(c,e)}}function m(b){function a(b,a,c){return{watch:function(){d.add(b,a,c)},dispose:function(){d.remove(b)}}}function h(a,d){if(!(c(e.document.documentElement, |
| | | a)&&c(e.document.documentElement,b)&&a.offsetWidth&&a.offsetHeight))return!1;var h=a.getBoundingClientRect(),f,q,k,g;b===e.document.body?(f=-d,q=-d,k=e.document.documentElement.clientWidth+d,g=e.document.documentElement.clientHeight+d):(g=b.getBoundingClientRect(),f=g.top-d,q=g.left-d,k=g.right+d,g=g.bottom+d);return h.right>=q&&h.left<=k&&h.bottom>=f&&h.top<=g}var d=g(),q=b===e.document.body?e:b,f=l(d.checkAll(function(b,a,c){h(b,a)&&(d.remove(b),c(b))}),15);k(q,"scroll",f);q===e&&k(e,"resize",f); |
| | | p&&v(d,b,f);setInterval(f,150);return{container:b,isInViewport:function(b,d,c){if(!c)return h(b,d);b=a(b,d,c);b.watch();return b}}}function g(){function b(b){for(var a=c.length-1;0<=a;a--)if(c[a][0]===b)return a;return-1}function a(a){return-1!==b(a)}var c=[];return{add:function(b,e,f){a(b)||c.push([b,e,f])},remove:function(a){a=b(a);-1!==a&&c.splice(a,1)},isWatched:a,checkAll:function(b){return function(){for(var a=c.length-1;0<=a;a--)b.apply(this,c[a])}}}}function v(b,a,c){function d(a){a=g.call([], |
| | | Array.prototype.slice.call(a.addedNodes),a.target);return 0<f.call(a,b.isWatched).length}var e=new MutationObserver(function(a){!0===a.some(d)&&setTimeout(c,0)}),f=Array.prototype.filter,g=Array.prototype.concat;e.observe(a,{childList:!0,subtree:!0,attributes:!0})}n.exports=function(b,a,c){var d=e.document.body;if(void 0===a||"function"===typeof a)c=a,a={};d=a.container||d;a=a.offset||0;for(var g=0;g<f.length;g++)if(f[g].container===d)return f[g].isInViewport(b,a,c);return f[f.push(m(d))-1].isInViewport(b, |
| | | a,c)};var f=[],p="function"===typeof e.MutationObserver,c=e.document.documentElement.compareDocumentPosition?function(b,a){return!!(b.compareDocumentPosition(a)&16)}:e.document.documentElement.contains?function(b,a){return b!==a&&(b.contains?b.contains(a):!1)}:function(b,a){for(;a=a.parentNode;)if(a===b)return!0;return!1}}).call(this,"undefined"!==typeof global?global:"undefined"!==typeof self?self:"undefined"!==typeof window?window:{})},{}]},{},[1])(1)}); |
New file |
| | |
| | | var lazyload = new LazyLoad(document); |
| | | function loadComplete(){ |
| | | |
| | | //instead of document.read() |
| | | |
| | | } |
| | | function loadscript() { |
| | | lazyload.js([ |
| | | // 'js/zepto.js', |
| | | // 'js/bui.js', |
| | | 'js/echarts.min.js', |
| | | // 'js/const_var.js', |
| | | // 'js/common_functions.js', |
| | | // 'js/vue.min.js', |
| | | 'css/iview/iview.min.js', |
| | | 'js/components.js', |
| | | // 'index.js' |
| | | ] |
| | | , loadComplete); |
| | | |
| | | } |
| | | |
| | | setTimeout(loadscript,5); |
| | |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | <!-- 左边有图标示例 --> |
| | | <div class="bui-btn btn-back"><i class="icon-back"></i></div> |
| | | <div class="bui-btn btn-back" @click="stopTimers"><i class="icon-back"></i></div> |
| | | </div> |
| | | <div class="bui-bar-main"><span v-text="devInfo.fbsName"></span>-电池数据监控</div> |
| | | <div class="bui-bar-right"> |
| | |
| | | */ |
| | | loader.define({ |
| | | data: { |
| | | vm: '' |
| | | vm: '', |
| | | loading: '', |
| | | }, |
| | | loaded: function(require,exports,module) { |
| | | // bui.alert('loaded') |
| | | var loading = this.loading = bui.loading(); |
| | | this.loading.show(); |
| | | var bs = bui.store({ |
| | | scope: 'page', |
| | | data: {} |
| | |
| | | var data = rs.data; |
| | | for(var i=0; i<data.length; i++) { |
| | | var _data = data[i]; |
| | | _data.title = _data.FBSDeviceName; |
| | | //console.log(_data); |
| | | _data.title = _data.StationName3; |
| | | } |
| | | self.devInfos.list = data; |
| | | } |
| | |
| | | handlerListClick: function(item) { |
| | | this.setDevInfo(this.formateListData(item)); |
| | | this.startBattInfo(item.FBSDeviceId); |
| | | // console.log(this.uiSidebar); |
| | | this.uiSidebar.close(); |
| | | }, |
| | | formateListData: function(data) { |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | var self = this; |
| | | // 关闭等待框 |
| | | loading.hide(); |
| | | |
| | | // 获取所有设备的信息 |
| | | this.searchDevice(); |
| | | |
| | | // 脚本都需要在这里执行 |
| | | var uiTab = bui.tab({ |
| | | id:"#uiTab" |
| | | }); |
| | | |
| | | |
| | | // 侧边栏 |
| | | this.uiSidebar = bui.sidebar({ |
| | | id: "#sidebarWrap", //菜单的ID(必须) |
| | |
| | | isActive: true, |
| | | }); |
| | | this.uiSidebar.open(); |
| | | // 脚本都需要在这里执行 |
| | | var uiTab = bui.tab({ |
| | | id:"#uiTab" |
| | | }); |
| | | router.preload({ |
| | | url: 'pages/battery/batteryInfo.html' |
| | | }); |
| | | }, |
| | | beforeDestroy() { |
| | | // 关闭页面计时器 |
| | |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | <!-- 左边有图标示例 --> |
| | | <div class="bui-btn btn-back"><i class="icon-back"></i></div> |
| | | <div class="bui-btn btn-back" @click="stopTimers"><i class="icon-back"></i></div> |
| | | </div> |
| | | <div class="bui-bar-main" v-text="getTitle"></div> |
| | | <div class="bui-bar-right"> |
| | |
| | | <li class="bui-btn">单体电压图</li> |
| | | <li class="bui-btn">单体内阻图</li> |
| | | <li class="bui-btn">单体温度图</li> |
| | | <li class="bui-btn">当前告警</li> |
| | | <li class="bui-btn">测试数据</li> |
| | | <!-- <li class="bui-btn">当前告警</li> |
| | | <li class="bui-btn">测试数据</li> --> |
| | | </ul> |
| | | </div> |
| | | <div class="bui-tab-main"> |
| | |
| | | <!-- 内容必须在li里面 --> |
| | | <li> |
| | | <iview-table |
| | | height="300" |
| | | height="370" |
| | | 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">统计信息</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"> |
| | | <bar-chart |
| | | height="300px" |
| | | height="370px" |
| | | ref="monVolBar" |
| | | :show-value=true |
| | | :range="{'min': 0,'max': 1}"></bar-chart> |
| | | </li> |
| | | <li style="display: none"> |
| | | <bar-chart |
| | | height="300px" |
| | | height="370px" |
| | | ref="monResBar" |
| | | :show-value=true |
| | | :range="{'min': 0,'max': 1}"></bar-chart> |
| | | </li> |
| | | <li style="display: none"> |
| | | <bar-chart |
| | | height="300px" |
| | | height="370px" |
| | | ref="monTmpBar" |
| | | :show-value=true |
| | | :range="{'min': 0,'max': 1}"></bar-chart> |
| | |
| | | */ |
| | | loader.define({ |
| | | data: { |
| | | vm: '' |
| | | vm: '', |
| | | loading: '' |
| | | }, |
| | | loaded: function(require,exports,module) { |
| | | this.loading = bui.loading(); |
| | | this.loading.show(); |
| | | }, |
| | | show() { |
| | | var loading = this.loading; |
| | | var bs = bui.store({ |
| | | scope: 'page', |
| | | data: {} |
| | |
| | | data: { |
| | | params: params, |
| | | title: '未知', |
| | | timer: { |
| | | rtState: new Timeout(), |
| | | rtData: new Timeout(), |
| | | }, |
| | | rtState: { |
| | | batt_test_type: '', // 电池状态 |
| | | group_vol: '', // 组端电压 |
| | |
| | | batt_test_recordtime: '', // 更新日期 |
| | | batt_test_tlong: 0, // 测试时长 |
| | | }, |
| | | activeTab: 0, |
| | | tabsState: { |
| | | monList: { // 单体列表 |
| | | key: 0, |
| | | show: true, |
| | | state: true, |
| | | }, |
| | | totalInfo: { // 统计信息 |
| | | key: 1, |
| | | init: false, |
| | | state: false, |
| | | }, |
| | | monVol: { // 单体电压 |
| | | key: 2, |
| | | init: false, |
| | | state: false, |
| | | }, |
| | | monRes: { // 单体电流 |
| | | key: 3, |
| | | init: false, |
| | | state: false, |
| | | }, |
| | | monTmp: { // 单体温度 |
| | | key: 4, |
| | | init: false, |
| | | state: false, |
| | | } |
| | | }, |
| | | tbls: { |
| | | monList: { |
| | | columns: [ |
| | | { |
| | | title: '单体', |
| | | key: 'key1', |
| | | key: 'num1', |
| | | width: 70, |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '电压(V)', |
| | | key: 'key2', |
| | | title: '电压(V)', |
| | | key: 'vol1', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '内阻(mΩ)', |
| | | key: 'key3', |
| | | title: '内阻(mΩ)', |
| | | key: 'res1', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '温度(℃)', |
| | | key: 'tmp1', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: ' ', |
| | | key: 'key4', |
| | | width: 8, |
| | | key: 'split1', |
| | | width: 2, |
| | | className: 'split-td', |
| | | }, |
| | | { |
| | | title: '单体', |
| | | key: 'key5', |
| | | key: 'num2', |
| | | width: 70, |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '电压(V)', |
| | | key: 'key6', |
| | | title: '电压(V)', |
| | | key: 'vol2', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '内阻(mΩ)', |
| | | key: 'key7', |
| | | title: '内阻(mΩ)', |
| | | key: 'res2', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '温度(℃)', |
| | | key: 'tmp2', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: ' ', |
| | | key: 'key8', |
| | | width: 8, |
| | | key: 'split2', |
| | | width: 2, |
| | | className: 'split-td', |
| | | }, |
| | | { |
| | | title: '单体', |
| | | key: 'key9', |
| | | key: 'num3', |
| | | width: 70, |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '电压(V)', |
| | | key: 'key10', |
| | | title: '电压(V)', |
| | | key: 'vol3', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '内阻(mΩ)', |
| | | key: 'key11', |
| | | title: '内阻(mΩ)', |
| | | key: 'res3', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '温度(℃)', |
| | | key: 'tmp3', |
| | | align: 'center', |
| | | }, |
| | | ], |
| | | data: [] |
| | | }, |
| | | totalInfo: { |
| | | columns: [ |
| | | { |
| | | title: '类型', |
| | | key: 'type', |
| | | width: 90, |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '较高单体', |
| | | key: 'high', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '较低单体', |
| | | key: 'low', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '平均值', |
| | | key: 'avg', |
| | | width: 100, |
| | | align: 'center', |
| | | } |
| | | ], |
| | | data: [] |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | changeTabsState: function(num) { |
| | | var result = ''; |
| | | if(this.activeTab == num) { |
| | | return; |
| | | } |
| | | var tabsState = this.tabsState; |
| | | this.activeTab = num; |
| | | Object.keys(tabsState).forEach(function(key) { |
| | | var _tabsState = tabsState[key]; |
| | | if(_tabsState.key == num) { |
| | | result = _tabsState; |
| | | _tabsState.state = true; |
| | | }else { |
| | | _tabsState.state = false; |
| | | } |
| | | }); |
| | | return result; |
| | | }, |
| | | searchRtState: function() { |
| | | var self = this; |
| | | var json = JSON.stringify({ |
| | |
| | | // console.log(data); |
| | | self.rtState = data; |
| | | } |
| | | } |
| | | }, |
| | | complete: function() { |
| | | // 开启计时器 |
| | | self.timer.rtState.open(); |
| | | }, |
| | | }); |
| | | }, |
| | | searchRtData: function() { |
| | | searchRtData: function(isLoading) { |
| | | var self = this; |
| | | var json = JSON.stringify({ |
| | | BattGroupId: self.params.battGroupId |
| | | }); |
| | | var ajaxLoading=""; |
| | | if(isLoading) { |
| | | ajaxLoading = bui.loading(); |
| | | ajaxLoading.show() |
| | | } |
| | | |
| | | // 查询后台 |
| | | ajax({ |
| | | type: 'post', |
| | |
| | | // console.log(rs); |
| | | if(rs.code == 1) { |
| | | var data = rs.data; |
| | | console.log(data); |
| | | //console.log(data); |
| | | self.setTbls(data); |
| | | self.setOptions(data); |
| | | }else { |
| | | self.updateGraph(); |
| | | } |
| | | }, |
| | | complete: function() { |
| | | if(isLoading) { |
| | | ajaxLoading.hide(); |
| | | } |
| | | // 开启计时器 |
| | | self.timer.rtData.open(); |
| | | } |
| | | }); |
| | | }, |
| | | setTbls: function(data) { |
| | | this.setMonData(data); |
| | | this.setTotalInfoData(data); |
| | | }, |
| | | setMonData: function(data) { |
| | | var tabsState = this.tabsState; |
| | | // 判断是否显示单体列表 |
| | | if(tabsState.monList.state) { |
| | | var result = []; |
| | | // 遍历data的值进行格式化 |
| | | for(var i=0; i<data.length; i+=3) { |
| | | var tmp ={}; |
| | | var data1 = data[i]; |
| | | tmp.num1 = '#'+data1.mon_num; |
| | | tmp.vol1 = data1.mon_vol; |
| | | tmp.res1 = data1.mon_res; |
| | | tmp.tmp1 = data1.mon_tmp; |
| | | var num2 = i+1; |
| | | if(num2 == data.length) { |
| | | result.push(tmp); |
| | | break; |
| | | } |
| | | var data2 = data[i+1]; |
| | | tmp.num2 = '#'+data2.mon_num; |
| | | tmp.vol2 = data2.mon_vol; |
| | | tmp.res2 = data2.mon_res; |
| | | tmp.tmp2 = data2.mon_tmp; |
| | | |
| | | var num3 = i+2; |
| | | if(num3 == data.length) { |
| | | result.push(tmp); |
| | | break; |
| | | } |
| | | var data3 = data[i+2]; |
| | | tmp.num3 = '#'+data3.mon_num; |
| | | tmp.vol3 = data3.mon_vol; |
| | | tmp.res3 = data3.mon_res; |
| | | tmp.tmp3 = data3.mon_tmp; |
| | | result.push(tmp); |
| | | } |
| | | this.tbls.monList.data = result; |
| | | } |
| | | }, |
| | | setTotalInfoData: function(data) { |
| | | var tabsState = this.tabsState; |
| | | var result = [ |
| | | { |
| | | type: '电压', |
| | | avg: '0V', |
| | | }, |
| | | { |
| | | type: '内阻', |
| | | avg: '0mΩ', |
| | | }, |
| | | { |
| | | type: '温度', |
| | | avg: '0℃', |
| | | } |
| | | ]; |
| | | if(tabsState.totalInfo.state) { |
| | | this.tbls.totalInfo.data = result; |
| | | } |
| | | }, |
| | | setOptions: function(data) { |
| | | // 遍历data的值 |
| | |
| | | }, |
| | | // 更新图谱 |
| | | updateGraph: function() { |
| | | var tabsState = this.tabsState; |
| | | // console.log(tabsState); |
| | | // 更新单体电压 |
| | | this.$refs['monVolBar'].setOption(this.options.monVol.option); |
| | | if(tabsState.monVol.state) { |
| | | // bui.alert(7788); |
| | | this.$refs['monVolBar'].setOption(this.options.monVol.option); |
| | | } |
| | | |
| | | // 更新单体内阻 |
| | | this.$refs['monResBar'].setOption(this.options.monRes.option); |
| | | if(tabsState.monRes.state) { |
| | | this.$refs['monResBar'].setOption(this.options.monRes.option); |
| | | } |
| | | |
| | | // 更新单体温度 |
| | | this.$refs['monTmpBar'].setOption(this.options.monTmp.option); |
| | | if(tabsState.monTmp.state) { |
| | | this.$refs['monTmpBar'].setOption(this.options.monTmp.option); |
| | | } |
| | | |
| | | // 更新单体电导 |
| | | // this.$refs['monSerBar'].setOption(this.options.monSer.option); |
| | | }, |
| | | startSearch: function() { |
| | | var self = this; |
| | | // 查询电池组状态 |
| | | this.timer.rtState.start(function() { |
| | | self.searchRtState(); |
| | | }, 4000); |
| | | // 查询电池组信息 |
| | | this.timer.rtData.start(function() { |
| | | self.searchRtData(); |
| | | }, 4000); |
| | | |
| | | |
| | | }, |
| | | stopTimers: function() { |
| | | // 关闭页面的计时器 |
| | | this.timer.rtState.stop(); |
| | | this.timer.rtData.stop(); |
| | | } |
| | | }, |
| | | computed: { |
| | | getTitle: function() { |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | loading.hide(); |
| | | var self = this; |
| | | // 脚本都需要在这里执行 |
| | | var uiTab = bui.tab({ |
| | | id:"#uiTab" |
| | | id:"#uiTab", |
| | | }); |
| | | uiTab.on('to', function(index) { |
| | | if(self.activeTab != index) { |
| | | var state = self.changeTabsState(index); |
| | | if(state && !state.init) { |
| | | state.init=true; |
| | | self.searchRtData(true); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | // 显示图表 |
| | | this.updateGraph(); |
| | | // 查询电池组状态 |
| | | this.searchRtState(); |
| | | // 查询电池组信息 |
| | | this.searchRtData(); |
| | | this.startSearch(); |
| | | }, |
| | | beforeDestroy() { |
| | | this.stopTimers(); |
| | | }, |
| | | }); |
| | | }, |
| | |
| | | :columns="tbls.alarm.columns" |
| | | :data="tbls.alarm.data" |
| | | :title="tbls.alarm.title" |
| | | height="360" |
| | | height="430" |
| | | style="margin: 0"></iview-table> |
| | | <div class="tbl-page mt8" style="text-align: center"> |
| | | <i-button |
| | |
| | | :columns="tbls.charge.columns" |
| | | :data="tbls.charge.data" |
| | | :title="tbls.charge.title" |
| | | height="390" |
| | | height="460" |
| | | 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="390" |
| | | height="460" |
| | | style="margin: 0"></iview-table> |
| | | </div> |
| | | </div> |
| | |
| | | <header class="bui-bar"> |
| | | <div class="bui-bar-left"> |
| | | <!-- 左边有图标示例 --> |
| | | <div class="bui-btn btn-back"><i class="icon-back"></i></div> |
| | | <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"> |