<template>
|
<flex-layout no-bg>
|
<div class="chart-tools-wrapper">
|
<el-button size="mini" type="primary" @click="drawer=true">添加标准曲线</el-button>
|
</div>
|
<div class="flex-content-wrapper">
|
<div class="flex-content-item" v-for="item in charts" :key="item">
|
<line-chart :ref="item" :id="item" unit="V" no-full></line-chart>
|
</div>
|
</div>
|
<el-drawer
|
title="我是标题"
|
direction="btt"
|
:withHeader="false"
|
size="80%"
|
:visible.sync="drawer">
|
<flex-layout no-bg>
|
<div class="el-drawer-header" slot="header">
|
<el-button type="primary" size="mini" icon="el-icon-view" @click="viewLine">标准曲线</el-button>
|
<el-button type="primary" size="mini" icon="el-icon-refresh" @click="refreshPage">刷新</el-button>
|
</div>
|
<div class="el-drawer-content">
|
<el-table
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
height="100%"
|
:data="list"
|
@select="tblSelect"
|
@select-all="tblSelect">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
prop="monvolstd"
|
label="标称电压(V)"
|
min-width="150"
|
:resizable="false"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="moncapstd"
|
label="标称容量(AH)"
|
min-width="150"
|
:resizable="false"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="battproducer"
|
label="电池品牌"
|
min-width="150"
|
:resizable="false"
|
align="center"
|
sortable>
|
</el-table-column>
|
<el-table-column
|
prop="battmodel"
|
label="电池型号"
|
min-width="150"
|
:resizable="false"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="hourRate"
|
label="小时率"
|
min-width="150"
|
:resizable="false"
|
align="center">
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="flex-page-footer" slot="footer">
|
<el-pagination
|
size="mini"
|
:current-page="page.pageCurr"
|
:page-sizes="[1 , 10, 20, 30, 50, 100]"
|
:page-size="page.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="page.pageAll"
|
@current-change="currentChange"
|
@size-change="sizeChange"></el-pagination>
|
</div>
|
</flex-layout>
|
</el-drawer>
|
</flex-layout>
|
</template>
|
|
<script>
|
import LineChart from "@/components/chart/LineChart";
|
|
export default {
|
name: "standardLine",
|
components: {LineChart},
|
chartOption() {
|
return {
|
title: {
|
show: true,
|
text: "标准曲线(V)",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
},
|
appendToBody: true,
|
},
|
grid: {
|
left: '1%',
|
right: '1%',
|
bottom: '2%',
|
containLabel: true
|
},
|
series: [{
|
name: '单体电压',
|
data: []
|
}],
|
}
|
},
|
data() {
|
return {
|
drawer: false,
|
list: [],
|
charts: ['chart1'],
|
selectList: [],
|
page: {
|
pageCurr: 1,
|
pageSize: 10,
|
pageAll: 0,
|
},
|
}
|
},
|
methods: {
|
searchData() {
|
let searchParams = this.page;
|
let loading = this.$layer.loading();
|
this.$apis.dataTest.history.searchStandardLines(searchParams).then(res=>{
|
// 关闭等待框
|
this.$layer.close(loading);
|
// 格式化数据
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if(rs.code == 1) {
|
data = rs.data;
|
let _data = data[data.length-1];
|
// 设置数据总数
|
this.page.pageAll = _data.num;
|
}else {
|
this.page.pageCurr = 1;
|
this.page.pageAll = 0;
|
}
|
this.list = data.map(item=>{
|
item.hourRate = (item.note?(1/item.note).toHold(2):0)+"C";
|
return item;
|
});
|
}).catch(error=>{
|
// 关闭等待框
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
currentChange(value) {
|
this.page.pageCurr = value;
|
this.searchData();
|
},
|
sizeChange(value) {
|
this.page.pageCurr = 1;
|
this.page.pageSize = value;
|
this.searchData();
|
},
|
resize() {
|
let charts = this.charts;
|
for(let i=0; i<charts.length; i++) {
|
let chart = this.$refs[charts[i]][0];
|
if(chart) {
|
chart.resize();
|
}
|
}
|
},
|
setChartOption(list) {
|
this.charts = [];
|
this.$nextTick(()=>{
|
let options = list.map((item1, key)=>{
|
let id = 'chart'+key+'Num';
|
this.charts.push(id);
|
|
let chartOption = this.$options.chartOption();
|
let title = "单体电压（V）";
|
chartOption.series[0].data = item1.map(item2=>{
|
let hourRate = (item2.note?(1/item2.note).toHold(2):0)+"C";
|
title = "标称电压："+item2.monvolstd+"V; 标称容量："+item2.moncapstd+"AH; 电池品牌："
|
+item2.battproducer+"; 电池型号："+item2.battmodel;
|
return [item2.test_cap, item2.mon_vol]
|
});
|
chartOption.title.text = title;
|
return {
|
id: id,
|
option: chartOption
|
}
|
});
|
// 设置图表数据
|
this.$nextTick(()=>{
|
options.map(item=>{
|
this.$refs[item.id][0].setOption(item.option);
|
});
|
});
|
});
|
|
//this.$refs.standardLine.setOption(chartOption);
|
},
|
refreshPage() {
|
// 清空图表
|
|
// 查询数据
|
this.searchData();
|
},
|
tblSelect(data) {
|
this.selectList = data;
|
},
|
viewLine() {
|
let searchParams = this.selectList;
|
this.searchStandarLine(searchParams, 0, []);
|
},
|
searchStandarLine(searchParams, index, list) {
|
if(searchParams.length>4) {
|
this.$layer.msg('最多选择4条进行查看');
|
return;
|
}
|
if(searchParams.length == 0) {
|
this.$layer.msg("请选择要查看的标准曲线");
|
return;
|
}
|
// 获取到全部标准曲线后生成标准曲线
|
if(searchParams.length<=index) {
|
this.drawer = false;
|
this.setChartOption(list);
|
return;
|
}
|
let searchParam = searchParams[index];
|
searchParam.vol_type = 1;
|
this.$apis.dataTest.history.searchStandardLine(searchParam).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
if(rs.code == 1) {
|
list.push(rs.data);
|
}
|
// 查询
|
this.searchStandarLine(searchParams, ++index, list);
|
}).catch(error=>{
|
// 查询
|
this.searchStandarLine(searchParams, ++index, list);
|
});
|
},
|
},
|
mounted() {
|
// 初始化图表
|
setTimeout(() => {
|
this.$nextTick(() => {
|
this.resize();
|
});
|
}, 100);
|
|
// 查询表格数据
|
this.searchData();
|
|
window.addEventListener('resize', this.resize);
|
},
|
destroyed() {
|
window.removeEventListener('resize', this.resize);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.chart-tools-wrapper {
|
position: absolute;
|
top: 16px;
|
right: 16px;
|
z-index: 10;
|
}
|
|
.el-drawer-content {
|
height: 100%;
|
}
|
.flex-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
.flex-content-item {
|
flex: 1;
|
}
|
</style>
|
