<template>
|
<flex-layout class="container" 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";
|
import { searchStandardLine, searchStandardLines } from "./js/history";
|
|
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 loading = this.$layer.loading();
|
searchStandardLines({
|
pageNum: this.page.pageCurr,
|
pageSize: this.page.pageSize,
|
})
|
.then((res) => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
// 格式化数据
|
res = res.data;
|
let total = 0;
|
let data = [];
|
if (res.code) {
|
data = res.data.list;
|
total = res.data.total;
|
}
|
this.pageAll = total;
|
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.testCap, item2.monVol];
|
});
|
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 = {
|
...searchParam,
|
monCapStd: searchParam.monCapStd * 1 + "",
|
monVolStd: searchParam.monVolStd * 1 + "",
|
};
|
searchStandardLine(searchParam)
|
.then((res) => {
|
res = res.data;
|
if (res.code) {
|
list.push(res.data);
|
}
|
// 查询
|
this.searchStandarLine(searchParams, ++index, list);
|
})
|
.catch((error) => {
|
// 查询
|
this.searchStandarLine(searchParams, ++index, list);
|
});
|
},
|
activeFN () {
|
this.resize();
|
}
|
},
|
mounted() {
|
// 初始化图表
|
// setTimeout(() => {
|
// this.$nextTick(() => {
|
// this.resize();
|
// });
|
// }, 100);
|
|
// 查询表格数据
|
this.searchData();
|
|
window.addEventListener("resize", this.resize);
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.resize);
|
},
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
position: relative;
|
}
|
.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>
|
