From e661974160bdaf9f7b7ea30dd890b6ae90dd163a Mon Sep 17 00:00:00 2001 From: wzclm <2855471171@qq.com> Date: Wed, 12 Mar 2025 21:04:35 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=8F=AF=E8=A7=86?= =?UTF-8?q?=E5=8C=96=E5=A4=A7=E5=B1=8F=E7=9A=84=E6=98=BE=E7=A4=BA=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LeftPanel/MiddleCard.vue | 122 ++++++++++++------ .../components/RightPanel/MiddleCard.vue | 97 ++++++++++---- .../screen/components/RightPanel/TopCard.vue | 2 +- 3 files changed, 156 insertions(+), 65 deletions(-) diff --git a/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue b/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue index abe5cd4..d38c3c7 100644 --- a/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue +++ b/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue @@ -92,37 +92,25 @@ const initChart = async () => { const option = { backgroundColor: 'transparent', tooltip: { - trigger: 'item' - }, - legend: { - orient: 'vertical', - left: '0%', - top: 'middle', - textStyle: { - color: '#fff', - fontSize: 14 - }, - itemGap: 20, - icon: 'circle', - itemWidth: 10, - itemHeight: 10, - formatter: function(name) { - return name - } + trigger: 'item', + formatter: '{b}: {c}' }, radar: { - center: ['65%', '50%'], - radius: '60%', + center: ['50%', '50%'], + radius: '65%', indicator: [], shape: 'circle', - splitNumber: 5, + splitNumber: 8, axisName: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 12 }, splitLine: { lineStyle: { - color: 'rgba(255, 255, 255, 0.1)' + color: 'rgba(255, 255, 255, 0.2)', + width: 2, + type: 'dashed', + dashOffset: 0 } }, splitArea: { @@ -132,8 +120,9 @@ const initChart = async () => { } }, axisLine: { + show: true, lineStyle: { - color: 'rgba(255, 255, 255, 0.1)' + color: 'rgba(255, 255, 255, 0.3)' } } }, @@ -142,6 +131,27 @@ const initChart = async () => { chart.setOption(option) + // 添加动画效果 + let angle = 0 + let dashOffset = 0 + const animate = () => { + angle = (angle + 0.5) % 360 + dashOffset = (dashOffset + 1) % 20 + + chart.setOption({ + radar: { + startAngle: angle, + splitLine: { + lineStyle: { + dashOffset: -dashOffset + } + } + } + }) + requestAnimationFrame(animate) + } + animate() + // 确保图表正确渲染 setTimeout(() => { if (chart) { @@ -183,14 +193,18 @@ const updateChart = () => { // 生成系列数据 const series = [{ type: 'radar', + animation: true, + animationDuration: 2000, + animationEasing: 'quadraticInOut', data: points.map(point => { const pointType = point.type const colors = { - water: ['#409EFF', '#36CE9E'], - air: ['#E6A23C', '#F56C6C'], - soil: ['#67C23A', '#95D475'] + water: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)'], + air: ['rgba(230, 162, 60, 1)', 'rgba(245, 108, 108, 0.1)'], + soil: ['rgba(103, 194, 58, 1)', 'rgba(149, 212, 117, 0.1)'], + default: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)'] } - const colorSet = colors[pointType] || colors.water + const colorSet = colors[pointType] || colors.default return { name: point.point, @@ -198,27 +212,36 @@ const updateChart = () => { const ind = point.indicators.find(i => i.name === indicator.name) return ind ? ind.value : 0 }), + symbol: 'circle', + symbolSize: 6, itemStyle: { - color: colorSet[0] + color: colorSet[0], + borderColor: '#fff', + borderWidth: 2, + shadowColor: colorSet[0], + shadowBlur: 10 + }, + lineStyle: { + color: colorSet[0], + width: 2, + type: [5, 10], + shadowColor: colorSet[0], + shadowBlur: 5 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colorSet[0] }, { offset: 1, color: colorSet[1] } ]), - opacity: 0.3 + opacity: 0.5 }, - lineStyle: { - width: 2 - }, - symbol: 'circle', - symbolSize: 6, emphasis: { - lineStyle: { - width: 4 + scale: true, + itemStyle: { + shadowBlur: 20 }, areaStyle: { - opacity: 0.5 + opacity: 0.8 } } } @@ -226,14 +249,34 @@ const updateChart = () => { }] chart.setOption({ - legend: { - data: points.map(item => item.point) - }, radar: { indicator: radarIndicators }, series: series }) + + // 添加呼吸动画 + let breatheEffect = 0 + const animate = () => { + breatheEffect = (breatheEffect + 1) % 100 + const opacity = 0.3 + Math.sin(breatheEffect * Math.PI / 50) * 0.2 + + series[0].data.forEach((item, index) => { + chart.setOption({ + series: [{ + data: series[0].data.map((dataItem, i) => ({ + ...dataItem, + areaStyle: { + ...dataItem.areaStyle, + opacity: i === index ? opacity : 0.3 + } + })) + }] + }) + }) + requestAnimationFrame(animate) + } + animate() } // 定时更新数据 @@ -369,6 +412,7 @@ onUnmounted(() => { background: rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 12px; + position: relative; .chart { height: 100%; diff --git a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue index 04e1347..80112f8 100644 --- a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue @@ -35,9 +35,9 @@ const initChart = async () => { }, grid: { top: '3%', - right: '5%', + right: '15%', bottom: '3%', - left: '15%', + left: '5%', containLabel: true }, xAxis: { @@ -115,7 +115,7 @@ const fetchIndicatorData = async () => { try { const res = await getAlertStatisticsByIndicator() if (res.success && res.data) { - // 将数据转换为图表所需格式 + // 将数据转换为图表所需格式，并限制显示数量为6个 const chartData = res.data .filter(item => item.indicator_name) .map(item => ({ @@ -128,20 +128,45 @@ const fetchIndicatorData = async () => { } })) .sort((a, b) => b.value - a.value) + .slice(0, 6) // 只显示前6个数据 // 更新图表配置 chart.setOption({ + grid: { + top: '8%', + right: '20%', + bottom: '8%', + left: '0%', + containLabel: true + }, yAxis: { - data: chartData.map(item => item.name) + data: chartData.map(item => item.name), + axisLabel: { + margin: 20, + fontSize: 14 + } }, series: [ { data: chartData, + barWidth: 12, + itemStyle: { + borderRadius: [0, 4, 4, 0] + }, + label: { + show: true, + position: 'right', + distance: 15, + color: '#fff', + fontSize: 14, + formatter: '{c}次' + }, markLine: { silent: true, symbol: ['none', 'none'], lineStyle: { - color: 'rgba(255, 255, 255, 0.3)' + color: 'rgba(255, 255, 255, 0.2)', + type: [5, 10] }, data: [ { @@ -153,55 +178,77 @@ const fetchIndicatorData = async () => { } } ] - }, - animationDelay: function(idx) { - return idx * 100 } } ] }) + + // 添加渐变动画效果 + let currentIndex = 0 + const animate = () => { + if (currentIndex >= chartData.length) { + currentIndex = 0 + } + + chart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: currentIndex + }) + + // 取消上一个高亮 + const lastIndex = (currentIndex - 1 + chartData.length) % chartData.length + chart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: lastIndex + }) + + currentIndex++ + setTimeout(animate, 2000) + } + animate() } } catch (error) { console.error('获取指标预警统计数据失败:', error) } - } // 获取指标颜色 const getIndicatorColor = (indicatorName) => { const colors = { '水体pH值': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#36CFFF' }, - { offset: 1, color: '#2861F5' } + { offset: 0, color: 'rgba(54, 207, 255, 1)' }, + { offset: 1, color: 'rgba(40, 97, 245, 0.8)' } ]), '溶解氧': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#4EF568' }, - { offset: 1, color: '#2AB256' } + { offset: 0, color: 'rgba(78, 245, 104, 1)' }, + { offset: 1, color: 'rgba(42, 178, 86, 0.8)' } ]), '盐度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#FFB72C' }, - { offset: 1, color: '#F5612A' } + { offset: 0, color: 'rgba(255, 183, 44, 1)' }, + { offset: 1, color: 'rgba(245, 97, 42, 0.8)' } ]), '水温': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#FF36D9' }, - { offset: 1, color: '#C92AF5' } + { offset: 0, color: 'rgba(255, 54, 217, 1)' }, + { offset: 1, color: 'rgba(201, 42, 245, 0.8)' } ]), '浊度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#36FFB0' }, - { offset: 1, color: '#2AF5A1' } + { offset: 0, color: 'rgba(54, 255, 176, 1)' }, + { offset: 1, color: 'rgba(42, 245, 161, 0.8)' } ]), 'PM2.5': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#7636FF' }, - { offset: 1, color: '#2A3CF5' } + { offset: 0, color: 'rgba(118, 54, 255, 1)' }, + { offset: 1, color: 'rgba(42, 60, 245, 0.8)' } ]), '氮氧化物': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#FF7636' }, - { offset: 1, color: '#F52A2A' } + { offset: 0, color: 'rgba(255, 118, 54, 1)' }, + { offset: 1, color: 'rgba(245, 42, 42, 0.8)' } ]) } return colors[indicatorName] || new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#36CFFF' }, - { offset: 1, color: '#2861F5' } + { offset: 0, color: 'rgba(54, 207, 255, 1)' }, + { offset: 1, color: 'rgba(40, 97, 245, 0.8)' } ]) } diff --git a/src/views/dashboard/screen/components/RightPanel/TopCard.vue b/src/views/dashboard/screen/components/RightPanel/TopCard.vue index 18b0df6..bd200ab 100644 --- a/src/views/dashboard/screen/components/RightPanel/TopCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/TopCard.vue @@ -40,7 +40,7 @@ const initChart = async () => { fontSize: 12 }, top: 0, - right: '5%', + right: '0%', itemWidth: 12, itemHeight: 12 },