| | |
|---|
| | | <!DOCTYPE html>
|
|---|
| | | <html lang="en">
|
|---|
| | | <head>
|
|---|
| | | <meta charset="UTF-8">
|
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| | | <title>历史实时数据</title>
|
|---|
| | | <link rel="stylesheet" href="../element-ui/theme-chalk/index.css">
|
|---|
| | | <link rel="stylesheet" href="../element-ui/css/common.css">
|
|---|
| | | <style>
|
|---|
| | | .vh130 {
|
|---|
| | | height: calc(100vh - 120px);
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <div id="elementApp" v-loading="loading">
|
|---|
| | | <div class="ele-filter-container">
|
|---|
| | | <div class="ele-filter-radio-group">
|
|---|
| | | <el-radio-group |
|---|
| | | 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="30">近一个月</el-radio-button>
|
|---|
| | | <el-radio-button label="7">近7天</el-radio-button>
|
|---|
| | | <el-radio-button label="1">近24小时</el-radio-button>
|
|---|
| | | </el-radio-group>
|
|---|
| | | <el-popover
|
|---|
| | | placement="top-start"
|
|---|
| | | trigger="click">
|
|---|
| | | <div class="time-group">
|
|---|
| | | <el-date-picker
|
|---|
| | | v-model="timeRange"
|
|---|
| | | @change="timeRangeChange"
|
|---|
| | | type="datetimerange"
|
|---|
| | | range-separator="至"
|
|---|
| | | start-placeholder="开始日期"
|
|---|
| | | end-placeholder="结束日期"
|
|---|
| | | :default-time="['00:00:00', '23:59:59']"
|
|---|
| | | :clearable="false"
|
|---|
| | | :editable="false"></el-date-picker>
|
|---|
| | | </el-date-picker>
|
|---|
| | | </div>
|
|---|
| | | <el-button size="medium" slot="reference">{{filter.txt}} <i class="el-icon-date"></i></el-button>
|
|---|
| | | </el-popover>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="ele-app-content">
|
|---|
| | | <el-tabs value="groupVolGraph" @tab-click="tabClick">
|
|---|
| | | <el-tab-pane name="groupVolGraph" label="组端电压">
|
|---|
| | | <div class="ele-graph-container vh130">
|
|---|
| | | <div class="ele-graph" id="groupVolGraph"></div>
|
|---|
| | | </div>
|
|---|
| | | </el-tab-pane>
|
|---|
| | | <el-tab-pane name="groupCurrGraph" label="组端电流">
|
|---|
| | | <div class="ele-graph-container vh130">
|
|---|
| | | <div class="ele-graph" id="groupCurrGraph"></div>
|
|---|
| | | </div>
|
|---|
| | | </el-tab-pane>
|
|---|
| | | <el-tab-pane name="monVolGraph" label="单体电压">
|
|---|
| | | <div class="ele-graph-container vh130">
|
|---|
| | | <div class="ele-graph" id="monVolGraph"></div>
|
|---|
| | | </div>
|
|---|
| | | </el-tab-pane>
|
|---|
| | | <el-tab-pane name="monTmpGraph" label="单体温度">
|
|---|
| | | <div class="ele-graph-container vh130">
|
|---|
| | | <div class="ele-graph" id="monTmpGraph"></div>
|
|---|
| | | </div>
|
|---|
| | | </el-tab-pane>
|
|---|
| | | <el-tab-pane name="monResGraph" label="单体内阻">
|
|---|
| | | <div class="ele-graph-container vh130">
|
|---|
| | | <div class="ele-graph" id="monResGraph"></div>
|
|---|
| | | </div>
|
|---|
| | | </el-tab-pane>
|
|---|
| | | </el-tabs>
|
|---|
| | | </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/common.js"></script>
|
|---|
| | | <script>
|
|---|
| | | // 页面中的echarts
|
|---|
| | | var groupVolGraph,
|
|---|
| | | groupCurrGraph,
|
|---|
| | | 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: {
|
|---|
| | | groupVolGraph: {
|
|---|
| | | title: {
|
|---|
| | | text: '组端电压折线图'
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | data: []
|
|---|
| | | },
|
|---|
| | | series: []
|
|---|
| | | },
|
|---|
| | | groupCurrGraph: {
|
|---|
| | | title: {
|
|---|
| | | text: '组端电流折线图'
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | data: []
|
|---|
| | | },
|
|---|
| | | series: []
|
|---|
| | | },
|
|---|
| | | monVolGraph: {
|
|---|
| | | title: {
|
|---|
| | | text: '单体电压折线图'
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | data: []
|
|---|
| | | },
|
|---|
| | | series: []
|
|---|
| | | },
|
|---|
| | | monTmpGraph: {
|
|---|
| | | title: {
|
|---|
| | | text: '单体温度折线图'
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | data: []
|
|---|
| | | },
|
|---|
| | | series: []
|
|---|
| | | },
|
|---|
| | | monResGraph: {
|
|---|
| | | title: {
|
|---|
| | | text: '单体内阻折线图'
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | data: []
|
|---|
| | | },
|
|---|
| | | series: []
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | timeRangeChange: function() {
|
|---|
| | | // 消除单选
|
|---|
| | | if(!this.filter.timeType != -1) {
|
|---|
| | | this.filter.timeType = -1;
|
|---|
| | | }
|
|---|
| | | // 获取时间段
|
|---|
| | | const startTime = this.timeRange[1].format("yyyy-MM-dd hh:mm:ss"); |
|---|
| | | const endTime = this.timeRange[0].format("yyyy-MM-dd hh:mm:ss");
|
|---|
| | | this.filter.txt = endTime+'至'+startTime;
|
|---|
| | | // 设置时间段
|
|---|
| | | this.setRangeTime(startTime, endTime);
|
|---|
| | | // 根据查询条件获取数据
|
|---|
| | | this.search();
|
|---|
| | | },
|
|---|
| | | radioChange: function() {
|
|---|
| | | // 消除日期时间段
|
|---|
| | | if(this.timeRange.length != 0) {
|
|---|
| | | this.filter.txt = '选择日期';
|
|---|
| | | this.timeRange = [];
|
|---|
| | | }
|
|---|
| | | // 获取选中日期
|
|---|
| | | const date = new Date();
|
|---|
| | | date.setTime(date.getTime() - 3600 * 1000 * 24 * this.filter.timeType);
|
|---|
| | | // 获取时间段
|
|---|
| | | const startTime = new Date().format("yyyy-MM-dd hh:mm:ss");
|
|---|
| | | const endTime = date.format("yyyy-MM-dd hh:mm:ss");
|
|---|
| | | // 设置时间段
|
|---|
| | | this.setRangeTime(startTime, endTime);
|
|---|
| | | // 根据查询条件获取数据
|
|---|
| | | this.search();
|
|---|
| | | },
|
|---|
| | | setRangeTime: function(startTime, endTime) {
|
|---|
| | | this.searchParams.recrod_time1 = startTime;
|
|---|
| | | this.searchParams.recrod_time = endTime;
|
|---|
| | | },
|
|---|
| | | tabClick: function(params) {
|
|---|
| | | // 根据标签name,重置图表大小
|
|---|
| | | switch(params.name) {
|
|---|
| | | 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;
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | search: function() {
|
|---|
| | | var self = this;
|
|---|
| | | // 开启等待框
|
|---|
| | | this.loading = true;
|
|---|
| | | // 请求后台
|
|---|
| | | $.ajax({
|
|---|
| | | type: 'post',
|
|---|
| | | async: true,
|
|---|
| | | url: 'Batt_realdataAction!serchByCondition',
|
|---|
| | | data: 'json='+JSON.stringify(this.searchParams),
|
|---|
| | | 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'
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | // 格式化数据
|
|---|
| | | self.formatData(data);
|
|---|
| | | },
|
|---|
| | | complete: function() {
|
|---|
| | | self.loading = false;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | },
|
|---|
| | | formatData: function(data) {
|
|---|
| | | console.log(data);
|
|---|
| | | var dates = []; // 日期
|
|---|
| | | var groupVol = [{
|
|---|
| | | name: '组端电压',
|
|---|
| | | type: 'line',
|
|---|
| | | data: []
|
|---|
| | | }];
|
|---|
| | | var groupCurr = [{
|
|---|
| | | name: '组端电流',
|
|---|
| | | type: 'line',
|
|---|
| | | data: []
|
|---|
| | | }];
|
|---|
| | | 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;
|
|---|
| | | dates.push(_data.recrod_time);
|
|---|
| | | groupVol[0].data.push(_data.group_vol);
|
|---|
| | | groupCurr[0].data.push(_data.group_curr);
|
|---|
| | | }
|
|---|
| | | // 设置单体信息
|
|---|
| | | if(typeof monVol[_data.mon_num - 1] != 'object') {
|
|---|
| | | // 单体电压
|
|---|
| | | monVol[_data.mon_num - 1] = {
|
|---|
| | | name: '#'+_data.mon_num,
|
|---|
| | | type: 'line',
|
|---|
| | | data: []
|
|---|
| | | };
|
|---|
| | | // 单体温度
|
|---|
| | | monTmp[_data.mon_num - 1] = {
|
|---|
| | | name: '#'+_data.mon_num,
|
|---|
| | | type: 'line',
|
|---|
| | | data: []
|
|---|
| | | };
|
|---|
| | | // 单体内阻
|
|---|
| | | monRes[_data.mon_num - 1] = {
|
|---|
| | | name: '#'+_data.mon_num,
|
|---|
| | | type: 'line',
|
|---|
| | | data: []
|
|---|
| | | };
|
|---|
| | | }
|
|---|
| | | // 单体电压
|
|---|
| | | monVol[_data.mon_num - 1].data.push(_data.mon_vol);
|
|---|
| | | // 单体温度
|
|---|
| | | monTmp[_data.mon_num - 1].data.push(_data.mon_tmp);
|
|---|
| | | // 单体内阻
|
|---|
| | | monRes[_data.mon_num - 1].data.push(_data.mon_res);
|
|---|
| | | }
|
|---|
| | | // 设置组端电压
|
|---|
| | | this.options.groupVolGraph.xAxis.data = dates;
|
|---|
| | | this.options.groupVolGraph.series = groupVol;
|
|---|
| | | // 设置组端电流
|
|---|
| | | this.options.groupCurrGraph.xAxis.data = dates;
|
|---|
| | | this.options.groupCurrGraph.series = groupCurr;
|
|---|
| | | // 设置单体电压
|
|---|
| | | this.options.monVolGraph.xAxis.data = dates;
|
|---|
| | | this.options.monVolGraph.series = monVol;
|
|---|
| | | // 设置单体温度
|
|---|
| | | this.options.monTmpGraph.xAxis.data = dates;
|
|---|
| | | this.options.monTmpGraph.series = monTmp;
|
|---|
| | | // 设置单体内阻
|
|---|
| | | this.options.monResGraph.xAxis.data = dates;
|
|---|
| | | this.options.monResGraph.series = monRes;
|
|---|
| | | // 设置图表的配置项
|
|---|
| | | this.setOptions();
|
|---|
| | | },
|
|---|
| | | 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);
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | // 设置电池组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');
|
|---|
| | | groupVolGraph.resize();
|
|---|
| | | // 初始化内容
|
|---|
| | | this.setOptions();
|
|---|
| | | // 初始化查询
|
|---|
| | | this.radioChange();
|
|---|
| | | |
|---|
| | | // 窗口变化修改大小
|
|---|
| | | window.onresize = function() {
|
|---|
| | | groupVolGraph.resize();
|
|---|
| | | groupCurrGraph.resize();
|
|---|
| | | monVolGraph.resize();
|
|---|
| | | monTmpGraph.resize();
|
|---|
| | | monResGraph.resize();
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| | | </body>
|
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>历史实时数据</title> |
|---|
| | | <link rel="stylesheet" href="../element-ui/theme-chalk/index.css"> |
|---|
| | | <link rel="stylesheet" href="../element-ui/css/common.css"> |
|---|
| | | <style> |
|---|
| | | .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> |
|---|
| | | <div id="elementApp" v-loading="loading"> |
|---|
| | | <div class="ele-filter-container"> |
|---|
| | | <div class="ele-filter-radio-group"> |
|---|
| | | <el-radio-group |
|---|
| | | 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="30">近一个月</el-radio-button> |
|---|
| | | <el-radio-button label="7">近7天</el-radio-button> |
|---|
| | | <el-radio-button label="1">近24小时</el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | <el-popover |
|---|
| | | placement="top-start" |
|---|
| | | trigger="click"> |
|---|
| | | <div class="time-group"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="timeRange" |
|---|
| | | @change="timeRangeChange" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | :default-time="['00:00:00', '23:59:59']" |
|---|
| | | :clearable="false" |
|---|
| | | :editable="false"></el-date-picker> |
|---|
| | | </el-date-picker> |
|---|
| | | </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 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> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane name="groupCurrGraph" label="组端电流"> |
|---|
| | | <div class="ele-graph-container vh130"> |
|---|
| | | <div class="ele-graph" id="groupCurrGraph"></div> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane name="monVolGraph" label="单体电压"> |
|---|
| | | <div class="ele-graph-container vh130"> |
|---|
| | | <div class="ele-graph" id="monVolGraph"></div> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane name="monTmpGraph" label="单体温度"> |
|---|
| | | <div class="ele-graph-container vh130"> |
|---|
| | | <div class="ele-graph" id="monTmpGraph"></div> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane name="monResGraph" label="单体内阻"> |
|---|
| | | <div class="ele-graph-container vh130"> |
|---|
| | | <div class="ele-graph" id="monResGraph"></div> |
|---|
| | | </div> |
|---|
| | | </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.js"></script> |
|---|
| | | <script type="text/javascript" src="../element-ui/js/common.js"></script> |
|---|
| | | <script> |
|---|
| | | // 页面中的echarts |
|---|
| | | var groupVolGraph, |
|---|
| | | groupCurrGraph, |
|---|
| | | monVolGraph, |
|---|
| | | monTmpGraph, |
|---|
| | | monResGraph; |
|---|
| | | var options = { |
|---|
| | | groupVolGraph: { |
|---|
| | | title: { |
|---|
| | | text: '组端电压折线图' |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | }], |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | }, |
|---|
| | | series: [] |
|---|
| | | }, |
|---|
| | | groupCurrGraph: { |
|---|
| | | title: { |
|---|
| | | text: '组端电流折线图' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | series: [] |
|---|
| | | }, |
|---|
| | | monVolGraph: { |
|---|
| | | title: { |
|---|
| | | text: '单体电压折线图' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | show: true, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | series: [] |
|---|
| | | }, |
|---|
| | | monTmpGraph: { |
|---|
| | | title: { |
|---|
| | | text: '单体温度折线图' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | show: true, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | series: [] |
|---|
| | | }, |
|---|
| | | monResGraph: { |
|---|
| | | 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() { |
|---|
| | | // 消除单选 |
|---|
| | | if(!this.filter.timeType != -1) { |
|---|
| | | this.filter.timeType = -1; |
|---|
| | | } |
|---|
| | | // 获取时间段 |
|---|
| | | const startTime = this.timeRange[1].format("yyyy-MM-dd hh:mm:ss"); |
|---|
| | | const endTime = this.timeRange[0].format("yyyy-MM-dd hh:mm:ss"); |
|---|
| | | this.filter.txt = endTime+'至'+startTime; |
|---|
| | | // 设置时间段 |
|---|
| | | this.setRangeTime(startTime, endTime); |
|---|
| | | // 根据查询条件获取数据 |
|---|
| | | this.loopSearch(); |
|---|
| | | }, |
|---|
| | | radioChange: function() { |
|---|
| | | // 消除日期时间段 |
|---|
| | | if(this.timeRange.length != 0) { |
|---|
| | | this.filter.txt = '选择日期'; |
|---|
| | | this.timeRange = []; |
|---|
| | | } |
|---|
| | | // 获取选中日期 |
|---|
| | | const date = new Date(); |
|---|
| | | date.setTime(date.getTime() - 3600 * 1000 * 24 * this.filter.timeType); |
|---|
| | | // 获取时间段 |
|---|
| | | const startTime = new Date().format("yyyy-MM-dd hh:mm:ss"); |
|---|
| | | const endTime = date.format("yyyy-MM-dd hh:mm:ss"); |
|---|
| | | // 设置时间段 |
|---|
| | | this.setRangeTime(startTime, endTime); |
|---|
| | | // 根据查询条件获取数据 |
|---|
| | | this.loopSearch(); |
|---|
| | | }, |
|---|
| | | setRangeTime: function(startTime, endTime) { |
|---|
| | | this.searchParams.recrod_time1 = startTime; |
|---|
| | | this.searchParams.recrod_time = endTime; |
|---|
| | | }, |
|---|
| | | tabClick: function(params) { |
|---|
| | | // 根据标签name,重置图表大小 |
|---|
| | | switch(params.name) { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | resize: function() { |
|---|
| | | var self = this; |
|---|
| | | 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(times[index]), |
|---|
| | | dataType: 'json', |
|---|
| | | success: function(res) { |
|---|
| | | var rs = JSON.parse(res.result); |
|---|
| | | var data = []; |
|---|
| | | if(rs.code == 1) { |
|---|
| | | data = rs.data; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 初始化加载加载 |
|---|
| | | if(index == 0) { |
|---|
| | | // 格式化数据 |
|---|
| | | self.formatData(data); |
|---|
| | | }else { |
|---|
| | | // 格式化添加的数据 |
|---|
| | | self.formatAppendData(data); |
|---|
| | | //console.log(data); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | complete: function() { |
|---|
| | | self.search(times, ++index); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | formatData: function(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 = []; // 单体电压 |
|---|
| | | 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].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') { |
|---|
| | | // 单体电压 |
|---|
| | | 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.recrod_time, _data.mon_vol]); |
|---|
| | | // 单体温度 |
|---|
| | | monTmp[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_tmp]); |
|---|
| | | // 单体内阻 |
|---|
| | | monRes[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_res]); |
|---|
| | | } |
|---|
| | | // 设置组端电压 |
|---|
| | | options.groupVolGraph.series = groupVol; |
|---|
| | | // 设置组端电流 |
|---|
| | | options.groupCurrGraph.series = groupCurr; |
|---|
| | | |
|---|
| | | // 设置单体电压 |
|---|
| | | options.monVolGraph.series = monVol; |
|---|
| | | // 设置单体温度 |
|---|
| | | options.monTmpGraph.series = monTmp; |
|---|
| | | // 设置单体内阻 |
|---|
| | | 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(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'); |
|---|
| | | 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(); |
|---|
| | | // 初始化查询 |
|---|
| | | this.radioChange(); |
|---|
| | | |
|---|
| | | // 窗口变化修改大小 |
|---|
| | | window.addEventListener('resize', function() { |
|---|
| | | self.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
