内容

whychdw

2019-10-10 07430ab4daae1c8bc0a9d4507410470c0a09f5d0

 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>