<template>
|
<div class="res-line-wrapper">
|
<div class="res-line-times">
|
<flex-box no-header size="mini">
|
<div class="checkbox-wrapper">
|
<div class="checkbox-wrapper-header">
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
</div>
|
<div class="checkbox-group-wrapper">
|
<el-checkbox-group v-model="checkedTimes" @change="handleCheckedTimesChange">
|
<div class="checkbox-item" v-for="item in times" :key="item">
|
<el-checkbox :label="item">{{item}}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</flex-box>
|
</div>
|
<div class="res-line-content">
|
<flex-box no-header size="mini">
|
<normal-lines ref="line"></normal-lines>
|
</flex-box>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import FlexBox from "@/components/FlexBox";
|
import NormalLines from "@/components/myCharts/NormalLines";
|
export default {
|
name: "resLineContrast",
|
components: {
|
NormalLines,
|
FlexBox
|
},
|
props: {
|
list: {
|
type: Array,
|
default() {
|
return []
|
},
|
},
|
updateTime: {
|
type: Number,
|
default: 0,
|
},
|
active: {
|
type: String,
|
default: ""
|
}
|
},
|
data() {
|
return {
|
checkedTimes: [],
|
times: [],
|
checkAll: false,
|
isIndeterminate: false,
|
standardResData: [],
|
}
|
},
|
watch: {
|
updateTime() {
|
this.init();
|
},
|
active() {
|
this.$refs.line.resize();
|
}
|
},
|
methods: {
|
init() {
|
this.times = this.list.filter(item=>{
|
return !item.isStandard;
|
}).map(item=>{
|
return item.time;
|
});
|
// 初始化标准内阻值
|
let standardResInfo = this.list.filter(item=>{
|
return item.isStandard;
|
});
|
this.standardResData = standardResInfo.length!=0?standardResInfo[0].data:[];
|
},
|
handleCheckAllChange(val) {
|
let times = this.times.map(item=>{
|
return item;
|
});
|
this.checkedTimes = val ? times : [];
|
this.isIndeterminate = false;
|
this.setLineOption(this.checkedTimes);
|
},
|
handleCheckedTimesChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === this.times.length;
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.times.length;
|
this.setLineOption(this.checkedTimes);
|
},
|
setLineOption(times) {
|
let list = this.list;
|
let standardResData = this.standardResData;
|
let series = times.map(item=>{
|
let tmp = {
|
type: "line",
|
name: item,
|
data: []
|
};
|
for(let i=0; i<list.length; i++) {
|
let item1 = list[i];
|
if(item1.time == item) {
|
tmp.data = item1.data;
|
break;
|
}
|
}
|
if(standardResData.length != 0) {
|
tmp.data = tmp.data.map((value, key)=>{
|
let standardValue = standardResData[key];
|
console.log(standardValue);
|
return standardValue?(value-standardValue):value;
|
});
|
}
|
return tmp;
|
});
|
let xData = [];
|
if(series.length != 0) {
|
xData = series[0].data.map((item, key)=> {
|
return "#"+(key+1);
|
});
|
this.$refs.line.setData({
|
xData: xData,
|
series: series
|
})
|
}else {
|
this.$refs.line.clear();
|
this.$refs.line.setData({
|
xData: [],
|
series: [{
|
type: 'line',
|
data: []
|
}]
|
});
|
}
|
}
|
},
|
mounted() {
|
this.setLineOption(this.checkedTimes);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.res-line-wrapper {
|
display: flex;
|
height: 100%;
|
}
|
.res-line-times {
|
padding: 0 0 0 8px;
|
}
|
.res-line-content {
|
flex: 1;
|
padding: 0 8px;
|
}
|
.checkbox-item {
|
padding-bottom: 8px;
|
}
|
.checkbox-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
min-width: 190px;
|
}
|
.checkbox-wrapper-header {
|
padding: 8px 16px;
|
}
|
.checkbox-group-wrapper {
|
flex: 1;
|
overflow-y: scroll;
|
padding: 0 16px;
|
}
|
</style>
|
