xiaozhiyong/safePower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码更新

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

24
src/view/dashboard/components/charts-content-numbers.vue
View File

@@ -13,20 +13,25 @@
import Chart from '@/components/charts/index.vue'
import useChartOption from '@/hooks/charts'
import { graphic } from 'echarts'
import { computed, ref } from 'vue'
import { useAppStore } from '@/pinia'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
const appStore = useAppStore()
const { config } = storeToRefs(appStore)
import { useAppStore } from '@/pinia'
import {
techChartMutedColor,
techChartSplitTrackColor,
techChartTooltip
} from '@/utils/techChartTheme'
defineProps({
height: {
type: String,
default: '128px'
}
})
const dotColor = computed(() => {
return appStore.isDark ? '#333' : '#E5E8EF'
})
const appStore = useAppStore()
const { config } = storeToRefs(appStore)
const dotColor = techChartSplitTrackColor
const graphicFactory = (side) => {
return {
type: 'text',
@@ -35,7 +40,7 @@
style: {
text: '',
textAlign: 'center',
fill: '#4E5969',
fill: techChartMutedColor,
fontSize: 12
}
}
@@ -69,7 +74,7 @@
data: xAxis.value,
boundaryGap: false,
axisLabel: {
color: '#4E5969',
color: techChartMutedColor,
formatter(value, idx) {
if (idx === 0) return ''
if (idx === xAxis.value.length - 1) return ''
@@ -122,6 +127,7 @@
},
tooltip: {
trigger: 'axis',
...techChartTooltip,
formatter(params) {
const [firstElement] = params
return `<div>

3
src/view/dashboard/components/charts-people-numbers.vue
View File

@@ -17,6 +17,7 @@
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/pinia'
import { techChartMutedColor } from '@/utils/techChartTheme'
const appStore = useAppStore()
const { config } = storeToRefs(appStore)
@@ -38,7 +39,7 @@
style: {
text: '',
textAlign: 'center',
fill: '#4E5969',
fill: techChartMutedColor,
fontSize: 12
}
}

10
src/view/equipment/list/components/detail/components/alarm/index.vue
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);
}
}

55
src/view/equipment/list/components/detail/components/trend/index.vue
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: techChartSeriesColors[0],
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], [], [])
}
])

2
src/view/layout/header/index.vue
View File

@@ -39,7 +39,7 @@
<tools />
<el-dropdown>
<div class="flex justify-center items-center h-full w-full">
<span class="cursor-pointer flex justify-center items-center text-black dark:text-gray-100">
<span class="cursor-pointer flex justify-center items-center text-[var(--tech-text)]">
<CustomPic />
<span v-show="!isMobile" class="w-16">{{ userStore.userInfo.nickName }}</span>
<el-icon>

8
src/view/layout/header/tools.vue
View File

@@ -7,7 +7,7 @@
<div class="flex items-center mx-4 gap-4">
<el-tooltip class="" effect="dark" content="搜索" placement="bottom">
<span
class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
>
<el-icon @click="handleCommand">
<Search />
@@ -17,7 +17,7 @@
<el-tooltip class="" effect="dark" content="系统设置" placement="bottom">
<span
class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
>
<el-icon @click="toggleSetting">
<Setting />
@@ -27,7 +27,7 @@
<el-tooltip class="" effect="dark" content="刷新" placement="bottom">
<span
class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
>
<el-icon :class="showRefreshAnmite ? 'animate-spin' : ''" @click="toggleRefresh">
<Refresh />
@@ -36,7 +36,7 @@
</el-tooltip>
<el-tooltip class="" effect="dark" content="切换主题" placement="bottom">
<span
class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
>
<el-icon v-if="appStore.isDark" @click="appStore.toggleTheme(false)">
<Sunny />

70
src/view/layout/setting/components/themeColorPicker.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="font-inter">
<div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 shadow-sm">
<div class="gva-setting-card rounded-xl p-8">
<div class="mb-8">
<p class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-5">精选色彩</p>
<p class="gva-setting-section-title text-base font-semibold mb-5">精选色彩</p>
<div class="grid grid-cols-3 gap-4">
<div
v-for="colorItem in presetColors"
:key="colorItem.color"
class="flex items-center gap-4 p-4 bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer transition-all duration-150 ease-in-out hover:transform hover:-translate-y-1 hover:shadow-lg"
class="gva-setting-color-item flex items-center gap-4 p-4 border-2 rounded-xl cursor-pointer transition-all duration-150 ease-in-out hover:-translate-y-1"
:class="{
'ring-2 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-800 transform -translate-y-1 shadow-lg': modelValue === colorItem.color
'ring-2 ring-offset-2 transform -translate-y-1 shadow-lg': modelValue === colorItem.color
}"
:style="modelValue === colorItem.color ? {
borderColor: colorItem.color,
@@ -18,8 +18,8 @@
@click="handleColorChange(colorItem.color)"
>
<div
class="relative w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-500 flex-shrink-0 shadow-sm"
:style="{ backgroundColor: colorItem.color }"
class="relative w-10 h-10 rounded-lg border flex-shrink-0 shadow-sm"
:style="{ backgroundColor: colorItem.color, borderColor: 'rgba(0, 212, 255, 0.22)' }"
>
<div
v-if="modelValue === colorItem.color"
@@ -32,16 +32,16 @@
</div>
</div>
<div class="min-w-0 flex-1">
<span class="block text-sm font-semibold text-gray-900 dark:text-white">{{ colorItem.name }}</span>
<span class="block text-sm font-semibold gva-setting-card-title">{{ colorItem.name }}</span>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between p-5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl mb-6 shadow-sm">
<div class="gva-setting-color-panel flex items-center justify-between p-5 rounded-xl mb-6">
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white">自定义颜色</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">选择任意颜色作为主题色</p>
<h4 class="text-base font-semibold gva-setting-card-title">自定义颜色</h4>
<p class="text-sm gva-setting-hint mt-1">选择任意颜色作为主题色</p>
</div>
<el-color-picker
v-model="customColor"
@@ -52,15 +52,15 @@
/>
</div>
<div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl p-5 shadow-sm">
<div class="gva-setting-color-panel rounded-xl p-5">
<div class="flex items-center justify-between">
<span class="text-base font-semibold text-gray-700 dark:text-gray-300">当前主题色</span>
<span class="text-base font-semibold gva-setting-section-title">当前主题色</span>
<div class="flex items-center gap-3">
<div
class="w-6 h-6 rounded-lg border border-gray-300 dark:border-gray-500 shadow-sm"
:style="{ backgroundColor: modelValue }"
class="w-6 h-6 rounded-lg border shadow-sm"
:style="{ backgroundColor: modelValue, borderColor: 'rgba(0, 212, 255, 0.22)' }"
></div>
<code class="text-sm font-mono bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-500">
<code class="gva-setting-color-code text-sm font-mono px-3 py-2 rounded-lg border">
{{ modelValue }}
</code>
</div>
@@ -81,7 +81,7 @@ defineOptions({
const props = defineProps({
modelValue: {
type: String,
default: '#3b82f6'
default: '#00d4ff'
}
})
@@ -90,19 +90,15 @@ const emit = defineEmits(['update:modelValue'])
const customColor = ref(props.modelValue)
const presetColors = [
{ color: '#4E80EE', name: '默认' },
{ color: '#8bb5d1', name: '晨雾蓝' },
{ color: '#a8c8a8', name: '薄荷绿' },
{ color: '#d4a5a5', name: '玫瑰粉' },
{ color: '#c8a8d8', name: '薰衣草' },
{ color: '#f0c674', name: '暖阳黄' },
{ color: '#b8b8b8', name: '月光银' },
{ color: '#d8a8a8', name: '珊瑚橙' },
{ color: '#a8d8d8', name: '海雾青' },
{ color: '#c8c8a8', name: '橄榄绿' },
{ color: '#d8c8a8', name: '奶茶棕' },
{ color: '#a8a8d8', name: '梦幻紫' },
{ color: '#c8d8a8', name: '抹茶绿' }
{ color: '#00d4ff', name: '科技青' },
{ color: '#67e8f9', name: '电光蓝' },
{ color: '#3b82f6', name: '深空蓝' },
{ color: '#10b981', name: '运行绿' },
{ color: '#f59e0b', name: '告警橙' },
{ color: '#ef4444', name: '危险红' },
{ color: '#8b5cf6', name: '紫电' },
{ color: '#14b8a6', name: '海雾青' },
{ color: '#22d3ee', name: '冰晶蓝' }
]
const handleColorChange = (color) => {
@@ -128,24 +124,14 @@ watch(() => props.modelValue, (newValue) => {
.custom-color-picker {
::v-deep(.el-color-picker__trigger) {
border: 1px solid #e5e7eb;
border: 1px solid rgba(0, 212, 255, 0.22);
border-radius: 6px;
transition: all 150ms ease-in-out;
&:hover {
border-color: #9ca3af;
border-color: rgba(0, 212, 255, 0.42);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
}
.dark .custom-color-picker {
::v-deep(.el-color-picker__trigger) {
border-color: #4b5563;
&:hover {
border-color: #6b7280;
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.16);
}
}
}

10
src/view/layout/setting/components/themeModeSelector.vue
View File

@@ -1,15 +1,11 @@
<template>
<div class="flex justify-center">
<div class="inline-flex bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-1 gap-1">
<div class="gva-setting-tab-bar inline-flex rounded-lg p-1 gap-1">
<div
v-for="mode in themeModes"
:key="mode.value"
class="flex flex-col items-center justify-center px-4 py-3 rounded-md cursor-pointer transition-all duration-150 ease-in-out min-w-[64px]"
:class="[
modelValue === mode.value
? 'text-white shadow-sm transform -translate-y-0.5'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700'
]"
class="gva-setting-tab-item flex flex-col items-center justify-center px-4 py-3 rounded-md cursor-pointer min-w-[64px]"
:class="{ 'is-active': modelValue === mode.value }"
:style="modelValue === mode.value ? { backgroundColor: primaryColor } : {}"
@click="handleModeChange(mode.value)"
>

61
src/view/layout/setting/index.vue
View File

@@ -8,8 +8,8 @@
class="theme-config-drawer"
>
<template #header>
<div class="flex items-center justify-between w-full px-6 py-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white font-inter">系统配置</h2>
<div class="gva-setting-header flex items-center justify-between w-full px-6 py-4">
<h2 class="gva-setting-title text-xl font-semibold font-inter">系统配置</h2>
<el-button
type="primary"
size="small"
@@ -22,19 +22,15 @@
</div>
</template>
<div class="bg-white dark:bg-gray-900">
<div class="px-8 pt-4 pb-6 border-b border-gray-200 dark:border-gray-700">
<div class="gva-setting-body">
<div class="gva-setting-tabs-wrap px-8 pt-4 pb-6 border-b">
<div class="flex justify-center">
<div class="inline-flex bg-gray-100 dark:bg-gray-800 rounded-xl p-1.5 border border-gray-200 dark:border-gray-700 shadow-sm">
<div class="gva-setting-tab-bar inline-flex rounded-xl">
<div
v-for="tab in tabs"
:key="tab.key"
class="px-6 py-3 text-base text-center cursor-pointer font-medium rounded-lg transition-all duration-150 ease-in-out min-w-[80px]"
:class="[
activeTab === tab.key
? 'text-white shadow-md transform -translate-y-0.5'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700'
]"
class="gva-setting-tab-item px-6 py-3 text-base text-center font-medium min-w-[80px]"
:class="{ 'is-active': activeTab === tab.key }"
:style="activeTab === tab.key ? { backgroundColor: config.primaryColor } : {}"
@click="activeTab = tab.key"
>
@@ -110,10 +106,6 @@
.theme-config-drawer {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
::v-deep(.el-drawer) {
background: white;
}
::v-deep(.el-drawer__header) {
padding: 0;
border: 0;
@@ -124,12 +116,6 @@
}
}
.dark .theme-config-drawer {
::v-deep(.el-drawer) {
background: #111827;
}
}
.font-inter {
font-family: 'Inter', sans-serif;
}
@@ -142,38 +128,7 @@
&:hover {
transform: translateY(-2px);
filter: brightness(0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
&:hover {
background: #9ca3af;
}
}
.dark ::-webkit-scrollbar-track {
background: #1f2937;
}
.dark ::-webkit-scrollbar-thumb {
background: #4b5563;
&:hover {
background: #6b7280;
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.18);
}
}
</style>

26
src/view/layout/setting/modules/appearance/index.vue
View File

@@ -3,9 +3,9 @@
<!-- Theme Mode Section -->
<div class="mb-10">
<div class="flex items-center justify-center mb-6">
<div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
<span class="px-6 text-lg font-semibold text-gray-700 dark:text-gray-300">主题模式</span>
<div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
<div class="gva-setting-divider h-px flex-1"></div>
<span class="gva-setting-section-title px-6 text-lg font-semibold">主题模式</span>
<div class="gva-setting-divider h-px flex-1"></div>
</div>
<div class="section-content">
@@ -19,9 +19,9 @@
<!-- Theme Color Section -->
<div class="mb-10">
<div class="flex items-center justify-center mb-6">
<div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
<span class="px-6 text-lg font-semibold text-gray-700 dark:text-gray-300">主题颜色</span>
<div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
<div class="gva-setting-divider h-px flex-1"></div>
<span class="gva-setting-section-title px-6 text-lg font-semibold">主题颜色</span>
<div class="gva-setting-divider h-px flex-1"></div>
</div>
<div class="section-content">
@@ -35,16 +35,16 @@
<!-- Visual Accessibility Section -->
<div class="mb-10">
<div class="flex items-center justify-center mb-6">
<div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
<span class="px-6 text-lg font-semibold text-gray-700 dark:text-gray-300">视觉辅助</span>
<div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
<div class="gva-setting-divider h-px flex-1"></div>
<span class="gva-setting-section-title px-6 text-lg font-semibold">视觉辅助</span>
<div class="gva-setting-divider h-px flex-1"></div>
</div>
<div class="section-content">
<div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
<div class="gva-setting-card rounded-xl p-6">
<SettingItem label="灰色模式">
<template #suffix>
<span class="text-xs text-gray-400 dark:text-gray-500 ml-2">降低色彩饱和度</span>
<span class="text-xs gva-setting-hint ml-2">降低色彩饱和度</span>
</template>
<el-switch
v-model="config.grey"
@@ -54,7 +54,7 @@
<SettingItem label="色弱模式">
<template #suffix>
<span class="text-xs text-gray-400 dark:text-gray-500 ml-2">优化色彩对比度</span>
<span class="text-xs gva-setting-hint ml-2">优化色彩对比度</span>
</template>
<el-switch
v-model="config.weakness"
@@ -64,7 +64,7 @@
<SettingItem label="显示水印">
<template #suffix>
<span class="text-xs text-gray-400 dark:text-gray-500 ml-2">在页面显示水印标识</span>
<span class="text-xs gva-setting-hint ml-2">在页面显示水印标识</span>
</template>
<el-switch
v-model="config.show_watermark"

10
src/view/login/index.vue
View File

@@ -69,7 +69,7 @@
<script setup>
import { captcha } from '@/api/user'
import { reactive, ref } from 'vue'
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/pinia/modules/user'
@@ -170,6 +170,14 @@
return true
})
}
onMounted(() => {
document.documentElement.classList.add('login-light-mode')
})
onUnmounted(() => {
document.documentElement.classList.remove('login-light-mode')
})
</script>
<style lang="scss" scoped>

10
src/view/masterStation/equipment/components/detail/components/alarm/index.vue
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);
}
}

10
src/view/masterStation/equipment/components/detail/components/line/index.vue
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);
}
}

74
src/view/masterStation/equipment/components/detail/components/trend/index.vue
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 {

4
src/view/securityControl/alarmList/index.vue
View File

@@ -396,9 +396,7 @@
return {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(15, 23, 42, 0.9)',
borderColor: 'transparent',
textStyle: { color: '#fff' }
...techChartTooltip
},
grid: {
left: 36,