修改指标越限明细样式

src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue

@@ -15,13 +15,13 @@ import { mainHeight } from '@/utils/layout'
 import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
 
 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 = mainHeight(0, 2)
+const pageHeight = ref(mainHeight(332))
 
 const dialogVisible: any = ref(false)
 
@@ -36,44 +36,35 @@ const echartList = ref()
 const init = () => {
     echartList.value = {
         title: {
-            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 + '<br/>'
-
-                // 遍历所有项目并累加到tooltipText中
-                params.forEach((item: any) => {
-                    // 将数值格式化为保留两位小数
-                    const formattedValue = Math.round(item.value[1] * 100) / 100
-                    tooltipText += `${item.marker} ${item.seriesName}: ${formattedValue}<br/>`
-                })
-
-                return tooltipText
-            }
-        },
-        xAxis: {
-            type: 'time',
-            axisLabel: {
-                formatter: {
-                    day: '{MM}-{dd}',
-                    month: '{MM}',
-                    year: '{yyyy}'
+            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]
+                    }
                 }
             }
         },
-
-        yAxis: [{}, {}],
+        xAxis: {
+            type: 'category',
+            data: []
+        },
+        yAxis: {
+            type: 'value',
+            name: '数值'
+        },
         grid: {
             left: '1%',
             right: '45px',
@@ -121,17 +112,12 @@ const initData = async (row: any) => {
 
             // 处理每条相位数据
             const seriesData = res.data.map((item: any) => {
-                const values = xAxisData.map((time: string, index: number) => {
-                    // 将传入的日期与时间拼接成完整的时间字符串
-                    const fullTime = `${row.time} ${time}`
-                    const value = parseFloat(item.value.split(',')[index]) || 0
-                    return [fullTime, value]
-                })
+                const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
 
                 return {
                     name: `${item.phasic}相`,
                     type: 'line',
-                    showSymbol: false,
+                    showSymbol: true,
                     smooth: true,
                     data: values,
                     itemStyle: {
@@ -144,17 +130,18 @@ const initData = async (row: any) => {
             })
 
             // 更新图表配置
+            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 = `监测点:${row.lineName}    时间:${row.time}    指标:${row.name}`
+    dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
     nextTick(() => {
         initData(row)
     })