|
|
|
@ -1,17 +1,17 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div v-loading="loading" class="app-container vibration-board-page">
|
|
|
|
<div v-loading="loading" class="app-container displacement-board-page">
|
|
|
|
<VibrationBoardFilter
|
|
|
|
<DisplacementBoardFilter
|
|
|
|
:selection-label="queryForm.selectionLabel"
|
|
|
|
:selection-label="queryForm.selectionLabel"
|
|
|
|
:time-range="daterangeRecordTime"
|
|
|
|
:time-range="daterangeRecordTime"
|
|
|
|
:sampling-interval="queryForm.samplingInterval"
|
|
|
|
:sampling-interval="queryForm.samplingInterval"
|
|
|
|
:vibration-param="queryForm.vibrationParam"
|
|
|
|
:vibration-param="queryForm.vibrationParam"
|
|
|
|
@update:time-range="setTimeRange"
|
|
|
|
@update:time-range="setTimeRange"
|
|
|
|
@update:sampling-interval="setSamplingInterval"
|
|
|
|
@update:sampling-interval="setSamplingInterval"
|
|
|
|
@update:vibration-param="setVibrationParam"
|
|
|
|
@update:vibration-param="setDisplacementParam"
|
|
|
|
@query="handleQuery"
|
|
|
|
@query="handleQuery"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="16" class="mt-4 vibration-grid">
|
|
|
|
<el-row :gutter="16" class="mt-4 displacement-grid">
|
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
|
<el-card shadow="never" class="kpi-card">
|
|
|
|
<el-card shadow="never" class="kpi-card">
|
|
|
|
<div class="kpi-label">采样记录数</div>
|
|
|
|
<div class="kpi-label">采样记录数</div>
|
|
|
|
@ -42,7 +42,7 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="16" class="mt-4 vibration-grid">
|
|
|
|
<el-row :gutter="16" class="mt-4 displacement-grid">
|
|
|
|
<el-col :xs="24" :sm="12" :xl="6" v-for="item in overviewData.metricCards || []" :key="item.field">
|
|
|
|
<el-col :xs="24" :sm="12" :xl="6" v-for="item in overviewData.metricCards || []" :key="item.field">
|
|
|
|
<el-card shadow="never" class="metric-card" :style="{ borderTop: `4px solid ${metricColorMap[item.field || ''] || '#5b8ff9'}` }">
|
|
|
|
<el-card shadow="never" class="metric-card" :style="{ borderTop: `4px solid ${metricColorMap[item.field || ''] || '#5b8ff9'}` }">
|
|
|
|
<div class="kpi-label">{{ item.label }}</div>
|
|
|
|
<div class="kpi-label">{{ item.label }}</div>
|
|
|
|
@ -55,12 +55,12 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="16" class="mt-4 vibration-grid">
|
|
|
|
<el-row :gutter="16" class="mt-4 displacement-grid">
|
|
|
|
<el-col :xs="24" :lg="7" :xl="6">
|
|
|
|
<el-col :xs="24" :lg="7" :xl="6">
|
|
|
|
<VibrationBoardDeviceTree :loading="treeLoading" :tree-data="monitorTreeOptions" :tree-props="treeProps" @node-click="handleTreeNodeClick" />
|
|
|
|
<DisplacementBoardDeviceTree :loading="treeLoading" :tree-data="monitorTreeOptions" :tree-props="treeProps" @node-click="handleTreeNodeClick" />
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :xs="24" :lg="17" :xl="18">
|
|
|
|
<el-col :xs="24" :lg="17" :xl="18">
|
|
|
|
<el-row :gutter="16" class="vibration-grid">
|
|
|
|
<el-row :gutter="16" class="displacement-grid">
|
|
|
|
<el-col :xs="24" :xl="12">
|
|
|
|
<el-col :xs="24" :xl="12">
|
|
|
|
<el-card shadow="never" class="chart-card">
|
|
|
|
<el-card shadow="never" class="chart-card">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
@ -69,7 +69,7 @@
|
|
|
|
<div class="card-title">仪表盘总览</div>
|
|
|
|
<div class="card-title">仪表盘总览</div>
|
|
|
|
<div class="card-subtitle">围绕位移关键统计值做快速巡检，适合先判断当前风险边界，再决定是否深入排查。</div>
|
|
|
|
<div class="card-subtitle">围绕位移关键统计值做快速巡检，适合先判断当前风险边界，再决定是否深入排查。</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<HelpButton title="振动总览" :content="OVERVIEW_HELP" />
|
|
|
|
<HelpButton title="位移总览" :content="OVERVIEW_HELP" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<div ref="gaugeChartRef" class="chart-container-lg" />
|
|
|
|
<div ref="gaugeChartRef" class="chart-container-lg" />
|
|
|
|
@ -103,23 +103,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
import { getDisplacementOverviewData as getVibrationOverviewData, type VibrationOverviewPageVO } from '@/api/ems/report/displacementBoard';
|
|
|
|
import { getDisplacementOverviewData, type DisplacementOverviewPageVO } from '@/api/ems/report/displacementBoard';
|
|
|
|
import HelpButton from '../components/HelpButton.vue';
|
|
|
|
import HelpButton from '../components/DisplacementHelpButton.vue';
|
|
|
|
import VibrationBoardFilter from '../components/VibrationBoardFilter.vue';
|
|
|
|
import DisplacementBoardFilter from '../components/DisplacementBoardFilter.vue';
|
|
|
|
import VibrationBoardDeviceTree from '../components/VibrationBoardDeviceTree.vue';
|
|
|
|
import DisplacementBoardDeviceTree from '../components/DisplacementBoardDeviceTree.vue';
|
|
|
|
import { OVERVIEW_HELP } from '../components/helpContent';
|
|
|
|
import { OVERVIEW_HELP } from '../components/helpContent';
|
|
|
|
import { useChartResize } from '../components/useChartResize';
|
|
|
|
import { useChartResize } from '../components/useChartResize';
|
|
|
|
import { useVibrationBoardQueryState } from '../components/useVibrationBoardQueryState';
|
|
|
|
import { useDisplacementBoardQueryState } from '../components/useDisplacementBoardQueryState';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
buildCategoryDataZoom,
|
|
|
|
buildCategoryDataZoom,
|
|
|
|
formatMetricValue,
|
|
|
|
formatMetricValue,
|
|
|
|
formatPercentValue,
|
|
|
|
formatPercentValue,
|
|
|
|
getVibrationMetricOption,
|
|
|
|
getDisplacementMetricOption,
|
|
|
|
toNumber,
|
|
|
|
toNumber,
|
|
|
|
vibrationMetricOptions
|
|
|
|
displacementMetricOptions
|
|
|
|
} from '../components/vibrationBoardShared';
|
|
|
|
} from '../components/displacementBoardShared';
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'VibrationBoardOverview' });
|
|
|
|
defineOptions({ name: 'DisplacementBoardOverview' });
|
|
|
|
|
|
|
|
|
|
|
|
const gaugeChartRef = ref<HTMLElement>();
|
|
|
|
const gaugeChartRef = ref<HTMLElement>();
|
|
|
|
const rankChartRef = ref<HTMLElement>();
|
|
|
|
const rankChartRef = ref<HTMLElement>();
|
|
|
|
@ -137,13 +137,13 @@ const {
|
|
|
|
handleTreeNodeClick,
|
|
|
|
handleTreeNodeClick,
|
|
|
|
setTimeRange,
|
|
|
|
setTimeRange,
|
|
|
|
setSamplingInterval,
|
|
|
|
setSamplingInterval,
|
|
|
|
setVibrationParam,
|
|
|
|
setDisplacementParam,
|
|
|
|
buildQuery
|
|
|
|
buildQuery
|
|
|
|
} = useVibrationBoardQueryState();
|
|
|
|
} = useDisplacementBoardQueryState();
|
|
|
|
|
|
|
|
|
|
|
|
const overviewData = ref<VibrationOverviewPageVO>({ metricCards: [], gaugeItems: [], deviceRanks: [] });
|
|
|
|
const overviewData = ref<DisplacementOverviewPageVO>({ metricCards: [], gaugeItems: [], deviceRanks: [] });
|
|
|
|
const metricColorMap = Object.fromEntries(vibrationMetricOptions.map((item) => [item.field, item.color]));
|
|
|
|
const metricColorMap = Object.fromEntries(displacementMetricOptions.map((item) => [item.field, item.color]));
|
|
|
|
const activeMetric = computed(() => getVibrationMetricOption(overviewData.value.metricField || queryForm.value.vibrationParam));
|
|
|
|
const activeMetric = computed(() => getDisplacementMetricOption(overviewData.value.metricField || queryForm.value.vibrationParam));
|
|
|
|
|
|
|
|
|
|
|
|
const buildGaugeCenters = (count: number) => {
|
|
|
|
const buildGaugeCenters = (count: number) => {
|
|
|
|
if (count <= 1) {
|
|
|
|
if (count <= 1) {
|
|
|
|
@ -179,7 +179,7 @@ const renderCharts = () => {
|
|
|
|
formatter: (params: any) => `${params.seriesName}<br/>当前值: <b>${formatMetricValue(params.value)} ${unit}</b>`
|
|
|
|
formatter: (params: any) => `${params.seriesName}<br/>当前值: <b>${formatMetricValue(params.value)} ${unit}</b>`
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: gaugeItems.map((item, index) => {
|
|
|
|
series: gaugeItems.map((item, index) => {
|
|
|
|
const gaugeColor = vibrationMetricOptions[index]?.color || currentMetricColor;
|
|
|
|
const gaugeColor = displacementMetricOptions[index]?.color || currentMetricColor;
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
name: item.name,
|
|
|
|
name: item.name,
|
|
|
|
type: 'gauge',
|
|
|
|
type: 'gauge',
|
|
|
|
@ -361,7 +361,7 @@ const renderCharts = () => {
|
|
|
|
const handleQuery = async () => {
|
|
|
|
const handleQuery = async () => {
|
|
|
|
loading.value = true;
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const { data } = await getVibrationOverviewData(buildQuery());
|
|
|
|
const { data } = await getDisplacementOverviewData(buildQuery());
|
|
|
|
overviewData.value = data || { metricCards: [], gaugeItems: [], deviceRanks: [] };
|
|
|
|
overviewData.value = data || { metricCards: [], gaugeItems: [], deviceRanks: [] };
|
|
|
|
await nextTick();
|
|
|
|
await nextTick();
|
|
|
|
// 先等 DOM 完成栅格重排，再按最新容器尺寸重画图表，避免首次进入时出现裁切。
|
|
|
|
// 先等 DOM 完成栅格重排，再按最新容器尺寸重画图表，避免首次进入时出现裁切。
|
|
|
|
@ -371,16 +371,18 @@ const handleQuery = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
onMounted(() => {
|
|
|
|
await loadTree();
|
|
|
|
void Promise.all([loadTree(), handleQuery()]);
|
|
|
|
await handleQuery();
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '../components/vibrationBoardReport.scss';
|
|
|
|
@import '../components/displacementBoardReport.scss';
|
|
|
|
|
|
|
|
|
|
|
|
.kpi-metric {
|
|
|
|
.kpi-metric {
|
|
|
|
font-size: clamp(18px, 1.6vw, 24px);
|
|
|
|
font-size: clamp(18px, 1.6vw, 24px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
