大屏数据实时
This commit is contained in:
fengerli
@ -3,130 +3,178 @@
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'
|
||||
import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
getMonthlyAlarmStatistics({}).then((res) => {
|
||||
const monthlyData = res.data.monthlyStatistics || {};
|
||||
// 提取1-12月数据并转为数字
|
||||
const alarmData = [
|
||||
monthlyData.m1,
|
||||
monthlyData.m2,
|
||||
monthlyData.m3,
|
||||
monthlyData.m4,
|
||||
monthlyData.m5,
|
||||
monthlyData.m6,
|
||||
monthlyData.m7,
|
||||
monthlyData.m8,
|
||||
monthlyData.m9,
|
||||
monthlyData.m10,
|
||||
monthlyData.m11,
|
||||
monthlyData.m12
|
||||
].map(Number);
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
const maxValue = Math.max(...alarmData);
|
||||
const maxIndex = alarmData.indexOf(maxValue);
|
||||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
myChart = echarts.init(chartRef.value);
|
||||
updateChartData();
|
||||
window.addEventListener('resize', handleResize);
|
||||
};
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!myChart) return;
|
||||
getMonthlyAlarmStatistics({}).then((res) => {
|
||||
const monthlyData = res.data.monthlyStatistics || {};
|
||||
// 提取1-12月数据并转为数字
|
||||
const alarmData = [
|
||||
monthlyData.m1,
|
||||
monthlyData.m2,
|
||||
monthlyData.m3,
|
||||
monthlyData.m4,
|
||||
monthlyData.m5,
|
||||
monthlyData.m6,
|
||||
monthlyData.m7,
|
||||
monthlyData.m8,
|
||||
monthlyData.m9,
|
||||
monthlyData.m10,
|
||||
monthlyData.m11,
|
||||
monthlyData.m12
|
||||
].map(Number);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: months,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
const maxValue = Math.max(...alarmData);
|
||||
const maxIndex = alarmData.indexOf(maxValue);
|
||||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: months,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0, '30%']
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: alarmData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
showSymbol: true,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#22E1DB',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(34,225,219, 0.6)' },
|
||||
{ offset: 1, color: 'rgba(34,225,219, 0)' }
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
return '#22E1DB';
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0, '30%']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: alarmData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
showSymbol: true,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#22E1DB',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(34,225,219, 0.6)' },
|
||||
{ offset: 1, color: 'rgba(34,225,219, 0)' }
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
fontSize: 12,
|
||||
return '#22E1DB';
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params: any) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
fontSize: 12,
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
});
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.error('获取月度报警统计数据失败:', err);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每300秒（5分钟
|
||||
dataTimer = setInterval(updateChartData, 300000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
startDataTimer();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.4vh;
|
||||
|
||||
Reference in New Issue
Block a user