<template>
<div>
<div class="app-container" style="position: absolute;top: 0px;">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="电池序列号" prop="bid">
<el-input
v-model="queryParams.bid"
placeholder="请输入电池序列号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="daterangeCreateAt"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item>
</el-form>
</div>
<div id="myChart" :style="{width: '100%', height: '750px', marginTop:'60px'}"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import { cellsList } from "@/api/log/bmsLog";
export default {
name: 'hello',
data () {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// gps日志表格数据
gpsLogList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10000,
bid: null
},
// 查询参数
daterangeCreateAt: [],
points: [],
zoom:4,
tempBats:[],
cellNums: [],
soc: [],
elecCurrent: [],
times: []
}
},
mounted(){
this.drawLine();
},
methods: {
/** 查询bms日志 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
getList() {
this.loading = true;
this.queryParams.params = {};
if(this.queryParams.bid===null){
alert("电池序列号为空")
return;
}
if (null != this.daterangeCreateAt && '' != this.daterangeCreateAt) {
this.queryParams.params["beginCreateAt"] = this.daterangeCreateAt[0];
this.queryParams.params["endCreateAt"] = this.daterangeCreateAt[1];
}else{
alert("开始或结束时间为空")
return;
}
cellsList(this.queryParams).then(response => {
if(response.data.cellNums !== undefined){
this.soc = response.data.soc
this.elecCurrent = response.data.elecCurrent
this.times = response.data.times
console.log(response.data)
for(var j=0;j<response.data.cellNums.length;j++){
var temp = new Array();
for(var i=0;i<response.data.cellNums[j].length;i++){
temp[i] = new Array(this.times[i],response.data.cellNums[j][i]);
}
this.cellNums[j] = temp
}
console.log(this.cellNums)
this.drawLine();
}else{
alert("暂无对应电池信息")
}
// this.cellNums = response.data.cellNums
// this.soc = response.data.soc
// this.elecCurrent = response.data.elecCurrent
// this.times = response.data.times
this.total = response.total;
this.loading = false;
});
},
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
var option = {
animation: true,
animationThreshold: 2000,
animationDuration: 1000,
animationEasing: "cubicOut",
animationDelay: 0,
animationDurationUpdate: 300,
animationEasingUpdate: "cubicOut",
animationDelayUpdate: 0,
color: [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83"
],
series: [
{
"type": "line",
"name": "SOC",
"connectNulls": false,
"yAxisIndex": 0,
"symbolSize": 4,
"showSymbol": false,
"smooth": false,
"clip": true,
"step": false,
"data": this.soc,
"hoverAnimation": true,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
},
"areaStyle": {
"opacity": 0
},
"zlevel": 0,
"z": 0,
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
},
{
"type": "line",
"name": "\u7535\u6d41",
"connectNulls": false,
"yAxisIndex": 2,
"symbolSize": 4,
"showSymbol": false,
"smooth": true,
"clip": true,
"step": false,
"data": this.elecCurrent,
"hoverAnimation": true,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
},
"areaStyle": {
"opacity": 0
},
"zlevel": 0,
"z": 0,
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
}
],
legend: [
{
"data": [
"SOC",
"\u7535\u6d41",
"cell1",
"cell2",
"cell3",
"cell4",
"cell5"
],
"selected": {
"SOC": true,
"\u7535\u6d41": true,
"cell1": true,
"cell2": true,
"cell3": true,
"cell4": true,
"cell5": true
},
"show": true,
"right": "50",
"top": "10",
"orient": "vertical",
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14,
"icon": "rect"
}
],
tooltip: {
show: true,
trigger: "axis",
triggerOn: "mousemove|click",
axisPointer: {
"type": "cross"
},
showContent: true,
alwaysShowContent: false,
showDelay: 0,
hideDelay: 100,
textStyle: {
"fontSize": 14
},
borderWidth: 0,
padding: 5
},
xAxis: [
{
"type": "category",
"name": "\u65f6\u95f4",
"show": true,
"scale": false,
"nameLocation": "start",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": null
}
],
yAxis: [
{
"name": "SOC",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
},
{
"type": "value",
"name": "\u7535\u538b",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"position": "right",
"offset": 0,
"splitNumber": 5,
"min": 2.5,
"max": 3.8,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
},
{
"type": "value",
"name": "\u7535\u6d41",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"position": "right",
"offset": 30,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
title: [
{
"text": "\u7535\u6c60\u66f2\u7ebf",
"left": "20",
"top": "20",
"padding": 5,
"itemGap": 10
}
],
toolbox: {
show: true,
orient: "vertical",
itemSize: 15,
itemGap: 10,
right: "0",
feature: {
"saveAsImage": {
"type": "png",
"backgroundColor": "auto",
"connectedBackgroundColor": "#fff",
"show": true,
"title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
"pixelRatio": 1
},
"restore": {
"show": true,
"title": "\u8fd8\u539f"
},
"dataView": {
"show": true,
"title": "\u6570\u636e\u89c6\u56fe",
"readOnly": false,
"lang": [
"\u6570\u636e\u89c6\u56fe",
"\u5173\u95ed",
"\u5237\u65b0"
],
"backgroundColor": "#fff",
"textareaColor": "#fff",
"textareaBorderColor": "#333",
"textColor": "#000",
"buttonColor": "#c23531",
"buttonTextColor": "#fff"
},
"dataZoom": {
"show": true,
"title": {
"zoom": "\u533a\u57df\u7f29\u653e",
"back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
},
"icon": {},
"xAxisIndex": false,
"yAxisIndex": false,
"filterMode": "filter"
},
"magicType": {
"show": true,
"type": [
"line",
"bar",
"stack",
"tiled"
],
"title": {
"line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
"bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
"stack": "\u5207\u6362\u4e3a\u5806\u53e0",
"tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
},
"icon": {}
},
"brush": {
"icon": {},
"title": {
"rect": "\u77e9\u5f62\u9009\u62e9",
"polygon": "\u5708\u9009",
"lineX": "\u6a2a\u5411\u9009\u62e9",
"lineY": "\u7eb5\u5411\u9009\u62e9",
"keep": "\u4fdd\u6301\u9009\u62e9",
"clear": "\u6e05\u9664\u9009\u62e9"
}
}
}
},
dataZoom: {
show: true,
type: "slider",
realtime: true,
start: 0,
end: 100,
orient: "horizontal",
zoomLock: false,
filterMode: "filter"
}
};
for(var i = 0; i < this.cellNums.length; i++){
option.series.push(
{
"type": "line",
"name": "cell"+(i+1),
"connectNulls": false,
"yAxisIndex": 1,
"symbolSize": 4,
"showSymbol": false,
"smooth": false,
"clip": true,
"step": false,
"data": this.cellNums[i],
"hoverAnimation": true,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
},
"areaStyle": {
"opacity": 0
},
"zlevel": 0,
"z": 0
}
)
}
myChart.setOption(option);
}
}
}
</script>
3638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
