style:设备运行参数分析-图表效果优化

main
黄伟杰 3 weeks ago
parent d7fcc01b69
commit 5a42cca0c7

@ -59,7 +59,13 @@
/> />
<div v-loading="chartLoading"> <div v-loading="chartLoading">
<el-empty v-if="!selectedParam" description="请选择左侧参数" /> <el-empty v-if="!selectedParam" description="请选择左侧参数" />
<EChart v-else :key="chartRenderKey" :options="chartOption" height="70vh" /> <el-empty v-else-if="chartState === 'empty'" description="暂无数据" />
<EChart
v-else-if="chartState === 'ready'"
:key="chartRenderKey"
:options="chartOption"
height="70vh"
/>
</div> </div>
</ContentWrap> </ContentWrap>
</el-col> </el-col>
@ -120,6 +126,7 @@ const selectedModelId = ref<number | undefined>(undefined)
const selectedParam = ref<DeviceTreeNode | null>(null) const selectedParam = ref<DeviceTreeNode | null>(null)
const chartLoading = ref(false) const chartLoading = ref(false)
const chartState = ref<'idle' | 'loading' | 'empty' | 'ready'>('idle')
const chartXAxis = ref<string[]>([]) const chartXAxis = ref<string[]>([])
const chartSeries = ref<{ name: string; data: Array<number | null> }[]>([]) const chartSeries = ref<{ name: string; data: Array<number | null> }[]>([])
const chartRenderKey = ref(0) const chartRenderKey = ref(0)
@ -251,6 +258,7 @@ const loadTree = async () => {
selectedParam.value = null selectedParam.value = null
selectedDeviceId.value = undefined selectedDeviceId.value = undefined
selectedModelId.value = undefined selectedModelId.value = undefined
chartState.value = 'idle'
chartXAxis.value = [] chartXAxis.value = []
chartSeries.value = [] chartSeries.value = []
} }
@ -300,6 +308,7 @@ const fetchChart = async () => {
return date.includes(':') ? date : `${date} ${suffix}` return date.includes(':') ? date : `${date} ${suffix}`
} }
chartState.value = 'loading'
chartLoading.value = true chartLoading.value = true
resetChartData() resetChartData()
try { try {
@ -313,6 +322,7 @@ const fetchChart = async () => {
if (!rows.length) { if (!rows.length) {
chartXAxis.value = [] chartXAxis.value = []
chartSeries.value = [] chartSeries.value = []
chartState.value = 'empty'
return return
} }
@ -356,8 +366,11 @@ const fetchChart = async () => {
const values = keys.map((k) => toNumber(firstRow[k])) const values = keys.map((k) => toNumber(firstRow[k]))
chartSeries.value = [{ name: param?.label || '参数', data: values }] chartSeries.value = [{ name: param?.label || '参数', data: values }]
} }
chartState.value = chartXAxis.value.length && chartSeries.value.length ? 'ready' : 'empty'
} catch { } catch {
message.error('获取图表数据失败') message.error('获取图表数据失败')
chartState.value = 'idle'
} finally { } finally {
chartLoading.value = false chartLoading.value = false
} }

Loading…
Cancel
Save