You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
<template>
|
|
<div v-loading="loading" class="app-container">
|
|
<VibrationBoardFilter
|
|
:selection-label="queryForm.selectionLabel"
|
|
:time-range="daterangeRecordTime"
|
|
:sampling-interval="queryForm.samplingInterval"
|
|
:vibration-param="queryForm.vibrationParam"
|
|
@update:time-range="setTimeRange"
|
|
@update:sampling-interval="setSamplingInterval"
|
|
@update:vibration-param="setVibrationParam"
|
|
@query="handleQuery"
|
|
/>
|
|
|
|
<el-row :gutter="16" class="mt-4">
|
|
<el-col :span="6">
|
|
<VibrationBoardDeviceTree :loading="treeLoading" :tree-data="monitorTreeOptions" :tree-props="treeProps" @node-click="handleTreeNodeClick" />
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row :gutter="16">
|
|
<el-col :span="8"
|
|
><el-card
|
|
><div class="panel-title">采样记录数</div>
|
|
<div class="kpi-value">{{ toNumber(qualityData.sampleCount) }}</div></el-card
|
|
></el-col
|
|
>
|
|
<el-col :span="8"
|
|
><el-card
|
|
><div class="panel-title">覆盖率</div>
|
|
<div class="kpi-value">{{ formatPercent(toNumber(qualityData.coverageRate)) }}</div></el-card
|
|
></el-col
|
|
>
|
|
<el-col :span="8"
|
|
><el-card
|
|
><div class="panel-title">设备数量</div>
|
|
<div class="kpi-value">{{ toNumber(qualityData.deviceCount) }}</div></el-card
|
|
></el-col
|
|
>
|
|
</el-row>
|
|
<el-card class="mt-4"><template #header>各指标有效率</template><Chart ref="qualityChart" class="chart-lg" /></el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Chart from '@/components/Charts/Chart.vue';
|
|
import { getVibrationQualityData, type VibrationQualityPageVO } from '@/api/ems/report/vibrationBoard';
|
|
import VibrationBoardFilter from '../components/VibrationBoardFilter.vue';
|
|
import VibrationBoardDeviceTree from '../components/VibrationBoardDeviceTree.vue';
|
|
import { useVibrationBoardQueryState } from '../components/useVibrationBoardQueryState';
|
|
|
|
defineOptions({ name: 'VibrationBoardQuality' });
|
|
|
|
const qualityChart = ref<any>();
|
|
const {
|
|
loading,
|
|
treeLoading,
|
|
monitorTreeOptions,
|
|
treeProps,
|
|
daterangeRecordTime,
|
|
queryForm,
|
|
loadTree,
|
|
handleTreeNodeClick,
|
|
setTimeRange,
|
|
setSamplingInterval,
|
|
setVibrationParam,
|
|
buildQuery
|
|
} = useVibrationBoardQueryState();
|
|
const qualityData = ref<VibrationQualityPageVO>({ metricQualityItems: [] });
|
|
const toNumber = (value: number | string | undefined) => Number(value ?? 0);
|
|
const formatPercent = (value: number) => `${(Number(value || 0) * 100).toFixed(1)}%`;
|
|
|
|
const renderChart = () => {
|
|
qualityChart.value?.setData({
|
|
xAxis: { type: 'category', data: (qualityData.value.metricQualityItems || []).map((item) => item.label) },
|
|
yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: (qualityData.value.metricQualityItems || []).map((item) => Number((toNumber(item.validRate) * 100).toFixed(1))),
|
|
itemStyle: { color: '#5b8ff9' }
|
|
}
|
|
]
|
|
});
|
|
};
|
|
|
|
const handleQuery = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const { data } = await getVibrationQualityData(buildQuery());
|
|
qualityData.value = data || { metricQualityItems: [] };
|
|
await nextTick();
|
|
renderChart();
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await loadTree();
|
|
await handleQuery();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.panel-title {
|
|
font-weight: 600;
|
|
}
|
|
.kpi-value {
|
|
margin-top: 12px;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: #1f2329;
|
|
}
|
|
.chart-lg {
|
|
height: 420px;
|
|
}
|
|
</style>
|