<template>
|
<div class="params-container">
|
<el-row :gutter="layout.gutter">
|
<el-col :span="12" class="tbl-wrapper-dialog">
|
<flex-box size="mini" title="单体电压差折线图">
|
<div slot="tools" class="params-dialog-tools">
|
<div class="input-wrapper">
|
<el-input v-model="baseTime" size="mini" type="text">
|
<template slot="prepend">基准时间</template>
|
<template slot="append">分钟</template>
|
</el-input>
|
</div>
|
<el-button type="primary" size="mini" icon="el-icon-refresh" @click="formatData">更新</el-button>
|
</div>
|
<normal-lines ref="vol" unit="V"></normal-lines>
|
</flex-box>
|
</el-col>
|
<el-col :span="12" class="tbl-wrapper-dialog">
|
<flex-box size="mini" title="单体温度差折线图">
|
<normal-lines ref="temp" unit="℃"></normal-lines>
|
</flex-box>
|
</el-col>
|
</el-row>
|
<div class="form-footer">
|
<el-button type="primary" size="mini" @click="success">确定</el-button>
|
<el-button type="warning" size="mini" @click="close">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import FlexBox from "@/components/FlexBox";
|
import NormalLines from "@/components/myCharts/NormalLines";
|
import formatTime from "@/assets/js/tools/formatTime";
|
export default {
|
name: "DataDiffter",
|
components: {NormalLines, FlexBox},
|
times: [],
|
volSeries: [],
|
tempSeries: {},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
vol: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
temp: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
},
|
data() {
|
return {
|
layout: {
|
gutter: 8,
|
span: 12
|
},
|
baseTime: 2,
|
timeList: [],
|
};
|
},
|
methods: {
|
close() {
|
this.$emit("update:visible", false);
|
},
|
formatData() {
|
let vol = this.vol;
|
let temp = this.temp;
|
|
if(vol.length != 0) {
|
let times = [];
|
|
let flag = 0;
|
let seconds = this.baseTime*60;
|
// 获取时间轴(逻辑下方获取值的逻辑要一致)
|
vol[0].map((item, key)=>{
|
let reTime = seconds*flag;
|
let testTime = formatTime(item[0]);
|
if(testTime>=reTime) {
|
flag++;
|
times.push(item[0]);
|
}else if(key == (vol[0].length-1)) {
|
times.push(item[0]);
|
}
|
});
|
let volSeries = this.getSeries(vol);
|
let tempSeries = this.getSeries(temp);
|
|
// 配置项
|
let volOption = {
|
xData: times,
|
series: volSeries,
|
};
|
|
let tempOption = {
|
xData: times,
|
series: tempSeries,
|
};
|
|
this.$options.times = times;
|
this.$options.volSeries = volSeries;
|
this.$options.tempSeries = tempSeries;
|
|
this.$refs.vol.setData(volOption);
|
this.$refs.temp.setData(tempOption);
|
}
|
},
|
getSeries(data) {
|
return data.map((item, key)=>{
|
let dataList = this.getItemDataByTime(item, this.baseTime);
|
return {
|
name: "#"+(key+1),
|
type: 'line',
|
symbolSize: 0,
|
sampling: "average",
|
data: dataList,
|
}
|
});
|
},
|
getItemDataByTime(data, time) {
|
let list = [];
|
let seconds = time*60;
|
let flag = 0;
|
let baseValue = 0;
|
data.map((item,key)=>{
|
let reTime = seconds*flag;
|
let testTime = formatTime(item[0]);
|
if(testTime>=reTime) {
|
flag++;
|
if(flag == 1) {
|
baseValue = item[1];
|
}
|
list.push(item[1]);
|
}else if(key == (data.length-1)) {
|
list.push(item[1]);
|
if(flag == 0) {
|
baseValue = data[0][0];
|
}
|
}
|
});
|
baseValue = list[0];
|
return list.map((item, key)=>{
|
if(key == 0) {
|
return 0;
|
}else {
|
return (list[key]-baseValue).toHold(2);
|
}
|
});
|
},
|
success() {
|
let volList = this.$options.volSeries.map(item=>{
|
return item.data;
|
});
|
let tempList = this.$options.tempSeries.map(item=>{
|
return item.data;
|
});
|
let data = {
|
splitTime: this.baseTime,
|
mon_vol_compare_pic: this.$refs.vol.getDataURL(),
|
mon_temp_compare_pic: this.$refs.temp.getDataURL(),
|
time_compare_list: JSON.stringify(this.$options.times),
|
mon_vol_compare_list: JSON.stringify(volList),
|
mon_tmp_compare_list: JSON.stringify(tempList),
|
};
|
this.$emit('success', data);
|
},
|
},
|
mounted() {
|
this.formatData();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.params-container {
|
width: 1300px;
|
box-sizing: border-box;
|
padding: 8px;
|
background-color: #0d43a7;
|
}
|
.tbl-wrapper-dialog {
|
height: 420px;
|
}
|
.input-wrapper {
|
display: inline-block;
|
width: 230px;
|
margin-right: 8px;
|
}
|
</style>
|
