代码更新
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user