diff --git a/src/components/commandMenu/index.vue b/src/components/commandMenu/index.vue
index 4ab4e20..79adcbd 100644
--- a/src/components/commandMenu/index.vue
+++ b/src/components/commandMenu/index.vue
@@ -168,25 +168,27 @@
margin-top: 8px;
font-size: 12px;
font-weight: 600;
- color: #666;
+ color: var(--tech-text-muted);
}
.quick-input {
- @apply bg-gray-50 dark:bg-gray-800;
- color: #666;
+ color: var(--tech-text);
border-radius: 4px 4px 0 0;
border: none;
padding: 12px 16px;
box-sizing: border-box;
width: 100%;
font-size: 16px;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid rgba(0, 212, 255, 0.18);
+ background: rgba(2, 8, 23, 0.68);
}
.quick-item {
+ color: var(--tech-text);
font-size: 14px;
padding: 8px;
margin: 4px 0;
&:hover {
- @apply bg-gray-200 dark:bg-slate-500;
+ color: var(--tech-text-strong);
+ background: rgba(0, 212, 255, 0.12);
cursor: pointer;
border-radius: 4px;
}
diff --git a/src/components/upload/image.vue b/src/components/upload/image.vue
index 0b0ae5e..097d3a7 100644
--- a/src/components/upload/image.vue
+++ b/src/components/upload/image.vue
@@ -76,19 +76,20 @@
diff --git a/src/view/largeScreen2/ttes.js b/src/view/largeScreen2/ttes.js
index c15d76b..db49594 100644
--- a/src/view/largeScreen2/ttes.js
+++ b/src/view/largeScreen2/ttes.js
@@ -1,13 +1,54 @@
import * as echarts from 'echarts'
+import {
+ techChartAxisLabel,
+ techChartAxisLine,
+ techChartCenterText,
+ techChartLegend,
+ techChartSeriesColors,
+ techChartSplitLine,
+ techChartTooltip
+} from '@/utils/techChartTheme'
+
+const chartNameTextStyle = {
+ color: techChartAxisLabel.color,
+ fontSize: 10
+}
+
+const dashedSplitLine = {
+ lineStyle: {
+ ...techChartSplitLine.lineStyle,
+ type: 'dashed'
+ }
+}
+
+const compactAxisLabel = {
+ ...techChartAxisLabel,
+ fontSize: 10
+}
+
+const pieItemStyle = {
+ borderRadius: 8,
+ borderColor: 'rgba(5, 16, 32, 0.96)',
+ borderWidth: 2
+}
+
+const createCenterLabelRich = (totalFontSize, nameFontSize) => ({
+ total: {
+ fontSize: totalFontSize,
+ fontWeight: 'bold',
+ color: techChartCenterText.primary,
+ lineHeight: 35
+ },
+ name: {
+ fontSize: nameFontSize,
+ color: techChartCenterText.secondary
+ }
+})
export const getAlarmPendingOption = () => ({
tooltip: {
trigger: 'axis',
- backgroundColor: 'rgba(15, 23, 42, 0.9)',
- borderColor: '#1e3a8a',
- textStyle: {
- color: '#e2e8f0'
- }
+ ...techChartTooltip
},
grid: {
top: '15%',
@@ -19,38 +60,16 @@ export const getAlarmPendingOption = () => ({
xAxis: {
type: 'category',
data: ['02-17', '02-22', '02-27', '03-04', '03-09', '03-14'],
- axisLine: {
- lineStyle: {
- color: '#1e3a8a'
- }
- },
- axisLabel: {
- color: '#64748b',
- fontSize: 10
- }
+ axisLine: techChartAxisLine,
+ axisLabel: compactAxisLabel
},
yAxis: {
type: 'value',
name: '次数',
- nameTextStyle: {
- color: '#64748b',
- fontSize: 10
- },
- splitLine: {
- lineStyle: {
- color: '#1e3a8a',
- type: 'dashed'
- }
- },
- axisLine: {
- lineStyle: {
- color: '#1e3a8a'
- }
- },
- axisLabel: {
- color: '#64748b',
- fontSize: 10
- }
+ nameTextStyle: chartNameTextStyle,
+ splitLine: dashedSplitLine,
+ axisLine: techChartAxisLine,
+ axisLabel: compactAxisLabel
},
series: [
{
@@ -59,11 +78,11 @@ export const getAlarmPendingOption = () => ({
type: 'line',
smooth: true,
lineStyle: {
- color: '#00d4ff',
+ color: techChartSeriesColors[0],
width: 2
},
itemStyle: {
- color: '#00d4ff'
+ color: techChartSeriesColors[0]
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -94,27 +113,12 @@ export const getAlertDistributionOption = (alertTypes) => ({
radius: ['45%', '70%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 8,
- borderColor: '#0f172a',
- borderWidth: 2
- },
+ itemStyle: pieItemStyle,
label: {
show: true,
position: 'center',
formatter: '{total|15}\n{name|报警总数}',
- rich: {
- total: {
- fontSize: 28,
- fontWeight: 'bold',
- color: '#e2e8f0',
- lineHeight: 35
- },
- name: {
- fontSize: 14,
- color: '#94a3b8'
- }
- }
+ rich: createCenterLabelRich(28, 14)
},
labelLine: {
show: false
@@ -146,27 +150,12 @@ export const getDeviceStatOption = (deviceTypes) => {
radius: ['45%', '70%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 8,
- borderColor: '#0f172a',
- borderWidth: 2
- },
+ itemStyle: pieItemStyle,
label: {
show: true,
position: 'center',
formatter: `{total|${total}}\n{name|设备总数}`,
- rich: {
- total: {
- fontSize: 18,
- fontWeight: 'bold',
- color: '#e2e8f0',
- lineHeight: 35
- },
- name: {
- fontSize: 12,
- color: '#94a3b8'
- }
- }
+ rich: createCenterLabelRich(18, 12)
},
labelLine: {
show: false
@@ -186,11 +175,7 @@ export const getDeviceStatOption = (deviceTypes) => {
export const getProjectBarOption = (projectData) => ({
tooltip: {
trigger: 'axis',
- backgroundColor: 'rgba(15, 23, 42, 0.9)',
- borderColor: '#1e3a8a',
- textStyle: {
- color: '#e2e8f0'
- }
+ ...techChartTooltip
},
grid: {
top: '10%',
@@ -202,14 +187,9 @@ export const getProjectBarOption = (projectData) => ({
xAxis: {
type: 'category',
data: projectData.map((item) => item.projectName || item.name || '未知'),
- axisLine: {
- lineStyle: {
- color: '#1e3a8a'
- }
- },
+ axisLine: techChartAxisLine,
axisLabel: {
- color: '#64748b',
- fontSize: 9,
+ ...compactAxisLabel,
rotate: 30,
interval: 0,
overflow: 'truncate',
@@ -220,25 +200,10 @@ export const getProjectBarOption = (projectData) => ({
yAxis: {
type: 'value',
name: '数量',
- nameTextStyle: {
- color: '#64748b',
- fontSize: 10
- },
- splitLine: {
- lineStyle: {
- color: '#1e3a8a',
- type: 'dashed'
- }
- },
- axisLine: {
- lineStyle: {
- color: '#1e3a8a'
- }
- },
- axisLabel: {
- color: '#64748b',
- fontSize: 10
- }
+ nameTextStyle: chartNameTextStyle,
+ splitLine: dashedSplitLine,
+ axisLine: techChartAxisLine,
+ axisLabel: compactAxisLabel
},
series: [
{
@@ -248,8 +213,8 @@ export const getProjectBarOption = (projectData) => ({
barWidth: '40%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#00d4ff' },
- { offset: 1, color: '#3b82f6' }
+ { offset: 0, color: techChartSeriesColors[0] },
+ { offset: 1, color: techChartSeriesColors[4] }
]),
borderRadius: [4, 4, 0, 0]
}
@@ -260,18 +225,15 @@ export const getProjectBarOption = (projectData) => ({
export const getAlertTrendOption = () => ({
tooltip: {
trigger: 'axis',
- backgroundColor: 'rgba(15, 23, 42, 0.9)',
- borderColor: '#1e3a8a',
- textStyle: {
- color: '#e2e8f0'
- }
+ ...techChartTooltip
},
legend: {
data: ['二级报警', '报警', '预警'],
right: 10,
top: 0,
+ ...techChartLegend,
textStyle: {
- color: '#94a3b8',
+ ...techChartLegend.textStyle,
fontSize: 10
},
itemWidth: 10,
@@ -287,38 +249,16 @@ export const getAlertTrendOption = () => ({
xAxis: {
type: 'category',
data: ['01', '05', '10', '15', '20', '25', '30'],
- axisLine: {
- lineStyle: {
- color: '#1e3a8a'
- }
- },
- axisLabel: {
- color: '#64748b',
- fontSize: 10
- }
+ axisLine: techChartAxisLine,
+ axisLabel: compactAxisLabel
},
yAxis: {
type: 'value',
name: '数量',
- nameTextStyle: {
- color: '#64748b',
- fontSize: 10
- },
- splitLine: {
- lineStyle: {
- color: '#1e3a8a',
- type: 'dashed'
- }
- },
- axisLine: {
- lineStyle: {
- color: '#1e3a8a'
- }
- },
- axisLabel: {
- color: '#64748b',
- fontSize: 10
- }
+ nameTextStyle: chartNameTextStyle,
+ splitLine: dashedSplitLine,
+ axisLine: techChartAxisLine,
+ axisLabel: compactAxisLabel
},
series: [
{
@@ -327,11 +267,11 @@ export const getAlertTrendOption = () => ({
type: 'line',
smooth: true,
lineStyle: {
- color: '#a855f7',
+ color: techChartSeriesColors[5],
width: 2
},
itemStyle: {
- color: '#a855f7'
+ color: techChartSeriesColors[5]
},
markPoint: {
data: [
@@ -352,11 +292,11 @@ export const getAlertTrendOption = () => ({
type: 'line',
smooth: true,
lineStyle: {
- color: '#ef4444',
+ color: techChartSeriesColors[3],
width: 2
},
itemStyle: {
- color: '#ef4444'
+ color: techChartSeriesColors[3]
},
markPoint: {
data: [
@@ -377,11 +317,11 @@ export const getAlertTrendOption = () => ({
type: 'line',
smooth: true,
lineStyle: {
- color: '#f59e0b',
+ color: techChartSeriesColors[2],
width: 2
},
itemStyle: {
- color: '#f59e0b'
+ color: techChartSeriesColors[2]
},
markPoint: {
data: [
diff --git a/src/view/masterStation/equipment/components/detail/components/config/index.vue b/src/view/masterStation/equipment/components/detail/components/config/index.vue
index e1ccfc4..26f000b 100644
--- a/src/view/masterStation/equipment/components/detail/components/config/index.vue
+++ b/src/view/masterStation/equipment/components/detail/components/config/index.vue
@@ -4,9 +4,7 @@
线路列表
一键分闸
- 一键合闸
+ 一键合闸
@@ -23,8 +21,8 @@
{{ item.nodeNumber == 0 ? '总路' : `线路${index + 1}` }}
{{ `（${item.gatewayMac}）` }}
- 合闸
- 分闸
+ 合闸
+ 分闸
@@ -71,6 +69,12 @@
// 右侧参数配置列表
const tableData = ref([])
+ const currentCheck = ref(0)
+
+ const handleClick = (_, index) => {
+ currentCheck.value = index
+ getDeviceConfigListByPage()
+ }
const getDeviceConfigListByPage = async () => {
const deviceId = props.device?.deviceId
@@ -123,46 +127,119 @@
diff --git a/src/view/masterStation/equipment/components/detail/index.vue b/src/view/masterStation/equipment/components/detail/index.vue
index c025fbb..6e8d9ce 100644
--- a/src/view/masterStation/equipment/components/detail/index.vue
+++ b/src/view/masterStation/equipment/components/detail/index.vue
@@ -7,7 +7,7 @@
设备信息（{{ device?.gatewayMac }}）
-
+
@@ -51,14 +51,71 @@
.device-detail-page {
// padding: 20px;
.tabs-box {
- @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg;
+ position: relative;
display: flex;
align-items: center;
+ gap: 14px;
+ padding: 18px 20px;
+ margin: 8px 0 14px;
+ overflow: hidden;
+ color: var(--tech-text);
+ border: 1px solid rgba(0, 212, 255, 0.28);
+ border-radius: 18px;
+ background:
+ linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
+ radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
+ box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
+
+ &::before {
+ position: absolute;
+ top: 0;
+ left: -36%;
+ width: 36%;
+ height: 100%;
+ content: '';
+ pointer-events: none;
+ background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
+ animation: equipmentCardGlint 6s ease-in-out infinite;
+ }
+
+ > * {
+ position: relative;
+ z-index: 1;
+ }
+
> .title {
- margin: 0 15px;
- font-size: 18px;
- font-weight: 600;
- color: var(--el-text-color-primary, #303133);
+ flex: 1;
+ margin: 0 15px 0 0;
+ font-size: 24px;
+ font-weight: 800;
+ color: var(--tech-text-strong);
+ letter-spacing: 0.06em;
+ text-shadow: 0 0 18px rgba(0, 212, 255, 0.38);
+ }
+
+ :deep(.el-button.is-circle) {
+ color: #67e8f9;
+ border-color: rgba(0, 212, 255, 0.36);
+ background: rgba(15, 23, 42, 0.72);
+ box-shadow: 0 0 18px rgba(0, 212, 255, 0.14);
+ }
+
+ :deep(.el-radio-button__inner) {
+ color: var(--tech-text-muted);
+ border-color: rgba(0, 212, 255, 0.22);
+ background: rgba(2, 8, 23, 0.42);
+ }
+
+ :deep(.el-radio-button__inner:hover) {
+ color: var(--tech-text-strong);
+ background: rgba(0, 212, 255, 0.12);
+ }
+
+ :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+ color: #031424;
+ border-color: rgba(103, 232, 249, 0.74);
+ background: linear-gradient(135deg, #67e8f9, var(--tech-primary));
+ box-shadow: 0 0 18px rgba(0, 212, 255, 0.28);
}
}
}
diff --git a/src/view/superAdmin/menu/menu.vue b/src/view/superAdmin/menu/menu.vue
index c32c1c9..854925c 100644
--- a/src/view/superAdmin/menu/menu.vue
+++ b/src/view/superAdmin/menu/menu.vue
@@ -288,7 +288,7 @@
@@ -335,7 +335,7 @@
@@ -359,7 +359,7 @@
@@ -455,7 +455,7 @@
.warning {
- color: #dc143c;
+ color: var(--tech-danger);
}
.icon-column {
display: flex;
@@ -790,13 +790,13 @@
.form-tip {
margin-top: 8px;
font-size: 12px;
- color: #909399;
+ color: var(--tech-text-muted);
display: flex;
align-items: center;
gap: 8px;
-
+
.el-icon {
- color: #409eff;
+ color: var(--tech-primary);
}
}
@@ -804,30 +804,30 @@
display: flex;
align-items: center;
gap: 6px;
-
+
.el-icon {
- color: #909399;
+ color: var(--tech-text-muted);
cursor: help;
-
+
&:hover {
- color: #409eff;
+ color: var(--tech-primary);
}
}
}
.parameter-table,
.button-table {
- border: 1px solid #ebeef5;
+ border: 1px solid rgba(0, 212, 255, 0.18);
border-radius: 6px;
-
+
:deep(.el-table__header) {
- background-color: #fafafa;
+ background-color: rgba(8, 27, 54, 0.72);
}
-
+
:deep(.el-table__body) {
.el-table__row {
&:hover {
- background-color: #f5f7fa;
+ background-color: rgba(0, 212, 255, 0.08);
}
}
}