~whyclj/zijing.git

parent: ac70d4f7 | 补丁 | 提交 | show whitespace

whychdw

2020-08-26 73b739799b4d51e3c9e222f3b9884097a79923b2

实时历史折线图bug修复

1个文件已添加

3个文件已修改

	zijing/WebRoot/control.jsp	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zijing/WebRoot/el-pages/history-real-time.html	330 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zijing/WebRoot/element-ui/js/common.js	174 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zijing/WebRoot/element-ui/js/echarts.js	98328 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 zijing/WebRoot/control.jsp

@@ -5127,6 +5127,7 @@
        // 显示历史实时信息
        function showHistoryRes() {
            var batt = getBatt();
            console.log(batt);
            var random = Math.random();
            // 打开面板
            layer.open({
@@ -5134,7 +5135,7 @@
                title: batt.StationName+'-'+batt.BattGroupName+'-历史实时信息',
                maxmin: true,
                area: ['1200px', '610px'],
                content: './el-pages/history-real-time.html?random='+random+'&BattGroupId='+batt.BattGroupId,
                content: './el-pages/history-real-time.html?random='+random+'&BattGroupId='+batt.BattGroupId+'&MonCount='+batt.MonCount,
            }); 
        }
        

 zijing/WebRoot/el-pages/history-real-time.html

@@ -10,6 +10,25 @@
        .vh130 {

            height: calc(100vh - 120px);

        }

        .progress-container {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99;
            background-color: rgba(155, 152, 152, 0.1);
        }
        .progress-content {
            display: flex;
            height: 100%;
            flex-direction: row;     /* 子元素横向排列 */
            justify-content: center; /* 相对父元素水平居中 */
            align-items: center; /*  子元素相对父元素垂直居中 */
        }
        .progress-content .progress {
            display: inline-block;
        }
    </style>

</head>

<body>

@@ -20,8 +39,8 @@
                v-model="filter.timeType"

                @change="radioChange" 

                size="medium">

                    <el-radio-button label="365" >近一年</el-radio-button>

                    <el-radio-button label="90">近三个月</el-radio-button>

                    <!-- <el-radio-button label="365" >近一年</el-radio-button>
                    <el-radio-button label="90">近三个月</el-radio-button> -->
                    <el-radio-button label="30">近一个月</el-radio-button>

                    <el-radio-button label="7">近7天</el-radio-button>

                    <el-radio-button label="1">近24小时</el-radio-button>

@@ -44,10 +63,22 @@
                    </div>

                    <el-button size="medium" slot="reference">{{filter.txt}} <i class="el-icon-date"></i></el-button>

                </el-popover>

                当前显示单体：
                <el-select 
                v-model="monSelect" 
                filterable placeholder="请选择查看的单体"
                @change="monSelectChange">
                    <el-option
                    v-for="item in monOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>

        </div>

        <div class="ele-app-content">

            <el-tabs value="groupVolGraph" @tab-click="tabClick">

            <el-tabs v-model="acTabs" @tab-click="resize">
                <el-tab-pane name="groupVolGraph" label="组端电压">

                    <div class="ele-graph-container vh130">

                        <div class="ele-graph" id="groupVolGraph"></div>

@@ -75,11 +106,18 @@
                </el-tab-pane>

            </el-tabs>

        </div>

        <div class="progress-container" v-if="progress.show">
            <div class="progress-content">
                <div class="progress">
                    <el-progress type="circle" :percentage="progress.value"></el-progress>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../element-ui/vue.min.js"></script>

    <script type="text/javascript" src="../element-ui/index.js"></script>

    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="../element-ui/js/echarts.min.js"></script>

    <script type="text/javascript" src="../element-ui/js/echarts.js"></script>
    <script type="text/javascript" src="../element-ui/js/common.js"></script>

    <script>

        // 页面中的echarts

@@ -88,30 +126,16 @@
        monVolGraph,

        monTmpGraph,

        monResGraph;

        // vue对象

        var vm = new Vue({

            el: '#elementApp',

            data: {

                loading: false,

                filter: {

                    timeType: 1,

                    startTime: '',

                    endTime: '',

                    txt: '选择日期'

                },

                timeRange: [],

                searchParams: {

                    BattGroupId: '',

                    recrod_time: '',

                    recrod_time1: ''

                },

                options: {

        var options = {
                    groupVolGraph: {

                        title: {

                            text: '组端电压折线图'

                        },

                        xAxis: {

                            data: []

                xAxis: [{
                    type: 'category',
                }],
                yAxis: {
                    type: 'value',
                        },

                        series: []

                    },

@@ -128,6 +152,10 @@
                        title: {

                            text: '单体电压折线图'

                        },

                legend: {
                    show: true,
                    data: [],
                },
                        xAxis: {

                            data: []

                        },

@@ -136,6 +164,10 @@
                    monTmpGraph: {

                        title: {

                            text: '单体温度折线图'

                },
                legend: {
                    show: true,
                    data: [],
                        },

                        xAxis: {

                            data: []

@@ -146,12 +178,40 @@
                        title: {

                            text: '单体内阻折线图'

                        },

                legend: {
                    show: true,
                    data: [],
                },
                        xAxis: {

                            data: []

                        },

                        series: []

                    },

                }

        };
        // vue对象
        var vm = new Vue({
            el: '#elementApp',
            data: {
                loading: false,
                acTabs: 'groupVolGraph',
                filter: {
                    timeType: 1,
                    startTime: '',
                    endTime: '',
                    txt: '选择日期'
                },
                timeRange: [],
                searchParams: {
                    BattGroupId: '',
                    recrod_time: '',
                    recrod_time1: ''
                },
                progress: {
                    show: false,
                    value: 0,
                },
                monCount: 0,
                monSelect: '#1',
            },

            methods: {

                timeRangeChange: function() {

@@ -166,7 +226,7 @@
                    // 设置时间段

                    this.setRangeTime(startTime, endTime);

                    // 根据查询条件获取数据

                    this.search();

                    this.loopSearch();
                },

                radioChange: function() {

                    // 消除日期时间段

@@ -183,7 +243,7 @@
                    // 设置时间段

                    this.setRangeTime(startTime, endTime);

                    // 根据查询条件获取数据

                    this.search();

                    this.loopSearch();
                },

                setRangeTime: function(startTime, endTime) {

                    this.searchParams.recrod_time1 = startTime;

@@ -209,47 +269,113 @@
                        break;

                    }

                },

                search: function() {

                resize: function() {
                    var self = this;

                    // 开启等待框

                    this.loading = true;

                    this.$nextTick(function() {
                        // 根据标签name,重置图表大小
                        switch(self.acTabs) {
                            case 'groupVolGraph':
                                groupVolGraph.resize();
                            break;
                            case 'groupCurrGraph':
                                groupCurrGraph.resize();
                            break;
                            case 'monVolGraph':
                                monVolGraph.resize();
                            break;
                            case 'monTmpGraph':
                                monTmpGraph.resize();
                            break;
                            case 'monResGraph':
                                monResGraph.resize();
                            break;
                        };
                    });
					
					
                },
                loopSearch() {
                    var BattGroupId = this.searchParams.BattGroupId;
                    var start = new Date(this.searchParams.recrod_time).getTime();
                    var end = new Date(this.searchParams.recrod_time1).getTime();
                    var times = [];
                    while(start<end) {
                        var recrod_time1 = start+3600*12*1000;
                        recrod_time1 = recrod_time1>end?end:recrod_time1;
                        var tmp = {
                            BattGroupId: BattGroupId,
                            recrod_time: new Date(start).format("yyyy-MM-dd hh:mm:ss"),
                            recrod_time1: new Date(recrod_time1).format("yyyy-MM-dd hh:mm:ss"),
                        };
                        times.push(tmp);
                        start = recrod_time1+1000;
                    }
                    this.progress.value = 0;
                    this.progress.show = true;
                    // 开始查询
                    this.search(times, 0);
                },
                search: function(times, index) {
                    // 结束标识
                    if(!times[index]) {
                        this.progress.value = 100;
                        this.resize();
                        setTimeout(()=>{
                            this.progress.show=false;
                        }, 1000);
                        return;
                    }
					
                    // 设置进度值
                    this.progress.value = Math.floor(index/times.length*100);

                    var self = this;
                    // 请求后台

                    $.ajax({

                        type: 'post',

                        async: true,

                        url: 'Batt_realdataAction!serchByCondition',

                        data: 'json='+JSON.stringify(this.searchParams),

                        data: 'json='+JSON.stringify(times[index]),
                        dataType: 'json',

                        success: function(res) {

                            var rs = JSON.parse(res.result);

                            var data = [];

                            if(rs.code == 1) {

                                data = rs.data;

                            }else {

                                self.$message({

                                    message: '未查询到实时数据',

                                    type: 'warning'

                                });

                            }

							
                            // 初始化加载加载
                            if(index == 0) {
                            // 格式化数据

                            self.formatData(data);

                            }else {
                                // 格式化添加的数据
                                self.formatAppendData(data);
                                //console.log(data);
                            }
							
                        },

                        complete: function() {

                            self.loading = false;

                            self.search(times, ++index);
                        }

                    });

                },

                formatData: function(data) {

                    console.log(data);

                    var dates = [];        // 日期

                    var groupVol = [{

                        name: '组端电压',

                        type: 'line',

                        smooth: true,
                        symbolSize: 0,
                        sampling: 'average',
                        data: []

                    }];

                    var groupCurr = [{

                        name: '组端电流',

                        type: 'line',

                        smooth: true,
                        symbolSize: 0,
                        sampling: 'average',
                        data: []

                    }];

                    var monVol = [];    // 单体电压

@@ -261,9 +387,8 @@
                        var _data = data[i];

                        if(_data.recrod_time != flag) {

                            flag = _data.recrod_time;

                            dates.push(_data.recrod_time);

                            groupVol[0].data.push(_data.group_vol);

                            groupCurr[0].data.push(_data.group_curr);

                            groupVol[0].data.push([_data.recrod_time, _data.group_vol]);
                            groupCurr[0].data.push([_data.recrod_time,_data.group_curr]);
                        }

                        // 设置单体信息

                        if(typeof monVol[_data.mon_num - 1] != 'object') {

@@ -271,63 +396,130 @@
                            monVol[_data.mon_num - 1] = {

                                name: '#'+_data.mon_num,

                                type: 'line',

                                smooth: true,
                                symbolSize: 0,
                                sampling: 'average',
                                data: []

                            };

                            // 单体温度

                            monTmp[_data.mon_num - 1] = {

                                name: '#'+_data.mon_num,

                                type: 'line',

                                showSymbol: false,
                                data: []

                            };

                            // 单体内阻

                            monRes[_data.mon_num - 1] = {

                                name: '#'+_data.mon_num,

                                type: 'line',

                                smooth: true,
                                symbolSize: 0,
                                sampling: 'average',
                                data: []

                            };

                        }

                        // 单体电压

                        monVol[_data.mon_num - 1].data.push(_data.mon_vol);

                        monVol[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_vol]);
                        // 单体温度

                        monTmp[_data.mon_num - 1].data.push(_data.mon_tmp);

                        monTmp[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_tmp]);
                        // 单体内阻

                        monRes[_data.mon_num - 1].data.push(_data.mon_res);

                        monRes[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_res]);
                    }

                    // 设置组端电压

                    this.options.groupVolGraph.xAxis.data = dates;

                    this.options.groupVolGraph.series = groupVol;

                    options.groupVolGraph.series = groupVol;
                    // 设置组端电流

                    this.options.groupCurrGraph.xAxis.data = dates;

                    this.options.groupCurrGraph.series = groupCurr;

                    options.groupCurrGraph.series = groupCurr;

                    // 设置单体电压

                    this.options.monVolGraph.xAxis.data = dates;

                    this.options.monVolGraph.series = monVol;

                    options.monVolGraph.series = monVol;
                    // 设置单体温度

                    this.options.monTmpGraph.xAxis.data = dates;

                    this.options.monTmpGraph.series = monTmp;

                    options.monTmpGraph.series = monTmp;
                    // 设置单体内阻

                    this.options.monResGraph.xAxis.data = dates;

                    this.options.monResGraph.series = monRes;

                    options.monResGraph.series = monRes;
                    // 设置图表的配置项

                    this.setOptions();

                },

                formatAppendData: function(data){
                    var groupVol = [[]];    // 组端电压
                    var groupCurr = [[]];    // 组端电流
                    var monVol = [];    // 单体电压
                    var monTmp = [];    // 单体温度
                    var monRes = [];    // 单体内阻
                    var flag = '-1';
                    // 遍历data
                    for(var i=0; i<data.length; i++) {
                        var _data = data[i];
                        if(_data.recrod_time != flag) {
                            flag = _data.recrod_time;
                            groupVol[0].push([_data.recrod_time, _data.group_vol]);
                            groupCurr[0].push([_data.recrod_time,_data.group_curr]);
                        }
                        // 设置单体信息
                        if(typeof monVol[_data.mon_num - 1] != 'object') {
                            // 单体电压
                            monVol[_data.mon_num - 1] = [];
                            // 单体温度
                            monTmp[_data.mon_num - 1] = [];
                            // 单体内阻
                            monRes[_data.mon_num - 1] = [];
                        }
                        // 单体电压
                        monVol[_data.mon_num - 1].push([_data.recrod_time, _data.mon_vol]);
                        // 单体温度
                        monTmp[_data.mon_num - 1].push([_data.recrod_time, _data.mon_tmp]);
                        // 单体内阻
                        monRes[_data.mon_num - 1].push([_data.recrod_time, _data.mon_res]);
                    }

                    // 添加数据
                    groupVolGraph.appendData(groupVol);
                    groupCurrGraph.appendData(groupCurr);
                    monVolGraph.appendData(monVol);
                    monTmpGraph.appendData(monTmp);
                    monResGraph.appendData(monRes);
                },
                setOptions: function() {

                    // 设置数据

                    groupVolGraph.setOption(this.options.groupVolGraph);

                    groupCurrGraph.setOption(this.options.groupCurrGraph);

                    monVolGraph.setOption(this.options.monVolGraph);

                    monTmpGraph.setOption(this.options.monTmpGraph);

                    monResGraph.setOption(this.options.monResGraph);

                    groupVolGraph.setOption(options.groupVolGraph);
                    groupCurrGraph.setOption(options.groupCurrGraph);
                    monVolGraph.setOption(options.monVolGraph);
                    monTmpGraph.setOption(options.monTmpGraph);
                    monResGraph.setOption(options.monResGraph);
                    this.setLegends();
                },
                setLegends: function() {
                    monVolGraph.setLegend(this.monSelect);
                    monTmpGraph.setLegend(this.monSelect);
                    monResGraph.setLegend(this.monSelect);
                },
                monSelectChange: function() {
                    this.setLegends();
                }

            },

            computed: {
                monOptions: function() {
                    var result = [];
                    for(var i=0; i<this.monCount; i++) {
                        var text = '#'+(i+1);
                        result.push({
                            label: text,
                            value: text,
                        });
                    }
                    return result;
                },
            },
            mounted() {

                var self = this;
                // 设置电池组id

                this.searchParams.BattGroupId = getQueryString('BattGroupId');

                groupVolGraph = new EleGraphLine('groupVolGraph');

                groupCurrGraph = new EleGraphLine('groupCurrGraph');

                monVolGraph = new EleGraphLine('monVolGraph');

                monTmpGraph = new EleGraphLine('monTmpGraph');

                monResGraph = new EleGraphLine('monResGraph');

                this.monCount = getQueryString('MonCount');

                groupVolGraph = new EleGraphLinePlus('groupVolGraph');
                groupCurrGraph = new EleGraphLinePlus('groupCurrGraph');
                monVolGraph = new EleGraphLinePlus('monVolGraph');
                monTmpGraph = new EleGraphLinePlus('monTmpGraph');
                monResGraph = new EleGraphLinePlus('monResGraph');
                groupVolGraph.resize();

                // 初始化内容

                this.setOptions();

@@ -335,13 +527,9 @@
                this.radioChange();

                

                // 窗口变化修改大小

                window.onresize = function() {

                    groupVolGraph.resize();

                    groupCurrGraph.resize();

                    monVolGraph.resize();

                    monTmpGraph.resize();

                    monResGraph.resize();

                }

                window.addEventListener('resize', function() {
                    self.resize();
                });
            }

        });

    </script>


 zijing/WebRoot/element-ui/js/common.js

@@ -172,6 +172,180 @@
    }, 0);
};


//折线图
function EleGraphLinePlus(id) {
    this.chart = echarts.init(document.getElementById(id));
    this.names = [];
    this.name = '';
    // 初始化
    this.init();
}

// 初始化图表
EleGraphLinePlus.prototype.init = function() {
    var option = {};

    this.setOption(option);
};

// 设置图表的配置项
EleGraphLinePlus.prototype.setOption = function(opt) {
    // 设置名称列表
    this.setNames(opt);

    // 基本配置项
    var option = {
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
        },
        dataZoom: [
            {
                start: 0,
                end: 5,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }
        ],
        legend: this.getLegend(opt),
        grid: {
            left: '3%',
            right: '4%',
            bottom: 60,
        },
        xAxis: [{
            type: 'category',
        }],
        yAxis: [{
            type: 'value',
            min: function(data) {
                let min = data.min;
                if(min == Infinity) {
                    return 0;
                }
                return Math.floor(min*0.9);
            },
            max: function(data) {
                let max = data.max;
                if(max == -Infinity) {
                    max = 1;
                }
                return Math.ceil(max*1.01);
            }
        }],
        series: this.getSeries(opt)
    };
    
    // 设置配置项
    this.chart.setOption(option);
};

// 设置名称
EleGraphLinePlus.prototype.setNames = function(opt) {
    // 未配置series
    if(!opt || !opt.series) {
        this.names = [];
        return;
    }

    // 设置名称列表
    this.names = opt.series.map(function(item){
        return item.name;
    });
};

// 获取legend
EleGraphLinePlus.prototype.getLegend = function(opt) {
    // 未配置series
    if(!opt || !opt.legend) {
        return {
            show: false,
        };
    }
    var legend = opt.legend;
    legend.show = false;
    legend.data = this.names;
    var selected = {};
    this.names.forEach(function(item) {
        selected[item]=false;
    });

    // 默认全部不渲染
    legend.selected = selected;
    return opt.legend;
};

// 设置一条可见
EleGraphLinePlus.prototype.setLegend = function(name) {
    // 关闭上一个显示的线条
    this.chart.dispatchAction({
        type: 'legendUnSelect',
        name: this.name
    });
    // 设置显示的线条
    this.chart.dispatchAction({
        type: 'legendSelect',
        name: name
    });
    // 存储线条
    this.name = name;
}

// 获取series
EleGraphLinePlus.prototype.getSeries = function(opt) {
    // 未配置series
    if(!opt || !opt.series) {
        return [];
    }
    // 设置配置项
    let series = opt.series.map(function(item){
        item.type="line";
        item.smooth=true;
        item.symbolSize=0;
        item.sampling='average';
        return item;
    });
    // 没有内容
    if(series.length == 0) {
        return [{
            name: '初始化内容',
            type: 'line',
            data: []
        }];
    }

    return series;
}

EleGraphLinePlus.prototype.appendData = function(list) {
    var self = this;
    list.forEach(function(item, index){
        self.chart.appendData({
            seriesIndex: index,
            data: item
        });
    });

    this.chart.resize();
}

// 重置
EleGraphLinePlus.prototype.resize = function() {
    this.chart.resize();
};

//省-市-区县联动
function LinkagePlus() {
    this.data= [];

 zijing/WebRoot/element-ui/js/echarts.js

New file
Diff too large

			@@ -5127,6 +5127,7 @@
			// 显示历史实时信息
			function showHistoryRes() {
			var batt = getBatt();
			console.log(batt);
			var random = Math.random();
			// 打开面板
			layer.open({
			@@ -5134,7 +5135,7 @@
			title: batt.StationName+'-'+batt.BattGroupName+'-历史实时信息',
			maxmin: true,
			area: ['1200px', '610px'],
			content: './el-pages/history-real-time.html?random='+random+'&BattGroupId='+batt.BattGroupId,
			content: './el-pages/history-real-time.html?random='+random+'&BattGroupId='+batt.BattGroupId+'&MonCount='+batt.MonCount,
			});
			}

			@@ -10,6 +10,25 @@
			.vh130 {
			height: calc(100vh - 120px);
			}
			.progress-container {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 99;
			background-color: rgba(155, 152, 152, 0.1);
			}
			.progress-content {
			display: flex;
			height: 100%;
			flex-direction: row; /* 子元素横向排列 */
			justify-content: center; /* 相对父元素水平居中 */
			align-items: center; /* 子元素相对父元素垂直居中 */
			}
			.progress-content .progress {
			display: inline-block;
			}
			</style>
			</head>
			<body>
			@@ -20,8 +39,8 @@
			v-model="filter.timeType"
			@change="radioChange"
			size="medium">
			<el-radio-button label="365" >近一年</el-radio-button>
			<el-radio-button label="90">近三个月</el-radio-button>
			<!-- <el-radio-button label="365" >近一年</el-radio-button>
			<el-radio-button label="90">近三个月</el-radio-button> -->
			<el-radio-button label="30">近一个月</el-radio-button>
			<el-radio-button label="7">近7天</el-radio-button>
			<el-radio-button label="1">近24小时</el-radio-button>
			@@ -44,10 +63,22 @@
			</div>
			<el-button size="medium" slot="reference">{{filter.txt}} <i class="el-icon-date"></i></el-button>
			</el-popover>
			当前显示单体：
			<el-select
			v-model="monSelect"
			filterable placeholder="请选择查看的单体"
			@change="monSelectChange">
			<el-option
			v-for="item in monOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value">
			</el-option>
			</el-select>
			</div>
			</div>
			<div class="ele-app-content">
			<el-tabs value="groupVolGraph" @tab-click="tabClick">
			<el-tabs v-model="acTabs" @tab-click="resize">
			<el-tab-pane name="groupVolGraph" label="组端电压">
			<div class="ele-graph-container vh130">
			<div class="ele-graph" id="groupVolGraph"></div>
			@@ -75,11 +106,18 @@
			</el-tab-pane>
			</el-tabs>
			</div>
			<div class="progress-container" v-if="progress.show">
			<div class="progress-content">
			<div class="progress">
			<el-progress type="circle" :percentage="progress.value"></el-progress>
			</div>
			</div>
			</div>
			</div>
			<script type="text/javascript" src="../element-ui/vue.min.js"></script>
			<script type="text/javascript" src="../element-ui/index.js"></script>
			<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
			<script type="text/javascript" src="../element-ui/js/echarts.min.js"></script>
			<script type="text/javascript" src="../element-ui/js/echarts.js"></script>
			<script type="text/javascript" src="../element-ui/js/common.js"></script>
			<script>
			// 页面中的echarts
			@@ -88,30 +126,16 @@
			monVolGraph,
			monTmpGraph,
			monResGraph;
			// vue对象
			var vm = new Vue({
			el: '#elementApp',
			data: {
			loading: false,
			filter: {
			timeType: 1,
			startTime: '',
			endTime: '',
			txt: '选择日期'
			},
			timeRange: [],
			searchParams: {
			BattGroupId: '',
			recrod_time: '',
			recrod_time1: ''
			},
			options: {
			var options = {
			groupVolGraph: {
			title: {
			text: '组端电压折线图'
			},
			xAxis: {
			data: []
			xAxis: [{
			type: 'category',
			}],
			yAxis: {
			type: 'value',
			},
			series: []
			},
			@@ -128,6 +152,10 @@
			title: {
			text: '单体电压折线图'
			},
			legend: {
			show: true,
			data: [],
			},
			xAxis: {
			data: []
			},
			@@ -136,6 +164,10 @@
			monTmpGraph: {
			title: {
			text: '单体温度折线图'
			},
			legend: {
			show: true,
			data: [],
			},
			xAxis: {
			data: []
			@@ -146,12 +178,40 @@
			title: {
			text: '单体内阻折线图'
			},
			legend: {
			show: true,
			data: [],
			},
			xAxis: {
			data: []
			},
			series: []
			},
			}
			};
			// vue对象
			var vm = new Vue({
			el: '#elementApp',
			data: {
			loading: false,
			acTabs: 'groupVolGraph',
			filter: {
			timeType: 1,
			startTime: '',
			endTime: '',
			txt: '选择日期'
			},
			timeRange: [],
			searchParams: {
			BattGroupId: '',
			recrod_time: '',
			recrod_time1: ''
			},
			progress: {
			show: false,
			value: 0,
			},
			monCount: 0,
			monSelect: '#1',
			},
			methods: {
			timeRangeChange: function() {
			@@ -166,7 +226,7 @@
			// 设置时间段
			this.setRangeTime(startTime, endTime);
			// 根据查询条件获取数据
			this.search();
			this.loopSearch();
			},
			radioChange: function() {
			// 消除日期时间段
			@@ -183,7 +243,7 @@
			// 设置时间段
			this.setRangeTime(startTime, endTime);
			// 根据查询条件获取数据
			this.search();
			this.loopSearch();
			},
			setRangeTime: function(startTime, endTime) {
			this.searchParams.recrod_time1 = startTime;
			@@ -209,47 +269,113 @@
			break;
			}
			},
			search: function() {
			resize: function() {
			var self = this;
			// 开启等待框
			this.loading = true;
			this.$nextTick(function() {
			// 根据标签name,重置图表大小
			switch(self.acTabs) {
			case 'groupVolGraph':
			groupVolGraph.resize();
			break;
			case 'groupCurrGraph':
			groupCurrGraph.resize();
			break;
			case 'monVolGraph':
			monVolGraph.resize();
			break;
			case 'monTmpGraph':
			monTmpGraph.resize();
			break;
			case 'monResGraph':
			monResGraph.resize();
			break;
			};
			});


			},
			loopSearch() {
			var BattGroupId = this.searchParams.BattGroupId;
			var start = new Date(this.searchParams.recrod_time).getTime();
			var end = new Date(this.searchParams.recrod_time1).getTime();
			var times = [];
			while(start<end) {
			var recrod_time1 = start+3600121000;
			recrod_time1 = recrod_time1>end?end:recrod_time1;
			var tmp = {
			BattGroupId: BattGroupId,
			recrod_time: new Date(start).format("yyyy-MM-dd hh:mm:ss"),
			recrod_time1: new Date(recrod_time1).format("yyyy-MM-dd hh:mm:ss"),
			};
			times.push(tmp);
			start = recrod_time1+1000;
			}
			this.progress.value = 0;
			this.progress.show = true;
			// 开始查询
			this.search(times, 0);
			},
			search: function(times, index) {
			// 结束标识
			if(!times[index]) {
			this.progress.value = 100;
			this.resize();
			setTimeout(()=>{
			this.progress.show=false;
			}, 1000);
			return;
			}

			// 设置进度值
			this.progress.value = Math.floor(index/times.length*100);

			var self = this;
			// 请求后台
			$.ajax({
			type: 'post',
			async: true,
			url: 'Batt_realdataAction!serchByCondition',
			data: 'json='+JSON.stringify(this.searchParams),
			data: 'json='+JSON.stringify(times[index]),
			dataType: 'json',
			success: function(res) {
			var rs = JSON.parse(res.result);
			var data = [];
			if(rs.code == 1) {
			data = rs.data;
			}else {
			self.$message({
			message: '未查询到实时数据',
			type: 'warning'
			});
			}

			// 初始化加载加载
			if(index == 0) {
			// 格式化数据
			self.formatData(data);
			}else {
			// 格式化添加的数据
			self.formatAppendData(data);
			//console.log(data);
			}

			},
			complete: function() {
			self.loading = false;
			self.search(times, ++index);
			}
			});
			},
			formatData: function(data) {
			console.log(data);
			var dates = []; // 日期
			var groupVol = [{
			name: '组端电压',
			type: 'line',
			smooth: true,
			symbolSize: 0,
			sampling: 'average',
			data: []
			}];
			var groupCurr = [{
			name: '组端电流',
			type: 'line',
			smooth: true,
			symbolSize: 0,
			sampling: 'average',
			data: []
			}];
			var monVol = []; // 单体电压
			@@ -261,9 +387,8 @@
			var _data = data[i];
			if(_data.recrod_time != flag) {
			flag = _data.recrod_time;
			dates.push(_data.recrod_time);
			groupVol[0].data.push(_data.group_vol);
			groupCurr[0].data.push(_data.group_curr);
			groupVol[0].data.push([_data.recrod_time, _data.group_vol]);
			groupCurr[0].data.push([_data.recrod_time,_data.group_curr]);
			}
			// 设置单体信息
			if(typeof monVol[_data.mon_num - 1] != 'object') {
			@@ -271,63 +396,130 @@
			monVol[_data.mon_num - 1] = {
			name: '#'+_data.mon_num,
			type: 'line',
			smooth: true,
			symbolSize: 0,
			sampling: 'average',
			data: []
			};
			// 单体温度
			monTmp[_data.mon_num - 1] = {
			name: '#'+_data.mon_num,
			type: 'line',
			showSymbol: false,
			data: []
			};
			// 单体内阻
			monRes[_data.mon_num - 1] = {
			name: '#'+_data.mon_num,
			type: 'line',
			smooth: true,
			symbolSize: 0,
			sampling: 'average',
			data: []
			};
			}
			// 单体电压
			monVol[_data.mon_num - 1].data.push(_data.mon_vol);
			monVol[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_vol]);
			// 单体温度
			monTmp[_data.mon_num - 1].data.push(_data.mon_tmp);
			monTmp[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_tmp]);
			// 单体内阻
			monRes[_data.mon_num - 1].data.push(_data.mon_res);
			monRes[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_res]);
			}
			// 设置组端电压
			this.options.groupVolGraph.xAxis.data = dates;
			this.options.groupVolGraph.series = groupVol;
			options.groupVolGraph.series = groupVol;
			// 设置组端电流
			this.options.groupCurrGraph.xAxis.data = dates;
			this.options.groupCurrGraph.series = groupCurr;
			options.groupCurrGraph.series = groupCurr;

			// 设置单体电压
			this.options.monVolGraph.xAxis.data = dates;
			this.options.monVolGraph.series = monVol;
			options.monVolGraph.series = monVol;
			// 设置单体温度
			this.options.monTmpGraph.xAxis.data = dates;
			this.options.monTmpGraph.series = monTmp;
			options.monTmpGraph.series = monTmp;
			// 设置单体内阻
			this.options.monResGraph.xAxis.data = dates;
			this.options.monResGraph.series = monRes;
			options.monResGraph.series = monRes;
			// 设置图表的配置项
			this.setOptions();
			},
			formatAppendData: function(data){
			var groupVol = [[]]; // 组端电压
			var groupCurr = [[]]; // 组端电流
			var monVol = []; // 单体电压
			var monTmp = []; // 单体温度
			var monRes = []; // 单体内阻
			var flag = '-1';
			// 遍历data
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			if(_data.recrod_time != flag) {
			flag = _data.recrod_time;
			groupVol[0].push([_data.recrod_time, _data.group_vol]);
			groupCurr[0].push([_data.recrod_time,_data.group_curr]);
			}
			// 设置单体信息
			if(typeof monVol[_data.mon_num - 1] != 'object') {
			// 单体电压
			monVol[_data.mon_num - 1] = [];
			// 单体温度
			monTmp[_data.mon_num - 1] = [];
			// 单体内阻
			monRes[_data.mon_num - 1] = [];
			}
			// 单体电压
			monVol[_data.mon_num - 1].push([_data.recrod_time, _data.mon_vol]);
			// 单体温度
			monTmp[_data.mon_num - 1].push([_data.recrod_time, _data.mon_tmp]);
			// 单体内阻
			monRes[_data.mon_num - 1].push([_data.recrod_time, _data.mon_res]);
			}

			// 添加数据
			groupVolGraph.appendData(groupVol);
			groupCurrGraph.appendData(groupCurr);
			monVolGraph.appendData(monVol);
			monTmpGraph.appendData(monTmp);
			monResGraph.appendData(monRes);
			},
			setOptions: function() {
			// 设置数据
			groupVolGraph.setOption(this.options.groupVolGraph);
			groupCurrGraph.setOption(this.options.groupCurrGraph);
			monVolGraph.setOption(this.options.monVolGraph);
			monTmpGraph.setOption(this.options.monTmpGraph);
			monResGraph.setOption(this.options.monResGraph);
			groupVolGraph.setOption(options.groupVolGraph);
			groupCurrGraph.setOption(options.groupCurrGraph);
			monVolGraph.setOption(options.monVolGraph);
			monTmpGraph.setOption(options.monTmpGraph);
			monResGraph.setOption(options.monResGraph);
			this.setLegends();
			},
			setLegends: function() {
			monVolGraph.setLegend(this.monSelect);
			monTmpGraph.setLegend(this.monSelect);
			monResGraph.setLegend(this.monSelect);
			},
			monSelectChange: function() {
			this.setLegends();
			}
			},
			computed: {
			monOptions: function() {
			var result = [];
			for(var i=0; i<this.monCount; i++) {
			var text = '#'+(i+1);
			result.push({
			label: text,
			value: text,
			});
			}
			return result;
			},
			},
			mounted() {
			var self = this;
			// 设置电池组id
			this.searchParams.BattGroupId = getQueryString('BattGroupId');
			groupVolGraph = new EleGraphLine('groupVolGraph');
			groupCurrGraph = new EleGraphLine('groupCurrGraph');
			monVolGraph = new EleGraphLine('monVolGraph');
			monTmpGraph = new EleGraphLine('monTmpGraph');
			monResGraph = new EleGraphLine('monResGraph');
			this.monCount = getQueryString('MonCount');

			groupVolGraph = new EleGraphLinePlus('groupVolGraph');
			groupCurrGraph = new EleGraphLinePlus('groupCurrGraph');
			monVolGraph = new EleGraphLinePlus('monVolGraph');
			monTmpGraph = new EleGraphLinePlus('monTmpGraph');
			monResGraph = new EleGraphLinePlus('monResGraph');
			groupVolGraph.resize();
			// 初始化内容
			this.setOptions();
			@@ -335,13 +527,9 @@
			this.radioChange();

			// 窗口变化修改大小
			window.onresize = function() {
			groupVolGraph.resize();
			groupCurrGraph.resize();
			monVolGraph.resize();
			monTmpGraph.resize();
			monResGraph.resize();
			}
			window.addEventListener('resize', function() {
			self.resize();
			});
			}
			});
			</script>

			@@ -172,6 +172,180 @@
			}, 0);
			};


			//折线图
			function EleGraphLinePlus(id) {
			this.chart = echarts.init(document.getElementById(id));
			this.names = [];
			this.name = '';
			// 初始化
			this.init();
			}

			// 初始化图表
			EleGraphLinePlus.prototype.init = function() {
			var option = {};

			this.setOption(option);
			};

			// 设置图表的配置项
			EleGraphLinePlus.prototype.setOption = function(opt) {
			// 设置名称列表
			this.setNames(opt);

			// 基本配置项
			var option = {
			title: {
			text: '',
			x: 'center'
			},
			tooltip: {
			trigger: 'axis',
			confine: true,
			},
			dataZoom: [
			{
			start: 0,
			end: 5,
			handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
			handleSize: '80%',
			handleStyle: {
			color: '#fff',
			shadowBlur: 3,
			shadowColor: 'rgba(0, 0, 0, 0.6)',
			shadowOffsetX: 2,
			shadowOffsetY: 2
			}
			}
			],
			legend: this.getLegend(opt),
			grid: {
			left: '3%',
			right: '4%',
			bottom: 60,
			},
			xAxis: [{
			type: 'category',
			}],
			yAxis: [{
			type: 'value',
			min: function(data) {
			let min = data.min;
			if(min == Infinity) {
			return 0;
			}
			return Math.floor(min*0.9);
			},
			max: function(data) {
			let max = data.max;
			if(max == -Infinity) {
			max = 1;
			}
			return Math.ceil(max*1.01);
			}
			}],
			series: this.getSeries(opt)
			};

			// 设置配置项
			this.chart.setOption(option);
			};

			// 设置名称
			EleGraphLinePlus.prototype.setNames = function(opt) {
			// 未配置series
			if(!opt \|\| !opt.series) {
			this.names = [];
			return;
			}

			// 设置名称列表
			this.names = opt.series.map(function(item){
			return item.name;
			});
			};

			// 获取legend
			EleGraphLinePlus.prototype.getLegend = function(opt) {
			// 未配置series
			if(!opt \|\| !opt.legend) {
			return {
			show: false,
			};
			}
			var legend = opt.legend;
			legend.show = false;
			legend.data = this.names;
			var selected = {};
			this.names.forEach(function(item) {
			selected[item]=false;
			});

			// 默认全部不渲染
			legend.selected = selected;
			return opt.legend;
			};

			// 设置一条可见
			EleGraphLinePlus.prototype.setLegend = function(name) {
			// 关闭上一个显示的线条
			this.chart.dispatchAction({
			type: 'legendUnSelect',
			name: this.name
			});
			// 设置显示的线条
			this.chart.dispatchAction({
			type: 'legendSelect',
			name: name
			});
			// 存储线条
			this.name = name;
			}

			// 获取series
			EleGraphLinePlus.prototype.getSeries = function(opt) {
			// 未配置series
			if(!opt \|\| !opt.series) {
			return [];
			}
			// 设置配置项
			let series = opt.series.map(function(item){
			item.type="line";
			item.smooth=true;
			item.symbolSize=0;
			item.sampling='average';
			return item;
			});
			// 没有内容
			if(series.length == 0) {
			return [{
			name: '初始化内容',
			type: 'line',
			data: []
			}];
			}

			return series;
			}

			EleGraphLinePlus.prototype.appendData = function(list) {
			var self = this;
			list.forEach(function(item, index){
			self.chart.appendData({
			seriesIndex: index,
			data: item
			});
			});

			this.chart.resize();
			}

			// 重置
			EleGraphLinePlus.prototype.resize = function() {
			this.chart.resize();
			};

			//省-市-区县联动
			function LinkagePlus() {
			this.data= [];