From 157bf7559c87b3639888f72f4b6740e1d92441bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Tue, 4 Nov 2025 15:37:22 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E6=9B=B4=E6=96=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E9=A2=9C=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=BA=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修改多个组件的颜色变量和背景色，从深色主题调整为浅色主题 更新图表组件背景色和文本颜色，优化Y轴范围计算 调整主页标题样式和卡片组件颜色 --- apps/l2/src/components/TrackMeasure/index.vue | 119 +++++++++++++----- apps/l2/src/views/components/CurrentTime.vue | 4 +- apps/l2/src/views/components/HomeMain.vue | 19 +-- apps/l2/src/views/components/MiniTable.vue | 4 +- .../src/views/l2/report/components/body.vue | 4 +- apps/l2/src/views/l2/track/rect.vue | 4 +- 6 files changed, 110 insertions(+), 44 deletions(-) diff --git a/apps/l2/src/components/TrackMeasure/index.vue b/apps/l2/src/components/TrackMeasure/index.vue index 37a31a5..ab6b89f 100644 --- a/apps/l2/src/components/TrackMeasure/index.vue +++ b/apps/l2/src/components/TrackMeasure/index.vue @@ -113,22 +113,27 @@ export default { // 根据当前图表类型获取配置 getChartOption() { + // 计算Y轴的合适范围，使数据变化更明显 + const yAxisRange = this.calculateYAxisRange(); + const baseOption = { - backgroundColor: 'transparent', + backgroundColor: '#ffffff', // 图表背景色改为白色 tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: this.chartData[this.currentChart].time, - axisLine: { lineStyle: { color: '#666' } }, - axisLabel: { color: '#b0b0b0' } + axisLine: { lineStyle: { color: '#999' } }, + axisLabel: { color: '#666' } }, yAxis: { type: 'value', - axisLine: { lineStyle: { color: '#666' } }, - axisLabel: { color: '#b0b0b0' }, - splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } } + min: yAxisRange.min, + max: yAxisRange.max, + axisLine: { lineStyle: { color: '#999' } }, + axisLabel: { color: '#666' }, + splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.05)' } } } }; @@ -139,7 +144,7 @@ export default { ...baseOption, legend: { data: ['入口张力1', '入口张力2', '入口张力3', '带钢速度'], - textStyle: { color: '#e0e0e0' } + textStyle: { color: '#333' } }, series: [ { name: '入口张力1', type: 'line', data: this.chartData.entry.tensionPorBr1, smooth: true, lineStyle: { width: 2 } }, @@ -154,7 +159,7 @@ export default { ...baseOption, legend: { data: ['PH炉实际温度', 'NOF1炉实际温度', 'NOF1炉设定温度'], - textStyle: { color: '#e0e0e0' } + textStyle: { color: '#333' } }, series: [ { name: 'PH炉实际温度', type: 'line', data: this.chartData.furnace.phFurnaceTemperatureActual, smooth: true, lineStyle: { width: 2 } }, @@ -168,7 +173,7 @@ export default { ...baseOption, legend: { data: ['顶部平均涂层重量', '底部平均涂层重量', '气刀压力', '出口速度'], - textStyle: { color: '#e0e0e0' } + textStyle: { color: '#333' } }, series: [ { name: '顶部平均涂层重量', type: 'line', data: this.chartData.coat.avrCoatingWeightTop, smooth: true, lineStyle: { width: 2 } }, @@ -183,7 +188,7 @@ export default { ...baseOption, legend: { data: ['出口张力1', '出口张力2', '出口速度'], - textStyle: { color: '#e0e0e0' } + textStyle: { color: '#333' } }, series: [ { name: '出口张力1', type: 'line', data: this.chartData.exit.tensionBr8Br9, smooth: true, lineStyle: { width: 2 } }, @@ -197,6 +202,46 @@ export default { } }, + // 计算Y轴的合适范围，避免从0开始导致变化不明显 + calculateYAxisRange() { + const chartData = this.chartData[this.currentChart]; + let allValues = []; + + // 收集当前图表类型的所有数据点 + Object.keys(chartData).forEach(key => { + if (key !== 'time' && Array.isArray(chartData[key])) { + allValues = allValues.concat(chartData[key].filter(val => val !== null && val !== undefined)); + } + }); + + // 如果没有数据，使用默认范围 + if (allValues.length === 0) { + return { min: 0, max: 100 }; + } + + // 计算数据的最小值和最大值 + const minVal = Math.min(...allValues); + const maxVal = Math.max(...allValues); + + // 计算数据范围 + const range = maxVal - minVal; + + // 如果所有值都相同，添加一些范围使图表可见 + if (range === 0) { + return { + min: minVal - 10, + max: maxVal + 10 + }; + } + + // 添加10%的边距，使图表更美观 + const padding = range * 0.1; + return { + min: minVal - padding, + max: maxVal + padding + }; + }, + // 处理窗口大小变化 handleWindowResize() { if (this.chartInstance) { @@ -350,8 +395,15 @@ export default { // 更新当前显示的图表 updateCurrentChart() { if (this.chartInstance) { + // 重新计算Y轴范围 + const yAxisRange = this.calculateYAxisRange(); + this.chartInstance.setOption({ xAxis: { data: this.chartData[this.currentChart].time }, + yAxis: { + min: yAxisRange.min, + max: yAxisRange.max + }, series: this.getSeriesData() }); } @@ -402,8 +454,8 @@ export default { .process-monitor { padding: 20px; font-family: Arial, sans-serif; - background-color: #3f4449; - color: #e0e0e0; + background-color: #ffffff; /* 根容器背景改为白色 */ + color: #333333; /* 文本颜色改为深色 */ } .control-bar { @@ -412,11 +464,13 @@ export default { gap: 20px; margin-bottom: 20px; flex-wrap: wrap; + padding-bottom: 10px; + border-bottom: 1px solid #eeeeee; /* 添加分隔线 */ } .chart-selector { padding: 10px; - background-color: #4a4f55; + background-color: #f8f8f8; /* 选择器背景改为浅灰 */ border-radius: 4px; display: flex; align-items: center; @@ -424,49 +478,58 @@ export default { .chart-selector label { margin-right: 10px; - color: #e0e0e0; + color: #555555; /* 标签颜色改为深灰 */ + font-weight: 500; } .chart-selector select { - padding: 5px 10px; - border: 1px solid #5d6268; + padding: 6px 12px; + border: 1px solid #dddddd; /* 边框改为浅灰 */ border-radius: 4px; - background-color: #555a60; - color: #e0e0e0; + background-color: #ffffff; /* 选择框背景改为白色 */ + color: #333333; /* 选择框文本改为深色 */ cursor: pointer; + transition: border-color 0.2s; +} + +.chart-selector select:focus { + outline: none; + border-color: #999999; /* 聚焦时边框加深 */ } .connection-status { - padding: 8px 10px; + padding: 8px 12px; border-radius: 4px; - background-color: #4a4f55; - color: #ffd700; + background-color: #f8f8f8; /* 状态背景改为浅灰 */ + color: #e6a23c; /* 连接中颜色（橙色系） */ margin-left: auto; + font-size: 14px; } .connection-status.connected { - color: #32cd32; + color: #67c23a; /* 已连接颜色（绿色系） */ } .chart-container { - background-color: #4a4f55; + background-color: #ffffff; /* 图表容器背景改为白色 */ border-radius: 6px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - padding: 15px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 阴影变浅 */ + padding: 20px; } .chart-title { margin-top: 0; - color: #f0f0f0; + color: #333333; /* 标题颜色改为深色 */ font-size: 18px; - border-bottom: 1px solid #5d6268; + border-bottom: 1px solid #eeeeee; /* 分隔线改为浅灰 */ padding-bottom: 10px; margin-bottom: 15px; + font-weight: 600; } .chart { width: 100%; - height: 400px; /* 增大图表高度提升可读性 */ + height: 400px; /* 保持图表高度 */ } /* 响应式调整 */ diff --git a/apps/l2/src/views/components/CurrentTime.vue b/apps/l2/src/views/components/CurrentTime.vue index a1b18c0..3a6565e 100644 --- a/apps/l2/src/views/components/CurrentTime.vue +++ b/apps/l2/src/views/components/CurrentTime.vue @@ -52,12 +52,12 @@ export default {