内容

whychdw

2019-10-10 07430ab4daae1c8bc0a9d4507410470c0a09f5d0

内容

 src/App.vue

@@ -104,6 +104,17 @@
      activeName: 'home',
      menus: [
        {
          label: '信息管理',
          name: 'battInfoManage',
          icon: 'ios-videocam',
          children: [
            {
              label: '电池信息配置',
              name: 'batt/info',
            }
          ]
        },
        {
          label: '监测数据',
          name: 'monitorData',
          icon: 'ios-videocam',

 src/components/HCollapse.vue

@@ -1,5 +1,5 @@
<template>
    <square-box minHeight="300px" title="电池充电记录">
    <square-box minHeight="300px" title="电池充电记录" icon="md-battery-charging">
        <div class="collapse-content" style="height: 300px; margin-left: -12px; margin-right: -12px;">
            <Collapse theme="dark">
                <Panel v-for="(obj, key) in data" :key="key">
@@ -43,6 +43,21 @@
            default: 99
        }
    },
    data() {
        return {
            initData: this.data,
        }
    },
    watch: {
        initData: {
            handler: function() {
                var root = $(this.$el);
                var $lis = root.find('.item-content').find('li');
                $lis.removeClass('item-active');
            },
            deep: true
        }
    },
    methods: {
        getItemsLen: function(items) {
            var len, result = items;
@@ -53,11 +68,12 @@
        },
        handleClick: function(data, key, item_key) {
            var root = $(this.$el);
            var $allLis = root.find('.item-content').find('li');
            var $lis = root.find('.item-content').eq(key).find('li');
            // 根据key和item_key定位道点击的元素
            var $li = $lis.eq(item_key);
            if(!$li.hasClass('item-active')) {
                $lis.removeClass('item-active');
                $allLis.removeClass('item-active');
                $li.addClass('item-active');
                this.$emit('on-select-change', data)
            }

 src/libs/common.js

@@ -318,6 +318,135 @@
    return title;
};

var  CapType_Rest = 0;            //当查询剩余容量时传递
var  CapType_Real = 1;            //当查询实际容量时传递
var STDAH;                        //标纯容量
var MonomerVolType;                //电池电压类型
// 获取标纯电流
function GetFDCurrent(stdcap,hourrate)
{
    var res = 0.055;
    switch(hourrate)
    {
        case 1: res = 0.514; break;
        case 2: res = 0.306; break;
        case 3: res = 0.250; break;
        case 4: res = 0.200; break;
        case 5: res = 0.166; break;
        case 6: res = 0.146; break;
        case 7: res = 0.131; break;
        case 8: res = 0.118; break;
        case 9: res = 0.108; break;
        case 10: res = 0.100; break;
        case 20: res = 0.055; break;
        default: res = 0.055; break;
    }
    
    return (stdcap * res);
}

// 获取放电小时率        stdah：标纯容量              current:当前电流	
function GetHourRate(stdah,current)
{
    var index = 0;
    var value=[5.14, 3.06, 2.50, 2.00, 1.66, 1.46, 1.31, 1.18, 1.08, 1.00, 0.55, 0.40];
    var res;
    current = Math.abs(current);
    res = current/(stdah/10);
    if(res >= 5.14) return 1;
    else if(res <= 0.55) return 20;
    else
    {
        for(var index=0; index<10; index++)
        {
            if((res<=value[index]) && (res>value[index+1]))
                break;
            else continue;
        }
        if((value[index]-res) < (res-value[index+1]))
        {
            return (index+1);
        }
        else
        {
            if(index+2 > 10) return (20);
            else return (index+2);
        }
    }  
}

function N_TO_10H(n_H)
{
    switch(n_H)
    {
        case  1 : return(1/0.55);
        case  2 : return(1/0.61);
        case  3 : return(1/0.75);
        case  4 : return(1/0.79);
        case  5 : return(1/0.833);
        case  6 : return(1/0.876);
        case  7 : return(1/0.917);
        case  8 : return(1/0.944);
        case  9 : return(1/0.974);
        case  10: return(1/1);
        case  20: return(1/1.1);
    }
    return 1.0;
}


//获取剩余容量    STDAH：标称容量            HourRate：放电小时率    SumAH：测试容量        MaxMonomerVol：最大电池电压        MonomerVol：当前电池组的最低单体电压
//MonomerVolType:电池标称电压        CapType:容量类型（定值是常量）
function GetMonomerCap(STDAH, HourRate, SumAH, MaxMonomerVol, MonomerVol, MonomerVolType,CapType)
{
    if((MaxMonomerVol - MonomerVolType*0.9) <= 0)
        return 0;
    if(SumAH < 0)
        SumAH *= (-1);
    var tmp_cap;
    tmp_cap = MonomerVol - MonomerVolType * 0.9;
    tmp_cap *= (STDAH - SumAH * N_TO_10H(HourRate));
    var dt_vol = MaxMonomerVol - MonomerVolType*0.9;
    if(dt_vol < 0.01)
        dt_vol = 0.01;
    tmp_cap = tmp_cap/dt_vol;
    if(tmp_cap < 0)
        tmp_cap = 0;

    if(CapType == CapType_Rest)
        return tmp_cap;
    else if(CapType == CapType_Real)
        return (tmp_cap + SumAH * N_TO_10H(HourRate));
    else
        return ((tmp_cap + SumAH * N_TO_10H(HourRate))*100 / STDAH);
}


//将秒转化成00M00H类型
function formatTime1(value) {
    var theTime = parseInt(value);// 秒
    var theTime1 = 0;// 分
    var theTime2 = 0;// 小时
	
    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 = "";
    if(theTime1 >= 0) {
        result =(theTime1<10?"0":"")+parseInt(theTime1)+"M"+result;
    }
    if(theTime2 >= 0) {
        result =(theTime2<10?"0":"")+parseInt(theTime2)+"H"+result;
    }
    return result;
}

export {
    CORS,           //  跨域请求内容
    Interval,       // 计时器
@@ -329,4 +458,7 @@
    Title,
    getSumFromArr,   // 获取累加和
    getAvgFromArr,   // 获取平均值
    formatTime1,    // 续航时长
    GetMonomerCap,  // 剩余容量
    GetHourRate,    // 放电小时率
}

 src/router.js

@@ -6,6 +6,7 @@
        },
        components: {
            default: (resolve)=>require(['./views/index.vue'], resolve),
            'batt/info': (resolve)=>require(['./views/batt/info.vue'], resolve),
            'monitor/real': (resolve)=>require(['./views/monitor/realTime.vue'], resolve),
            'monitor/history': (resolve)=>require(['./views/monitor/history.vue'], resolve),
            'warnmanage/cellreal': (resolve)=>require(['./views/warnmanage/cellreal.vue'], resolve),

 src/views/batt/info.vue

New file
@@ -0,0 +1,116 @@
<template>
    <Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
export default {
    data () {
        return {
            columns7: [
                {
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        var data = this.data6[params.index];
                        if(data.isEdit) {
                            return h('Input', {
                                props: {
                                    value: data.name
                                },
                                on: {
                                    'on-change': function(event) {
                                        data.name = event.target.value
                                    }
                                }
                            });
                        }else {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                        
                    }
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                },
                {
                    title: 'Action',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, '取消')
                        ]);
                    }
                }
            ],
            data6: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    isEdit: false,
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park'
                }
            ]
        }
    },
    methods: {
        show (index) {
            this.data6[index].isEdit = true;
        },
        remove (index) {
            this.data6[index].isEdit = false;
        }
    }
}
</script>

 src/views/monitor/history.vue

@@ -17,42 +17,84 @@
                    full
                    v-show="states.ld9">
                    </square-box>
                    <square-box style="margin-top: 8px;" minHeight="220px" title="机房基础信息">
                        <table style="color: #468FB6;">
                            <tr>
                                <td>电池状态：</td>
                                <td>{{testInfo.eleState}}</td>
                            </tr>
                            <tr>
                                <td>组端电压：</td>
                                <td>
                                    在线:{{testInfo.onlineVol}}V;
                                    组端:{{testInfo.groupVol}}V
                                </td>
                            </tr>
                            <tr>
                                <td>电池电流：</td>
                                <td>{{testInfo.curr}}A</td>
                            </tr>
                            <tr>
                                <td>测试日期：</td>
                                <td>{{testInfo.testTime}}</td>
                            </tr>
                            <tr>
                                <td>测试时长：</td>
                                <td>{{testInfo.testTimeLong}}</td>
                            </tr>
                            <tr>
                                <td>测试容量：</td>
                                <td>{{testInfo.cap}}AH</td>
                            </tr>
                            <tr>
                                <td>剩余容量：</td>
                                <td>{{testInfo.resCap}}</td>
                            </tr>
                            <tr>
                                <td>续航时间：</td>
                                <td>{{testInfo.xuhang}}</td>
                            </tr>
                        </table>
                    </square-box>
                </div>
                <div class="view-layout-right">
                    <square-box 
                    minHeight="400px"
                    title="数据图谱"
                    full
                    icon="md-pulse">
                        <Row :gutter="8" class="graph-row">
                            <i-col span="12" class="graph-col">
                                <div style="background-color: #FF0000" class="i-col-inner">col-12</div>
                            </i-col>
                            <i-col span="12" class="graph-col">
                                <div class="i-col-inner">
                                    <bar-chart
                                    full  
                                    ref="monBar" 
                                    :show-value=false 
                                    :range="{'min': 0,'max': 1}"></bar-chart>
                                </div>
                            </i-col>
                        </Row>
                        <Row :gutter="8" style="margin-top: 8px;" class="graph-row">
                            <i-col span="12" class="graph-col">
                                <div style="background-color: #2d8cf0" class="i-col-inner">
                                    
                                </div>
                            </i-col>
                            <i-col span="12" class="graph-col">
                                <div style="background-color: #FF0000" class="i-col-inner">col-12</div>
                            </i-col>
                        </Row>
                        <Slider 
                        v-model="slider"
                        :tip-format="formatSlider" 
                        style="margin-left: 15px; margin-right: 30px;"></Slider>
                    </square-box>
                    <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="历史数据"></content-title> -->
                        <square-box title="历史数据图谱" icon="ios-podium">
                            <Tabs value="monBar" class="ivu-tabs-yellow" name="controlTabs" @on-click="handlerTabClick">
                                <TabPane label="单体信息" name="monBar" tab="controlTabs">
                                    <div class="tab-pane-inner">
                                        <div class="chart-tool">
                                            <div class="chart-tool-inner">
                                                <Select v-model="chartTools.barType" style="width:120px" @on-change="barTypeChange">
                                                    <Option value="monvol">单体电压</Option>
                                                    <Option value="montmp">单体温度</Option>
                                                </Select>
                                            </div>
                                        </div>
                                        <bar-chart
                                        height="400px"  
                                        ref="monBar" 
                                        :show-value=true 
                                        :range="{'min': 0,'max': 1}"></bar-chart>
                                    </div>
                                </TabPane>
                                <TabPane label="数据统计" name="groupVolLine" tab="controlTabs"></TabPane>
                            </Tabs>
                        </square-box>
                        <!-- 滚动条 -->
                        <div class="slider-container">
                            <div class="slider-container-inner"></div>
                            <Slider 
                            v-model="slider" 
                            :tip-format="formatSlider"
                            @on-input="handlerSliderChange"></Slider>
                        </div>
                    </science-card>
                </div>
            </div>
        </div>
@@ -65,7 +107,8 @@
import HomeStateList from "../../components/HomeStateList"
import HCollapse from "../../components/HCollapse"
import BarChart from "../../components/BarChart"
import {ajax} from "../../libs/common"
import ContentTitle from "../../components/ContentTitle"
import {ajax, getMaxFromArr, getMinFromArr, getAvgFromArr, formatSeconds} from "../../libs/common"
export default {
    components: {
        ScienceCard,
@@ -74,9 +117,11 @@
        HomeStateList,
        HCollapse,
        BarChart,
        ContentTitle,
    },
    data() {
        return {
            spinShow: false,
            slider: 100,
            batt: '',
            states: {
@@ -107,19 +152,63 @@
            ],
            monList: [],        // 单体编号
            hisData: {
                batt_test_every_record: [],     //记录当前测试记录的每笔的组端测试值
                hisBar: {}
            },
            chartTools: {
                barType: 'monvol',
            },
            testInfo: {
                eleState: '未知',       // 电池状态
                groupVol: 0,           // 组端电压
                onlineVol: 0,          // 在线电压
                curr: 0,               // 电池电流
                testTime: '---',        // 测试时间
                testTimeLong: '---',    // 测试时长
                cap: 0,                 // 测试容量
                resCap: 0,              // 剩余容量
                xuhang: '---',          // 续航时间
            }
        }
    },
    methods: {
        initTestInfo: function() {
            var testInfo = {
                eleState: '未知',       // 电池状态
                groupVol: 0,           // 组端电压
                onlineVol: 0,          // 在线电压
                curr: 0,               // 电池电流
                testTime: '---',        // 测试时间
                testTimeLong: '---',    // 测试时长
                cap: 0,                 // 测试容量
                resCap: 0,              // 剩余容量
                xuhang: '---',          // 续航时间
            };
            this.testInfo = testInfo;
        },
        formatSlider: function(value) {
            return '00:00:00';
            var batt_test_every_record = this.hisData.batt_test_every_record;
            var result = '00:00:00';
            if(batt_test_every_record.length != 0) {
                var slide_index = Math.floor((batt_test_every_record.length-1)*value/100);
                var record = batt_test_every_record[slide_index];
                this.testInfo.groupVol = record.group_vol;      // 组端电压
                this.testInfo.onlineVol = record.online_vol;    // 在线电压
                this.testInfo.curr = record.test_curr;          // 测试电流
                this.testInfo.cap = Number(record.test_cap.toFixed(1));     // 测试容量
                result = formatSeconds(record.test_timelong);       // 测试时长
                this.testInfo.testTimeLong = result;
            } 
            return result;
        },
        handlerSliderChange: function() {
            this.setOptions();
        },
        handlerSelectChange: function(item) {
            if(item && item.type == 'group') {
                this.batt = item;
                var isSpecail = this.regFbsId(item.FBSDeviceId);
                console.log(item);
                this.setMonList(item.MonCount);     // 设置电池编号
                if(isSpecail) {
                    this.states.fbs = false;
                    this.states.ld9 = true;
@@ -127,6 +216,7 @@
                }else {
                    this.states.ld9 = false;
                    this.states.fbs = true;
                    this.initHis(true);     // 初始化数据
                    this.searchRecords(item);   // 查询电池的充电电记录
                }
            }
@@ -146,6 +236,7 @@
            }
        },
        setRecords: function(nuclearDis, controlDis, nuclearCharge, controlCharge) {
            // console.log(controlDis);
            this.initRecords();
            var records = this.records;
            this.formaterRecords(records[0].name, nuclearDis);
@@ -217,7 +308,7 @@
                    var rs = JSON.parse(res.result);
                    if(rs.code == 1) {
                        var data = rs.data;
                        console.log(data);
                        // console.log(data);
                    }
                }
            });
@@ -225,10 +316,18 @@
        recordSelect: function(record) {
            var self = this;
            if(record) {
                // 设置电池的状态
                // console.log(record);
                // console.log(this.batt);
                this.setEleState(record);
                this.testInfo.testTime = record.test_starttime;
                // 构造查询条件
                var searchParams = {
                    BattGroupId: record.BattGroupId,
                    test_record_count: record.test_record_count,
                };
                // 查询后台
                this.spinShow = true;
                ajax({
                    url: 'BatttestdataAction!findhistory',
                    data: 'json='+JSON.stringify(searchParams),
@@ -239,19 +338,39 @@
                            data =rs.data;
                        }
                        self.formateHis(data);
                    },
                    complete: function() {
                        self.spinShow = false;
                    }
                });
            }
        },
        formateHis: function(data) {
            console.log(data);
        initHis: function(update) {     // 初始化历史数据内容
            // 历史数据
            var hisBar= {
                vol:[],
                tmp:[],
                cap:[],
            };
            var monCount = this.monList.length;
            this.hisData.hisBar = hisBar;       // 初始化柱状图
            this.hisData.batt_test_every_record = [];   // 初始化记录的组端信息
            this.slider = 100;                  // 初始化滑块
            // this.initTestInfo();                // 初始化测试信息
            // 更新柱状图
            if(typeof(update) != 'undefined') {
                this.setOptions();
            }
        },
        formateHis: function(data) {
            this.initHis();
            // console.log(data);
            // 历史数据
            var hisBar= {
                vol:[],
                tmp:[],
                cap:[],
            };
            this.hisData.batt_test_every_record = [];
            var num = -1;
            for(var i=0; i<data.length; i++) {
                var _data = data[i];
@@ -259,7 +378,8 @@
                if(_data.mon_num == start) {
                    num++;
                    hisBar.vol.push([]);
                    hisBar.tmp.push([]); 
                    hisBar.tmp.push([]);
                    this.hisData.batt_test_every_record.push(_data); 
                }
                hisBar.vol[num].push(_data.mon_vol);
                hisBar.tmp[num].push(_data.mon_tmp);
@@ -267,15 +387,33 @@
            this.hisData.hisBar = hisBar;

            // 更新柱状图
            this.updateGraph();
            this.setOptions();
        },
        updateGraph: function() {
            var sdata = this.hisData.hisBar.vol[0];
            console.log(sdata);
        setOptions: function() {
            var barInfo = this.getBarInfo();
            var sdata = barInfo.sdata;
            var unit = barInfo.unit;
            var fixed = barInfo.fixed;
            var monList = this.monList;
            var max = getMaxFromArr(sdata);
            var min = getMinFromArr(sdata);
            var avg = Number(getAvgFromArr(sdata).toFixed(fixed));
            var subtext = '最大值：'+max+unit+';最小值：'+min+unit+";平均值："+avg+unit;
            //console.log(sdata);
            var barOption = {
                title: {
                    subtext: subtext,
                    x: 'center',
                },
                xAxis: {
                    type: 'category',
                    data: this.monList,
                    data: monList,
                },
                yAxis: {
                    type: 'value',
                    name: '单位('+unit+')',
                    min: 0,
                    max: 10
                },
                series: [{
                    name: '电压',
@@ -284,6 +422,48 @@
                }],
            };

            this.updateGraph(barOption);
        },
        getBarInfo: function() {
            var result = {};
            var hisBar = this.hisData.hisBar;
            var barType = this.chartTools.barType;
            var batt_test_every_record = this.hisData.batt_test_every_record;
            var slider = this.slider;
            var slide_index = Math.floor((batt_test_every_record.length-1)*slider/100);
            // 数据类型，单位，保留位数
            var sdatas, unit, fixed;
            // 根据类型获取值
            switch(barType) {
                case 'monvol':
                    unit = 'V';
                    fixed = 3;
                    sdatas = hisBar.vol;
                break;
                case 'montmp':
                    unit = '℃';
                    fixed = 1;
                    sdatas = hisBar.tmp;
                break;
                default:
                    unit = '';
                    fixed = 0;
                    sdatas = [];
                break;
            }
            result.unit = unit;
            result.fixed = unit;
            // 根据滑块的位置计算出要显示的数据
            if(sdatas.length != 0) {
                result.sdata = sdatas[slide_index];
            }else {
                result.sdata = [];
            }

            return result;
        },
        updateGraph: function(barOption) {
            // 更新柱状图
            this.$refs.monBar.setOption(barOption);
        },
        regFbsId: function(id) {
@@ -291,6 +471,16 @@
            var pattern = /^40190/;
            rs = pattern.test(id);
            return rs;
        },
        barTypeChange: function(value) {
            this.setOptions();
        },
        handlerTabClick: function() {

        },
        setEleState: function(record) {
            var eleState = record.test_type==3?'放电(终止原因：'+record.test_stoptype_reason+')':record.test_type==2?'充电':"else";
            this.testInfo.eleState = eleState;
        }
    },
    mounted() {
@@ -320,13 +510,20 @@
        height: 100%;
        overflow-y: auto;
    }
    .graph-row {
        height: calc(50% - 12px);
    .tab-pane-inner {
        position: relative;
    }
    .graph-col {
        height: 100%;
    .chart-tool {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    .i-col-inner {
        height: 100%;
    .slider-container {
       position: absolute;
       left: 15px;
       right: 40px;
       bottom: 8px;
       z-index: 1;
    }
</style>

 src/views/monitor/realTime.vue

@@ -14,7 +14,7 @@
                            <div>加载中...</div>
                        </Spin>
                        <content-title :title="contentTitle"></content-title>
                        <square-box style="margin: 8px" title="实时图谱" icon="ios-podium">
                        <square-box style="margin: 8px" title="实时数据图谱" icon="ios-podium">
                            <Tabs value="monVol" class="ivu-tabs-yellow" name="controlTabs" @on-click="handlerTabClick">
                                <TabPane label="电压" name="monVol" tab="controlTabs">
                                    <bar-chart height="400px" ref="monVolBar" :show-value=true :range="{'min': 0,'max': 1}"></bar-chart>