From ddc8f81196b86b5970c5fd9763aab62b98561ff7 Mon Sep 17 00:00:00 2001 From: guanj Date: Tue, 18 Nov 2025 14:54:52 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dailyTrendChart.vue | 112 +++++++++--------- .../cockpit/exceedanceLevel/index.vue | 2 +- 2 files changed, 54 insertions(+), 60 deletions(-) diff --git a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue index c761d21..513bd04 100644 --- a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue +++ b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue @@ -2,7 +2,7 @@
- +
@@ -13,15 +13,15 @@ import MyEchart from '@/components/echarts/MyEchart.vue' import { useConfig } from '@/stores/config' import { mainHeight } from '@/utils/layout' import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit' - +import { yMethod } from '@/utils/echartMethod' const prop = defineProps({ - width: { type: [String, Number]}, - height: { type: [String, Number]}, - timeKey: { type: [String, Number]}, + width: { type: [String, Number] }, + height: { type: [String, Number] }, + timeKey: { type: [String, Number] }, timeValue: { type: Object } }) -const pageHeight = ref(mainHeight(332)) +const pageHeight = mainHeight(0, 2) const dialogVisible: any = ref(false) @@ -36,57 +36,45 @@ const echartList = ref() const init = () => { echartList.value = { title: { - text: dialogText.value, - textStyle: { - fontSize: 14, - rich: { - lineName: { - color: '#333', - fontSize: 14 - }, - timeLabel: { - color: '#333', - fontSize: 14, - padding: [0, 0, 0, 10] - }, - name: { - color: '#333', - fontSize: 14, - padding: [0, 0, 0, 10] - } - } + text: dialogText.value + }, + legend: { + itemWidth: 20, + itemHeight: 20, + itemStyle: { opacity: 0 }, //去圆点 + right: 70 + }, + tooltip: { + trigger: 'axis', + formatter: (params: any) => { + if (!params || params.length === 0) return '' + + // 使用第一个项目的轴标签作为时间标题 + let tooltipText = params[0].axisValueLabel + '
' + + // 遍历所有项目并累加到tooltipText中 + params.forEach((item: any) => { + // 将数值格式化为保留两位小数 + const formattedValue = Math.round(item.value[1] * 100) / 100 + tooltipText += `${item.marker} ${item.seriesName}: ${formattedValue}
` + }) + + return tooltipText } }, xAxis: { - type: 'category', - data: [] - }, - yAxis: { - type: 'value', - name: '数值' - }, - grid: { - left: '1%', - right: '45px', - bottom: '40px', - top: '15%', - containLabel: true - }, - dataZoom: [ - { - type: 'inside', - height: 13, - start: 0, - bottom: '20px', - end: 100 - }, - { - start: 0, - height: 13, - bottom: '20px', - end: 100 + type: 'time', + axisLabel: { + formatter: { + day: '{MM}-{dd}', + month: '{MM}', + year: '{yyyy}' + } } - ], + }, + + yAxis: {}, + options: { series: [] } @@ -98,6 +86,7 @@ const initData = async (row: any) => { if (res.data && res.data.length > 0) { // 重新初始化图表 init() + let [min, max] = yMethod(res.data.map((item: any) => item.value.split(',')).flat()) // 从第一条数据中提取时间作为x轴数据 const firstItem = res.data[0] @@ -112,12 +101,17 @@ const initData = async (row: any) => { // 处理每条相位数据 const seriesData = res.data.map((item: any) => { - const values = item.value.split(',').map((v: string) => parseFloat(v) || 0) + const values = xAxisData.map((time: string, index: number) => { + // 将传入的日期与时间拼接成完整的时间字符串 + const fullTime = `${row.time} ${time}` + const value = parseFloat(item.value.split(',')[index]) || 0 + return [fullTime, value] + }) return { name: `${item.phasic}相`, type: 'line', - showSymbol: true, + showSymbol: false, smooth: true, data: values, itemStyle: { @@ -128,20 +122,20 @@ const initData = async (row: any) => { } } }) - + echartList.value.yAxis.max = max + echartList.value.yAxis.min = min // 更新图表配置 - echartList.value.xAxis.data = xAxisData echartList.value.options.series = seriesData + // 注意：使用时间轴时不需要设置 xAxis.data } }) } - onMounted(() => {}) const open = async (row: any) => { dialogVisible.value = true dialogTitle.value = row.name + '日趋势图' - dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}` + dialogText.value = `监测点名称:${row.lineName}_越限时间:${row.time}_指标名称:${row.name}` nextTick(() => { initData(row) }) diff --git a/src/components/cockpit/exceedanceLevel/index.vue b/src/components/cockpit/exceedanceLevel/index.vue index 10c72dc..fac8fd7 100644 --- a/src/components/cockpit/exceedanceLevel/index.vue +++ b/src/components/cockpit/exceedanceLevel/index.vue @@ -119,7 +119,7 @@ const tableStore: any = new TableStore({ } }, { - title: '发生日期', + title: '越限时间', field: 'time', minWidth: '60', render: 'customTemplate',