第一次美化
This commit is contained in:
kongduo
@@ -5,7 +5,7 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex justify-between fixed top-0 left-0 right-0 z-10 h-16 bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 shadow dark:shadow-gray-700 items-center px-2"
|
||||
class="gva-tech-header flex justify-between fixed top-0 left-0 right-0 z-10 h-16 items-center px-2"
|
||||
>
|
||||
<div class="flex items-center cursor-pointer flex-1">
|
||||
<div
|
||||
|
||||
@@ -238,7 +238,7 @@
|
||||
// 设备卡片容器
|
||||
.container-device {
|
||||
padding: 24px;
|
||||
background-color: var(--el-bg-color, #f5f7fa);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.device-grid {
|
||||
@@ -246,25 +246,28 @@
|
||||
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
background-color: var(--el-bg-color, #f5f7fa);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
background-color: var(--el-bg-color-overlay, #ffffff);
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
color: var(--el-text-color-regular, #303133);
|
||||
color: var(--tech-text);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--el-border-color, #e4e7ed);
|
||||
border: 1px solid rgba(0, 212, 255, 0.22);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
|
||||
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%);
|
||||
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--el-color-primary, #409eff);
|
||||
border-color: rgba(0, 212, 255, 0.56);
|
||||
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 24px rgba(0, 212, 255, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,11 +314,11 @@
|
||||
top: -4px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-placeholder, #94a3b8);
|
||||
color: rgba(220, 243, 255, 0.72);
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-text-color-primary, #303133);
|
||||
color: #67e8f9;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -328,7 +331,7 @@
|
||||
.device-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary, #303133);
|
||||
color: var(--tech-text-strong);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -354,7 +357,7 @@
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-regular, #606266);
|
||||
color: #dceeff;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
|
||||
@@ -196,6 +196,12 @@
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import { TooltipComponent, GridComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
import {
|
||||
techChartAxisLabel,
|
||||
techChartAxisLine,
|
||||
techChartSplitLine,
|
||||
techChartTooltip
|
||||
} from '@/utils/techChartTheme'
|
||||
|
||||
use([CanvasRenderer, LineChart, TooltipComponent, GridComponent])
|
||||
|
||||
@@ -317,9 +323,7 @@
|
||||
const buildAlarmTrendOption = (dates = [], alarmCounts = []) => ({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#e4e7ed',
|
||||
textStyle: { color: '#303133' }
|
||||
...techChartTooltip
|
||||
},
|
||||
grid: {
|
||||
left: 48,
|
||||
@@ -331,16 +335,16 @@
|
||||
type: 'category',
|
||||
data: dates,
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#e4e7ed' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
axisLine: techChartAxisLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#f0f2f5' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
...techChartSplitLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -560,13 +564,13 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.project-overview {
|
||||
background-color: #f5f7fa;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: calc(100vh - 120px);
|
||||
color: #303133;
|
||||
min-height: calc(100% - 12px);
|
||||
color: var(--tech-text);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.top-panel {
|
||||
@@ -581,10 +585,12 @@
|
||||
.alarm-list,
|
||||
.alarm-trend,
|
||||
.alarm-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid rgba(0, 212, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
|
||||
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%);
|
||||
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
@@ -610,18 +616,18 @@
|
||||
|
||||
.tab {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
color: var(--tech-text);
|
||||
cursor: pointer;
|
||||
padding-bottom: 6px;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #409eff;
|
||||
color: #67e8f9;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
@@ -631,29 +637,30 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #409eff;
|
||||
background: var(--tech-cyan);
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen-icon {
|
||||
color: #909399;
|
||||
color: var(--tech-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
color: #67e8f9;
|
||||
}
|
||||
}
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #f0f2f5;
|
||||
border: 1px solid rgba(0, 212, 255, 0.18);
|
||||
background: rgba(2, 8, 23, 0.62);
|
||||
}
|
||||
|
||||
.map-canvas {
|
||||
@@ -673,7 +680,7 @@
|
||||
.alarm-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
@@ -714,7 +721,7 @@
|
||||
.project-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
margin-bottom: 6px;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -724,7 +731,7 @@
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: var(--tech-text-muted);
|
||||
line-height: 1.5;
|
||||
|
||||
.el-icon {
|
||||
@@ -751,13 +758,14 @@
|
||||
height: auto;
|
||||
margin-right: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
background: rgba(2, 8, 23, 0.42);
|
||||
|
||||
&.is-checked {
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
border-color: rgba(0, 212, 255, 0.56);
|
||||
background: rgba(0, 212, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -768,13 +776,13 @@
|
||||
.project-option-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.project-option-address {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: var(--tech-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -831,7 +839,7 @@
|
||||
|
||||
.alarm-stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #dceeff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -839,7 +847,7 @@
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-family: 'DIN', 'Arial', sans-serif;
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
line-height: 1.2;
|
||||
|
||||
&.danger {
|
||||
@@ -855,7 +863,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #dceeff;
|
||||
|
||||
&.second-row {
|
||||
margin-top: 4px;
|
||||
@@ -875,7 +883,7 @@
|
||||
}
|
||||
|
||||
.value-item {
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
|
||||
&.online {
|
||||
color: #67c23a;
|
||||
@@ -927,7 +935,7 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
background: rgba(5, 16, 32, 0.92);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -940,7 +948,7 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
background: rgba(5, 16, 32, 0.92);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -962,7 +970,7 @@
|
||||
|
||||
.process-label {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
color: var(--tech-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -982,7 +990,7 @@
|
||||
.process-divider {
|
||||
width: 1px;
|
||||
height: 90px;
|
||||
background: #e4e7ed;
|
||||
background: rgba(0, 212, 255, 0.18);
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
@@ -1003,14 +1011,15 @@
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: #409eff;
|
||||
background: var(--tech-cyan);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
.alarm-table {
|
||||
@@ -1073,8 +1082,8 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #409eff;
|
||||
background: rgba(5, 16, 32, 0.92);
|
||||
border: 1px solid rgba(0, 212, 255, 0.56);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
@@ -1088,13 +1097,13 @@
|
||||
|
||||
.map-device-name {
|
||||
font-size: 11px;
|
||||
color: #303133;
|
||||
color: var(--tech-text-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.map-device-sub {
|
||||
font-size: 10px;
|
||||
color: #909399;
|
||||
color: var(--tech-text-muted);
|
||||
}
|
||||
|
||||
@keyframes map-pulse {
|
||||
|
||||
@@ -92,6 +92,14 @@
|
||||
import { PieChart, LineChart } from 'echarts/charts'
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
import {
|
||||
techChartAxisLabel,
|
||||
techChartAxisLine,
|
||||
techChartCenterText,
|
||||
techChartLegend,
|
||||
techChartSplitLine,
|
||||
techChartTooltip
|
||||
} from '@/utils/techChartTheme'
|
||||
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
@@ -176,15 +184,13 @@
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
||||
borderColor: 'transparent',
|
||||
textStyle: { color: '#fff' }
|
||||
...techChartTooltip
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: 0,
|
||||
left: 'center',
|
||||
textStyle: { color: '#606266', fontSize: 12 }
|
||||
...techChartLegend
|
||||
},
|
||||
grid: {
|
||||
left: 36,
|
||||
@@ -196,16 +202,16 @@
|
||||
type: 'category',
|
||||
data: dates,
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#e4e7ed' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
axisLine: techChartAxisLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#f0f2f5' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
...techChartSplitLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
@@ -230,7 +236,7 @@
|
||||
orient: 'vertical',
|
||||
right: 8,
|
||||
top: 'middle',
|
||||
textStyle: { color: '#606266', fontSize: 12 },
|
||||
textStyle: techChartLegend.textStyle,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10
|
||||
},
|
||||
@@ -245,7 +251,7 @@
|
||||
labelLine: { show: false },
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: '#fff',
|
||||
borderColor: 'rgba(0, 212, 255, 0.22)',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
@@ -302,7 +308,7 @@
|
||||
orient: 'vertical',
|
||||
right: 8,
|
||||
top: 'middle',
|
||||
textStyle: { color: '#606266', fontSize: 12 },
|
||||
textStyle: techChartLegend.textStyle,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10
|
||||
},
|
||||
@@ -317,7 +323,7 @@
|
||||
labelLine: { show: false },
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: '#fff',
|
||||
borderColor: 'rgba(0, 212, 255, 0.22)',
|
||||
borderWidth: 2
|
||||
},
|
||||
// 中心文字
|
||||
@@ -329,7 +335,7 @@
|
||||
style: {
|
||||
text: totalCount,
|
||||
textAlign: 'center',
|
||||
fill: '#303133',
|
||||
fill: techChartCenterText.primary,
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
@@ -341,7 +347,7 @@
|
||||
style: {
|
||||
text: '总数',
|
||||
textAlign: 'center',
|
||||
fill: '#909399',
|
||||
fill: techChartCenterText.secondary,
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
@@ -404,16 +410,16 @@
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#e4e7ed' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
axisLine: techChartAxisLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#f0f2f5' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
...techChartSplitLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -591,10 +597,16 @@
|
||||
|
||||
.alarm-table-box {
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
margin-top: 12px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
|
||||
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%);
|
||||
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.echarts-box .title {
|
||||
color: var(--tech-text-strong);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,6 +89,13 @@
|
||||
import { PieChart, LineChart } from 'echarts/charts'
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
import {
|
||||
techChartAxisLabel,
|
||||
techChartAxisLine,
|
||||
techChartLegend,
|
||||
techChartSplitLine,
|
||||
techChartTooltip
|
||||
} from '@/utils/techChartTheme'
|
||||
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
@@ -164,15 +171,13 @@
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
||||
borderColor: 'transparent',
|
||||
textStyle: { color: '#fff' }
|
||||
...techChartTooltip
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: 0,
|
||||
left: 'center',
|
||||
textStyle: { color: '#606266', fontSize: 12 }
|
||||
...techChartLegend
|
||||
},
|
||||
grid: {
|
||||
left: 36,
|
||||
@@ -184,16 +189,16 @@
|
||||
type: 'category',
|
||||
data: dates,
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#e4e7ed' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
axisLine: techChartAxisLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#f0f2f5' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
...techChartSplitLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
@@ -299,10 +304,16 @@
|
||||
|
||||
.alarm-table-box {
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
margin-top: 12px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
|
||||
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%);
|
||||
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.echarts-box .title {
|
||||
color: var(--tech-text-strong);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,6 +89,13 @@
|
||||
import { PieChart, LineChart } from 'echarts/charts'
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
import {
|
||||
techChartAxisLabel,
|
||||
techChartAxisLine,
|
||||
techChartLegend,
|
||||
techChartSplitLine,
|
||||
techChartTooltip
|
||||
} from '@/utils/techChartTheme'
|
||||
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
@@ -164,15 +171,13 @@
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
||||
borderColor: 'transparent',
|
||||
textStyle: { color: '#fff' }
|
||||
...techChartTooltip
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: 0,
|
||||
left: 'center',
|
||||
textStyle: { color: '#606266', fontSize: 12 }
|
||||
...techChartLegend
|
||||
},
|
||||
grid: {
|
||||
left: 36,
|
||||
@@ -184,16 +189,16 @@
|
||||
type: 'category',
|
||||
data: dates,
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#e4e7ed' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
axisLine: techChartAxisLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#f0f2f5' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
...techChartSplitLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
@@ -299,10 +304,16 @@
|
||||
|
||||
.alarm-table-box {
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
margin-top: 12px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
|
||||
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%);
|
||||
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.echarts-box .title {
|
||||
color: var(--tech-text-strong);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,6 +89,13 @@
|
||||
import { PieChart, LineChart } from 'echarts/charts'
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
import {
|
||||
techChartAxisLabel,
|
||||
techChartAxisLine,
|
||||
techChartLegend,
|
||||
techChartSplitLine,
|
||||
techChartTooltip
|
||||
} from '@/utils/techChartTheme'
|
||||
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
@@ -164,15 +171,13 @@
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
||||
borderColor: 'transparent',
|
||||
textStyle: { color: '#fff' }
|
||||
...techChartTooltip
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: 0,
|
||||
left: 'center',
|
||||
textStyle: { color: '#606266', fontSize: 12 }
|
||||
...techChartLegend
|
||||
},
|
||||
grid: {
|
||||
left: 36,
|
||||
@@ -184,16 +189,16 @@
|
||||
type: 'category',
|
||||
data: dates,
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#e4e7ed' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
axisLine: techChartAxisLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#f0f2f5' } },
|
||||
axisLabel: { color: '#909399', fontSize: 11 }
|
||||
...techChartSplitLine,
|
||||
axisLabel: techChartAxisLabel
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
@@ -299,10 +304,16 @@
|
||||
|
||||
.alarm-table-box {
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
margin-top: 12px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
|
||||
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%);
|
||||
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.echarts-box .title {
|
||||
color: var(--tech-text-strong);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user