提交添加

whychdw

2019-08-19 b5eb8550320c37dd4f561041e7ca16f44c08ca42

提交添加

 src/assets/css/common.css

@@ -215,3 +215,20 @@
.ivu-tabs-yellow .ivu-tabs-ink-bar {
    background-color: #ff9900;
}
/* 加载等待 */
.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
.demo-spin-col{
    height: 100px;
    position: relative;
    border: 1px solid #eee;
}
.ivu-spin-fix {
    background-color: rgba(255,255,255,.5);
}

 src/components/BarChart.vue

@@ -73,7 +73,7 @@
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                textStyle: {
@@ -136,9 +136,9 @@

                // 设置最大值
                if(this.range.maxFlag == false || this.range.max == undefined) {
                    max = Math.ceil(max*1.25);
                    max = Number((max*1.15).toFixed(1))
                }else {
                   max= this.range.max<max?Math.ceil(max*1.25):this.range.max;
                   max= this.range.max<max?Number((max*1.15).toFixed(1)):this.range.max;
                }
                option.yAxis.min = min;
                option.yAxis.max = max;

 src/libs/common.js

@@ -94,6 +94,58 @@
    });
}

//将秒转化成时:分:秒
function formatSeconds(value) {
    if(value > 0){
	
    }else{
        value = 0;
    }
    var theTime = parseInt(value);// 秒
    var theTime1 = 0;// 分
    var theTime2 = 0;// 小时
    // alert(theTime);
    if(theTime >= 60) {
        theTime1 = parseInt(theTime/60);
        theTime = parseInt(theTime%60);
        //alert(theTime1+"-"+theTime);
        if(theTime1 >= 60) {
            theTime2 = parseInt(theTime1/60);
            theTime1 = parseInt(theTime1%60);
        }
    }
    var result = (theTime<10?"0":"")+parseInt(theTime);
    if(theTime1 >= 0) {
        result =(theTime1<10?"0":"")+parseInt(theTime1)+":"+result;
    }
    if(theTime2 >= 0) {
        result =(theTime2<10?"0":"")+parseInt(theTime2)+":"+result;
    }
    //console.info(result);
    return result;
}

// 设置后备时间(续航时间)
function sethoubeiTime(value){
    value = Math.abs(value);
    var str = "";
    if(value>0){
        var hour = parseInt(value);
        var min = parseInt((parseFloat(value) - hour)*60);
        if(hour<10){
            str = "0";
        }
        str+=hour+"H";
        if(min<10){
            str+="0";
        }
        str+=min+"M";
    }else{
        str = "00H00M";		
    }
    return str;
}

// 格式化时间
Date.prototype.format =function(format)
{
@@ -122,4 +174,5 @@
    getMaxFromArr,  // 获取数组中的最大值
    getMinFromArr,   // 获取数组中的最小值
    ajax,            // 请求
    formatSeconds,   // 将秒转化成时:分:秒
}

 src/views/monitor/realTime.vue

@@ -9,23 +9,24 @@
                </div>
                <div class="view-layout-right">
                    <science-card width="100%" height="100%">
                        <Spin size="large" fix v-if="spinShow">
                            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                            <div>加载中...</div>
                        </Spin>
                        <content-title :title="contentTitle"></content-title>
                        <square-box style="margin: 8px" title="实时图谱" icon="ios-podium">
                            <Tabs value="monVolBar" class="ivu-tabs-yellow" name="controlTabs">
                                <TabPane label="电压" name="monVolBar" tab="controlTabs">
                                    <bar-chart height="400px" ref="monVolBar" :show-value=true :range="{'min': 40,'max': 60}"></bar-chart>
                                    <bar-chart height="400px" ref="monVolBar" :show-value=true :range="{'min': 0,'max': 1}"></bar-chart>
                                </TabPane>
                                <TabPane label="内阻" name="name2" tab="controlTabs">
                                    内阻
                                    <bar-chart height="400px" ref="monResBar" :show-value=true :range="{'min': 0,'max': 1}"></bar-chart>
                                </TabPane>
                                <TabPane label="温度" name="name3" tab="controlTabs">
                                    温度
                                    <bar-chart height="400px" ref="monTmpBar" :colors="{normal: '#5cadff',max: '#ed4014',min: '#19be6b',}" :show-value=true :range="{'min': 0,'max': 1}"></bar-chart>
                                </TabPane>
                                <TabPane label="电导" name="name4" tab="controlTabs">
                                    电导
                                </TabPane>
                                <TabPane label="均衡电流" name="name5" tab="controlTabs">
                                    均衡电流
                                    <bar-chart height="400px" ref="monSerBar" :show-value=true :range="{'min': 0,'max': 1}"></bar-chart>
                                </TabPane>
                            </Tabs>
                        </square-box>
@@ -36,35 +37,35 @@
                                        <table style="color: #468FB6">
                                            <tr>
                                                <td>电池状态：</td>
                                                <td>浮充(开关闭合)</td>
                                                <td>{{rtState.ele_state}}</td>
                                            </tr>
                                            <tr>
                                                <td>组端电压：</td>
                                                <td>在线:53.12V;组端:53.12V</td>
                                                <td>{{rtState.ele_tension}}</td>
                                            </tr>
                                            <tr>
                                                <td>电池电流：</td>
                                                <td>0.30A</td>
                                                <td>{{rtState.ele_current}}</td>
                                            </tr>
                                            <tr>
                                                <td>更新日期：</td>
                                                <td>2019-08-12 14:37:24</td>
                                                <td>{{rtState.test_date}}</td>
                                            </tr>
                                            <tr>
                                                <td>测试时长：</td>
                                                <td>00:02:01</td>
                                                <td>{{rtState.test_time}}</td>
                                            </tr>
                                            <tr>
                                                <td>测试容量：</td>
                                                <td>-0.4AH</td>
                                                <td>{{rtState.test_content}}</td>
                                            </tr>
                                            <tr>
                                                <td>剩余容量：</td>
                                                <td>137.7AH</td>
                                                <td>{{rtState.over_content}}</td>
                                            </tr>
                                            <tr>
                                                <td>续航时长：</td>
                                                <td>------</td>
                                                <td>{{rtState.reserve_time}}</td>
                                            </tr>
                                        </table>
                                    </square-box>
@@ -85,7 +86,7 @@
import HomeTree from "../../components/HomeTree"
import ContentTitle from "../../components/ContentTitle"
import BarChart from "../../components/BarChart"
import {ajax} from "../../libs/common"
import {ajax, formatSeconds, sethoubeiTime, Timeout} from "../../libs/common"
import $ from 'jquery'
import echarts from "echarts"
import SquareBox from "../../components/SquareBox"
@@ -103,31 +104,121 @@
            batt: {},       // 电池组信息
            alarmlist: [],   // 电池告警参数
            contentTitle: '机房信息', // 主题内容的标题 
            option: {
                xAxis: {
                    type: 'category',
                    data: ['#1', '#2', '#3', '#4', '#5', '#5', '#6']
            rtDataTime: new Timeout(),        // 实时数据计时器
            rtStateTime: new Timeout(),       // 实时状态计时器
            spinShow: false,
            rtState: {
                ele_state: '未知',
                ele_tension: '在线：??V;组端：??V',
                ele_current: '??A',
                test_date: 'yyyy-MM-dd HH:mm:ss',
                test_time: 'HH:mm:ss',
                test_content: '??AH',
                over_content: '??AH',
                reserve_time: '------'
            },
            options: {
                monVol:{    // 单体电压
                    option: {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value',
                            name: '单位(V)',
                            min: 0,
                            max: 10
                        },
                        series: [{
                            name: '电压',
                            type: 'bar',
                            data: []
                        }]
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '单位(V)',
                    min: 0,
                    max: 1500
                monRes: {   // 单体内阻
                    option: {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value',
                            name: '单位(mΩ)',
                            min: 0,
                            max: 10
                        },
                        series: [{
                            name: '内阻',
                            type: 'bar',
                            data: []
                        }]
                    }
                },
                series: [{
                    name: '电压',
                    type: 'bar',
                    data: [52.3, 10, 40.6, 38.9,  55.6, 54.5, 55.6]
                }]
                monTmp: {   // 单体内阻
                    option: {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value',
                            name: '单位(℃)',
                            min: 0,
                            max: 10
                        },
                        series: [{
                            name: '温度',
                            type: 'bar',
                            data: []
                        }]
                    }
                },
                monSer: {   // 单体内阻
                    option: {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                            max: 10
                        },
                        series: [{
                            name: '电导',
                            type: 'bar',
                            data: []
                        }]
                    }
                }
            },
            tbls: {
                monVol: {
                    title: ''
                }
            }
        }
    },
    methods: {
        getBatt: function() {
            return this.batt;
        },
        handlerSelectChange: function(item) {   // 处理左侧机房列表点击事件
            var self = this;
            if(item.type == 'group') {
                this.batt = item;
                this.searchBattAlarmParam();        //查询并存储电池告警参数
                this.setContentTitle();             // 设置内容的标题
                this.spinShow = true;               // 切换显示加载等待框
                this.rtDataTime.start(function() {
                    self.searchRtData();
                }, 4000);                // 查询实时的信息

                this.rtStateTime.start(function() {
                    self.searchRtState();
                }, 4000);               // 查询实时状态
            }
        },
        setContentTitle: function() {   // 设置内容的标题
@@ -167,10 +258,198 @@
                }
            }
            return new Object();
        },
        searchRtData: function() {    // 查询电池组实时信息
            var self = this;
            var batt = this.batt;
            if(!batt.BattGroupId) {
                return;
            }
            var temp = {
                BattGroupId: batt.BattGroupId,
            };
            // 请求后台 获取电池组实时信息
            ajax({
                type:"post", 				
                url: "Batt_rtdataAction_serchByCondition",			
                async: true,			
                dataType: 'json',
                data: "json="+JSON.stringify(temp),
                success: function(res) {
                    self.spinShow = false;      // 关闭容器加载等待框
                    var rs = JSON.parse(res.result);
                    if(rs.code == 1) {
                        var data = rs.data;
                        // console.log(data);
                        self.formatData(data);
                        // 开启计时器
                        self.rtDataTime.open();
                    }
                }
            });
        },
        formatData: function(Rtdatalist) {
            var mon_vol_table_list = new Array();            //电压
            var mon_tmp_table_list = new Array();            //温度
            var mon_res_table_list = new Array();            //内阻
            var mon_ser_table_list = new Array();            //电导
            var mon_jh_table_list = new Array();            //均衡电流
		
            var mon_res_list=new Array();
            var mon_vol_list=new Array();
            var mon_ser_list=new Array();
            var mon_tmp_list=new Array();
            var mon_num_list=new Array();
            var mon_conn_list=new Array();
            var mon_serpcent_list=new Array();
            var mon_jh_list = new Array();
            var batt = this.getBatt();
            //console.info(battinlist);
            for(var i=0;i<Rtdatalist.length;i++){
                mon_vol_table_list.push("#"+Rtdatalist[i].mon_num);
                mon_vol_table_list.push(Rtdatalist[i].mon_vol.toFixed(3));
                mon_tmp_table_list.push("#"+Rtdatalist[i].mon_num);
                mon_tmp_table_list.push(Rtdatalist[i].mon_tmp.toFixed(1));
                mon_res_table_list.push("#"+Rtdatalist[i].mon_num);
                mon_res_table_list.push(Rtdatalist[i].mon_res.toFixed(3));
                mon_jh_table_list.push("#"+Rtdatalist[i].mon_num);
                mon_jh_table_list.push(Rtdatalist[i].mon_JH_curr.toFixed(3));
                if(Rtdatalist[i].mon_res > 0){
                    var ser_value = ((1/Rtdatalist[i].mon_res)*1000).toFixed(0);
                    mon_ser_table_list.push("#"+Rtdatalist[i].mon_num);
                    mon_ser_table_list.push(ser_value);
                    mon_ser_list[i]=ser_value;
                }else{				
                    mon_ser_table_list.push("#"+Rtdatalist[i].mon_num);
                    mon_ser_table_list.push(Rtdatalist[i].mon_ser.toFixed(0));
                    mon_ser_list[i]=Rtdatalist[i].mon_ser.toFixed(0);
                }
			
                mon_res_list[i]=Rtdatalist[i].mon_res.toFixed(3);
                mon_vol_list[i]=Rtdatalist[i].mon_vol.toFixed(3);
                mon_tmp_list[i]=Rtdatalist[i].mon_tmp.toFixed(1);
                //console.info(Rtdatalist);
                mon_serpcent_list[i]=(batt.MonSerStd==0?0:Rtdatalist[i].mon_ser/batt.MonSerStd).toFixed(3);
                //console.info(batt.MonSerStd);
                mon_conn_list[i]=Rtdatalist[i].mon_conn_res.toFixed(3);
                mon_num_list[i]="#"+Rtdatalist[i].mon_num;
                mon_jh_list[i] = Rtdatalist[i].mon_JH_curr.toFixed(3);
            }

            // 设置单体电压图谱的配置项
            this.setOptions(mon_num_list, mon_vol_list, mon_res_list, mon_tmp_list, mon_ser_list);
        },
        // 单体编号，单体电压，单体内阻, 单体温度, 电导
        setOptions: function(mon_num_list, mon_vol_list, mon_res_list, mon_tmp_list, mon_ser_list) {
            var options = this.options;
            
            // 单体电压设置
            options.monVol.option.xAxis.data = mon_num_list;
            options.monVol.option.series[0].data = mon_vol_list;

            // 单体内阻设置
            options.monRes.option.xAxis.data = mon_num_list;
            options.monRes.option.series[0].data = mon_res_list;

            // 单体温度
            options.monTmp.option.xAxis.data = mon_num_list;
            options.monTmp.option.series[0].data = mon_tmp_list;

            // 单体电导
            options.monSer.option.xAxis.data = mon_num_list;
            options.monSer.option.series[0].data = mon_ser_list;

            this.updateGraph();
        },
        // 更新图谱
        updateGraph: function() {
            // 更新单体电压
            this.$refs['monVolBar'].setOption(this.options.monVol.option);

            // 更新单体内阻
            this.$refs['monResBar'].setOption(this.options.monRes.option);

            // 更新单体温度
            this.$refs['monTmpBar'].setOption(this.options.monTmp.option);

            // 更新单体电导
            this.$refs['monSerBar'].setOption(this.options.monSer.option);
        },
        searchRtState: function() {
            var self = this;
            var batt = this.getBatt();
            if(!batt.BattGroupId) {
                return;
            }
            var temp = {
                BattGroupId: batt.BattGroupId,
            };
            // 请求后台 获取电池组实时信息
            ajax({
                type:"post", 				
                url: "Batt_rtstateAction_serchByCondition",			
                async: true,			
                dataType: 'json',
                data: "rtstate.battGroupId="+batt.BattGroupId,
                success: function(res) {
                    // console.log(res);
                    var rs  = JSON.parse(res.result);
                    if(rs.code == 1) {
                        var rtstate = rs.data[0];
                        var online_vol = rtstate.online_vol.toFixed(2);
                        var group_vol = rtstate.group_vol.toFixed(2);
                        var opts = {};
                        opts.ele_tension = "在线:"+online_vol+"V;组端:"+group_vol+"V";  // 组端电压
                        opts.ele_current = rtstate.group_curr.toFixed(2)+"A";       // 电池电流
                        opts.test_date = rtstate.rec_datetime;          // 更新日期
                        opts.test_time = formatSeconds(rtstate.batt_test_tlong);
                        opts.test_content = rtstate.batt_test_cap.toFixed(1)+"AH";
                        // 剩余容量
                        if(rtstate.batt_state==2){
                            opts.over_content = "---";
                        }else{
                            opts.over_content = rtstate.batt_rest_cap.toFixed(1)+"AH";
                        }
                        // 续航时间
                        if(rtstate.batt_state == 3){
                            opts.reserve_time = sethoubeiTime(parseFloat(rtstate.batt_rest_cap)/parseFloat(rtstate.group_curr));
                            
                        }else{
                            opts.reserve_time = "------";
                        }
                        // 设置rtState
                        self.setRtState(opts);
                        // console.log(opts);
                        // 开启计时器
                        self.rtStateTime.open()
                    }
                }
            });
        },
        initRtState: function() {
            this.rtState = {
                ele_state: '未知',
                ele_tension: '在线：??V;组端：??V',
                ele_current: '??A',
                test_date: 'yyyy-MM-dd HH:mm:ss',
                test_time: 'HH:mm:ss',
                test_content: '??AH',
                over_content: '??AH',
                reserve_time: '------'
            };
            return this.rtState;
        },
        setRtState: function(rtState) {
            var defaults =this.initRtState();
            this.rtState = $.extend({}, defaults, rtState); 
        }
    },
    mounted: function() {
        this.$refs['monVolBar'].setOption(this.option);
        
    },
    destroyed: function() {
        this.rtDataTime.stop();
        this.rtStateTime.stop();
    }
}
</script>