suixy
/
energy-visual-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
main
suixy 4 days ago
parent 7a82f2fb50
commit a00ec548b1
1 changed files with 233 additions and 76 deletions
Show Stats Download Patch File Download Diff File

309
src/views/board/index.vue
Unescape Escape View File

@ -1,46 +1,227 @@
<template>
<main class="board-page">
<div class="board-page">
<section class="board-device-stage">
<img class="board-device" src="@/assets/board/index/device.png" alt="" />
</section>
<section class="board-chart-panel" aria-label="数据图表">
<article class="board-card">
<header class="board-card-title">实时数据</header>
<div class="bar-chart" aria-hidden="true">
<span style="--value: 56%"></span>
<span style="--value: 78%"></span>
<span style="--value: 42%"></span>
<span style="--value: 88%"></span>
<span style="--value: 64%"></span>
<span style="--value: 72%"></span>
<span style="--value: 50%"></span>
<span style="--value: 82%"></span>
</div>
<header class="board-card-title">位移区间分布</header>
<div ref="intervalChartRef" class="interval-chart" />
</article>
<article class="board-card">
<header class="board-card-title">设备数据</header>
<svg class="line-chart" viewBox="0 0 420 120" role="img" aria-label="设备数据曲线图" preserveAspectRatio="none">
<defs>
<linearGradient id="deviceLine" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#61f1ff" />
<stop offset="100%" stop-color="#f9d56f" />
</linearGradient>
<linearGradient id="deviceArea" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#61f1ff" stop-opacity="0.28" />
<stop offset="100%" stop-color="#61f1ff" stop-opacity="0" />
</linearGradient>
</defs>
<path class="line-chart-grid" d="M0 28H420M0 58H420M0 88H420" />
<path class="line-chart-area" d="M0 82 C48 70 68 38 112 48 C158 58 172 96 218 72 C260 50 278 30 318 42 C358 54 372 82 420 56 L420 120 L0 120 Z" />
<path class="line-chart-path" d="M0 82 C48 70 68 38 112 48 C158 58 172 96 218 72 C260 50 278 30 318 42 C358 54 372 82 420 56" />
</svg>
<header class="board-card-title">位移对比</header>
<div ref="trendChartRef" class="trend-chart" />
</article>
</section>
</main>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import {
getDisplacementDistributionData,
getDisplacementTrendData,
type DisplacementDistributionPageVO,
type DisplacementTrendPageVO
} from '@/api/ems/report/displacementBoard';
import { useVibrationBoardQueryState } from '@/views/ems/report/vibrationBoard/components/useVibrationBoardQueryState';
import { getVibrationMetricOption, toNumber } from '@/views/ems/report/vibrationBoard/components/vibrationBoardShared';
const intervalChartRef = ref<HTMLElement>();
const trendChartRef = ref<HTMLElement>();
let intervalChart: echarts.ECharts | null = null;
let trendChart: echarts.ECharts | null = null;
let chartResizeObserver: ResizeObserver | null = null;
const { loadTree, buildQuery } = useVibrationBoardQueryState();
const distributionData = ref<DisplacementDistributionPageVO>({ intervalBuckets: [] });
const trendData = ref<DisplacementTrendPageVO>({ series: [] });
const trendPalette = ['#5b8ff9', '#36cfc9', '#f97316', '#8b5cf6', '#ef4444', '#10b981'];
const activeMetric = computed(() => getVibrationMetricOption(trendData.value.metricField || distributionData.value.metricField));
const renderIntervalChart = () => {
if (!intervalChartRef.value) {
return;
}
const intervalData = distributionData.value.intervalBuckets || [];
intervalChart ||= echarts.init(intervalChartRef.value);
if (!intervalData.length) {
intervalChart.clear();
return;
}
intervalChart.setOption(
{
color: ['#0ea5a4', '#38bdf8', '#60a5fa', '#facc15', '#fb923c', '#ef4444'],
tooltip: {
trigger: 'item',
formatter: (params: any) => `${params.name}<br/>样本数: <b>${params.value}</b><br/>占比: <b>${params.percent}%</b>`
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 0,
top: 'middle',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: 'rgba(226, 248, 255, 0.86)',
fontSize: 12
},
pageIconColor: 'rgba(97, 241, 255, 0.9)',
pageIconInactiveColor: 'rgba(226, 248, 255, 0.28)',
pageTextStyle: {
color: 'rgba(226, 248, 255, 0.72)'
}
},
series: [
{
name: '区间分布',
type: 'pie',
radius: ['42%', '72%'],
center: ['64%', '54%'],
roseType: 'radius',
itemStyle: {
borderRadius: 8,
borderColor: 'rgba(4, 18, 31, 0.92)',
borderWidth: 2
},
label: {
formatter: '{d}%',
color: 'rgba(226, 248, 255, 0.9)'
},
labelLine: {
lineStyle: {
color: 'rgba(226, 248, 255, 0.35)'
}
},
data: intervalData.map((item) => ({ name: item.label || '--', value: toNumber(item.count) }))
}
]
},
true
);
};
const renderTrendChart = () => {
if (!trendChartRef.value) {
return;
}
const series = trendData.value.series || [];
const unit = trendData.value.unit || activeMetric.value.unit;
trendChart ||= echarts.init(trendChartRef.value);
if (!series.length) {
trendChart.clear();
return;
}
trendChart.setOption(
{
color: series.map((_, index) => trendPalette[index % trendPalette.length]),
tooltip: {
trigger: 'axis',
formatter: (params: any[]) => {
const rows = params.map((item) => `${item.marker}${item.seriesName}: <b>${Number(item.value?.[1] ?? 0).toFixed(2)} ${unit}</b>`);
return [`<b>${params[0]?.axisValueLabel || '--'}</b>`, ...rows].join('<br/>');
}
},
legend: {
type: 'scroll',
top: 0,
right: 0,
data: series.map((item) => item.name || '--'),
textStyle: {
color: 'rgba(226, 248, 255, 0.86)'
},
pageIconColor: 'rgba(97, 241, 255, 0.9)',
pageIconInactiveColor: 'rgba(226, 248, 255, 0.28)',
pageTextStyle: {
color: 'rgba(226, 248, 255, 0.72)'
}
},
grid: { left: 44, right: 18, top: 36, bottom: 34 },
dataZoom: [{ type: 'inside', xAxisIndex: 0, filterMode: 'none' }],
xAxis: {
type: 'time',
axisLabel: {
color: 'rgba(226, 248, 255, 0.68)'
},
axisLine: {
lineStyle: { color: 'rgba(185, 240, 255, 0.18)' }
}
},
yAxis: {
type: 'value',
name: unit,
nameTextStyle: {
color: 'rgba(226, 248, 255, 0.72)'
},
splitLine: {
lineStyle: { type: 'dashed', color: 'rgba(185, 240, 255, 0.14)' }
},
axisLabel: {
color: 'rgba(226, 248, 255, 0.68)'
}
},
series: series.map((item) => ({
name: item.name || '--',
type: 'line',
smooth: true,
showSymbol: false,
connectNulls: true,
sampling: 'lttb',
lineStyle: { width: 2.4 },
emphasis: { focus: 'series' },
data: (item.points || []).map((point) => [point.time, toNumber(point.value)])
}))
},
true
);
};
const loadBoardChartData = async () => {
await loadTree();
const query = buildQuery();
const [distributionResponse, trendResponse] = await Promise.all([getDisplacementDistributionData(query), getDisplacementTrendData(query)]);
distributionData.value = distributionResponse.data || { intervalBuckets: [] };
trendData.value = trendResponse.data || { series: [] };
await nextTick();
renderIntervalChart();
renderTrendChart();
};
onMounted(async () => {
await nextTick();
await loadBoardChartData();
if (intervalChartRef.value || trendChartRef.value) {
chartResizeObserver = new ResizeObserver(() => {
intervalChart?.resize();
trendChart?.resize();
});
if (intervalChartRef.value) {
chartResizeObserver.observe(intervalChartRef.value);
}
if (trendChartRef.value) {
chartResizeObserver.observe(trendChartRef.value);
}
}
});
onBeforeUnmount(() => {
chartResizeObserver?.disconnect();
intervalChart?.dispose();
trendChart?.dispose();
chartResizeObserver = null;
intervalChart = null;
trendChart = null;
});
</script>
<style lang="scss" scoped>
.board-page {
position: fixed;
@ -50,17 +231,19 @@
flex-direction: column;
gap: 16px;
overflow: hidden;
width: 100vw;
height: 100vh;
padding: 24px 32px 28px;
background: url('@/assets/board/index/bg.jpg') center / cover no-repeat;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('@/assets/board/index/bg.jpg');
}
.board-device-stage {
display: flex;
flex: 1;
min-height: 0;
align-items: center;
justify-content: center;
width: 100%;
position: fixed;
width: 95vw;
height: 26.426vw;
top: 12%;
}
.board-device {
@ -72,22 +255,27 @@
}
.board-chart-panel {
height: calc(100vh - 12vh - 26.426vw - 6vh);
display: grid;
flex: 0 0 auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
width: calc(100vw - 64px);
margin: 0 auto;
position: fixed;
top: calc(12vh + 26.426vw + 3vh);
}
.board-card {
height: clamp(180px, 22vh, 280px);
height: 100%;
padding: 16px 20px 18px;
overflow: hidden;
border: 1px solid rgb(130 231 255 / 28%);
border-radius: 8px;
background: linear-gradient(180deg, rgb(8 29 47 / 62%), rgb(4 18 31 / 38%));
box-shadow: 0 18px 46px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 12%);
box-shadow:
0 18px 46px rgb(0 0 0 / 24%),
inset 0 1px 0 rgb(255 255 255 / 12%);
backdrop-filter: blur(8px);
}
@ -98,46 +286,15 @@
line-height: 1;
}
.bar-chart {
display: flex;
.interval-chart {
height: calc(100% - 20px);
align-items: end;
gap: 16px;
padding: 14px 8px 0;
border-bottom: 1px solid rgb(185 240 255 / 18%);
}
.bar-chart span {
flex: 1;
min-width: 12px;
height: var(--value);
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, #f9d56f 0%, #52e0ff 55%, rgb(82 224 255 / 35%) 100%);
box-shadow: 0 0 18px rgb(82 224 255 / 28%);
}
.line-chart {
width: 100%;
height: calc(100% - 26px);
margin-top: 8px;
}
.line-chart-grid {
fill: none;
stroke: rgb(185 240 255 / 12%);
stroke-width: 1;
}
.line-chart-area {
fill: url('#deviceArea');
}
.line-chart-path {
fill: none;
stroke: url('#deviceLine');
stroke-linecap: round;
stroke-width: 4;
filter: drop-shadow(0 0 8px rgb(97 241 255 / 52%));
.trend-chart {
width: 100%;
height: calc(100% - 26px);
margin-top: 8px;
}
@media (max-width: 768px) {
@ -161,8 +318,8 @@
transform: translateY(14px);
}
.bar-chart,
.line-chart {
.interval-chart,
.trend-chart {
height: calc(100% - 24px);
}
}

Write Preview
Loading…
Cancel
Save