代码更新

This commit is contained in:
kongduo
2026-06-12 09:29:42 +08:00
parent 06dfe98cb6
commit 2c816a13df
28 changed files with 506 additions and 444 deletions

View File

@@ -150,18 +150,18 @@
}
.detail-card {
background-color: var(--el-bg-color-overlay, #ffffff);
border-radius: 8px;
background: var(--tech-panel-soft);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--el-border-color, #e4e7ed);
border: 1px solid var(--tech-border);
h3 {
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary, #303133);
color: var(--tech-text-strong);
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
border-bottom: 1px solid rgba(0, 212, 255, 0.18);
}
}

View File

@@ -119,18 +119,18 @@
}
.detail-card {
background-color: var(--el-bg-color-overlay, #ffffff);
border-radius: 8px;
background: var(--tech-panel-soft);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--el-border-color, #e4e7ed);
border: 1px solid var(--tech-border);
h3 {
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary, #303133);
color: var(--tech-text-strong);
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
border-bottom: 1px solid rgba(0, 212, 255, 0.18);
}
}

View File

@@ -146,6 +146,13 @@
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
techChartAxisLabel,
techChartAxisLine,
techChartSeriesColors,
techChartSplitLine,
techChartTooltip
} from '@/utils/techChartTheme'
use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
const props = defineProps({
@@ -359,7 +366,8 @@
const createLineOption = (name, color, data = [], xAxis = []) => {
return {
tooltip: {
trigger: 'axis'
trigger: 'axis',
...techChartTooltip
},
grid: {
left: '3%',
@@ -372,25 +380,14 @@
type: 'category',
data: xAxis,
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#909399'
}
}
axisLine: techChartAxisLine,
axisLabel: techChartAxisLabel
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#909399'
}
},
splitLine: {
lineStyle: {
color: '#ebeef5',
type: 'dashed'
}
}
axisLine: techChartAxisLine,
axisLabel: techChartAxisLabel,
splitLine: techChartSplitLine
},
series: [
{
@@ -430,43 +427,43 @@
key: 'voltage',
title: '电压',
unit: 'V',
color: '#409EFF',
option: createLineOption('电压', '#409EFF', [], [])
color: '#00d4ff',
option: createLineOption('电压', techChartSeriesColors[0], [], [])
},
{
key: 'leakageCurrent',
title: '漏电流值',
unit: 'mA',
color: '#67C23A',
option: createLineOption('漏电流', '#67C23A', [], [])
color: techChartSeriesColors[1],
option: createLineOption('漏电流', techChartSeriesColors[1], [], [])
},
{
key: 'cumulativeElectricity',
title: '累计用电量',
unit: 'kWh',
color: '#E6A23C',
option: createLineOption('用电量', '#E6A23C', [], [])
color: techChartSeriesColors[2],
option: createLineOption('用电量', techChartSeriesColors[2], [], [])
},
{
key: 'current',
title: '电流值',
unit: 'A',
color: '#F56C6C',
option: createLineOption('电流', '#F56C6C', [], [])
color: techChartSeriesColors[3],
option: createLineOption('电流', techChartSeriesColors[3], [], [])
},
{
key: 'internalTemperature',
title: '内部温度',
unit: '℃',
color: '#909399',
option: createLineOption('内部温度', '#909399', [], [])
color: techChartSeriesColors[4],
option: createLineOption('内部温度', techChartSeriesColors[4], [], [])
},
{
key: 'powerFactor',
title: '功率因数',
unit: '',
color: '#1ABC9C',
option: createLineOption('功率因数', '#1ABC9C', [], [])
color: techChartSeriesColors[5],
option: createLineOption('功率因数', techChartSeriesColors[5], [], [])
}
])
@@ -630,26 +627,27 @@
gap: 12px;
margin-bottom: 16px;
padding: 16px;
background-color: var(--el-bg-color-overlay, #ffffff);
border-radius: 8px;
border: 1px solid var(--el-border-color, #e4e7ed);
background: var(--tech-panel-soft);
border-radius: 12px;
border: 1px solid var(--tech-border);
}
.toolbar-label {
font-size: 14px;
color: var(--el-text-color-regular, #606266);
color: var(--tech-text-muted);
white-space: nowrap;
}
.chart-card {
background-color: var(--el-bg-color-overlay, #ffffff);
border-radius: 8px;
background: var(--tech-panel-soft);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
border: 1px solid var(--tech-border);
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
box-shadow: 0 0 18px rgba(0, 212, 255, 0.12);
}
}
@@ -663,12 +661,12 @@
.chart-title {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary, #303133);
color: var(--tech-text-strong);
}
.chart-unit {
font-size: 12px;
color: var(--el-text-color-regular, #606266);
color: var(--tech-text-muted);
}
.chart {