<template>
|
<BaseCard size="medium" direction="left">
|
<template #content>
|
<el-scrollbar height="calc(49vh - var(--bevel-length-2))" always>
|
<div v-for="item in seriesList" :key="item.key">
|
<el-row
|
v-show="selectFactorType.includes(item.series.key)"
|
justify="space-between"
|
class="wrap"
|
>
|
<div class="flex-col m-r-4">
|
<div class="factor-name">{{ item.series.name }}</div>
|
<div class="factor-value">
|
{{ item.series.currentData }}
|
</div>
|
<div class="factor-unit">
|
{{ getUnit(item.series.label) }}
|
</div>
|
<!-- <div class="flex-col">
|
<div>min:{{ item.series.min }}</div>
|
<div>max:{{ item.series.max }}</div>
|
</div> -->
|
</div>
|
<RealTimeLineChart :model-value="item"></RealTimeLineChart>
|
</el-row>
|
</div>
|
</el-scrollbar>
|
</template>
|
</BaseCard>
|
</template>
|
<script>
|
import { FactorDatas } from '@/model/FactorDatas';
|
import { TYPE0 } from '@/constant/device-type';
|
import { checkboxOptions } from '@/constant/checkbox-options';
|
import { factorName } from '@/constant/factor-name';
|
import { factorUnit } from '@/constant/factor-unit';
|
|
export default {
|
props: {
|
loading: Boolean,
|
factorDatas: FactorDatas,
|
deviceType: {
|
type: String,
|
// type0: 车载或无人机; type1:无人船
|
default: TYPE0
|
},
|
selectFactorType: {
|
type: Array,
|
default: () => ['1', '2', '3']
|
},
|
// 折线图显示的最数据量
|
maxCount: {
|
type: Number,
|
default: 75
|
}
|
},
|
data() {
|
return {
|
xAxis: [],
|
allSeries: new Map(),
|
seriesList: []
|
};
|
},
|
computed: {
|
// factorTypes() {
|
// return checkboxOptions(this.deviceType);
|
// }
|
},
|
watch: {
|
factorDatas: {
|
handler() {
|
this.refreshData();
|
},
|
deep: false
|
}
|
},
|
methods: {
|
refreshData() {
|
this.refreshX();
|
this.refreshY();
|
},
|
refreshX() {
|
const newTimes = this.factorDatas.times
|
.lastCount(this.maxCount)
|
.map((v) => {
|
return v.split(' ')[1];
|
});
|
this.xAxis = this.xAxis.concat(newTimes).lastCount(this.maxCount);
|
},
|
refreshY() {
|
for (const key in this.factorDatas.factor) {
|
if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
|
const e = this.factorDatas.factor[key];
|
if (!this.allSeries.has(key)) {
|
this.allSeries.set(key, {
|
key: key,
|
name: factorName[e.factorName],
|
label: e.factorName,
|
type: 'line',
|
data: [],
|
showAllSymbol: true,
|
animationDelay: function (idx) {
|
return idx * 10;
|
}
|
});
|
}
|
if (e.datas.length == 0) {
|
continue;
|
}
|
const series = this.allSeries.get(key);
|
// 插入新数据
|
const newSeries = e.datas.map((v) => v.factorData);
|
series.data = series.data.concat(newSeries).lastCount(this.maxCount);
|
// 计算数据范围
|
const { min, max } = this.dataRange(series.data);
|
series.min = min;
|
series.max = max;
|
// 记录最新数据
|
series.currentData =
|
Math.round(series.data[series.data.length - 1] * 10) / 10;
|
}
|
}
|
this.toList();
|
},
|
series(key) {
|
return {
|
xAxis: this.xAxis,
|
// series: this.allSeries.get(key)
|
series: key
|
};
|
},
|
dataRange(dataList) {
|
let min, max;
|
dataList.forEach((e) => {
|
if (!min || min > e) {
|
min = e;
|
}
|
if (!max || max < e) {
|
max = e;
|
}
|
});
|
return { min, max };
|
},
|
toList() {
|
const list = [];
|
// for (const iterator of this.allSeries) {
|
// list.push({
|
// xAxis: this.xAxis,
|
// series: iterator[1]
|
// });
|
// }
|
checkboxOptions(this.deviceType).forEach((t) => {
|
if (this.allSeries.has(t.value)) {
|
list.push({
|
xAxis: this.xAxis,
|
series: this.allSeries.get(t.value)
|
});
|
}
|
});
|
this.seriesList = list;
|
},
|
// getScaleValue(label, value) {
|
// return (factorUnit[label].scale * value).toFixed();
|
// },
|
getUnit(label) {
|
// fixeme 2024.5.15 修复CO展示单位和原始数据不一致问题
|
return label == 'CO' ? 'μg/m³' : factorUnit[label].unit;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.wrap {
|
border-bottom: 1px solid rgba(255, 255, 255, 0.329);
|
}
|
|
.flex-col {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.factor-value {
|
font-weight: 600;
|
font-size: 20px;
|
}
|
|
.factor-name {
|
color: #23dad1;
|
}
|
|
.factor-unit {
|
/* font-size: ; */
|
}
|
</style>
|
