You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.8 KiB
115 lines
2.8 KiB
<template>
|
|
<el-card class="box-card">
|
|
<el-empty description="暂无数据" v-if="noData"></el-empty>
|
|
<div id="realtimeContainer"></div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, defineExpose } from 'vue';
|
|
import { Line } from '@antv/g2plot';
|
|
|
|
const show = ref(false);
|
|
const noData = ref(true);
|
|
let bar = null;
|
|
|
|
// 设置图表
|
|
onMounted(() => {
|
|
show.value = true;
|
|
noData.value = false;
|
|
});
|
|
|
|
// 设置图表
|
|
const setDate = data => {
|
|
noData.value = false;
|
|
if (bar) {
|
|
bar.destroy();
|
|
}
|
|
bar = new Line('realtimeContainer', {
|
|
data,
|
|
padding: 'auto',
|
|
xField: 'time',
|
|
yField: 'value',
|
|
seriesField: 'category',
|
|
slider: {
|
|
start: 0.1,
|
|
end: 0.2,
|
|
},
|
|
height: 700,
|
|
// smooth: true,
|
|
point: {
|
|
size: 2,
|
|
shape: 'circular',
|
|
style: {
|
|
fill: 'white',
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
});
|
|
|
|
bar.render();
|
|
};
|
|
|
|
// 处理数据
|
|
const changeDate = value => {
|
|
if (!value.length) return;
|
|
const arr = [];
|
|
value.forEach(element => {
|
|
const item = { ...element };
|
|
|
|
const so2Item = { category: 'SO2' };
|
|
const saltItem = { category: '盐分' };
|
|
const environmentTemperatureItem = { category: '环温' };
|
|
const environmentHumidityItem = { category: '环湿' };
|
|
const deviceTemperatureItem = { category: '机温' };
|
|
const deviceHumidityItem = { category: '机湿' };
|
|
const corrosion1Item = { category: '腐流1' };
|
|
const corrosion2Item = { category: '腐流2' };
|
|
const corrosion3Item = { category: '腐流3' };
|
|
const corrosion4Item = { category: '腐流4' };
|
|
|
|
so2Item.time = item.time;
|
|
so2Item.value = item.so2;
|
|
arr.push(so2Item);
|
|
|
|
saltItem.time = item.time;
|
|
saltItem.value = item.salt;
|
|
arr.push(saltItem);
|
|
|
|
environmentTemperatureItem.time = item.time;
|
|
environmentTemperatureItem.value = item.environmentTemperature;
|
|
arr.push(environmentTemperatureItem);
|
|
|
|
environmentHumidityItem.time = item.time;
|
|
environmentHumidityItem.value = item.environmentHumidity;
|
|
arr.push(environmentHumidityItem);
|
|
|
|
deviceTemperatureItem.time = item.time;
|
|
deviceTemperatureItem.value = item.deviceTemperature;
|
|
arr.push(deviceTemperatureItem);
|
|
|
|
deviceHumidityItem.time = item.time;
|
|
deviceHumidityItem.value = item.deviceHumidity;
|
|
arr.push(deviceHumidityItem);
|
|
|
|
corrosion1Item.time = item.time;
|
|
corrosion1Item.value = item.corrosion1;
|
|
arr.push(corrosion1Item);
|
|
|
|
corrosion2Item.time = item.time;
|
|
corrosion2Item.value = item.corrosion2;
|
|
arr.push(corrosion2Item);
|
|
|
|
corrosion3Item.time = item.time;
|
|
corrosion3Item.value = item.corrosion3;
|
|
arr.push(corrosion3Item);
|
|
|
|
corrosion4Item.time = item.time;
|
|
corrosion4Item.value = item.corrosion4;
|
|
arr.push(corrosion4Item);
|
|
});
|
|
setDate(arr);
|
|
};
|
|
|
|
defineExpose({ changeDate });
|
|
</script>
|
|
|